LE RESEAU INTERNET

• Internet est né en 1969 dans le cadre d’un projet de recherche du DARPA (Défense Advanced Research Projects Agency)

• Principe des nœuds de routage multiples qui permettent de communiquer facilement entre plusieurs ordinateurs distants

• Internet fournit un certain nombre de services basés sur le protocole TCP/IP (HTTP, FTP, SMTP, NNTP)

• Le WWW (World Wide Web) est un système hypermédia sur l’Internet (conçu en 1989 au CERN)

Les différents services de l’Internet seront vus en « Services sur réseau »

Le World Wide Web• Le service d’information le plus populaire permettant un accès

simple à des informations réparties sur des réseaux informatiques• Service d’information basé sur l’hypertexte• Les documents hypertextes utilisent le langage HTML (Hypertexte

Markup Language)– Le texte à lire– Le formatage du texte– L’insertion d’images– Les liens avec d’autres documents– Etc.

• Modèle client-serveur : le dialogue entre la machine serveur et la machine cliente est géré par le protocole HTTP (HyperText Transport Protocol)

• Service = Fournir un document• URL = Uniform Ressource Locator = adresse d’un document sur le

réseau

• Navigateur : client WWW et outil universel d’accès à l’information

• WEB– Espace d’information– Systèmes d’information– Service d’information multimédia

• Problèmes de présentation et de conception de l’information :– Organisation (communication, information, document)– Utilisation du,réseau– Maîtrise de la présentation des documents

• Diffusion d’informations– Respect du droit d’auteur– Données nominatives

Le World Wide Web

• L’utilisation du Web pour la diffusion de vos informations nécessite de réfléchir sur :– Les usages possibles– Les contraintes qu’il implique (organisation, temps, matériel)

• Double aspect– Maîtrise technique de l’outil– Contenu éditorial

• Échelle de diffusion– En terme de public visé– Selon la richesse éditoriale

• Plaquette publicitaire ou activité principale• Communication des activités, diffusion, échange

Le World Wide Web

• Universalité– Des plate formes– Du langage– Des navigateurs– Du réseau– Interactivité

• Gratuité encore large– Des navigateurs– Des logiciels serveur– De l’accès à l’information

Intérêts principaux

Simplicité D’utilisation De diffusion d’information

Le World Wide Web

• Web = World Wide Web =WWW• Le Web est un des services dont l’accès est

possible par le réseau Internet• Ce service me permet, à partir de mon

ordinateur, d’accéder à des informations diffusées par d’autres ordinateurs (utilisateur)

• Je peux produire des documents et les poser sur un serveur pour les diffuser

• Mon ordinateur et celui qui propose des informations Web sont reliés par Internet ou un réseau interne

Le World Wide Web

• Mon ordinateur (client) et l’ordinateur qui propose des informations (serveur) communiquent en HTTP

• Le serveur propose des document écrits en HTML

• Sur mon ordinateur, j’ai un logiciel qui permet– De comprendre les communications du serveur– D’interpréter le langage des documents qu’il diffuse

• Ce logiciel est un navigateur Web

Le World Wide Web

Connexion par un FAI (Fournisseur d’Accès à Internet)

Les contraintes techniques Quelques rappels de base

La diffusion d’information sur le Web existe grâce au réseau Internet, il faut donc penser à le ménager

Sélectionner les informations que l’on diffuse Rapport entre l’intérêt de l’information et son poids

(donc rapidité d’accès)Les lecteurs ne sont pas dans votre situation

(accès différents)Temps de chargement d’une image> 10s

(Insupportable)Cela encombre le réseau (fois le nombre

d’utilisateurs qui chargent cette même image)

Les contraintes techniques• Le WWW est basé sur le principe

Client/Serveur– Le poste client qui consulte et le poste serveur qui

diffuse sont reliés par le réseau

• Le lecteur qui consulte est libre du choix du logiciel client (différent du votre ou pas)– Il est dépendant de la vitesse de son réseau– Sa communication peut lui être facturée à la durée

• Autant de facteurs que vous ne pouvez pas maîtriser mais qui conditionnent une bonne communication entre vous et lui, d’où l’importance de connaître un minimum technique du fonctionnement du Web

Les contraintes techniquesURL : protocole://serveur.domaine/répertoire/document

Exemple : http://www.univ-lehavre.fr/intranet/index.html

http://www.univ-lehavre.fr/intranet/index.html

www.univ-lehavre.fr

/intranetindex.html

Les contraintes techniques• WWW = World Wide Web = W3

– Système d’information hypermédia sur le réseau

– Fonctionne en mode client/serveur• Client/serveur

– Ordinateur serveur diffuse– Ordinateur client consulte– Lien entre les deux : le réseau– Partage des tâches entre les deux

– Définition officielle du WWW :• Wide-area hypermedia information retrieval

initiative aming to give universal access to a large universe of documents

L’hypertexte

• Document Hypertexte : fichier avec des liens vers– D’autres parties du document– D’autres documents– Un lien hypertexte est un groupe de mots en sur

brillance (une ancre) dans un texte qui permet de faire afficher une autre page d’information

– Cliquer sur un lien déclenche une action

• Un document hypermédia est un hypertexte dont certains liens permettent d’accéder à des fichiers sons, images ou vidéo

Préparation du site

• L’organisation, la structure et la mise à jour d’un site sont difficiles

• Priorités– Le contenu est prioritaire– La technologie est secondaire– Site vivant, mise à jour

• Prévoir les mises à jour : constituer des documents HTML facilitant cette mise à jour

Avant de commencer

• Consulter les règles, chartes graphiques et recommandations sur le contenu et la mise en page

• Consulter les sites déjà existants

• Préparer– Plan de conception– Cahier des charges

Plan de conception• Pourquoi publier ces informations ?• A quels utilisateurs s’adressent-t-elles ?• Quelles informations (contenu et pertinence)• Arborescence et liens entre les documents• Mise en place d’une chaîne de production

– Création, Réalisation et vérification des pages HTML– Vérification multi plate-forme et multi connexion

• Moyens en temps et en personnel• Outils nécessaires• Aspect juridique (copyright, propriété

intellectuelle)

Cahier des charges

• Objectif du site• Contenu du service Web• Mise en forme• Animation du site• Maintenance du site (information &

organisation)• 1/3 préparation, 1/3 réalisation, 1/3

vérification

Structuration : conséquences

• Définir la structure du site et des pages• Structuration du site

– Organisation des pages entre elles– Hiérarchique, linéaire

• Structuration des pages HTML– Mise en page avec une base identique :

facilite le repérage et l’identité visuelle du site

L’arborescence• Organisation des fichiers sur le site• Arborescence

– Organisation en fonction d’une structure hiérarchique

– Ne pas complexifier l’arborescence– Déterminer la connexion entre les documents

Niveau1

Niveau2

Niveau3

…

Présentation Page d’accueil Présentation

Rubrique 1 Rubrique 2 Rubrique n

Sous-Rubrique 1-1

Sous-Rubrique 1-2

Sous-Rubrique 2-1

Sous-Rubrique 2-1

Sous-Rubrique n-1

Le langage HTML

• Format des fichiers WWW– Sous ensemble de SGML (Standard Generalized

Markup Language)– Norme gérée par un consortium international (W3C)

HTML 4.0

• Pourquoi l’apprendre ?– Lire les sources

• Modification de documents existants• S’adapter à des situations de production différentes• Suivre les évolutions technologiques

Le langage HTML

• Permet de décrire des pages et d’en contrôler l’apparence

• Langage de structuration de documentDTD (Document Type Definition)

• Langage simple défini par des balises– Interprétées par un navigateur– Résultat pouvant varier suivant la

configuration du poste du client

Le langage HTML

• Principe du balisage :

<balise attribut="valeur">texte</balise>

<p align="center">Un exemple</p>

• Squelette d’un document :– Prologue– En-tête– Corps du texte

Squelette d’un Document<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML4.0 //EN">

<HTML>

<HEAD>

<TITLE> </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

PrologueDébutEn-têteTitreFin En-têteCorps du texteFin corpsFin document

<HTML> : début du document Hypertexte

<HEAD> : début de l’en-tête (non affichée), sert aux renseignements relatifs au document (auteur, mots-clés, …)

<TITLE> : titre du document (affiché sur la barre de titre du navigateur)

<BODY> : début de la page HTML (la suite est affichée)

Structure d’un document HTML

Déclaration de type (prologue) Signification des différentes balises

L’en-tête Regroupe les informations non affichées

Modification de documents existants Le titre Les méta-données (catalogage)

Le corps du document

Les éléments de HTML

• HTML définit des éléments (des balises)– Les éléments de bloc : une boite contenant du

texte (précédé et suivi d’un saut de ligne)– Les éléments inline qui s’intègrent au fil du

texte sans rupture

Exemple de disposition d’éléments

Bloc de titre

Bloc de premier paragraphe

Le bloc du second paragraphe

Contient une image (élément inline)

Trois blocs juxtaposés par l’utilisation d’un tableau (tableau à une ligne et trois colonnes). La colonne de droite contient une image.

Un document

HTML

Principaux éléments de Bloc• Les paragraphes

• Les titres

• Les listes

Principaux éléments inlineLa typographie (gras, italique,etc.)Les imagesLes formulaires

Balises indispensables pour commencer

• <HTML>…</HTML>• <HEAD>…</HEAD>• <TITLE>Mon Titre</TITLE>• <BODY>…</BODY>

• Les balises peuvent être imbriquées• Attention à l’ordre d’ouverture et de fermeture

de chacune d’entre elles !!!

Les méta-donnéesElles sont contenues dans l’en-têteLes Informations de méta-données (balise <META>) sont des informations de catalogage. Les arguments sont :content : Information associée au nom ,http-equiv : Spécifie un lien entre le contenu de l’élément et la réponse http,lang : Spécifie la langue du texte. name : Spécifie un nom

<META NAME="Author" CONTENT="CV" lang="fr">

<META NAME="Keywords" CONTENT="Internet">

<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="ISO-8859-1">

Les titres

• Les titres (Headings) sont donnés par les balises <Hx>…</Hx>.

• 6 niveaux de titre (H1 à H6)

• Le texte entre ces balises est en gras

• C’est un élément de bloc

• Impossible d’avoir plusieurs titres sur une même ligne

Exemple de titres

<H1>Mon cours sur HTML 4.0</H1>

<H2>Les éléments de bloc</H2>

<H3>Les titres</H3>

<H2>Les éléments inline</H2>

Les paragraphes

• Les paragraphes sont donnés par les balises <p>…</p>

• Le texte s’ajuste automatiquement

• Aucune incidence des espaces et tabulations

• C’est un élément de bloc

Exemple de paragraphe<p>Les espaces, les tabulations, les retours-chariot n'ont aucune signification en HTML</p>

Le texte préformaté

• Le texte préformaté est donné par les balises <PRE>…</PRE>

• L’affichage est indépendant de la fenêtre paragraphes

• Deux attributs– <PRE COLS= "nbre"> nbre de car max /ligne– <PRE WRAP> active le retour à la ligne

automatique

Exemple de texte préformaté<pre>Les espaces, les tabulations, les retours-chariot n'ont aucune signification en HTML</pre>

<pre cols="30">Les espaces, les tabulations, les retours-chariot n'ont aucune signification en HTML</pre>

<pre wrap>Les espaces, les tabulations, les retours-chariot n'ont aucune signification en HTML</pre>

Les césures forcées

• Forcer la césure d’une ligne sans changer de paragraphe

• Les césures forcées sont données par la balise (pas de balise de fin)

<BR CLEAR= "ALL|LEFT|RIGHT|NONE" >

• L’attribut CLEAR définit la marge à respecter

Exemple de césure forcée

<p>Les espaces, les tabulations, <br>les retours-chariot <br>n'ont aucune signification en HTML</p>

Les lignes horizontales

• Les lignes horizontales permettent de séparer deux paragraphes

• <HR SIZE= "nombre">Hauteur en pixels

• <HR WIDTH= "nombre|pourcentage">Largeur en pixels ou en pourcentage de la largeur de l’écran

• <HR NOSHADE>Enlève l’aspect 3D (pas d’ombre)

Exemple de lignes horizontales

<HR SIZE="2">

<HR SIZE="2" WIDTH="50%">

<HR SIZE="8" WIDTH="150" NOSHADE>

La mise en page

• Attribut d’alignement : ALIGN="LEFT|RIGHT|CENTER|JUSTIFY" 

• Utilisable avec les titres, les paragraphes et les lignes horizontales

• Alignement d’un bloc :– Balise <DIV>…</DIV>

• Alignement inline– Balise <CENTER>…</CENTER>

Exemple de mise en page<HR ALIGN="LEFT" SIZE="8" WIDTH="150" NOSHADE>

<HR ALIGN="RIGHT" SIZE="8" WIDTH="150" NOSHADE>

<P ALIGN="Justify">Ce texte est justifié par rapport à la largeur de la fenêtre</P>

<P ALIGN="RIGHT">Ce texte est aligné à droite par rapport à la largeur de la fenêtre</P>

<P ALIGN="CENTER">Texte centré</P>

<CENTER>Texte Centré</CENTER>

Mise en forme des caractères

• Qu’est-ce que la mise en forme ?

• Effectuée par des balises inline

• Deux types de mise en forme– Éléments logiques (mise en valeur)– Éléments physiques (enrichissement

typographique)

La mise en formeéléments logiques

• <EM>…</EM> mise en valeur (italique)• <STRONG>…</STRONG> encore plus en évidence (gras)• <CITE>…</CITE> une citation (italique)• <CODE>…</CODE> afficher du code• <VAR>…</VAR> indique une variable• <DFN>…</DFN> indique une définition• <KBD>…</KBD> séquence de caractères

Exemple de mise en forme par éléments logiques

<EM>Mise en valeur</EM><BR>

<STRONG>encore plus</STRONG><BR>

<CITE>Une citation</CITE><BR>

<CODE>void main() {int i;}</CODE><BR>

<VAR>var a</CODE><BR>

<DFN>Définition 1 : i est entier ssi</DFN><BR>

<KBD>Du texte frappé<KBD><BR>

La mise en formeéléments physiques

• <B>…</B> en gras• <I>…</I> en italique• <U>…</U> en souligné• <STRIKE>…</STRIKE> en barré• <TT>…</TT> style télétexte• <SUP>…</SUP> exposant• <SUB>…</SUB> indice• <FONT SIZE="(+|-)valeur" FACE="NOM">…</FONT>

pour spécifier une police de caractères donnée

Exemple de mise en forme par éléments physiques

<B>Texte gras</B><BR>

<I>Texte italique</I><BR>

<U>Texte souligné</U><BR>

<TT>Texte de télétexte</TT><BR>

1<SUP>ère</SUP> promotion IUT<SUB>SRC</SUB><BR>

<FONT FACE="Arial" SIZE="3">Texte en arial</FONT><BR>

<FONT FACE="Arial" SIZE="-2">Texte en arial</FONT><BR>

<FONT FACE="garamond" SIZE="+3">Texte en arial</FONT><BR>

Les caractères diacritiques

• HTML 4.0 utilise la norme UNICODE

• Problème de lecture d’un fichier par toutes les machines

• Codage des éléments accentués– Tables d’entités– Caractères ISO-LATIN-1

Les caractères diacritiquespar table d’entités

Une entité est codé par la perluette (&) et terminée par un point-virgule (;).

e accent circonflexe : &ecirc;

e accent grave : &egrave;

e accent aigu : &eacute;

O avec tréma : &ouml;

Un caract&egrave;re accentu&eacute; pour

No&euml;l ?

Les listes

C’est un bloc HTML qui permet de réaliser l’énumération de plusieurs items.

• Les listes non ordonnées <UL>• Les listes ordonnées numérotées <OL>• La liste descriptive <DL>

La liste non ordonnée

<UL type="square">

<LI>item 1</LI>

<LI>item 2</LI>

<LI>item 3</LI>

</UL>

<UL TYPE="square|disc|circle">…</UL>

La liste numérotée<OL TYPE="1|a|A|i|I" start="valeur">…</OL>

<OL type="A" start="3">

<LI>item 1</LI>

<LI>item 2</LI>

<LI>item 3</LI>

</OL>

La liste descriptive

<DL>

<DT>item 1</DT>

<DD>Ma d&eacute;finition 1</DD>

<DT>item 2</DT>

<DD>Ma d&eacute;finition 2</DD>

</DL>

Permet de donner une liste de définitions (DL :Definition List), avec son DT (Definition Term) et sa définition DD

(Definition Description)

Les couleurs

• Couleur donnée par :– Ses valeurs RVB– Son nom en anglais

• Changer la couleur– Du fond– Des caractères

<BODY BGCOLOR="green">

<FONT COLOR="white" FACE="Arial">Un texte</FONT>

Les liens hypertexte Lien interne (dans le même document)

<A NAME="signet">…</A><A HREF="#nom_de_signet">…</A>

Lien local<A HREF="URL_local">…</A>

Lien externe<A HREF="URL_externe">…</A>

URL absolu : chemin complet (http://www.unicaen.fr/annuaire.html)

URL relatif :chemin relatif (annuaire.html)

<A NAME="debut">D&eacute;but du document</A>

<A HREF="http://www.unicaen.fr">université de Caen</A>

<BR><BR><BR><BR>

<A HREF="#debut">Retouner au d&eacute;but</A>

Site de l’université de Caen

Exemple de liens hypertexte