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> "ligne horizontale" saut de section,
    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