Atelier initiation au
HTML5
Atelier 01 Octobre 2024
Pr. Malaine Mariem
PLAN
1. Introduction
2. Elément HTML
3. Formulaires
4. Quiz
5. TP Pratique
Introduction
L’acronyme HTML
Hyper Text MarkUp Langage
HTML: langage de marquage hypertexte. Il s’agit du langage de base du Web
(World Wide Web).
HTML n’est pas un langage de programmation proprement dit, mais plutôt un
code de marquage. Il permet de décrire la page Web élément par élément en
se servant de balises de description.
Le code HTML est déchiffré par le navigateur du client. Tous les navigateurs
existant reconnaissent parfaitement la syntaxe HTML. Les pages web faites
uniquement avec HTML sont suffixées par l’extension .htm ou encore .html.
HTML :
Balises
• La description d’un document HTML passe par l’utilisation de Balises.
• Une balise est délimitée par les signes "<" et ">" entre lesquels figure le nom de la
balise. Par exemple, la balise de retour à la ligne est <BR>
• À toute balise ouvrante <balise> doit être associé une balise fermante </balise> .
• Il existe des balises auto-fermante <balise/> (Ex. <img/>, ...)
<balise attribut1=”valeur1" attribut2=”valeur2">..... </balise>
.
La balise <p> La balise </p>
Début d’écriture Fin d’écriture
du paragraphe du paragraphe
STRUTURE D’UNE PAGE
Les balises de base:
HTML
<html></html> : Début et fin du document HTML. <body></body> : Corps du document
<head></head> : Entêtes du document. <footer></footer> : Pied de page
Eléments
HTML
-Les titres (block) : de <h1> </h1> (+ important) à <h6> </h6> (- important)
-Les paragraphes (block):
• L’élément bloc <p></p> permet de construire des paragraphes.
• L’élément <br/> permet de controler les sauts de lignes
-Les éléments comme <b> et <i> permettent le formatage de sortie du texte, comme en gras ou
en italique • <small> : Texte en petite taille
• <b> : Bold - Texte en gras
• <strong> : Texte important
• <mark> : Texte marqué
• <em> : Texte mis en valeur
-La balise <img/> : permet d ‘insérer une image dans un document, les attributs suivants sont obligatoires :
• src : L’URL ou se situe l’image
• alt : Texte alternatif
Eléments
HTML
-L’élément <a href = ”....” > .... <a/> : permet d’insérer un lien dans un document. Attribut
-HTML définit 2 types de listes :
Les listes numérotée (ordonnée) : <ol></ol Les listes non numérotée : <ul></ul>
type : Définit le type de numérotation : type :
a : lettres minuscules circle
A : lettres majuscules disc
i : chiffres romains square
I : chiffre romains majuscules
1 : chiffres (par défaut)
Eléments
HTML
-L’élément <table> permet de créer des tableaux afin d'organiser les données sous forme de
lignes et de colonnes.
<table> : Définit le début et la fin du tableau
<tr> : Définit une ligne dans le tableau
<th> : Définit une cellule d’en-tête
<td> : Définit une cellule de contenant des données
Les formulaires
• Permettent d’interagir avec les utilisateurs en leur proposant d’entrer des informations.
• Une page peut contenir plusieurs formulaires à la fois.
• Tous les champs (zone de texte, boutons, listes de choix, cases à cocher…) doivent être placés entre
<form> et </form>
• Les informations que les utilisateurs saisissent, seront traiter par des autres scripts ( JS, PHP
Syntaxe :
<form name= "nom du formulaire" Method= "méthode d’envoie" Action= "URL de la page
qui procèdera au traitement du formulaire">
Les attributs:
-Name : Nom du formulaire. Utile si on utilise plusieurs formulaires sur la meme page.
●Action : Spécifie la page qui se charge du traitement du formulaire.
● method : POST ou GET. POST permet l’envoi des valeurs du formulaire dans l’entête du document
(les valeurs ne sont pas visibles) alors que GET les envoie avec l’URL (les valeurs sont visibles).
Les formulaires : champs de saisie
L’élément <label> … </label> permet de définir une étiquette.
• for: référence l’id du champs correspondnat.
L’élément <input> … </input> permet de définir une étiquette.
• type: détermine le type (texte, mot de passe, liste, etc.) du champ.
• Name : nom du champ texte (Identificateur du champs).
• Size : taille en caractère
• value : permet de préciser la valeur par défaut (facultatif).
On peut remplacer type="text" par type="password" si on veut afficher des * au lieu des lettres
lors de la saisie.
Les formulaires : Choix multiples dans une liste
Le type checkbox permet de choisir plusieurs éléments parmi une liste de possibilités :
- Cela se matérialise sous forme de cases à cocher
- La valeur retournée est obligatoirement précisée à l’aide de l’attribut value .
- L’attribut checked="checked" permet de cocher la case par défaut.
Les formulaires : Choix multiples dans une liste
Le type radio permet de choisir un seul élément parmi une liste de possibilités :
- Cela se matérialise sous forme de boutons radio.
- La valeur retournée est obligatoirement précisée à l’aide de l’attribut value .
- L’attribut checked="checked" permet de cocher la case par défaut.
Les formulaires : Liste de selection
- La balise <select> permet d’ajouter une liste de sélection.
- L’attribut facultatif size permet de préciser le nombre de choix apparaissant sur la page Web. Par défaut,
ce nombre est initialisé à 1.
- L’attribut multiple="multiple" permet d’autoriser des réponses multiples.
- Les choix du menu sont indiqués à l’aide de la balise :
- L’attribut selected="selected" permet de spécifier le(s) choix par défaut.
- L’attribut value permet de spécifier la valeur associée au choix
Les formulaires : Button
Dans un formulaire HTML, il existe plusieurs types de boutons permettant différentes interactions avec
l'utilisateur. Voici les plus courants :
• type=‘’submit’’ : ce sont les boutons d’envoie de formulaires.
• type=‘’reset” : boutons rétablir (rétablie les valeurs par défaut des champs de formulaire).
• type=‘’button’ ’: boutons ordinaires (peuvent être personnalisés avec JavaScript).
Les formulaires : Button
- Un élément de type :
● image : Bouton avec image pour l’envoi des données du formulaire.
● file : Bouton d’ouverture de boîte de recherche de fichiers.
Les formulaires : Champs de
texte
Pour les saisies multiligne, on utilise la balise <textarea> … </textarea>
- Le texte délimité par cette balise permet d’initialiser la valeur par défaut du champ.
- La balise fermante est obligatoire même si le champ est vide.
- Les attributs rows et cols (obligatoires) permettent de spécifier la taille en lignes et colonnes de la fenêtre
de saisie.
Les formulaires :
Exemple
Les formulaires :
Exemple
Les formulaires :
Exemple
Quiz
