Qu’est ce que le HTML ?
Le HTML (HyperText Markup Language) est un format de présentation de données permettant de créer des pagesweb pouvant être lues dans des navigateurs.
C'est un langage de description de données, et non un langage de programmation. Il est figé c.à.d. qu'une fois le document chargé dans le navigateur, il ne répond à aucune action de l'utilisateur sur le contenu de la page.
Ce langage est pourvu d'un système de balisage qui va permettre de structurer le document.
Il utilise une Grammaire à base de Marqueurs ou Balises
Une balise HTML est un élément que l'on va ajouter au texte à afficher pour dire au navigateur de quelle manière l'afficher. Elle n'est pas affichée telle quelle dans lenavigateur, elle est interprétée par celui-ci.syntaxe:
<BALISE> (Balise standard )
- Une balise est toujours délimitée par les signes < et >
- Chaque balise ouverte doit être fermée, cependant il existe des exceptions exemple:
<html> </html>
Attributs d’une balise
- Ce sont des informations complémentaires caractérisant une balise.
- Une balise peut comporter de zéro à plusieurs attributs.
forme: nom_attribut="valeur"exemple: <htmllang="fr">
Deux types de balises : balises simples
Balises dites "vides": ne contiennent aucune autre balise HTML Ces balises n'ont pas besoin d'être fermées.
exemple
<img src="adresse_de_l’image"> (insertion d’une image)
Deux balises ouvrantes/fermantes, entre lesquelles sont situées d'autres balises ou du texte.
La balise fermante: identique à la balise ouvrante. contient un "/" pour indiquer la fermeture.
exemple:
<p> ici du texte ou tout autre balise </p>(paragraphe)
| la balise <html>. Elle encadre l'ensemble des autres balises. |
<html>
<head>
| <head>: va contenir tout l'en-tête de la page (Informations diverses: auteur, titre, version, scripts, variables ... ) |
<title> … </title>
</head>
<body>
| entre les <body>: contenu ou corps du document. |
<!-- Ici votre site -->
</body>
</html>
La balise<head>: balise structurelle comme <html> et <body>.
Elle contient d'une part le titre du document (inclu dans la balise TITLE), mais également les déclarations comme la feuille de style ou les divers meta tags et également les fonctions javascript.
Les meta-balises permettent de référencer un site web.
L’objectif du référencement est de rendre visible un site web sur les moteurs de recherche afin de permettre aux internautes de le connaître ou le retrouver facilement.
<TITLE> permet de donner un titre à une page, qui sera affiché dans le résultat des moteurs de recherche
<BASE> permet d'indiquer la base des liens des frames par l'attribut Target, pour diriger vers une frame
<LINK> pour indiquer les différents liens avec la page en cours et les liens concernant cette page
<SCRIPT> permet d'insérer des javascripts
<STYLE> permet d'insérer des styles css ( Cascading
StyleSheets =feuilles de style en cascade )
<META> permet de donner le maximum de renseignements sur les pages pour pouvoir bien les référencer et bien les classer par les moteurs de recherche
Le titre de la page
entre les balises <title> et </title>
Très important :
Apparaît dans la barre de titre du navigateur.
Son contenu sera affiché en titre des résultats de la recherche dans les moteurs de recherche
---> mettre le maximum de mots-clefs importants.
exemple:
<HTML>
<HEAD>
<TITLE>cours HTML – GIE 1ère année</TITLE>
</HEAD>
</HTML>
La balise META
- Balises insérées dans l'entête d'une page Web.
- Elles sont invisibles pour l'internaute.
- Elles renseignent le moteur sur la description du site, les mots clés, la langue utilisée sur la page, sur l'auteur du site …
Les attributs de META
NAME , CONTENT , LANG , HTTP-EQUIV
<META NAME="Author" LANG="fr" CONTENT=" Nadir ali ">
Attributs NAME
Title : Le titre du document .
Author : Définir l'auteur du site.
Description : Description du site en une phrase de préférence.
Keywords : Choisissez les mot-clés qui caractérisent le mieux votre site.
Identifier-URL : L'url complet du site.
Publisher : Celui qui publie le site (personne, société ou association).
Reply-to : l’adresse électronique.
CopyRight : le Copyright.
Generator : Les logiciels ayant aidé à la création du site.
Revisit-after : Période de visite des robots.
CONTENT
Valeur à affecter à la propriété NAME ou HTTPEQUIV
Attributs HTTP-EQUIV
Refresh : Rafraîchir la page ou rediriger l'internaute.
Window-TARGET : définir un cadre de destination par défaut
Expires : définir une date limite à vos pages.
Pragma : interdire de mettre "en cache" vos pages.
- Reply-to pour fournir des informations sur l’auteur
<META NAME="Reply-to" CONTENT=">
- Description pour une courte description du site
<META NAME="Description" CONTENT="Site de HTML">
- Keywords pour préciser des mots clés pour les moteurs de recherche
<META NAME="Keywords" CONTENT="html, php, mysql">
- Copyright pour indiquer les copyrights respectifs (auteur, publieur, graphistes, société...)
<META NAME="Copyright" CONTENT="©2012 Nadir ali">
- Generator pour indiquer les outils de développement du site
<META NAME="Generator" CONTENT="flash,PhotoShop, Netscape Communicator 4.0 ">
- Refresh pour ordonner au navigateur de recharger une page toutes les n secondes
<META HTTP-EQUIV="Refresh" CONTENT="60;
;>
La balise <body> va contenir tout le texte et toutes les images affichés dans la page web.
| <HTML> <HEAD> <TITLE>cours HTML – … </TITLE> </HEAD> <body> entre les "body" se situe le corps du code </body> </HTML> |
Attributsde labalise <body>:
- BACKGROUND pour insérer une image comme fond
<body background="nom_de_fichier.extension">
- BGCOLOR : couleur de l'arrière plan
- TEXT : couleur du texte, par défaut elle est noir
- LINK : couleur des liens
- ALINK : couleur des liens sélectionnés
- VLINK : couleur des liens déjà visités
<body bgcolor="couleur" text="couleur" link="couleur" alink="couleur" vlink="couleur">
Les paragraphes de texte
La mise en forme de texte
Les niveaux de titres
Les tableaux
Les listes
Les images et zones réactives
Les formulaires
Les liens hypertextes
Les cadres
La mise en forme de texte
Les niveaux de titres
Les tableaux
Les listes
Les images et zones réactives
Les formulaires
Les liens hypertextes
Les cadres
Balise <p> </p>
- Permet la segmentation du texte en paragraphes.
- Précise où commence un paragraphe et où il se termine. Exemple:
<HTML>
<HEAD>
<TITLE>cours HTML – GIE 1ère année</TITLE>
</HEAD>
<body>
Ce texte est constitué de trois paragraphes
<p>Voici le deuxième paragraphe</p>
<p>et un troisième paragraphe</p>
</body>
</HTML>
Les paragraphes de texte
Les niveaux de titres
Les tableaux
Les listes
Les images et zones réactives
Les formulaires
Les liens hypertextes
Les cadres
| <!-- . . . --> <BR> | Commentaire ignoré par le navigateur | |
| Retour à la ligne | ||
| <BLOCKQUOTE> </BLOCKQUOTE> <CENTER>...</CENTER> <DIV align=center> ...</DIV> <DIV align=left> ...</DIV> | Bloc en retrait - Décalage | |
| Centre tout élément compris dans le tag Centre l'élément encadré par le tag | ||
| Aligne l'élément à gauche | ||
| <DIV align=right> ...</DIV> | Aligne l'élément à droite | |
| <P>...</P> <P align=center>...</P> <P align=left>...</P> | Nouveau paragraphe Paragraphe centré Paragraphe aligné à gauche | |
| <P align=right>...</P> | Paragraphe aligné à droite |
Balise<b>… </b>: texte en gras
<b>Ce texte s'affichera en gras</b>
Balise<i>… </i>: texte en italique
<i>Ce texte s'affichera en italique</i>
Balise<u>… </u>: texte souligné
<u>Ce texte sera souligné</u>
Balise<s> …</s>: texte barré
<s>Ce texte sera barré</s>
Balise<sup>… </sup>: texte en exposant
<sup>Ce texte sera en exposant</sup>
Balise<sub>… </sub>: texte en indice
<sub>Ce texte sera en indice</sub>
Exemple:
<HTML>
<HEAD>
<TITLE>cours HTML – ENSA 1ère année</TITLE>
</HEAD> Retour à la ligne
<body>
<b>Ce texte s'affichera en gras</b><br>
<i>Ce texte s'affichera en italique</i><br>
<u>Ce texte sera souligné.</u><br>
<s>Ce texte sera barré</s><br>
<sup>Ce texte sera en exposant</sup><br>
<sub>Ce texte sera en indice</sub>
</body>
</HTML>
Balise <font> … </font> - attribut <color>exemple:
<font color="#ff0000">texte en rouge</font>
Les couleurs peuvent être écrites de deux manières :
- En hexadécimal de type RVB et précédées d'un dièse (#) exemples:
#ff0000 => rouge
#00ff00 => vert
#0000ff => bleu
- Textuelles en anglais US exemples: red, yellow, pink ...
Exemple:
<HTML>
<HEAD>
<TITLE>cours HTML – DUT 1ère année</TITLE>
</HEAD>
<body>
<font color=#000000>Ce texte s'affichera en noir<br>
<font color="red">Ce texte s'affichera en rouge<br> <font color="blue">Ce texte s'affichera en bleu<br>
<font color=#00ff00>Ce texte s'affichera en vert<br>
<font color=#ffffff>Ce texte s'affichera en <font color=#000000>blanc </body>
</HTML>
Balise <font> … </font> - attribut <face>exemple:
<font face="Arial">texte en Arial</font>
<font face="Arial,times">Ce texte est en Arial sinon en times</font>
Balise <font> … </font> - attribut <size>exemple:
<font size="5">Ce texte sera en taille 5.</font>
- Par défaut, la valeur de l'attribut size vaut "3".
- Possible réunir les trois attributs (color, face, size) dans la même balise <font>.
Exemple:
<HTML>
<HEAD>
<TITLE>cours HTML – DUT 1ère année</TITLE>
</HEAD>
<body>
<font color="red" face="Comic Sans Ms" size=5>Ce texte s'affichera en rouge, Comic Sans Ms, taille 5<br>
<font size=10 color="blue" face="arial">Ce texte s'affichera en taille 10, bleu, arial<br>
<font size=3>Ce texte s'affichera en taille 3<br>
<font face="times">texte en times</font>
</body>
</HTML>
Les paragraphes de texte La mise en forme de texte
Les tableaux
Les listes
Les images et zones réactives
Les formulaires
Les liens hypertextes
Les cadres
Balise <hx> où x représente le niveau
Il existe différents niveaux de titres ( 1 à 6 ) (tous importants)
Attribut de la balise
<Hx align=center>...</Hx> Titre centré
| <Hx align=left>...</Hx> | Titre aligné à gauche |
| <Hx align=right>...</Hx> | Titre aligné à droite |
| exemple: <HTML> <HEAD> <TITLE>cours HTML …</TITLE> </HEAD> <body> <h1>Titre Niveau1</h1> <h2>Titre Niveau2</h2> <h3>Titre Niveau3</h3> <h4>Titre Niveau4</h4> <h5>Titre Niveau5</h5> <h6>Titre Niveau6</h6> </body> </HTML> |
Les paragraphes de texte
La mise en forme de texte
Les niveaux de titres
Les tableaux
Les listes
Les images
Les formulaires
Les liens hypertextes
Les cadres
Structure de base:
<TABLE> </TABLE>
indique au navigateur le début et la fin d'une table Pour décrire le tableau, on utilise ensuite les balises :
<TR> </TR> (TableRow): Définit une ligne du tableau.
Pour ajouter une ligne au tableau.
<TD> </TD> (TableData): Définit une série de cellules de données (qui pourront contenir du texte, des images, une table...).
<TH> </TH> (TableHead): Définit une cellule contenant un titre (intitulé) de colonne ou de ligne.
Le résultat à l'affichage est un texte mis en évidence (gras par exemple).
<caption> </caption> : Définition du titre du tableau
ATTRIBUTS
WIDTH="x" largeur du tableau (nombre ou % par rapport à la largeur de la fenêtre)
HEIGHT="x" hauteur du tableau (nombre en pixels ou %)
BORDER="x" taille de la bordure ou épaisseur de l’ombrage
(1 par défaut)
BGCOLOR=couleur couleur de fond des cellules
BACKGROUND pour utiliser une image comme fond pour la table
CELLSPACING="x" largeur des bordures = espace entre deux cellules du tableau
CELLPADDING="x" espace libre (pixels) entre le texte et le bord de la cellule qui le contient
| ALIGN | alignement: left, right, center |
| COLLSPAN="n“ | fusion de colonnes sur une même ligne ( td et th ) |
| ROWSPAN="n“ | fusion de lignes sur une même colonne ( td et th ) |
<HTML>
<HEAD> <TITLE>exemple1 tableau</TITLE> </HEAD>
<BODY BGCOLOR="#0000FF" >
<CENTER> <table border=5 BORDERCOLOR=red cellspacing=10 cellpadding=10 width=80% heigth="80" BGCOLOR="#00FF00">
<tr bgcolor=yellow>
<td>1-1</td> <td> 1-2 </td> <td> 1-3 </td> <td> 1-4 </td> </tr>
<tr bgcolor=blue>
<td>2-1</td> <td> 2-2 </td> <td> 2-3 </td> <td> 2-4 </td> </tr>
<tr bgcolor=black>
<td><font color=white>3-1</td> <td> <font color=white>3-2 </td>
<td> <font color=white>3-3</td> <td> <font color=white>3-4 </td>
<tr> <td>4-1</td> <td> 4-2 </td> <td> 4-3</td> <td> 4-4 </td> </tr> </table></CENTER>
</BODY>
</HTML>
<HTML>
<HEAD> <TITLE>exemple tableau</TITLE> </HEAD>
<BODY BGCOLOR="#00FFFF" >
<CENTER> <table border=10 CELLSPACING=25 cellpadding=8 width=80% heigth="80" BORDERCOLOR="#000000">
<tr bgcolor=yellow>
<th colspan=2 rowspan=2> <font size="6"> 1-1 </th>
<th> <font size="4">1-3 </th> <th> 1-4 </th>
</tr>
<tr> <td> 2-3 </td> <td> 2-4 </td> </tr>
<tr>
<td>3-1</td> <td rowspan=2> <font color=red>3-2 </td>
<td colspan=2 rowspan=2> 3-3</td>
</tr>
<tr> <td bgcolor=red>4-1</td> </tr>
<CAPTION ALIGN="UP"><B> Tableau</B> : cellules de différentes tailles </CAPTION>
</table></CENTER>
</BODY>
</HTML>
<HTML>
<HEAD> <TITLE>9eme tableau</TITLE> </HEAD>
<BODY >
<CENTER> <table border=10 CELLSPACING=20 cellpadding=10
width=80% heigth="80" BORDERCOLOR="#000000">
<tr bgcolor=blue> <th>1-1</th> <th colspan=3><font size="6"> 1-2 </th>
<td rowspan=4>1-5 </td> </tr> <tr bgcolor=yellow>
<td> 2-1 </td> <td> 2-2 </td> <td> 2-3 </td> <td rowspan=4>2-4</td>
</tr>
<tr bgcolor=red>
<td> 3-1 </td> <td colspan=2 rowspan=2> 3-2 </td> </tr>
<tr bgcolor="#00FFAA"> <td>4-1</td> </tr>
<tr bgcolor="#00FFAA">
<td colspan=3>5-1</td> <td> 5-5 </td> </tr>
</BODY>
</HTML>
Les paragraphes de texte
La mise en forme de texte
Les niveaux de titres
Les tableauxLes listes
Les images
Les formulaires
Les liens hypertextes
Les cadres
HTML permet de définir 3 types de listes
Liste à puce ("Unnumbered"):
<UL TYPE="disc ou circle ou square" >
<LI> élément1</LI>
<LI> élément2 </LI>
</UL>
Liste numérotée ("Ordered"):
<OL>
<LI> élément1</LI>
<LI> élément2</LI>
</OL>
Liste descriptive (ou de définition ou glossaire):
<DL>
<DT> terme1</DT>
<DD> description/définition … du terme</DD>
<DT> terme2</DT>
<DD> description/définition … du terme</DD> </DL>
Les paragraphes de texte
La mise en forme de texte
Les niveaux de titres
Les tableaux
Les listes
Les liens hypertextes
Les formulaires
Les cadres
Pour insérer une image à un document HTML:
Balise simple <img>
Pour insérer une image locale
<img src="chemin de l’image" alt=" texte alternatif ">
Pour insérer une image distante
<img src="URL" alt=" texte alternatif ">
Attributs de la balise <img>
- src : chemin de l'image avec extension.
- alt : affiche un texte alternatif à la place de l'image si celle-ci ne peut pas être chargée
- align : left, right, middle, bottom, top
- width=noun% height=m: pour redimensionner une image
- border=n : pour tracer un cadre autour de l'image avec un trait de n pixels de large
- vspace=n hspace=m : espace vertical entre l’image et le texte en pixels (vspace), espace horizontal image-texte (hspace).
