LE LANGAGE HTML
Quoi ?
Cet acronyme (mot formé d’initiale) signifie Hyper Text Markup
Langage.
Ce langage permet de structurer du contenu sur le Web. C’est un langage standard, c’est à dire
que tout développeur doit impérativement l’utiliser pour afficher le contenu de son site.
Un premier exemple
Rendez-vous de suite sur le site du lycée à l’adresse suivante :
[Link]
Un clic droit sur la page et utiliser inspecter ou inspecter l’élément (peut varier suivant le
navigateur que nous utilisons)
Voici ce que l’on peut observer.
Ce code a été écrit pour permettre
d’afficher ce que nous voyons quand
nous nous connectons au site sur un
navigateur.
Objectif de ce cours
(Re)Découvrir et comprendre ce langage.
Comme tout langage, il a subi des évolutions : à l’heure actuelle, c’est en général la version 5 du
html que nous utilisons.
Par conséquent, il serait inutile de lister toutes les syntaxes possibles, puisque dans quelques mois,
années elles vont évoluer.
Par contre, comprendre comment ce langage est fabriqué et écrit, nous permettra de nous
adapter à ces évolutions, quitte à faire des recherches spécifiques sur un élément en particulier.
Le document html minimaliste
Pour écrire du html, nous avons besoin d’utiliser un
éditeur de texte.
Le plus connu est
NotePad++, mais d’autres existent comme Brackets.
1
Chaque éditeur a ses spécificités, l’idée étant de vous aider à coder avec le moins d’erreurs
possibles.
PRINCIPE DU LANGAGE
La principale caractéristique du langage HTML est d’utiliser des balises.
Une balise est un élément qui s’écrit entre les symboles < et >
La plupart des balises sont composées en deux parties :
✗ l’une qui marque le début : <balise_html> la balise ouvrante
✗ l’autre, la fin : </balise_html> la balise fermante, même écriture avec un
slash.
AFFICHAGE DU RESULTAT
Pour visualiser le code, il faut :
✗ Enregistrer le document avec l’extension .html ;
✗ Retrouver le fichier dans le PC et l’ouvrir à l’aide d’un navigateur web
(Mozilla, Chrome, etc...)
A l’aide de Brackets, ouvrir le fichier [Link], que vous aurez récupéré auparavant sur Atrium.
Voici ce que l’on peut observer :
On remarque tout d’abord que le document
commence par :
<!DOCTYPE HTML>
Cet élément doit toujours être précisé en début de
page.
Ici on remarque plusieurs balises, essentielles pour créer un document :
✗ <html> : toute l’écriture de notre page doit s’intégrer dans cette balise ;
✗ <head> : balise qui contient des informations sur notre page, informations non visibles
directement ;
✗ <body> : tout ce qui sera visible dans notre page devra être écrit ici.
La balise <title> permet d’afficher un contenu sur l’onglet de notre page..
La seule information visible est celle écrite dans la balise <p>, tout le reste n’est que structure.
Remarque :
Afin d’éviter les erreurs d’affichage au niveau des accents par exemple, il est souvent utile de
préciser cette instruction dans le head de notre fichier [Link]
2
L’IMBRICATION
Exemple
L’élément title vient se positionner dans l’élément head : il est à l’intérieur, c’est pour cela que la
balise fermante </head> se situe après.
On parle d’imbrication du balisage.
Pensez aux poupées russes qui se placent les unes
dans les autres.
IMPORTANT : Faire apparaître cette imbrication dans votre code grâce à l’indentation.
LES PREMIERES BALISES
Balise Utilité Exemple
h1, h2, …, h5 Écrire un titre
remarque : h1 pour les gros <h1>Les fonctions affines</h1>
titres, h2 les sous-titres….
p paragraphe <p>Je souhaite comprendre le langage web</p>
strong Écrire en gras <strong>message important</strong>
em Écrire en italique <em>remarque</em>
MISSION 1
Dans le fichier [Link] ,
✗ changer le contenu du titre ;
✗ ajouter un paragraphe ;
✗ mettre au moins un mot en gras et un autre en
italique.
3
LES LIENS INTERNES ET EXTERNES EN HTML
C’est quoi ?
Un lien est un élément qui va permettre de transporter un utilisateur vers :
➢ un autre endroit du même site/page : on parle de lien interne ou ancre
➢ un autre site : les liens externes.
Comment créer un lien ?
On utilise l’élément a, pour « ancor » en anglais. Il est toujours accompagné de son attribut href
qui prendra pour valeur la cible du lien, c'est à dire le chemin permettant d'associer le fichier vers
lequel on souhaite se rendre.
Exemple de lien externe
Remarques :
L’attribut href a été intégré dans la balise ouvrante <a href=’’chemin’’ >
L’attribut target : Il permet par exemple d’ouvrir le lien dans une nouvelle page.
C’est intéressant pour que le visiteur de votre site ne perde pas votre page.
On lui attribue la valeur _blank_
MISSION 2
Dans le fichier de travail [Link] , ajouter un lien ciblant vers le site pronote de notre lycée (à
vous de trouver l'url associée)
Exemple de lien interne
Voici deux fichiers html : [Link] et [Link]
L'un présente les films à l'affiche en ce moment, l'autre le résume d'un des films.
4
[Link] [Link]
MISSION 3
Récupérer le dossier lien_interne sur Atrium
Ajouter un second résumé de film parmi ceux proposés. Vous pourrez utiliser une source sur
internet en la citant. LES IMAGES
Ajouter des liens internes permettant de passer du sommaire au résumé et inversement.
MISSION 4
Vous proposerez dans un sommaire avec vos 5 personnalités préférées.
Pour chacune d'entre elle, vous proposerez un biographie succincte :
✗ date de naissance / mort (éventuellement) ;
✗ domaine d'activité ;
✗ œuvres célèbres ;
✗ autres contenus que vous jugerez important.
Ajouter des liens de sorte à pouvoir passer du sommaire à chacune des biographies.
Il faudra aussi pouvoir retourner sur le sommaire.
5
Comment intégrer une image ?
Pour intégrer une image en html , on utilise l’élément img dans une balise orpheline, c’est à dire qui
n’a pas besoin d’être fermée.
Dans la balise, on utilise l’attribut src pour donner le chemin à suivre.
Un exemple
Le code suivant :
permet d’afficher :
En ayant préalablement enregistrer l’image [Link]
dans le même dossier que le fichier [Link]
Remarque : Les extensions d’images sont en général
jpg, jpeg ou png. On ne rentrera pas dans les détails,
mais c’est ce qu’il faut utiliser pour que l’affichage se
fasse dans tous les navigateurs.
Si vous souhaitez mettre beaucoup d’images, il faudra prendre en compte leur poids, pour éviter
que votre page ne mette trop longtemps à se charger.
Attributs supplémentaires
On peut aussi utiliser l’attribut alt, pour afficher un texte de description si l’image a des difficultés à
s’afficher.
MISSION 5
Ajouter les portraits des personnalités de la mission précédente.
6
LES LISTES
Comment intégrer une liste ?
Elles vont nous permettent d’ordonner du contenu.
Il y a deux types de listes :
➢ les listes ordonnées ou numérotations écrites en html à l’aide de
l’élément ol ;
➢ les listes non ordonnées ou puces dont la syntaxe se faite avec la balise ul.
Exemples
Liste ordonnée Liste non ordonnée
MISSION 6
Remarque : Trouver le code html afin de visualiser :
Il est possible de changer le style de la numérotation à Mes snackings préférés :
l’aide de l’attribut type. Ce dernier doit être inséré à • le céleri rave ;
l’intérieur de la balise ouvrante ul ou ol. • le choux bouilli ;
Parmi les plus utilisés, • les endives braisées.
➢ type = « a » donne une numérotation dans l’ordre
alphabétique Programme du week-end :
➢ type = « I » donne une numérotation avec les 1. Je me lève tôt ;
chiffres romains. 2. Je fais des maths :
3. Je retourne me coucher… le rêve
quoi !
7
LES TABLEAUX EN HTML
Comment créer un tableau ?
L’élément html table permet de définir un tableau
Chaque ligne est mentionnée par l’élément tr
Chaque cellule est écrite à l’aide de td
Il y a une imbrication des différentes balises formées par ces éléments.
Exemple :
Code Visualisation
Remarque :
Pas très joli, pour rappel le langage
html sert uniquement à gérer la
contenu…..
On stylisera nos tableaux très
prochainement…avec un notre
langage.
MISSION 7
Trouver le code html permettant de fabriquer l’emploi du temps de votre jour préféré de la semaine.
Remarque : Ce tableau devra au moins comporter 10 cellules sur au moins deux colonnes ou
lignes.
