Programmation Web : HTML et Javascriptmathinfo.univ-reims.fr/IMG/pdf/chap1-3.pdf · Programmation...

Programmation WEB Chap. 1 – CRÉER UN DOCUMENT AU FORMAT HTML

Programmation Web :HTML et Javascript

——————–

Michaël Krajecki

Université de Reims Champagne-ArdenneDépartement de Mathématiques et Informatique

Moulin de la Housse - BP 103951687 Reims Cedex 2.

Tél. : 03 26 91 33 45, [email protected]

—————

DESS IASAnnée 2003–2004.

M. KRAJECKI 1 DESS IAS – Année 2003-2004


INTRODUCTION

Le langage HTML est un langage de description et de mise en forme d’un

document électronique.

Les objectifs de la description sont :– unification d’un ensemble de documents ;

– allègement de la taille du document ;– détachement lors de la création des impératifs liés au fond ;– structuration du contenu d’une page et des relations des contenus de

plusieurs pages d’un même site.– faciliter l’échange de documents électroniques par l’intermédiaire

d’internet



PLAN

Ce chapitre est organisé en 4 parties :

– LA HIÉRARCHIE D’UN DOCUMENT HTML– MISE EN PAGE EN HTML– LIENS HYPERTEXTE– INCLUSION D’IMAGES



1. HTML ET LES DTD (DÉFINITION DE TYPE DEDOCUMENT)

– HTML s’appuie sur quelques balises (également appelées marqueurs)fondamentales.

– Ce sont des commandes HTML, écrites entre les signes < et > pour quele na vigateur puisse les exécuter.

– Une balise se présente ainsi : <commande>– de nombreuses balises exigent d’être fermées : </commande> ;

– il est conseillé d’employer des lettres minuscules.– Chaque document doit commencer par la balise <html>.



LE TYPE DE DOCUMENT

– Avant la balise <html>, il faut définir le <!DOC TYPE> ;– Abréviation pour document type declaration)– Précise quelle est la version de HTML que vous utilisez

– Permet au navigateur de réaliser un rendu conforme à la version deHTML choisie.

– Une DTD est un fichier (ou plusieurs fichiers à utiliser ensemble), écrit en

XML– En pratique, nous allons définir des documents en utilisant la version 4 de

HTML. La pr emière ligne de vos documents devra alors être :

– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN">



UN PREMIER DOCUMENT HTML

< !DOCTYPE HTML PUBLIC " � //W3C/ / DTD HTML 4.01 T r a n s i t i o n a l / / EN"><html> < ! �� début du document �� >

<head> < ! �� début de l ’ en tê te �� >< t i t l e > < ! �� t i t r e de l a page �� >

Mon premier document< / t i t l e >

< / head> < ! �� f i n de l ’ en tê te �� ><body> < ! �� début du corps du document �� >

V o i c i mon premier document HTML !< / body> < ! �� f i n du corps du document �� >

< / html>



LA HIÉRARCHIE D’UN DOCUMENT HTML

– Un document HTML est structuré par les définitions de titres,paragraphes et listes

– Les titres introduisent une hiérarchie sur plusieurs niveaux– Les balises <h1> et </h1> définissent le titre de plus grande

importance– <h6>, associée à </h6> définit le titre de plus petite importance.



Exemple

<html><head>

< t i t l e > T i t r e s en HTML < / t i t l e >< / head><body>

<h1> Du < / h1><h2> plus < / h2><h3> gros < / h3>

<h4> au < / h4><h5> plus < / h5><h6> p e t i t < / h6>

< / body>< / html>



Le résultat (Internet Explorer)



Les paragraphes

<html><head>

< t i t l e > Paragraphes < / t i t l e >< / head><body>

<h1> Les paragraphes < / h1><h2> Une première s é r i e de paragraphes < / h2><p> V o i c i donc un premier paragraphe . < / p><p> V o i c i donc un second paragraphe . < / p><h2> Une seconde s é r i e de paragraphes < / h2><p> V o i c i un nouveau paragraphe . < / p><p> V o i c i un dern ie r paragraphe . < / p>

< / body>< / html>



Le résultat



Lignes et sauts de lignes

– <br> : demande explicitement un saut de lignes au sein d’un paragraphe– <hr> : insertion des lignes horizontales

<html><head>

< t i t l e > Lignes e t sauts de l i g n e s < / t i t l e >< / head><body>

<h1> Lignes < / h1><p> Un paragraphe avant l a l i g n e h o r i z o n t a l e . < / p><hr><p> V o i c i un paragraphe <br>

dans leque l on a <br>insé ré des sauts de l i g n e s . < / p>

< / body>< / html>



Listes descriptives

– Les listes descriptives permettent un affichage de type dictionnaire– Le mot clé est placé sur la première ligne, la définition correspondante est placée sur les lignes

suivantes.

<html><head>

< t i t l e > Desc r ip t i ons < / t i t l e >< / head><body>

<h1> Glossa i re < / h1>< d l >

<d t> Premier terme : < / d t><dd> l a d e s c r i p t i o n du premier terme . < / dd>

<d t> Second terme : < / d t><dd> l a d e s c r i p t i o n du second terme . < / dd>

< / d l >< / body>

< / html>



Le résultat



Listes non ordonnées

Les listes à puces permettent de faire des énumérations

<html><head>

< t i t l e > L i s t e non ordonnée < / t i t l e >< / head><body>

<h1> L i s t e < / h1><ul>

< l i > première ent rée ; < / l i >< l i > seconde ent rée ; < / l i >< l i > t ro i s ième ent rée . < / l i >

< / ul>< / body>

< / html>



Listes ordonnées

Les liste ordonnées permettent de définir une hiérarchie dans la liste ennumérotant chacun des éléments

<html><head>

< t i t l e > L i s t e ordonnée < / t i t l e >< / head><body>

<h1> L i s t e < / h1><ol>

< l i > Première ent rée . < / l i >< l i > Seconde ent rée . < / l i >< l i > Trois ième ent rée . < / l i >

< / ol>< / body>

< / html>



Le résultat



2. MISE EN PAGE

Mise en page des :– textes et polices de caractères– paragraphes

Utilisation d’attributs :

– ou de commutateurs

– associés à une balise– modifient les propriétés de la balise



MISE EN FORME DES TEXTES

Chaque phrase, mot ou caractère composant un paragraphe peut être misen forme individuellement à l’aide des quatre balises suivantes :

– caractères gras <b> et </b>– caractères italiques <i> et </i>– caractères soulignés <u> et </u>

– caractères «Télétypes» <tt> et </tt>



MISE EN FORME DES TEXTES

<html><head>

< t i t l e > Mise en forme des tex tes < / t i t l e >< / head><body>

<h1> Mise en forme des tex tes < / h1><p> Le HTML permet de d é f i n i r des caractères

en <b> gras < / b> , en < i > i t a l i q u e < / i > ,en <u> soul igné < / u> mais auss i en< t t > t é l é t y p e < / t t > . < / p>

<p> On peut t o u t <b>mé< / b>< i > l a < / i ><u>ng< / u>< t t >er< / t t > . < / p>

< / body>< / html>



Et voila



LES CARACTÈRES ACCENTUÉS ET SPÉCIAUX

– Les caractères présents dans un fichier au format HTML sont codés surseulement 7 bits

– Il est donc possible de coder 128 (��

) caractères– Un ensemble de codes permettant d’utiliser les caractères accentués– Les accents aigu, grave, circonflexe et les trémas sont définis

respectivement par les séquences de codes &cut;, &grave;, &circ;et ¨

– Accentuer une lettre : la faire précéder par l’accent, par exemple

à pour ’à’– L’ensemble des codes associés aux caractères est précisé dans la table

des codes ISO 5589-1 également appelée table ISO-Latin1



Les principaux codes

Séquence Code ISO-Latin1 Caractère ou symbole

&agrave ; &#224 ; à

&acirc ; &#226 ; â

&egrave ; &#232 ; è

&eacute ; &#233 ; é

&ecirc ; &#234 ; ê

&euml ; &#235 ; ë

&icirc &#238 ; î

&iuml ; &#239 ; ï

&ugrave ; &#249 ; ù

&uuml ; &#251 ; ü

&lt ; &#139 ; <

&gt ; &#155 ; >

&nbsp ; &#160 ; espace insécable



Un petit exemple

<html><head>

< t i t l e > U t i l i s a t i o n des accents dans un document HTML < / t i t l e >< / head><body>

<h1> Accentuat ion de l a l e t t r e ’ e ’ < / h1>

<p> V o i c i un e accent aigü obtenu dedeux façons d i f f é r e n t e s : & # 2 3 3 ; e t & eacute ; < / p>

<h1> Quelques symboles < / h1>

<p> Le symbole < i > plus ou moins < / i > : & # 1 7 7 ; e t &plusmn ; < / p><p> Le < i > copy r igh t < / i > : & # 1 6 9 ; e t &copy ; < / p>

< / body>< / html>



Le résultat



LES PARAGRAPHES

La liste suivante présente quelques balises permettant le formatage deparagraphes de façon automatique :

– citation (références d’un ouvrage) <cite> et </cite>– citation (texte extrait d’un ouvrage) <blockquote> et </blockquote>– adresse <address> et </address>



LES PARAGRAPHES

La liste suivante présente quelques balises permettant le formatage d’unepartie d’un paragraphe :

– mise en valeur (italique) <em> et </em>– mise en valeur (gras) <strong> et </strong>– texte préformaté <pre> et </pre>

– placer un texte en exposant <sup> et </sup>– placer un texte en indice <sub> et </sub>



Un exemple

<html><head>

< t i t l e > Mise en page de paragraphes < / t i t l e >< / head><body>

<h1> Mise en page de paragraphes < / h1><p> Les paragraphes su ivan ts sont formatés à l ’ a ide des ba l i ses

spéc ia l i sées . < / p>

<blockquote> Rien n ’ es t moins sûr que l ’ i n c e r t a i n . < / blockquote>< c i te > P ie r re Dac < / c i te >

<address> Mr HTML, rue du WEB< / address>< / body>

< / html>



ATTRIBUTS DES BALISES POUR LA MISE EN PAGE

– Les commutateurs permettent de modifier localement certaines propriétésassociées aux éléments définis

– De façon générale La structure d’une balise utilisant des commutateursest la suivante :<balise commutateur1="valeur1" commutateur2="valeur2">

éléments </balise>.– Exemple : <p align="right"> du texte </p>.– Une liste complète des attributs définis en HTML 4 est disponible en

annexe de la spécification de HTML 4 (index of the HTML 4 Attributes,pages 363–374)

– La spécification produite par la W3C est disponible en ligne à l’adressewww.w3.org/TR/html401/ .



GESTION DES POLICES DE CARACTÈRES

– La balise font permet de définir les principales caractéristiques de lapolice de caractères utilisée

– Chaque navigateur définit une police de caractères par défaut(généralement la police times

– Exemple : <font face=”lucida, arial”>

– De préférence : times, arial, helvetica– Définir la taille de la police de caractères (valeur comprise entre 1 et 7) :

1. De façon absolue : vous indiquez directement la taille à utiliser par unevaleur comprise entre 1 et 7.

2. De façon relative : vous précisez une taille par rapport à la valeurcourante. Ainsi, si vous souhaitez diminuer la taille de 1, il vous suffitde préciser la valeur -1 pour l’attribut size. De même, pouraugmenter la taille de 2, précisez <font size=”+2”>.


http://www.w3.org/TR/html401/


Les couleurs

– Définition d’une couleur en précisant son code RGB (Red Green Blue)– La couleur est définie par l’intensité des trois couleurs primaires (rouge,

vert et bleu)– Chaque intensité est exprimée par une valeur comprise entre 0 et 255

codée en base 16

– La couleur rouge a pour code #FF0000 :1. l’intensité du rouge est maximale, elle a pour valeur 255, soit #FF ;2. l’intensité du vert, comme celle du bleu, est nulle, soit #00 ;3. la couleur est alors définie par la concaténation de ces 3 valeurs, soit

#FF0000.



Définition de la couleur

Couleur Valeur RGB Couleur Valeur RGB

aqua #00FFFF black #000000

blue #0000FF fuchsia #FF00FF

gray #808080 green #008000

lime #00FF00 maroon #800000

navy #000080 olive #808000

purple #800080 red #FF0000

silver #C0C0C0 teal #008080

yellow #FFFF00 white #FFFFFF



Les couleurs

– Il est possible de définir la couleur des liens hypertextes (normaux, actifs,

et déjà visités) et du fond de la page– Modification des différents attributs de la balise<body> :

bgcolor : définit la couleur du fond de la page.

link : l’attribut link définit la couleur des liens par défaut. Par exemple,pour obtenir des liens affichés en jaune, nous précisons : <bodylink=”yellow”>.

vlink : définit la couleur des liens déjà visités.alink : définit la couleur du lien actif : couleur affichée quand l’internaute

clique sur un lien.



Un exemple

<html><head>

< t i t l e > Les cou leurs < / t i t l e >< / head><body bgcolor=" ye l low " tex t=" red " l ink =" green ">

<h1> U t i l i s a t i o n des cou leurs < / h1>

<p> Par défaut , l e t e x t e est a f f i c h é en rouge . < / p>

<h1> Les l i e n s < / h1>

<p> < font color=" blue "> l a cou leur cho is iepour les l i e n s est l e v e r t .V o i c i un exemple :<a href=" h t t p : / / www. google . f r "> Google < / a> .

< / font> < / p>< / body>

< / html>



3. LIENS ET ANCRES

– La balise <a> et </a> permet de définir une ancre, c’est à dire un point

d’origine– Une action est associée à cette balise : déplacement vers un autre site,

un déplacement vers une autre page du même site ou un déplacement à

l’intérieur de la page actuelle– Cette balise n’est jamais utilisée sans commutateur– Lien hypertexte : commutateur href (de l’anglais Hypertext REFerence)

de la balise <a>



Liens vers un autre document HTML

– La structure d’un lien est la suivante :<a href="adresse"> le texte associé </a>.

– Exemple : <a href="http ://www.google.fr/index.html">

vers google </a>

– Adresse complète, complètement définie par trois informations :

1. Le nom du serveur.2. Le chemin du répertoire qui contient la page sur le serveur.3. Le nom de la page.



Liens vers une page hébergée localement

2 possibilités :

– Définir un lien vers une adresse complète (comme précédemment)

– Utiliser une adresse incomplète (sans préciser le nom du serveur Web)sous la forme d’un lien relatif

– Exemple : <a href="lapage.html"> vers une autre page

</a>

– Ou bien : <a href="ssrep/lapage.html"> vers une autre

page </a>

– Une troisième solution à proscrire : le lien absolu.



Liens vers un signet du même document

– Se déplacer au sein d’un même document

– Pour définir un lien interne, 2 ancres sont nécessaires :1. une ancre sera utilisée pour définir le lien hypertexte2. l’autre pour définir la destination de ce lien (appelée également ancre

nommée)– la valeur associée à href est la valeur de name de l’ancre nommée,

précédée du symbole #

– Ce symbole permet d’indiquer au navigateur que l’on reste dans la mêmepage.



Un exemple

<html><head>

< t i t l e > Liens i n t e r n e s < / t i t l e >< / head><body>

<a name=" debut "> <h1> Liens i n t e r n e s < / h1> < / a><h2> Sommaire < / h2><ul>

< l i > <a href=" #premier "> premier paragraphe < / a> < / l i >< l i > <a href=" #second "> second paragraphe < / a> < / l i >

< / ul><p> Du t e x t e < / p> <p> Du t e x t e < / p> <p> Du t e x t e < / p><a name=" premier "> <p> V o i c i l a première d e s t i n a t i o n . < / p>< / a><p> Du t e x t e < / p> <p> Du t e x t e < / p> <p> Du t e x t e < / p><a name=" second "> <p> V o i c i l a seconde d e s t i n a t i o n . < / p>< / a><a href=" #debut "> r e t o u r au début < / a>

< / body>< / html>



LES IMAGES

– La balise d’inclusion d’images est la balise <img>

– 1 attribut obligatoire : src (pour source)– <img src=”[URL]/[chemin]/nom du fichier”>

– Une adresse complète, un chemin relatif ou bien un chemin absolu (àéviter)

– Format Gif ou Jpeg

– alt définit une légende pour l’image



Taille des images

<html><head>

< t i t l e > Des images < / t i t l e >< / head><body>

<h1> Des images < / h1><img src=" image . g i f " width=" 100 " height=" 100 ">

< / body>

< / html>



POSITIONNEMENT DE TEXTES AVEC DES IMAGES

– align : alignement vertical– Les valeurs : top, bottom ou middle

– Du texte autour d’une image : les valeurs right ou left

– Commutateurs hspace et vspace : marge verticale et horizontale



DES IMAGES ET DES LIENS

<html><head>

< t i t l e > Des images et des l i e n s < / t i t l e >< / head><body>

<h1> Une image comme o r i g i n e d ’ un l i e nhyper tex te < / h1><a href=" h t t p : / / www. google . f r ">

<img src=" image . jpg "> < / a>< / body>

< / html>


Programmation Web : HTML et Javascriptmathinfo.univ-reims.fr/IMG/pdf/chap1-3.pdf · Programmation...

Documents

Transcript of Programmation Web : HTML et Javascriptmathinfo.univ-reims.fr/IMG/pdf/chap1-3.pdf · Programmation...