Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Création de site internet
2
Comment marche internet ?
3
Comment marche internet ?
En France
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 …
5
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 !
6
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 !
7
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
8
Principe d’internet
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 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 ) On va à la chambre (en demandant notre chemin aux grooms (les routeurs))
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
11
Principe d’internet Conclusion Conclusion bis
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
12
Créer un site Solution complexe Solution simple :
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
13
Fonctionnement d’un serveur
Aller sur Ordinateur Serveur ( ) Ordinateur Client Navigateur Web Serveur Web Index.html ? Index.html IP Qui est DNS
14
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
15
Le langage HTML Une structuration des documents internet
16
HTML C’est un langage à balise Une commande est une balise Exemple :
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
17
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 …
18
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
19
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>
20
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" " <html> ... </html>
21
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 "/> 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"/>
22
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=" La feuille de style associée (vu plus tard)
23
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 (/).
24
Balises HTML Les liens : La balise <a> … </a>
Il y a plusieurs paramètres : href=" 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=" mon site </a> <a name="milieu"></a> <a href=" milieu de mon site </a>
25
Balises HTML Les images : La balise <img/>
Il y a plusieurs paramètres : src=" 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=" alt="description" width="10px" height="15px"/>
26
<. DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <html> <head> <title>Titre de la page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "/> </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>
27
Exemple
28
Les feuilles de style Comment rendre joli le moche…
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 l’extension .css
30
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
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 !) …
32
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…) !
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 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;
34
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.
Présentations similaires
