[PDF] Produire un document Web avec XHTML - Cours informatique

(1)

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

(2)

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>

(3)

<body>

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

</body>

</html>

Cette exemple nous donnerais pour l'internaute: Je viens de créer ma premiére page !

exemple :

<html>

<head>

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

<body>

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

</body>

</html>

(4)

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.

(5)

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 :

(6)

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

Texte de ma première ligne<br> Texte de ma seconde ligne<br>

Ce qui nous donne : Texte de ma premiére ligne

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>

(7)

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>

Ceci change le type de puce devant chaque item.

Listes numérotées :

(8)

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>

(9)

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 :

(10)

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.

(11)

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

(12)

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

(13)

<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

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

<tr>

</table>

(14)

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

(15)

</tr> </table>