LE LANGUAGE HTML
HYPERTEXT MARKUP LANGUAGE
Première version apparaît
en 1991 lors du lancement
du web
Son rôle est de gérer
et organiser le contenu
Se base sur un syntaxe
de balisage simple
Inclure des information
textes, images,....
Les balises et les
attributs
Structure d’une page
HTML
Les principales balises
de HTML
Les tableaux
Les formulaires
1 Les balises et les attributs
LES BALISES
Les commandes HTML sont encadrées par le
signe “<” et “>”.
<tagname> Contenu ...</tagname>
Voici un exemple de balise HTML :
<p>Hello world !</p>
Certaines balises ne nécessitent pas de balise de
fermeture on les appelle les balises autofermantes
ou orphelines.
<img src="[Link]"/>
<br>
<hr>
LES ATTRIBUTS
Les attributs sont les options des balises
L'attribut se place après le nom de la balise ouvrante de cette
façon :
<balise attribut="valeur"/>
Exemple:
<input type=”text” placeholder=”Taper votre nom”>
2 Structure d’une page HTML
<!DOCTYPE html> : C’est une "information"
au navigateur sur le type de document à
<!DOCTYPE html> attendre.
<html lang="en"> <html lang="en"></html>: Cette balise est le
conteneur pour tous les autres éléments
<head>
<meta charset="UTF-8"> <head></head> : Cette section contienne
quelque information sur la page comme son titre,...
<title>Document</title> <meta charset="UTF-8"> : Cette balise indique
l'encodage utilisé dans votre fichier “.html”.
</head>
<title>Document</title> : C'est le titre de la
<body> page.
<p>Hello word</p>
<body></body>: Tout ce qui sera écrit ici
</body> sera affiché à l'écran.
<p>Hello word</p>: Pour définir un
</html> paragraphe.
LES BALISES
STRUCTURANTES
DE HTML5
3 Les principales balises de HTML
Les commentaires
Un commentaire en HTML est un texte qui sert
simplement de mémo.
Cela ne change rien à l'affichage de la page.
Exemple :
<!--Ceci est un commentaire-->
Les paragraphes
La balise <p> définit un paragraphe.
L’élément p crée automatiquement un espace avant et après lui
Exemple :
<p>Hello world !</p>
Retour à la ligne Ajout un ligne
On utilise la balise <br> On utilise la balise <hr>
Elle permet un retour à la ligne sans Elle permet d’inserer un ligne
séparer le paragraphe. horizontal
Exemple : Exemple :
<p>Bonjour tout le <br> monde </p> <p>Bonjour tout le <hr> monde </p>
LES TITRES
<h6>Titre de niveau 6</h6>
<h5>Titre de niveau 5</h5>
<h4>Titre de niveau 4</h4>
<h3>Titre de niveau 3</h3>
<h2>Titre de niveau 2</h2>
<h1>Titre de niveau 1</h1>
LA MISE EN VALEUR
Mettre un peu en valeur:
utiliser la balise <em></em>
Exemple :
Bonjour <em>tout le monde </em>
Mettre bien en valeur:
utiliser la balise <strong></strong>
Exemple :
Bonjour <strong>tout le monde </strong>
Marquer le texte :
utiliser la balise <mark></mark>
Exemple :
Bonjour <mark>tout le monde </mark>
Les listes ordonnées
Utiliser la balise <ol></ol>
<li>......</li>: délimite un élément de
la liste (un numéro)
Type = 1 | a | A | i | l
Exemple :
<ol>
<li>Fraise</li>
<li>Banane</li>
<li>Cerises</li>
</ol>
Les listes non ordonnées
Utilise la balise <ul></ul>
<li>...</li> : délimite un élément de la
liste (une puce)
Type: disc | circle | square
Exemple :
<ul>
<li>Fraise</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>
Les listes de descriptions
Utilise la balise <dl></dl>
Les elements sont delimité par <dt> et <dd>
Exemple :
<dl>
<dt>HTML </dt >
<dd>Langage de structuration</dd>
<dt>CSS </dt>
<dd>Langage de mise en page, design</dd>
</dl>
Création des liens
Pour faire un lien on utilise la balise <a>....</a>
Les attributs de cette balise :
Href : url du document à ouvrir lors du clic
sur le lien
Title : texte affiché au survol du lien
Exemple :
Lien interne :
<a href=”#p3">Afficher le titre</a>
<a name=”p3">Bonjour tout le monde </a>
Lien Externe
< a href=”[Link]”>Facebook</a>
Ajout d’image
Pour ajouter une image on utilise la balise <img>
Les attributs de cette balise :
src : url de l’image (emplacement de
l’image
alt : affiche ce texte lorsque l’image n’est
pas affichable
title : ajouter une infobulle
Exemple :
<img src="[Link]" title="Logo restaurant"
alt="logo restaurant">
Les balises universelles
Il existe deux balises génériques, ces deux
balises sont:
<span> </span > (inline ) :
n'introduit pas de saut de lignes.
<div> </div > (block ) :
introduit un saut de ligne.
Exemple :
4 Les tableaux
Tableau simple
Exemple: <tr>
<td>Hajer</td>
<!DOCTYPE html>
<td>19</td>
<html lang="en">
<td>Sfax</td>
</tr>
<head> <tr>
<meta charset="UTF-8"> <td>Ahmed</td>
<meta name="viewport" <td>36</td>
content="width=device-width, initial-scale=1.0"> <td>Sousse</td>
<title>Document</title> </tr>
</head> <tr>
<td>Salah</td>
<body> <td>15</td>
<table border="1"> <td>Gabes</td>
<caption>Liste des étudians</caption> </tr>
<tr> </table>
<th>Nom</th>
<th>Age</th> </body>
<th>Ville</th>
</tr> </html>
Tableau structuré
<tr>
Exemple: <td>Ahmed</td>
<table border="1"> <td>36</td>
<caption>Liste des <td>Sousse</td>
étudians</caption> </tr>
<thead> <tr>
<tr> <td>Salah</td>
<th>Nom</th> <td>15</td>
<th>Age</th> <td>Gabes</td>
<th>Ville</th> </tr>
</tr> </tbody>
</thead> <tfoot>
<tbody> <tr>
<tr> <th>Nom</th>
<td>Hajer</td> <th>Age</th>
<td>19</td> <th>Ville</th>
<td>Sfax</td> </tr>
</tr> </tfoot>
</table>
Fusionner un tableau
Fusion de colonnes :
On utilise l’attribut colspan dans <td> et <th>
La fusion s’effectue horizentalement
Fusion de lignes:
On utilise l’attribut rowspan dans <td> et <th>
La fusion s’effectue verticalement
Exemple:
<body>
<table border="1">
<caption>Exemple de fusion d'un tableau</caption>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
<th>Titre 3</th>
</tr>
<tr>
<td colspan="3"> 3 cellules fusionnées en ligne</td>
</tr>
<tr>
<td rowspan="2"> 2 cellules fusionnées en colonne</td>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
5 Les formulaires
Création des formulaires
Formulaire: C’est une fiche à remplir par l’utilisateur
On utilise la balise <form>.......</form>
Action : c'est l'adresse de la page ou du programme qui va traiter les
informations
Method: cet attribut indique par quel moyen les données vont être
envoyées
Get: Les informations seront envoyées dans l'adresse de la page
([Link]
Post: Les données saisies dans le formulaire ne transitent pas par
la barre d'adresse.
Exemple :
<form method ="post" action=” ”>.....</form>
Les objets de formulaire
Insertion d’un élément Audio
On utilise la balise <audio>.......</audio>
Les attributs de la balise :
controls : pour ajouter les boutons « Lecture », « Pause » et la barre
de défilement.
width : pour modifier la largeur de l'outil de lecture
loop : la musique sera jouée en boucle.
autoplay : la musique sera jouée dès le chargement de la page.
preload : indique si la musique peut être préchargée dès le
chargement de la page ou non.
Exemple:
<audio src ="in the gallery.mp3" controls></audio>
Insertion d’un élément Video
On utilise la balise <video>.......</video>
Les attributs de la balise :
poster : image à afficher à la place de la vidéo tant que celle ci n'est
pas lancée.
controls : pour ajouter les boutons « Lecture », « Pause » et la barre
de défilement.
width : pour modifier la largeur de la vidéo.
height : pour modifier la hauteur de la vidéo.
loop : la vidéo sera jouée en boucle.
autoplay : la vidéo sera jouée dès le chargement de la page.
preload : indique si la vidéo peut être préchargée dès le
chargement de la page ou non.
Exemple:
<video src ="[Link]" controls width="600"> </video>
MERCI POUR VOTRE
ATTENTION