Usage minimal du HTML

Pourquoi il est toujours utile de connaître HTML et le CSS :

indispensable si on utilise pas de toolkit de composants graphiques
indispensable si on utilise des frameworks CSS ‘utiliy-based’ comme Tailwindcss
indispensable si on doit créer des web components

Activités à réaliser

installer VSCode
installer l’extension ‘HTML preview’

Exemple de document HTML :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Descriptif de la page">
    <title>Titre de la page</title>
  </head>

  <body>
    <!-- je suis un commentaire multiligne;
         je ne peux pas contenir de commentaires emboités-->
    <h1>Première partie</h1>

    <p>Paragraphe pour    lequel

    les sauts de lignes et les     espaces multiples ne comptent
        que comme un seul espace
    </p>
    <br/>
  </body>
</html>

L’intitulé <!DOCTYPE html> dénote une page HTML5
La partie <head>...</head> est optionnelle
La partie qui sera affichée est décrite dans le bloc <body>...</body>
Les espaces et les sauts de ligne (en dehors des chaînes litérales) sont des séparateurs ; s’ils sont répétés ils ne comptent que pour un
Les commentaires sont situés dans des blocs  ; ils ne peuvent pas être imbriqués

Éléments HTML

On appelle éléments HTML les blocs encadrés par des tags. Il est conseillé de fermer tous les tags, même si ce n’est pas toujours obligatoire en HTML.

Exemples :

<p style="text-size: 2em;">Paragraphe</p>
<br/>

Le contenu d’un élément HTML est la partie située entre le tag ouvrant et le tag fermant. Ce peut être un texte, ou d’autres éléments HTML.
Par exemple, le contenu de <p style="text-size: 2em;">Paragraphe</p> est le texte "Paragraphe".

Un élément HTML sans contenu peut être fermé avec le tag fermant normal, ou de façon abrégée avec un / en fin de tag ouvrant.
Exemples : <br/>, <input v-bind='login' />

Les attributs d’un éléments HTML sont placés dans le tag ouvrant sous la forme attribut="valeur".
Exemples : <p style="text-size: 2em;">, <meta charset="utf-8">

À noter :

les noms de tags et d’attributs sont case-insensitive. Il est conseillé de les écrire en minuscules. Ils doivent être composés uniquement des caractères [a-z], [A-Z], [0-9], sans tirets, même si la plupart des navigateurs acceptent les tirets haut et bas.
la valeur des attributs doit être mise entre quotes ou entre guillemets, au choix : name="Abricot", name='Abricot', name="Blanc d'oeuf", name='Une "autorité"'
\ n’est pas un caractère d’échappement

On distingue les éléments HTML de type block qui s’affichent verticalement par défaut (ex : <p>) et les éléments inline qui s’insèrent dans le flux horizontal de la ligne courante (ex: <a>)

Principaux éléments HTML de type “block”

Les éléments HTML de type ‘block’ s’affichent verticalement, les uns sous les autres.

Paragraphes, Titres de sections

<p> indique un nouveau paragraphe de texte; il ne peut contenir que du texte ou des éléments inline
<h1>, <h2>, …, <h6> indiquent des titres de paragraphes, de tailles décroissantes. Ils ne peuvent contenir que du texte ou des éléments inline

Séparations verticales

<div> indique un nouveau bloc, une rupture verticale sans type particulier
<br/> indique une rupture verticale vide (line-break)
<hr/> indique une rupture verticale avec une ligne de séparation horizontale sur toute la largeur du bloc

Listes

Exemple de liste non-numérotée :

<ul>
  <li>Rouge</li>
  <li>Vert</li>
  <li>Bleu</li>
</ul>

Exemple de liste numérotée :

<ol>
  <li>Rouge</li>
  <li>Vert</li>
  <li>Bleu</li>
</ol>

Tables

Exemple de table à 3 colonnes avec une ligne d’en-tête et 2 lignes de données :

<table>
  <tr>
    <th>Prénom</th>
    <th>Nom</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jean</td>
    <td>Bonneau</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Paul</td>
    <td>Hauchon</td> 
    <td>37</td>
  </tr>
</table>

Images

Exemples :

<img src="https://placekitten.com/300/300" width="500" height="600" />

L’image est désignée de façon absolue par une url. Elle est affichée dans une taille précise, possiblement déformante.

<img src="images/img_123.jpg" alt="description pour malvoyant" height="50%" />

Le fichier est pris dans un répertoire images relativement au répertoire de la page chargée. Elle est affichée en conservant les proportions, avec une hauteur égale à 50% de la hauteur de son parent.

Formulaires

Exemple de formulaire incluant les types d’input les plus communs :

<form action="/submit_identity" method="POST">
  Prénom :<br/>
  <input type="text" name="firstname" placeholder="Entrez votre prénom"><br/>
  Nom de famille :<br/>
  <input type="text" name="lastname" placeholder="Entrez votre nom"><br/>
  Mot de passe :<br/>
  <input type="password" name="passwd"><br/>
  Genre :<br/>
  <input type="radio" name="gender" value="male" checked>Masculin<br/>
  <input type="radio" name="gender" value="female">Féminin<br/>
  Couleur préférée :<br/>
  <select name="color">
    <option value="red">Rouge</option>
    <option value="green">Vert</option>
    <option value="blue">Bleu</option>
  </select>
  Participation :<br/>
  <input type="checkbox" name="participation" value="yes">Je souhaite participer<br/>
  Remarques :<br/>
  <textarea name="remarks" rows="10" cols="30">Texte initial</textarea>

  <input type="hidden" name="country" value="France">
  <input type="submit" value="Envoyer">
</form>

Un clic sur le bouton ‘Envoyer’ provoquera un POST à l’url ‘/submit_identity’ avec les données contenues dans les champs saisis.

Principaux éléments HTML de type “inline”

Les éléments HTML de type ‘inline’ s’insèrent dans le flux horizontalement sans commencer sur une nouvelle ligne.

Liens hypertexte

<a> est utilisé pour introduire des liens hypertexte; par exemple :

<a href="https://gitlab.enseeiht.fr">GitLab ENSEEIHT</a>

Si on souhaite ouvrir un nouvel onglet lors du clic, on ajoute l’attribut target="_blank" :

<a href="https://gitlab.enseeiht.fr" target="_blank">GitLab ENSEEIHT</a>

N’importe quel élément html peut être utilisé comme lien, par exemple une image :

<a href="/home">
  <img src="home.gif" alt="Accueil">
</a>

span

<span> ne représente rien mais permet de grouper des éléments inline, par exemple pour les styler de façon particulière :

<span class="emphatic">texte à styler</span>

Mise en value du texte

Il est possible d’appliquer certaines marques de style sans utiliser de CSS : <b> (bold), <i> (italique), <strong> (important), <em> (emphase), <small> (petit), <del> (barré), <sub> (en indice), <sup> (en exposant), <mark> (surligné)

Ancres (bookmarks)

une ancre peut être attachée à un élément avec l’attribut id, par exemple :
```
<h2 id="CH1">Chapter 1- Variation Under Domestication</h2>
```
pour qu’un lien cible cette ancre, on utilise le caractère # dans l’url, par exemple :
```
<a href="contents.html#CH1">Chapter 1</h2>
```

Caractères spéciaux

HTML Entities

espace insécable :

<p>Vive les mariés&nbsp;!</p>

< : <
> : >
& : &
" : "
' : '
¢ : ¢
£ : £
¥ : ¥
€ : €
© : ©
® : ®

Caractères Unicode par codepoint

Exemple de caractère chinois avec codepoint U+54F4 : 哴

<p>&#x54F4;</p>

Emoji

Les emojis sont des caractères unicodes comme les autres, avec des représentations qui varient selon le dispositif d’affichage. Ils sont des plus en plus nombreux et variés, et peuvent être copiés/collés avec un éditeur de texte comme VSCode.

Par exemple : ❌, 🌐, ⇨, 🇱🇧

Vidéo

<video src="palladia.mp4" width="400" height="800" loop muted autoplay controls></video>

Avec un poster :

<video src="palladia.mp4" poster="palladia.jpg" controls></video>

Fallback content

On peut mettre dans le corps de <video> :

un élément de ‘fallback’ si la vidéo ne peut pas être jouée
des alternatives de sources vidéos, qui sont essayées dans l’ordre d’ajout

<video controls>
    <source src="palladia.mp4" type="video/mp4; codecs='avc1, mp4a'">
    <source src="palladia.webm" type="video/webm; codecs='vp8.0, vorbis'">
    <source src="palladia.mov" type="video/quicktime">
    <p>Browser no likey HTML 5.</p>
</video>

Audio

Fonctionne essentiellement comme la vidéo :

<audio controls>
  <source src="homer.wav" type="audio/wav">
  <source src="homer.mp3" type="audio/mpeg">
  <source src="myAudhomerio.ogg" type="audio/ogg">
  <p>Votre navigateur ne prend pas en charge l'audio HTML5.</p>
</audio>

Activités à réaliser

cloner le projet gitlab https://gitlab.com/buisson31/fs-html-css
ajouter au projet un fichier index.html dont la structure sera celle de l’image qui suit
utiliser les images du répertoire assets ; ne pas s’occuper des couleurs, ni des tailles, ni de la mise en page
commiter le travail et le pousser vers gitlab.com

SVG : Scalable Vector graphics

Le langage SVG permet de décrire des objets graphiques vectoriels ; c’est par exemple un des formats de sortie d’applications comme Illustrator ou Inkscape.

SVG ne fait pas partie au sens strict de la spécification HTML, mais il peut être inclus directement dans des documents HTML5.

Éléments SVG :

si nécessaire ils peuvent être mis à l’échelle en gardant une définition parfaite
ils servent souvent pour la représentation des symboles
ils peuvent être stylés avec du CSS

Exemple

<!DOCTYPE html>
<html lang="fr">
   <body>
      <h1>SVG experiments</h1>

      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
      </svg>

      <svg width="17" height="16">
         <path d="M8.500,0.000 L11.301,5.028 L16.999,6.112 L13.033,10.302 L13.753,16.000 L8.500,13.561 L3.247,16.000 L3.967,10.302 L0.001,6.112 L5.699,5.028 L8.500,0.000" />
      </svg>
   </body>
</html>