Les Fiches de MonWebFacile





Chapitre

Fiche

 

Fiche : Introduction au langage HTML

Objet de la fiche

État de la fiche Terminée validée


Plan de la fiche

Avant propos

Pour qui ?

Ce tutorial s'adresse à des débutants désireux de découvrir et de comprendre pas à pas les technologies Internet. Pour rester bien clair, tous les points concernant ce sujet ne seront pas abordés (ou seront explicités uniquement lorsque nous en aurons besoin), toutefois la compréhension basique des mécanismes nécessaires à la construction de pages Web  seront explicités et pourront servir de base solide à ceux qui désireront aller plus loin.

La ligne permanente sera :

  • la simplicité : pas d'expression, ou de code compressés,
  • la clarté sur la présentation des pages Internet : utilisation maximale de feuilles de style communes à toutes les pages du site,
  • le souci permanent de conformité aux standards pour un fonctionnement multi navigateurs.

Pourquoi ?

Lorsque l'on débute dans ce domaine et même si l'on connaît un peu le sujet, il n'est pas facile de s'y retrouver et de saisir l'interaction entre tous tous les mécanismes mis en jeux.

Il existe des logiciels permettant de construire des pages Internet comme "Front Page" ou "DreamWeaver" et il est exact que l'on arrive très rapidement à obtenir un résultat intéressant. Toutefois la conception d'un site Internet ne consiste pas seulement à générer une page de type HTML. Très rapidement le besoin d'avoir un site interactif va se faire sentir et pour cela on va être amené dans un premier temps à utiliser des logiciels comme le Javascript (qui s'exécute sur le poste de travail de l'internaute) , puis si l'on envisage de gérer des mots de passe, des bases de données , à utiliser des logiciels comme php, asp, java (qui s'exécutent sur le serveur lui même). Ces logiciels sont interactifs avec le contenu (textes, styles, images, audio, vidéo ) initial de votre page et il n'existe pas d'outil pour couvrir l'ensemble de ces besoins. C'est dans ce cadre là que l'apprentissage basique qui est proposé ici prendra tout son sens.

Comment ?

Par une découverte pas à pas et avec des termes les plus simples possibles (même s'il n'appartiennent pas au monde informatique traditionnel) des mécanismes de construction d'une page Web simple au début, puis de plus en plus complexe. Toutes les étapes de cette construction sont commentés ainsi que le code HTML utilisé pour les produire.

 

Les différents chapitres constituant le projet

Organisation du chapitre

Un peu de vocabulaire

Internet

Réseau mondial associant des ressources de télécommunication et des ordinateurs serveurs et clients, destiné à l'échange de messages électroniques, d'informations multimédias et de fichiers. Il fonctionne en utilisant un protocole commun qui permet l'acheminement de proche en proche de messages découpés en paquets indépendants.

L'acheminement est fondé sur le protocole IP (Internet Protocol). L'accès au réseau est ouvert à tout utilisateur ayant obtenu une adresse auprès d'un organisme accrédité. La gestion est décentralisée en réseaux interconnectés.

Parmi les principaux services d'Internet citons :

  • L'e-mail pour les messageries électronique.
  • Telnet est le protocole permettant de se connecter sur une machine distante en tant qu'utilisateur. Cela permet à des professionnels de maintenir un système distant de plusieurs milliers de kilomètres.
  • FTP pour le transfert de fichiers.
  • WWW Le World Wide Web, communément appelé le Web, parfois la Toile ou le WWW, est un système hypertexte public fonctionnant sur Internet et qui permet de consulter, avec un navigateur, des pages mises en ligne dans des sites.

HTML

HyperText Markup Language : Langage normalisé de description des pages Web (documents qui regroupent du texte, des images, du son de la vidéo ou des adresses renvoyant vers d'autres pages web).
Il spécifie la mise en forme des documents à l'aide de commandes (marqueurs, balises, étiquettes) et est interprété par les navigateurs comme Netscape, Mozilla, Mosaic ou Internet Explorer.
Les pages web sont des documents de type texte qui peuvent être réalisés grâce à un éditeur de texte basique ou avec un éditeur HTML. Le principe est élémentaire: on encadre les parties multimédia à formater de balises marqueurs ou encore étiquettes; chaque balise s'inscrit entre les caractères < (inférieur à) et > (supérieur à) et est interprétée comme une commande par le navigateur.

Hypertexte

Un document hypertexte est une page web (page affiché par un navigateur) qui contient un ou plusieurs liens hypertextes qui renvoient vers d'autres documents.
Un lien hypertexte permet de lier un document Web à un ou plusieurs autres. On peut alors passer d'un document à l'autre via un simple clic. Le document cible peut être sur le même site ou externe au site. (on parle alors de liens externes).

Pré-requis

Connaissances minimales sur l'utilisation de logiciels PC  et en particulier :

  • "Explorer" pour visualisation de l'organisation des répertoires et fichiers sur le disque dur. Savoir créer des répertoires, accéder aux différents fichiers.
  • "Bloc note" comme éditeur de texte basique. (Attention si vous utiliser un autre éditeur de texte, vérifiez bien que ce dernier ne rajoute pas de caractères supplémentaires lors de la sauvegarde des fichiers).
  • "Internet Explorer" ou un autre navigateur pour exploiter les fichiers Internet.

Les +

  • " Photo-editor " ou " Paint " pour visualiser et/ou modifier des paramètres d'images.

Note1 : Tous les logiciels cités ci dessus sont disponibles de base dans le monde Windows. Pour les autres MAC, linux des outils équivalents sont aussi de base disponibles .

Note2 : Emplacement de "Bloc note" et "Paint" dans la liste des programmes Windows.

Accés bloc note

Principes généraux

Organisation générale

Il faut imaginer Internet comme une immense Médiathèque contenant à la fois des livres (documents informatiques manuscrits) , des CD (musiques), des DVD (images, films), du courrier et toutes sortes d'autres types de données mondialement accessibles.

Comme dans toute Médiathèque, et si l'on y est autorisé, on peut stocker, archiver, effacer, déplacer et consulter des documents.

Le gros avantage de cette forme de Médiathèque est que l'on peut y accéder de chez soi (via un fournisseur d'accès) , qu'elle dispose de mécanismes (moteurs) de recherche extrêmement performants, que les documents qu'elle héberge peuvent bénéficier de renvois les uns vers les autres (liens hypertextes)  et qu'elle propose des services additionnels comme le commerce ou les échanges en ligne.

Les documents constituant cette médiathèque sont  disponibles sur des milliers de serveurs informatiques interconnectés dans le monde. Ces serveurs appartiennent majoritairement à des hébergeurs institutionnels ou privés comme  La poste, Wanadoo, free, Google  ou Youtube pour ne citer qu'eux.

Pour accéder à ces documents l'utilisateur doit posséder un fournisseur d'accès Internet qui va lui permettre d'accéder au réseau mondial. Ce fournisseur d'accès  peut aussi dans certain cas jouer le rôle d'hébergeur.

Organisation générale

Comment accéder à un document

Par une URL (Uniform Resource Locator) qui est un format  de commande universel pour désigner une ressource (et une seule) sur Internet. Il s'agit d'une chaîne texte qui se décompose en plusieurs parties (5 parties normalement mais nous en détaillerons   3 uniquement à ce niveau du tutorial).

Syntaxe usuelle :http://www.free.fr/Index.html

HTTP => Protocole

Langage utilisé pour communiquer sur le réseau. Le protocole le plus largement utilisé est le protocole HTTP (HyperText Transfer Protocol), qui permet d'échanger des pages Web au format HTML. De nombreux autres protocoles sont toutefois utilisables (FTP pour le transfert de fichiers, https pour des connexions Internet sécurisées, News, Mailto pour l'échange de mail, Gopher,...).

WWW => nom du serveur final

On utilise généralement www ("World-Wide Web") pour tout ce qui est site Web (HTTP), mais ce n'est pas une obligation. A partir du moment où quelqu'un possède un nom de domaine, il peut mettre ce qu'il veut devant.

Par exemple pop.free.fr et smtp.free.fr sont les ordinateurs du fournisseur d'accès free.fr chargés du courrier électronique,  de même l'ordinateur ftpperso.free.fr est l'ordinateur chargé du transfert de fichiers.

free.fr=> nom de domaine ou adresse IP

Généralités

Tout composant (utilisateur, hébergeur, fournisseur d'accès, serveurs, imprimantes, bases de données etc..) connecté sur Internet est obligatoirement repéré par une adresse. Cette adresse et de la forme 212.27.48.10 et est appelée adresse IP

Sans rentrer dans le détail il faut savoir qu'une adresse IP est unique pour chaque élément connecté sur un réseau Internet. Afin de bien comprendre ce concept, une analogie peut être faite avec l'adresse postale qui permet d'attribuer une adresse unique à chaque foyer.

Du fait que chaque élément  raccordé à Internet possède sa propre adresse IP, l'échange d'informations entre éléments devient alors possible sans ambiguïté. La façon de véhiculer les informations entre éléments  est une simple question d'infrastructures de base (fibres optiques, routeurs, ATM) que nous n'aborderons pas ici. L'analogie postale appliquée à l'infrastructure  consisterait aux réseaux routiers, aériens et  aux moyens automobiles nécessaires pour acheminer le courrier etc...

Cependant, les utilisateurs ne veulent pas travailler avec des adresses numériques du genre 194.153.205.26 mais avec des adresses plus explicites  du type .free.fr ou .cdiscount.fr. Ainsi, il est possible d'associer des noms en langage courant aux adresses numériques grâce à un système de résolution des noms de domaine ou DNS (Domain Name System).

Ce système réalise la corrélation entre les adresses IP et le nom de domaine associé. En d'autres termes les logiciels internes utilisent  les adresses numériques mais les utilisateurs  travaillent  avec des adresse explicites. Les besoins de conversions tout au long du processus sont transparents pour les utilisateurs.

Exemple d'équivalence adresse IP/Nom de domaine: Test d'une connexion sur www.google.fr par l'adresse IP du serveur Google. Aprés appui sur "Testez" Google va s'ouvrir dans une nouvelle fenêtre. Regarder l'adresse IP dans l'URL: Testez

Mécanisme d'une connexion

1 -> on  tape par exemple http://www.free.fr/Index.html ,

2 -> votre ordinateur demande aux serveurs DNS de votre fournisseur d'accès les adresses IP des serveurs DNS du domaine "free.fr" (chaque machine connectée au réseau possède  dans sa configuration l'accès à deux serveurs de noms du  fournisseur d'accès : un serveur primaire et un serveur secondaire).

3 -> soit le serveur DNS de votre fournisseur d'accès connait l'adresse IP des serveurs DNS de free.fr et votre ordinateur se connecte aux serveurs DNS de free pour demander l'adresse IP de la machine "www" sur laquelle est hébergé le document demandé.

soit  le serveur DNS de votre fournisseur d'accès ne connait pas l'adresse IP des serveurs DNS de free.fr et il interroge un serveur racine (dans notre cas un serveur racine correspondant au domaine de premier niveau « .fr »). Le serveur de nom racine renvoie une liste de serveurs de noms faisant autorité sur le domaine (dans le cas présent les adresses IP des serveurs de noms du domaine  free.fr). Connaissant cette information votre ordinateur se connecte alors aux serveurs DNS de free pour demander l'adresse IP de la machine "www" sur laquelle est hébergé le document demandé.

4 -> Une fois les deux extrémités connues la connexion est établie

Index.html => Niveau serveur.

Chemin d'accès à la ressource : Cette dernière partie permet au serveur de connaître l'emplacement de la ressource, c'est-à-dire de manière générale l'emplacement (répertoire) et le nom du fichier demandé.

Syntaxes des URL

Lorsque vous faites démarrer "Internet Explorer" (navigateur Internet de Microsoft) vous disposez d'un champ dans lequel vous allez donner l'emplacement du document  Internet que vous voulez atteindre. Comme nous l'avons vu précédemment c'est l'adresse seule et unique du document localisé quelque part sur Internet que vous désirez consulter.

Syntaxe URL

Syntaxe générale pour accéder à un document

http://www.free.fr/rep1/rep2/Ma_Page.html.

On va chercher le document "Ma_Page.html"  dans le répertoire  "rep2" lui même sous répertoire de "rep1" référencé sur le serveur hôte "www" et appartenant au domaine "free.fr". La discussion entre les 2 ordinateurs se fera avec le protocole http.

Syntaxe usuelle pour accéder à un site Internet

 http://www.free.fr/ Dans ce cas on voit que la page Internet n'est pas précisée. En effet si on prend la précaution de nommer la page index.html et qu'on la mette dans la racine du site, le serveur va automatiquement charger cette page.

Syntaxe générale pour accéder à des documents en local sur votre PC

  • avec le navigateur "Internet Explorer"C:/MonSite/index.html
  • avec la plus part des autres navigateurs (Mozilla, Opéra .. mais aussi compatible avec Internet Explore )

 file:///C:/MonSite/index.html

Le Navigateur

Les navigateurs sont des logiciels résidant sur le PC de l'utilisateur et qui permettent  d'accéder au document demandé (URL), de récupérer le document (protocole), de le charger dans la mémoire du PC de l'utilisateur, et enfin d'afficher le contenu (HTML, images, fichiers ....) sous forme d'une page Web.

Dans le cas qui nous intéresse actuellement le document renvoyé sera de type html contenant :

  • des documents hypertexte et hypermédia.
  • des textes avec polices, tailles et  styles variés.
  • des formulaire avec zones de saisie, cases à cocher, listes déroulantes etc..
  • des documents graphiques selon différents formats (gif , jpeg , png ...)

Les navigateurs ont aussi la possibilité d'appeler des modules additionnels (plug-in) pour reproduire des sons ou de la vidéo.

Les navigateurs les plus courants sont Internet Explorer, Mozilla, Netscape, Opéra.

Ma première page Internet

Structure de base

Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple.

Une page HTML est ainsi un simple fichier texte contenant des balises (parfois appelées marqueurs ou repères ou tags en anglais) permettant aux navigateurs de mettre en forme et d'afficher de manières spécifiques des éléments texte,  images, sons ou autres, en fonction des types de balises utilisés pour les encadrer.

  1. Une balise est un mot placé entre les délimiteurs "<" et ">"
  2. Les balise vont souvent par paires : si la balise de début est <xxx> la balise de fin qui lui correspond est </xxx> .
  3. Si une balise ne possède pas son équivalent en fermeture il faudra la fermer de la manière suivante : <xxxxxx />
  4. Les balises sont insensibles à la casse (majuscules ou minuscules) toutefois la bonne habitude à prendre est de les écrire systématiquement en minuscules (compatibilité avec XHTML).
  5. Les balises HTML ont la particularité de pouvoir être imbriquées de manière hiérarchique afin de permettre le cumul de leurs propriétés. En contrepartie le chevauchement de balises n'est pas toléré par le standard HTML.
Imbrication des balises

Le langage HTML ne tient pas compte des espaces, des tabulations et des sauts de ligne ( ou plus exactement il considère une suite d'un ou plusieurs espaces/tabulations/saut de ligne comme un seul espace. Cela permet notamment d'indenter le code HTML pour plus de lisibilité, sans modifier l'apparence de la page Web qui sera restituée par le navigateur.

Une page HTML de base commence par la balise <html> et finit par la balise </html>. Elle contient également un en-tête décrivant le titre, les caractéristiques générales de la page, les règles de style du document (communément appelées feuilles de style) puis un corps dans lequel se trouve le contenu affichable de la page.

L'en-tête est délimité par les balises <head> et </head>. Le titre de la page doit apparaître entre ces balises  sous la forme de balises <title> et </title>.

Le corps est délimité par les balises <body> et </body>.

Les navigateurs lorsqu'ils lisent ce type de fichier savent interpréter ces balises et afficher le résultat en conséquences sous forme d'une page Web.

Lecture par un navigateur

Exemple concret

Voici une partie de la page HTML de google (page que va charger le navigateur lorsque vous vous connectez à Google avec l'URL http://www.google.fr/). C'est ce type de page que nous allons apprendre à maîtriser.

Google source

Voici le résultat que vous voyez sur votre écran après que le navigateur est interprété les différentes balises et leur contenu.

Google Web

Construire ma première page HTML

  • Créez un répertoire " MonSiteWeb "
  • Démarrez le " Bloc notes "
  • Inscrivez les éléments suivants :

<html>
<head>
<title> Mon site perso </title>
</head>
<body>
Je suis la page que je viens de créer
</body>
</html>

  • Enregistrez ce fichier sous le nom " test.html" dans le répertoire " MonSiteWeb "
  • Fermer " Bloc notes "
  • Vérifiez le résultat :
  1. Soit vous faite démarrer votre navigateur puis vous donnez l'URL d'accès à votre fichier : si votre disque principal est C: votre fichier doit se trouver à l'URL suivante file:///C:/MonSiteWeb/test.html
  2. Soit avec " Explorer " (outil d'exploration de répertoires et fichiers) vous recherchez le fichier puis double click sur ce fichier => démarrage automatique de " Internet Explorer" et affichage de votre première page. Vous devez retrouvez l'équivalent d'une page Internet classique affichant " Je suis la page que je viens de créer ".

Voir le style (à l'URL prés) de ce que vous devriez obtenir en cliquant sur le bouton ci- dessous

Dans tout ce qui suivra on parlera de page HTML comme étant le fichier que l'on manipule avec son contenu et ses balises et on parlera de page Web comme étant le résultat qui nous restitué par le navigateur à la lecture de la page Internet.

Prendre les bonnes habitudes

  • J'appelle index.html la page Internet d'accès à mon site.
  • j'écris systématiquement toutes les balises  en minuscules.

Application au projet de site web

La rubrique Application au projet va nous permettre de construire un site Internet au fur et à mesure des connaissance qui seront acquises au fil des fiches.

Pour toute la suite du projet :

  • téléchargez  le fichier Projet_MonWebFacile.zip,
    Téléchargez le fichier
  • copiez le  dans un répertoire quelconque,
  • Décompressez le fichier.

Vous devez retrouver le type d'arborescence suivante :

Commençons à créer notre première page Internet

  • Ouvrez le bloc note,
  • Créez la première page de votre projet Web :
  • La Boutique du Fleuriste sera  le titre de la page
  • Bienvenue sur La Boutique du Fleuriste sera le texte à afficher.
  • Sauvegarder cette page dans le répertoire Projet_MonWebFacile/Pages  (sous le nom index.html).
  • Pointez sur ce fichier avec votre Explorateur, puis double click : votre navigateur démarre et vous affiche votre page Web.

Retrouvez la solution

Correction

Le nom sous lequel le fichier doit être sauvegardé est : index.html car il s'agit de la première page du site.


Respectons la propriété intellectuelle