CIM (Creation Web) Page 1

Dimension: px

Commencer à balayer dès la page:

Download "CIM120. Http:// (Creation Web) Page 1"

Camille Doré
il y a 8 ans
Total affichages :

1 CIM120 (Creation Web) Page 1

2 Organisation du module CIM120 Evaluation: 1 eval sur table 1 eval des TP Page 2

3 Le Web: un peu d'histoire D'Arpanet à Internet... Les services sur Internet: MAIL, Transfert de fichiers,, Le World Wide Web Le W3C Page 3

org/wiki/histoire_d'internet Les services sur Internet: MAIL,

4 Notion de clients et de serveurs Serveurs Web: Apache, IIS Clients Web: Internet Explorer, FireFox Mozilla, Opera, Safari, Chrome, Lynx,... Page 4

5 Protocole entre serveur/client Http Hyper Text Transfert protocole Page 5

6 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

7 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

Probleme: l'écriture et les modifications devenaient vite illisible Solution: Scinder la

8 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 % Safari 5 61 % Navigateurs et version CSS Page 8

9 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

10 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

11 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

12 Mettre en forme une page Web Le DOCTYPE Permet de décrire le type de langage qui sera utilisé dans la page choisir-le-bon-doctype.html Page 12

13 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 IS ISO UTF-8 -charset-iso iso utf-8-lequel- choisir.html Page 13

ISO8859-15 UTF-8 http://www.alsacreations.

14 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

15 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

16 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

17 Héberger ses pages web Définir un serveur de page Web Sa propre machine Un hébergeur gratuit Un hébergeur payant SRC: (src.iut-troyes.univ- reims.fr) Utiliser un client ftp pour faire le transfert ftp Tester les pages via un navigateur Page 17

18 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

<table> <tr> <td> nom </td><td> age </td></tr> <tr> <td> Bob </td><td> 22 </td></tr>

19 Premiers pas avec les CSS Fichier mapage.html <!DOCTYPE Fichier mapage.html HTML PUBLIC "-//W3C/...-strict.dtd"> <HTML <!DOCTYPE lang="fr" HTML xmlns=" PUBLIC "-//W3C/...-strict.dtd"> xml:lang="fr"> <head> <HTML lang="fr" xmlns=" 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

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"

20 Liens utiles Page 20

Documents pareils

Les outils de création de sites web

Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site