I. Pages web : notions de base 1. Internet, éléments de culture générale 2. Langages de balise, html

I. Internet, éléments de culture générale Je navigue sur Internet... Une page saffiche dans mon navigateur (browser en anglais) Cest un transfert de données via un réseau Ces données sont fournies par un autre ordinateur Client Serveur...parce quon les lui a demandées : requête

Comment les machines se comprennent-elles ? Il faut que le serveur sache ce que demande le client... Et que le client comprenne ce que lui retourne le serveur... Cela suppose quils communiquent en respectant certaines règles : un protocole. Depuis les années 1990, on utilise le protocole « http » (= acronyme de « protocole de transfert hypertexte » en anglais)

Comment les machines se localisent-elles ? Les machines ou les réseaux connectés à Internet sont dotées dune adresse : ladresse IP (internet Protocol) comparable à un numéro de téléphone Par exemple En pratique on peut remplacer ladresse IP par un nom plus facile à retenir peut être remplacé par Sur le réseau, une machine joue le rôle dannuaire téléphonique : le DNS (serveur de noms de domaines) Il remplace par lors dune requête http.

Lurl Pour déterminer quel contenu est demandé à quelle machine, on utilise une url : universal ressource localisation. protocole Nom de domaine du serveur du Musée des Arts Premiers adresse IP Ressource précise demandée par le client au serveur Comment ? Ou ?Quoi ?

Localisation de la ressource Lurl peut comporter un chemin : emplacement et nom de la ressource sur le serveur /fr/programmation/expositions/index.html Ceci est un chemin : il désigne un emplacement sur le serveur fr programmation expositions index.htmlExpositions en cours,l'aristocrate et ses cannibalesle voyage en Océanie du comteFestetics de Tolna, octobre janvier 2008 index.htmlExpositions en cours,l'aristocrate et ses cannibalesle voyage en Océanie du comteFestetics de Tolna, octobre janvier 2008 répertoire fichier Les « slash » (/) slash servent à décrire la hiérarchie des répertoires appelés « dossiers » dans Windows Sur le serveur

C C disque Localisation de la ressource Le chemin ressemble donc à celui quutiliserait mon système dexploitation pour désigner une ressource sur lordinateur local : fr programmation expositions index.htmlExpositions en cours,l'aristocrate et ses cannibalesle voyage en Océanie du comteFestetics de Tolna, octobre janvier 2008 index.htmlExpositions en cours,l'aristocrate et ses cannibalesle voyage en Océanie du comteFestetics de Tolna, octobre janvier 2008 répertoire fichier C:\fr\programmation\expositions\index.html Sur la machine locale

Nom de la ressource Comme tout fichier, la ressource a un nom et une extension séparés par un point : index.html Nom du fichier Extension du fichier Lextension indique : comment interpréter les données (binaires) contenues dans le fichier. quel logiciel utiliser pour le lire.

Diverses extensions... On rencontre de très nombreuses extensions en informatique....doc.java.gif Et sur le web....html.php.swf... Liste des extension sListe des extension s (pour info)

Noms de fichiers Il faut respecter certaines règles et conventions ni caractères accentués, ni caractères spéciaux, ni espaces attention à la casse : fichier.html Fichier.html FICHIER.html nom de fichiers longs avec des « underscore » : mon_principal_fichier.html en « dos de chameau » : monPrincipalFichier.swf

2. langages de balise, html Comme la plupart des ressources disponibles sur Internet « index.html » est un texte (par exemple ASCII) Mais ce texte (la « source ») ne sera pas directement affiché. Il sera dabord interprété par le navigateur du client. Il doit donc être écrit dans un certain langage. index.html est un fichier de texte codé en html : hypertext market language ou langage de balises hypertexte

2. langages de balise, html Dans un langage il faut respecter une syntaxe principe dun langage à balises en général balise ouvrante balise fermante elles doivent avoir exactement le même nom. Les balises sont imbriquées si une paire de balise souvre dans une autre paire de balises... elle doit se fermer dans cette paire de balises

Exemple de code à balises valide Internet, éléments de culture générale Langages de balises, html ATTRIBUTS Une balise ouvrante peut avoir un ou des attributs IMBRICATION La balise qui souvre en premier se ferme en dernier INDENTATION Le code est indenté pour la clarté mais ce nest pas une nécessité pour la machine

langage de balise extensible Cest très pratique pour moi... je crée mes propres balises langage de balise dit extensible : XML Mais ce nest pas pratique pour les autres... il ne connaissent pas la signification de mes balises Voici un code à balises bien formé... mais incompréhensible sauf pour son concepteur. model7 others model4

HTML On peut se mettre daccord pour créer un sous- langage avec un jeu de balises qui auront la même signification pour tous cest définir un espace de noms. Un organisme mondial, le W3C (« world wide web consortium ») définit le jeu de balises html. Le html est un standard libre : aucune entreprise privée ne peut se lapproprier. Cest pourquoi une page web est souvent comprise entre les balises : Tim Berners-Lee inventeur du World Wide Web, président du W3C..... la suite est rédigée en langage html le html est un espace de noms (Name Space) au sein des langages à balises Le jeu de balises html est défini par le W3C à cette url.

Les balises html Le client reçoit du serveur un document codé en html Le navigateur est capable dinterpréter ce langage... pour générer un certain affichage. Par exemple la paire de balises (pour « bold ») signifie que le contenu doit être mis en gras. bonjour bonjour Code source Interprétation par le navigateur

Pour créer une page en html On a besoin dun éditeur pour travailler sur le code source. Nimporte quel logiciel capable de gérer du texte fait laffaire : le bloc-note de Windows Wordpad à la rigueur Ms Word ou Oo Writer un éditeur dédié à la programmation On a besoin dun navigateur pour visualiser le résultat (le code interprété) Sous Windows, ce sont principalement : Internet explorer (Microsoft) Mozilla Firefox (libre)

Pour créer une page en html Nous utliserons un simple bloc-note. Tutoriel sous Wink Par la suite on a la possibilité dutiliser divers logiciels « Wysiwyg » : « What you see is what you get » qui combinent code et interface graphique comme Nvu, Komposer, Adobe Dreamweaver, Microsoft Frontpage