5513 HTML2

Cration de sites Web statiques : Le Langage HTML
Christine MICHEL Dpartement informatique, Universit Bordeaux 3
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
Les bases du html

Le fondement HTML met en forme le texte a l aide de BALISES. Elles se reprent facilement car elle sont toujours entre <>. Ainsi Les pages Web sont contitues de texte simple (format ASCII), encadr de baliss telle que <P> pour un nouveau paragraphe, <UL> pour une liste non numrotes . La particularit de HTML est de permettre une navigation entre les documents grces aux liens hypertextuels. HTML est donc un langage de description de documents, ce nest pas un langage de programmation
Christine MICHEL- UE 5513 - Dpt info Univ Bx 3
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
Cration des pages avec :

un diteur de texte : ncessite la connaissance de la syntaxe Un convertisseur TXT=>HTML. Par exemple celui de Word Un diteur HTML : Ex : Front Page DreamWeawer Trs intuitifs, interface quasi identique un TXT WYSIWYG : What You See Is What You Get) Problme : souvent dpendant dun navigateur
Ldition : Que choisir?

Pour les nophytes : convertisseurs et diteurs Une aide efficace pour obtenir rapidement des premiers rsultats Front Page 2000, Front Page Express : diteur de IE5 Netscape Composeur : diteur de Netscape Ensuite : diteur de texte ASCII La rduction quelques fonction de mise en page conduit des pages Web identiques et sans imagination De nombreuses possibilits des version HTML rcentes ne sont pas exploites par les utilitaires, et il faut retoucher a la main. La fonction WYSIWYG suggre une fausse image du rsultat On perd du tempsChristine MICHEL- UE 5513 - Dpt infoles Bx 3 menus a naviguer dans Univ sous 5
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.
Syntaxe du langage 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.
Exemple
<HTML> <HEAD> <TITLE>Document Html minimum</TITLE> </HEAD> <BODY> Texte du document </BODY> </HTML>
Le corps <BODY>
Mise en forme du texte

Le texte tout simple s'crit sans balises. Il sera repris par le browser avec la police et taille de caractres choisies dans sa configuration par dfaut. Attributs simples de mise en forme : Gras <B>...</B> Italique <I>...</I> A la ligne <BR> Commentaires  Centrage <CENTER> </CENTER> Pour 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.
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>
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
Les caractres spciaux

Ö Ö × × Ø Ø Ù Ù Ú Ú Û Û Ü Ü Ý Ý Þ &THORN ß ß à &agrace;
14
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. Niveau de titre <Hn></Hn> avec n=1 6
On peut aligner les niveaux de titre <H1 align=left></H1> <H1 align=center></H1> <H1 align=right></H1>
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>
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">
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.
Alignement gauche Alignement droite Alignement centr
<HR align=left> <HR align=right> <HR align=center>

18
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>
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>
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>
24
Les tableaux
Les tableaux
colonne ligne cellule
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>
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=%>
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>
31
Agencement des fentres Fentres horizontales <FRAMESET ROWS="...">

L'attribut ROWS="hauteur1,hauteur2,...,hauteurN" dfinit la hauteur des diffrentes fentres en cas de division horizontale. La hauteur s'exprime en pixels ou en %. Dans ce cas, on veillera ce que le total soit gal 100%;
Fentres verticales <FRAMESET COLS="...">

L'attribut COLS="largeur1,largeur2,...,largeurN" dfinit la largeur des diffrentes fentres en cas de division verticale La hauteur s'exprime en pixels ou en %. Dans ce cas, on veillera ce que le total soit gal 100%;
32
Exemple <HTML> <HEAD></HEAD> <FRAMESET ROWS="30%,70%"> <FRAME> <FRAME> </FRAMESET> </HTML> <HTML> <HEAD></HEAD> <FRAMESET COLS="30%,70%"> <FRAME> <FRAME> </FRAMESET> </HTML>
33
Exemple
On peut mlanger les deux :

<FRAMESET ROWS="30%,70%"> <FRAME src= A.htm > <FRAMESET COLS="30%,70%"> <FRAME SRC= B.htm > > <FRAME SRC= C.htm > > </FRAMESET> </FRAMESET>
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>
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>
36

5513 HTML2

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

5513 HTML2

Загружено:

Авторское право:

Доступные форматы

Cration de sites Web statiques : Le Langage HTML

Christine MICHEL Dpartement informatique, Universit Bordeaux 3

Les bases du html

Cration des pages avec :

Ldition : Que choisir?

Christine MICHEL- UE 5513 - Dpt info Univ Bx 3

Syntaxe du langage HTML

Christine MICHEL- UE 5513 - Dpt info Univ Bx 3

Mise en forme du texte

Christine MICHEL- UE 5513 - Dpt info Univ Bx 3

Christine MICHEL- UE 5513 - Dpt info Univ Bx 3

Les caractres spciaux

Christine MICHEL- UE 5513 - Dpt info Univ Bx 3

Les titres et les listes

Alignement gauche Alignement droite Alignement centr

<HR align=left> <HR align=right> <HR align=center>

Christine MICHEL- UE 5513 - Dpt info Univ Bx 3

Christine MICHEL- UE 5513 - Dpt info Univ Bx 3

Christine MICHEL- UE 5513 - Dpt info Univ Bx 3

Christine MICHEL- UE 5513 - Dpt info Univ Bx 3

colonne ligne cellule

Christine MICHEL- UE 5513 - Dpt info Univ Bx 3

Christine MICHEL- UE 5513 - Dpt info Univ Bx 3

Agencement des fentres Fentres horizontales <FRAMESET ROWS="...">

Fentres verticales <FRAMESET COLS="...">

Christine MICHEL- UE 5513 - Dpt info Univ Bx 3

On peut mlanger les deux :

Christine MICHEL- UE 5513 - Dpt info Univ Bx 3

Вам также может понравиться