HyperText Markup Language
Formatage des textes
Après cette présentation
- La gestion des espaces et retours à la ligne tu découvriras
- Mettre en commentaire du code tu pourras
- Structurer des textes en HTML tu sauras
- Les bons et les mauvais éléments HTML tu différencieras
- Le pouvoir sémantique des éléments HTML tu maîtriseras
Espaces et retours en html
éléments html que nous allons étudier
| Commentaires | <!-- mon commentaire --> |
| Saut de ligne (retour chariot) | <br> <wbr> |
| Saut de section | <hr> |
| Italic, gras et souligné | <i> <b> <u> |
| Mots importants | <em> <strong> |
| Grand et petit | <big> <small> |
| Code et texte pré-formaté | <code> <kbd> <pre> |
Et c'est pas fini...
et quand y en a plus ... ben y en a encore
| Surligner un texte | <mark> |
| Evolution du contenu | <s> <ins> <del> |
| Indice et exposant | <sub> <sup> |
| Définition et abréviation | <dfn> <abbr> |
| Temps (heure et date) | <time> |
| Informations sur l'auteur | <address> |
| Références et citations | <cite> <q> <blockquote> |
Bon la c'est fini ... ouf
SAUT DE LIGNE <BR> ET saut DE SECTION <HR>
| <br> | (pour line break) est l'équivalent du retour chariot |
| <wbr> | (pour Word Break Opportunity) position dans le texte où le navigateur peut éventuellement revenir à la ligne |
| <hr> |
changement de thème |
Ne pas utiliser les <br> pour créer des espaces verticaux !
Donner du sens et pas du style
- Ne jamais utiliser HTML pour la mise en forme ou le style
- Ne pas utiliser <b>, <i>, <u>, <big>, <small>
- <em> et <strong> sont utilisés à l'intérieur d'un bloc de texte
- HTML définit la structure d'un document
- HTML décrit le sens des contenus aux robots : sémantique
| Mise en forme |
<b> - gras | <i> - italic | <u> - souligné <big> - grand | <small> - petit |
| Sémantique |
<em> - emphase (moyenne importance) <strong> - important (très important) |
afficher et partager du code
| <code> | représente un fragment de code machine. |
| <kbd> | (pour Keyboard Input) représente les entrées effectuées par l'utilisateur. Ex : ligne de commande, raccourci clavier, ... |
| <pre> | (pour Preformatted Text) texte pré-formaté. Idéal pour partager plusieurs ligne de code. |
- <code> et <kbd> sont utilisés à l'intérieur d'un bloc de texte
- <pre> entoure, définit, un bloc de texte comme étant du code
- <pre> affiche tous les caractères : espaces, fabulations, ...
- Comment afficher les caractères "<" et ">" ? HTML Entities
Evolution du contenu
| <mark> | représente du texte surligné |
| <s> | (pour Strikethrough) permet d'afficher du texte barré au sens où celui-ci n'est plus d'actualité ou n'est plus pertinent |
| <ins> | (pour Inserted Text) représente une morceau de texte qui a été ajouté à un document. |
| <del> | (pour deleted Text) représente une portion de texte ayant été supprimée d'un document |
Tous ces éléments doivent être utilisés dans d'un bloc de texte
soyons précis ...
| <dfn> | représente la définition d'un terme |
| <abbr> | abréviation et permet, de façon optionnelle, d'en fournir une description complète |
| <time> | représente un date ou une heure précise |
| <address> | élément de contact |
| <sup> <sub> | Textes en exposant et indice |
<dfn> <abbr> <time> sont utilisés à l'intérieur d'un bloc de texte
<address> entoure, définit, un bloc de texte
références
| <cite> | contient le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture… |
| <q> | (pour Quote) citation courte. Peut contenir des citations courtes ne nécessitant pas plusieurs paragraphes. |
| <blockquote> | citation longue |
<cite> <q> sont utilisés à l'intérieur d'un bloc de texte
<blockquote> entoure, définit, un bloc de texte
101 - 03 - HTML - Formatage du texte
By Steve Fallet
101 - 03 - HTML - Formatage du texte
- 193
