 |
accueil |
 |
Imprimer |
 |
Envoyer à un ami |
Les liens
Les images
GUIDE HTML :
Travaux pratiques - éléments de base -
Le but
de ce document est de présenter d'une façon concise et rapide
le langage html. Il ne s'agit que d'une introduction, les notions avancées
comme les pages dynamiques ou les langages comme Java script ne seront
pas abordés.
HTML est un langage universel qui tient le Web à bout de bras.
II existe de nombreux serveurs qui proposent des documents multimédias,
c'est à dire composés de textes, d'images, sons et animations.
Ces documents appelés pages Web sont visualisés grâce
à un programme appelé navigateur. Ex: Internet Explorer,
Netscape script, Opéra.
Un document proposé par un serveur Web est toujours désigné
par une adresse appelée URL. Elle a la structure suivante : protocole://adresse
machine[répertoire/sous répertoire/../nom document].
Le protocole http est utilisé pour transmettre une page au format
HTML. II est cependant possible d'indiquer un autre protocole comme ftp,
telnet, etc...
La machine sur lequel fonctionne le serveur Web est spécifiée
soit par son adresse IP numérique (192.168.0.1) soit par son adresse
alphanumérique ( www.ibm.com).
Le document demandé est identifié par son chemin d'accès
(path) et son nom. Pour une page html, son nom se termine par «
.html » ou « .htm ».Ex : page1.htm. Notez que si aucun
document n'est spécifié, c'est une page par défaut
ou page d'accueil qui est envoyée au navigateur.
HTML - Hyper Text Markup Language - Comme son nom l'indique est un langage
qui permet de définir l'habillage d'un texte, c'est à dire
la façon dont il doit s'afficher à l'écran d'un navigateur.
C'est un langage structurel. C'est à dire qu'il sert de squelette
à vos pages Web, et que l'on peut envisager comme la charpente
de tout bon site Web. C'est un langage de conception car il permet de
mettre en place un support visuel très riche. C'est un langage
de marquage. Ses structures et ses balises permettent à un rédacteur
d'organiser des informations disparates en un contenu parfaitement cohérent.
C'est à ce dernier aspect que nous commencerons à nous intéresser
à travers l'exemple de la mise en page d'un descriptif de séjour
en tunisie.
Structure d'une page HTML
Une page HTML est un fichier texte enrichi d'un certain nombre
de commandes appelées balises. Ces balises sont toujours exprimées
sous la forme d'un mot clé, encadré par les caractères
<>. Ex : <blockquote>. Pour la plupart des balises, il existe
une balise d'ouverture et une balise de fermeture associée, reprenant
le même nom, mais précédé du caractère
/. La commande spécifiée s'applique donc uniquement au texte
situé entre le couple de balises ainsi formé. Ex: <html>
et </html>.
Notons qu’une balise est insensible à la casse, le formatage
manuel du document est toujours ignoré (saut de ligne, espaces.)
Une page HTML contient toujours un nombre requis d'éléments
standard. Ces éléments sont spécifiés dans
le code suivant :
<html>
<head>
<title> Tunisie hors pistes : printemps 2000 </title> </head>
<body>
<h1> HTML est facile à apprendre </h1>
<p> Hello world, welcome to the world of html. C'est le premier
paragraphe en html. II est court. </p>
<p> C'est votre second paragraphe en html. </p>
</body>
</html>
Les éléments indispensables sont:
<html>, <head>, <title> et <body> ainsi que leurs
balises respectives de fermeture </html>, </head>, </title>
et </body>.
La balise HTML désigne toute page de ce type, à savoir un
fichier portant soit l’extension « html » ou alors «
htm », de la même façon qu’un fichier word possède
une extension « .doc » ou un fichier excel, l’extension
« .xls ». La balise HEAD définit l'en tête et
la balise BODY le corps de la page.
Dans l'en tête, on ne met généralement qu'une seule
information, le titre du document affiché par le navigateur, entre
les balises TITLE. On trouvera aussi des en têtes de balises META
pour permettre l'indexation de mots clés par les moteurs de recherche
ainsi que des scripts additionnels. Dans le corps, entre les balises <body>
et </body>, on mettra en fait le document à afficher.
Signalons l'existence de balises de commentaires : <!-Ceci est un commentaire
--- !>.
Les en têtes
II en existe 6 niveaux, de 1 à 6, avec 1 comme plus important.
Les en têtes permettent un affichage plus foncé et plus gros
que normalement. La première de ces balises est <h1>, <h2>....
<html>
<head>
<title> Tunisie hors pistes : printemps 2000 </title>
</head>
<body>
<h1> HTML est facile à apprendre </h1>
<h2> Surtout à travers un exemple ensoleillé </h2>
<h3> Automne 2002 </h3>
<h4> Séjour en Tunisie </h4>
</body>
</html>
Les paragraphes
Vous avez remarqué que le formatage manuel du document n'était
pas interprété pas votre navigateur. C'est normal, HTML
est lui-même un langage de formatage, il définit par certaines
balises l'aspect et l'apparence de votre texte. Les balises <p>
</p> permettent de délimiter un paragraphe. La balise de
fermeture n'est pas toujours utilisée cependant elle permet de
mieux aligner vos paragraphes en utilisant l'argument « align =
». La balise <br> exécute un saut de ligne.La balise
<hr> affiche une ligne horizontale.
<html>
<head>
<title> Tunisie hors pistes printemps 2000 </title>
</head>
<body>
<hr>
<h1> Automne 2002 </h1 >
<h2> Séjour en Tunisie </h2>
<p> C'est un séjour de 9 jours qui comprend votre voyage
Paris / Djerba, ainsi que 8 nuits en résidence hôtelière
et pension complète. </p>
<p> Vous aurez accès à de véritables palaces
ou seul votre confort importera. <br> Nos guides se feront un plaisir
de vous faire découvrir les richesses de la culture tunisienne
ainsi que la beauté des paysages que vous traverserez. </p>
<hr>
<center> takwin : agence de voyages </center> </body></html>