WEB - TP1 HTML
Le couple HTML+CSS (Hyper Text Markup Langage et Cascading Style Sheets) permet
de créer des pages visibles sur un navigateur Web (Browser en Anglais).
Pour faire simple, le code HTML défini le contenu d'une page et le code CSS sa
forme :
Dans cette activité, nous allons exclusivement nous intéresser au HTML puis dans
l'activité suivante au CSS.
Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, Opera,
etc.), afficher du texte, afficher des images, proposer des hyperliens (liens vers
d'autres pages web), afficher des formulaires et même maintenant afficher des vidéos
(grâce à la dernière version du HTML, l'HTML5).
HTML n'est pas un langage de programmation (comme le Python par exemple), ici,
pas question de conditions, de boucles... c'est un langage de description.
Pour coder plusieurs solutions sont possibles :
Avec éditeur en ligne (comme "jsfiddle" ou "jsbin") pratique juste pour tester du
code
Avec un éditeur de texte quelconque (comme "wordpad") en enregistrant le
fichier avec l'extension html
Avec un smartphone (comme "Easy HTML" sous Androïd ou "Coda" sous
IPhone)
Avec un éditeur spécifique gratuit (comme "Notepad++" sous Windows) un
éditeur plus performant payant (comme "Sublime Text")
Pour aborder le HTML, nous allons, dans un premier temps utiliser le site
"[Link]".
À faire vous-même 1
- Après avoir lancé votre navigateur web, tapez [Link] dans la
barre d'adresse.
Vous devriez voir apparaître ceci :
Nous allons pour l'instant uniquement utiliser la fenêtre « HTML » et la fenêtre
« Résultat ».
À faire vous-même 2
- Écrivez le code HTML suivant :
- Cliquez sur "run" en haut à gauche pour afficher le résultat puis observer
le résultat.
Comme déjà évoqué ci-dessus, en HTML tout est une histoire de balise que l'on ouvre
et que l'on ferme. Une balise ouvrante est de la forme <nom_de_la_balise>, les
balises fermantes sont de la forme </nom_de_la_balise>.
En observant attentivement le code, vous devriez forcément remarquer que toute
balise ouverte doit être refermée à un moment ou un autre. La balise ouvrante et la
balise fermante peuvent être sur la même ligne ou pas, cela n'a aucune espèce
d'importance, la seule question à se poser ici est : ai-je bien refermé toutes les
balises que j'ai ouvertes ?
Enfin pour terminer avec les généralités sur les balises, il est important de savoir
qu'une structure du type :
<balise1>
<balise2>
</balise1>
</balise2>
est interdite, la balise2 a été ouverte après la balise1, elle devra donc être refermée
avant la balise1.
En revanche, l'enchaînement suivant est correct :
<balise1>
<balise2>
</balise2>
</balise1>
Notez que dans notre exemple nous respectons bien cette règle « d'imbrication » des
balises avec la balise <p> et la balise <strong>.
Il est important de comprendre que chaque balise a une signification qu'il faut bien
respecter (on parle de la sémantique des balises). Par exemple le texte situé entre la
balise ouvrante et fermante <h1> est obligatoirement un titre important (il existe des
balises <h2>, <h3>......qui sont aussi des titres, mais des titres moins importants
(sous-titre)). La balise <p> permet de définir des paragraphes, enfin, la balise
<strong> permet de mettre en évidence un élément important.
Vous devez aussi savoir qu'il existe des balises qui sont à la fois ouvrantes et
fermantes (<balise/>) : un exemple que vous connaissez déjà, la balise permettant
de sauter une ligne, la balise <br/> (balise qu'il faut d'ailleurs éviter d'utiliser par
différentes raisons que nous n'aborderons pas ici).
JSFIDDLE est un très bel outil et autres outils similaires en ligne, mais il ne peut pas
être utilisé pour la réalisation d'un vrai site internet (ou d'une vraie application web).
Nous allons créer 1 fichier qui contiendra du HTML ([Link]).
À faire vous-même 3
- À l'aide d'un éditeur de texte si possible spécial code HTML comme
"Notepad++", créez un nouveau fichier.
- Sauvegardez-le en précisant son nom avec obligatoirement l'extension
".html", par exemple "[Link]".
- Écrivez le code suivant dans votre éditeur de texte (sans oublier de
sauvegarder quand vous avez terminé) :
- Testez votre code à l'aide d'un navigateur web (Firefox ou Chrome) en
“double-cliquant” sur le fichier [Link] ou à partir de « Notepad++ »
en cliquant sur le menu « Exécution » puis en choisissant le navigateur
Web de votre choix.
Dans l'exemple du "À faire vous-même 2", vous reconnaissez le code se trouvant
entre les balises <body> :
<body>
......
</body>
Tout votre code HTML devra se trouver entre ces 2 balises.
Le reste des balises devraient vous êtes inconnues. Passons-les en revue :
La première ligne (<!doctype html>) permet d'indiquer au navigateur que nous
utiliserons la dernière version du HTML, le fameux HTML5.
La balise <html> est obligatoire, l'attribut lang="fr" permet d'indiquer au navigateur
que nous utiliserons le français pour écrire notre page.
Les balises <head>...</head> délimitent ce que l'on appelle l'en-tête. L'en-tête
contient, dans notre exemple, 2 balises : la balise <meta charset="utf-8"> qui
permet de définir l'encodage des caractères (utf-8) et la balise <title> qui définit le
titre de la page (attention ce titre ne s'affiche pas dans le navigateur, ne pas
confondre avec la balise <h1>).
À faire vous-même 4
- En effectuant une recherche sur internet créez votre page
Web présentant les grands repères historiques du Web en se servant de
l'exemple ci-après présentant un code HTML commenté et son résultat,
autour des grands événements contemporains au Web et en partant du
fichier précédent.
Code HTML commenté :
Page Web correspondante :