i. pages web : notions de base 1. internet, éléments de culture générale 2. langages de balise,...
TRANSCRIPT
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 s’affiche dans mon navigateur (browser en anglais)
C’est un transfert de données via un réseau
Ces données sont fournies par un autre ordinateur
Client Serveur
...parce qu’on 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 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)
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.
L’url
Pour déterminer quel contenu est demandé à quelle machine, on utilise une url : universal ressource localisation.
http://www.quaibranly.fr/fr/programmation/expositions/index.html
protocole Nom de domaine du serveur du Musée des
Arts Premiers adresse IP
213.56.137.163
Ressource précise
demandée par le client au
serveur
Comment ? Ou ? Quoi ?
Localisation de la ressource
L’url 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
frfr
programm
ation program
matio
n
expositions exposition
s
index.htmlExpositions en cours, l'aristocrate et ses cannibalesle voyage en Océanie du comte Festetics de Tolna, 1893 - 189623 octobre 2007- 13 janvier 2008
index.htmlExpositions en cours, l'aristocrate et ses cannibalesle voyage en Océanie du comte Festetics de Tolna, 1893 - 189623 octobre 2007- 13 janvier 2008
répertoire
répertoire
répertoire
fichier
Les « slash » (/) slash servent à décrire la hiérarchie des répertoires appelés « dossiers » dans Windows
Sur le serveur 213.56.137.163
CC
disque
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 :
frfr
programm
ation program
matio
n
expositions exposition
s
index.htmlExpositions en cours, l'aristocrate et ses cannibalesle voyage en Océanie du comte Festetics de Tolna, 1893 - 189623 octobre 2007- 13 janvier 2008
index.htmlExpositions en cours, l'aristocrate et ses cannibalesle voyage en Océanie du comte Festetics de Tolna, 1893 - 189623 octobre 2007- 13 janvier 2008
répertoire
répertoire
répertoire
fichier
C:\fr\programmation\expositions\index.htmlSur 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
L’extension 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 extensions
(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 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
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
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>
ATTRIBUTSATTRIBUTSUne balise ouvrante peut avoir
un ou des attributs
IMBRICATIONIMBRICATIONLa balise qui
s’ouvre en premier se ferme en
dernier
INDENTATIONINDENTATIONLe code est indenté pour la clarté mais ce n’est pas une nécessité pour la machine
langage de balise extensible
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.
<sub><doctt
nm="31"> model7 <extend>
others</
extend> </doctt> <doctt
nm="44">model4</doctt>
</sub>
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>
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 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.
<html><b>bonjour</b></html>
bonjour
Code source Interprétation par le navigateur
Pour créer une page en html
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
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