I. Pages web : notions de base

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


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



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.

<doctt

nm="31"> model7 <extend>

others</

extend> </doctt> <doctt

nm="44">model4</doctt>



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 (pour « bold ») signifie que le contenu doit être mis en gras.

<html>bonjour</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

Documents

I. Pages web : notions de base