fichier PowerPoint - Charlie-Soft

Download Report

Transcript fichier PowerPoint - Charlie-Soft 

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é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
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
internet
 Internet n’existe pas !
5
Internet n’existe pas ???
 Pas de société qui contrôle Internet
 Pas de Pays qui contrôle Internet
 Pas de …
 Et pourtant, ça marche !
6
Principe d’internet
 Interconnexion de réseau
 Un réseau doit pouvoir dire si il possède un site, et si
oui, où le trouver
 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 qu’une adresse postale
7
Principe d’internet
8
Les DNS
 Comparaison avec des hôtels
 Un réseau est représenté par un hôtel
 Chaque chambre contient un site
 Le maitre d’hôtel possède un livre qui associe le nom
d’un client à son numéro de chambre
 On souhaite dire bonjour à google.com
 On se rend à l’hôtel .com
 On 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 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
Principe d’internet
 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 d’un réseau
 Un site doit être enregistré dans un DNS
11
Créer un site
 Solution 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
Aller sur
www.ici.net/index.html
Navigateur
Web
Index.html ?
Ordinateur
Client
Index.html
Qui est
www.ici.net
IP
123.123.321.321
Serveur Web
Ordinateur
Serveur (123.123.321.321)
13
Fonctionnement d’un 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
Une structuration des documents internet
15
HTML
 C’est un langage à balise
 Une commande est une balise

Généralement 2 balises : une ouvrante et une fermante
 Exemple :
Ceci est <i>un exemple</i> <b>simple</b>
 S’affichera dans le navigateur :
Ceci est un exemple simple
16
HTML
 Tout est balise
 La page affichée est une balise :
 <body> ... </body>
 Le titre affiché dans le navigateur est une balise :
<title> le titre </title>
 La mise en forme du texte
 Les liens hypertexte
 Les images
 …
17
HTML
 Une 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>un exemple <u>très</u></i> simple
 S’affichera dans le navigateur :
Ceci est un exemple très simple
18
Format d’une page HTML
 Une page HTML se construit toujours de la même
manière :
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
Contenu de la page
</body>
</html>
19
Standards HTML
 Il existe un grand nombre de standards HTML, il
faut donc déclarer au début du document quel
standard est utilisé.
 Je conseille d’utiliser celui là :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
...
</html>
20
Balises HTML
 Dans l’entête d’une feuille html, on définit
 le titre de la page

<title> titre de la page </title>
 quel encodage de caractères utiliser :

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"/>
 Optionnels :
 L’auteur :

<meta name="Author" lang="fr" content="Thibault LELORE"/>

Des mots-clefs :

<meta name="keywords" content="cours,HTML,IRIS,BTS"/>

Une description :

<meta name="description" content="petite description"/>
21
Balises HTML
 Dans l’entête d’une feuille html, on définit
 Optionnels :

Le copyright :
<meta name="copyright" content="ORT Marseille"/>

L’icone de la page:
<link rel="SHORTCUT ICON" href="http://www.ort.fr/fichier.ico"/>

La feuille de style associée (vu plus tard)
22
Balises HTML
 Dans le corps du document, on définit ce qui sera
affiché:
 Le titre : <h1></h1>
 Les sous titres : <h2></h2>…<h6></h6>
 Les paragraphes : <p></p>
 Les sauts de ligne : <br/>
 Quand il n’y a qu’une seule balise (br), il faut penser à
mettre un slash (/).
23
Balises HTML
 Les liens :
 La balise <a> … </a>
 Il y a plusieurs paramètres :
href="http://tibo.lelore.free.fr"
 Permet d’indiquer vers quoi pointe le lien
 name="nomLien"
 Permet de donner un nom à l’endroit de la page
 Pour faire par exemple un lien au milieu d’une page
<a href="http://tibo.lelore.free.fr"> mon site </a>
<a name="milieu"></a>
<a href="http://tibo.lelore.free.fr#milieu"> milieu
de mon site </a>

24
Balises HTML
 Les images :
 La balise <img/>
 Il y a plusieurs paramètres :
src="http://tibo.lelore.free.fr/img.jpg"
 Permet d’indiquer où se trouve l’image
 alt="petite description de l’image"
 Permet d’avoir un texte qui s’affiche si l’utilisateur ne veux pas
afficher les image
 width et height
 Permet de donner une taille (en pixels) de l’image
<img src="http://tibo.lelore.free.fr/img.jpg"
alt="description" width="10px" height="15px"/>

25
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Titre de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
</head>
<body>
<h1>Exemple de page HTML</h1>
<h2>Le premier titre !</h2>
<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>p</b></p>
<p> Ce second paragraphe montre que la structure du document est respectée.</p>
<h3>Le sous sous titre...</h3>
On va s'arrêter là... Au passage, ce texte ne fait partie d'aucune balise ! (à par body…)
</body>
</html>
26
Exemple
27
Comment rendre joli le moche…
28
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 l’extension .css
29
Le CSS
 C’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 style
30
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
Le CSS
 Il est possible de modifier beaucoup de choses :
 color : couleur du texte
 background : couleur de l’arriè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
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 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 HTML
 Une fois la feuille de style créée, comment l’utiliser :
<link rel="stylesheet" type="text/css" href="./style.css" />
 Cette balise doit se trouver entre les balises
<head></head>
 Le style de la page se mettra alors automatiquement à
jour.
34