Cours HTML

1ère année ST Bureautique et Web 2010/2011
Chapitre 6
Le langage HTML
Introduction
HTML, veut dire : HyperTextMarkupLangage (ou langage hypertexte et à balises )
C’est un des langages d'écriture utilisé pour créer des pages web.
Hypertexte : c'est simple, ce mot désigne la capacité à créer des liens ( quand on
clique sur un mot, cette action vous conduit à un autre texte ( d'où hyperTEXTE ) : ce
système de navigation est omniprésent sur internet.
HTML est composé de balises (ou tags, ce sont les informations contenues entre les
signes < et >) qui servent à mettre en forme la page. Les balises peuvent être écrites
en majuscules ou en minuscules. Le début et la fin du document HTML sont indiqués
par les balises <html> et </html>, qui sont toujours la première et la dernière balise
(sauf si la première est un !DOCTYPE, auquel cas <html> est la deuxième ...). Dans
les balises peuvent être placés des attributs, c'est à dire des précisions sur la taille, les
couleurs, le style de chaque élément. Les balises de la forme </balise> sont des
balises de fermeture. Les balises de fermeture ne reprennent jamais les attributs de
leur balise d'ouverture.
Les balises de fermeture sont souvent obligatoires, et il est conseillé de les mettre
chaque fois que cela est possible.
Pour visualiser le code source des pages web il suffit de vous positionner sur la page
désirée ensuite cliquez avec la touche droite de votre souris et sélectionner afficher la
source.
La forme des fichiers HTML

Ces fichiers comportent un certain nombre de "balises" qui sont indispensables.
1.- La premiére est celle qui permet de définir le language utilisé,

Vous devez toujours placer cette balise <html> au début de votre page ensuite la page
doit se terminer par </html>.
Nous devons par la suite placer d'autres balises à l'intérieur :
2.- l'en-tête du document, partie non-visible, mais qui contient les informations
permettant aux moteurs de recherche de trouver votre site, vous devez placer la balise
<head> puis se termine par </head>.
Cette balise contient une autre balise qui est le titre de votre page, ce titre apparaîtra
sur la barre en haut de votre navigateur et permet aussi aux moteurs de recherche de
vous trouver, donc vous devez y placer un titre explicite !

Cette balise est <title> puis se termine par </title>.
d'autre balises sont aussi nécessaires pour les moteurs de recherche, elles ne sont pas
indispensables au fonctionnement de votre page, ces balises sont à placer entre
<head> </head>. Quelques exemples :
<meta name="Description" content="Créer un site web de A à Z, découvrez la

programmation HTML">
le contenu de ce meta name comme son nom l'indique est une description de votre
site.
Certains moteurs de recherche ont besoin de ce meta name pour continuer à scruter la
page.
<meta name="keywords" content="créer, creer, site, web, html, programmation,
webmaster, annuaire, annuaire pour webmaster, lien, lien pour webmaster,site pour
webmaster, créer un site, creer une site, apprendre, apprendre le html, débuter,
debuter, debutant, premier, pas, base, couleur, code, forme, frames, lien, image,
caractere, caractére, lien image, tableau, gif">
Ce meta name contient tous les mots clès de votre site, la plupart des moteurs de
recherche vont regarder ce meta name.
<meta http-equiv="Content-Language" content="fr">
Ce meta name indique la langue principale du site.
<meta name="Author" content="mauricio caroca ">
Ce meta name référence l'auteur du site.
3.- le corps du document, la partie visible pour l'internaute qui visiteras votre site,
vous devez placer cette balise <body> puis se termine par </body>.
C'est dans cette derniére balise que se trouverons tous les éléments que vous
montrerez à vos visiteurs !!!!
4.- Les commentaires s'écivent :

 les commentaires ne sont pas visibles par l'internaute,
il faut éditer le code source pour visualiser les commentaires.
exemple :
<html>

<head>

<title>Titre de votre site</title>
</head>

<body>

Je viens de créer ma premiére page !


</body>

</html>

Cette exemple nous donnerais pour l'internaute:
exemple :
<html>

<head>

<title>Titre de votre site</title>
</head>

<body>



</body>

</html>

Pour cela, vous pouvez ajouter des attributs à la balise <body>
Pour colorer le texte de votre page :

L'attribut est : text="code_de_couleur"
Exemple : <body text="#000000">
Pour colorer le fond d'écran de votre page :

L'attribut est : bgcolor="code_de_couleur"
Exemple : <body bgcolor="#0099CC">
Pour colorer les liens de votre page :

L'attribut est : link="code_de_couleur"
Exemple : <body link="#003366">
Pour colorer les liens actifs de votre page :

L'attribut est : alink="code_de_couleur"
Exemple : <body alink="#00FF00">
Pour colorer les liens visités de votre page :

L'attribut est : vlink="code_de_couleur"
Exemple : <body vlink="#CCFF66">
Pour mettre une image de fond d'écran sur votre page :

L'attribut est : background="votre image "
Exemple : <body background="image.gif">
Texte qui s'affiche en forme d'une "infobulle" :

L'attribut est : title="votre texte"
Exemple : <body title="cours html"> L'expression BODY title="" compte pour la
page entière, c'est-à-dire que le texte inscrit dans sa valeur s'affiche à tout point où
l'utilisateur "dépose" la souris. Cet effet peut être gênant.
A ne pas confondre avec la balise <title>...</title> !!!
site rédigés en plusieurs langues :

L'attribut est : lang="langue"
Exemple : <body lang="fr" dir="ltr"> Pour que les navigateurs lisent le texte
correctement, il peut aussi être nécessaire de se servir de l'attribut dir qui indique,
dans quel sens le texte doit être affiché : de gauche à droite (valeur par défaut en
Europe) ou de droite à gauche (hébreu, japonais, etc.). valeurs "ltr" (left to right : de
gauche à droite) et "rtl" (right to left : de droite à gauche) sont disponibles.
leftmargin et topmargin :
L'attribut est : leftmargin="nbre de pixels"
Exemple : <body leftmargin="0"> Pour définir les marges du texte - toujours pour
un document entier - nous nous servons de l'attribut leftmargin pour la marge à
gauche et de topmargin pour la marge en haut de la page. Les valeurs sont exprimées
en pixels.
type d'arrière plan:

L'attribut est : bgproperties="type de background"
Exemple : <body bgproperties="fixed"> Nous avons le choix entre un arrière-plan
fixe (bgproperties="fixed") et un arrière-plan qui défile verticalement, lié aux

éléments de la page (bgproperties="scroll"). Le dernier correspond à la valeur par
défaut.
Tous ces attributs peuvent se cumuler :

Exemple :
<body text="code_de_couleur" bgcolor="code_de_couleur"

link="code_de_couleur" alink="code_de_couleur" vlink="code_de_couleur">
Formater votre texte

Comment formater un texte en gras :
<b> définit un texte gras puis se termine par </b>
La règle : <b>Votre Texte en Gras</b>
Exemple : Votre Texte en Gras
Comment formater un texte en italique :

<i> définit un texte en Italique puis se termine par </i>
La règle : <i>Votre Texte en Italique</i>
Exemple : Votre Texte en Italique
Comment formater un texte souligné :

<u> définit un texte souligné puis se termine par </u>
La règle : <u>Votre Texte Souligné</u>
Exemple : Votre Texte Souligné
Comment formater un indice :

<sub> définit un texte en indice puis se termine par </sub>
La règle : Votre Texte <sub>en indice </sub>
Exemple : Votre Texteen indice
Comment formater un exposant :

<sup> définit un texte en exposant puis se termine par </sup>
La règle : Votre Texte <sup>en exposant </sup>
Exemple : Votre Texteen exposant
Comment formater un texte rayé :

<s> définit un texte rayé puis se termine par </s>
La règle : <s>Votre Texte Rayé</s>
Exemple : Votre Texte Rayé
Comment formater un texte en couleur :

<font color="code_de_couleur"> définit un texte en couleur puis se termine par
</font>
La règle : <font color="#0000ff">Votre Texte en Couleur</font>
Exemple : Votre Texte en Couleur
Comment formater une police:

<font face="Police de caractère "> définit une police de caractère et se termine par
</font>
La règle : <font face="arial">Votre Texte police arial </font>
Exemple : Votre Texte en Police arial
Comment faire un retour à la ligne :

<br> définit un retour à la ligne
Exemple : Ce qui nous donne :

Texte de ma première ligne<br> Texte de ma premiére ligne
Texte de ma seconde ligne<br> Texte de ma seconde ligne
Comment formater une ligne:

<hr> définit un paragraphe puis se termine par </hr>
La règle : <hr width="150" size="4" align=center color = #00ff00 >Votre ligne de"
longeur = 150 pixels" "largeur = 4pixels" "Alignée au centre" "couleur verte"
Exemple :
Width et Size peuvent être exprimé en % de la page, la régle est par exemple "width =
10%"
Comment formater un paragraphe :

<p> définit un paragraphe puis se termine par </p>
La règle : <p align="right">Votre Paragraphe Aligné </p>
Exemple :
Votre Paragraphe Aligné à Gauche avec left
Votre Paragraphe Aligné au Centre avec Center
Votre Paragraphe Aligné à Droite avec right
Tous ces balises de formats peuvent se cumuler :

Exemple :
<b><i><u><s><font color="blue">Ecrire en gras, en italique, en souligné, rayé et en
couleur</font></s></u></i></b>
Résultat : Ecrire en gras, en italique, en souligné, rayé et en couleur
Comment faire des titres avec l'atribut H :

Il existe six styles prédéfinis pour les titres, allant de H1 à H6
Exemple :
<h1>Titre H1</h1>
Titre H1
<h2>Titre H2</h2>
Titre H2
<h3>Titre H3</h3>
Titre H3
<h4>Titre H4</h4>
Titre H4
<h5>Titre H5</h5>
Titre H5
<h6>Titre H6</h6>
Titre H6
Listes
Listes à puces:
 texte 1
 texte 2
code source :
<UL><LI> texte 1 </LI><LI> texte 2 </LI></UL>
remarques utiles :
<UL> peut prendre d'autres arguments, que voici:
<UL TYPE=disc>
<UL TYPE=circle>
<UL TYPE=square>
Ceci change le type de puce devant chaque item.
Listes numérotées :
1. texte 1
2. texte 2
code source :
<OL> <LI> texte 1 </LI><LI> texte 2 </LI> </OL>
remarques utiles :
<OL> peut prendre d'autres arguments, que voici:
<OL TYPE=i> Numérotation du type i,ii,iii...

<OL TYPE=I> Numérotation du type I, II, III, IV...
<OL TYPE=A> Numérotation du type A, B, C, D...
<OL TYPE=a> Numérotation du type a, b, c, d...
<OL START=5> Numérotation du type 5, 6, 7, 8...
Liste de définition :
Terme 1 à définir
Définition du terme 1
Terme 2 à définir
Définition du terme 2
suite du terme 2
code source :
<DL>
<DT>Terme 1 à définir</DT>
<DD>Définition du terme 1</DD>
<DT>Terme 2 à définir</DT>
<DD>Définition du terme 2</DD>
<DD>suite du terme 2</DD>
</DL>
L'imbrication de listes est bien sûr possible.
L’insertion d'images
Le type d'images admises sur internet :
Les images pouvant être affichées sur les pages web sont les images gif, jpg, bmp, et
png. A noter que seul les gif et les jpeg assurent une compatibilité avec les vieux
navigateurs. Quelques conseils pour choisir le format adapté : les images jpeg sont
plus adaptées pour les photos (elles permettent l'affichage de beaucoup plus de
couleurs que les gifs). Les gif sont mieux adaptées pour les dessins (elles sont
beaucoup moins lourdes) de plus elles permettent l'affichage d'images animées.
La balise <img> et l'attribut src
En HTML, les images sont définies avec le tag <img>.

Ce tag est vide, ce qui signifie qu'il n'est pas fermé et qu'il contient uniquement des
attributs.
Pour afficher une image sur une page, vous devez utiliser l'attribut src qui veut dire
source.
La valeur de l'attribut src correspond à l'adresse (relative ou absolue) de l'image
souhaitée.
L'image sera ainsi placée à l'endroit où vous insérez le tag.
1.- Voici une première image sans attribut particulier :
code source : <CENTER><IMG src="image.jpg"></CENTER>
2.- une image avec un bord de taille 3 :

code source : <CENTER><IMG src="image.jpg" border=3></CENTER>
3.- Modification de la taille de l'image :
code source : <CENTER><IMG src="image.jpg" border=0 width=120

height=120></CENTER>
4.-L'attribut alt :
Cet attribut est utilisé pour afficher un texte descriptif de l'image qui apparaît lors du
survol de celle-ci.
La valeur de cet attribut est donc un texte que vous pouvez choisir librement.
code source : <CENTER><IMG src="image.jpg" border=0 width=120

height=120 alt="cours html"></CENTER>
5.- Insérer une image d'arrière plan dans vos pages (attribut
background) :
Exemple :
<html>
<body background="background.jpg">
</body>
</html>
Liens
lien interne :
Un lien interne est utilisé lorsque la hauteur de votre page est pus grande que celle de
l'écran. Pour créer un lien interne il faut placer un ancre dans le document (à l'endroit
où vous désirez aller sur la page).
<A NAME="#nom_ancre"></A>
Pour aller vers l'ancre il suffit d'écrire dans un autre endroit de votre page.
<A HREF="#nom_ancre">vers ancre</A>
lien externe: :
aller vers une autre page dans le même répertoire: <A HREF="tableaux.html"
target="_self">vers tableaux </A> l'attribut target permet d'aller sur la même page
target="_self", sur une nouvelle page target="_blank" vers un autre frame
target="nom_frame" (voir chapitre frames).
vers tableaux avec attribut target="_self"
vers tableaux avec attribut target="_blank"
même site, autre répertoire:
<A HREF="/php/index.html">informations sur le php</A>

lien vers un autre site WEB :

<A HREF="http://www.crystal.be.tf" target="_blank" >Crystal music</A> mène au site
crystal music
Crystal music
Les liens extrérieurs peuvent être du WWW ( http: ), FTP ( ftp: ), adresse électronique
( mailto: ), GOPHER ( gopher: ),newsgroup ( news: ),TELNET ( telnet: ), etc...
exemple mailto :
<A HREF="mailto:test@skynet.be">envoyez nous un e-mail</A>
envoyez nous un e-mail
Lien avec une image :
<a href="http://www.mauricio-caroca.be.tf" target="_blank"><img

src="/images/bouton.gif" border="0" alt="site de mauricio caroca></a>
Tableaux
C'est la meilleure façon de gérer convenablement la présentation.
Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones
avec des
objets (textes, images, couleurs), permettant un contrôle amélioré de la position des

objets.
Ces tables peuvent avoir un fond et des bords visibles ou non.
Insérer un tableau
<TABLE> et </TABLE> : pour définir un tableau
<TR> et </TR> : pour définir une rangée
<TH> et </TH> : pour les cellules de haut de colonne (facultatif)
<TD> et </TD> : pour une cellule
Exemple :
Bienvenue
<CENTER>
<TABLE WIDTH=50% border="1">
<TR>
<TD><IMGSRC="film.gif"></TD>
<TD>Bienvenue</TD>
</TR>
</TABLE>
</CENTER>
Ce tableau occupe 50% de la largeur totale de la page sur une ligne avec dans la
première cellule l'image et dans la seconde le texte, le tout étant centré.
Mise en forme d'un tableau :

A l'intérieur d'une cellule (entre <TD> et </TD>) tout est bien sûr possible, comme
mettre plusieurs lignes de texte (avec <BR>, <P> ou autre), changer la couleur des
caractères, celle du fond de la cellule, de mettre des liens, des images, modifier les
couleurs et les épaisseurs de bordure, etc...

<TABLE BORDER="2" CELLPADING="2" cellspacing="3" width="50%"

bordercolor="#000080">
<tr>
<td width="50%" align="left" bgcolor="#008080"
bordercolor="#FF0000"> </td>
<td width="50%" align="left" background="film.gif"> </td>
</tr>
</table>
<table bgcolor="votre couleur"> : mettre un fond de couleur.
<table width="50%"> : Occupation en % de la page, vous pouvez aussi travailler en

pixels.
<table border="1"> Taille des bords (0=pas de bords).
border color="votre couleur" couleur des bordures.
cellpadding="2" Marge intérieure des cellules.
cellspacing="3" Espacement entre les cellules.

Fusionner les lignes et colonnes
Les lignes et colonnes peuvent êtres fusionnées, afin d'obtenir des cellules plus ou
moins grandes et accueillir des données. Ce fusionnement est réalisé avec l'attribut :
rowspan et colspan.
- Pour fusionner 2 cellules adjacentes sur une ligne, COLSPAN est requis (pour th ou
td)
- Pour fusionner 2 cellules adjacentes sur une colonne, ROWSPAN est requis (pour th
ou td)
Exemple:
Cellule 1 2 cellules fusionnées (sur la même ligne)
Cellule 2 Cellule 3
2 cellules fusionnées (sur la même colonne)
Cellule 4 Cellule 5
<table border=1>
<tr>
<td>Cellule 1</td>
<td colspan=2>2 cellules fusionnées (sur la même ligne)</td>
</tr>
<tr>
<td>Cellule 2</td>
<td>Cellule 3</td>
<td rowspan=2>2 cellules fusionnées (sur la même colonne)</td>
</tr>
<tr>
<td>Cellule 4</td>
<td>Cellule 5</td>
</tr>
</table>

Cours HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Cours HTML

Hochgeladen von

Copyright:

Verfügbare Formate

1ère année ST Bureautique et Web 2010/2011

La forme des fichiers HTML

1.- La premiére est celle qui permet de définir le language utilisé,

Nous devons par la suite placer d'autres balises à l'intérieur :

vous trouver, donc vous devez y placer un titre explicite !

<meta name="Description" content="Créer un site web de A à Z, découvrez la

4.- Les commentaires s'écivent :

<title>Titre de votre site</title>

Je viens de créer ma premiére page !

Cette exemple nous donnerais pour l'internaute:

Je viens de créer ma premiére page !

<title>Titre de votre site</title>

Je viens de créer ma premiére page !

Pour cela, vous pouvez ajouter des attributs à la balise <body>

Pour colorer le texte de votre page :

Exemple : <body text="#000000">

Pour colorer le fond d'écran de votre page :

Pour colorer les liens de votre page :

Pour colorer les liens actifs de votre page :

Pour colorer les liens visités de votre page :

Pour mettre une image de fond d'écran sur votre page :

Texte qui s'affiche en forme d'une "infobulle" :

A ne pas confondre avec la balise <title>...</title> !!!

site rédigés en plusieurs langues :

type d'arrière plan:

fixe (bgproperties="fixed") et un arrière-plan qui défile verticalement, lié aux

Tous ces attributs peuvent se cumuler :

<body text="code_de_couleur" bgcolor="code_de_couleur"

Formater votre texte

Comment formater un texte en italique :

Comment formater un texte souligné :

Comment formater un indice :

Comment formater un exposant :

Comment formater un texte rayé :

Comment formater un texte en couleur :

Comment formater une police:

Comment faire un retour à la ligne :

Exemple : Ce qui nous donne :

Comment formater une ligne:

Comment formater un paragraphe :

Votre Paragraphe Aligné à Gauche avec left

Votre Paragraphe Aligné au Centre avec Center

Votre Paragraphe Aligné à Droite avec right

Tous ces balises de formats peuvent se cumuler :

Comment faire des titres avec l'atribut H :

<UL><LI> texte 1 </LI><LI> texte 2 </LI></UL>

<UL> peut prendre d'autres arguments, que voici:

Ceci change le type de puce devant chaque item.

<OL> <LI> texte 1 </LI><LI> texte 2 </LI> </OL>

<OL> peut prendre d'autres arguments, que voici:

<OL TYPE=i> Numérotation du type i,ii,iii...

L'imbrication de listes est bien sûr possible.

La balise <img> et l'attribut src

En HTML, les images sont définies avec le tag <img>.

L'image sera ainsi placée à l'endroit où vous insérez le tag.

1.- Voici une première image sans attribut particulier :

code source : <CENTER><IMG src="image.jpg"></CENTER>

2.- une image avec un bord de taille 3 :

code source : <CENTER><IMG src="image.jpg" border=3></CENTER>

3.- Modification de la taille de l'image :

code source : <CENTER><IMG src="image.jpg" border=0 width=120

code source : <CENTER><IMG src="image.jpg" border=0 width=120