Tableaux, Listes, Bloc

et Classes 
 HTML
Tableaux HTML
Les tableaux HTML
• Les tableaux HTML permettent aux développeurs Web
d'organiser les données en lignes et en colonnes.
• La <table>balise définit un tableau HTML.
• Chaque ligne de tableau est définie avec une balise <tr>. Chaque en-tête de
tableau est défini avec une balise <th>. Chaque donnée / cellule du tableau
est définie avec une balise <td>.
• Par défaut, le texte des éléments <th> est en gras et centré.
• Par défaut, le texte des éléments <td> est régulier et aligné à gauche.
• Remarque: les <td>éléments sont les conteneurs de données de la table.
• Les <td> peuvent contenir toutes sortes d'éléments HTML; texte, images,
listes, autres tableaux, etc.
Tableau HTML - Bordures repliées
 Tableau HTML - Cellule qui s'étend sur plusieurs colonnes
• Pour qu'une cellule s'étende sur plusieurs colonnes, utilisez l' attribut
colspan:
Tableau HTML - Cellule qui s'étend sur plusieurs lignes
Tableau HTML - Ajouter une légende
 Un style spécial pour une table
• Pour définir un style spécial pour une table particulière, ajoutez un id attribut à la table:
Listes HTML
 Listes de description HTML
Les listes HTML permettent aux développeurs Web de regrouper un ensemble d'éléments
associés dans des listes.

HTML prend également en charge les

listes de description.
Une liste de description est une liste de
termes, avec une description de chaque
terme.
• La balise <dl> définit la liste de
description,
• la balise <dt> définit le terme (nom)
• et la balise <dd> décrit chaque terme
 Listes de description HTML
HTML prend également en charge les listes de description.
Une liste de description est une liste de termes, avec une description de chaque terme.
• La balise <dl> définit la liste de description,
• la balise <dt> définit le terme (nom)
• et la balise <dd> décrit chaque terme
 Bloc HTML et éléments en ligne
Chaque élément HTML a une valeur d'affichage par défaut, en fonction du
type d'élément dont il s'agit.
Il existe deux valeurs d'affichage: block et inline.
• Éléments au niveau du bloc
• Un élément de niveau bloc commence toujours sur une nouvelle ligne.
• Un élément de niveau bloc occupe toujours toute la largeur disponible
(s'étend aussi loin que possible vers la gauche et la droite).
• Un élément de niveau bloc a une marge supérieure et inférieure,
contrairement à un élément en ligne.
 Éléments en ligne
• Un élément en ligne ne commence pas sur une nouvelle ligne.
• Un élément en ligne n'occupe que la largeur nécessaire.
• C'est un élément <span> à l'intérieur d' un paragraphe.
Attribut de classe HTML
 Utilisation de l'attribut de classe
• L' attribut HTML class est utilisé pour
spécifier une classe pour un élément
HTML.
• Plusieurs éléments HTML peuvent
partager la même classe.
• L'attribut class est souvent utilisé pour
pointer vers un nom de classe dans une
feuille de style. Il peut également être
utilisé par un JavaScript pour accéder et
manipuler des éléments avec le nom de
classe spécifique.

• Dans l'exemple suivant, nous avons trois

éléments <div> avec un attribut class
avec la valeur "city". Tous les trois
éléments <div> seront stylés de la même
manière en fonction de la définition de
style .city dans la section d'en-tête:

Astuce: l' attribut class peut être utilisé sur n'importe quel élément HTML.
Remarque: le nom de la classe est sensible à la casse!
 Attribut d'identifiant HTML
• L' attribut id spécifie un identifiant
unique pour un élément HTML. La valeur
de l' id attribut doit être unique dans le
document HTML.
• L’ attribut id est utilisé pour pointer vers
une déclaration de style spécifique dans
une feuille de style. Il est également
utilisé par JavaScript pour accéder et
manipuler l'élément avec l'ID spécifique.
• La syntaxe pour id est: écrivez un
caractère de hachage (#), suivi d'un nom
d’ id. Ensuite, définissez les propriétés
CSS entre accolades {}.
• Dans l'exemple suivant, nous avons un
élément <h1> qui pointe vers le nom d’ Quelle est la différence entre la classe et l’ID ?
id "myHeader". Cet élément <h1> sera
stylisé selon la définition de style
#myHeader dans la section head: Un nom de classe peut être utilisé par plusieurs
éléments HTML, tandis qu'un nom d'identifiant ne doit
être utilisé que par un élément HTML de la page:
 Iframes HTML
• Un iframe HTML est utilisé pour afficher une page Web
dans une page Web.

Syntax de Iframes
•La balise <iframe> HTML spécifie un cadre en ligne
•L' attribut src définit l'URL de la page à intégrer
•Toujours inclure un attribut title (pour les lecteurs d'écran)
•Les attributs heightet width spécifient la taille de l'iframe
•Utilisez border:none; pour supprimer la bordure autour de l'iframe
JavaScript
• JavaScript rend les pages HTML plus dynamiques et
interactives.
 La balise HTML <script>
• La balise HTML <script> est utilisée pour définir un script côté client (JavaScript).
• L' élément <script> contient des instructions de script ou il pointe vers un fichier de script externe
via l'attribut src.
• Les utilisations courantes de JavaScript sont la manipulation d'images, la validation de formulaire et
les modifications dynamiques du contenu.
• Pour sélectionner un élément HTML, JavaScript utilise le plus souvent la méthode
document.getElementById().
• Cet exemple JavaScript écrit "Hello JavaScript!" dans un élément HTML avec id = "demo":
 Exemple de code javascript
modifier le contenu:
document.getElementById("demo").innerHTML = "Hello JavaScript!";
changer les styles:
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
modifier les attributs:
document.getElementById("image").src = "picture.gif";
 Formulaires HTML
Un formulaire HTML est utilisé pour collecter les entrées de
l'utilisateur. L'entrée utilisateur est le plus souvent envoyée à un
serveur pour traitement.
 L'élément <form>
L' élément HTML <form> est utilisé pour créer un formulaire HTML pour la saisie utilisateur:

<form> form elements

.
</form>
L' élément <form> est un conteneur pour différents types d'éléments d'entrée, tels que: champs
de texte, cases à cocher, boutons radio, boutons d'envoi, etc.

L' élément HTML <form> peut contenir un ou plusieurs des éléments de formulaire suivants

<input> <fieldset>
<label> <legend>
<select> <datalist>
<textarea> <output>
<button> <option>
<optgroup>
L'élément <input>
• L'un des éléments de formulaire les plus utilisés est l' élément <input> .
• L' élément <input> peut être affiché de plusieurs manières, en fonction de
l'attribut type.
 L'élément <label>
• L' élément <label> définit une étiquette pour plusieurs éléments de formulaire.
• L' élément <label> est utile pour les utilisateurs de lecteurs d'écran, car le lecteur
d'écran lira à haute voix l'étiquette lorsque l'utilisateur se concentrera sur
l'élément d'entrée.

L'élément <select>
L’élément ' <select> définit une liste
déroulante:
 Valeurs visibles:

Utilisez l' attribut size pour spécifier le nombre de valeurs visibles:

 L'élément <button>
L' élément <button> définit un bouton cliquable:

Les éléments <fieldset> et <legend>

L' élément <fieldset> est utilisé pour regrouper les données associées dans un formulaire.
L' élément <legend> définit une légende pour l' élément <fieldset> .
L'élément <datalist>
• L' élément <datalist> spécifie une liste d'options prédéfinies pour un élément <input>.
• Les utilisateurs verront une liste déroulante des options prédéfinies lors de la saisie des données.
• L' attribut list de l' élément <input> doit faire référence à l’ id attribut de l' élément <datalist> .
 L'élément <output>
L' élément <output> représente le résultat d'un calcul (comme celui
effectué par un script).
 Types d'entrée HTML

•<input type="password">
•<input type="button">
•<input type="radio">
•<input type="checkbox">
•<input type="range">
•<input type="color">
•<input type="reset">
•<input type="date">
•<input type="search">
•<input type="datetime-local">
•<input type="submit">
•<input type="email">
•<input type="tel">
•<input type="file">
•<input type="text">
•<input type="hidden">
•<input type="time">
•<input type="image">
•<input type="url">
•<input type="month">
•<input type="week">
•<input type="number">
 L'attribut de forme
• L' attribut form d' entrée spécifie la forme à laquelle <input> appartient l' élément.
• La valeur de cet attribut doit être égale à l'attribut id de l'élément <form> auquel il
appartient.
 L'attribut formaction
• L' attribut formaction d' entrée spécifie l'URL du fichier qui traitera l'entrée
lorsque le formulaire est soumis.
• Remarque: cet attribut remplace l' action attribut de l' élément <form>.
• L' attribut formaction fonctionne avec les types d'entrée suivants: soumettre
et image.
 Messages d'état HTTP
• Lorsqu'un navigateur demande un service à un serveur Web, une erreur peut se
produire et le serveur peut renvoyer un code d'erreur tel que «404 Not Found».
• Ces messages sont appelés messages d'état HTTP. En fait, le serveur renvoie
toujours un message pour chaque demande. Le message le plus courant est 200
OK.
• Vous trouverez ci-dessous une liste des messages d'état HTTP qui peuvent être
renvoyés:

1xx: Informations
2xx: réussi
3xx: redirection
4xx: Erreur du client
5xx: Erreur de serveur
 Méthodes de requête HTTP
• Qu'est-ce que HTTP?
• Le protocole HTTP (Hypertext Transfer Protocol) est conçu pour
permettre les communications entre les clients et les serveurs.
• Exemple: un client (navigateur) envoie une requête HTTP au serveur;
puis le serveur renvoie une réponse au client. La réponse contient des
informations d'état sur la demande et peut également contenir le
contenu demandé.

Les deux méthodes HTTP les plus courantes sont: GET et POST.
La méthode GET
• GET est utilisé pour demander des données à une ressource spécifiée.
• GET est l'une des méthodes HTTP les plus courantes.
• Notez que la chaîne de requête (paires nom / valeur) est envoyée dans l'URL d'une requête GET:

/test/demo_form.php?name1=value1&name2=value2

La méthode POST
POST est utilisé pour envoyer des données à un serveur pour créer / mettre à jour une ressource.
Les données envoyées au serveur avec POST sont stockées dans le corps de la requête de la requête HTTP:

POST est l'une des méthodes HTTP les plus courantes.

•Les requêtes POST ne sont jamais mises en cache

•Les demandes POST ne restent pas dans l'historique du navigateur
•Les requêtes POST n'ont aucune restriction sur la longueur des données