Header
🠖 Thème 1 - Web

Écrire du HTML

Les bases du HTML

Le langage HTML est un langage de balisage car il utilise des balises <...> pour donner du sens à ses éléments.
Il existe deux types d'éléments en HTML : |Ceux définis avec une balises ouvrante <...>
et une balise fermante . | Ceux définis avec une balise orpheline <.../> Exemples : |

Ceci est un paragraphe

| pour insérer une image. Il existe un grand nombre de balises différentes afin de créer des titres, des hyperliens, des images ou des animations ...
Remarque : Les caractères < et > s'appellent des chervons.
Voici le code HTML d'une page très simple et ses explications :
Titre de l'onglet

Bonjour !


Voici un exemple de page HTML...

Au début d'un document HTML, on trouve toujours la balise spéciale
</xml> suivi de la balise ouvrante qui ne sera fermée (avec ) qu'à la fin du document.
Entre les balises ... on trouve le code HTML qui est interprété par le navigateur. Elles contiennent toujours deux autres balises :
  • La tête .... Ce qu'elle contient n'est pas affichée par le navigateur. Il s'agit d'informations importantes pour aider le navigateur à afficher correctement la page. Par exemple :
    • précise au navigateur d'utiliser le codage des caractères utf-8. Il sera important de toujours ajouter cette balise dans la tête des pages HTML pour ne pas avoir de problème d'affichage des caractères accentués (é, è, ö, ...).
    • ... ne correspond pas au titre de la page mais à ce que doit afficher le navigateur dans l'onglet de cette page.
  • Le corps .... Il s'agit du contenu de la page. Ici, on trouve plusieurs autres balises :
    • un grand titre entre les balises

      ...

      . Il existe six niveaux de titres possibles : de

      jusqu'à
      .
    • un saut à la ligne avec la balise orpheline
      .
    • un paragraphe entre les balises

      ...

      .
    • un commentaire avec la balise spéciale . Ce commentaire est utile pour le développeur web pour expliquer le code. Il n'est pas interprété par le navigateur et n'est pas affiché.
  1. Modifier le code source HTML ci-dessous afin que la page corresponde exactement à l'affichage ci-contre.
  2. Faire valider par le professeur.
Mon premier site

Quand je serai développeur web...

Mon salaire

En début de carrière : 2 à 3000€/mois

Jusqu'à 7000€/mois
Question 1/2 : ✓
Thème 1 - Web / 2 - HTML Mémorisation 0x Réussite 0/0/3
Où doit être écrit ce que l'on souhaite afficher dans la page web ?
<html> <head> 1 </head> <body> 2 </body> 3 </html> 4
Cocher la bonne réponse.

Créer un hyperliens

La balise texte permet de créer un hyperlien.
Par défaut, un hyperlien apparaît souligné en bleu et l'icône de la souris change à son survol pour montrer la possibilité de cliquer.

Exemple :
Chocolatine donne Chocolatine.

Ajouter une image ou une vidéo

Les balises <img/> ou <video/> sont des balises orphelines qui permettent d'insérer respectivement une image ou une video.
Exemples : ;
Explications : - L'attribut src est l'adresse du fichier (image ou vidéo) à insérer. - La taille de l'image peut être précisée grâce aux attributs width (largeur) et height (hauteur), en pixels ou bien en pourcentage de l'affichage (exemple : "70%"). Pour ne pas déformer l'image, on peut n'écrire qu'un seul de ces attributs. L'autre est alors automatiquement bien ajusté. - Pour les vidéos, l'attribut controls est nécessaire pour afficher les boutons de contrôle de la vidéo : lecture, pause ... - On peut ajouter d'autres attributs comme alt="message", pour donner une description du fichier utilisé notamment pour les non-voyants. C'est aussi ce texte qui s'affichera en cas de problème d'accès au fichier.

Remarque : Pour définir l'attribut src d'une balise ; avec une adresse sur internet, il faut que ce lien pointe vers un fichier image (ayant l'extension : .jpg, .png, .gif).
On pourra utiliser un clic droit sur l'image puis "copier l'adresse de l'image" pour ensuite coller son adresse dans src="...".

  1. Écrire dans la fenêtre «code source HTML» ci-dessous une instruction qui affiche une image de votre choix (on pourra choisir une image libre de droits sur Pixabay).
  2. En incluant l'image dans un hyperlien, faites en sorte qu'un clic sur l'image renvoie vers l'URL : "https://fr.wikipedia.org/wiki/Tim_Berners-Lee".
  3. Faire valider par le professeur.

Structurer la page

  • Un élément
    ...
     permet de diviser une page en blocs qui se superposent les uns sur les autres.
  • Un élément ... permet de créer des zones côte-à-côte.
  • Ces balises permettent de disposer le contenu d'un site.
〈div〉
〈div〉
〈div〉
〈span〉
〈span〉
〈span〉
Question 1/4 : ✓
Thème 1 - Web / 2 - HTML Mémorisation 0x Réussite 0/0
Associer chaque balise à son rôle :
un paragraphe
disposer côte-à-côte
un titre principal
une image
un hyperlien
disposer l'un au dessus de l'autre
une liste non-ordonnée
Former les bons couples par glisser-déposer ou clics successifs.

Créer un tableau

  • Les balises ...
     permettent de créer un tableau, dont le titre est donné entre les balises ....
  • On organise ensuite, entre ..., le corps du tableau, en énumérant chaque ligne entre ... (table row), puis chaque cellule de la ligne (les colonnes) entre ... ou bien ... pour les titres des colonnes.
Dans le tableau suivant :
  1. À quoi sert l'attribut rowspan utlisé dans ce tableau ?
  2. Supprimer la colonne "Lieu".
  3. Ajouter une ligne avec l'évènement de votre naissance.
  4. Faire valider par le professeur.
L'attribut colspan=2 permet de fusionner deux cellules sur deux lignes. Il existe l'équivalent pour les colonnes avec colspan.
Dates clés
Date Évènement Inventeur
1965 Invention de l'hypertexte Ted Nelson
1989 Naissance du web Tim Berners Lee
2021 Site Chocolatine Lycée Déodat de Séverac
Question : ✓
Thème 1 - Web / 2 - HTML Mémorisation 0x Réussite 0/0
Associer chaque balise à son rôle :
écrire un tableau
fusionner 3 colonnes sur une ligne
une cellule quelconque
fusionner 3 cellules sur 3 lignes d'une même colonne
ligne d'un tableau
une cellule mise en valeur (entête de colonne)
titre d'un tableau
Former les bons couples par glisser-déposer ou clics successifs.

Listes des balises

balise |effet | balise |effet
|retour à la ligne | |image

|paragraphe | |video

à
| titre du plus au moins important| | hyperlien |texte en gras| |texte souligné |texte en italique| |texte barré |citation| | Commentaire |texte en indice| |texte en exposant
  1. ...
 |
  1. liste
  2. numérotée
|
  • ...
 |
  • liste
  • d'items
|blocs supersposés||côte-à-côte |tableau||titre du tableau |ligne du tableau|
|cellule du tableau