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.
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.
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).
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
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 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.
Une balise est un mot placé entre les délimiteurs "<" et ">"
Les balise vont souvent par paires : si la balise de début est <xxx> la balise de fin qui lui correspond est </xxx> .
Si une balise ne possède pas son équivalent en fermeture il faudra la fermer de la manière suivante : <xxxxxx />
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).
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.
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.
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.
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.
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 :
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
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,
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.
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.
