Développement Web

HTML / CSS

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– Avant d'écrire votre première page...

1) Visualiser le code HTML

Visualisez la page suivante : exemple.html

En effectuant un clic droit sur une page web, on accède à un menu avec la possibilité de visualiser le code source de la page.

Lorsque vous consultez un site web, les fichiers HTML sont envoyés à votre navigateur et le code html est interprété sur votre machine par votre navigateur.

2) Mais de quoi s'agit-il ?

Vous pouvez remarquer des mots clés encadrés par les caractères < et >, comme par exemple <body> <h1>. Il s'agit de balises (le fameux markup langage) qui permettent de donner au navigateur des indications sur la nature des données associées.

3) Les balises pour organiser son texte

Les balises vont par pair : une balise ouvrante et une balise fermante. Les balises fermantes s’écrivent avec un slash (/). Le texte écrit entre la balise ouvrante et la balise fermante est le contenu de la balise.

<h1> Ceci est une page Web très basique </h1>

4) Structure générale d'un document HTML

Tout document HTML doit se conformer à la structure suivante :

<!DOCTYPE html>
<html>
<head>
<title> Ceci est le titre de la page </title>
</head>

<body>

</body>

</html>

Passons en revue les différentes balises que nous venons de découvrir :

Le doctype : La toute première ligne s’appelle le doctype. Elle est indispensable car c’est elle qui indique au navigateur qu’il s’agit bien d’une page web HTML.
<html> </html> : C’est la balise principale. Elle englobe tout le code de la page.
<head> </head>: Entre ces balises se trouvent des informations supplémentaires qui n’apparaissent pas directement sur la page, comme par exemple les styles utilisés sur la page, le nom donné à la page ou l’encodage (pour la gestion des caractères spéciaux).
<body> </body> : Entre ces balises se trouvent la partie principale de la page. Tout ce que nous écrirons ici apparaîtra sur la page.
<title> </title> : Cette balise, inscrite dans la partie head, correspond en fait au texte qui sera affiché comme titre de l’onglet. Le contenu de cette balise ne correspond pas à un titre qui apparaît directement sur la page.

On dit souvent que la structure d'un document HTML est une structure hiérarchique ou arborescente, pouvez-vous justifiez de ces qualificatifs ?

Auteurs de ce document : Christelle BRIEC – Lycée Sainte-Thérèse Quimper

inspiré largement du site (http://fr.openclassrooms.com/)

Modifications et ajouts : Christophe Béasse – Lycée Saint-Jo Lamballe – Sept 2014/ sept 2015 / Août 2016