HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

Dimension: px

Commencer à balayer dès la page:

Download "HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom"

Serge Thomas
il y a 7 ans
Total affichages :

1 HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom

2 HTML Pour le fond -> HTML Pour la forme -> CSS Les balises Les balises orphelines Attributs de balise

3 LES BALISES PRINCIPALES HTML <!DOCTYPE html>

4 COMMENTAIRES <- - ceci est un commentaire

5 ORGANISATION DU TEXTE <p>paragraphe</p> <br/> <h1>mon plus gros titre</h1> <h2>un titre un peu moins gros</h2> <h6>tout petit minuscule titre</h6> <em>mots importants</em> <strong>mots super importants</strong> <mark>mots à faire ressortir</mark>

6 LES LISTES Puces sans ordre <ul> <li>un élément</li> <li>un autre élément</li> </ul> Numérotation <ol> <li>élément1</li> </ol> <li>élément2</li>

7 LES LIENS Vers une autre page: <a href=" autrepage.html">le lien</a> Vers une ancre dans la même page <a href=" #labelancre ">Le lien</a> Nom de l ancre définit par attribut id L attribut title pour infobulle L attribut target pour l ouverture de la page

8 LES IMAGES De préférence PNG Balise orpheline: <img src="pathimage.png" alt="txt"/> Attribut title pour info bulle Dans <a></a> pour img cliquable

9 LES FIGURES <figure> <img src= /> <figcaption>texte expliquatif</figcaption> </figure>

10 LES TABLEAUX <table> <caption>titre</caption> <thead> <tr> <th> <tfoot> <tbody> <tr> <td> Fusion avec colspan et rowspan: <td colspan="2">

11 MISE EN FORME CSS Pour la mise en forme À mettre dans un fichier css séparé Faire le lien dans la balise <head></head> <link rel="stylesheet" href="fichier.css">

12 SURCHARGE DE BALISE

13 SURCHARGE DE BALISE SPÉCIFIQUE Avec id (unique) et class Dans HTML: <p class="introduction">bonjour</p> Dans CSS: Si id -> #introduction

14 BALISES UNIVERSELLES <span> </span> balises inline <div> </div> balises block

15 SÉLECTION DE BALISES Sélecteur universel pour toutes les balises: * Balise inclus dans une autre: em contenue dans h3 Balise qui suit une autre: p après h3

16 TAILLE DE TEXTE Propriété font-size Taille absolue : en px, en cm ou mm. (déconseillé) Taille relative : en pourcentage, em ou ex 1em = taille normal ex comme em mais + petit Ou % Ou small, medium, large

17 POLICE Tous les navigateurs doivent l avoir Propriété font-family Plrs valeurs pour le cas ou police absente CSS3 -> téléchargement auto possible: Fichier 1Mo fontsquirrel.com et dafont.com

18 POLICE PERSO

19 MISE EN FORME DE TEXTE Avec font-style: Italique: italic Oblique : oblique Avec font-weight: Gras : bold Avec text-decoration: Souligné : underline Barré : line-through Ligne au-dessus : overline Clignotant : blink

20 ALIGNEMENT Propriété text-align: Left Center Right Justifty

21 ÇA FLOTTE Propriété float sur un élément Permet de faire flotter l élément: À gauche avec float : left À droite avec float : right On stoppe le flottement avec clear Flottement gauche avec clear : left Flottement droite avec clear : right Tout flottement avec clear : both

22 COULEUR ET FOND Couleur du texte avec propriété color: color : lacouleur Ou en hexa : #FF5A28 Ou fonction rgb(123,56,96) Couleur du fond : avec propriété background-color

23 IMAGE DE FOND background-image : url("imagedefond.png") S applique à tout block Comportement du fond avec: background-attachment: fixed : le fond reste fixe scroll : le fond défile avec le texte background-repeat: no-repeat: pas de répétition repeat-x : répète horizontalement repeat-y : répète verticalement Repeat : répète en mosaïque

24 IMAGE DE FOND (SUITE) Background-position: En px Ou avec top,left,right,bottom,center Ou en combinant (ex: top left) Possibilité de spécifier plrs fonds (CSS3): Séparer url par des virgules

25 TRANSPARENCE D UN ÉLÉMENT Propriété opacity (entre 0 et 1) Ou fonction RGBa(vR,vV,vB,vO)

26 LES BORDURES Border-width : 2px Border-color : blue Border-style: Solid Dotted Double Possibilité de spécifier une seule bordure Arrondi avec border-radius en px Ombres avec box-shadow et text-shadow

27 APPARENCE DYNAMIQUE nomelement:hover pour le survol nomelement:active pour le clic nomelement:focus pour le focus

28 BALISES STRUCTURANTES HTML5 <header></header> <nav></nav> <section></section> <aside></aside> <article></article> <footer></footer>

29 SCHÉMA BALISES STRUCTURANTES

30 LES BOÎTES Différence balises inline et balises block Balises génériques autres: Inline -> <span></span> Block -> <div></div>

31 DIMENSIONNEMENT DE BOÎTES Dimensions: Width et height en px ou % Marges: Intérieures : padding Extérieures : margin Spécifique avec: Margin-top, margin-bottom Pareil pour padding-left, padding-right Centrer avec margin : auto Si dépassement du texte -> overflow : auto

32 MISE EN PAGE (INCOMPLET) Propriété display : inline-block Permet de positionner Les éléments les uns à côté des autres Ensuite avec vertical-align: Baseline, top, middle Positionnement: Absolute (z-index pour chevauchement) Fixed (suit la page) Relative (décalage)

33 PHP INTRODUCTION A quoi ça sert : Générer un flux html à la volée (dynamiquement) Langage de programmation en ligne de commande Ecrire des applications clientes graphiques (PHP-GTK) Code exécuté côté serveur contrairement au javascript

34 PHP L ESSENTIEL - FOREACH

35 PHP L ESSENTIEL - SESSION

36 PHP L ESSENTIEL REQUEST, GET, POST

37 PHP L ESSENTIEL - ARRAY

38 PHP MVC - GSB Appel de index.php: Inclusion du modèle de données (pdo) Inclusion du contrôleur concerné (uc) Màj, ajout, ou récupération des données (pdo) Inclusion des vues concernées (action) Affichage (balises html) uniquement dans les vues Fragmentation maximale des vues: Factorisation pour éviter les répétitions Développer en équipe

39 FIN

Documents pareils

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations