Vous êtes sur la page 1sur 3

Cours du HTML pour les débutants

Introduction :

Développer et déployer facilement vos sites web

Télécharger gratuitement Office 2013

Héberger votre site web sur des serveurs gratuits

Visual Studio 2013

Télécharger et apprenez gratuitement

Trucs et Astuces

Découvrez Windows 8.1 et télécharger le gratuitement

Le language HTML est le moyen universel pour communiquer sur internet, il est interprépé par vôtre
navigateur pour afficher les pages que vous consultées. Chaque navigateurs (Internet Explorer, Netscape
Navigator, Opera...) a sa manière de l'interpréter, c'est pourquoi vous ne serai jamais sur du rendu de vôtre
document.

Pour transiter rapidement via les lignes téléphoniques, le langague HTML est un language au format texte, il
peut être lu par la plupart des éditeurs tels que notepad, Word..., il est peu évolué et ne demande aucune
conaissance particulière en informatique pour l'apprendre.
Le language HTML s'adapte a toutes les platformes que ce soit Windows ou Linux

Toutes les instructions en HTML ce placent entre les balises "<" et ">", elles ce noment parfois des tags. Les
majuscules et les minuscules n'ont aucunes différences :

ex : <HTML> et <html> sont identiques.

A chaque balises de début d'une action <..> correspond un balise de fin d'action </..>.

ex : <HTML> marque le début du document alors que </HTML> marque la fin du document.

Structure des documents :

Avant de comencer vôtre document, vous devez définir le standard HTML que vous utilisez :

 <!DOCTYPE HTML PUBLIC "-//IETF//DTD Level1//EN" > Html 1.0


 <!DOCTYPE HTML PUBLIC "-//IRTF//DTD HTML//EN" > Html 2.0
 <!DOCTYPE HTML PUBLIC "-//IRTF//DTD HTML 3.0//EN" > Html 3.0
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN" > Html 3.2
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN" > Html 4.0(transition)
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN" > Html 4.0

Aprés cela vous devez entrer la balise <HTML> qui marque le début du document puis la balise <HEAD> qui
marque le début des informations relativent a vos documents.

ex de document HTML minimum : <HTML>


<HEAD>
<TITLE>Premier document</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

<HTML> : Début du document de type HTML.


</HTML> : Fin du document de type HTML.
<HEAD> : Début de la zone d'en-tête.
</HEAD> : Fin de la zone d'en-tête.
<TITLE> : Début du titre du document.
</TITLE> : Fin du titre du document.
<BODY> : Début du corp du document.
</BODY> : Fin du corp du document.

Vous devez aussi absolument mettre les balises metas.

Corps des documents :

Le corps des document est l'endroit a partir duquel le navigateur va commencer a afficher les véritables
données de vos pages, il ce trouve entre les balises <BODY> et </BODY>.

La balise <BODY> a de nombreux arguments :

 BGCOLOR : Définit la couleur du fond de l'écran.


 TEXT : Définit la couleur du texte.
 LINK : Définit la couleur des liens.
 VLINK : Définit la couleur des liens déjà visités.
 ALINK : Définit la couleur des liens activés, c'est à dire quand le pointeur de la souris passe au-dessus.
 BACKGROUND : Définit l'image (gif ou jpeg) à utiliser comme fond d'écran.
 BGPROPERTIES : Quand elle est définie à FIXED, l'image de fond ne défile pas (fonctionne qu'avec
I.Explorer).
 LEFTMARGIN : Définit la largeur de la marge de gauche en pixels.
 TOPMARGIN : Définit la largeur de la marge du haut en pixels.

Commentaires :

Le commentaire dans un document HTML sert le plus souvent a illustrer vôtre code source, il est souvent
utile si vous êtes plusieurs a travailler, il facilite aussi la relecture.

ex : <!--le commentaire-->

Mises en forme élémentaire :

Le document html contient en majorité du texte, il doit être aéré et formaté pour un meilleure lecture.

Voici les balises élémentaires qui servent a l'agrémenté :

 Texte en gras : <B>.....<B> ex : le texte .


 Texte en italique : <I>......</I> ex : le texte.
 Texte soulignés : <U>.....</U> ex : le texte.
 A la ligne : <BR>
 Espacement : &nbsp;
 Centrer le texte : <CENTER>....</CENTER>

Mises en forme évoluée :

Certaines balises "évolués" servent a donner un style particlier au texte, elle vous sont présentées ici
:

 Affiche le texte style machine à écrire : <TT>......</TT> ex : le texte


 Barre le texte : <STRIKE>.....</STRIKE> ex : le texte
 Police plus grande : <BIG>.....</BIG> ex : le texte
 Police plus petite : <SMALL>.....</SMALL> ex : le texte
 Texte en indice : <SUB>.....</SUB> et <SUP>.....</SUP> en exposant.
 Texte comme sous définition : <DFN>.....</DFN> : ex : le texte
 Definit une variable : <VAR>.....</VAR> : ex : le texte
 Affichage des caractères de manière littérale : <SAMP>.....</SAMP> ex : le texte
 Style clavier : <KBD>.....</KBD> ex : le texte
 Style informatique : <CODE>.....</CODE> : ex : le texte
 Afficher le texte comme citation : <CITE>.....</CITE> ex : le texte

Les polices de caractère :

Les polices de caractères ce définissent avec la balise <FONT>....</FONT>. Vu la multitudes des


plates-formes il vaut mieux employer une police standard.

Les attributs de la balise <FONT> :

 Taille du texte : SIZE ex : <FONT SIZE="-2">le texte</FONT> : le texte


 Couleur du texte : COLOR ex : <FONT COLOR="#0000CC">le texte</FONT> : le texte
 Ordre de priorité des nom de polices : FACE ex : <FONT FACE= "Arial, Helvetica, sans-serif">le
texte</FONT> : le texte

Ont peut aussi utiliser la balise <BASEFONT> qui n'a pas de balise de fermeture, les attributs sont les
mêmes que la balise <FONT>.

Utilisation et création des tableaux :

Les tableaux servent le plus souvent a aligner des éléments à l'emplacement souhaité, ils peuvent être aussi
utilisés pour créer unr présentation style journal : la balise utilisé pour déclarer un tableau est la
balise <TABLE>.....</TABLE>.

Voici les balises les plus importantes :

 <TABLE>.....<TABLE> : indique la création d'un tableau.


 <TH>.....</TH> : définit l'en-tête de chaque colonne.
 <TR>.....</TR> : définit une ligne.
 <TD>.....</TD> : définit une cellule.

Ex : tableau simple :

Cellule Cellule
1 2
Cellule Cellule
3 4

<TABLE WIDTH="15%" BORDER="1">


<TR>
<TD>Cellule 1</TD>
<TD>Cellule 2 </TD>
</TR>
<TR>
<TD>Cellule 1</TD>
<TD>Cellule 2 </TD>
</TR>
</TABLE>

Vous aimerez peut-être aussi