65b22-Cours HTML 2

1re anne ST
2010/2011
Bureautique et Web
Chapitre 6
Le langage HTML
Introduction
HTML, veut dire : HyperTextMarkupLangage (ou langage hypertexte et balises )
Cest un des langages d'criture utilis pour crer des pages web.
Hypertexte : c'est simple, ce mot dsigne la capacit crer des liens ( quand on
clique sur un mot, cette action vous conduit un autre texte ( d'o hyperTEXTE ) : ce
systme de navigation est omniprsent 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 dbut et la fin du document HTML sont indiqus
par les balises <html> et </html>, qui sont toujours la premire et la dernire balise
(sauf si la premire est un !DOCTYPE, auquel cas <html> est la deuxime ...). Dans
les balises peuvent tre placs des attributs, c'est dire des prcisions sur la taille, les
couleurs, le style de chaque lment. 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
dsire ensuite cliquez avec la touche droite de votre souris et slectionner afficher la
source.
La forme des fichiers HTML

Ces fichiers comportent un certain nombre de "balises" qui sont indispensables.
1.- La premire est celle qui permet de dfinir le language utilis,
Vous devez toujours placer cette balise <html> au dbut de votre page ensuite la page
doit se terminer par </html>.
Nous devons par la suite placer d'autres balises l'intrieur :
2.- l'en-tte 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 apparatra
sur la barre en haut de votre navigateur et permet aussi aux moteurs de recherche de
1re anne ST
2010/2011
Bureautique et Web
vous trouver, donc vous devez y placer un titre explicite !

Cette balise est <title> puis se termine par </title>.
d'autre balises sont aussi ncessaires 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="Crer un site web de A Z, dcouvrez 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="crer, creer, site, web, html, programmation,
webmaster, annuaire, annuaire pour webmaster, lien, lien pour webmaster,site pour
webmaster, crer un site, creer une site, apprendre, apprendre le html, dbuter,
debuter, debutant, premier, pas, base, couleur, code, forme, frames, lien, image,
caractere, caractre, lien image, tableau, gif">
Ce meta name contient tous les mots cls 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 rfrence 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 dernire balise que se trouverons tous les lments 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>

1re anne ST
2010/2011
Bureautique et Web
<body>

Je viens de crer ma premire 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>
1re anne ST
2010/2011
Bureautique et Web
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 visits 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 entire, c'est--dire que le texte inscrit dans sa valeur s'affiche tout point o
l'utilisateur "dpose" la souris. Cet effet peut tre gnant.
A ne pas confondre avec la balise <title>...</title> !!!
site rdigs 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 ncessaire de se servir de l'attribut dir qui indique,
dans quel sens le texte doit tre affich : de gauche droite (valeur par dfaut en
Europe) ou de droite gauche (hbreu, 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 dfinir 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 exprimes
en pixels.
1re anne ST
2010/2011
Bureautique et Web
type d'arrire plan:

L'attribut est : bgproperties="type de background"
Exemple : <body bgproperties="fixed"> Nous avons le choix entre un arrire-plan
fixe (bgproperties="fixed") et un arrire-plan qui dfile verticalement, li aux
lments de la page (bgproperties="scroll"). Le dernier correspond la valeur par
dfaut.
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> dfinit un texte gras puis se termine par </b>
La rgle : <b>Votre Texte en Gras</b>
Exemple : Votre Texte en Gras
Comment formater un texte en italique :

<i> dfinit un texte en Italique puis se termine par </i>
La rgle : <i>Votre Texte en Italique</i>
Exemple : Votre Texte en Italique
Comment formater un texte soulign :

<u> dfinit un texte soulign puis se termine par </u>
La rgle : <u>Votre Texte Soulign</u>
Exemple : Votre Texte Soulign
Comment formater un indice :

<sub> dfinit un texte en indice puis se termine par </sub>
La rgle : Votre Texte <sub>en indice </sub>
Exemple : Votre Texteen indice
Comment formater un exposant :

<sup> dfinit un texte en exposant puis se termine par </sup>
La rgle : Votre Texte <sup>en exposant </sup>
Exemple : Votre Texteen exposant
Comment formater un texte ray :

<s> dfinit un texte ray puis se termine par </s>
La rgle : <s>Votre Texte Ray</s>
Exemple : Votre Texte Ray
Comment formater un texte en couleur :

<font color="code_de_couleur"> dfinit un texte en couleur puis se termine par
1re anne ST
2010/2011
Bureautique et Web
</font>
La rgle : <font color="#0000ff">Votre Texte en Couleur</font>
Exemple : Votre Texte en Couleur
Comment formater une police:

<font face="Police de caractre "> dfinit une police de caractre et se termine par
</font>
La rgle : <font face="arial">Votre Texte police arial </font>
Exemple : Votre Texte en Police arial
Comment faire un retour la ligne :

<br> dfinit un retour la ligne
Exemple :
Texte de ma premire ligne<br>
Texte de ma seconde ligne<br>
Ce qui nous donne :

Texte de ma premire ligne
Texte de ma seconde ligne
Comment formater une ligne:

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

<p> dfinit un paragraphe puis se termine par </p>
La rgle : <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>
Rsultat : Ecrire en gras, en italique, en soulign, ray et en couleur
1re anne ST
2010/2011
Bureautique et Web
Comment faire des titres avec l'atribut H :

Il existe six styles prdfinis 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 numrotes :
1re anne ST
2010/2011
Bureautique et Web
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> Numrotation du type i,ii,iii...
<OL TYPE=I> Numrotation du type I, II, III, IV...
<OL TYPE=A> Numrotation du type A, B, C, D...
<OL TYPE=a> Numrotation du type a, b, c, d...
<OL START=5> Numrotation du type 5, 6, 7, 8...
Liste de dfinition :
Terme 1 dfinir
Dfinition du terme 1
Terme 2 dfinir
Dfinition du terme 2
suite du terme 2
code source :
<DL>
<DT>Terme 1 dfinir</DT>
<DD>Dfinition du terme 1</DD>
<DT>Terme 2 dfinir</DT>
<DD>Dfinition du terme 2</DD>
<DD>suite du terme 2</DD>
</DL>
L'imbrication de listes est bien sr possible.
1re anne ST
2010/2011
Bureautique et Web
Linsertion d'images
Le type d'images admises sur internet :
Les images pouvant tre affiches 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 adaptes pour les photos (elles permettent l'affichage de beaucoup plus de
couleurs que les gifs). Les gif sont mieux adaptes pour les dessins (elles sont
beaucoup moins lourdes) de plus elles permettent l'affichage d'images animes.
La balise <img> et l'attribut src
En HTML, les images sont dfinies 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
souhaite.
L'image sera ainsi place l'endroit o vous insrez le tag.
1.- Voici une premire image sans attribut particulier :
1re anne ST
2010/2011
Bureautique et Web
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 apparat lors du
survol de celle-ci.
La valeur de cet attribut est donc un texte que vous pouvez choisir librement.
1re anne ST
2010/2011
Bureautique et Web
code source : <CENTER><IMG src="image.jpg" border=0 width=120

height=120 alt="cours html"></CENTER>
5.- Insrer une image d'arrire 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 crer un lien interne il faut placer un ancre dans le document ( l'endroit
o vous dsirez 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 mme rpertoire: <A HREF="tableaux.html"
target="_self">vers tableaux </A> l'attribut target permet d'aller sur la mme page
target="_self", sur une nouvelle page target="_blank" vers un autre frame
target="nom_frame" (voir chapitre frames).
1re anne ST
2010/2011
vers tableaux
avec attribut target="_self"
vers tableaux
avec attribut target="_blank"
Bureautique et Web
mme site, autre rpertoire:

<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> mne au site crystal music
Crystal music
Les liens extrrieurs 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 faon de grer convenablement la prsentation.
Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones
avec des
objets (textes, images, couleurs), permettant un contrle amlior de la position des
objets.
Ces tables peuvent avoir un fond et des bords visibles ou non.
Insrer un tableau
1re anne ST
2010/2011
Bureautique et Web
<TABLE> et </TABLE> : pour dfinir un tableau

<TR> et </TR> : pour dfinir une range
<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
premire cellule l'image et dans la seconde le texte, le tout tant centr.
Mise en forme d'un tableau :

A l'intrieur d'une cellule (entre <TD> et </TD>) tout est bien sr possible, comme
mettre plusieurs lignes de texte (avec <BR>, <P> ou autre), changer la couleur des
caractres, 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.
1re anne ST
2010/2011
Bureautique et Web
<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 intrieure des cellules.
cellspacing="3" Espacement entre les cellules.
Fusionner les lignes et colonnes
Les lignes et colonnes peuvent tres fusionnes, afin d'obtenir des cellules plus ou
moins grandes et accueillir des donnes. Ce fusionnement est ralis 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
2 cellules fusionnes (sur la mme ligne)
1
Cellule Cellule
2
3
Cellule Cellule
4
5
2 cellules fusionnes (sur la mme

colonne)
<table border=1>
<tr>
<td>Cellule 1</td>
<td colspan=2>2 cellules fusionnes (sur la mme ligne)</td>
</tr>
<tr>
<td>Cellule 2</td>
<td>Cellule 3</td>
<td rowspan=2>2 cellules fusionnes (sur la mme colonne)</td>
</tr>
<tr>
<td>Cellule 4</td>
<td>Cellule 5</td>
1re anne ST
2010/2011
</tr>
</table>
Bureautique et Web

65b22-Cours HTML 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

65b22-Cours HTML 2

Uploaded by

Copyright:

Available Formats

1re anne ST

La forme des fichiers HTML

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

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

Pour colorer le texte de votre page :

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 visits de votre page :

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

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

site rdigs en plusieurs langues :

type d'arrire plan:

Tous ces attributs peuvent se cumuler :

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 :

Ce qui nous donne :

Comment formater une ligne:

Comment formater un paragraphe :

Tous ces balises de formats peuvent se cumuler :

Comment faire des titres avec l'atribut H :

L'imbrication de listes est bien sr possible.

1.- Voici une premire 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

avec attribut target="_self"

avec attribut target="_blank"

mme site, autre rpertoire:

lien vers un autre site WEB :

Lien avec une image :

<TABLE> et </TABLE> : pour dfinir un tableau

Mise en forme d'un tableau :

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

<table width="50%"> : Occupation en % de la page, vous pouvez aussi travailler en

2 cellules fusionnes (sur la mme

You might also like