Accueil ISD Equipe de recherche Laboratoire Paragraphe Enssib ECP Contact



	Préambules Explication de balises Mise en forme du texte Liens hypertextes Les images Les listes Les tableaux Les feuilles de style Les formulaires Les frames

Structuration de l'information

Langage HTML

Préambules

Avant de commencer, voici encore quelques petites recommandations.

Qu'est ce que l'HTML ?

Le langage HTML n'est pas un langage de programmation proprement dit !
Ce sont "simplement" des balises pour mettre en forme (avec des liens, en tableau, ...) du texte et des images !

Qu'est ce qu'une balise ?

Une balise est une "instruction" comprise entre crochets < > qui possède un nom et parfois des attributs.

Presque toutes les balises doivent être ouvertes puis refermées. On retrouvera donc souvent une balise de début et une balise de fin. La balise de fin porte le même nom que la balise de début à l'exception du nom de la balise qui est précédé du signe /. Nous aurons donc par exemple : (ouverture) <XYZ> et (fermeture) </XYZ>.

Le nom de la balise (contenu entre les crochets) n'est pas sensible à la casse, il peut être écrit indifféremment en majuscule, en minuscule ou un mélange des 2.

De quoi avez-vous besoin ?

- un navigateur (Internet Explorer, Netscape, Mozilla, Opera...)
- un éditeur HTML (==> Notepad, le "simple" Bloc-notes de Windows fera très bien l'affaire !)

Pour commencer le Bloc-notes est très bien, vous devrez taper vous même le code et ainsi vous pourrez vous familiariser beaucoup plus vite avec les balises.
A la fin du cours nous parlerons d'autres éditeurs, mais pour les utiliser il faut quand même connaître les bases du langage HTML.

- du temps et de la patience …

Votre première page HTML

Voici enfin le moment de créer votre première page HTML.

Commencez par ouvrir le Bloc-notes (ou un autre éditeur HTML) pour pouvoir taper le code.

Voici le code à taper :
<HTML>
<HEAD>
<TITLE>Ma première page en HTML</TITLE>
</HEAD>

<BODY>
Bonjour, voici ma première page Web !

</BODY>
</HTML>

• Enregistrez le document au format HTML (*.html ou *.htm).
Pour cela, dans la case "Nom", tapez : index.html
Et dans la case "Type", choisissez Tous(*.*) dans la liste déroulante.

Voilà votre page est enregistrée.
Vous pouvez ouvrir votre navigateur et visualiser votre première page.
Le seul texte qui apparaîtra sera "Bonjour, voici ...".

Explication de balises utilisées

- <html> et </html> : la première informe votre navigateur qu'il va afficher une page HTML. Cette balise doit être la première de votre code. La seconde est la balise de fin. Elle referme la première. (remarquez le / devant le mot contenu entre crochets). Elle doit être la dernière de votre code HTML et signifie la fin de votre code HTML.

- <head> et </head> : la première ouvre l'entête de votre page. Cet entête comprend pour l'instant le titre de votre page. Cette balise est toujours placée juste après la balise <html>. La seconde, referme l'entête de votre page (remarquez encore une fois le / devant le mot entre crochets).

- <title> et </title> : la première ouvre la partie titre de votre page. Ce titre sera placé dans la barre tout au-dessus de votre navigateur. La seconde referme la première encore une fois en plaçant un / devant le mot entre crochets. La balise "title" doit être ouverte puis refermée à l'intérieur de la balise "head". C'est à dire qu'il faut que la balise "title" doit être ouverte puis refermée avant que le balise "head" ne soit refermée.

- <body> et </body> : la première ouvre le début du corps de votre document. C'est là que vous allez placer textes, images et tout ce que contiendra votre page. Cette balise doit se situer après la balise de fermeture de l'entête (=> </head>). La seconde referme la première et maintenant je suppose que vous avez compris le principe pour fermer une balise...

Le code d'une page Web est composé de 2 parties, l'en-tête de la page (HEAD) et le corps (BODY). Seul le corps de la page est affiché à l'écran (dans votre première page, il n'y a que la phrase "Bonjour,..." qui s'est affichée).

Mise en forme : Les couleurs

<HTML>
<HEAD>
<TITLE>Texte en couleurs</TITLE>
</HEAD>
<BODY>
<FONT color="red">Rouge</FONT> <BR>
<FONT color="#FF0000">Rouge</FONT> <BR>

</BODY>
</HTML>

Vous pouvez également mettre le fond de l'écran en couleur (plutôt qu'en blanc par défaut).
<HTML>
<HEAD>
<TITLE>Fond d'écran en couleur</TITLE>
</HEAD>

<BODY bgcolor="#000000">
<FONT color="#FFFFFF">texte blanc sur fond noir</font>

</BODY>
</HTML>

Explications des nouvelles balises utilisées

- <Br> : cette balise permet de faire un saut de ligne. Lorsque vous écrivez du texte dans une page Web, il y a un retour automatique à la ligne lorsque le texte atteint le bord droit de l'écran. Avec la balise <br>, vous pourrez faire des sauts de ligne à votre guise. Un "br" correspond à un saut de ligne, pour laisser une ligne blanche entre 2 paragraphes par exemple il faut placer 2 "br" (==> <br><br>). Il n'y a pas de balise de fin !

- <font> et </font> : elles permettent de modifier l'apparence du texte. Elle doit recevoir des informations provenant d'attribut(s) pour connaître la mise en forme à appliquer. Pour l'instant, nous avons juste vu l'attribut "color" qui permet de mettre le texte en couleur. Les couleurs les plus fréquentes peuvent être nommée explicitement en anglais (red, green, blue,...) Sinon il faut placer le code hexadécimal de la couleur voulue. La couleur du texte est par défaut noir (#000000 ou black).

- Nous avons également vu l'attribut "bgcolor" dans <body> : "bgcolor" (==>background color : couleur de fond) permet de mettre le fond de l'écran en couleur tout comme le fait "color" pour le texte. C'est le même principe pour le code des couleurs. La couleur du fond est par défaut blanc (#ffffff).

Petites définitions

• Un attribut est un paramètre qui fournit des indications à une balise. Il possède un nom et très souvent une valeur à préciser (nom = "valeur"). Il se rajoute dans la balise de début, c'est à dire toujours entre les
< > après le nom de la balise (par exemple : <font color="#ff0000">).

• Le code hexadécimal qui permet de définir une couleur est composé de 6 caractères précédés de #. ces 6 caractères définissent la "teneur" en rouge, vert et bleu (les couleurs de bases) de la couleur a former. Il n'y a que 16 caractères possibles : 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

Mise en forme : police et taille

• Nous allons maintenant faire varier la taille et la police de caractère du texte.

<HTML>
<HEAD>
<TITLE>Taille et police du textes</TITLE>
</HEAD>

<BODY>
<FONT size=3>Taille 3 (par défaut)</FONT> <BR>
<FONT size=2>Taille 2</FONT> <BR>
<FONT size=1>Taille 1</FONT> <BR><BR>

<FONT size="+3">Taille +3</FONT> <BR>
<FONT size="+2">Taille +2</FONT> <BR>
<FONT size="+1">Taille +1</FONT> <BR>
Taille par défaut ( => 3 ) <BR>
<FONT size="-1">Taille -1</FONT> <BR>
<FONT size="-2">Taille -2</FONT> <BR>

<FONT size=2 face="Comic sans MS">Taille 3 en Comic sans MS</FONT> <BR>
<FONT face="Arial, Times New Roman" color="#336699">Taille normal en Arial si la police existe sinon en Times New Roman en couleur #336699</FONT> <BR>

</BODY>
</HTML>

Liens Hypertextes

• Définir un lien

• Les liens hypertextes sont définis à l'aide de l'élément <A>. Le texte de cet élément constitue la zone sur laquelle cliquer pour exécuter un lien :

<A HREF="adresse de destination">Nom du lien<A>

• L'adresse de destination peut être une URL ou bien un nom de fichier situé sur le même serveur. Dans ces deux cas on parle de lien externe. Mais un lien peut aussi diriger vers un marqueur, ou une étiquette, situé dans la même page. Il s'agit alors d'un lien interne.

• Les liens pointent souvent vers d'autres documents HTML mais ce n'est pas obligatoire. On peut diriger un lien vers n'importe quel type de document. Le navigateur lance alors le "visualiseur" adapté ou bien propose d'enregistrer le fichier sur le disque local.

Les liens externes

• <A HREF="http://www.w3.org">Le W3C - World Wide Web Consortium</A>
LE W3C - WORLD WIDE WEB CONSORTIUM
• <A HREF="index.html">Cours HTML</A>

Les liens internes

• Ils pointent vers une étiquette située dans le même document HTML. Cette étiquette doit être définie avec un élément <A> complété cette fois-ci par l'attribut name.
• On utilise le caractère # pour déterminer si un lien se réfère à un autre document (lien externe) ou à une étiquette dans le même document.

• Définition d'une étiquette

– <A NAME="sommaire"></A>
– Ce code n'affiche rien, mais cette étiquette a été placée au début du document.
– Lien vers une étiquette <A HREF="#sommaire">Sommaire</A>

• On peut aussi aller vers une étiquette dans un autre document :
• <A HREF="bases.html#sommaire">Sommaire du chapitre "Les bases"</A>

• Les attributs HREF et NAME peuvent être présents sur la même ancre.

• Par exemple, pour définir une note :

<A HREF="#note1" NAME="retour1">(1)</A>
... et la note décrite plus loin : ...
<A HREF="#retour1" NAME="note1">1. </A> Texte de la note...

Intégrer des images

L'élément <IMG>

• On utilise l'élément <IMG> pour placer les images. Deux attributs sont obligatoires :

• L'attribut src pour spécifier le nom du fichier image à charger. Les fichiers image doivent impérativement être aux formats GIF ou JPG.

• L'attribut alt pour indiquer un contenu alternatif, c'est à dire un texte à afficher à la place de l'image lorsque, pour différentes raisons, elle n'apparaît pas.

• Exemple : <IMG src=laboratoire_paragraphe.gif alt="Laboratoire Paragraphe">
Intégrer des images(2)

Les attributs optionnels de l'élément <IMG>

• L'attribut align
Il indique le mode d'alignement de l'image. Il y a 5 valeurs possibles : top, middle, bottom, left, right. Les trois premiers concernent l'alignement vertical par rapport à la ligne.

Les valeurs left et right permettent d'habiller une image avec le texte, en plaçant l'image respectivement à gauche et à droite.

• L'attribut border
Permet de régler l'épaisseur du trait entourant l'image, en pixels. La valeur 0 signifie qu'il n'y a pas de bordure (c'est la valeur par défaut sauf dans le cas où l'image est dans un lien).

• Les attributs width et height
Ils permettent de déterminer la hauteur et la largeur de l'image, en pixels.

• Les attributs hspace et vspace
Permettent de déterminer les espaces, en pixels, entre l'image et le texte autour (hspace horizontalement et vspace verticalement).

Les images cliquables

• Utiliser une image dans un lien

• L'utilisation d'une image comme étiquette dans un lien ne pose bien entendu aucun problème. Il suffit de placer un élément IMG dans un élément A. Attention toutefois : par défaut les images cliquables ont une bordure de la couleur des liens. Pour la supprimer, il faut utiliser l'attribut border (en lui attribuant la valeur 0).

Cartes cliquables

• On appelle "carte cliquable" une image dans laquelle sont définis des zones associées à des liens. Selon l'endroit où l'on clique sur la carte, un lien différent est activé.

• On place l'image comme d'habitude avec l'élément IMG. On ajoute un attribut map qui permet d'indiquer le nom de la carte qui doit être utilisée.

• On peut définir les différentes zones avec des éléments AREA.

• <IMG src=imagemap.gif alt="Carte cliquable" usemap=#map>

Chaque élément AREA définit une zone. Il doit comporter différents attributs :

l'attribut href
- pour indiquer l'adresse du lien correspondant à cette zone
l'attribut shape
- pour indiquer la forme de la zone. 3 formes sont possibles :
  - rect pour un rectangle
  - circle pour un disque
  - poly pour un polygone
De plus, la valeur default permet de définir un lien qui sera activé si l'on clique en dehors des zones définies. L'élément AREA contenant cette valeur doit être le dernier de la liste.
l'attribut coords
- pour indiquer les coordonées des différentes formes :
  - rect : un rectangle est défini par son coin supérieur gauche (x1,y1) et son coin inférieur droit (x2,y2) soit coords="x1,y1,x2,y2"
  - circle un disque est défini par son centre (x,y) et son rayon (r) coords="x,y,r"
  - poly un polygone est défini par la liste de ses sommets (x1,y1), (x2,y2), (x3,y3)... (maximum 100) soit coords="x1,y1,x2,y2,x3,y3..."
l'attribut alt
– pour indiquer un texte alternatif que les navigateurs textuels pourront utiliser.

Cartes cliquables : exemple

<IMG src=imagemap.gif alt="Carte cliquable" usemap=#map>

LES LISTES

Les listes sont des éléments très utilisées sur les pages Web. Il en existe de différentes sortes.

Listes à puces

texte 1

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

Listes numérotées

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

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

Les tableaux

Syntaxe :

(<TABLE> : Indique le début du tableau (finissant par </TABLE>)

Option : <TABLE BORDER> pour indiquer que le tableau aura une bordure
<TR> : indique une nouvelle ligne (Table Row)

<TH> : indique une nouvelle colonne de titre (Table Header),

options

COLSPAN=« n » -> Permet de mettre une colonne identique sur « n » colonnes

ROWSPAN=« n » -> Permet de mettre une ligne identique sur « n » lignes

<TD> : Indique une nouvelle colonne (Table Data)

Option : ALIGN={RIGHT,CENTER,LEFT} -> Alignement du contenu

Tableaux : exemple
<table border="1">
<tr><th rowspan=2>SERVICE<th colspan=2>Identification
<tr><th>NOM<th>TEL
<tr><th rowspan=3>DIM<td>Burgun Anita<td>86703
<tr><td>Pouliquen Bruno<td>86161
<tr><td>Delamarre Denis<td>86162
<tr><th rowspan=2>MEDIATHEQUE<td>Canal Sabine<td>99.33.69.90
<tr><td>Le Beux Pierre<td>99.33.69.90
</table>

SERVICE	Identification
SERVICE	NOM	TEL
DIM	Burgun Anita	86703
	Pouliquen Bruno	86161
	Delamarre Denis	86162
MEDIATHEQUE	Canal Sabine	99.33.69.90
MEDIATHEQUE	Le Beux Pierre	99.33.69.90

Les feuilles de style

Introduction :

CSS signifie Cascading Style Sheet
Préconisées pour le stylage des documents HTML depuis la version 4.0
Utilise un langage propre, différent du langage HTML
Recommandation du W3C depuis 1996
Deuxième version parue en 1998
Supportées par les dernières versions des navigateurs Internet Explorer, Netscape…

Avantages :

Langage simple et lisible
Simplifie l’édition de pages Web et la maintenance d’un site en séparant le style de la présentation du contenu
Permet de faire une présentation plus soignée et originale sans nuire à l’accessibilité
Flexibilité : on peut changer l’apparence sans changer le document HTML
Permet une plus grande uniformité de présentation pour l’ensemble des pages d’un site
Allège les fichiers HTML dont le contenu se perdait dans un balisage complexe

Différents types

Feuille de style externe (.css)
Allège le document HTML
Permet de partager une même feuille de style entre plusieurs documents HTML
Feuille de style interne (Dans le document HTML)
Dans l'entête d'un document HTML au moyen de l'élément <STYLE> </STYLE>

Feuille de style externe

Le lien vers la feuille de style se fait au moyen de l'élément <LINK> dans l'entête du document HTML
<LINK rel="stylesheet" href="nom.css" type="text/css">
L'élément <LINK> comprend au moins 3 attributs :
- Le type de lien, soit vers une feuille de style (rel="stylesheet")
- L'emplacement de la feuille (href="defaut.css")
- Le type de feuille de style (type="text/css")

Syntaxe de base

Une feuille de style est une séquence de règles
Une règle peut s'appliquer à plusieurs éléments, à un seul élément ou à une partie d'élément seulement
Une règle est composée d'un sélecteur et d'une déclaration
Une déclaration est mise entre accolades et se compose d'une propriété et d'une valeur, séparées par ": "
sélecteur {propriété: valeur} -->déclaration ==> règle

Règle = 1 sélecteur, 1 propriété (s'applique à un élément HTML)
- H1 {color: blue}
- P {text-align: left}
- Body {background-color: yellow}
Règle = 1 sélecteur, plusieurs propriétés
- P {color: blue ; text-align: justify}
Règle = plusieurs sélecteurs, 1 ou plusieurs propriétés
- H1, H2, H3 {color: red}

Propriétés : Police

- Font-family : nom de la police (arial, "arial black", …)
- Font-size : taille de la police (xx, small, 10pt, smaller, 200%,…)
- Font-style : style des caractères (normal, italic, oblique, …)
- Font-weight : épaisseur des caractères (normal, bold, bolder, 100, 200,…)

Propriétés : Texte et couleur

Texte
- Text-align : alignement du text (left, center, justify, …)
- Text-decoration : décoration du texte (none, underline, overline,…)
- Text-indent : indentation du texte (2cm, 20%, …)

Couleur
- Color : change la couleur

Propriétés : tableaux

table { border-style:solid; border-width:1px; border-color:black; width:50%; background-color:#FFFFFF }
td { border-style:solid; border-width:1px; border-color:red; width:50%; }

Liste des propriétés de style CSS avec des exemples

Les formulaires

formulaires et interactivité
- récupérer des données à partir d'une page HTML dans une boite e-mail (questionnaires, payement électronique,…)
- entrer en communication avec un système ou une base de données sur le serveur (bases de données, systèmes de recherche documentaires, moteurs de recherche,…).
Deux objectifs
- collecter des informations sur les utilisateurs
- transmettre des données à traiter sur le serveur

La balise qui nous permet de créer un formulaire dans un document HTML est : <form>formulaire</form>, elle a 3 attributs :

ACTION : type d'action à déclencher (adresse é-mail par exemple dans laquelle on reçoit les données du formulaire)
METHOD : définit la méthode de transfert des données (2 valeurs : GET et POST). Dans le cas de la réception dans une boite de courrier électronique, la valeur POST est la seule valeur possible.
ENCTYPE : définit le format de codage des données si le protocole du serveur n'a pas imposé le sien (text/plain dans le cas des formulaires classiques).

Exemple : <FORM ACTION=" mailto:amkadmi@gmail.com" METHOD="POST" ENCTYPE="text/plain">

Zone texte 1 :

<INPUT TYPE="text" NAME="nom" SIZE="n">

Zone texte 2 :

<TEXTAREA NAME="nom" ROWS= "i" COLS= "j" ></TEXTAREA>

Liste déroulante :

<SELECT NAME="nom">
<OPTION>élément1
<OPTION>élément n
</SELECT>

Exemple : <b>Pays</b> :
<SELECT NAME="pays"> <OPTION>France <OPTION> Suisse <OPTION>Italie
</SELECT>

Boutons (choix unique)

Sexe : masculin <INPUT TYPE="radio" NAME="sexe" VALUE="masculin">
<br>féminin <INPUT TYPE="radio" NAME="sexe" VALUE="feminin">

Cases à cocher :

<INPUT TYPE="checkbox" NAME="nom" VALUE="valeur">
Favoris :
cinéma<INPUT TYPE="checkbox" NAME="favoris" VALUE="cinema">
musique<INPUT TYPE=" checkbox " NAME="favoris" VALUE="musique">
voyage<INPUT TYPE=" checkbox " NAME="favoris" VALUE="voyage">

Boutons (submit & reset)

Les frames

Frames= cadres = fenêtres

C’est la division de votre écran en plusieurs zones pouvant être chacune une source d ’information.
Quoi de plus simple que les frames? Mais aussi quoi de plus délicat et dangereux (risque de plantage) que les frames?
Introduit en 1996 par Netscape
présenter d’une manière simple des données complexes et reliées en elles.

La balise essentielle pour créer des cadres dans votre page HTML est <Frameset>
<Frameset> remplace la balise < Body>
<FRAMESET ROWS=“...”></FRAMESET> définir des fenêtres horizontales
<FRAMESET COLS=“...”></FRAMESET> définir des fenêtres verticales
Pour le moment les frames sont vides.

Pour déclarer des frames :

<FRAME NAME=“nom”> : nom de la case
<FRAME SCROLLING=“yes/no”> : présence ou pas de barre de défilement
<FRAME SRC=“source”> : nom et/ou adresse du fichier source à afficher.
<FRAME NORESIZE> : par défaut un frame est redimensionnable, avec cette balise on fige le frame.
<FRAME MARGINWIDTH=n> : détermine la marge entre le bord du frame et le contenu
<FRAME MARGINHEIGHT=n> : détermine l’espace entre les marges sup et inf du frame et celles des documents.

Exemple : pour créer la division de la page suivante :

Il nous faut 4 fichiers : 1 général définissant les trois cadres avec leurs dimensions et trois fichiers chacun pour un cadre :

Général A.html B.html C.html

<FRAMESET ROWS="30%,70%"><FRAME NAME="A" SRC="A.htm"><FRAMESET COLS="30%,70%"> <FRAME NAME="B" SRC="B.htm"><FRAME NAME="C" SRC="C.htm"></FRAMESET>
</FRAMESET> <HTML><BODY><H4>A</H4> </BODY></HTML> <HTML><BODY><H1>B</H1> </BODY></HTML>
<HTML><BODY><H1>C</H1> </BODY></HTML>

Fonctionnement des frames :

Établir des liens dans le fichier source pour afficher la cible dans l’une des fenêtres.
Syntaxe:
<A HREF=“nom.html” TARGET=“nom_frame_cible”>lien</A>
Supposons qu ’à partir d ’une ancre dans la fenêtre B on veut établir un lien pour afficher le contenu du fichier A dans la fenêtre C

Paramètres de l'attribut Target :

_self : le document est à afficher dans le même frame,
_top : efface les frames présents et affiche la cible en plein écran.
_blank : force le navigateur à ouvrir une nouvelle fenêtre plein écran qui n’a pas de nom .
_parent : affiche la cible dans le document parent du document actuel.

Sommaire

Accueil ISD Equipe de recherche Laboratoire Paragraphe Enssib ECP Contact