Cours : Programmation des interfaces
Enseignant : JEBABLI Atef
Chapitre1 : Introduction au HTML
- C’est quoi le HTML ?
C'est quoi HTML en informatique ?
- Langage de balisage utilisé pour la création de pages web, permettant notamment de
définir des liens hypertextes.
- HTML : HyperText Markup Language (HTML) est le code utilisé pour structurer une
page web et son contenu. Par exemple, le contenu de votre page pourra être
structuré en un ensemble de paragraphes, une liste à puces ou avec des images et
des tableaux de données.
- C'est quoi une balise dans un texte ?
Une balise HTML est un élément (un code) que l'on insère dans un fichier texte, elle sert à
indiquer la fonction du contenu qu'elle encadre. La balise HTML commence toujours par « <
» et se termine par « > ». Par exemple, le code « H3 » signifie « titre de niveau 3 » en
langage HTML.
- Quelles sont les balises de HTML ?
Les balises HTML qu'utilise fréquemment le rédacteur web sont :
• La balise <title>
• La balise <meta description>
• Les balises titre <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• La balise <strong> (mise en gras d'une partie de texte)
• La balise <p> (paragraphe)
• La balise <br> (saut de ligne)
• La balise <ul> et <li> (liste à puces)
- Quelle est la structure d'une balise HTML ?
• Un document HTML commence par la balise <HTML> et finit par la balise </HTML>.
Il contient également un en-tête décrivant le titre de la page, puis un corps dans
lequel se trouve le contenu de la page. L'en-tête est délimité par les balises <HEAD>
et </HEAD>. Le corps est délimité par les balises <BODY> et </BODY>.
Les types des balises
Les balises paires <balise> …. </balise>
Les balises orphelines <balise> ou <balise / >
- Qu'est-ce qu'un attribut de balise ?
Un attribut est une instruction contenue à l'intérieur d'une Balise et dont le
but est de fournir une information supplémentaire sur la manière dont
cette Balise doit être interprétée.
<balise attribut1= ‘’valeur’’ attribut2=’’valeur’’ > …. </balise>
1
Cours : Programmation des interfaces
Enseignant : JEBABLI Atef
Les principales balises HTML
Fichier HTML
<HTML>...</HTML> Début et fin de fichier HTML
<HEAD>...</HEAD> Zone d'en-tête d'un fichier HTML
<TITLE>...</TITLE> Titre affiché par le navigateur (élément de HEAD)
Lire les caractères spéciaux (élément de HEAD)
<meta charset=’’utf-8’’>
(exemple : à é è ä â ï î …. )
<BODY>...</BODY> Début et fin du corps du fichier HTML
Couleur d'arrière-plan (en hexadécimal)
<BODY bgcolor="#XXXXXX">
<BODY background="[Link]"> Image d'arrière-plan
Mise en forme
<h1> …. </h1>
Jusqu’à Titre
<h6>…. </h6>
<p> …. </p> Paragraphe
<b> … </b> ou <strong> …. </strong> Texte en gras
<em> …. </em> ou <i> …. </i> Texte en italique
<u> …. </u> Texte souligné
<sup> …… </sup> Texte en exposant
<sub> …. </sub> Texte en indice
<marquee> …. </marquee> Texte annimé
<br> Retour à la ligne
<hr> Insérer une ligne
2
Cours : Programmation des interfaces
Enseignant : JEBABLI Atef
Texte en couleur où XXXXXX est une valeur
<FONT color="#XXXXXX">...</FONT>
hexadécimale
Taille des caractères où X est une valeur de 1 à 7
<FONT size=X>...</FONT>
Centre tout élément compris dans le tag
<CENTER>...</CENTER>
<p align=center, left, right > ...</p>
<h1 align=center, left, right > ...</h1> Aligne l'élément au centre, à gauche, à droite
Les listes
Liste Numérotée ou liste ordonnée
<ol>
Exemple 1 :
<li>Lundi </li>
1. Lundi
<li>Mardi </li>
2. Mardi
<li>Mercredi </li>
3. mercredi
</ol>
<ol type=’’A’’>
<li>Lundi </li>
Exemple 2 :
<li>Mardi </li>
A. Lundi
<li>Mercredi </li>
B. Mardi
</ol>
C. mercredi
Les types Possible :
type=’’1’’ type=’’A’’ type=’’a’’ type=’’I’’ type=’’i’’
Liste non Numérotée ou liste non ordonnée
<ul>
Exemple 1 :
<li>Lundi </li>
• Lundi
<li>Mardi </li>
• Mardi
<li>Mercredi </li>
• mercredi
</ul>
<ul type=’’circle’’>
<li>Lundi </li>
Exemple 2 :
<li>Mardi </li>
o Lundi
<li>Mercredi </li>
o Mardi
</ul>
o mercredi
Les types Possible :
type=’’disc’’ type=’’circle’’ type=’’square’’
3
Cours : Programmation des interfaces
Enseignant : JEBABLI Atef
Exercice 1 :
Réalisez cette paragraphe HTML qui aura cette apparence :
Bonjour, bonne année 2023, bonne santé et surtout : Meilleurs vœux !
Exercice 2 :
Réalisez un fichier HTML qui aura l’apparence suivante :
Mon repas de Noël
J’ai eu la chance d’avoir un repas de Noël excellent, puisqu’il était
composé des plats suivants :
▪ Du foie gras sur des toasts grillés (ça j’adore)
▪ Du saumon rose
▪ De la pintade avec une purée
▪ Une bûche glacée
Et le tout arrosé de Gâteaux et boisson gazeuse !
Après, j’ai pu déballer tous mes cadeaux :
1. Mamie Zohra : des DVD
2. Mamie Souad : des CD
3. Tonton Youssef : des livres
Animer le titre « mon repas de Noël » avec la balise <marquee>
