Informatique et sciences du numérique.

Le format HTML(Hypertext Markup Language) 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 éditeur de textes.

Un logiciel de traitement de texte n'est pas un éditeur de textes.

Nous utiliserons le logiciel Note pad++

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 utilserons Firefox.

Il existe aussi des éditeurs en ligne qui interpréte directement le code saisi par exemple: thimble

Lorsque l'on consulte une page web, on peut visualiser le code source de la 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 :

<!-- Ceci est mon premier fichier HTML -->
<!DOCTYPE html>
<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>Nous faisons cas du Beau, nous méprisons l'Utile ; Et le Beau souvent nous détruit.</p>

</body>
</html>

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.

Notre exemple débute par une ligne

<!DOCTYPE html>

qui indique que le fichier respecte la norme HTML basique, norme de 1991.
Nous préfèrerons utiliser une norme plus récente telle XHTML 1.0 et préciser dans notre document :

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

Norme / standard ...

Respect des normes.

le code HTML est notamment normalisé par le consortium W3C
Ce site permet de valider les pages html ou de donner différentes ressources...

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.
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.
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.

Éléments de texte

Les balises <p>-</p> délimitent les paragraphes du texte.
<ul></ul> :liste à puce
<ol></ol> : liste numérotée
<li></li> :élement d'une liste
Les balises <b>-</b> demandent au navigateur web de produire un rendu en gras d'une partie du texte. Il est également possible d'utiliser les balises <i>-</i> pour demander un rendu en italique ou d'utiliser les balises <u>-</u> pour souligner une partie d'un texte.

Ces deux rendus permettent de mettre en évidence des parties du texte.
<br>: retour chariot
<hr>: trait de séparation
:commentaire

Tableau

<table></table> : tableau
<tr></tr> :indique le début et la fin d'une ligne du tableau
<th></th> : cellule de légende de ligne ou de colonne
<td></td> : cellule du tableau (colonne)

Structure et habillage

<div></div> : définition de blocs, regroupement d'élements de type block
<span></span> : habillage d'éléments de manière inline

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.

Les liens hypertextes

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 peut être composé de plusieurs pages web.

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.

Les images

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.

Votre première page HTML

Créer dans le dossier ISN une page modèle html

Exercices

Exercice 1:

Créez une page html affichant les images suivantes :
<img src="http://maps.googleapis.com/maps/api/staticmap?center=48.858278,2.294242&zoom=17&size=400x400&sensor=false"> et <img src="http://maps.googleapis.com/maps/api/staticmap?center=48.858278,2.294242&zoom=18&maptype=satellite&size=400x400&sensor=false">
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.

Exercice 2:

Construire une page HTML utilisant chacune des notions vues ci-dessus sur la vie d'Alan TURING.

Si votre page manque de style, on pourra utiliser du CSS