Internet
Site Web: fonctionnement, structure et programmation
Starbuzz est une chaîne de Cafés connue pour sa croissance ultra rapide. La chaîne a d'ailleurs grandi si vite qu'elle n'a même pas eu le temps de mettre en place un site web. En achetant votre thé Chai chez Starbuzz, vous tombez par hasard sur le PDG qui vous demande de réaliser une page web ayant l'allure ci-contre
Pour y parvenir, commencez par ouvrir dans votre éditeur de texte, la liste des boissons que le PDG a écrit sur la serviette. Ces boissons constituent le contenu de votre page. Vous y ajouterez ensuite quelques balises HTML pour le structurer, mais pour le moment, ne tapez que le contenu de base. Tant que vous y êtes, ajoutez en haut de la page "Les boissons du Café Starbuzz".
Une fois le texte tapé, enregistrez votre travail dans un fichier que vous nommerez "index.html" et que vous placerez dans un dossier "starbuzz". Vous stockerez par la suite dans ce dossier tous les fichiers du site.
Finalement, ouvrez le fichier index.html avec votre navigateur préféré en double-cliquant dessus.
Votre page est chargée dans le navigateur mais le résultat est quelque peu décevant... C'est normal. Jusqu'à présent, vous n'avez tapé que le contenu de la page web. Il faut encore y insérer des balises HTML permettant d'indiquer au navigateur la structure de votre page, c'est-à-dire la façon de baliser le texte afin que le navigateur reconnaisse un titre, sache quel texte est un sous-titre, etc.
Quand le navigateur sera au fait de la structure, il pourra afficher votre page de façon plus logique et plus lisible.
Votre travail consiste donc maintenant à baliser la serviette Starbuzz conformément à la structure que vous voyez.
La plupart des éléments HTML sont constitués d'une balise ouvrante et d'une balise fermante correspondante entre lesquelles vient se glisser le texte dont elles décrivent la structure. Ce texte intercalé est appelé le contenu de l'élément:
La plupart des éléments HTML peuvent être complétés d'attributs leur donnant des informations supplémentaires. Placés dans la balise ouvrante de l'élément, les attributs ont toujours la même syntaxe: en premier le nom de l'attribut, suivi du signe égal puis la valeur de l'attribut entre une paire de guillemets.
Nous apprendrons au fur et à mesure quels attributs sont supportés par quels éléments. Lorsque vous aurez fini ce tutoriel, vous pourrez vous tourner vers d'excellentes références pour vous rafraîchir la mémoire, comme le site w3schools.com.
Vous possédez maintenant un fichier HTML avec des balises. Néanmoins, ceci ne suffit pas pour en faire une page web. En effet, une page web commence toujours par l'élément <html> et se compose d'au moins deux éléments:
Une page Web doit donc toujours avoir la structure minimale suivante:
<html>
<head>
<title>Premiers pas</title>
</head>
<body>
<p>Bonjour tout le monde!</p>
</body>
</html>
Appliquée à votre première page Web, cette structure aura l'allure suivante et sera interprétée par le navigateur comme une page Web standard:
Code source du fichier « index.html ».
Interprétation du fichier « index.html » par un navigateur web.
Notez qu'après chaque changement opéré dans votre éditeur de texte sur le fichier index.html, il est possible d'actualiser son rendu dans le navigateur en appuyant simplement sur la touche F5.
Les navigateurs se servent des chevrons < et > pour ouvrir et fermer les balises. Dès lors, utiliser ces caractères réservés au code HTML peut être la source de problèmes lors de l'affichage. Néanmoins, le HTML vous permet de facilement spécifier ces caractères ainsi que d'autres caractères spéciaux qui soit ne peuvent pas être directement saisis au clavier, soit n'existent pas dans l'encodage choisi. Il faut faire appel à des entités numériques ou alphabétiques définies afin de faciliter la vie des codeurs. Tous les caractères spéciaux utilisés dans vos pages auront donc une abréviation ou une syntaxe propres. Par exemple, le caractère «e accent aigü» se code indifféremment par é ou bien par é.
Le tableau suivant présente certaines entités HTML qui renvoient à des caractères réservés ou spéciaux. Vous trouvez la liste de ces entités sur le site www.w3schools.com:
|
Caractère |
Entité |
Caractère |
Entité |
|---|---|---|---|
|
< |
|
> |
|
|
& |
|
" |
|
|
à |
|
â |
|
|
ä |
|
æ |
|
|
é |
|
è |
|
|
ê |
|
ë |
|
|
ù |
|
û |
|
|
ü |
|
ö |
|
|
ï |
|
î |
|
|
ç |
|
œ |
|
Il est également possible d'utiliser des accents sur des majuscules. Par exemple, l'entité À renvoie au caractère «À».
Dr. Diabolo, dans sa quête pour dominer le monde, a construit une page web secrète à laquelle seuls ses complices peuvent accéder pour avoir ses instructions. Un extrait du HTML a néanmoins pu être intercepté et il est possible qu'il dévoile en partie le lieu de leur prochaine réunion. Utilisez votre expertise en HTML pour craquer le code et découvrir le lieu. Voici cet extrait:
|
