I. Pages web : notions de base

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

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

3. 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 qu’ils 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)

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

5. L’url • Pour déterminer quel contenu est demandé à quelle machine, on utilise une url : universal ressource localisation. Ou ? Quoi ? Comment ? http://www.quaibranly.fr/fr/programmation/expositions/index.html Ressource précise demandée par le client au serveur Nom de domaine du serveur du Musée des Arts Premiers  adresse IP 213.56.137.163 protocole

6. Localisation de la ressource Sur le serveur 213.56.137.163 • L’url peut comporter un chemin : emplacement et nom de la ressource sur le serveur /fr/programmation/expositions/index.html fr répertoire Ceci est un chemin : il désigne un emplacement sur le serveur programmation répertoire expositions répertoire index.html Expositions en cours, l'aristocrate et ses cannibales le voyage en Océanie du comte Festetics de Tolna, 1893 - 1896 23 octobre 2007- 13 janvier 2008 fichier Les « slash » (/) slash servent à décrire la hiérarchie des répertoires appelés « dossiers » dans Windows

7. Localisation de la ressource • Le chemin ressemble donc à celui qu’utiliserait mon système d’exploitation pour désigner une ressource sur l’ordinateur local : C:\fr\programmation\expositions\index.html Sur la machine locale C disque fr répertoire programmation répertoire expositions répertoire index.html Expositions en cours, l'aristocrate et ses cannibales le voyage en Océanie du comte Festetics de Tolna, 1893 - 1896 23 octobre 2007- 13 janvier 2008 fichier

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

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

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

11. 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 d’abord 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

12. 2. langages de balise, html • Dans un langage il faut respecter une syntaxe • principe d’un langage à balises en général • balise ouvrante <quelquechose> • balise fermante </quelquechose> • elles doivent avoir exactement le même nom. • Les balises sont imbriquées • si une paire de balise s’ouvre dans une autre paire de balises... • elle doit se fermer dans cette paire de balises

13. Exemple de code à balises valide <cours_TIC_2DE> <partie numero = 1> Internet, éléments de culture générale </partie> <partie numero = 2> Langages de balises, html </partie> </cours_TIC_2DE> ATTRIBUTS Une balise ouvrante peut avoir un ou des attributs INDENTATION Le code est indenté pour la clarté mais ce n’est pas une nécessité pour la machine IMBRICATION La balise qui s’ouvre en premier se ferme en dernier

14. C’est très pratique pour moi... je crée mes propres balises langage de balise dit extensible : XML Mais ce n’est 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. _{<doctt nm="31"> model7 <extend> others </extend> </doctt> <doctt nm="44"> model4 </doctt>} langage de balise extensible

15. HTML • On peut se mettre d’accord pour créer un sous-langage avec un jeu de balises qui auront la même signification pour tous • c’est 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 l’approprier. • C’est pourquoi une page web est souvent comprise entre les balises : Tim Berners-Lee inventeur du World Wide Web, président du W3C <html xmlns = "http://www.w3.org/1999/xhtml"> ..... </html> Le jeu de balises html est défini par le W3C à cette url. le html est un espace de noms (Name Space) au sein des langages à balises la suite est rédigée en langage html

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

17. On a besoin d’un éditeur pour travailler sur le code source. N’importe quel logiciel capable de gérer du texte fait l’affaire : le bloc-note de Windows Wordpad à la rigueur Ms Word ou Oo Writer un éditeur dédié à la programmation On a besoin d’un 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

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