Beruflich Dokumente
Kultur Dokumente
Le langage HTML
HTML (HyperText Markup Langage) est le langage universel utilis pour concevoir des pages WEB, c est dire des pages pouvant tre transporte sur le rseau Internet et lues par des Browsers : Netscape, Internet explorer. Les pages Web correspondent des
Ldition
Les fichiers HTML sont composs de texte ASCII=>texte pur avec des balises
Les fichiers sont lgers Ils y a indpendance des pages Web par rapport la plateforme
La visualisation, le navigateur
Les fichiers HTML sont interprts par les Browsers, qui sont dpendants de la plateforme Tous les Browsers interptent correctement le HTML natif (celui propos par le concorcium W3C) Certains diteurs de texte proposent des balises propres, lisibles par un browser mais inconnues des autres => certaines pages correctement affiches avec IE5 sont illisible avec Netscape. IL EST IMPORTANT DE CONNATRE LES BALISES ELEMENTAIRES POUR CORRIGER A LA MAIN LES FICHIERS HTML.
Ossature
Le dbut et la fin du document sont toujours marqus par les balises <HTML> et </HTML> Un document se structure en 2 parties L entte : <HEAD> et </HEAD> Le corps : <BODY> Texte du document </ BODY> chaque balise de dbut d'une action, soit <...>, correspond (en toute logique) une balise de fin d'une action </...>. les balises ne sont pas "case sensitive". Il est donc quivalent d'crire <HTML>, <html>, <Html>, etc.
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
Exemple
<HTML> <HEAD> <TITLE>Document Html minimum</TITLE> </HEAD> <BODY> Texte du document </BODY> </HTML>
Le corps <BODY>
11
Mise en forme Souligner Clignoter Indice Exposant Aligner du texte <U>...</U> <BLINK>...</BLINK <SUB>...</SUB> <SUP>...</SUP> <DIV align=left>...</DIV> <DIV align=center>...</DIV> <DIV align=right>...</DIV> <P align=left>...</P> <P align=center>...</P> <P align=right>...</P>
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
ou
12
La balise Font
Taille de caractre <FONT SIZE=?>...</FONT> ? = nombre de 1 7 ? = -3 -2 -1 0 +1 +2 +3 Couleur de caractre<FONT COLOR= ? ></FONT> Bleu #0000FF Vert #00FF00 Blanc #FFFFFF Violet #8000FF Rouge #FF0000 Jaune #FFFF00 Gris clair #C0C0C0 Noir #000000
13
14
On peut aligner les niveaux de titre <H1 align=left></H1> <H1 align=center></H1> <H1 align=right></H1>
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
15
Les listes Liste non-ordonne <UL></UL> lment de liste <LI> Exemple : <UL>Cours du premier semestre <LI> Analyse <LI> Conception <LI> Dploiement </UL> Liste ordonne lment de liste <OL></OL> <LI>
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
16
Les arrire-plans
Le langage Html permet d'agrmenter la prsentation du document d'un arrire-plan [background] color ou compos d'une image. Couleur d'arrire-plan Couleur de texte Couleur de lien Lien visit Lien actif <BODY BGCOLOR="#$$$$$$"> <BODY TEXT="#$$$$$$"> <BODY LINK="#$$$$$$"> <BODY VLINK="#$$$$$$"> <BODY ALINK="#$$$$$$">
On peut aussi prvoir un fond en image. Texture d'arrire-plan <BODY BACKGROUND="Adresse du fichier image">
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
17
Les sparateurs
Ligne horizontale <HR>
les valeurs par dfaut de la balise <HR> sont : une paisseur de trait de 2 pixels, un alignement centr et une largeur de 100% de la fentre.
Epaisseur en pixels <HR size=?> Largeur en pixels <HR width=?> Largeur en % de la fentre <HR width="%">
On prfrera spcifier la largeur en % de la fentre plutt qu'en pixels car l'affichage s'adaptera ainsi toutes les tailles et rsolutions d'cran.
Les Hyperliens
En cliquant sur un mot, gnralement soulign (ou une image) on est transporter; vers un autre endroit du document. vers un autre fichier Html situ sur le mme ordinateur. vers un autre ordinateur situ sur le Web. La syntaxe de ces liens entre plusieurs pages, est : <A HREF= " Adresse de la page d arrive "> Texte du point de dpart </A>
19
Lien externe
Tout ordinateur situ sur le rseau Internet possde une adresse ou une URL (Universal Ressource Locator). Html permet d'accder toutes les machines et toutes les ressources du Net. Lien vers une autre page HTML <A HREF=" http://serveur/chemin.../fichier ">...</A> Lien vers un serveur ftp <A HREF=" ftp://serveur/chemin.../fichier ">...</A> Liens vers une adresse email <A HREF=" mailto:utilisateur@hte ">...</A>
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
20
Exemple
<A HREF= http://www.montaigne.u-bordeaux.fr/univ.html">Universit</A> Adresse de la page d arrive Texte du point de dpart
21
Exemple
<a href="mailto:webmaster@montaigne.u-bordeaux.fr"> webmaster</a> Adresse de la personne a qui texte affich envoyer le mail
22
Lien local
Le fichier sur lequel on pointe se situe dans le mme rpertoire et sur la mme machine. Si le fichier est dans le mme rpertoire, l'adresse du lien sera alors tout simplement : <A HREF=" fichier.htm ">...</A> Le fichier sur lequel on pointe se situe dans un rpertoire diffrent et sur la mme machine. L'adresse du lien dfini de manire relative est : <A HREF= ../../repertoire 2/ fichier.htm ">...</A> L'adresse du lien dfini de manire absolue est : <A HREF= C:/siteweb/lien/repertoire 2/ fichier.htm ">...</A>
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
23
Les ancres
Ces liens permettent d aboutir a un endroit spcifique dans une page html. Point de dpart Lien vers une ancre dans la mme page <A HREF="#***">..texte a afficher.</A> Lien vers une ancre dans une autre page <A HREF="URL#***"> texte a afficher </A> Point d'ancrage (a positionner au point d arrive ) <A NAME="***"> texte a afficher </A>
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
24
Les tableaux
Les tableaux
26
Dfinition du tableau <TABLE></TABLE> Dfinition d'une ligne <TR></TR> Dfinition d'une cellule <TD></TD> Un tableau deux lignes et deux colonnes, et donc quatre cellules se reprsente comme suit : <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
27
Les tableaux
Bordure de cadre <TABLE Border=?></TABLE>
<TABLE border=2> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> L'espace entre les cellules ou l'paisseur des lignes du quadrillage <TABLE cellspacing=?> L'enrobage des cellules ou l'espace entre le bord et le contenu <TABLE cellpadding=?> La largeur de la table <TABLE width=%>
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
28
Les cellules
Largeur d'une cellule <TD width=?> en pixels <TD width=%> en pourcentage Fusion de lignes <TD rowspan=?> Fusion de colonnes <TD colspan=?>
29
Les frames
Les frames Elles servent diviser l'cran en plusieurs fentres Balises : Dbut de zone avec des fentres <FRAMESET> Fin de zone avec des fentres </FRAMESET> Contenu de la fentre <FRAME SRC= toto.htm > Sans frame : <NOFRAMES>...</NOFRAMES> est utilise pour indiquer le texte que doivent afficher les browsers incapables de grer les frames. <FRAMESET> </FRAMESET> remplace <BODY> </BODY>
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
31
32
Exemple <HTML> <HEAD></HEAD> <FRAMESET ROWS="30%,70%"> <FRAME> <FRAME> </FRAMESET> </HTML> <HTML> <HEAD></HEAD> <FRAMESET COLS="30%,70%"> <FRAME> <FRAME> </FRAMESET> </HTML>
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
33
Exemple
34
Attributs
Ascenseurs <FRAME SCROLLING="yes/no/auto" > Bordures <FRAME frameborder = ? > Espacement de cadre <FRAME framespacing =< ? > Nom : <FRAME NAME="NOM >. Name indique le nom de la fentre de telle sorte que cette frame puisse tre utilise comme cible d'un lien hypertexte. Name est utilise avec lattribut target de la balise A : permet dafficher une page dans une fenetre particulire nomme Exemple : <HTML><BODY> <A HREF= toto.htm" TARGET="fenetreC"><H1>B</H1></A> </BODY></HTML>
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
35
Exemple
<html> <head></head> <frameset cols="165,635,*" framespacing="0" border="0" frameborder="NO"> <frame src="menu.html" name="menu" noresize="NORESIZE" scrolling="NO"> <frameset rows="100,*" framespacing="0" border="0" frameborder="NO"> <frameset cols="420,215" framespacing="0" border="0" frameborder="NO"> <frame src="Univ/titre.html" name="titre" noresize> <frame src="Univ/sousmenu.html" name="sousmenu" noresize marginheight="0" marginwidth="0"> </frameset> <frame src="Univ/page4.html" name="texte"> </frameset> <frame src="rien.html" noresize scrolling="NO" marginheight="0" marginwidth="0" name="No Name"> </frameset> <noframes> </noframes> </html>
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
36