La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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.

Présentations similaires


Présentation au sujet: "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."— Transcription de la présentation:

1 1

2 Comment marche internet ? 2

3 En France 3

4 Comment marche internet ? Un réseau de réseaux de réseaux de … Chaque FAI possède un réseau Il peut être partagé entre plusieurs FAI Les clients du FAI peuvent avoir leur propre réseau (ORT) Des grandes institutions possèdent leur réseau Les gouvernements Les hébergeurs de site … 4

5 Comment marche Internet ? Internet est la mise en réseau de ces grands réseaux Il nest pas possible de se connecter directement sur internet Internet nexiste pas ! 5

6 Internet nexiste pas ??? contrôle Pas de société qui contrôle Internet contrôle Pas de Pays qui contrôle Internet Pas de … Et pourtant, ça marche ! 6

7 Principe dinternet Interconnexion de réseau possède où le trouver Un réseau doit pouvoir dire si il possède un site, et si oui, où le trouver demander Un réseau doit pouvoir demander un service à un autre réseau Utilisation de serveur de Nom de domaines (DNS) Table associant le nom du site avec une adresse IP Adresse IP : même principe quune adresse postale 7

8 Principe dinternet 8

9 Les DNS Comparaison avec des hôtels Un réseau est représenté par un hôtel Chaque chambre contient un site Le maitre dhôtel possède un livre qui associe le nom dun client à son numéro de chambre On souhaite dire bonjour à google.com On se rend à lhôtel.com On demande au maître dhôtel dans quelle chambre se trouve google (qui nous répond ) On va à la chambre (en demandant notre chemin aux grooms (les routeurs)) 9

10 Les DNS Il 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 free On demande à free où se trouve uml 10

11 Principe dinternet Conclusion Internet : Réseau de réseaux de réseaux… Réseau de DNS : ensemble des sites Internet ! Conclusion bis Un site doit être stocké sur un serveur dun réseau Un site doit être enregistré dans un DNS 11

12 Créer un site Solution complexe Installer un serveur HTML (apache, Sambar,…) Sinscrire 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

13 Fonctionnement dun serveur 13 Ordinateur Serveur ( ) Ordinateur Serveur ( ) Ordinateur Client Ordinateur Client Serveur Web Navigateur Web Navigateur Web Qui est IP Aller sur Index.html ? Index.html

14 Fonctionnement dun site Un 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

15 Une structuration des documents internet 15

16 HTML Cest un langage à balise Une commande est une balise Généralement 2 balises : une ouvrante et une fermante Exemple : Ceci est un exemple simple Saffichera dans le navigateur : Ceci est un exemple simple 16

17 HTML Tout est balise La page affichée est une balise :... Le titre affiché dans le navigateur est une balise : le titre La mise en forme du texte Les liens hypertexte Les images … 17

18 HTML Une balise est donc Entourée des caractères 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 un exemple très simple Saffichera dans le navigateur : Ceci est un exemple très simple 18

19 Format dune page HTML Une page HTML se construit toujours de la même manière : Titre de la page Contenu de la page 19

20 Standards HTML début du document Il existe un grand nombre de standards HTML, il faut donc déclarer au début du document quel standard est utilisé. conseille Je conseille dutiliser celui là : ... 20

21 Balises HTML Dans lentête dune feuille html, on définit le titre de la page titre de la page quel encodage de caractères utiliser : Optionnels : Lauteur : Des mots-clefs : Une description : 21

22 Balises HTML Dans lentête dune feuille html, on définit Optionnels : Le copyright : Licone de la page: La feuille de style associée (vu plus tard) 22

23 Balises HTML Dans le corps du document, on définit ce qui sera affiché: Le titre : Les sous titres : … Les paragraphes : Les sauts de ligne : Quand il ny a quune seule balise ( br ), il faut penser à mettre un slash ( / ). 23

24 Balises HTML Les liens : La balise … Il y a plusieurs paramètres : href href="http://tibo.lelore.free.fr" Permet dindiquer vers quoi pointe le lien name name="nomLien" Permet de donner un nom à lendroit de la page Pour faire par exemple un lien au milieu dune page href mon site name href milieu de mon site 24

25 Balises HTML Les images : La balise Il y a plusieurs paramètres : src src="http://tibo.lelore.free.fr/img.jpg" Permet dindiquer où se trouve limage alt alt="petite description de limage" Permet davoir un texte qui saffiche si lutilisateur ne veux pas afficher les image width height width et height Permet de donner une taille (en pixels) de limage 25

26 26 Titre de la page Exemple de page HTML Le premier titre ! 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 p Ce second paragraphe montre que la structure du document est respectée. Le sous sous titre... On va s'arrêter là... Au passage, ce texte ne fait partie d'aucune balise ! (à par body…)

27 Exemple 27

28 Comment rendre joli le moche… 28

29 Personnaliser le HTML Permet de personnaliser le rendu Les titres en rouge Les sous titres en gris soulignés Les paragraphes avec la police arial … Pour ça, on utilise des balises css ! Un fichier texte avec lextension.css 29

30 Le CSS Cest 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 lon veux modifier Dans les accolades : ce que lon veut comme style 30

31 Les blocs CSS Toutes 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

32 Le CSS Il est possible de modifier beaucoup de choses : color : couleur du texte background : couleur de larrière plan padding : marge intérieure marging : marge extérieure font-family : type de font de caractère font-size : taille du texte width et height : largeur et hauteur border : bordure (trait, pointillé, rien…) text-align : permet de justifier le texte Utiliser Visual Studio pour une aide, ou tout autre éditeur (Dreamweaver, Golive…) ! 32

33 Exemple de CSS h1 { 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 dune taille de 1 pixel et dune couleur 788 */ padding: 3px 3px 3px 15px; /* ordre de bordure : haut, droit, bas, gauche */ margin-bottom: 20px; margin-top: 20px; } 33

34 Intégration dans la page HTML Une fois la feuille de style créée, comment lutiliser : Cette balise doit se trouver entre les balises Le style de la page se mettra alors automatiquement à jour. 34


Télécharger ppt "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."

Présentations similaires


Annonces Google