LE LANGAGE HTML
I. Introduction:
HTML signifie HyperText Markup Language.
C'est un langage de description de données et non pas un langage de programmation.
Il s'écrit à l'aide de balises qui doivent être placées dans un ordre précis.
Le langage HTML permet de réaliser des documents accessibles sur Internet grâce au protocole HTTP en
utilisant leurs adresses uniques nommées URL.
Un site Web est constitué en général de plusieurs pages et on peut naviguer d'une page à une autre grâce à des hyperliens.
Les sites Web sont stockés sur des serveurs web qui sont connectés sur Internet et qui fournissent un document Web dès qu'il est demandé par un client.
II. Les navigateurs:
Pour visualiser une page Web, un navigateur est nécessaire. C'est un logiciel qui permet d'interroger le serveur qui loge le document demandé, interprète les instructions HTML présentes dans le fichier correspondant qu'il reçoit et affiche les résultats à l'écran.
Les navigateurs les plus utilisés sont :- Mozilla Firefox
- Internet Explorer
- Chrome
- Safari
III. Les éditeurs de texte:
Pour écrire un document HTML, il suffit d'utiliser un logiciel appelé éditeur de texte.
Il en existe plusieurs gratuits ou payants.
L'éditeur Notepad++ est préféré grâce à ses balises intégrées et à sa coloration syntaxique. Il est téléchargeable gratuitement sur Internet.
IV. Le langage HTML:
Le HTML est un standard. L'organisme W3C, Wordl Wide Web Consortium, est chargé d'en standariser les normes.
Le HTML permet de créer des pages statiques dont le contenu reste intact sans intervention humaine sur le serveur qui héberge celles-ci.
On peut également élaborer des sites dynamiques en combinant le HTML et d'autres logiciels comme le langage PHP (Hypertext PreProcessor) ou le Mysql. Le contenu de ces pages est généré dynamiquement grâce à l'intercation avec une base de donnée.
V. La structure d'un document HTML:
La description d'un document HTML passe par l'utilisation de balises (tags). Une balise est délimitée par les symboles < et > entre lesquels figure le nom de la balise.
La plupart du temps, on utilise une balise de début et une balise de fin, qui définissent les propriétés de l'intervalle qu'elles délimitent:
Mais il exite des balises dites orphelines qui n'ont pas de balise finale.
Le code HTML se compose :
- d'uncontenu.
- de balises qui définissent la structure et le formatage (présentation) du document.
- de liens entre documents.
- Le code doit être enregistré au format html: nom_de_la_page.html ou nom_de_la_page.htm.
- Les balises sont indiquées entre crochets <balise>.
- Les balises portent un nom qui ne peut pas comporter d'espace.
- Les balises caractérisent tout ce qui se trouve entre la balise initiale et la balise terminale.
- Il est toujours bon de commenter : < !- - commentaires - - >.
- une entête déclaratif incluant le titre la page.
- un corpsqui comporte le contenu du document.
Les balises peuvent être imbriquées les unes dans les autres en ouvrant une seconde balise
alors la première n'est pas fermée.
Mais elles doivent être refermées dans l'ordre inverse de leur ouverture.
L'indentation est une convention de présentation qui permet de distinguer les balises imbriquées en les décalant à gauche.
Exemple : imprécations de balises.
Certaines balises ouvrantes peuvent inclure des attributs pour donner plus de précisions sur les
les propriétés de la balise.
Un balise peut avoir un ou plusieurs attributs. Un attribut se compose le plus souvent d'un mot-clé auquel on donne une valeur. Pour cela on utilise le caratère "=" et on met la valeur entre 2 guillements.
La balise img permet d'insérer une image. Elle peut contenir plusieurs attributs.
L'image peut être située sur le même dossier que la page ou sur un autre serveur en spécifiant son URL :
VI. Les balises élémentaires du HTML:
Le tableau ci-après rassemble les balises élémentaires du HTML:
| Nom de Balise | Commentaires |
|---|---|
| <html>...</html> | Balise principale. |
| <head>...</head> | En-tête de la page. |
| <body>...</body> | Corps de la page. |
| <title>...</title> | Titre de la page. |
| <br/> | Retour à la ligne. |
| <hr/> | Ajoute une ligne de séparation horizontale. |
| <p>...</p> | Crée un paragraphe. |
| <h1>...</h1> | Titre de niveau 1. |
| <h2>...</h2> | Titre de niveau 2. |
| <h2>...</h2> | Titre de niveau 2. |
| <h3>...</h3> | Titre de niveau 3. |
| <h4>...</h4> | Titre de niveau 4. |
| <h5>...</h5> | Titre de niveau 5. |
| <h6>...</h6> | Titre de niveau 6. |
| <a>...</a> | Crée un lien hypertexte. Elle s'accompagne de l'attribut href, qui renferme la cible du lien (son contenu représentant le texte à cliquer pour activer le lien). |
| <img/> | Permet d'insérer une image L'attribut src indique le chemin vers l'image. L'attribut alt indique un texte alternatif en cas d'indisponiblité de l'image. |
| <ul>...</ul> | Liste à puces non ordonnée Sert à dresser une liste non ordonnée. Chaque élément de liste est encadré par la balise <li>. |
| <ol>....</ol> | Liste ordonnée. Sert à dresser une liste ordonnée. Chaque élément de liste est encadré par la balise <li>. |
| <table>....</table> | Crée un tableau. |
| <tr>....</tr> | Crée une ligne d'un tableau. |
| <th>....</th> | Crée une cellule d'en-tête dans un tableau. |
| <td>....</td> | Crée une cellule de données dans un tableau. |
| <form>....</form> | Crée un formulaire. |
VII. Les caractères spéciaux:
Certains caractères ne sont pas reconnus par tous les navigateurs ou ont une signification particulière en HTML. Le caractère <, par exemple, a une signification bien précise pour le navigateur: ouverture d'une nouvelle balise HTML.
Si ces caractères spéciaux sont présents dans un document web, il est nécessaire de les coder en HTML.
Quelques exemples de caractères spéciaux et leur codage en HTML:
| Caractère | Code HTML |
|---|---|
| < | < |
| > | > |
| space | |
| © | © |
| & | & |
| " | " |
| ´ | ´ |
| é | é |
| è | è |
| ê | ê |
| á | á |
| à | à |
VIII. Les listes d'éléments:
Le langage HTML permet de définir de types de listes: les listes ordonnées (numérotées) et les listes non ordonnées (non numérotées):
VIII.1 Les listes ordonnées :
Une liste ordonnée est délimitée par les balises <ol> et </ol> entre lesquelles les éléments de la liste sont encadrés par les balises <li> et </li> :
VIII.2 Les listes non ordonnées :
Une liste non ordonnée est définie de la même façon: elle est délimitée par les balises <ul> et</ul> entre lesquelles les éléments de la liste sont encadrés par les balises <li> et </li> :
IX. Les liens hypertextes:
Le langagage HTML est un langage hypertexte qui permet en cliquant sur un texte ou une image de se déplacer vers:
- une autre page située sur un autre serveur Web.
- une autre page HTML hébérgée par le même serveur.
- un autre endroit du même document.
Ces liens sont définis grâce à la balise <a> qui possèdent plusieurs attributs :
IX.2 Les liens internes :
Un lien interne ou intra-document pointe vers une ancre c'est à dire vers un autre endroit du même document.Un nom doit être défini pour chaque ancre.
Le lien proprement dit se définit avec la balise <a> suivi l'attribut href="#nom_ancre":
L'ancre se définit avec la balise <a> en y ajoutant l'attribut name="nom_ancre":
IX.1 Les liens externes :
Un lien externe ou inter-document pointe vers un document référencé par un chemin relatif ou par une adresse URL. Ce document peut être un document HTML ou un fichier multimédia ou un lien pour un service de messagerie:
Il est possible de faire appel à des ancres dans des liens externes. Il suffit alors de spécifier l'ancre vers laquelle pointe le lien en ajoutant #nom_ancre à la fin de l'URL ou au chemin relatif:
X. Les tableaux :
L'utilisation des tableaux permettent une meilleure présentation des données.
En HTML, un tableau est constitué de lignes et de cellules.
X.1 Création d'un tableau :
Pour créer un tableau, trois balises de base sont nécessaires: <table>, <tr> et <td>:
Leurs rôles sont précisés dans le tableau suivant:
| Création d'un tableau | <table>----</table> | Marque le début et la fin du tableau. |
| Création d'une ligne | <tr>----</tr> | Marque le début et la fin d'une ligne. |
| Création d'une cellule | <td>----</td> | Marque le début et la fin d'une cellule. |
X.2 Les attributs des balises <table>, <tr> et <td> :
| Les attributs de <table> | |
|---|---|
| Nom de l'attribut | Rôle de l'attribut |
| border | fixe la taille du bordure du tableau |
| bgcolor | fixe la couleur de fond du tableau. |
| align | permet d'aligner le tableau à gauche, à droite ou au centre. |
| width | fixe la largeur du tableau en pixels ou en %. |
| height | fixe la hauteur du tableau en pixels. |
| cellpadding | fixe la marge d'une cellule |
| cellspacing | fixe la largeur en pixels entre les cellules. |
| Les attributs de <tr> | |
|---|---|
| Nom de l'attribut | Rôle de l'attribut |
| border | fixe la taille du bordure de la ligne |
| bgcolor | fixe la couleur de fond de la ligne |
| align | permet d'aligner le contenu de la ligne à gauche, à droite ou au centre. |
| height | fixe la hauteur de la ligne en pixels. |
| Les attributs de <td> | |
|---|---|
| Nom de l'attribut | Rôle de l'attribut |
| bgcolor | fixe la couleur de fond d'une cellule. |
| align | permet d'aligner le contenu d'une cellule à gauche, à droite ou au centre. |
| colspan | permet à une cellule d'occuper plusieurs cellules consécutives horizontalement. |
| rowspan | permet à une cellule d'occuper plusieurs cellules consécutives verticalement |
X.3 Fusion dans un tableau :
Pour réaliser une fusion horizontale, on utilise l'attribut colspan suivi du nombre de colonnes à fusionner.Le code d'une fusion de 3 colonnes par exemple s'écrit:
Le résultat obtenu est :
| Fusion de 3 colonnes | ||
| A1 | B1 | C1 |
| A2 | B2 | C2 |
Pour une fusion verticale, l'attribut rowspan est employé suivi du nombre de lignes à fusionner.
Le code d'une fusion de 3 lignes par exemple s'écrit:
Le résultat obtenu est :
| Fusion de 3 lignes | A1 | B1 |
| A2 | B2 | |
| C2 | C2 |
XI. Les formulaires :
XI.1 Dédinition d'un formulaire :
Le formulaire est un moyen qui permet à l'utilisateur de saisir et de transmettre des informations. Un formulaire est déclaré grâce à la balise <form> dont on précisera généralement 2 attributs:- method: permet de préciser la façon dont les données seront transmises au serveur ("Post" ou "Get").
- action: permet de préciser l'adresse exacte de la page qui se chargera du traitement des données.
Un formulaire est constitué de plusieurs champs de saisie.La plupart de ces champs sont introduits grâce à la balise <input/>. Mais certains champs sont déclarés grâce à des balises spécifiques comme <textarea> ou <Select>
XI.1 Les champs de saisie par <input/> :
XI.1.1. Champs de type texte simple:
La balise input est suivi de l'attribut type="text".L'attribut name permet spécifier un nom à la variable qui sera envoyé.
L'attribut value permet spécifier une valeur par défaut. Le champ sera pré-rempli si une valeur est précisée.
La syntaxe est la suivante:
Pour un champ de type "text" précédé par exemple par "Veuillez entrer votre nom", le navigateur affichera:
XI.1.2. Champs de type mot de passe:
Un champ de type mot de passe est un champ de type "text" dans lequel les caratères qui y sont saisis sont masqués. La balise input est suivi de l'attribut type="password".L'attribut name permet spécifier un nom à la variable qui sera envoyé.
L'attribut value permet spécifier une valeur par défaut. Le champ sera pré-rempli si une valeur est précisée.
La syntaxe est la suivante:
Pour un champ de type "password" précédé, par exemple, par "Veuillez entrer votre mot de passe", le navigateur affichera:
XI.1.3. Cases à cocher:
On utilise la balise input suivi de l'attribut type="checkbox".L'attribut name permet de spécifier un nom à la variable qui sera envoyé.
L'attribut value permet de spécifier la valeur qui sera envoyée si la case est cochée.
Un champs de type checkbox autorise de cocher plusieurs cases.
Exemple:
Le navigateur affichera:
XI.1.4. Boutons radio:
On utilise la balise input suivi de l'attribut type="radio".L'attribut name permet de spécifier un nom à la variable qui sera envoyé.
L'attribut value permet de spécifier la valeur qui sera envoyée si l'option est sélectionnée.
Un champs de type "radio" ne permet qu'un seul choix.
Eemple:
Le navigateur affichera:
XI.1.5. Bouton d'envoi:
On utilise la balise input suivi de l'attribut type="submit".L'attribut value permet de spécifier le texte qui sera affiché sur le bouton.
Ce champs de type "submit" permet de valider les données saisies et de les envoyer à la page précisée par l'attribut action.
Eemple:
Le navigateur affichera:
XI.1.5. Bouton d'annulation :
On utilise la balise input suivi de l'attribut type="reset".L'attribut value permet de spécifier le texte qui sera affiché sur le bouton.
Ce champs de type "reset" permet d'effacer toutes les données saisies par l'utilisateur.
Eemple:
Le navigateur affichera:
XI.2 Le champs de saisie par <textarea> :
Pour un champs de type "zone de texte" (texte sur plusieurs lignes), on utilise la balise <textarea>.L'attribut name permet spécifier un nom à la variable qui sera envoyé.
L'attribut rows permet spécifier le nombre de lignes de la zone de texte.
L'attribut cols permet préciser le nombre de caractères par ligne de la zone de texte.
Le texte placé entre les balises <textarea> et </textarea> permet de spécifier une valeur par défaut.
Eemple:
Le navigateur affichera:
XI.3 Les champs de saisie par <Select> :
Grâce à la balise <select>, un champ de type Select permet de proposer une liste déroulante de choix.L'attribut name permet spécifier un nom à la variable qui sera envoyé.
Entre les balises <select> et </select>, on placera autant de paires de balises (<option> , </option> ) que de choix.
Pour chaque balise <option>, on précisera le nom de la variable qui sera envoyé avec l'attribut value.
On indiquera également le texte qui sera affiché pour l'utilisateur en le plaçant entre les 2 balises <option> et </option>.
Eemple:
Le navigateur affichera:
XII. Les frames :
Les frames permettent de diviser l'écran du navigateur en plusieurs zones. Chaque zone peut loger un document html.
La gestion des frames se fait grâce à un fichier HTML dans lequel la balise body est remplacée par la balise<frameset>.
C'est cette balise qui permet de créer plusieurs cadres et leur agencement.
L'alimentation en contenu HTML des différentes fenêtres se fait grâce à la balise <frame>.
XII.1 la balise frameset :
La balise frameset permet de déterminer le nombre fenêtres, leur dimensions et leur agencement.Les cadres peuvent être disposés les uns à côté des autres ou les uns en dessous des autres. Dans le cas d'un agencement vertical (le premier cas), on utilise l'attribut cols suivi par les valeurs des largeurs exprimées en pixels ou en pourcentage.
Dans l'exemple suivant, on a une divsion verticale en trois cadres de 20%, 40% et 40% :
Il est possible de remplacer l'un des porcentages par le sympbole *:
Le résultat de ce code est le suivant:
Dans le cas d'un agencement horizontal (le deuxième cas), on utilise l'attribut rows suivi par les valeurs des hauteurs exprimées en pixels ou en pourcentage.
Dans l'exemple ci-dessous, on a une division horizontale en trois cadres horizontales de 30%, 50% et 20%:
Le résultat obtenu est le suivant:
Il est possible d'imbriquer plusieurs balises frameset. Par exemple, pour avoir un entête de 20 % au dessous duquel un menu de 20% situé à gauche et un contenu, le code à écrire est :
On obtient le résultat suivant:
XII.2 la balise frame :
La balise frame permet gérer le contenu HTML dans les différents cadres. Elle possède plusieurs attributs dont SRC et NAME.XII.2.1 L'attribut SRC :
L'attribut SRC suivi de la valeur "URL" permet de préciser l'adresse du document à afficher dans la fenêtre.Lorsque le fichier suivant sera appelé, on obtiendra trois cadres. Dans la partie supérieur, un fichier entête.html sera chargé. Dans la partie inférieur gauche, un fichier menu.html sera affiché.
XII.2.2 L'attribut NAME :
L'attribut NAME indique le nom de la fenêtre de telle sorte que cette frame puisse être la cible d'un lien hypertexte. Il est souvent associé à l'attribut TARGET d'un lien hypertexte.Dans les deux schémas, en cliquant sur le lien nommé Page1, le contenu du fichier Page1.html sera chargé dans la frame nommée "Contenu":
XII.2.3 L'attribut noresize :
C'est un attribut de type booléen. Sa présence dans la balise frame permet d'empêcher le redimensionnement du cadre choisi par l'utilisateur.XII.2.4 L'attribut srcolling :
Cet attribut permet d'autoriser ou non la présence d'ascenceurs de défilement pour le cadre.La valeur auto laisse au navigateur le soin d'afficher l'ascenceur en cas de besoin. C'est la valeur par défaut.