CIM120 Http:// (Creation Web) Page 1
Organisation du module CIM120 Evaluation: 1 eval sur table 1 eval des TP Page 2
Le Web: un peu d'histoire D'Arpanet à Internet... http://fr.wikipedia.org/wiki/histoire_d'internet Les services sur Internet: MAIL, Transfert de fichiers,, Le World Wide Web http://fr.wikipedia.org/wiki/www Le W3C http://www.w3c.org http://validator.w3.org Page 3
Notion de clients et de serveurs Serveurs Web: Apache, IIS Clients Web: Internet Explorer, FireFox Mozilla, Opera, Safari, Chrome, Lynx,... Page 4
Protocole entre serveur/client Http Hyper Text Transfert protocole Page 5
Les langages du web Les 2 grandes familles: HTML XHTML Les versions des langages HTML 1, HTML 4.01 HTML 5 XHTML 1.0 XHTML 2.0 Les variantes Strict Transitionnal FrameSet Page 6
De La mise en forme html vers le html+css Au depart le html permettait de structurer et de mettre en forme l'information. Probleme: l'écriture et les modifications devenaient vite illisible Solution: Scinder la structuration (les blocs, paragraphe,...) et la mise en forme (couleur, positionnement,...) Html pour la structuration CSS pour la mise en forme Page 7
versions et fonctionnalités des navigateurs Les navigateurs et le HTML5... Taux de support HTML5 Chrome 5 61 % Firefox 3 61 % IE 8 31 % IE 9 44 % Opera 10 61 % Safari 5 61 % http://w3c.html5.free.fr/ Navigateurs et version CSS Page 8
Les objets d'une page web Texte Image (gif, jpg, png) Video, son ( >html 4) Objets gérés avec des plugins (Flash, video, son) Page 9
Les outils de mise en forme Outils editeur de texte simple (notepad,...) Outils éditeur de texte spécialisé (notepad+ +, Bluefish, simplecss,...) Outils d'édition de page Web WISIWIG (Dreamweaver, Nvu,...) Page 10
Mettre en forme une page Web Les balises HTML (et XHTML) < xxx >... < / xxx > < yyy / > La page de base html <!DOCTYPE html> <html> <head>... </head> <body>... </body> </html> Page 11
Mettre en forme une page Web Le DOCTYPE Permet de décrire le type de langage qui sera utilisé dans la page http://www.siteduzero.com/tutoriel-3-38586- choisir-le-bon-doctype.html Page 12
Mettre en forme une page Web Le CHARSET Permet de décrire la façon dont les caractères sont codés dans la page IS08859-1 ISO8859-15 UTF-8 http://www.alsacreations.com/astuce/lire/34 -charset-iso-8859-1-iso-8859-15-utf-8-lequel- choisir.html Page 13
Les balises de base <p> et </p> <h1> et </h1>, <h2> et </h2>... <br /> (ou <br> et </br> ) <a > et </a> <img /> (ou <img> et </img>) Page 14
Les attributs de balises Chaque balise a une liste d'attributs possibles Ex: <a href='mapage2.htm'> la suite </a> <a href='mapage2.html' target='_blank'> la suite </a> <p class='style1'> mon texte <p> Page 15
La gestion des images <img src='...' /> Le fichier image doit être dans le même dossier que le fichier html y faisant référence. (ou citez le chemin complet) Page 16
Héberger ses pages web Définir un serveur de page Web Sa propre machine Un hébergeur gratuit Un hébergeur payant SRC: 195.83.128.55 (src.iut-troyes.univ- reims.fr) Utiliser un client ftp pour faire le transfert ftp Tester les pages via un navigateur Page 17
Notion de tableau Même si l'utilisation de tableau tend à disparaître pour la mise en forme, ils sont toujours utilisés pour leur utilisation premiere (faire des tableaux!). <table> <tr> <td> nom </td><td> age </td></tr> <tr> <td> Bob </td><td> 22 </td></tr> <tr> <td> toto </td><td> 19 </td></tr> <tr> <td> titi </td><td> 20 </td></tr> </table> Page 18
Premiers pas avec les CSS Fichier mapage.html <!DOCTYPE Fichier mapage.html HTML PUBLIC "-//W3C/...-strict.dtd"> <HTML <!DOCTYPE lang="fr" HTML xmlns="http://www.w3.org/1999/xhtml" PUBLIC "-//W3C/...-strict.dtd"> xml:lang="fr"> <head> <HTML lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <title> <head> test</title> <meta <title> http-equiv="content-type" test</title> content="text/html; charset=utf-8"> <link <meta rel="stylesheet" http-equiv="content-type" type="text/css" href="monstyle.css"> content="text/html; charset=utf-8"> /head> <link rel="stylesheet" type="text/css" href="monstyle.css"> <body> /head> <h1> <body> Hello </h1> <p> au revoir </p> <p <h1> class='titre'>salut Hello </h1> <p> </p> au revoir </p> <p <p id='suivant'>bonjour class='titre'>salut </p> </p> <p <p class='titre'>salut id='suivant'>bonjour </p> </p> </body> <p class='titre'>salut </p> </html> </body> </html> Fichier monstyle.css #suivant Fichier { monstyle.css #suivant { color:#ff0000; text-decoration:underline; color:#ff0000; } text-decoration:underline; }.titre {.titre { color:#00ff00; background-color:#ffe86d; color:#00ff00; } background-color:#ffe86d; h1 { } h1 { color:#0000ff; } color:#0000ff; body { } body { color:#fffff; background-color:#111111; color:#fffff; } background-color:#111111; } Page 19
Liens utiles http://www.alsacreations.com http://validator.w3c.org http://www.w3c.org Page 20