LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense...
-
Upload
ferrand-verrier -
Category
Documents
-
view
106 -
download
1
Transcript of LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense...
![Page 1: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/1.jpg)
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 »
![Page 2: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/2.jpg)
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
![Page 3: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/3.jpg)
• 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
![Page 4: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/4.jpg)
• 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
![Page 5: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/5.jpg)
• 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
![Page 6: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/6.jpg)
• 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
![Page 7: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/7.jpg)
• 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
![Page 8: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/8.jpg)
Connexion par un FAI (Fournisseur d’Accès à Internet)
![Page 9: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/9.jpg)
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)
![Page 10: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/10.jpg)
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
![Page 11: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/11.jpg)
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
![Page 12: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/12.jpg)
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
![Page 13: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/13.jpg)
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
![Page 14: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/14.jpg)
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
![Page 15: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/15.jpg)
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
![Page 16: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/16.jpg)
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)
![Page 17: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/17.jpg)
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
![Page 18: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/18.jpg)
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
![Page 19: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/19.jpg)
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
![Page 20: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/20.jpg)
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
![Page 21: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/21.jpg)
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
![Page 22: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/22.jpg)
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
![Page 23: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/23.jpg)
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)
![Page 24: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/24.jpg)
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
![Page 25: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/25.jpg)
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
![Page 26: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/26.jpg)
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
![Page 27: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/27.jpg)
Principaux éléments de Bloc• Les paragraphes
• Les titres
• Les listes
Principaux éléments inlineLa typographie (gras, italique,etc.)Les imagesLes formulaires
![Page 28: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/28.jpg)
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 !!!
![Page 29: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/29.jpg)
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">
![Page 30: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/30.jpg)
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
![Page 31: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/31.jpg)
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>
![Page 32: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/32.jpg)
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
![Page 33: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/33.jpg)
Exemple de paragraphe<p>Les espaces, les tabulations, les retours-chariot n'ont aucune signification en HTML</p>
![Page 34: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/34.jpg)
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
![Page 35: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/35.jpg)
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>
![Page 36: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/36.jpg)
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
![Page 37: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/37.jpg)
Exemple de césure forcée
<p>Les espaces, les tabulations, <br>les retours-chariot <br>n'ont aucune signification en HTML</p>
![Page 38: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/38.jpg)
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)
![Page 39: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/39.jpg)
Exemple de lignes horizontales
<HR SIZE="2">
<HR SIZE="2" WIDTH="50%">
<HR SIZE="8" WIDTH="150" NOSHADE>
![Page 40: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/40.jpg)
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>
![Page 41: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/41.jpg)
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>
![Page 42: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/42.jpg)
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)
![Page 43: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/43.jpg)
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
![Page 44: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/44.jpg)
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>
![Page 45: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/45.jpg)
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
![Page 46: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/46.jpg)
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>
![Page 47: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/47.jpg)
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
![Page 48: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/48.jpg)
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 : ê
e accent grave : è
e accent aigu : é
O avec tréma : ö
Un caractère accentué pour
Noël ?
![Page 49: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/49.jpg)
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>
![Page 50: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/50.jpg)
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>
![Page 51: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/51.jpg)
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>
![Page 52: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/52.jpg)
La liste descriptive
<DL>
<DT>item 1</DT>
<DD>Ma définition 1</DD>
<DT>item 2</DT>
<DD>Ma dé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)
![Page 53: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/53.jpg)
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>
![Page 54: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/54.jpg)
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)
![Page 55: LE RESEAU INTERNET Internet est né en 1969 dans le cadre dun projet de recherche du DARPA (Défense Advanced Research Projects Agency) Principe des nœuds.](https://reader036.fdocuments.us/reader036/viewer/2022062621/551d9d7e497959293b8b7126/html5/thumbnails/55.jpg)
<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
Exemple de liens hypertexte