Programmation Web
II- LANGAGE WEB HTML
Mbaiamné Fréderic
fredmbaiamne@[Link]
Ecole Nationale Supérieure des TIC
Télécom
Année 2023-2024 Formation
Programmation web: Langage Web HTML
HTML
Historique:
HTML = HyperText Markup Language: Créé en 1990
par Tim Burners-Lee
Développé par nécessité de créer une version allégée
du premier -trop complexe- langage de balisage
SGML (Standard Generalized Markup Language).
Depuis son apparition, plusieurs versions ont été
développées telles que:
HTML 1 (août 1991)
HTML 2 (novembre 1994)
HTML 3 (janvier 1996)
HTML 4 (avril 1998)
HTML 5 (mars 2007)
Lamia benameur(2013) Programmation Web 2
Programmation web: Langage Web HTML
HTML
Définitions:
HTML = HyperText Markup Language: Langage de
description de pages web.
Page web : un document HTML+ documents
utilisés (ex: images, sons, vidéo, etc.)
Document HTML est:
o un fichier texte, construit suivant une syntaxe
précise
o structuré par des balises
o interprété (visualisé) dans un navigateur
(Mozilla Firefox, Internet Explorer, Safari, etc.)
Lamia benameur(2013) Programmation Web 3
Programmation web: Langage Web HTML
HTML
Balises:
HTML = HTML est un langage à balises
Balise : mot clé désignant un élément particulier
Elles permettent de structurer chaque partie du
document
Elles sont encadrées par les caractères "<" et ">
• ex : <balise>
Syntaxe:
balises ouvrante et fermante :
<balise>contenu</balise> (les balises en paires).
ou balise sans contenu (vide)
<balise/> (les balises orphelines).
Lamia benameur(2013) Programmation Web 4
Programmation web: Langage Web HTML
HTML
Attributs:
Attributs = Propriétés utilisées pour donner des
indications supplémentaires aux balises.
Ex: Indiquer le nom, la position...
Toujours à l’intérieur de la balise ouvrante (ou
vide)
Ne fait pas partie du contenu de l’élément
Syntaxe:
<balise att1=“val1” att2=“val2”> ….</balise>
<balise att=“val” />
Lamia benameur(2013) Programmation Web 5
Programmation web: Langage Web HTML
HTML
Structure de base d’un document HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Titre de la page</title>
</head>
<body>
</body>
</html>
Lamia benameur(2013) Programmation Web 6
Programmation web: Langage Web HTML
HTML
Structure de base d’un document HTML
< !DOCTYPE html >: indique qu’il s’agit d’une page web
HTML.
<html></html> : La balise principale du code, englobe tout
le contenu du document HTML.
<head></head> La section entête, renseigne le navigateur
à propos de la page web qu’il va afficher : titre de la page,
encodage, les fichiers annexes.
<meta charset="utf-8"/>: indiquer l’encodage utilisé dans le
fichier ".html"
<title > </title >: indique le titre de la page web afin de
décrire ce que cette dernière contient.
<body></body> : La section Corps (contenu), contient tout
ce qui est à afficher dans la page web.
Lamia benameur(2013) Programmation Web 7
Programmation web: Langage Web HTML
HTML
structuration du contenu des pages web:
La structuration du contenu des pages web
nécessite de :
Rédiger des paragraphes pour bien structuré les
informations d’une page web ;
Structurer sa page avec les titres ;
Donner de l'importance à certains mots de son texte ;
Organiser certaines informations sous forme de listes;
organiser d’autres informations dans des tableaux;
Agrémenter le contenu d’une page web avec des
images, son, vidéos; …;
Relier les pages web avec des liens hypertexte,
Lamia benameur(2013) Programmation Web 8
Programmation web: Langage Web HTML
HTML
Organisation du contenu : Les paragraphes
La balise HTML <P> </P> permet d’organiser le
contenu d’une page web en paragraphes;
Elle s’insère au sein de la section corps:
<body> </body>
• <!DOCTYPE html>
• <html>
• <head>
• <title>Paragraphes</title>
• </head>
• <body>
• <p>Ceci est un paragraphe!</p>
• <p> Ceci est un paragraphe avec
plusieurs lignes. un paragraphe peut s’écrire
sur plusieurs lignes, tout comme sur ...</p>
• </body>
• </html>
Lamia benameur(2013) Programmation Web 9
Programmation web: Langage Web HTML
HTML
Organisation du contenu : Les titres
HTML propose six balises permettant de représenter
les titres de sections, des contenus :
<h1> … </h1> «Titre de niveau 1 » <h4> … </h4> «Titre de niveau 4»
<h2> … </h2> « titre de niveau 2 » <h5> … </h5> « titre de niveau 5 »
<h3> … </h3> « Titre de niveau 3» <h6> … </h6> « Titre de niveau 6»
• <body>
• <h1>Spécialités</h1>
• <p>Dans le cadre de sa formation en Licence,
l’ENASTIC présente 2 options!</p>
• <h2>Option MTIC</h2>
• <p> La formation en Management des TIC permet..</p>
• <h2>Option ITM</h2>
• <p> La formation en Informatique, Télécom et
Multimédia permet aux étudiants de. ..</p>
• </body>
Lamia benameur(2013) Programmation Web 10
Programmation web: Langage Web HTML
HTML
Organisation du contenu : Les listes
HTML propose deux types de listes; les listes non ordonnées
(à puces ) et les listes ordonnées.
»<ul></ul> pour créer la liste non ordonnée
Syntaxe : »<li></li> pour y ajouter les éléments de la liste
»<ol></ol> pour créer la liste ordonnée
»<li></li> pour y ajouter les éléments de la liste
<body> <body>
<h2>Liste des fruits :</h2> <h2>Liste des Etudiants :</h2>
<ul> <ol>
<li> Oranges </li> <li> Franck M.</li>
<li> Mangues </li> <li> Ali B. </li>
<li> Bananes </li> <li> Awa T. </li>
</ul> </ol>
</body> </body>
Lamia benameur(2013) Programmation Web 11
Programmation web: Langage Web HTML
HTML
Organisation du contenu : Les tableaux
HTML propose un ensemble de balises pour créer des tableaux au
sein des pages web :
»<table></table> pour insérer un tableau
Syntaxe :
»<tr></tr> pour y ajouter des lignes
»<td></td> pour définir les cellules.
La balise <th></th> est utilisée pour créer la ligne d'en-tête
<table>
<table> <tr> <th>Nom</th>
<tr> <td>Ahmat</td> <th>Age</th>
</tr>
<td>20 ans</td> <tr> <td>Ahmat</td>
</tr> <td>20 ans</td>
<tr> <td> Michelle </td> </tr>
<td>19 ans</td> <tr> <td>Michelle</td>
<td>19 ans</td>
</tr> </tr>
</table> </table>
Lamia benameur(2013) Programmation Web 12
Programmation web: Langage Web HTML
HTML
Organisation du contenu : Les images
HTML propose la balise <img/> pour introduire une image; elle
dispose de l’attribut « src » pour récupérer l’endroit de l’image et «
alt » pour décrire l’image en texte.
Syntaxe : <img src ="Nom du fichier" alt = " fichier image" />
Il existe différents formats d'image que l'on peut utiliser sur html:.
JPEG: format adapté beaucoup plus aux photos
PNG : format adapté aux graphiques (images, logos…)
GIF : format des images animées
<p> Ceci est une photo du DG de l’ENASTIC:<br />
<img src="images/[Link]" alt="Photo DG" /> </p>
<p> Ceci est le logo de du site web de l’ENASRIC
<img src="images/[Link]" alt="mon logo" /> </p>
<p> Ceci est une image animée <br />
<img src="images/[Link]" alt="Image animée" /> </p>
Lamia benameur(2013) Programmation Web 13
Programmation web: Langage Web HTML
HTML
Organisation du contenu : Les liens
HTML propose 2 types de liens, pour connecter les sites web ou les
pages au sein de ceux-ci.
Liens internes = entre 2 pages d’un même site.
Liens externes = d’un site vers un autre site.
La balise HTML <a></a> permet d’insérer des liens, elle nécessite un
attribut dit « href » pour indiquer vers quelle page le lien va conduire:
Syntaxe: <a href =" adresse"> cliquer ici </a>
<body>
<p> Ce lien interne vous dirige vers la page de contact
<a href="page_contact.html"> contactez nous</a> </p>
<p> Ce lien externe vous dirige vers le site web de
l’ENASTIC. <a href="[Link] enastic </a> </p>
</body>
Lamia benameur(2013) Programmation Web 14
