Lilapuce
 

exercices (lundi 12 novembre 2007)

Html - Css [2]

Organisation générale et balises html

J’ai présenté, à l’étape précédente, un aperçu général de l’exercice que nous avons fait lors de notre atelier.

J’avais indiqué qu’il fallait ouvrir au moins trois programmes distincts :
- un navigateur pour visualiser les pages ; en réalité vous allez voir qu’il en faut au moins deux : Firefox, Internet Explorer.
- un éditeur texte ; en l’occurrence le logiciel libre Notepad++, pour le fichier Html (index.html).
- un éditeur CSS - j’ai choisi le freeware TopStyle lite – pour les styles (styles.css).

J’ai branché ma clé USB sur l’ordinateur, car je souhaite enregistrer mes fichiers sur ce support.
Revenons en détail sur la création du fichier HTML. Pour cela j’affiche donc NotePad++.

Je clique sur « Fichier / Enregistrer sous… »

JPEG - 27.6 ko

Important : je démarre de zéro. Par conséquent, je dois indiquer à ce moment-là, l’emplacement sur lequel je vais enregistrer mon projet.

Encore plus important : il faudra que je me souvienne de cet emplacement et, si possible, éviter de travailler avec plusieurs versions du même projet sur le même ordinateur. Si je veux faire des sauvegardes (ce qui est une sage précaution) ; j’enregistrerai ou je graverai ces sauvegardes sur des supports distincts (CD, disque dur externe, etc.).

En règle générale, il est préférable de considérer qu’il y a toujours une et une seule « version valide » d’un projet Web sur l’ordinateur ; ce qui n’empêche pas de créer des variantes qui seront alors identifiées comme de nouveaux projets, ou de stocker les anciennes versions sur d’autres supports.

Je clique donc sur la flèche placée à droite du sélecteur « Enregistrer dans : » ; ce qui me permet de développer l’arborescence de l’ordinateur.

Je clique donc sur ma clé USB (qui apparaît ici en tant que « Lecteur F : » « UDISK 2.0 ».

JPEG - 42.5 ko

Une fois placé sur ma clé, je dois maintenant créer un dossier dans le quel je vais ranger tous les éléments du projet.

Ceci est très important, car toute l’arborescence que je vais créer localement sera ensuite envoyée sur Internet. Il est donc essentiel que tous ces éléments soient regroupés dans un seul dossier et non pas éparpillés à différents endroits de l’ordinateur.

Je clique donc sur l’icône de l’explorateur, permettant de créer un nouveau dossier.

JPEG - 37.8 ko

J’intitule ce dossier « projet web ». Et j’ouvre ce dossier afin de me localiser dedans.

JPEG - 37.3 ko

Je vérifie que suis bien placé dans ce dossier « projet web » ; ce qui est le cas, comme l’indique la vue ci-dessous, si le champ « Enregistrer dans : » indique bien ce dossier.

Dans le champ « Nom du fichier » (partie inférieure de l’explorateur) je tape index.html : ce sera le nom de ma page d’accueil. Sur un serveur Web, si un dossier comporte plusieurs fichiers, celui qui s’affiche toujours automatiquement est le fichier index.html.

Dernière vérifications et je clique sur le bouton « Enregistrer ».

JPEG - 31.8 ko

Commençons le document HTML.

Je tape la première balise :

<html>

Il est recommandé de taper tous les codes en caractères minuscules.

JPEG - 26.9 ko

Comme nous l’avons vu, pour la plupart des balises HTML la règle suivante s’applique :

Toute balise ouvrante doit être complétée par une balise fermante. Pour fermer une balise, il suffit de taper à nouveau le code, dans lequel on a inséré, le signe slash (barre inverse).

Cette paire de balises <html> </html> fait partie des éléments structurels d’une page HTML ; ils doivent impérativement figurer quelle que soit le contenu de la page.

Dans un premier temps, je vais donc insérer différentes balises structurelles. Pour éviter de surcharger, je ne me limiterai qu’au strict minimum, afin que la page puisse s’afficher correctement dans le navigateur. Pour une liste complète des balises qu’il est préférable d’afficher en conditions réelles, reportez-vous au support HTML (en ligne prochainement).

JPEG - 28.2 ko

Autre élément structurel, la balise d’en-tête : <head>.

Le éléments qui sont placés entre <head> et </head> ne s’affichent pas dans le navigateur ; pour autant, il ne faut pas négliger cette partie de la page HTML, notamment pour que le site soit référencé par les moteurs.

JPEG - 30.4 ko

Encore une autre paire de balises structurelles : <body> et </body>

C’est le corps de la page. Tout ce qui figure entre cette paire de balises s’affichera donc dans la fenêtre du navigateur.

Voilà pour la structure :

- Il s’agit d’un document HTML : <html> représente donc l’élément structurel englobant tout le reste.

- à l’intérieur, on trouve d’abord l’en-tête : <head>,

- puis, sous la tête, le …<body>.

JPEG - 32.1 ko

J’insère un commentaire (ici en vert).

Pour cela, je fais appel au code suivant :

<!--commentaire-->

Je rappelle que les commentaires sont des indications qui permettent d’apporter un confort de travail à la personne qui traite le code. Les commentaires sont ignorés par le navigateur.

Comme nous le verrons, les commentaires sont indispensables, notamment pour créer des maquettes en CSS. Ceux qui figurent ci-dessous, ne sont d’aucune utilité (si ce n’est montrer comment taper des commentaires), car je pars du principe que vous saurez très rapidement à quoi correspondent ces balises. Par contre si vous devez imbriquer à l’intérieur de ces balises HTML de multiples lignes de code (dont le CSS) vous ne regretterez pas d’avoir inséré des commentaires pour vous y retrouver.

JPEG - 33.6 ko

J’insère un couple de balises à l’intérieur de l’en-tête, il s’agit du titre de la page :

Et entre cette nouvelle paire de balises, j’insère le premier élément personnalisé de ma page : recettes.

Comme nous le verrons, même si ce titre ne s’affiche pas à l’intérieur de la fenêtre du navigateur, il est indispensable de renseigner cette zone avec le plus de précision possible (ce qui n’est, d’ailleurs pas vraiment le cas de mon exemple…)

JPEG - 36.9 ko

A présente, je tape un nouveau code dans le corps de la page :

<h1> </h1>

Il s’agit d’un titre de niveau 1 (équivalent de « Titre 1 » dans votre traitement de texte).

A l’intérieur du couple de balises<h1> </h1>, je tape le texte qui doit s’afficher comme étant le « titre premier » : Recettes de cuisine.

JPEG - 39.1 ko

J’enregistre le fichier.

JPEG - 39.9 ko

Puis, tout en gardant ouvert Notepad++, j’affiche un navigateur pour voir le résultat. Je clique sur le « Menu Fichier / Ouvrir »…

JPEG - 43.6 ko

Je dois retrouver mon projet pour le vérifier à l’écran : voilà pourquoi je dois le retrouver facilement et éviter de charger une autre version !!!

Je sélectionne la clé USB.

JPEG - 50.8 ko

J’ouvre le dossier « projet web ».

JPEG - 36.2 ko

Puis le fichier « index.html ».

JPEG - 31.6 ko

Oui ! le navigateur affiche - avec ses paramètres par défaut - le titre de niveau 1 qui figure dans le corps de la page (entre <body> et </body> ).

Regardez bien, dans la barre de titre de la fenêtre du navigateur, vous voyez bien « recettes » ? Il s’agit du titre de la page, que j’avais inséré dans l’en-tête. Pensez à vérifier systématiquement si votre page comporte un titre ; par exemple, Google classe les résultats de recherche en se basant notamment à partir des titres de pages.

On continue ; je garde la fenêtre du navigateur ouverte…

JPEG - 22.2 ko

Je passe à nouveau sur Notepad++ et je tape cette fois-ci un titre de niveau 2.

En toute logique il s’agit du couple de balises <h2> </h2>,

Ce titre niveau 2 peut être considéré comme un sous-ensemble du titre de niveau 1.

J’enregistre le fichier.

JPEG - 46.2 ko

Je passe sur le navigateur pour actualiser l’affichage de la page. Il existe un bouton pour cela.

JPEG - 21.7 ko

Je vous conseille de retenir le raccourci clavier permettant d’effectuer la même opération de « rafraîchissement de la page » : CTRL+R.

C’est une procédure que vous aurez à faire en permanence pour tester vos pages.

JPEG - 23.6 ko

Retour sur l’éditeur et découverte de la balise permettant de créer un paragraphe :

<p> </p>

JPEG - 56 ko

Enregistrement : CTRL+S

Passage sur le navigateur : ALT+TAB

Je charge à nouveau la page : CTRL+R

Voilà, comme ça vous connaissez la petite gymnastique qui vous permet de passer d’une étape à une autre tout en gardant les mains au clavier.

JPEG - 28.2 ko

Création, maintenant, du titre de niveau 3 :

<h3> </h3>

Que dire de plus, si ce n’est qu’il faut s’assurer que le contenu de votre titre corresponde bien à la logique arborescente, « en arbre », employée dans ces balises.

JPEG - 60.9 ko

Je crée une liste « non ordonnée » (liste à puces). Pour cela je déclare, dans un premier temps, la structure générale de la liste :

<ul>

</ul>

Pour information, si j’avais voulu créer une liste ordonnée (avec des chiffres) j’aurais utilisé le couple de balise suivant :

<ol>

</ol>

JPEG - 67.7 ko

Puis, ensuite, j’imbrique chaque item de ma liste à l’aide du couple de balise suivant :

<li>

</li>

JPEG - 77.5 ko

Retour sur le navigateur pour vérifier tout cela…

Comme nous le verrons, les listes sont très souvent utilisées pour réaliser les maquettes de pages web ; en particulier, les menus de rubriques (verticaux et horizontaux). Il est donc préférable de connaître ces balises.

JPEG - 34.2 ko

Je tape, ensuite, un deuxième titre de niveau 3. Eh oui, attention : ce n’est pas un « titre de niveau 4 », sous prétexte qu’il s’agit du quatrième tapé dans le texte.

Instructions est bien placé sur le même « niveau hiérarchique », du point de vue de la logique du texte, que Ingrédients. Il s’agit donc bien dans les deux cas de titres de niveau3.

JPEG - 83.3 ko

Je continue à taper mon texte. Comme il s’agit d’une série d’instructions plutôt lapidaires, je choisi de les intégrer dans des paragraphes distincts.

JPEG - 100.5 ko

Je vérifie à nouveau : il faut bien admettre que la mise en forme n’est pas bien extraordinaire, mais il n’est pas encore temps d’aborder la question. Pour l’instant, il faut d’abord placer le texte dans des conteneurs logiques structurés et cohérents :

- des titres

- les listes

- des paragraphes

Etc.

JPEG - 46.1 ko

Voyons maintenant comment réaliser un lien hypertexte, regardez la ligne 33.

JPEG - 50.2 ko

Maintenant, ci-dessous, voici comment ce code est interprété par le navigateur :

JPEG - 48.8 ko

Vous pourrez déduire que pour coder un lien hypertexte en HTML, il faut trois éléments distincts :

La paire de balises permettant de générer le lien hypertexte :

L’adresse vers laquelle pointe le lien :

Le texte sur lequel le lien est attaché.

Dernières remarques, concernant la syntaxe du code :

- attention à bien taper un espace entre a et href

- n’oubliez pas de saisir la référence de l’adresse encadrée par la paire de guillemets à l’anglaise (") ; le tout précédé par le signe égal (=).

J’ai détaillé volontairement chaque partie de ce code pour bien montrer que chaque détail a son importance.

Désormais, je ne reviendrai plus de cette façon pour commenter à la loupe chaque "micro-tronçon de code". C’est à vous de bien observer ce qui est indiqué pour essayer de le reproduire.

A présent voyons comment intégrer une image.

Je pars du principe que vous respectez le droit d’auteur et que, par conséquent vous vous apprêtez à mettre en ligne des images qui vous appartiennent, ou si ce n’est pas le cas, qu’il s’agit de documents « libres de droit », sous licence Creative Commons ou encore sous licence FGFL). Attention : ne mettez pas en ligne des documents protégés par copyright (qui ne vous appartiennent pas).

Notez bien que la protection du droit d’auteur s’applique à toute « œuvre » (textes, musiques, programmes, etc.) ; par conséquent ma remarque ne se limite pas aux images. Toutefois, si je l’évoque à cet endroit, c’est parce qu’il est tellement facile de récupérer une image sur le net que je vous recommande vivement de vérifier si toutes les images présentées sur votre site sont conformes à la réglementation.

De même, comme nous avons déjà eu l’occasion de l’aborder, vous auriez tout intérêt à choisir une solution parmi celles évoquées plus haut pour définir la protection de vos propres « œuvres » sur le net.

Nous voici, par exemple, sur Photoshop juste après avoir peaufiné cette sublime représentation détaillée de la quiche :

JPEG - 63.7 ko

J’en profite pour vous montrer comment enregistrer sur ce programme (ainsi que sur Photoshop Elements) une version « pour le web » :

Cliquez sur le « Menu Fichier / Enregistrer pour le Web » (MAJ-CRTL-ALT + S)

JPEG - 59.7 ko

Photoshop vous présente une fenêtre décomposée en 4 parties. Dans la première case (en haut à gauche) on vous montre l’image d’origine. Les trois autres permettent de comparer plusieurs versions d’images « optimisées pour un affichage sur le web ».

JPEG - 52.8 ko

Pour une photographies (ou toute image ayant un nombre important de nuances en demi-tons) je vous recommande de choisir l’un des deux formats :

- JPEG

- PNG

Tous deux permettent de réduire considérablement le poids du fichier (en Ko). A titre d’exemple, j’ai choisi ici le format JPEG, « qualité 60 ».

Je clique sur le bouton « Enregistrer »

JPEG - 35.9 ko

Ce qui fait surgir l’explorateur de fichier.

Ah oui, au fait, où dois-je enregistrer cette image ?

Réponse : si cette image fait partie de mon projet Web, il est donc normal qu’elle se trouve à proximité directe des autres fichiers…

Je sélectionne donc la clé USB sur laquelle j’ai enregistré mon fichier index.html

JPEG - 53.4 ko

Ensuite j’ouvre le dossier projet web, puisque c’est précisément à cet emplacement que je dois mettre cette image.

JPEG - 42.2 ko

Je suis bien localisé dans le dossier projet web. Vous êtes peut-être étonné de ne pas y trouver le fichier index.html.

En fait, c’est tout à fait normal : l’explorateur de fichier n’affiche pas index.html car il ne s’agit pas d’un format « image ». Ne l’oublions pas nous sommes en train d’enregistrer une image.

Justement, comme je souhaite ranger correctement mes affaires, je crée un dossier en cliquant sur l’icône idoine.

JPEG - 38 ko

Je nomme immédiatement ce nouveau dossier : images.

JPEG - 37.7 ko

Puis j’ouvre ce dossier, afin d’indiquer dans le champ « Nom du fichier : » quiche.jpg (en bas) y enregistrer cette photo.

JPEG - 38.2 ko

Puis je clique sur le bouton « Enregistrer ».

Pour la prochaine image, évidemment, je n’aurai pas à créer un autre dossier. C’est comme d’habitude : une fois que le dossier est en place je l’utilise pour y ranger mes affaires.

De la même façon, par souci de rangement, si je souhaite mettre en ligne des vidéos, il serait préférable de créer un dossier videos (sans accents) dans lequel seraient rangés tous les clips, idem pour des fichiers audios.

JPEG - 39.3 ko

L’image est enregistrée dans mon projet, voyons maintenant l’intégrer dans la page.

Regardez le code en ligne 36 :

JPEG - 115.2 ko

Trois remarques :

- il s’agit d’une balise HTML qui ne comporte pas de fermeture. En effet, l’instruction se suffit à elle-même puisqu’elle intègre, entre < et >, la référence de l’image quiche.jpg. Vous constatez, par contre la présence du signe / (slash) avant la fermeture. Il s’agit d’une règle à respecter lorsque vous avez affaire à une "balise simple" de ce type.

- La liaison avec l’image est indiquée "en mode d’adressage relatif", c’est à dire par rapport au document courant index.html. L’image est dans un dossier images placé au même niveau que la page index.html. Cela s’écrit de la façon suivante :

images/quiche.jpg

- Comme avec le lien hypertexte, la référence du fichier graphique est encadrée par une paire de guillements à l’anglaise, le tout précédé du signe égal.

JPEG - 70.1 ko

Voilà donc le résultat. Il va falloir essayer d’améliorer un peu la présentation. Avant cela, je dois quelque peu "préparer le terrain".

J’ouvre la fenêtre de TopStyle puis je clique sur le bouton "File" (Fichier)...

JPEG - 28.3 ko

Là encore, je dois indiquer le dossier de mon projet. Je sélectionne le lecteur de la clé USB.

JPEG - 90 ko

Je sélectionne le dossier "projet web".

JPEG - 47.3 ko

Je l’ouvre et j’enregistre le fichier en tant que styles.css

JPEG - 41.6 ko

Je vérifie une dernière fois, à l’aide de la barre de titre de TopStyle le nom de ce nouveau fichier, ainsi que son emplacement.

JPEG - 27.6 ko

Nous aborderons sur les prochaines supports, le traitement des CSS. En attendant, je dois créer le code qui permet de relier ce fichier styles.css au fichier actif, index.html.

Regardez bien la sixième ligne (surlignée), il s’agit de l’instruction qui permet justement cette liaison. Toutes les pages de mon site devront ainsi être reliées au fichiers CSS avec ce code.

JPEG - 87 ko

Prochain support : le code CSS.