Masquer apartés

I. Introduction

La création d'un site web nécessite l'apprentissage au minimum de deux langages :

Le langage HTML,

Abréviation de HyperText Mark-Up Language (langage de balisage d’hypertexte).

Il s’agit du langage qui permet d’afficher les informations sur une page web, il décrit la structure du document.

Le langage CSS,

Abréviation de Cascading Style Sheets (feuilles de style en cascade).

Il s’agit du langage qui permet de définir la présentation du document : l’apparence du texte (comme la police, la couleur, la taille, etc ...) ainsi que l’agencement de la page (comme les marges, l’arrière-plan, etc …)

En résumé, HTML a été conçu pour définir la structure d’un document, pas sa présentation. Par conséquent, tout ce qui est lié à la présentation d’un document devra être défini à l’aide de CSS que nous aborderons dans un deuxième temps.

Deux langages pour une page web, quel intérêt ?

Séparer le contenu de la forme est un des concepts clé de l'informatique.

Dans le cas d’un site web, on peut uniformiser la présentation en définissant un type de présentation une seule fois que l’on réutilise dans toutes les pages. Cela permet donc aussi un gain de temps.

Changer le style du site tout entier en modifiant seulement la feuille de style.

Le code HTML est considérablement réduit en taille et en complexité.

Faciliter la lecture de la page par les robots des moteurs de recherche qui ignorent la présentation.

II. Introduction au HTML 5

Une page HTML

Le format HTML est particulièrement utilisé pour produire les pages web. Un fichier HTML est un simple fichier texte. Il est donc possible de le produire ou modifier à l'aide d'un simple éditeur de textes.

En HTML, vous devrez toujours partir d'une page possédant "un code minimal obligatoire" :

<!DOCTYPE html>
	<html>
		<head>
			<title></title>
		</head>
		<body>
		</body>
	</html>

Un logiciel de traitement de texte n'est pas un éditeur de textes. Cette question fait l'objet d'une des recherches menées ici !

Quel éditeur de textes utiliser ? Selon l'environnement de travail, on pourra choisir Notepad++ (qui ne fonctionne que sous Windows), Kate ou Kwrite sous Linux, Bluefish, ou l'incontournable couteau suisse de l'édition, Emacs (sans vouloir attiser la guerre des éditeurs...).

Ce fichier HTML qui n'est qu'un simple fichier texte va être interprété par un navigateur web qui rendra les titres sous une certaine forme, affichera en gras ou en italique les caractères devant l'être, permettra de suivre des liens sur d'autres pages web ou d'autres sites web, etc.

Les navigateurs web les plus utilisés sont Firefox, Chrome, Internet Explorer, et Safari.

Nous recommandons l'utilisation de Firefox.

Voir le code source d'une page. Dans le menu du bouton droit de la souris, sélectionner "Code source de la page" (sous Firefox) ouvre une fenêtre qui affiche le code HTML de la page.

Essayez avec la page premier-html.html.

Soit le code HTML suivant :

<!DOCTYPE html>
<html>
<!-- Ceci est mon premier fichier HTML -->
<head>
    <title>Mon premier fichier HTML</title>
</head>

<body>
<h1>Section une</h1>  <!-- titre de la 1re section -->

<p>Mon premier paragraphe. Ces <b>deux mots</b> sont en gras.</p>

<p>Ce second paragraphe termine la section une.</p>

<h1>Section          deux</h1>

<p>Que pensez-vous du paragraphe suivant.</p>
<p>Martinus agens illas provincias pro praefectis aerumnas innocentium
malivolus tandem desineret

quieti coalitos homines in aperta pericula
proiectare.</p>

<h2>Sous-section 1 de la section deux</h2>

<p>Voici une liste à puces :</p>

<ul>
	<li>Premier élément de la liste,</li>
	<li>Deuxième élément de la liste.</li>
</ul>

<p>Voici une liste numérotée :</p>

<ol>
	<li>Premier élément de la liste,</li>
	<li>Deuxième élément de la liste.</li>
</ol>


</body>
</html>

Ce contenu a été sauvegardé dans un fichier nommé premier-html.html. Vous pouvez en visualiser le rendu en cliquant sur le lien suivant : visualisation du rendu de premier-html.html.

Rendu de mon premier fichier HTML. Observez attentivement le rendu dans votre navigateur du fichier premier-html.html en parallèle du code HTML de ce fichier.

Comment le titre de la page est-il rendu ?
Comment les caractères entre  sont-ils rendus ?
Les caractères espaces sont-ils significatifs ?

Le format HTML

Détaillons le code HTML.

En premier lieu, remarquons que le code HTML est structuré à l'aide de balises.

Les balises sont encadrées par les caractères < et > ou < et />.
Les balises s'utilisent comme des parenthèses : à la balise ouvrante <h1> correspond la balise fermante </h1>.
Les balises peuvent être imbriquées, par exemple les balises <b>–</b> des deux mots rendus en gras au sein des balises <p>–</p> du premier paragraphe.

Le W3C (World Wide Web Consortium) est l'organisation internationale qui définit les standards du web dont ceux pour le HTML et les CSS. Ces standards sont les spécifications des balises et autres conventions de rédaction d'une page HTML qui garantissent, normalement, le bon affichage de la page dans n'importe quel navigateur. Mais, les fabricants de navigateurs web peuvent ajouter leurs propres spécifications et leurs propres interprétations des standards. Ainsi, certains sites web n'ont pas le même aspect selon le navigateur utilisé pour les visualiser. Ce changement d'aspect peut aussi être du à un non respect des normes par le concepteur du site.

Notre exemple débute par une ligne

<!DOCTYPE html>

qui indique que le fichier respecte la norme HTML 5.

Dans les versions précédentes, on utilisait des DOCTYPES plus complexes telle XHTML 1.0 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Les balises utilisées dans l'exemple précédent sont :

Les balises <html>-</html> délimitent le code HTML qui comporte deux grandes parties, l'entête et le corps.
Un attribut est ajouté à la balise ouvrante. Par contre, les attributs ne sont pas répétés dans la balise fermante. Ils permettent d'ajouter des informations à la balise. Nous en utiliserons avec différentes balises.
Les balises <head>-</head> délimitent l'entête du document. Cet entête permet de préciser des informations générales sur le document tel que le titre comme nous le faisons ici. L'entête contient éventuellement d'autres informations tels qu'une brève description du document, des mots-clés, le nom du ou des auteurs du document, etc.

Quelle est l'utilité des informations fournies dans l'entête d'un document HTML ? À quoi peuvent servir les mots-clés ou la description fournis ? Nous avons déjà vu comment le titre du document pouvait être rendu. Toutes les informations contenues dans l'entête sont elles exploitées par le navigateur web ?

Les balises <body>-</body> définissent le corps du document. C'est dans ce corps que nous allons trouver le contenu du document : texte, images, etc.

Les balises <h1>-</h1> indiquent le titre d'une section de premier niveau. Des titres de niveaux inférieurs peuvent être définis, par exemple <h2>-</h2>, puis <h3>-</h3>, etc.

Les titres de sections sont des éléments importants d'un document HTML. Deux aspects sont à considérer :
- le rendu par le navigateur web, par exemple en gras, avec une taille de caractères plus importante, permet au lecteur humain d'identifier le titre ;
- les titres de section mettent en évidence la structure du document. Cette structure est indispensable. Elle permet par exemple d'indexer automatiquement les pages web, de créer automatiquement des sommaires, etc.

Les balises <p>-</p> délimitent les paragraphes du texte.

Les balises <li>-</li> délimitent chaque élément d'une liste qui peuvent être soit précédés d'une puce s'ils sont inclus dans les balises <ul>-</ul> (ul pour unordered list), soit précédés d'un numéro s'ils sont inclus dans les balises <ol>-</ol> (ol pour ordered list).

Les listes permettent d'alléger visuellement les pages web et de faciliter leur lecture.

Les balises <strong>-</strong> permet de mettre en valeur notre texte.
L'utilisation de ces balises a pour conséquence de produire un rendu en gras d'une partie du texte.

Il est également possible d'utiliser les balises <em>-</em> pour mettre en valeur le texte.
Le texte aura un rendu en italique.

Ces deux rendus permettent de mettre en évidence des parties du texte.
En fait, c’est le navigateur qui choisit comment afficher les mots. On lui dit que les mots sont assez importants et, pour faire ressortir cette information, il change l’apparence du texte

Deux autres balises vont nous être utiles. L'une pour insérer des liens hypertextes, l'autre pour insérer des images dans une page HTML.

Un lien hypertexte est une référence sur un document, une référence sur une page web ou un site web. En cliquant sur un lien hypertexte, on atteint la page ou le site référencé.

Un site web est généralement composé de plusieurs pages web. L'adresse d'un site web est l'adresse de sa page d'accueil.

La page web est identifiée par son adresse, on parle d'adresse web, ou d'URL (Uniform Resource Locator). C'est l'adresse qui apparaît dans la barre d'adresses de votre navigateur. Par exemple, l'adresse du site web Wikipédia est

http://wikipedia.fr/

l'adresse de la page de Wikipédia de l'article à propos de URL est :

http://fr.wikipedia.org/wiki/URL

Dans une page HTML, ces liens vont pouvoir être associés à un texte qui sera rendu d'une manière particulière (par exemple souligné en bleu) pour marquer qu'il s'agit d'un lien hypertexte.

En HTML, on utilise la balise <a>-</a> avec l'attribut href="adresse_web" ajouté à l'intérieur de la balise. Par exemple

<a href="http://wikipedia.fr" >Wikipedia</a>

va produire le texte "Wikipedia" à partir duquel on pourra atteindre le site http://wikipedia.fr. À partir de

<a href="http://fr.wikipedia.org/wiki/URL" >Qu'est-ce qu'une URL ?</a>

on atteindra la page web de Wikipédia consacrée au terme URL.

Consultez la page suivante. Elle contient deux liens hypertextes. Consultez le code HTML de la page pour vérifier que les textes associés aux liens hypertextes présentés sont cohérents.

Attention ! Consultez la page suivante. Que cache-t-elle ?

Des images peuvent être insérées dans des documents HTML : Connaissez-vous Wikimedia Commons, la médiathèque libre des projets Wikimedia ? Son logo est le suivant :

Wikimedia Commons est un dépôt de millions d'images que vous pouvez utiliser. Le logo de Wikimedia Commons est disponible à l'adresse

http://upload.wikimedia.org/wikipedia/commons/4/4a/Commons-logo.svg

On utilise la balise <img> pour insérer cette image dans un document HTML. L'adresse web de l'image est précisée à l'aide de l'attribut src="adresse_de_l_image" ajouté à l'intérieur de la balise :

<img src="http://upload.wikimedia.org/wikipedia/commons/4/4a/Commons-logo.svg" />

Nous remarquons que la balise img s'utilise seule, sans balise fermante correspondante. Dans ce cas particulier on remarque que la fin de balise se note />

D'autres utilisations de cette balise img sont illustrées sur la page dédiée, visualisez le code HTML pour vous en inspirer. Observez les changements de mise en page quand vous agrandissez ou diminuez la largeur de la fenêtre.

En utilisant le logiciel Notepad++ créer une page html (utiliser la page standard sauvegardée dans le répertoire ENT de votre classe) affichant les images suivantes :
<img src="http://maps.googleapis.com/maps/api/staticmap?center=50.609731,3.137511&zoom=17&size=400x400&sensor=false"> et <img src="http://maps.googleapis.com/maps/api/staticmap?center=50.609731,3.137511&zoom=18&maptype=satellite&size=400x400&sensor=false">
Renommer cette page "manip_6_1.html" et la Sauvegarder dans votre répertoire ENT personnel

Recherchez les coordonnées GPS de votre lycée et modifiez le code html précédent pour afficher une page contenant la carte de votre lycée.
Renommer cette page "manip_6_2.html" et la Sauvegarder dans votre répertoire ENT personnel