Création de site internet
Comment marche internet ?
Comment marche internet ? En France
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 …
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 !
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 !
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
Principe d’internet
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))
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
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
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
Fonctionnement d’un serveur Aller sur www.ici.net/index.html Ordinateur Serveur (123.123.321.321) Ordinateur Client Navigateur Web Serveur Web Index.html ? Index.html IP 123.123.321.321 Qui est www.ici.net DNS
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
Le langage HTML Une structuration des documents internet
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
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 …
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
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>
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>
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"/>
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)
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 (/).
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>
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"/>
<. DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1 <!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>
Exemple
Les feuilles de style Comment rendre joli le moche…
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
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
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 !) …
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…) !
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;
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.