 |
Vendredi 06 juin 2025 - 12:37 |
| Translate |
|
| Rubriques |
| Réseaux sociaux |
|
| Liste des jeux Amiga |
|
| Trucs et astuces |
|
| Glossaire |
|
| Galeries |
|
| Téléchargement |
|
| Liens |
|
| Partenaires |
|
| A Propos |
|
| Contact |
|
|
|
Dans les exemples suivants, nous allons d'abord étudier le squelette de toute page HTML, puis nous enchaînerons par la saisie de commentaires (permettant de commenter ces sources, pour mieux s'y retrouver après quelques mois sans toucher au code). Enfin, nous allons afficher la célèbre phrase "Hello World!!!" dans une page HTML.
La page minimale
La page minimale nous permet de comprendre la structure de toute page HTML et pourra être réutilisée dans toutes les pages Web créées.
Code source de la page "page_minimale" :
|
<!--Ex 01 : Page minimale affichable dans un navigateur - créé le Date - auteur: Nom, Prénom--> |
La page minimale sous HTML est le squelette commun à toute page HTML. Elle est d'abord composée d'informations sur le concepteur de la page et sur sa création. Ensuite, apparaît une ligne indéchiffrable pour le novice, décrivant la page comme une page en HTML définie selon les définitions de la version 4.01 spécifiée par le W3C.
Enfin, nous avons des balises comme nous allons en voir pendant le reste de ce cours : une balise d'ouverture <html> de l'élément page HTML. Suivi d'une balise <head> (en-tête) de cette page contenant le titre de la page par l'élément TITLE, on sort de l'en-tête de la page et on entre par la balise <body> d'ouverture de l'élément BODY dans le corps de la page. On ferme ce corps de la page et on ferme l'élément page HTML.
Exercice : réécrire cette page HTML. Vous l'utiliserez pendant le reste du cours. Vous en changerez seulement le contenu affiché dans le corps de la page (BODY) et au niveau du titre (TITLE).
En résumé
- <html> définit la balise du document page HTML apparaissant dans le navigateur.
- <head> est l'en-tête du document et spécifie le titre de ce document dans la barre de titre du navigateur. Nous verrons plus loin les autres balises pouvant y être insérées et leurs intérêts.
- <body> est le corps du document et c'est en son sein que l'on code ce qui sera visualisé dans la fenêtre de navigation.
Image 1 : la page_minimale.html sous AWeb sur AmiKit
Ne pas sauvegarder en page_minimale.doc de Word ou autre format propriétaire d'éditeur de texte (Office, WordPerfect, OpenOffice 2.0, Latex, Wordworth...) car la sauvegarde se fait dans un encodage spécifique au logiciel ne pouvant être lu par le navigateur d'où l'apparition de termes abscons dans la fenêtre de navigation, et des problèmes d'interprétation de la part du navigateur.
Pour afficher le fichier dans le navigateur plusieurs possibilités s'offrent :
- Glisser-déposer le fichier dans la fenêtre du navigateur.
- Sélectionner le menu "Ouvrir" dans le navigateur et sélectionner le fichier, puis appuyer sur "Ok".
Les commentaires sont essentiels, car ils permettent de commenter les codes sources de vos pages HTML, pour par exemple les rendre compréhensibles pour toute personne devant un jour s'occuper du site Web que vous venez de mettre en ligne.
Code source de la page "commentaires" :
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd"> |
Cette page contient encore la structure minimale requise par une page HTML 4.01. Il faut voir qu'elle contient les trois balises indispensables à la création d'une page Web : la balise <html>, la balise <head> et la balise <body>. De plus, la balise <head> comprend en son sein la balise <title> permettant de donner un titre à une page Web au niveau de son en-tête de navigation (c'est-à-dire la barre de titre du navigateur).
Question : il existe des différences entre le code source et le texte affiché, lesquels ?
Réponse : il n'existe pas le texte compris entre des marqueurs. De même, le texte entre <!-- et --> n'apparaît pas, c'est un commentaire.
Image 2 : la page commentaires.html avec IBrowse sous AmiKit
Les commentaires sont créés avec une balise comprenant en son sein le commentaire.
Exemple :<!--ouverture du commentaire comprenant son texte explicatif et puis fermeture du commentaire-->.
Astuce : si vous pouvez, commentez le plus possible vos pages aux endroits clés, car pour la maintenance, ou pour la compréhension de la structure de la page (pour les pages complexes).
La page hello world
La page "hello world" est un exercice classique de toute étude d'un langage de programmation. De plus, dans notre cas, elle nous permettra d'afficher à l'écran notre premier texte au sein du navigateur.
Code source de la page "hello_world" :
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd"> |
Cette page ressemble à la page minimale précédemment étudiée, ainsi elle possède toutes les balises nécessaires et suffisantes à son interprétation dans un navigateur. De plus, elle possède en plus un simple texte "Hello world" entre ses balises <body>. Si l'on exécute cette page dans un navigateur Web, il apparaît le texte "Hello world" dans le coin supérieur gauche de la fenêtre de navigation. C'est normal, car le navigateur formate le texte à l'occidental par défaut, sauf si votre système d'exploitation est asiatique ou oriental. On peut aussi forcer le mode d'affichage et même les polices de caractères. Nous verrons cela plus loin.
Question : il manque un marqueur dans le fichier "helloworld.html". Lequel ? La réponse se situe dans votre connaissance du squelette HTML. L'élément HTML n'est pas obligatoire dans une page Web, mais il est fortement recommandé par le consortium W3C, avec des attributs décrivant l'appartenance à une version des spécifications HTML. Tous les documents HTML ont deux éléments obligatoires et nécessaires à la constitution de la page HTML : l'en-tête HEAD et le corps BODY de la page. L'en-tête contient des informations utiles pour les moteurs de recherche et contient le titre de la page apparaissant en haut de la page HTML (obligatoire à plusieurs titres).
Le corps de la page est ce qui apparaît dans la fenêtre de navigation. Ainsi pour résumer, les éléments indispensables de la page HTML minimale sont : HTML, HEAD, BODY et TITLE.
Image 2 : la page hello_world.html visualisé avec AWeb sous AmiKit
Astuce : pour bien formater le texte que vous créer, utiliser les minuscules pour les balises HTML, cela ne vous permettra pas une relecture rapide de votre code source par rapport à leur formatage en majuscule, mais nous verrons ultérieurement pourquoi. De plus, l'indentation des lignes de code est très importante, elle permet de voir les erreurs de syntaxe possible (oubli d'une balise de fermeture par exemple) même si le HTML est très tolérant par rapport aux erreurs.
Son titre est différent, cela n'a pas beaucoup d'importance, mais au niveau du Web, cela en prend une toute autre, car les pages sans titres n'apportent aucune information pour les moteurs de recherche qui souvent prennent les titres des pages lors de leurs récoltes d'informations sur les sites. De plus, quand une personne navigue sur votre site, cela l'informe tout de suite de la page où elle se trouve si elle veut un repère rapide dans sa navigation.
Cet article a été réalisé avec AmiKit, un grand merci à Jan Zahurancik pour son travail titanesque et à Éric Luczyszyn pour son travail de francisation.
Annexe : introduction à la conception de site Web
Voici quelques questions pour optimiser la conception d'un site Web. Pour chacune de ces questions, je donne comme réponse une description de ce qui est attendu.
1. Public ciblé ?
Restreint ou large ?
2. Qu'est-ce que le site cherche à communiquer ?
Objectifs de communication de ce site ?
3. Objectifs ou besoins spécifiques ?
Savoir ce que l'on veut de façon très précise. Conception visuelle. Objectif des utilisateurs.
4. Sites d'inspirations ?
Sites favoris et pourquoi ? Aspect de structuration ?
5. Sites partenaires, liens, mécènes... ?
Si liens à créer.
6. Portée du site ?
Distribuer et collecter des informations ? Services apportés par ce site.
7. Supports imprimés d'où sortir des informations, inspirations ?
Logos, brochures, ou tout autre image...
8. Sites proches en termes de portée et d'intention ?
Sites intéressants et sites inintéressants et pourquoi ?
9. Conception d'un scénarimage.
Faire un schéma pour chaque page du site.
10. Conception d'un diagramme de site.
Inscrire toutes les rubriques du site sur des fiches cartonnées distinctes.
Les étaler devant soi et les classer logiquement.
Retenez les meilleures idées de chacune.
11. Mode de navigation.
Rendre les possibilités de navigation à partir de chaque page.
12. Structure du site.
Arborescence ayant l'apparence de l'explorateur existant sous Windows.
13. Métaphores.
Concept visuel, sonore ou autre représentant une idée.
|
|