docTP5 : Introduction au langage HTML I) Présentation II) Les outils
download 
Plainte Transcription
TP5 : Introduction au langage HTML I) Présentation II) Les outils
TP5 : Introduction au langage HTML
I) Présentation
Le HTML (HyperText Mark-up Language) est un langage dit de « structuration » dont
le rôle est de formaliser l’écriture d’un document avec des balises de formatage. Les balises
permettent d’indiquer la façon dont doit être présenté le document et les liens qu’il établit avec
d’autres documents. Le langage HTML permet notamment la lecture de documents sur
Internet { partir de machines différentes, grâce au protocole HTTP, permettant d’accéder via
le réseau à des documents repérés par une adresse unique, appelée URL.
On appelle World Wide Web (noté www) ou tout simplement Web (mot anglais
signifiant toile) la « toile virtuelle » formée par les différents documents (appelés « pages
web ») liés entre eux par des hyperliens.
Les pages web sont généralement organisées autour d’une page d’accueil, jouant le rôle
d’un point central dans la navigation. Cet ensemble cohérent de pages web par des liens
hypertextes et articulées autour d’une page d’accueil commune est appelée site web.
Le Web est ainsi une énorme archive vivante composée d’une myriade de sites web
proposant des pages web pouvant contenir du texte mis en forme, des images, des sons, des
vidéos, etc.
L’élément clé pour la navigation au sein des pages web est le navigateur (en anglais
browser), c'est-à-dire le logiciel client capable d’interroger les serveurs web, d’exploiter leurs
résultats et de mettre en page les informations grâce aux instructions contenues dans la page
HTML.
Les principaux navigateurs utilisés sur Internet sont Mozilla Firefox, Microsoft
Internet Explorer, Google Chrome.
Source : http://www.commentcamarche.net
Dans la suite de ce cours, nous apprendrons à programmer à partir de la dernière
version du langage, HTML5.
Question n°1 :
De quand date le HTML et plus globalement le Web ? Qui en est le principal
inventeur ?
II) Les outils pour coder en langage HTML
Le code d’une page HTML est stocké dans un fichier texte dont l’extension est .htm ou
.html. Un éditeur de texte est donc nécessaire pour écrire le code source. Nous utiliserons
NotePad++ qui est un logiciel très agréable d’utilisation, et de plus, libre et gratuit.
Pour interpréter le code HTML, il faut simplement un navigateur Web.
III) Squelette d’une page HTML
Le langage HTML manipule des balises (markup).
<!DOCTYPE html>
<html>
<!-Ceci est un commentaire -->
<!-- En tête -->
<head>
<!-- Encodage -->
<meta charset="utf-8" />
<!-- Titre de la page -->
<title>Page en HTML</title>
</head>
<!—Corps de la page -->
<body>
</body>
</html>
Commentaires :
Le DOCTYPE indique au navigateur le type de document, le langage en lequel est écrit
le code qui suit.
Les commentaires sont écrits dans des balises spécifiques (qui apparaissent ici en
vert).
L’en-tête précise la méthode d’encodage des caractères (ici UTF-8) ainsi que le titre de
la page, qui apparaitra sur le navigateur.
Le contenu de la page se place entre les balises <body>.
Remarque :
Pour accéder au code « source » en HTML de n’importe quelle page web, vous pouvez
faire un clic droit sur la page et choisir « Code source ».
IV) Votre première page HTML
<!DOCTYPE html>
<html>
<!-- En tête -->
<head>
<!-- Encodage -->
<meta charset="utf-8" />
<!-- Titre de la page -->
<title>Ma première page en HTML</title>
</head>
<!—Corps de la page -->
<body>
<p>Bonjour à tous !</p>
</body>
</html>
Question n°2 :
Dans NotePad++, copier/coller le code ci-dessus et l’enregistrer dans un fichier
premierepageweb.html. Ouvrir la page avec un navigateur.
V) Une deuxième page Web
Ouvrez la page web nommée pageweb2.html, à la fois dans un navigateur et dans
NotePad++ afin d’en étudier la syntaxe.
Votre travail :
Etudier le code source de cette page. Vous pouvez si vous le souhaitez enregistrer la
page dans vos documents puis l’ouvrir avec NotePad++ afin de la modifier { votre guise.
En synthèse, complétez le tableau suivant :
Balise
Description
Exemple d’utilisation
<!-- -->
Commentaire
<!-- ici un commentaire -->
<p>
Paragraphe
<p>Ceci est un paragraphe</p>
<h1> à <h6>
<br/>
<strong>
<em>
<mark>
<sup>
<sub>
<ul>
<table>
<a>
<img />
<hr />
VI) Quelques règles de syntaxe
Toute balise ouverte doit être refermée :
<p>contenu de la balise</p>
<p> est la balise ouvrante, </p> est la balise fermante.
Quelques rares balises sont vides (elles n’ont pas de contenu), la fermeture se fait alors de cette
manière :
<br />
<img src=‘‘velo.jpg’’ alt= ‘‘vélo’’ />
Certaines balises disposent d’attributs : ce sont un peu les options des balises. Ils viennent
compléter pour donner des informations supplémentaires comme un titre, une taille à affecter,
et bien d’autres. L’attribut se place après le nom de la balise ouvrante et a le plus souvent une
valeur.
La valeur des attributs doit être entourée de guillemets ou d’apostrophes le plus souvent :
<img src =‘velo.jpg’ alt= ‘vélo’ />
<a
href=‘‘http://fr.wikipedia.org’’>Un
lien
hypertexte
vers
Wikipédia</a>
Les balises doivent être correctement imbriquées :
<p>Cette syntaxe est <strong>correcte</strong></p>
<p>Cette syntaxe est <strong>incorrecte</p></strong>
VII) Eléments de type bloc et de type en-ligne (inline)
Eléments de type bloc :
Par défaut, les éléments de type bloc sont affichés par le navigateur avec un saut de
ligne au début et à la fin.
Exemples : <h1>, <p>, <ul>, <table>
Le code suivant affichera deux paragraphes, l’un en dessous de l’autre :
<p>Premier paragraphe</p><p>Deuxième paragraphe</p>
Eléments de type inline :
Les éléments de type inline se placent normalement l’un { côté de l’autre (pas de saut
de ligne).
Exemples : <strong>, <em>, <a>, <img />
Propriétés :
Les éléments de type bloc peuvent contenir des éléments de type bloc ou de type inline
{ l’exception des paragraphes <p> et des titres <h1>, etc. qui ne peuvent contenir que des
éléments inline. Donc on ne met pas de titre dans un paragraphe ni de paragraphe dans un
titre.
Les éléments de type inline ne peuvent contenir que des éléments inline.
VIII) Un outil de vérification de syntaxe
Pour vérifier que votr page Web est conforme aux spécifications HTML5, rendez-vous
sur le site du W3C (World Wide Web Consortium) : http://validator.w3.org
Vous pouvez aussi bien vérifier des pages web locale (non hébergée sur un serveur,
par exemple les pages que vous allez d’abord créer sur votre ordinateur) que les pages
hébergées sur un serveur.
Les erreurs, lorsqu’il y en a, vous seront indiquées (en anglais !) et vous pourrez ainsi
les corriger.
