Cours HTML

Participez au vote ☆☆☆☆☆★★★★★

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

Balises HTML

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>

Balises 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">

Balises simples –balises doubles

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)

balisesdoubles

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)

Structure d’un document HTML Document HTML de base

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.

</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.

Les balises dans le <HEAD> d'un document html

<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

Les balises dans le <HEAD> d'un document html

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>

Les balises dans le <HEAD> d'un document 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

Les balises dans le <HEAD> d'un document html

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.

Les balises dans le <HEAD> d'un document html

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.

Les balises dans le <HEAD> d'un document html exemples

- Reply-to pour fournir des informations sur l’auteur

- Description pour une courte description du site

- Keywords pour préciser des mots clés pour les moteurs de recherche

Les balises dans le <HEAD> d'un document html exemples

- Copyright pour indiquer les copyrights respectifs (auteur, publieur, graphistes, société...)

- Generator pour indiquer les outils de développement du site

- 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

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

Body –Les paragraphes de texte

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>

Body –Les paragraphes de texte

Le corps du document -Body

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

<!-- . . . --> <BR>	Commentaire ignoré par le navigateur
<!-- . . . --> <BR>	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>

Le corps du document -Body

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

Body –Les niveaux de titre

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

Body –Les niveaux de titre

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>

Le corps du document -Body

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>

</HTML>

<HTML>

<HEAD> <TITLE>exemple tableau</TITLE> </HEAD>

</tr>

<tr>

</tr>

<CAPTION ALIGN="UP"><B> Tableau</B> : cellules de différentes tailles </CAPTION>

</table></CENTER>

</BODY>

</HTML>

Exercice: réaliser ce tableau

<HTML>

<HEAD> <TITLE>9eme tableau</TITLE> </HEAD>

<BODY >

<CENTER> <table border=10 CELLSPACING=20 cellpadding=10

width=80% heigth="80" BORDERCOLOR="#000000">

</tr>

</BODY>

</HTML>

Le corps du document -Body

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

Body –Les listes

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>

Le corps du document -Body

Les paragraphes de texte

La mise en forme de texte

Les niveaux de titres

Les tableaux

Les listes

Les images

Les liens hypertextes

Les formulaires

Les cadres

Body –Insertion d’images

Pour insérer une image à un document HTML:

Balise simple <img>

Pour insérer une image locale

Pour insérer une image distante

Body –Insertion d’images

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).