Quelques Bases

QUELQUES BASES

Avant de s'attaquer au code HTML et CSS , il est bon de rappeler quelques notions de base.

HTML (Hypertext Markup Language)

HT comme HyperText.
Le HTML permet de créer des liens Hypertextes. Ces liens qui relient les pages Web entre elles et créent la fameuse "Toile".
M comme Markup.
Le HTML permet de marquer les éléments avec des étiquettes les "balises" ("tags"; en anglais). Ces balises indiquent au navigateur le sens de l'élément encadré <h1> pour un titre ou <p> pour un paragraphe, par exemple.
L comme Language.
Le HTML est un language, il comporte donc un vocabulaire et obéit à des règles de syntaxe.

Hypertext Markup Language, abrégé en HTML peut être traduit littéralement en français par Langage de Balisage d'Hypertexte. C'est le format de données conçu pour représenter les pages web.

HTML et CSS, répartition des rôles

HTML n'est pas un langage de programmation mais un langage de description de document. Il structure la page et donne à son contenu un sens interpretable par les navigateurs.

C'est aux CSS qu'échoit le rôle de mise en forme de la page.

Les page Web sont constituées d'éléments empilés les uns sur les autres ou les uns à côté des autres dans la fenêtre du navigateur.

Le HTML crée ces éléments, leur ajoute un contenu et définit leur répartition dans la page.
Les CSS permettent de contrôler l'apparence de ces éléments, (couleur, police, arrière-plan, dimensions, etc...)

La séparation du contenu et de l'apparence est primordiale lors de la création d'une page Web .

Les CSS (Cascading Style Sheet)

Le terme Cascading Style Sheet peut se traduire en français par Feuilles de Style en Cascade. La « Cascade » est la combinaison de différentes sources de styles appliqués à un même document, selon leur degré respectif de priorité. Différents modes de Cascades peuvent se combiner :

Par origine des styles : la priorité est accordée aux styles de l'utilisateur par rapport à celui de l'auteur.
Par média: une feuille de style générique peut s'appliquer à plusieurs media de restitution (affichage à l'écran, impression, projection) et être combinée avec des feuilles propres à chaque media.
Selon l'architecture des documents web : une feuille de style générique peut s'appliquer à la totalité des pages d'un site web, être combinée à des feuilles propres à chaque rubrique de celui-ci, ainsi qu'à des styles propres à telle ou telle page spécifique.
Selon l'architecture des feuilles elles-mêmes : une feuille de style externe au document peut être combinée à une feuille de style interne et à des styles appliqués directement à chaque élément qui le compose (styles « en ligne »). Une feuille de style peut également importer une ou plusieurs autres feuilles externes.

Un principe de fonctionnement à ne pas oublier : c'est le dernier qui a parlé qui a raison. Ce qui signifie que par rapport à un élément donné, c'est l'instruction CSS la plus en aval dans le code, qui s'applique.

Une page web n'est pas immuable

Enfin il faut être conscient qu'à la différence de l'auteur d'une oeuvre sur feuille de papier, l'auteur d'une page web n'a pas le contrôle de l'apparence finale. Comme le compositeur de musique, le développeur web est soumis au bon vouloir d'un interprète.

Il ne faut surtout pas croire que ce que l'on voit sur notre écran s'affichera de la même manière sur l'écran de la personne qui consulte le site.

Chaque navigateur reçoit le code source de la page web et l'interprète à sa manière.
Chaque ordinateur l'affiche différemment : taille de l'écran, rendu des couleurs.
L'utilisateur peut choisir d'ignorer les informations relatives aux polices, aux couleurs ou aux images des pages web
L'utilisateur peut choisir d'intégrer sa feuille de style personnelle.
Un document HTML peut être affiché :
- sur un moniteur d'ordinateur en mode graphique,
- sur un terminal en mode texte,
- sur une imprimante,
- sur un terminal de synthèse vocale.

L'ossature d'une page Web

Le code source d'une page Web peut être divisé en quatre parties :

<DOCTYPE> au tout début, à la première ligne.
<html>, l'élément racine qui contient head et body.
<head>, l'élément d'introduction qui contient en particulier le titre (<title>), les balises <meta>.
<body> c'est le corps de la page, la seule de ces quatre parties dont le contenu est affiché dans la fenêtre du navigateur.

La définition du type de document : le DOCTYPE

<DOCTYPE> est la définition du type de document qui communique au navigateur trois informations :

Le nom de l'élément racine pour le document qui suit (<html>);
la version html utilisée, par exemple pour cette page : DTD XHTML 1.0 Transitional;
la localisation du livre de grammaire utilisé, par exemple pour cette page : html xmlns="http://www.w3.org/1999/xhtml"

La déclaration du document indique la DTD (Document Type Definition) utilisée, c'est-à-dire la référence des caractéristiques du langage utilisé.

Si vous voulez en savoir plus sur les DOCTYPE, visitez donc la page d' Alsacréations consacrée à ce thème. Attention c'est un peu long!

Alsacréations conseille aux lecteurs pressés d'utiliser de préférence XHTML1.0 Strict : c'est a priori la plus adaptée à vos besoins et c'est la plus facile à utiliser et à apprendre.

L'élément racine : html

<html> constitue l'élément racine dont découlent tous les éléments d'une page web. <html> crée une boite invisible contenant <head> et <body> ainsi que tous les autres éléments.

L'introduction : head

L'élément <head> qui n'est pas affiché dans la fenêtre du navigateur, contient des informations propres au document qui sont exploitées par les navigateurs et les moteurs de recherche. Les éléments <meta> et <title> sont les éléments les plus importants de cette introduction.

TITLE

<title> est un élément html sous-estimé, il contient le titre de la page qui apparaît à trois endroits :

Dans la barre de titre du navigateur et les listes déroulantes des boutons Suivant et Précédent.
Comme proposition de nom pour les favoris (ou marque-pages)
Dans les listes de résultats des moteurs de recherche en tant que liens mis visuellement en relief. L'existence de <title> est donc essentielle pour le réfèrencement de la page par les navigateurs.

Dans la partie <head> on peut placer également :

La feuille de style interne à la page :<style type="text/css"> </style>
Le lien vers une feuille de style externe :<link href="Essai290408.css" rel="stylesheet" type="text/css" />
Le lien vers une icône : <LINK REL="shortcut icon" type="image/x-icon" href="JLB.ico"/>
Des applications javascript : <script type="text/JavaScript"> <script>

Le corps de la page : body

Tout ce qui est placé entre <body> et </body> est affiché dans le navigateur et c'est l'objet principal de cet atelier.

Pour récapituler, un petit dessin étant plus explicite qu'un long discours, donner un coup d'oeil au schéma de l'ossature d'une page web

HTML : La Syntaxe

Les Éléments

La version 4 de HTML décrit 91 éléments. Les familles d'éléments que l'on rencontre le plus fréquemment sont :

Les Eléments de regroupement: Ne conférant pas de signification au contenu qu’ils balisent, ces éléments génériques tels que<div> ou <p> permettent d’appliquer à ce contenu des styles de présentation.
Les Titres: Les navigateurs savent interprèter la hiérarchie des titres de <h1> à <h6>.
Les Images: L'élément <img/> est un élément important pour la mise en forme des pages.
Les Listes: HTML différencie les listes non ordonnées <ul> , les listes ordonnées <ol> et les listes de définition <dl>.
Les Tables: L'élément <table> qui a été souvent detourné de ses fonctionnalités initiales pour ses capacités de mise en page, doit être réservée à la présentation de données tabulaires.
Les Hyperliens: La fonctionnalité de l'élément <a> est la fonctionnalité première de HTML.
Les Formulaires: L'élément <form> permet la saisie interactive de données.
Les Scripts: L'élément <script>Permet d’associer des morceaux de programmes, généralement JavaScript ou VBScript, au document.

Les Balises

Dans le code source HTML, les éléments composant les pages, sont délimités par des balises traduction de l'anglais tags. Par exemple la très fréquente balise <p> pour paragraphe. La balise est composée du nom de l'élément encadré par les signes < et >.

Presque tous les éléments HTML commencent et se terminent par une balise et à la différence des portes dans le theâtre de vaudeville, toute balise ouverte doit être fermée. à défaut le contenu à l'aval sera perturbé. La balise de fermeture se distingue de la balise d'ouverture par une barre oblique. Consultez la liste des balises HTML.

<p> Ce texte est un paragraphe </p>

L'élément HTML se compose donc de 3 parties :

La balise d'ouverture entre les signes < et > : <p>
Le contenu : Ce texte est un paragraphe
La balise de fermeture entre les signes < et > : </p>

J'ai écrit un peu plus haut "Presque tous les éléments". En effet il existe l'exception des éléments dit auto-fermants tel <br/> qui introduit un saut de ligne ou <img/> qui permet d'inclure une image ou encore <input/> qui, dans un formulaire, permet de saisir des données extérieures.
Ces éléments n'ont pas de balise de fermeture et leur balise d'ouverture est terminée par un / avant le >.

Les Attributs

Dans la version 4 de HTML, il existe 188 attributs qui permettent de préciser les propriétés des éléments HTML.
Mais attention, une bonne partie de ces attributs (width, height, color, background, etc,...) offrent des fonctionnalités obsolètes de mise en forme des éléments html.

En vertu du principe de séparation du contenu et de l'apparence, évoqué en première page, il est désormais totalement déconseillé de les utiliser, le contrôle de la mise en forme des éléments devant être assuré par les CSS.

Il convient donc de n'utiliser que les attributs dont les propriétés sont irremplaçables, par exemple :

Les sélecteur id (sélecteur unique) ou class (sélecteur répétable) qui permettent de lier des éléments à certaines propriétés d'une feuille de style CSS.
L’attribut style qui permet d'introduire dans un élément des propriétés de mise en forme (Style en ligne).
l’attribut title qui apporte une information sur le contenu d'un élément.
L'attribut alt permet d’indiquer un contenu textuel destiné à remplacer la ressource graphique d'une image quand celle-ci ne peut être restituée.
Les gestionnaires d’évènements onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, qui capturent les évènements générés dans l’élément pour appeler un script.
Les attributs d’internationalisation dir et lang spécifient la direction d’écriture et la langue du contenu;

Par ailleurs, quelques éléments ont des attributs obligatoires, ainsi :

L’élément <img/> est obligatoirement doté d’un attribut src spécifiant l’URL de la ressource graphique qu’il représente.
L’élément <a> est doté d’un attribut href spécifiant l’adresse de la ressource html vers laquelle le lien conduit.
Dans l’élément <form>, l’attribut action indique la cible serveur qui traitera les données après soumission.

Les règles d'écriture

L'écriture des attributs, de leur propriétés et de leurs valeurs doit se conformer à des règles strictes en particulier en ce qui concerne le respect de la ponctuation qui est essentiel pour le fonctionnement des propriétés :

Les Propriétés doivent être ouvertes par un signe égal et encadrées entre des guillemets.
Le couple Propriété-Valeur doit ëtre séparé par deux points.
Les séparations entre les couples Propriété-Valeur sont assurées par des points-virgules.
Le point-virgule final n'est pas obligatoire mais recommandé.
Les espaces entre les signes de ponctuation sont sans incidence sur le fonctionnement.
L'ordre d'écriture des couples Propriété-Valeur est indifférent.

Le schéma est le suivant :

<balise attribut =" propriété : valeur ; " " attribut =" propriété : valeur ; " > CONTENU <balise>

Vous trouverez ci-dessous quelques exemples :

<div id=" EnTete " style =" margin : 10px; width :800px ;" >TAGADA POUET </div>

<span style =" color : #FF00FF ; font-size : 18px ; font-weight : bold " > SOURCE </span>

<a href =" Ossature.html " target =" self " title =" L'ossature HTML " > L'OSSATURE </a>

Les commentaires

Il est possible d'ajouter des éléments d'information dans une page web sans que ceux-ci soient affichés à l'écran grâce à un jeu de balises spécifiques, appelé balises de commentaires, ouvert par l'ensemble suivant : . Voici un exemple de commentaire :

<!-- Voici un commentaire -->

Les balises de commentaires permettent de mettre en commentaire du texte, mais peuvent également servir à commenter du code HTML ou à désactiver momentanément des lignes de code pendant le travail sur un document.

Pour mettre en pratique ce tuto, consultez le TP Semaine 38 .