Obligement - L'Amiga au maximum

Vendredi 28 juillet 2017 - 00:36  

Translate

En De Nl Nl
Es Pt It Nl


Rubriques

 · Accueil
 · A Propos
 · Articles
 · Galeries
 · Glossaire
 · Hit Parade
 · Liens
 · Liste jeux Amiga
 · Quizz
 · Téléchargements
 · Trucs et astuces


Articles

 · Actualité (récente)
 · Actualité (archive)
 · Comparatifs
 · Dossiers
 · Entrevues
 · Matériel (tests)
 · Matériel (bidouilles)
 · Points de vue
 · En pratique
 · Programmation
 · Reportages
 · Tests de jeux
 · Tests de logiciels
 · Tests de compilations
 · Articles divers

 · Articles in english
 · Articles in other languages


Twitter

Suivez-nous sur Twitter




Liens

 · Sites de téléchargements
 · Associations
 · Pages Personnelles
 · Moteurs de recherche
 · Pages de liens
 · Constructeurs matériels
 · Matériel
 · Autres sites de matériel
 · Réparateurs
 · Revendeurs
 · Presse et médias
 · Programmation
 · Développeurs logiciels
 · Logiciels
 · Développeurs de jeux
 · Jeux
 · Autres sites de jeux
 · Scène démo
 · Divers
 · Informatique générale


Jeux Amiga

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Trucs et astuces

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Glossaire

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Partenaires

Annuaire Amiga

Amedia Computer

Relec

Hit Parade


Contact

David Brunet

Courriel

 


En pratique : HTML - premier document hypertexte
(Article écrit par Jean-François Richard - novembre 2007)


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-->
<!--Avant-dernières modifications le Date-->
<!--Dernières modifications le Date-->
<!--Copyright Initiale-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd">

<html lang="fr" dir="ltr">

<head>
       <title>Page minimale affichable dans un navigateur</title>
</head>

<body>

</body>

</html>


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> (entête) de cette page contenant le titre de la page par l'élément TITLE, on sort de l'entê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'entê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.
HTML
Image 1 : la page_minimale.html sous AWeb sur Amikit

Pratique : nommez votre fichier en page_minimale.html ou page_minimale.htm n'a pas d'importance, car dans les deux cas les navigateurs Web peuvent charger les fichiers. L'extension .htm est historique, car elle suit la règle de nommage des fichiers sous le système d'exploitation MS-DOS (8:3 avec 8 lettres pour le nom du fichier et 3 lettres pour le type de fichier).

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

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">
<html lang="fr" dir="ltr">

<head>
       <title>Commentaires</title>
</head>

<body>

<!-- Cette page ne contient qu'un commentaire -->

</body>
</html>


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 entê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.

HTML
Image 2 : la page commentaires.html avec IBrowse sous Amikit

En résumé

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">
<html lang="fr" dir="ltr">

<head>
       <title>Hello world</title>
</head>

<body>
<!-- ci dessous le texte affiché dans la fenêtre du navigateur -->
Hello world

</body>


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'entête HEAD et le corps BODY de la page. L'entê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.

HTML
Image 2 : la page hello_world.html visualisé avec AWeb sous Amikit

Exercice : faites une page avec une ligne de texte de votre choix.

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 terme 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.


[Retour en haut] / [Retour aux articles] [Article précédent] / [Article suivant]