HyperText Markup Language : les bases du langage

Le langage HTML est un langage de balisage, c'est à dire qu'il consiste en des éléments "entourant" par des balises d'ouverture et de fermeture, les différents contenus textuels de votre document. Il permet de sémantiser un document, c'est-à-dire de lui donner du sens pour un programme informatique tel qu'un navigateur. Le HTML n'est pas un langage de programmation, puisqu'il n'execute rien.

Il existe principalement deux types d'éléments : des éléments de type "bloc" et de type "en ligne". Leur incidence est très importante en terme de représentation visuelle, mais possède aussi une sémantique.

Les blocs sont généralement des parties logiques et structurelles de votre texte. Par exemple dans une dissertation, ils sont les titres, les paragraphes, les listes, etc. Les éléments de type en ligne seront plutôt les mots ou groupes de mots, les abréviations, les acronymes, au sein de vos paragraphes, titres, listes, etc.

Lors de la programmation de HTML, il faut penser à la sémantique que vous souhaiter donner à votre contenu, et jamais à l'apparence que celui-ci prendra dans la page du navigateur. Le langage CSS s'occupera exclusivement de cette partie là du travail, celui de la mise en page.

Les principaux éléments de types bloc

Les éléments p, h1, h2, h3, h4, h5, h6 sémantisent respectivement un paragraphe, un titre de niveau 1, un titre de niveau 2, ou sous titre, un titre de niveau 3 ou sous-sous titre, etc.

Voir plus loin pour les listes, les tableaux.

Les blancs

Sont considérés comme blancs les espaces, les sauts à la ligne et les tabulations. Dans l'écriture html, les blancs sont importants au sein des balises des éléments, c'est à dire entre les < et >. Il n'y aura aucun retour à la ligne ni aucune tabulation dans leur écriture, et les espaces devront séparer le nom de l'élément de l'attribut s'il y en a (regardez le méta utilisé dans le head ou voir plus loin dans le chapitre des attributs).

Entre les balises d'ouverture et de fermeture, les espaces en début et en fin de chaines de caractères ne sont pas considérés. Seuls les espaces entre les mots le sont, et les doublons seront considérés comme un seul espace.Les retours à la ligne et les tabulations ne sont pas du tout considérés dans l'interprétation du fichier HTML en page. Leur utilisation aura uniquement un objectif de clarté dans la lecture et l'écriture du code source.

Néammoins, le retour à la ligne sémantique, c'est à dire celui qui a une signification dans le texte et donc aussi une interprétation visuelle, devra être sémantisé par l'élément br.
Notez que comme dans l'élément méta, l'élément br ne possède pas de balise de fermeture.

Ce
paragraphe
a
pour
objectif
d'illustrer
l'utilisation des
blancs.
Pensez à regarder dans le code source.

Les commentaires HTML

Il est parfois utile de laisser au sein du code html des commentaires n'ayant rien à voir avec le contenu du document et seulement destinés au travail du web designer.
Un commentaire peut être par exemple utilisé pour spécifier un endroit du document incomplet, qu'il faudra compléter ou supprimer plus tard.
Les commentaires ne doivent ainsi pas être affichés dans la page et être tout simplement ignorés par le navigateur.
Pour cela placez votre commentaire entre les signes ...
(la fin de la phrase ne peut pas être affichée car elle est considérée comme étant un commentaire. Regardez dans le code source pour comprendre et voir les signes qui permettent de faire un commentaire).

Les principaux éléments en ligne

Ces éléments devront impérativement être imbriqués dans un élément de type bloc, par exemple, un p. Seuls dans le body, il provoqueraient une erreur.

L'élément em (emphasis) permet de sémantiser un mot ou un groupe de mots sur lequel une attention particulière est souhaitée; cela ne veut pas dire que ces mots auront forcément un design visuel différent (rappel). Cela veut dire qu'il auront une sémantique différente.
Par exemple, outre la différence visuelle, ces mots seront indexés par les moteurs de recherche d'une manière plus importante que les autres mots.

Exemple :
Lorsqu'un web designer s'exprime sur un forum, il est essentiel qu'il utilise la nomenclature officielle pour décrire son problème. Il devra parler d'éléments, de balises, d'attributs et faire la différence entre un fichier et une page.

L'élément strong (fort) permet de sémantiser un mot ou groupe de mots encore plus important(s).
Exemple :
Une des erreurs classiques d'un jeune web designer est d'écrire htlm au lieu de html.

L'élément dfn (définition) permet de sémantiser une définition courte dans une phrase.
Exemple :
N'oubliez pas de temps en temps de faire Save (enregistrer) dans TextWrangler.

L'élément code permet de sémantiser un mot ou groupes de mots ayant une signification se rapprochant de l'informatique, cela peut être du langage informatique, ou une description d'une action au sein d'un logiciel.
Exemple :
Les documents HTML doivent sur internet impérativement posséder l'extension .html.

Il existe ainsi les éléments var (variable), samp (sample), et kbd (keyboard), qui sémantisent respectivement : une donnée variable, un échantillon (de texte ou de nature) et une touche ou une action du clavier.
N'oublions pas que le HTML a été, à ses débuts, inventé pour la sémantisation de documents principalement scientifiques.

Plus proche de ce que nous sommes susceptibles d'utiliser, l'élément cite permet de sémantiser une référence externe : il peut s'agir d'un magazine, d'un article, d'un personnage, mais pas d'une citation comme on pourrait le traduire.
Exemple:
L'ouvrage HTML précis et concis de l'éditeur O'Reilly est d'une aide importante lors de la construction des premiers sites Web.

L'élément abbr (abréviation) sémantise une abréviation qui ne doit pas être confondue à un acronyme qui est sémantisé par l'élément acronym.
Rappel :une abréviation est la contraction d'un groupe de mots par l'utilisation de leur première(s) lettre(s) et se prononce en épelant chacune des lettres.
Exemple :
Le HTML est un langage très simple, il suffit de ne pas faire de fautes d'orthographe.
Au contraire, les acronymes se prononcent comme un mot.
Exemple :
L'Organisation du Traité de l'Atlantique Nord se dit OTAN.

L'élément q (quote) permet justement de faire une citation, c'est à dire de reprendre les mots d'une personne.
Exemple :
Le HTML, Yes, we can!

Lorsque la citation nécessite une structure de texte avec des paragraphes, comme il est question par exemple dans un poème, il est alors nécessaire d'utiliser l'élément blockquote qui est un élément de type bloc et qui pourra imbriquer d'autres éléments de type bloc tels que des paragraphes.
Exemple :

Les larmes sont à nous tous elles n'ont ni goût, ni saveur, ni couleur

elles sont versées
elles coulent
elles tarissent
elles sont éphémères
en laissant des traces dans mon coeur.

Enfin les éléments sup et sub permettent de sémantiser des exposants et des indices.
Exemple:
En biologie, nous apprenons des choses essentielles à notre vie de tous les jours telles que la composition chimique de l'eau : H₂O . Pourtant il existe des choses beaucoup plus importantes telles que E=mc².

Autres éléments en ligne

Certains contenus textuels possèdent un formatage, en particulier une disposition dans l'espace faite à l'aide de tabulations et d'espaces de ponctuation, qui peuvent avoir ou bien qui peut jouer sur la sémantique du texte. L'élément pre permet de sémantiser du contenu préformaté. Notez que pre est un élément de type bloc.
Voici un exemple de ce genre de texte :

__        _______ ____  ____  _____ ____   ____ ___ _   _ 
\ \      / / ____| __ )|  _ \| ____/ ___| / ___|_ _| \ | |
 \ \ /\ / /|  _| |  _ \| | | |  _| \___ \| |  _ | ||  \| |
  \ V  V / | |___| |_) | |_| | |___ ___) | |_| || || |\  |
   \_/\_/  |_____|____/|____/|_____|____/ \____|___|_| \_|

L'élément pre conserve les tabulations et espaces multiples qui permet aux tirets et aux slashs de donner au texte la sémantique webdesign.
A titre de comparaison, voici ce que donnerait le même texte dans un élément p:

__ _______ ____ ____ _____ ____ ____ ___ _ _ \ \ / / ____| __ )| _ \| ____/ ___| / ___|_ _| \ | | \ \ /\ / /| _| | _ \| | | | _| \___ \| | _ | || \| | \ V V / | |___| |_) | |_| | |___ ___) | |_| || || |\ | \_/\_/ |_____|____/|____/|_____|____/ \____|___|_| \_|

Le texte corrigé et les mises à jour

Sur un site d'information, les mises à jour régulières peuvent porter à confusion : en effet, le public peut ne pas voir ce qui a été changé d'une visite à une autre. Les éléments ins (insertion) et del (deletion) permettent de sémantiser le texte nouvellement ajouté et l'ancien texte respectivement. N'oublions pas que même si les navigateurs offrent une représentation visuelle à de tels éléments, ceux-ci on un rôle de sémantique avant tout.
Voici un exemple :

~~La dernière grande catastrophe nucléaire s'est déroulée à Tchernobyl.~~
La dernière grande catastrophe nucléaire s'est déroulée au Japon.

Les listes ou énumérations

Les listes désordonnées

Une énumération est dans son ensemble sémantisée par l'élément de type bloc ul (Unordered List).
Chaque item de la liste sera par ailleurs sémantisé par l'element de type bloc li (List Item).Un seul ul pourra contenir autant de li necessaire.
Exemple :

J'aime le rock
J'aime le cinéma
J'aime les garçons

Les listes ordonnées

De la même manière, les listes ordonnées seront sémantisées par l'élément ol (Ordered List).Les items seront toujours sémantisés par des liqui devront être écrits dans l'ordre.
Exemple :

Je me lève
Je déjeune
Je fais ma toilette
Je m'habille
Je pars

Les listes de définitions

Dans ce genre de listes, les items sont un couple fait d'un signifiant et d'un signifié. Pensez au dictionnaire, où vous avez pour chaque item de la liste que représente le dictionnaire un mot et sa signification.
L'élément dl (Definition list) sémantise l'ensemble de la liste (le dictionnaire). Chaque item sera un couple d'élément dt (Definition Term) suivi d'un dd (Definition Definition).
Exemple :

Rock'n Roll: Musique électrique et forte
Musique de Chambre: Musique acoustique et douce
Reggae: Musique rythmée et dansante
Musique infantile: Musique initiatique mais soporifique

Les attributs HTML

Les éléments HTML abordés jusqu'ici sont simples dans la mesure où ils ne nécessitent pas d'attribut comme le meta.
Dans la suite du cours nous devrons les utiliser.
Les attributs sont des informations supplémentaires attribuées à un élément en particulier et permettant de préciser la sémantique du dit élément. Les navigateurs pourront par exemple proposer une interprétation graphique différente.

Les attributs se placent dans la balise ouvrante de l'élément uniquement et se déclinent sous la forme d'un nom d'attribut immédiatement suivi d'un =, lui même immédiatement suivi d'une valeur entre guillemets. Le nom de l'élément doit être séparé du premier attribut par un espace ; de plus, si l'élément possède plusieurs attributs (il n'y a pas de limites dans le nombre d'attributs), chacun d'entre eux doit être séparé par un espace. Enfin, l'ordre n'est pas important ; la syntaxe est la suivante :
<élément attribut1="valeur" attribut2="valeur" attribut3="valeur" ...>
Exemple (voir le code source) :
HTML est une abréviation.
Dans cet exemple, l'attribut title permet d'associer un mot ou groupes de mots à l'element choisi. Généralement, il est utilisé pour les abréviations et les acronymes. Le navigateur Firefox propose d'afficher une petite étiquette avec le contenu du title quand on immobilise la souris sur l'abréviation. Ceci est une interprétation parmi d'autres.

Les entités HTML

Comme nous l'avons vu, les douments textuels et notamment les documents HTML doivent être écrits selon un encodage de caractères qui correspondra généralement au clavier et donc à la langue que l'on utilise. On peut cependant vouloir écrire dans un langue différente de celle à laquelle correspond notre clavier, et donc notre encodage de texte. C'est pour cela qu'il est necésssaire de préciser grâce au meta le langage dans lequel on souhaite que l'interprétation du document se fasse.
Par exemple il est possible avec un clavier français, et donc en encodant notre texte avec l'ensemble de caractères Western ISO-latin-1 par exemple, de composer un texte en danois et en précisant dans le meta du head un autre ensemble de caractères (iso-8859-15).
Ceci dit, il est possible de souhaiter utiliser quelques lignes de texte dans un langage étranger dans un document majoritairement français par exemple. Pour cela on gardera l'ensemble de caractères iso-8859-1 et nous utiliserons des entités HTML.

Les entités HTML sont des mots clés qui font référence à des caractères visuels spécifiques. Ils commencent tous par une esperluette et finissent tous par un point virgule. Par exemple les caractères suivant sont tous obtenus sur la page par des entités HTML (voir code source):

La liste des entités HTML est disponible dans la documentation officielle au chapitre 24. -->

Les tableaux

Il est possible de sémantiser des données tabulaires, c'est à dire du texte qui prend une sémantique que lorsqu'il est placé au sein d'un tableau, c'est-à-dire en lignes et en colonnes.
Encore une fois il n'est pas question ici de design mais bien de sémantique.

L'ensemble d'un tableau sera sémantisé par l'élément table. Le tableau se décrit ensuite du haut vers le bas et de la gauche vers la droite, donc de ligne en ligne (en commençant pr la première ligne) et de cellule en cellule (en commençant par celle de gauche).
L'élément tr (Table Row) permet de sémantiser une ligne. Tandis que l'élément td (Table Data) sémantise une cellule.

Compagnies	Enfant de moins de 2 ans	Adultes	Seniors (+ 60ans)
Air France	200€	320€	320€
Continental Air Lines	200€	300€	290€
British AirWays	0€	280€	208€
TWA	100€	280€	280€

Tarif Aller-Retour Paris-New York au 1^ermars 2011

Notez que le design visuel par défaut peut ne pas posséder de bords ; il est alors toléré d'utiliser sur la balise ouvrante table l'attribut border qui prendra comme valeur "1px", px pour pixel pour définir un bord de 1 pixel de large.

L'élément caption permet de proposer une légende au tableau. Cet élément devra impérativement se situer sous l'élément table avant le premier tr.
De plus, il est possible de faire la différence entre les données tabulaires et les légendes de ces données (en tête de tableau). Pour cela, il faut utiliser l'élément th (Table Head) en place des td de ces données. Voici le même tableau modifié en conséquence :
Tarif Aller-Retour Paris-New York au 1^ermars 2011
Compagnies Enfant de moins de 2 ans Adultes Seniors (+ 60ans)

Air France 200€ 320€ 320€

Continental Air Lines 200€ 300€ 290€

British AirWays 0€ 280€ 208€

TWA 100€ 280€ 280€

Tarif Aller-Retour Paris-New York au 1^ermars 2011
Compagnies	Enfant de moins de 2 ans	Adultes	Seniors (+ 60ans)
Air France	200€	320€	320€
Continental Air Lines	200€	300€	290€
British AirWays	0€	280€	208€
TWA	100€	280€	280€

Fusion des cellules

L'attribut colspan permet de fusionner la cellule auquel l'attribut a été attribué (td ou th) avec les cellules qui suivent dans l'ordre dans lequel le tableau est décrit (du haut vers le bas et de gauche vers la droite).
La valeur de colspan est un nombre entier qui équivaut au nombre de cellules fusionnées.
Note : une cellule fusionnée ne sera alors plus déclarée dans le code du tableau.

De la même manière, l'attribut rowspan permettra de fusionner la cellule à laquelle il a été attribué avec les cellules des lignes suivantes. Ici aussi, une cellule fusionnée ne sera pas décrite sur les lignes suivantes.

Ci-dessous le tableau précédent modifié avec des cellules fusionnées :

Tarif Aller-Retour Paris-New York au 1^ermars 2011
Compagnies	Enfant de moins de 2 ans	Adultes	Seniors (+ 60ans)
Air France	200€	320€
Continental Air Lines	200€	300€	290€
British AirWays	0€	280€	208€
TWA	100€	280€	280€

Tarif Aller-Retour Paris-New York au 1^ermars 2011
Compagnies	Enfant de moins de 2 ans	Adultes	Seniors (+ 60ans)
Air France	200€	320€
Continental Air Lines	200€	300€	290€
British AirWays	0€	280€
TWA	100€	280€

Les liens hypertexte

Le langage HTML a conservé du SGML la caractéristique du hypertexte.Ce mécanisme permet de lier entre eux 2 documents par le biais d'ancre(s) généralement attribuées à un texte. Plusieurs variations du mécanisme permettront de lier deux endroits du même document, une ancre d'un document vers un autre document entier, ou enfin, une ancre d'un document vers une autre ancre dans un autre document.
Plus familièrement, on parle de lien sur lequel on clique. Cette représentation visuelle est plus justement décrite de manière sémantique par une ancre que l'on active.

L'élément a (anchor) permet de sémantiser une ancre. Selon les attributs de cette ancre, celle-ci sera une ancre source, c'est à dire une que l'on active ou une ancre de destination.

l'attribut href(Hypertext Reference): Cet attribut désigne une ancre source. La valeur de href contient l'URL, c'est à dire plus simplement l'adresse du document que vous voulez liez à l'ancre.
Exemple :
Voici un lien vers la documentation concernant les liens HTML . (voir code source)
L'attribut name: Cet attribut désigne une ancre de destination. La valeur de name est un nom choisi arbitrairement qui identifiera l'ancre de destination de manière à être ciblé précisement par l'ancre source.
Ce nom peut être n'importe quoi à partir du moment où il ne possède aucun caractères spéciaux, aucun blanc et ne commence pas par un numéro.
Exemple :
cette phrase est une ancre de destination. (voir code source)
Pour comprendre l'intérêt d'une telle ancre (qui est d'ailleurs optionnelle), il faut créer une ancre source depuis un autre document et pointant vers cette ancre. pour cela, l'URL doit en plus de la requête vers le document cible, préciser l'ancre de destination. Cela est possible en ajoutant de suite apres le nom du fichier requis, le nom de l'ancre précédée par un signe dièse.
Voici un exemple d'URL ciblant une ancre de destination : http://exemple.com/fichier.html#ancre
L'exemple ci-dessous est une ancre source pointant vers le chapitre des liens hypertexte de la documentation de Laure :
la documentation de Laure

Les liens absolus et relatifs

Les liens absolus indiquent un protocole, une adresse de serveur et un chemin d'accès à un fichier. Les liens relatifs indiquent seulement le chemin d'accès. Dans ce cas là, le navigateur qui doit faire la requète utilisera le même protocole, la même adresse de serveur du fichier contenant le lien et combinera le lien relatif au chemin d'accès du fichier courant.
En d'autres termes, lorsqu'un lien relatif se trouve dans un fichier A, le chemin d'accès du fichier B sera la combinaison de l'URL du fichier A + le chemin d'accès du fichier B indiqué dans le lien. On dit que le lien du fichier B est alors relatif à l'endroit où se trouve le fichier A. Si le fichier B est dans un sous dossier du même niveau que le fichier A, il faudra indiquer son chemin d'accès de dossier en dossier depuis le niveau où se trouve le fichier A.
Par exemple, considérons l'arborescence suivante d'un site disponible à l'adresse exemple.com :

/
   		index.html
  		galerie/
   				index.html
   				photos/
   					photo1.jpeg
  		contact.html

Par exemple, pour créer un lien depuis l'index du premier niveau, vers le fichier contact/html, il n'est pas necéssaire de changer de niveau, c'est à dire d'entrer dans un dossier ou d'en sortir, car le fichier source et le fichier de destination sont dans le même niveau, donc le lien relatif est seulement contact.html. Le même protocole utilisé plus tôt pour accèder à l'index.html ainsi que l'adresse du serveur et le chemin d'accès du dossier dans lequel il se trouve seront utilisés en combinaison du lien relatif pour établir la requète suivante : http://exemple.com/contact.html

Pour créer un lien relatif depuis le même fichierindex.html vers le fichier photo1.jpeg, il est necessaire d'entrer dans le dossiergalerie, puis dans le dossier photos depuis le dossier dans lequel se trouve le lien, cad le dossier racine du site, le lien relatif est alors : galerie/photos/photo1.jpeg

Enfin pour créer un lien relatif depuis le fichier index.html du dossier galerie vers le fichier contact.html du niveau précédent, il est necessaire de sortir du dossier courant, c'est à dire du dossier dans lequel le fichier se trouve. Pour sortir du dossier courant, il suffit d'utiliser le code : ../ . Donc le lien relatif est : ../contact.html.
Note : s'l faut reculer de plusieurs niveaux, il est possible d'accumuler ce code autant de fois que nécessaire. Par exemple : ../../../fichier.html permet d'acceder à un fichier hypothétique s'appellant fichier.html et se trouvant à 3 niveaux inférieurs.

A quoi ça sert??!!!
Imaginez, que vous avez construit un site de plus de 100 pages, avec une arborescence de plus de 6 ou 7 niveaux différents, avec bien entendu son lot de liens (absolus) sur chaque document pointant sur tous les autres. Le site est accessible sous le nom dupont.com. Soudainement, votre client M.Dupont décide de changer son nom de domaine pour dupont.fr.Dans ce cas de figure, il faudra reprendre et modifier chaque lien de chaque page avec les éventualités des problèmes que ce travail peut comporter.
L'utilisation de liens relatifs vous aurait permis de ne pas avoir à changer quoique ce soit.

Pour résumer, les liens relatifs doivent être utilisés lorsque la ressource se trouve sur le même site. Les liens absolus seront utilisés pour les ressources externes.
Cette logique sera la même pour tout type de lien, c'est à dire les liens hypertextes ou les liens vers du contenu multimedia.

Le contenu multimedia

Le langage html a été initialement prévu pour sémantiser de documents majoritairement textuels. Certes, l'ajout d'images fixes est prise en compte, mais à l'heure où sont écrites ces lignes, la version officielle du html (4.01) ne spécifie pas de normes d'interprétation pour tout autre contenu multimédia. En d'autres termes, les navigateurs seront libres d'interpréter ce genre de contenu de la manière dont ils le souhaitent sans qu'ils soient tenus à des normes internationales. En pratique, il est donc possible de garantir l'affichage (par exemple) de texte et d'images fixes dans un site. Les vidéos, le son et l'animation dépendront de la configuration de la machine cliente.
Un exemple parlant est celui de l'animation de la video. Les navigateurs n'ont pas été développés pour lire ce genre de contenu, ils vont donc dans la mesure où la machine cliente est configurée avec des plugins déléguer ce travail de lecture à des plugins. Aujourd'hui, le plugin propiétaire Flash du constructeur Adobe est le seul permettant de lire de la vidéo et de l'animation vectorielle. En plus des implications éthiques que cela signifie, (contrôle de l'audiovisuel), ce plugin nécessite énormement de ressources de la part du processeur de l'ordinateur qui l'utilise. Il est pratiquement inutilisable sur des ordinateurs de plus de 5 ans, et nécessite des mises à jour régulières. Cela ne veut pas dire que le html ne permet pas l'insertion de ce genre de contenu au sein de ces pages mais celle-ci ne sera simplement pas garantie. La prochaine version du html (5) permettra l'insertion de video et imposera aux navigateurs de les interpréter selon des normes précises considérant les capacités informatiques des ordinateurs dans le monde, et les différents accès en termes de rapidité au réseau. Malgré le fait que beaucoup de webdesigners utilisent aujourd'hui le HTML5 pour pallier au problème du flash et que parallèlement nombres de navigateurs (excepté Internet Explorer) acceptent aujourd'hui l'interprétation du HTML5, ce dernier n'est pas encore officiel. Sachez que Dailymation a décidé de ne plus utiliser le plugin flash pour ses vidéos. YouTube quand à lui utilise une version flash et une version html 5.

Les images fixes

Les images fixes (comme tout contenu multimedia) ne font pas partie intégrantes du fichier HTML. Elles sont en fait référencées dans le code HTML grâce à un lien, et c'est le navigateur qui devra faire la requète vers l'image pour l'insérer visuellement dans la page.
Avant d'aborder l'élément permettant de faire référence à des images, faisons un petit rappel concernant la nature des images numériques et leur caractéristiques.

Les deux types d'images numériques

Une image est considérée comme numérique lorsqu'elle est présentée visuellement sur un support informatique. Il existe maintenant deux types d'images numériques, les images matricielles (faites de pixels) et les images vectorielles (c'est à dire faites de courbes et de segments calculés sur des axes géométriques x, y en 2D et x, y et z en 3D). Les premières offrent un rendu réaliste et proviennent généralement de source externe photographie ou scan), les secondes sont directement créees depuis un logiciel de dessin (Illustrator, Blender etc.).
Bien qu'il soit possible d'insérer des images vectorielles (au format SVG) au sein du code HTML, cette technique est très peu utilisée au profit des images matricielles qui sont elles réferencées.

Les caractéristiques des images matricielles pour le Web

Le webdesigner devra veiller à deux caractéristiques esssentielles, les dimensions de l'image et le format.

Les dimensions

Celles-ci s'expriment en pixels. La résolution est donc insignifiante puisqu'elle permet de convertir les pixels en mm imprimables. Le webdesigner est alors amené à considerer des pimensions faites de pixels et a besoin de références.
Dans les normes du W3C il existe un écran standard, c'est à dire un écran considéré comme étant disponible globalement malgré la situation économique d'un pays. Cet écran est donc limité par le nombre des couleurs (on le verra quand on abordera le désign CSS) et par le nombre de pixels qu'il est capable d'afficher. Il servira de référence comme taille maximale à ne pas dépasser autant que l'on design un site Web que l'on propose des images.
Cela ne revient pas à dire qu'il n'est pas possible d'utiliser des images ou de faire des sites plus grands que la capacité d'affichage de cet écran, seulement que dans de tels cas, le visionnage ne pourra pas être optimisé ou garanti sur tous les écrans. Par exemple, des barres de défilement horizontale et/ou verticale apparaitront pour afficher de tels contenus. Remarquons cependant que le web nous a habitués à faire défiler un contenu verticalement. La dimension maximale des images et du design de site concerne alors uniquement la hauteur. L'écran standard propose 800 pixels de large et 600 de haut. Sachant que sa largeur peut être partagée par les bords de la fenêtre du navigateur par la barre de défilement du navigateur si la hauteur excède 600 pixels et par l'espace libre que l'utilisateur pourrait avoir laissé, il faut compter un maximun de 750 pixels.

A partir de là, une image qui prend tout l'écran fera 750 p de large, une image qui représente la moitié d'un écran environ 375p, et le quart, 180p.

Les formats

De manière générale, un navigateur va être autorisé à interpréter certains formats de contenus différents. C'est à dire qu'il va présenter dans sa fenetre le dit document. L'exemple le plus simple, c'est le format HTML. Il ne pourra par exemple pas interpréter un document Word ou OpenOffice. Cela ne veut pas dire qu'il n'est pas possible de proposer sur son site un document Word ou OpenOffice, seulement que le navigateur ne pourra pas les interpréter et proposera alors de l'enregistrer sur l'ordinateur du client.
Pour les images, le mécanisme sera identique selon le format. Seuls les formats suivants sont normalisés pour être interprétés dans la fenetre du navigateur.

Un format de fichier désigne la façon dont ses données sont structurées et empaquetées au sein du fichier numérique sous ce format. Chaque format pourra être optimisé pour la lecture rapide par les logiciels, pour sa capacité d'ouverture/fermeture rapide, pour son organisation qui pourra offrir plus de choix à l'enregistrement, etc.

Un format ne doit cependant pas être confondu avec un CODEC (COmpression/DEcompression). Un Codec est un algorithme (fonction) qui permet de décompresser des données pour qu'elles occupent moins d'espace disque. Elles pourront ainsi parcourir plus vite la distance qui séparent deux ordinateurs sur un réseau. Certains CODECs proposent seulement un algorithme de COmpression, c'est le cas du JPEG alors que certains pourront offrir un algorithme de COmpression et de DEcompression, c'est le cas du ZIP.
Attention, un format peut utiliser un CODECet JPEG est à la fois un format et un CODEC. En d'autres termes, enregistrer sous le format JPEG peut si vous décidez de compresser votre image, utiliser le CODEC JPEG. De la même manière, le format TIFF pourra optionnellement utiliser le CODEC JPEG.

Le format Portable Network Graphic, PNG: Ce format a été mis au point par le W3C pour le Web. C'est donc le format par excellence pour le désign des sites Internet. Ce format incorpore par défaut un CODEC, c'est à dire que les images sont obligatoirement compressées. Plusieurs niveaux de compression sont disponibles à l'enregistrement. De plus ce format conserve la transparence et permet une limitation du nombre de couleurs.
Le format Joint Photographs Expert Group, JPEG ou JPG: Ce format est très connu sur le Web car il possède un très bon ratio de compression qui permet pour une taille minimale de fichier d'obtenir une qualité d'image remarquable. Par contre, il ne conserve pas la transparence.
Le format Graphic Interchange Format GIF: Ce format est obsolète. Il permettait, en l'absence du PNG d'enregistrer une image en un nombre limité de couleurs (256 couleurs) et à conserver la transparence. De part son développement propriétaire, ce format est déconseillé pour le Web. On lui préfèrera le PNG.

Le GIF et le PNG sont par ailleurs capables d'enregistrer plusieurs images dans le même format et indiquer une séquence de lecture avec un rythme choisi. C'est le principe de images animées sans tomber dans la complexité des vidéos. On parle alors d'Animated PNG ou GIF, c'est à dire APNG ou AGIF.

L'élément img (image)

Il permet de sémantiser une image fixe (ou animée avec APNG ou AGIF ). Cet élément ne possède pas de balise fermante. Cependant deux attributs seront essentiels :

L'attribut src (Source): La valeur de cet attribut est tout simplement l'emplacement ou l'adresse du fichier ou de l'image.Il peut s'agir d'un lien relatif ou absolu.
L'attribut alt (Alternative): La valeur de cet attribut est un texte court destiné soit à remplacer l'image pour le cas où son lien est cassé ou pour les navigateurs qui ne proposent pas de représentation visuelle.

Notez que vos images qui doivent se trouver sur le Web et généralement dans votre site pourront dans un souci d'organisation être placées dans un dossier dédié au contenu multimedia. Voici un exemple d'une image insérée dans la page grâce à l'élément img : photo représentant le mois d'avril

Notez enfin que l'élément img est de type en ligne, c'est pour cela que nous l'avons mis dans un élément de type bloc précédemment.

Les autres contenus multimedias

Tout autre contenu multimedia sera inséré grace à l'élément obj. Cet élément prend deux attributs essentiels. Cependant le texte alternatif au cas où le contenu ne pourrait être interprété par le navigateur, se placera entre la balise ouvrante et la balise fermante de l'élément.

L'attribut data: C'est l'équivalent du src de votre img, c'est à dire que sa valeur est l'adresse du fichier à insérer (lien relatif ou absolu).
L'attribut type: Celui-ci permet d'indiquer au navigateur le type-mimedu fichier à insérer. Ce type-mime est une sorte de catégorie faite de deux mots clés. Le premier mot caractérise le fichier dans des ensembles tels que image, audio, video, application etc. Le second, séparé par un slash, est plus précis quand au format du fichier. Pour trouver le type mime de notre fichier, cherchons-le sur le site officiel determinant les types mime.

Voici un exemple de fichier audio, inséré dans cette page :

Les éléments non-sémantiques

A certaines occasions, il est possible d'avoir besoin d'un élément qui n'a pas forcément de sémantique précise. L'exemple le plus courant est celui de l'insertion d'image ou de contenu multimedia. Les éléments img et object qui sont des éléments en ligne doivent nécessairement se trouver dans un élément de type bloc. Or, ce type de contenu n'est pas constamment rattaché à un paragraphe, un titre ou une liste et nécessite alors un élément de type bloc ne possédant pas une sémantique particulière.
L'autre exemple est celui que beaucoup de designers CSS (Cascading Style Sheet) connaissent, puisque pour des besoins de design, il est parfois nécessaire de cibler une partie du contenu qui n'a pas de sémantique.
Par exemple, admettons que dans un document, le designer souhaite faire ressortir tous les mots contenant exactement 5 lettres, il faudra alors que ces mots soient balisés par un élément HTML de type en ligne qui n'a bien sûr pas de sémantique particulière.
Une autre méthode courante en CSS consistera à délimiter des parties logiques du contenu pour créer la structure visuelle de la page résultante du document. Il faudra ici que ces parties soient balisées par des éléments de type bloc encore une fois sans sémantique particulière puisqu'ils ont un objectif purement visuel. (Attention : il ne faudra pas en abuser).

Ainsi l'element div (Division) permet de baliser un ensemble ou un contenu. Cet élément est de type bloc.

De la même manière, mais de type en ligne, l'élément span sera utilisé pour des mots ou des groupes de mots par exemple.

Exemple : dans cette phrase, nous avons balisé les mots de 4 lettres avec l'élément span pour pouvoir les faire ressortir visuellement grâce à du CSS.

Autres éléments non sémantiques : les éléments link, script et noscript

L'élément link

Cet élément permet de lier votre document HTML à des fichiers externes qui pourront aider le navigateur dans l'interprétation du document. L'exemple le plus courant est celui d'une feuille de style. C'est un fichier qui décrira l'aspect visuel de votre document. (cf voir l'ajout de style CSS). Cet élément se met toujours dans le head de votre document HTML.

L'élément script

Le langage HTML est un langage de balisage. Il ne permet pas d'exécuter des tâches, en fonction par exemple des actions de l'utilisateur. Ce genre d'interactivité bien que non nécessaire, peut cependant se révèler très utile.
Par exemple, lorsque vous envoyez un formulaire, un script va contrôller que vous avez bien rempli tous les champs avant de procéder à leur analyse. Ce script est essentiel et pour des raisons de sécurité, s'exécute toujours sur le serveur. Cela veut dire que votre formulaire rempli sera envoyé au serveur, même s'il contient des champs vides. Si le script ne l'accepte pas, il vous le renvoie avec un message d'erreur. Cela peut surcharger le serveur et l'utilisation supplémentaire (et non en substitution car le script du serveur est essentiel), d'un script attaché au document HTML peut s'avérer très utile. Cela signifie que lorsque le visiteur reçoit le document HTML, il reçoit aussi un script qui se chargera de vérifier les champs du formulaire avant d'envoyer ce dernier. Ce script est écrit en langage Javascript, celui du serveur en langage PHP.

L'élément script présent dans le head de votre document permet comme l'élément link de lier votre document HTML à un fichier externe, dans ce cas, un fichier contenant du langage Javascript. Par contre, l'élément script pourra aussi être utilisé au sein du body, il contiendra alors directement du code javascript.
L'élément script nécessite l'attribut type qui comme pour l'élément object indique le type mime du script lui-même.
Ce document contient du javascript en exemple, cliquez sur un de vos tableaux plus haut, pour voir ce qui se passe.

L'élément noscript permet de spécifier un message alternatif qui sera affiché si javascript n'est pas installé ou éteint sur le navigateur de l'utilisateur. Notez par ailleurs que le contenu de l'élément script n'est jamais interprété (affiché) par le navigateur. Il peut donc se trouver n'importe où dans le body. Par contre, la position du contenu alternatif respectera l'ordre des éléments HTML au sein desquels elle se trouve.

And Voodoo Muzak is playing for you...