![Page 1: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/1.jpg)
1
![Page 2: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/2.jpg)
Comment marche internet ?
2
![Page 3: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/3.jpg)
Comment marche internet ?En France
3
![Page 4: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/4.jpg)
Comment marche internet ?Un réseau de réseaux de réseaux de …
Chaque FAI possède un réseauIl peut être partagé entre plusieurs FAILes clients du FAI peuvent avoir leur propre réseau
(ORT)
Des grandes institutions possèdent leur réseauLes gouvernementsLes hébergeurs de site…
4
![Page 5: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/5.jpg)
Comment marche Internet ?Internet est la mise en réseau de ces grands
réseaux
Il n’est pas possible de se connecter directement sur internetInternet n’existe pas !
5
![Page 6: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/6.jpg)
Internet n’existe pas ???Pas de société qui contrôlecontrôle InternetPas de Pays qui contrôlecontrôle InternetPas de …
Et pourtant, ça marche !
6
![Page 7: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/7.jpg)
Principe d’internetInterconnexion de réseau
Un réseau doit pouvoir dire si il possèdepossède un site, et si oui, où le trouveroù le trouver
Un réseau doit pouvoir demanderdemander un service à un autre réseau
Utilisation de serveur de Nom de domaines (DNS)Table associant le nom du site avec une adresse IPAdresse IP : même principe qu’une adresse postale
7
![Page 8: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/8.jpg)
Principe d’internet
8
![Page 9: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/9.jpg)
Les DNSComparaison avec des hôtels
Un réseau est représenté par un hôtelChaque chambre contient un siteLe maitre d’hôtel possède un livre qui associe le
nom d’un client à son numéro de chambreOn souhaite dire bonjour à google.com
On se rend à l’hôtel .comOn demande au maître d’hôtel dans quelle
chambre se trouve google (qui nous répond 209.85.135.104)
On va à la chambre 209.85.135.104 (en demandant notre chemin aux grooms (les routeurs))
9
![Page 10: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/10.jpg)
Les DNSIl existe des hôtels imbriqués :
uml.free.fr Hôtel .fr Hôtel .free Chambre uml
Permet de déléguer le travail :On demande au DNS des .fr où se trouve freeOn demande à free où se trouve uml
10
![Page 11: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/11.jpg)
Principe d’internetConclusion
Internet : Réseau de réseaux de réseaux…Réseau de DNS : ensemble des sites Internet !
Conclusion bisUn site doit être stocké sur un serveur d’un
réseauUn site doit être enregistré dans un DNS
11
![Page 12: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/12.jpg)
Créer un siteSolution complexe
Installer un serveur HTML (apache, Sambar,…)S’inscrire dans un DNS (DynDNS, xname, ulimit,…)
Solution simple :Sociétés spécialisées (OVH, Netissime, Lycos…)Parfois gratuit (les principaux FAI, Troll Prod, …)Permet de ne pas avoir à se soucier des différents
problèmes
12
![Page 13: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/13.jpg)
Fonctionnement d’un serveur
13
OrdinateurServeur (123.123.321.321)
OrdinateurClient
Serveur WebServeur WebNavigateur
WebNavigateur
Web
Qui estwww.ici.net
IP123.123.321.321
Aller surAller surwww.ici.net/index.htmlwww.ici.net/index.html
Index.html ?
Index.html
![Page 14: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/14.jpg)
Fonctionnement d’un siteUn fichier texte est récupéré du serveur
Comment faire pour que ça soit joli ?Comment faire pour que ça soit interactif ?Comment faire pour que ça soit paramétrable ?
Création du langage HTML
14
![Page 15: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/15.jpg)
Une structuration des documents internet
15
![Page 16: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/16.jpg)
HTMLC’est un langage à balise
Une commande est une balise Généralement 2 balises : une ouvrante et une
fermanteExemple :Ceci est <i><i>un exemple</i> <b></i> <b>simple</b></b>S’affichera dans le navigateur :Ceci est un exemple simple
16
![Page 17: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/17.jpg)
HTMLTout est balise
La page affichée est une balise : <body> <body> ... </body></body>Le titre affiché dans le navigateur est une
balise : <title> <title> le titre </title></title>La mise en forme du texteLes liens hypertexteLes images…
17
![Page 18: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/18.jpg)
HTMLUne balise est donc
Entourée des caractères < et >Constitué de deux parties
Une partie ouvrante qui transforme ce qui suit Une partie fermante qui remet la forme comme avant Exemple 2 :
Ceci est <i><i>un exemple <u><u>très</u></i> </u></i> simple
S’affichera dans le navigateur :Ceci est un exemple très simple
18
![Page 19: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/19.jpg)
Format d’une page HTMLUne page HTML se construit toujours de la
même manière :<html><html><head><head>
<title><title>Titre de la page</title></title></head></head><body><body>
Contenu de la page </body></body>
</html></html>
19
![Page 20: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/20.jpg)
Standards HTMLIl existe un grand nombre de standards
HTML, il faut donc déclarer au début du début du document document quel standard est utilisé.
Je conseilleconseille d’utiliser celui là :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><html>
...
</html></html>
20
![Page 21: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/21.jpg)
Balises HTMLDans l’entête d’une feuille html, on définit
le titre de la page <title> <title> titre de la page </title></title>
quel encodage de caractères utiliser : <meta<meta http-equivhttp-equiv="Content-Type" contentcontent="text/html;
charsetcharset=iso-8859-1"/>/>
Optionnels : L’auteur : <meta <meta namename="Author" langlang="fr" contentcontent="Thibault LELORE"/>/> Des mots-clefs : <meta <meta namename="keywords" contentcontent="cours,HTML,IRIS,BTS"/>/> Une description : <meta <meta namename="description" contentcontent="petite description"/>/>
21
![Page 22: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/22.jpg)
Balises HTMLDans l’entête d’une feuille html, on définit
Optionnels : Le copyright :<meta <meta namename="copyright" contentcontent="ORT Marseille"/>/>
L’icone de la page:<link <link relrel="SHORTCUT ICON"
hrefhref="http://www.ort.fr/fichier.ico"/>/>
La feuille de style associée (vu plus tard)
22
![Page 23: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/23.jpg)
Balises HTMLDans le corps du document, on définit ce qui
sera affiché:Le titre : <h1></h1><h1></h1>Les sous titres : <h2></h2><h2></h2>…<h6></h6><h6></h6>Les paragraphes : <p></p><p></p>Les sauts de ligne : <br/><br/>
Quand il n’y a qu’une seule balise (br), il faut penser à mettre un slash (/).
23
![Page 24: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/24.jpg)
Balises HTMLLes liens :
La balise <a><a> … </a></a>Il y a plusieurs paramètres :
hrefhref="http://tibo.lelore.free.fr" Permet d’indiquer vers quoi pointe le lien
namename="nomLien" Permet de donner un nom à l’endroit de la page Pour faire par exemple un lien au milieu d’une page
<a hrefhref="http://tibo.lelore.free.fr"> mon site </a>
<a namename="milieu"></a>
<a hrefhref="http://tibo.lelore.free.fr#milieu"> milieu de mon site </a>
24
![Page 25: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/25.jpg)
Balises HTMLLes images :
La balise <img/><img/>Il y a plusieurs paramètres :
srcsrc="http://tibo.lelore.free.fr/img.jpg" Permet d’indiquer où se trouve l’image
altalt="petite description de l’image" Permet d’avoir un texte qui s’affiche si l’utilisateur ne
veux pas afficher les image widthwidth et heightheight
Permet de donner une taille (en pixels) de l’image
<img <img srcsrc="http://tibo.lelore.free.fr/img.jpg" altalt="description" widthwidth="10px" heightheight="15px"/>/>
25
![Page 26: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/26.jpg)
26
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><html><head><head>
<title><title>Titre de la page</title></title><meta <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>/>
</head></head><body><body><h1><h1>Exemple de page HTML</h1></h1><h2><h2>Le premier titre !</h2></h2><p><p>Dans ce premier paragraphe, nous n'indiquerons rien d'intéressant, si ce n'est qu'il y a du texte bien positionné, et c'est grâce à la balise <b><b>p</b></p></b></p><p><p> Ce second paragraphe montre que la structure du document est respectée.</p></p><h3><h3>Le sous sous titre...</h3></h3>On va s'arrêter là... Au passage, ce texte ne fait partie d'aucune balise ! (à par body…)</body></body></html></html>
![Page 27: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/27.jpg)
Exemple
27
![Page 28: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/28.jpg)
Comment rendre joli le moche…
28
![Page 29: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/29.jpg)
Personnaliser le HTMLPermet de personnaliser le rendu
Les titres en rougeLes sous titres en gris soulignésLes paragraphes avec la police arial…
Pour ça, on utilise des balises css !Un fichier texte avec l’extension .css
29
![Page 30: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/30.jpg)
Le CSSC’est un langage à balise :
Exemple : dire que le titre est en rouge et en gras :
h1{
color:#FF0000;
font-weight:bold;
}Il y a donc deux zones importantes :
Avant les accolades : le nom de la balise HTML que l’on veux modifier
Dans les accolades : ce que l’on veut comme style30
![Page 31: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/31.jpg)
Les blocs CSSToutes les balises HTML peuvent être
modifiées :img (image)b (saut de ligne)p (paragraphe)h1 (titre principal)h2 (sous-titre)body (la page en entière !)…
31
![Page 32: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/32.jpg)
Le CSSIl est possible de modifier beaucoup de choses :
color : couleur du textebackground : couleur de l’arrière planpadding : marge intérieuremarging : marge extérieurefont-family : type de font de caractèrefont-size : taille du textewidth et height : largeur et hauteurborder : bordure (trait, pointillé, rien…)text-align : permet de justifier le texte
Utiliser Visual Studio pour une aide, ou tout autre éditeur (Dreamweaver, Golive…) !
32
![Page 33: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/33.jpg)
Exemple de CSSh1 {color:#999;font-family:Verdana,Arial,Sans-serif;/* il est possible de mettre plusieurs polices de caractères */font-size:28pt; /* taille assez grande ...*/padding:0; /* Pas de marge */}
h2 {color:#456;font-family: Georgia,Verdana,Arial,Helvetica,Sans-serif;border-bottom: 1px solid #788;/* une bordure en bas d’une taille de 1 pixel et d’une couleur 788 */padding: 3px 3px 3px 15px;/* ordre de bordure : haut, droit, bas, gauche */margin-bottom: 20px;margin-top: 20px;}
33
![Page 34: 1. Comment marche internet ? 2 En France 3 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être](https://reader035.vdocuments.fr/reader035/viewer/2022062511/551d9d7f497959293b8b85dc/html5/thumbnails/34.jpg)
Intégration dans la page HTMLUne fois la feuille de style créée, comment
l’utiliser :
<link <link relrel="stylesheet" typetype="text/css" hrefhref="./style.css" />/>
Cette balise doit se trouver entre les balises <head></head><head></head>
Le style de la page se mettra alors automatiquement à jour.
34