Développement web

Cours 02

HTML

Les balises

HTML est un language balisé (comme le XML)

Il existe un très grand nombre de balises HTML

Une balise peut s'ouvrir et se fermer comme cela


<exemple> </exemple>

Certaines sont auto-fermante (notez la position du /)


<exemple />

L'espace avant le / est optionnel


<exemple/>

Certaines sont auto-fermante sans avoir de / de fermeture


<exemple>

Elles peuvent contenir du texte ou même d'autres balises


<exemple>Salut</exemple>

<exemple>
    <exemple />
</exemple>
  • Les retours à la ligne n'ont pas d'importance
  • Plusieurs espaces en valent un seul

Elles peuvent contenir des attributs qui auront une fonction particulière selon la balise


<exemple attribut="valeur"> </exemple>
  • Dans un dossier, créez un fichier page-1.html
  • Ouvrez-le dans VSCode
  • Copiez le code de la slide suivante dedans
  • Sauvegardez
  • Ouvrez-le dans Chrome

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Titre de la page</title>
    </head>
    <body>
        Hello World
    </body>
</html>

Code minimum pour une page HTML

Celles-ci doivent toujours être présentes

  • <!doctype html> indique qu'il s'agit d'une page HTML
  • <html></html> englobe toute votre page
  • <head></head> correspond à l'entête de votre page et contiendra diverses informations invisibles
  • <body></body> correspond au corps de votre page, la partie visible
  • <meta charset="UTF-8"> indique l'encodage de la page
  • <title></title> correspond au titre

Indentation

On parle d'indentation le fait d'ajouter des espaces en début de ligne afin d'améliorer la lisibilité

Dans la majorité des langages, l'indentation n'a pas d'impact sur la logique du code

On peut indenter avec 2 espaces, 4 espaces ou une tabulation

Indentation

En HTML, la convention veut qu'on indente tout ce qui se trouve entre l'ouverture et la fermeture d'une balise


<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Titre de la page</title>
    </head>
    <body>
        Hello World
    </body>
</html>

Images


<img src="https://bruno-simon.com/esin/e1-p2026/resources/image-1.jpg">
                        

<img src="image-1.jpg">

Images

La balise img supporte plusieurs attributs

  • src : Chemin vers l'image (relatif dans le dossier ou absolu depuis un autre site)
  • alt : Contenu alternatif si l'image n'a pas été chargée
  • width : largeur de l'image
  • height : hauteur de l'image

Images


<img src="https://bruno-simon.com/esin/e1-p2026/resources/image-1.jpg" alt="Titre de l'image" width="600" height="400">
                        

<img
    src="https://bruno-simon.com/esin/e1-p2026/resources/image-1.jpg"
    alt="Titre de l'image"
    width="600"
    height="400"
>

Titres


<h1>Titre principal</h1>
<h2>Titre secondaire</h2>
<h3>Titre tertiaire</h3>

Titres

Les titres n'ont pas d'attribut particulier

Le titre le plus important doit se trouver dans un h1. Il faut éviter d'avoir plusieurs h1 dans une même page

h1 > h2 > h3 > h4 > ...

Les moteurs de recherche s'en servent pour comprendre le contenu

Retour à la ligne


Mon text
<br>
<br>
<br>
La suite

Retour à la ligne

Aller à la ligne en HTML n'aura pas pour effet d'aller à la ligne sur la page

Pour cela, il faut utiliser la balise <br> pouvant aussi s'écrire <br />

Listes


Liste de courses
<ul>
    <li>Tomates</li>
    <li>Fromage</li>
    <li>Jambon</li>
</ul>

Ordre de passage
<ol>
    <li>François</li>
    <li>Jacques</li>
    <li>Nicolas</li>
</ol>

Chapitres
<ol type="I">
    <li>Premier Chapitre</li>
    <li>Deuxième Chapitre</li>
    <li>Troisième Chapitre</li>
</ol>

Listes

Une liste doit se trouver entre les balises ul ou ol et chaque item de la liste doit se trouver entre les balises li

ol permet d'avoir des numéros à la place des puces

Listes

La balise ol supporte l'attribut type pouvant avoir comme valeur

  • 1 : 1, 2, 3, 4
  • a : a, b, c, d
  • A : A, B, C, D
  • i : i, ii, iii, iv
  • I : I, II, III, IV

Paragraphes


<p>Ceci est un paragraphe</p>
<p>Ceci est un autre paragraphe</p>

Paragraphes

Les paragraphes servent simplement à délimiter des blocks de texte et à créer une marge en dessous

Balises de texte

Il existe de nombreuses balises de texte

<strong> Texte important
<em> Texte d'emphase
<small> Texte peu important
<del> Texte supprimé
<sub> Sous texte
<sup> Sur texte

Liens


<a href="page-2.html">Accéder à la page 2</a>

Liens

Les liens permettent de diriger l'utilisateur vers une autre page

Ce peut être une autre page du même site ou une page sur un autre site

Liens

La balise a supporte plusieurs attributs

  • href : Chemin vers l'image (relatif ou absolu)
  • title : Titre associé au lien (apparait en laissant le curseur sur le lien)
  • target : Comment ouvrir la page ( _blank = nouveau onglet, _self = même onglet)

Liens


<a href="page-2.html" title="Page 2" target="_blank">Accéder à la page 2</a>

Vidéo


<video src="https://bruno-simon.com/esin/e1-p2026/resources/video.mp4"></video>

Vidéo

La balise video permet d'ajouter une vidéo dans la page sans utiliser Flash

Vidéo

Elle accepte plusieurs attributs

  • src : Chemin vers le fichier vidéo (relatif ou absolu)
  • autoplay : Joue la vidéo dès que possible
  • loop : Boucle
  • controls : Affiche les contrôles de la vidéo
  • poster : Affiche une image par défaut
  • width : Largeur
  • height : Hauteur

Vidéo


<video src="http://bruno-simon.com/video.mp4" autoplay loop controls poster="mon-image.jpg" width="600" height="400"></video>
                        

<video
    src="http://bruno-simon.com/video.mp4"
    autoplay
    loop
    controls
    poster="mon-image.jpg"
    width="600"
    height="400"
></video>

Audio


<audio src="https://bruno-simon.com/esin/e1-p2026/resources/audio.mp3"></audio>

Audio

La balise audio permet d'ajouter un son dans la page sans utiliser Flash

Audio

Elle accepte plusieurs attributs

  • src : Chemin vers le fichier audio (relatif ou absolu)
  • autoplay : Joue l'audio dès que possible
  • loop : Boucle
  • controls : Affiche les contrôles de l'audio

Audio


<audio src="http://bruno-simon.com/audio.mp3" autoplay loop controls></audio>
                        

<audio
    src="http://bruno-simon.com/audio.mp3"
    autoplay
    loop
    controls
></audio>

Tableaux


<table>
    <tr>
        <th>Nom</th>
        <th>Prénom</th>
    </tr>
    <tr>
        <td>François</td>
        <td>Mitterrand</td>
    </tr>
    <tr>
        <td>Jacques</td>
        <td>Chirac</td>
    </tr>
    <tr>
        <td>Nicolas</td>
        <td>Sarkozy</td>
    </tr>
</table>

Tableaux

Un tableau est créé avec la balise table

Une ligne du tableau est créée avec la balise tr

Une colonne du tableau est créée avec la balise td

Cette colonne peut-être une entête avec la balise th

Tableaux

Table accepte plusieurs attributs

  • align : Alignement du tableau
  • bgcolor : Couleur de fond
  • border : Bordure
  • cellspacing : Espace entre les cellules
  • cellpadding : Espace à l'intérieur des cellules

Tableaux

tr accepte plusieurs attributs

  • align : Alignement horizontal du contenu
  • valign : Alignement vertical du contenu
  • bgcolor : Couleur de fond

Tableaux

td et th acceptent plusieurs attributs

  • align : Alignement horizontal du contenu
  • valign : Alignement vertical du contenu
  • bgcolor : Couleur de fond
  • width : Largeur de la cellule
  • height : Hauteur de la cellule
  • rowspan : Combien de lignes doit faire la cellule
  • colspan : Combien de colonnes doit faire la cellule

Formulaires


<form action="mon-script.php" method="GET">
    <input type="text">
</form>

Formulaires

Un formulaire est créé avec la balise form

La majorité des champs sont créés avec la balise input (sauf quelques exceptions) à l'intérieur du form

Formulaire

Form accepte plusieurs attributs

  • action : Vers quelle page emmener l'utilisateur quand il valide le formulaire
  • method : Méthode d'envoi des données

Formulaires


<form action="mon-script.php" method="GET">
    <label for="first-name">Nom</label>
    <input id="first-name" type="text">
</form>

Formulaires

La balise label permet d'associer un texte avec un champ

Ici, on associe le texte "Nom" avec le champ de texte

Pour qu'un label soit associé à un champ, on utilise la même valeure dans l'attribut for du label et dans l'attribut id du champ

Lorsque le visiteur va cliquer sur le label, ça aura le même effet que s'il avait cliqué sur le champ

Formulaires


<form action="mon-script.php" method="GET">
    <input type="text" name="text" value="Mon text">

    <br>
    <input type="password" name="password" value="password">

    <br>
    <input type="search" name="search" value="search">

    <br>
    <input type="color" name="color" value="#ff0000">

    <br>
    <input type="date" name="date" value="1990-01-17">

    <br>
    <input type="month" name="month" value="2014-03">

    <br>
    <input type="week" name="week" value="2014-W12">

    <br>
    <input type="time" name="time" value="10:25">

    <br>
    <input type="email" name="email" value="toto@tata.com">

    <br>
    <input type="tel" name="tel" value="+33631446033">

    <br>
    <input type="url" name="url" value="http://google.com">

    <br>
    <input type="number" name="number" value="1337">

    <br>
    <input type="checkbox" name="checkbox" value="1">

    <br>
    <input type="radio" name="radio" value="value">

    <br>
    <input type="range" name="range" value="60" max="100" max="20">

    <br>
    <input type="file" name="file">

    <br>
    <select name="select" multiple>
        <option value="1">Toto</option>
        <option value="2">Tata</option>
        <option value="3">Tutu</option>
    </select>

    <br>
    <textarea name="textarea" cols="30" rows="10">Mon text</textarea>

    <br>
    <input type="hidden" name="hidden" value="value">

    <br>
    <input type="reset" name="reset" value="reset">

    <br>
    <input type="submit" name="submit" value="submit">
</form>

Formulaires

Certains de ces champs ne fonctionnent pas sur tous les navigateurs

On peut se référer au site caniuse.com

Formulaires

Les données envoyées par le formulaire ne peuvent être traitées que par des script développés avec des languages "back" comme PHP, Node.js ou Python

div / span


<div>
    Du <span>contenu</span>
</div>

div / span

Ce code ne semble avoir aucun effet

Les balises div et span sont neutre par défaut

Elle n'ont aucun style

Nous les utiliserons dans le seul but de leur donner du style et regrouper des éléments

inline / block

Toutes les balises que nous venons de voir peuvent être séparées en deux catégories : Inline et Block


<span>Inline</span>
<span>Inline</span>
<span>Inline</span>

<p>block</p>
<p>block</p>
<p>block</p>

inline / block

Notez comment se positionnent les mots "inline" et "block"

Les inlines restent sur la même ligne

Les blocks prennent toute la largeur possible

Commentaires

On peut ajouter des commentaires

Ceux-ci ne seront pas interpretés par le navigateur


<!-- Ceci est un commentaire -->

Les commentaires aident à s'y retrouver dans le code

Balises sémantiques

Les balises sémantiques sont des balises qui ont pour vocation d'aider un parseur à comprend le contenu.

Un parseur (ou crawler) est par exemple un moteur de recherche venu indéxer la page.

Balises sémantiques

Nous utilisons déjà des balises sémantiques


<h1>Le titre de ma page</h1>
<h2>Le sous-titre</h2>
<p>Un petite introduction</p>

Mais il en existe plein d'autres

Balises sémantiques

⚠️ Une balise sémantique ne doit pas être utilisée pour son style

Balises sémantiques

<section> Une section de la page
<article> Un article au sens large
<header> Une entête
<footer> Une pied de page
<nav> Une navigation
<aside> Un contenu complémentaire

Liste des balises : www.w3schools.com/tags/default.asp