Cours HTML v07

Mr Ahmed EL ECHI (ah.elechi@gmail.
com | tel : 55 76 55 44)
HTML5
Ce document ne contient que certaines balises et certains attributs.
La totalité des balises et des attributs sont vus en classes dans les activités pratiques.
1 INTRODUCTION
1.1 HTML5 ?
 Est-ce qu’il y a html 4 ?
 C’est quoi la différence avec l’HTML 4 ?
1.2 OUTILS NECESSAIRES
Types d’outils Exemples d’outils

Construire une page web de A à Z Bloc note, notepad, notepad++, vscode (Microsoft), …
On doit étudier :
 HTML
 CSS
 JS
Générer une page web visuellement Frontpage (Microsoft), Expression web (Microsoft)
(wysiwyg) (gratuit), BlueGriffon (gratuit, payant pour le design
responsive), Dreamweaver (payant), …
Générer une page web complète Wordpress (gratuit : on peut créer un site web complet
(sans connaitre HTML, CSS et JS) qui coûte 15 000 € en 1 journée)
2 LES BALISES
2.1 LES TYPES DES BALISES
Type de balise Exemples

en paires a,titre,h1, p, …
orphelines br, hr, img, …
3 LES ATTRIBUTS
3.1 LES TYPES DES ATTRIBUTS DES BALISES
Type d’attributs Exemples

Globaux (HTML Global Attributs) : class, id, style, title, lang, hidden, …
ils s’appliquent à TOUS LES BALISES
Spécifiques : Pour la balise « a » => href

Ils ne s’appliquent que à certaines balises. Pour la balise « td » => colspan
Chaque balise HTML peut avoir ses propres …
attributs qui sont spécifiques à lui.
Page 1 sur 6
Mr Ahmed EL ECHI (ah.elechi@gmail.com | tel : 55 76 55 44)
4 LES EVENEMENTS
Les évènements permettent d’effectuer une action (un algorithme) à des moments bien précis
4.1 LES EVENEMENTS DE LA PAGE

Attribut Description
onload Se déclenche lorsque la page est complètement chargée.
Exemple d’appel :
<body onload="myFunction()">
4.2 LES EVENEMENTS DES ELEMENTS DU FORMULAIRE

onsubmit Se déclenche lorsqu'un formulaire est soumis.
Exemple d’appel :
<form action="…" onsubmit=" return myFunction( )">
oninput Se déclenche dès que la valeur d'un élément a changé.
Exemples d’appels :
<input id="…" oninput="myFunction()">
<textarea id="…" oninput="myFunction()">
onblur Se déclenche au moment où l'élément perd le focus.
Exemple d’appel :
<input id="…" onblur="myFunction()">
onfocus Se déclenche au moment où l'élément obtient le focus.
Exemple d’appel :
<input id="…" onfocus="myFunction()">
4.3 LES EVENEMENTS DE LA SOURIS

onclick Se déclenche lors d’un clic sur l’élément.
<p onclick="myFunction()">
<input onclick=" myFunction()">
<div onclick=" myFunction()">
<h1 onclick="myFunction()">
onmouseover Se déclenche lorsque le pointeur de la souris survole l’élément.
<p onmouseover =" myFunction()">
<input onmouseover =" myFunction()">
<div onmouseover =" myFunction()">
<h1 onmouseover =" myFunction()">
Page 2 sur 6
5 LES BALISES D’ENTETE (QUI SE METTENT DANS LA BALISE HEAD)

<!DOCTYPE html>
<html>
<head>

</head>
<body>
</body>
</html>
5.1 LA BALISE D’ENTETE <LINK>

Définit la relation entre le document actuel et une ressource externe.
Exemples :
<link rel="stylesheet" href="styles.css">
5.2 LA BALISE D’ENTETE <META>

Définit les métadonnées du document.
Exemples :

<meta charset="UTF-8">


<meta name="description" content="Free Web tutorials">


<meta name="keywords" content="HTML, CSS, JavaScript">


<meta name="author" content="John Doe">
5.3 LA BALISE D’ENTETE <SCRIPT>

Intègre un script côté client (JavaScript).
Exemple 1 :
<script src="mon_script.js"></script>
Exemple 2 :
<script>
alert("Bonjour") ;
</script>
5.4 LA BALISE D’ENTETE <STYLE>

Définit les informations de style (CSS) pour un document
Exemple :
<style>
p {
color :red ;
}
</style>
Page 3 sur 6
6 LES ATTRIBUTS GLOBAUX
6.1 ATTRIBUT ID
Spécifie un identifiant unique pour un élément HTML
Exemple :
<p id="car1" class="voiture">BMW</p>
<p id="car2" class="voiture">mercedes</p>
6.2 ATTRIBUT CLASS

Spécifie un nom de classe pour un élément
Exemple :
<p id="car1" class="voiture">BMW</p>
<p id="car2" class="voiture">mercedes</p>
6.3 ATTRIBUT STYLE

Spécifie un style en ligne.
Exemple :
<p style="color : blue ;">BMW</p>
6.4 ATTRIBUT LANG

Spécifie la langue du contenu de l'élément.
Exemples :
<p>This is a paragraph.</p>
<p lang="fr">Ceci est un paragraphe en Français</p>
<p lang="en">this is a paragraph in English</p>
6.5 ATTRIBUT HIDDEN

Renseigne la visibilité d'un élément.
Exemples :
<p> Ceci est un paragraphe visible</p>
<p hidden="hidden">Ceci est un paragraphe caché (n’est pas visible)</p>
<p hidden> Ceci est un autre paragraphe caché (n’est pas visible)</p>
6.6 ATTRIBUT TITLE

Spécifie des informations supplémentaires sur un élément.
Exemples :
<p title="ma marque de voiture préférée">BMW</p>
<p title="C'est un lycée secondaire">Lycée la Goulette</p>
Page 4 sur 6
7 LES TABLEAUX
7.1 BALISE TD
Attribut Type de valeur Description
colspan entier Le nombre de colonnes à fusionner
rowspan entier Le nombre de lignes à fusionner
7.2 BALISE TH
Le contenu de la balise <th> est par défaut gras et centré
Attribut Type de valeur Description
colspan entier Le nombre de colonnes à fusionner
rowspan entier Le nombre de lignes à fusionner
7.3 EXEMPLE :
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>February</td>
<td colspan="2" rowspan="2">$80</td>
<td>$80</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
<td colspan="2">Sum: $180</td>
</tr>
</table>
Toujours on met colspan et rowspan dans la
cellule en haut à gauche de la zone à
fusionner
Page 5 sur 6
8 LES FORMULAIRES :
8.1 EXEMPLE
Attribut Résultat affiché
<form action="page1.php">
Votre nom :
<input type="text" id="nom" name="nom">
<br><br>
Nombre des élèves en classe :

<input type="number" id="nb_eleve" name="nb_eleve">
<br><br>
Votre date de naissance :

<input type="date" id="naissance" name="naissance">
<br><br>
Votre site préféré :

<input type="url" id="homepage" name="homepage">
<br><br>
Votre email :
<input type="email" id="email" name="email">
<br><br>
Volume préféré :
<input type="range" id="vol" name="vol" min="0" max="100">
<br><br>
<input type="submit" value="Envoyer">
</form>
Page 6 sur 6

Cours HTML v07

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours HTML v07

Transféré par

Droits d'auteur :

Formats disponibles

Mr Ahmed EL ECHI (ah.elechi@gmail.

com | tel : 55 76 55 44)

1.2 OUTILS NECESSAIRES

Types d’outils Exemples d’outils

2.1 LES TYPES DES BALISES

Type de balise Exemples

3.1 LES TYPES DES ATTRIBUTS DES BALISES

Type d’attributs Exemples

Spécifiques : Pour la balise « a » => href

4.1 LES EVENEMENTS DE LA PAGE

4.2 LES EVENEMENTS DES ELEMENTS DU FORMULAIRE

onblur Se déclenche au moment où l'élément perd le focus.

4.3 LES EVENEMENTS DE LA SOURIS

onmouseover Se déclenche lorsque le pointeur de la souris survole l’élément.

5 LES BALISES D’ENTETE (QUI SE METTENT DANS LA BALISE HEAD)

5.1 LA BALISE D’ENTETE <LINK>

5.2 LA BALISE D’ENTETE <META>

5.3 LA BALISE D’ENTETE <SCRIPT>

5.4 LA BALISE D’ENTETE <STYLE>

6 LES ATTRIBUTS GLOBAUX

6.2 ATTRIBUT CLASS

6.3 ATTRIBUT STYLE

6.4 ATTRIBUT LANG

6.5 ATTRIBUT HIDDEN

6.6 ATTRIBUT TITLE

Nombre des élèves en classe :

Votre date de naissance :

Votre site préféré :

<input type="submit" value="Envoyer">

Vous aimerez peut-être aussi