Mise en forme du texte
| balise | Nom Angl. | Explications | Observations | exemple |
|---|---|---|---|---|
| b | bold | texte en gras | <b>texte en gras<b> |
|
| i | italic | texte en italique | <i>texte en italique</i> |
|
| u | underline | texte souligné | <u>texte souligné</u> |
Mise en forme de la structure du texte
| balise | Nom Angl. | Explications | Observations | exemple |
|---|---|---|---|---|
| p | paragraph | définit un paragraphe de texte - petit saut de ligne auto à la fin ... | <p>paragraphe1</p> <p>paragraphe2</p> | |
| br | break | saut de ligne imposé. note, cette balise est orpheline (pas besoin de la refermer, c'est un événement ponctuel) | ||
| hr | horizontal row | ligne horizontale de séparation. petite déco de base, balise orpheline (obsolète) | ||
| ul | unordonned List | Liste non ordonnée =liste à puces |
| |
| ol | ordonned List | Liste ordonnée =liste à numéros |
| |
| li | List item | un article, une ligne d'une liste. Note, un ol ou un ul contient toujours des li | ||
| table | table | un tableau ou table. utilise les attributs : border, align, width, ... Contient des tr | voir le chapitre dédié | Cette liste est dans une table ;) |
| tr | table row | une ligne de table. Contient des td | Chaque ligne de couleur de cette table et ... | |
| td | table data | une donnée/colonne de table. Contient du texte html | ... Chaque cellule de cette liste |
Structure et mise en page
les lignes marquées d'une * sont du langage html5.Pour ces balises, voir des maquettes de sites pour apprendre comment elles peuvent être architecturées sur internet.
Pas d'exemples ici, voir le chapitre spécifique sur la structure des pages html
| balise | Nom Angl. | Explications | Observations |
|---|---|---|---|
| DOCTYPE | doc type | Indique que la page est en html | écrire <!DOCTYPE HTML> |
| html | html | Commence le code html | |
| head | head | Encadre des balises, des informations de service | Ne contient principalement que meta, title, link et script |
| body | body | Encadre le contenu affiché de la page html | contient toutes les balises sauf celles ci-dessu (en théorie) |
| div | division | Division, calque, espace banalisé faire la mise en forme, le positionnement | Contient n'importe quoi |
| nav | navigation | * Menu de navigation dans le site, dans la page ou une section | Ne contient souvent que des listes de liens hypertextes |
| aside | aside | * Bloc de texte "à coté" | Contient souvent des div de news ou autre textes, nav de menu vertical, ... |
| header | header | * Entête de bloc de texte (page, section ou article) | Remplace souvent h1 mais peut contenir plus de code |
| section | section | * Bloc de textes sur un même thème dans la page, liste d'articles | Contient : header, paragraphes, articles, footer. |
| article | article | * Textes sur le même sujet ; dans section ou div | paragraphes, texte brut ou n'importe quoi |
| footer | footer | * Pied de bloc de texte | Pied d'article, de section ou de page |
Objets embarqués simples et liens entre et à l'intérieur des pages
Ces balises sont orphelines (comme br et hr). Elle servent à marquer un événement ponctuel et ont souvent besoin d'attributs comme src (=la source de l'image) et href (=la cible du lien hypertexte).
Pour cela, on utilise des attributs (ou paramètres) obligatoires. En voici quelques exemples :
| balise | Nom Angl. | Explications | Observations | exemple |
|---|---|---|---|---|
| img | image | importation d'une image | Attribut src (source) obligatoire qui contient le chemin vers l'image | <img src="images/monimage.png"> |
| a | anchor (ancre) | lien hypertexte vers une autre page, un autre site | Attribut href (hypertext reference) obligatoire : contient l'URL de la page cible | <a href="page2.html">texte apparent</a> |
| a | anchor (ancre) | lien hypertexte vers une autre ancre dans la même page | href contient alors # suivi du nom de l'ancre visée | <a href="#hautDePage">texte apparent</a> |
| a | anchor (ancre) | cible d'une autre ancre dans la même page | Nécessite l'attribut name qui indique le nom de l'ancre | <a name="hautDePage">texte apparent</a> |