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

Le World Wide Web 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 Intérêts principaux Gratuité encore large Des navigateurs Des logiciels serveur De l’accès à l’information Universalité Des plate formes Du langage Des navigateurs Du réseau Interactivité 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

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 techniques URL : protocole://serveur.domaine/répertoire/document Exemple : http://www.univ-lehavre.fr/intranet/index.html www.univ-lehavre.fr http://www.univ-lehavre.fr/intranet/index.html /intranet index.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 2-1 Sous-Rubrique n-1 Sous-Rubrique 1-2 Sous-Rubrique 2-1

Le langage HTML Format des fichiers WWW Pourquoi l’apprendre ? 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 document DTD (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 Prologue <!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML4.0 //EN"> <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Début En-tête Titre Fin En-tête Corps du texte Fin corps Fin 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 Un document HTML 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.

Principaux éléments de Bloc Les paragraphes Les titres Les listes Principaux éléments inline La typographie (gras, italique,etc.) Les images Les 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ées Elles sont contenues dans l’en-tête Les 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 diacritiques par table d’entités Une entité est codé par la perluette (&) et terminée par un point-virgule (;). e accent circonflexe : ê e accent grave : è e accent aigu : é O avec tréma : ö Un caractère accentué pour Noë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>

<UL TYPE="square|disc|circle">…</UL> La liste non ordonnée <UL TYPE="square|disc|circle">…</UL> <UL type="square"> <LI>item 1</LI> <LI>item 2</LI> <LI>item 3</LI> </UL>

<OL TYPE="1|a|A|i|I" start="valeur">…</OL> 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 Permet de donner une liste de définitions (DL :Definition List), avec son DT (Definition Term) et sa définition DD (Definition Description) <DL> <DT>item 1</DT> <DD>Ma définition 1</DD> <DT>item 2</DT> <DD>Ma définition 2</DD> </DL>

Les couleurs Couleur donnée par : Changer la couleur 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)

Exemple de liens hypertexte <A NAME="debut">Début du document</A> <A HREF="http://www.unicaen.fr">université de Caen</A> <BR><BR><BR><BR> <A HREF="#debut">Retouner au début</A> Site de l’université de Caen