Embed Size (px)
Citation preview
1
Comment marche internet ?
2
Comment marche internet ?En France
3
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
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
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
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
Principe d’internet
8
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
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
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
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
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
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
Une structuration des documents internet
15
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
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
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
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
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
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
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
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
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
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
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>
Exemple
27
Comment rendre joli le moche…
28
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
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
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
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
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
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
