TICE2 - Chapitre 3

Table des matires
Chapitre 04 : Langage HTML ........................................................................................................ 2 1. 2. 3. 4. 5. Les balises ............................................................................................................................ 2 Le texte ................................................................................................................................. 3 Les titres et les listes ............................................................................................................ 6 Les liens................................................................................................................................ 7 Les images............................................................................................................................ 8
5.1. Lien sur image ................................................................................................................. 9
6. 7. 8.
Les tableaux ......................................................................................................................... 9 Larrire plan ..................................................................................................................... 12 Les formulaires .................................................................................................................. 13

8.1. 8.2. 8.3. 8.4. Texte libre sur une ligne................................................................................................. 13 Bouton .......................................................................................................................... 14 Menu............................................................................................................................. 14 Texte libre sur plusieurs lignes ....................................................................................... 15
TP : ............................................................................................................................................. 15
Chapitre 04 : Langage HTML

On a besoin: d'un diteur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows ou tout autre quivalent dans votre systme d'exploitation, d'un navigateur web : il existe plusieurs, pour toute sorte de matriels (ordinateur personnel, tablette tactile, tlphones mobiles) et pour diffrents systmes dexploitation (Linux, Windows, Mac ). Les plus utiliss en 2012 sont : Google chrome, Mozilla Firefox, Internet Explorer, Safari et Opera. On n'a pas besoin d'tre connect pour crire, voir et peaufiner vos pages Html.
1. Les balises
Voici les premires balises ou tags : Balise
<HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY>
Signification
Le dbut dun document de type HTML La fin dun document de type HTML Le dbut de la zone dentte La fin de la zone dentte Le dbut du titre de la page La fin du titre de la page Le dbut du document La fin du document
On peut remarquer qu chaque balise de dbut d'une action, soit <...>, correspond une balise de fin d'une action </...>. On note aussi que les balises ne sont pas "case sensitive". Il est donc quivalent d'crire <HTML>, <html>, <Html>, etc. Faisons ensemble notre premier document Html: Ouvrir l'diteur de texte. Ecrire les codes Html suivants:
<HTML> <HEAD> <TITLE>Document Html minimum</TITLE> </HEAD>

2
<BODY> </BODY> </HTML> - Enregistrer le document avec l'extension .html ou .htm. Ouvrir le navigateur. Afficher le document via le menu File/Open file... Admirer votre premier document Html.
Celui-ci est vide (et c'est normal) mais tout fait oprationnel! Il faudra maintenant lui fournir votre information l'intrieur des balises <BODY></BODY>. Remarquez que votre "TITLE" est prsent dans la fentre de navigateur. Pour des ventuelles modifications, il n'est pas ncessaire de rouvrir chaque fois le navigateur. Retourner dans l'diteur de texte (sans fermer le navigateur). Modifier les codes Html. Enregistrer le fichier. Utiliser la commande Actualiser.
2. Le texte
Tout document Html contiendra en majorit du texte. Voyons comment l'agrmenter par quelques balises lmentaires. Gras Italique Taille de caractre Couleur de caractre A la ligne Commentaires Centrage [Bold] [Italic] [Font size]
<B>...</B> <STRONG>...</STRONG> <I>...</I> <EM>...</EM> <FONT SIZE=?> ... </FONT>
Dbut et fin de zone en gras Dbut et fin de zone en italique Dbut et fin de zone avec cette taille
[Font color] [Line break] [Comments] [Center]
<FONT COLOR="#$$$$$$"> </FONT> <BR>  <CENTER></CENTER>
Dbut et fin de zone en couleur Aller la ligne Ne pas afficher Centrer
Ouvrir l'diteur de texte
<HTML>
3
<HEAD><TITLE></TITLE></HEAD> <BODY>texte simple<BR> <B>texte en gras</B><BR> <STRONG>texte en gras</STRONG><BR> <I>texte en italique</I><BR> <EM>texte en italique</EM><BR> <B><I>texte en gras et en italique</I></B><BR> <FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</FONT>  </BODY> </HTML> Ouvrir le navigateur
Quelques commentaires s'imposent; - Le texte tout simple s'crit sans balises. Il sera repris par le navigateur avec la police et taille de caractres choisies dans sa configuration par dfaut. - Le navigateur affiche le texte qu'on lui "dicte" en passant la ligne lorsque celui-ci atteint le bord de la fentre. Pour le forcer passer outre cette rgle de conduite et faire un saut la ligne comme vous le souhaitez, il faut une instruction particulire. C'est la balise <BR>. Celle-ci reprsente une action ponctuelle et n'a donc pas besoin de balise de fin. - Le mme browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui <FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</FONT> est quivalent <FONT SIZE=5>texte</FONT><FONT COLOR="#0000FF">en bleu</FONT> - Il n'est pas rare d'utiliser plusieurs balises pour un mme lment de texte. Il faut veiller bien les imbriquer. Ainsi <B><I>...</I></B> est correct et <B><I>...</B></I> risque de vous crer des ennuis. - La taille dans <FONT SIZE=?> peut tre indique avec un nombre de 1 7. La valeur par dfaut tant 3. - Pour les puristes, les balises <I> et <EM>, <B> et <STRONG> ne sont pas totalement quivalentes. Vous verrez en poussant plus avant votre tude du langage Html que <EM> et <STRONG> appartiennent aux dfinitions structurales (style logique) dont l'apparence dpend des options reprises dans la configuration du browser. Les balises <B> et <I>
appartiennent aux formats de prsentation (style physique) dont l'apparence dpend de la volont de l'auteur. Voici les codes de quelques couleurs basiques. Bleu Blanc Rouge Gris clair #0000FF #FFFFFF #FF0000 Vert Violet Jaune #00FF00 #8000FF #FFFF00 #000000
#C0C0C0 Noir
Des balises de texte, il y en plein des valises! Selon les versions du HTML et l'apparition des diteurs Html volus, certains tags sont moins utiliss. D'autres aussi sont tout bonnement d'un emploi rare ou pour le moins particulier. En voici quelques-uns qui complteront votre panoplie actuelle. Le tag <BLOCKQUOTE>...</BLOCKQUOTE> introduit une citation.
Son utilit serait douteuse si le texte de cette citation n'tait introduit avec un lger retrait gauche et droite. Ce qui est bien pratique pour agrmenter la prsentation. Voici un texte normal sans blockquote. Voici un texte avec blockquote. Remarquez le retrait. Le tag <ADDRESS>...</ADDRESS> pour indiquer une adresse (gnralement en fin de document). Voici une adresse avec cette balise : Van Lancker Luc Rue des Brasseurs, 22 7700 Mouscron (Belgium) La balise <U>...</U> souligne le texte. Comme, par convention, les lments servant d'hyperlien sont souligns, on vitera le souligner des lments de texte pour lui donner de l'importance. On prfrera la mettre en gras ou dans un format ou une couleur de police diffrent. Il ne faut donc pas en abuser. Les tags <SUB>...</SUB> et <SUP>...</SUP> placent le texte respectivement en indice et en exposant. Ainsi, <SUB>escalier</SUB>escalier<SUP>escalier</SUP> aura comme rsultat : escalierescalierescalier
5
Pour aligner du texte, on a utilis l'attribut ALIGN ou le tag <CENTER>. Il existe une balise permettant d'aligner diffrents lments. C'est le tag :
<DIV align=left>...</DIV> <DIV align=center>...</DIV> <DIV align=right>...</DIV> Cette alternative pour l'alignement horizontal du texte est parfois bien utile pour dfinir l'alignement d'une portion de texte. Il existe encore bien d'autr es balises quon va dcouvrir dans n os tudes suivantes.
3. Les titres et les listes

Tout document d'une certaine consistance se doit de prsenter, par exemple dans la table des matires, les diffrents niveaux de son expos. Html a dispos ds son origine d'outils spcialement conus cet effet.
<Hn>...</Hn> Avec n= 1, 2, , 6 <UL>...</UL>
En-ttes
[Heading]
Afficher un en-tte de niveau n et sauter une ligne Afficher le texte sous forme dune liste non-ordonne Afficher le texte sous forme dune
Liste non ordonne
[Bullet list]
Liste ordonne Elment de liste Paragraphe
[Numbered list] [List items] [Paragraph]
<OL>...</OL>
liste ordonne
<LI> <P>...</P>
Voici un lment de la liste Saut de ligne, insrer une ligne vierge et commencer un paragraphe.
- On ouvre son petit diteur de texte <H1>Les mois du printemps</H1> <UL><LI>avril <LI>mai <LI>juin</UL> <P> <H3>Les mois d'automne</H3> <OL><LI>octobre <LI>novembre <LI>décembre</OL> - Et on ouvre le navigateur
Les mois du printemps

avril mai juin
6
Les mois d'automne

1. octobre 2. novembre 3. dcembre
Quelques commentaires s'imposent;
1. é est l'un de ces caractres spciaux utiliss pour reprsenter le .

Caractre Code Caractre Code Caractre Code Caractre Code
<
&lt ; &eacute ; &agrave ;
&
&amp ; &Eacute ; &iuml ;
>

&gt ; &egrave ;
&ccedil ;
"

&quot ;
&ecirc ; &AElig ;
2. Les paragraphes et les en-ttes peuvent s'aligner gauche, au centre ou droite. <H1 align=left></H1> <P align=left></P> <H1 align=center></H1> <P align=center></P> <H1 align=right></H1> <P align=right></P> 3. Les listes peuvent s'imbriquer: <H4>Les 12 mois</H4> <UL><LI>Les mois du printemps <OL><LI>avril </OL></UL>
4. Les liens
Une des fonctionnalits la plus agrable du langage HTML est la possibilit de crer des liens vers d'autres documents. Ces documents peuvent tre des documents HTML, des images, du son et des films. Le logiciel client WWW prsente ce lien sous forme de mots
souligns ou d'image encadre que l'on appelle ancre ou lien. Ce lien est soit un fichier local, soit une URL(*). Il existe trois types principaux de liens :
Type Lien Un document complet
Syntaxe
<A HREF = "URL">...</A>
Exemple Pour accder aux pages du CRI :

<A HREF="http://www.unice.fr/cri/"> Le CRI </A>
Rsultat
distant Un document complet local Partie dun document courant

<A HREF = "nom_fichier"> </A> <A NAME = "etiquette"> nom </A> <A HREF = "#etiquette"> ancre </A>
Pour accder une autre page local:

<A HREF="2.HTML"> Aller vers le document 2 </A> <A NAME="ANCRES"> Les ancres </A> <A HREF="#ANCRES"> Voyons retournons au dbut du fichier </A>
Aller
vers
le
document 2
Voyons retournons au
dbut du fichier
5. Les images
La commande <IMG> permet d'insrer une image dans le texte. <IMG SRC="image" ALIGN="attribut" HSPACE="hh" VSPACE = "vv" BORDER="bb"> image = adresse d'une image attribut = "MIDDLE" "TOP" "BOTTOM" "LEFT" ou "RIGHT" hh = nombre de pixels de sparation droite et gauche de l'image. (par dfaut hh=0) vv = nombre de pixels de sparation en haut et en bas de l'image. (par dfaut vv=0) bb = nombre de pixels de l'encadrement de l'image. (par dfaut il n'y a pas d'encadrement) Exemple : <IMG SRC="chouetteG.gif" ALIGN="TOP" ALT="mira" HSPACE="100" VSPACE="100" BORDER="60"> <IMG ALIGN=BOTTOM SRC="chouetteG.gif"> La chouette <IMG ALIGN=MIDDLE SRC="chouetteG.gif"> La chouette <IMG ALIGN=TOP SRC="chouetteG.gif"> La chouette
<IMG ALIGN=LEFT SRC="chouetteG.gif"> chouette <BR> nom par lequel on dsigne couramment<BR> certains oiseaux rapaces nocturnes.<BR> <EM>Le Petit Robert</EM>.<BR CLEAR=ALL> Cet attribut permet une meilleure gestion du texte autour des images 5.1. Lien sur image Les balises sont : <A HREF="2.html"><IMG SRC="image.gif"></A> Remarquons que les images cliquables sont entoures d'une bordure.
6. Les tableaux
En Html, les tableaux servent non seulement aligner des chiffres mais surtout placer des lments l'emplacement que vous souhaitez. L'usage des tableaux est donc trs frquent. Un tableau est compos de lignes et de colonnes qui forment les cellules du tableau. Dfinition dun tableau Dfinition dune ligne Dfinition dune cellule [Table] [Table Row] [Table Data]
<Table>...</Table> <TR>...</TR> <TD>...</TD>
Dbut et fin de tableau Dbut et fin de ligne Dbut et fin de cellule
Un tableau deux lignes et deux colonnes se reprsente comme suit :

<TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>
Si vous souhaitez y adjoindre des bordures : Bordure de cadre [Border]

<Table border = ?>...</Table>
<TABLE border=2> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>
Il y a encore trois lments (dfinis par dfaut mais modifiables) : Lespace entre les cellules ou lpaisseur des lignes de quadrillage Lenrobage des cellules ou lespace entre le bord et le cont enu La largeur de la table
<Table cellspacing= ?> <Table cellpadding= ?> <Table width= ?> <Table width= %>
Construisons un exemple :
<TABLE border=2 cellspacing=10> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>
<TABLE border=2 cellpadding=10> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>
Nous n'en avons pas fini avec les tableaux. Allons plus loin dans notre tude en nous penchant sur les cellules de ces tableaux. Avant toutes choses, les cellules peuvent contenir tous les lments Html dj passs en revue soit : du texte des images des liens des arrire-plans et mme des tableaux Bien que l'allure de votre tableau soit dj dtermine, chaque cellule est en quelque sorte un petit univers part qui a ses propres spcifications. Dcouvrons les balises. Largeur dune cellule Fusion de lignes Fusion de colonnes
<TD width=?> en pixels <TD width=%> en pourcentage <TD rowspan=?> <TD colspan=?>
Dcouvrons ceci par des exemples. Je veux un tableau centr qui occupe 60% de la fentre avec sur une ligne, trois colonnes gales. Essayons ceci :
<CENTER><TABLE width=60% border=1>
10
<TR> <TD>cellule1</TD> <TD>cel. 2</TD> <TD>3</TD> </TR> </TABLE></CENTER>
Pas brillant! Et avec la balise de largeur de la cellule?

<CENTER><TABLE width=60% border=1> <TR> <TD width=33%>cellule1</TD> <TD width=33%>cel. 2</TD> <TD width=34%>3</TD> </TR> </TABLE></CENTER>
Impeccable! Prenons le mme tableau mais avec 2 lignes.

<CENTER><TABLE width=60% border=1> <TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD> <TD width=34%>3</TD></TR> <TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD> <TD width=34%>3</TD></TR> </TABLE></CENTER>
Je souhaite que la premire ligne prenne toute la largeur de la ligne. La premire cellule doit donc dborder sur 3cellules horizontales.
<CENTER><TABLE width=60% border=1> <TR> <TD colspan=3>cellule 1</TD> </TR> <TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD> <TD width=34%>3</TD> </TR> </TABLE></CENTER>
Dans le mme style, je souhaite que la premire colonne prenne toute la hauteur de la colonne. La premire cellule doit donc dborder sur 2 cellules verticales.
<CENTER><TABLE width=60% border=1> <TR> <TD width=33% rowspan=2>cellule 1</TD> <TD width=33%>cel 2</TD> <TD width=34%>3</TD> </TR> <TR> <TD width=33%>cel 2</TD> <TD width=34%>3</TD> </TR> </TABLE></CENTER>
Maintenant, il est temps de mettre de l'ordre dans les cellules.
11
<TR align=left/center/right>
Horizontalement Verticalement Horizontalement Verticalement
Ligne de tableau
<TR valign=top/middle/bottom> <TD align=left/center/right>
Cellule de tableau
<TD valign=top/middle/bottom>
A titre d'exemple, reprenons le tableau suivant :

<CENTER><TABLE width=60% border=1> <TR> <TD colspan=3 align=center>Tarif au ../../..</TD> </TR> <TR> <TD width=33% >Article 1</TD><TD width=33%>Ref 002 </TD> <TD width=34% align=right>30fr</TD> </TR> </TABLE></CENTER>
Il est aussi possible de changer la couleur de la cellule. Couleur de la cellule

<TD BGCOLOR="#$$$$$$">
Notre dernier exemple pourrait devenir :

<TD colspan=3 align=center bgcolor="#000088">
7. Larrire plan
Le langage Html permet d'agrmenter la prsentation du document d'un arrire-plan [background] color ou compos d'une image. Ce qui apporte un lment "artistique" votre page. La balise utiliser ne pose pas de problme : Couleur darrire plan
<BODY BGCOLOR="#$$$$$$">
Donc, pas de problmes! On fait un essai...

<BODY BGCOLOR="#000088"> <H1>Bonjour</H1> </BODY>
Joli! Mais la lisibilit n'est pas parfaite. Heureusement, des balises sont prvues pour modifier les couleurs utilises par dfaut par le browser pour le texte et les liens. Couleur de texte
<BODY BGCOLOR="#$$$$$$">
12
Reprenons notre exemple;

<BODY BGCOLOR="#000088" TEXT="#FFFF00"> <H1>Bonjour</H1> </BODY>
On peut aussi prvoir un fond en image. Cette image (petite de prfrence) est affiche en mosaque par le browser. Attention aux raccords... comme lorsque vous posez du papier peint. Texture de larrire plan
<BODY BACKGROUND="Adresse">
<BODY BACKGROUND="PAPER.gif"> <H1>Bonjour</H1> </BODY>
8. Les formulaires
Un formulaire est une fiche que lutilisateur peut remplir. Un formulaire commence et finit par :
<FORM ACTION METHODE> </FORM>
ACTION METHODE
Programme excutable Mthode de transmission de paramtres : Get, post
Il existe plusieurs types de champs : 8.1. Texte libre sur une ligne
<INPUT TYPE NAME SIZE> </INPUT>
Texte TYPE Password NAME SIZE
Pour faire saisir un texte Les caractres saisis sont reprsents par *
Un nom qui identifie le champ texte Taille de lespace de saisie.
Nom et prenom : <INPUT Mot de passe: <INPUT
TYPE=TEXT TYPE=password
NAME=NOM
SIZE=30>
NAME=mot SIZE=30>
13
8.2. Bouton
<INPUT TYPE NAME VALUE CHECKED>
Radio Checkbox TYPE Submit Reset NAME VALUE CHECKED <INPUT Celibataire <INPUT TYPE=RADIO
Boutons multiples Cases cocher Envoyer le formulaire une fois rempli Effacer le contenu du formulaire
Un nom qui identifie le bouton Valeur donne au bouton lorsquil est slectionn Signale un bouton par dfaut (Radio ou Checkbox) TYPE=RADIO NAME=etat VALUE="celib" CHECKED>
NAME=etat VALUE="mar"> Marie
<INPUT <INPUT
TYPE=CHECKBOX
NAME=sexe VALUE="h"> Homme
TYPE=CHECKBOX NAME=sexe VALUE="f"> Femme
<INPUT <INPUT
TYPE=SUBMIT TYPE=RESET
NAME=bouton1 NAME=bouton2
VALUE="Envoyer"> VALUE="Annuler">
8.3. Menu
<SELECT NAME> <OPTION SELECTED> <OPTION> </SELECT>
NAME
<OPTION > SELECTED, CHECKED
Un nom qui identifie le menu Reprsente chaque choix du menu Signale le choix par dfaut
Mois de Naissance <SELECT Mois> <OPTION checked> Janvier

14
<OPTION> Fevrier </SELECT> 8.4. Texte libre sur plusieurs lignes

<TEXTAREA NAME ROWS COLS> </TEXTAREA>
NAME ROWS COLS
Un nom qui identifie le champ texte Nombre de lignes visibles Nombre de colonnes visibles
Vos commentaires <TEXTAREA </TEXTAREA> La balise Pre permet d'afficher un texte en respectant sa structure (saut de ligne, tabulation ). NAME=COM1 ROWS=5 COLS=40>
TP :
Ralisation dune page web personnelle
15

TICE2 - Chapitre 3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TICE2 - Chapitre 3

Transféré par

Droits d'auteur :

Formats disponibles

Table des matires

Chapitre 04 : Langage HTML

<HTML> <HEAD> <TITLE>Document Html minimum</TITLE> </HEAD>

[Font color] [Line break] [Comments] [Center]

<FONT COLOR="#$$$$$$"> </FONT> <BR>  <CENTER></CENTER>

Dbut et fin de zone en couleur Aller la ligne Ne pas afficher Centrer

Ouvrir l'diteur de texte

3. Les titres et les listes

Liste non ordonne

Liste ordonne Elment de liste Paragraphe

[Numbered list] [List items] [Paragraph]

Les mois du printemps

Les mois d'automne

Quelques commentaires s'imposent;

1. &eacute; est l'un de ces caractres spciaux utiliss pour reprsenter le .

&lt ; &eacute ; &agrave ;

&amp ; &Eacute ; &iuml ;

Type Lien Un document complet

Exemple Pour accder aux pages du CRI :

distant Un document complet local Partie dun document courant

Pour accder une autre page local:

Dbut et fin de tableau Dbut et fin de ligne Dbut et fin de cellule

Un tableau deux lignes et deux colonnes se reprsente comme suit :

Si vous souhaitez y adjoindre des bordures : Bordure de cadre [Border]

<TABLE border=2> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>

<TABLE border=2 cellpadding=10> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>

<TR> <TD>cellule1</TD> <TD>cel. 2</TD> <TD>3</TD> </TR> </TABLE></CENTER>

Pas brillant! Et avec la balise de largeur de la cellule?

Impeccable! Prenons le mme tableau mais avec 2 lignes.

Maintenant, il est temps de mettre de l'ordre dans les cellules.

Horizontalement Verticalement Horizontalement Verticalement

A titre d'exemple, reprenons le tableau suivant :

Il est aussi possible de changer la couleur de la cellule. Couleur de la cellule

Notre dernier exemple pourrait devenir :

Donc, pas de problmes! On fait un essai...

Reprenons notre exemple;

<BODY BACKGROUND="PAPER.gif"> <H1>Bonjour</H1> </BODY>

Programme excutable Mthode de transmission de paramtres : Get, post

Texte TYPE Password NAME SIZE

Un nom qui identifie le champ texte Taille de lespace de saisie.

Nom et prenom : <INPUT Mot de passe: <INPUT

NAME=etat VALUE="mar"> Marie

NAME=sexe VALUE="h"> Homme

TYPE=CHECKBOX NAME=sexe VALUE="f"> Femme

Mois de Naissance <SELECT Mois> <OPTION checked> Janvier

<OPTION> Fevrier </SELECT> 8.4. Texte libre sur plusieurs lignes

NAME ROWS COLS

Vous aimerez peut-être aussi

1. é est l'un de ces caractres spciaux utiliss pour reprsenter le .