101 Réaliser et publier un site WEB Rapport personnel de module EMF - Section informatique John Baudin Module du.2008 au.2008
Table des matières 1 Introduction... 1 2 Le XHTML... 1 2.1 Les balises... 1 2.1.1 Introduction... 1 2.1.2 Les paragraphes, les titres, les retours à la ligne... 1 2.1.3 Donner de l'importance à une suite de caractères... 2 2.2 Les attributs... 2 3 Le CSS... 2 3.1 C'est quoi le CSS... 2 3.2 Où le mettre?... 2 3.3 éléments dans la feuille... 3 3.4 Les propriétés utiles... 3 4 Préparation d images pour le WEB... 4 4.1 Quelques sortes de formats d'images... 4 4.1.1 JPEG... 4 4.1.2 GIF... 4 4.2 Comment mettre l'image dans le site... 4 4.2.1 Dans la page XHTML... 4 4.2.2 Dans la page CSS... 4 5 Les liens, la liste, le tableau et les blocs... 5 5.1 Les liens... 5 5.1.1 Lien vers une page d'un autre site... 5 5.1.2 Lien vers une page de notre site... 5 5.2 Les divisions... 5 5.2.1 Transformation Inline Bloc... 5 5.2.2 La taille... 5 5.2.3 Les bordures... 5 5.2.4 Les marges... 6 5.2.5 Faire flotter une div... 6 5.2.6 Positionner une (absolu, fixe et relatif)... 6 Absolu (absolute)... 6 Fixe (fixed)... 6 Relatif (relative)... 6 Où sera-t-elle positionner... 6 6 Validation des pages... 7 6.1 Introduction... 7 7 Structure et navigation... 8 7.1 C'est quoi un navigateur Web... 8 7.2 Internet Exploreur 7... 8 7.3 Mozilla Firefox... 8 Table des matières I
7.4 Ex: faire une bannière Web en gif... 8 7.4.1 Donnée... 8 7.4.2 Maquette... 8 7.4.3 Réalisation... 9 a) Nouveau document... 9 b) Les calques... 9 c) Enregistrer une image.gif... 9 7.4.4 Bilan synthèse... 10 7.5 Ex bouton flash... 10 7.5.1 Donnée... 10 7.5.2 Maquette... 10 7.5.3 Réalisation... 10 7.5.4 Bilan synthèse... 11 7.6 Exercice mon CV... 11 7.6.1 Donnée... 11 7.6.2 Maquette... 11 7.6.3 Le code Xhtml... 11 7.6.4 Code du CSS... 12 7.6.5 Bilan synthèse... 13 7.7 Ex image carte... 13 7.7.1 Donnée... 13 7.7.2 Maquette... 13 7.7.3 Réalisation... 13 7.7.4 Bilan synthèse... 13 7.8 Ex : menu CSS... 13 7.8.1 Donnée... 13 7.8.2 Maquette... 13 7.8.3 Réalisation... 14 7.8.4 Bilan synthèse... 14 7.9 Ex: corriger une boîte flottante avec spacer... 14 7.9.1 Donnée... 14 7.9.2 Maquette... 15 7.9.3 Réalisation... 15 7.9.4 Bilan synthèse... 16 7.10 Ex page à trois colonnes... 16 7.10.1 Donnée... 16 7.10.2 Maquette... 16 7.10.3 Réalisation... 16 7.10.4 Bilan synthèse... 18 7.11 Ex formulaire... 18 7.11.1 Donnée... 18 7.11.2 Maquette... 18 7.11.3 Réalisation... 18 a) Code... 18 b) Explication des balises... 20 7.11.4 Bilan synthèse... 20 8 Conclusion... 20 Table des matières II
1 Introduction Je viens de commencer le module 101 dans lequel nous allons apprendre à faire et à publier un site WEB. Avant d'arriver à ce module j'avais déjà fait un "site": un blog Mais ce qu'on va faire ce n'est pas du tout la même chose. Dans le cadre du module nous ferons des sites en XHTML tout en utilisant le CSS. Je ne m'y connais pas du tout en site mais je compte bien me lancer à fond dans ce module pour en apprendre le plus possible. 2 Le XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>bienvenue sur mon site</title> </head> <body> /* Rappel:c'est ici qu'on écrit le contenu de notre page web*/ </body> </html> <!DOCTYPE> <html> </html> <head> </head> <title> </title> <body></body> /*commentaire*/ indication que cette page sera une page en XHTML ce sont les balises principales de la page informations qui sont en en-tête entre ces balises il y a le titre de la page web c'est entre ces balises qu'on va taper le contenu de notre site le commentaire ne sera pas affiché sur le site car il n'est pas interprété par le navigateur 2.1 Les balises 2.1.1 Introduction Une balise commence toujours par "<" et se finit toujours par ">". Il y a deux sortes de balises : Les balises paires Elles commencent par < balise> et se finit par </ balise> Les balises seules Elles sont plus rares que les balises paires et elles s'écrivent comme ça : <balise/> 2.1.2 Les paragraphes, les titres, les retours à la ligne Les paragraphes La balise pour faire des paragraphes est <p> blabla </p> 101 Réaliser et publier un site WEB Page 1 sur 21
Les titres La balise de titre varie selon l'importance du titre elle va de <h1> Le titre le plus important </h1>..à. <h6> Le titre le moins important </h6> Le titre est obligé d'être dehors d'un paragraphe Les retours à la ligne La balise pour faire des retours à la ligne c'est On est obligé de la mettre dans un paragraphe. 2.1.3 Donner de l'importance à une suite de caractères <br/> Il existe plusieurs balises possibles pour mettre une suite de caractères en évidence (tout dépend de ce qu'on veut) En italique En gras En exposant En indice 2.2 Les attributs <em> mot en italique </em> <strong> mot en gras </strong> <sup> mot en exposant </sup> <sub> mot en indice </sub> Les attributs permettent de donner des précisions sur les balises. Exemple : si on insère une image avec la balise <img />. Cool on dit qu'on met une image mais l'ordinateur lui ne sait pas laquelle on va mettre donc on est obligé de préciser son emplacement. Ex: <img src="rootdir/multimedia/lim.jpg"> 3 Le CSS 3.1 C'est quoi le CSS Le CSS est un langage pour faire tout ce qui est design de notre site. On reprend toutes les balises pour donner des propriétés (police, fond, taille, ) et à ces propriétés on leur donne des valeurs (la police se sera du Arial, la taille sera de 12px, ). On va donc pouvoir créer facilement et simplement la mise en page du site. 3.2 Où le mettre? Il y a deux endroits où on peut mettre le CSS (trois en fait mais le troisième endroit n'est pas accepté en XHTLM strict). Dans un fichier.css Quand on le met dans un fichier.css il faut pas oublier de mettre un lien dans la feuille XHTML pour indiquer qu'il prendra le style de la feuille.css. Le lien est celui-ci: <link rel="stylesheet" media="screen" type="text/css" title="design" href="entrez le nom de la feuille ici" /> 101 Réaliser et publier un site WEB Page 2 sur 21
Dans la feuille XHTML Pour ce dernier il faut le mettre dans la balise <head> puis dans la balise <style type="text/css"> Ex: <head> <style type="text/css"> le contenu de la page CSS se trouve ici </style> </head> Nous allons le mettre dans une feuille séparé. Ainsi tous le CSS de notre site sera dans la même page. Ce qui fera que ainsi l ordinateur n aura besoin de charger le CSS qu une seul fois. 3.3 éléments dans la feuille Comme je le disais la feuille aura plusieurs éléments Ex: Les balises (les mêmes que dans la feuille XHTML) Les propriétés (ce qu'on veut modifier dans la feuille) Les valeurs (précision sur les propriétés) Balise{ p{ Propriété : valeurs ; text-align:center ; 3.4 Les propriétés utiles Texte Sorte de police Taille du texte En gras En Italique Tous en un {font-family: police1,police2, ; {font-size:indiquez la taille du texte en % ou en em; {font-weight:bold; {font-style:italic; {font: valeurs ci-dessus dans n'importe quel ordre entre virgule; Alignement du texte horizontalement A droite Centré Justifié Couleur Couleur de fond {text-align:right; {text-align:center; {text-align: justify; {color: méthode rgb ou méthode hexa ou méthode décimal; {background-color: méthode rgb ou méthode hexa ou méthode décimal; 101 Réaliser et publier un site WEB Page 3 sur 21
Image de fond {background-image: url de l'image Image de fond fixe {background-attachement : fixed ; Ex: {background-image:url("rootdir/multimedia/fond.png";) Décoration (lien) Décoration {text-decoration:underline (souligné) ; blink (clignotant) ; Attention le blink ne fonctionne pas sur le navigateur IE7 Autres Faire disparaître une balise {display:none; 4 Préparation d images pour le WEB 4.1 Quelques sortes de formats d'images 4.1.1 JPEG JPEG est un format d'image très répandu. Il est bien adapté pour les photos. 4.1.2 GIF Ce format est très vieux mais il est encore utilisé par beaucoup de gens. Le seul avantage à utiliser le format.gif c'est qu'il peut être animé. 4.2 Comment mettre l'image dans le site 4.2.1 Dans la page XHTML <div class="image"> <img src="situation de l'image " /> </div> src : donne le lien où se situe l'image 4.2.2 Dans la page CSS.image{ float:left; width:20%; float : left; place l'image dans le texte à gauche widht : 20% ; arrange la grandeur de l'image à 20% 101 Réaliser et publier un site WEB Page 4 sur 21
5 Les liens, la liste, le tableau et les blocs La liste et le tableau sont des blocs donc pas besoin de les mettre dans un paragraphe contrairement au lien. 5.1 Les liens 5.1.1 Lien vers une page d'un autre site Un lien vers un autre site s'appelle aussi un lien absolu <a href="http:// le site voulu.com">le nom du site</a> 5.1.2 Lien vers une page de notre site Un lien vers un page de son propre site s'appelle aussi un lien relatif Il y a plusieurs sortes: Normal: Dans un sous-dossier Vers un titre <a href= "fichier.html">le nom du ficher</a> <a href= "dossier/fichier.html">le nom du ficher</a> <a href="#ancre">nom du titre</a> Ne pas oublier de mettre dans le titre : <h3 id="ancre"> nom du titre </h3> Vers un titre d'une autre page <a href="fichier.html#le titre">nom titre</a> Pour la bulle d'aide il suffit d'ajouter dans la balise <a> un title="texte d'aide" <a href= "fichier.html" title= " Ceci est un lien" > Le nom du ficher</a> 5.2 Les divisions 5.2.1 Transformation Inline Bloc Balise(inline){ display: block; Balise (block){ display: inline; On peut mettre aussi la balise <div> Mon block </div> 5.2.2 La taille La largeur de la div { widht : la valeur en px ; La hauteur de la div { height : la valeur en px ; Barres de défilement si trop grand { owerflow : scroll ; Barres de défilement automatiquement { owerflow : auto ; 5.2.3 Les bordures Bordure normale noire {border: 1px solid black Bordure 3d noire { border: 1px ridge black Bordure double noire { border: 1px double black 101 Réaliser et publier un site WEB Page 5 sur 21
5.2.4 Les marges Marge en haut { margin-top : valeur en px, em, ; Marge en bas { margin-bottom: valeur ; Marge à gauche { margin-left: valeur ; Marge à droite { margin-right: valeur ; Marge entre les div {margin: marge du haut, marge de droite, marge du bas,marge de gauche ; La marge dans la div { padding: indem que margin ; 5.2.5 Faire flotter une div On peut faire facilement faire flotter un block grâce à la propriété float Ex : Faire flotter à gauche {float : left ; Stopper un flottant {clear: both ; 5.2.6 Positionner une (absolu, fixe et relatif) Pour les positionnements de div on doit tout d'abord noter comment on veut le positionner puis où on va le positionner sur la page. Absolu (absolute) Le positionnement absolu nous permet de mettre la div où on veut sur la page web. Sorte de positionnement {position : absolute Fixe (fixed) Le positionnement fixe est pareil au positionnement absolu sauf que celui-ci reste sur la fenêtre même si on descend plus bas dans la page. Sorte de positionnement {position : fixed Relatif (relative) Le positionnement fixe pour déplacer une div par rapport à sa position normale. Sorte de positionnement {position : relative Où sera-t-elle positionner Par rapport au haut de la page Par rapport à la droite de la page Par rapport à la gauche de la page Par rapport au bas de la page {top : valeur en em {right : valeur en em {left : valeur en em {bottom : valeur en em 101 Réaliser et publier un site WEB Page 6 sur 21
6 Validation des pages 6.1 Introduction Quand nous faisons une page nous voudrions que tout marche comme nous le voulons. Que la page s'affiche comme on le souhaite est une bonne chose mais il faut encore qu'elle suive certaines conventions. C'est pourquoi il existe des sites pour vérifier si nos pages sont dans les normes. En classe nous utilisons un module de firefox. WEB DEVELOPERc est une module téléchargeable de firefox. Avec ce module nous pouvons non seulement vérifier notre code HTML mais également notre CSS On peut aussi utiliser le system de validation du DremWeaver. Allez dans outils puis sous les modules complémentaires " Cette fenetre apparaitra. Pour le télécharger allez sous catalogue et entre «Web Developer. Installez le et voila, vous pourrez corriger votre site 101 Réaliser et publier un site WEB Page 7 sur 21
Grâce à "parcourir" on peut aller chercher notre page à valider Encodage : suivant l'endroit ou on habite les caractères, les valeurs, ne sont pas les mêmes alors on doit préciser. Docdiong : on précise le niveau de tolérance de la correction Puis on valide... 7 Structure et navigation 7.1 C'est quoi un navigateur Web Un navigateur web est un programme qui permet de lire le langage codé qui forme les sites (html, xhtml, ) ensuite il affiche ce que le code représente. 7.2 Internet Exploreur 7 Microsoft a enfin mis à jour IE 6 en sortant IE 7. Sortie le 8 octobre 2006 (beta), la nouvelle version d'ie répond à la concurrence. Elle implémente une grande partie du CSS et gère la transparence du PNG tout en renforçant la sécurité du logiciel. IE7 intègre un filtre anti-phishing qui permet de vérifier si le site qu'on visite n'est pas sur la liste noire de sites web falsifiés. 7.3 Mozilla Firefox Mozilla Firefox est le deuxième navigateur le plus utilisé. Il est gratuit et mis à jour par des bénévoles. Il gère très bien le CSS et le XHTML. 7.4 Ex: faire une bannière Web en gif 7.4.1 Donnée Dans cet exercice on devait faire une bannière en image gif. Pour réussir cet exercice il faut utiliser le programme ImageReady. 7.4.2 Maquette Une bannière web ressemble à ceci bien évidement elle est animée. (La grandeur 860px sur 140px est universelle). 101 Réaliser et publier un site WEB Page 8 sur 21
7.4.3 Réalisation a) Nouveau document b) Les calques Ensuite on créer chaque image qu on modifie par la suite pour faire une sorte de mini film. Chaque calque est une image différente. Pour chaque calque on choisit de mettre (ou pas) les calques précédents puis on fait l animation selon nos envies. (Pour afficher l animation : fenêtre animation) c) Enregistrer une image.gif Une fois votre bannière terminée, pour l enregistrer en fichier.gif, vous devez faire un enregistrement optimisé : 101 Réaliser et publier un site WEB Page 9 sur 21
7.4.4 Bilan synthèse Dans l'exercice il fallait bien maîtriser l'animation. Ce n'est pas difficile mais il faut bien comprendre le système avec les yeux : si il y a "l'œil", le calque est superposé sur celui d'avant. 7.5 Ex bouton flash 7.5.1 Donnée Dans cet exercice on devait faire un bouton flash qui changeait (si on n'est pas dessus, si on est dessus, si on clique dessus) 7.5.2 Maquette Bouton inactif : Bouton actif Bouton clic : 7.5.3 Réalisation Tout d'abord on doit créer ses trois images avec Photoshop. Puis on importe dans la bibliothèque du programme flash, les images. Ensuite on met quel bouton on veut dans haut, dessus, abaissé. 101 Réaliser et publier un site WEB Page 10 sur 21
Pour mettre le lien dans le bouton il faut aller dans fenêtre : action. Puis on tape le code suivant. on(press){ geturl("http://www.lesite.com"); Et pour finir on exporte l'animation et on le met dans notre site voici le code <p> <object type="application/x-shockwave-flash" data="nomdufichier.swf" width="150" height="35"> <param name="play" value="true" /> <param name="movie" value="accueil.swf" /> <param name="menu" value="true" /> <param name="quality" value="high" /> <param name="scalemode" value="noborder" /> <p> Texte de remplacement </p> </object></p> 7.5.4 Bilan synthèse Je trouve que quand on fait un bouton flash comme celui-ci ça prend pas mal de temps mais à la fin on peut avoir des résultats superbes. Il ne faut pas oublier qu'on peut déjà prendre des boutons tout faits sur flash mais on a un choix limité et il n'y a jamais exactement ce qu on veut. 7.6 Exercice mon CV 7.6.1 Donnée Dans cet exercice nous devions faire notre CV avec une photo dans le tableau mais notre photo devait être collée contre les bords et être insérée dans un tableau. 7.6.2 Maquette 7.6.3 Le code Xhtml <table> <tr> Pour le code Xhtml je mets que le tableau car c'est le plus intéressant- </tr> <tr> </tr> <tr> <td rowspan="4" class="img1"> <img class="img1" src="image/butty_lucas.jpg" alt="moi"/> </td> <td class="td1">nom :</td> <td class="td2" >Butty</td> <td class="td1">prénom : </td> <td class="td2" >Lucas </td> <td class="td1">date de <br/>naissance : </td> <td class="td2">1.06.1991</td> 101 Réaliser et publier un site WEB Page 11 sur 21
</tr> <tr> </tr> </table> <td class="td1"> Domicile : </td> <td class="td2">estavayer-le-lac</td> 7.6.4 Code du CSS body{ margin: 0px; background-color:#00ff66; color:#000000; text-align:center; //obliger pour coller la page en haut #page{ border: 0px solid black; background-color:#ffcc00; padding:1em; margin:10em; margin-top:0em; table{ border-collapse:collapse; border:1px solid #000000; width:80%;.img1{.img2 {.td{.td2{.td1{ margin:auto; width:8em; vertical-align:middle; padding:0px; width: 20em; float:right; margin:1em; text-align:left; border-collapse:collapse; border:1px solid #000000; width:70%; padding: 0.5em ; font-weight:bold; width:30%; padding:0.5em; //obliger pour coller la page en haut // le tableau prendra 805 de la page //centre l'image //suprime le padding // le width du td1 + le width du td2 = 100% donc l'image prendra la place qui reste p{ text-align:justify; 101 Réaliser et publier un site WEB Page 12 sur 21
7.6.5 Bilan synthèse Il est difficile d'annuler complètement la marge de pixels autour de l'image il faut y aller point par point et ne pas se lancer à fond sans bien comprendre la donnée. 7.7 Ex image carte 7.7.1 Donnée Dans cet exercice on devait créer une image qui avait des liens certains endroits. 7.7.2 Maquette Ex: si je clique dans un des carrés (on ne les vois pas sur le site) ça nous envoie sur une page qui présente la personne sélectionnée. 7.7.3 Réalisation Pour faire une image carte ce n'est pas dur car nous avons sur DremWear un outil qui le fait très bien : On sélectionne les zones qui seront des liens Puis on fait click droit lien 7.7.4 Bilan synthèse Grâce au programme DremWear c'est facile de faire une image carte mais sans ce programme il faut taper un code 4-5 lignes 7.8 Ex : menu CSS 7.8.1 Donnée Nous devions faire un menu qui a des éléments qui changent quand on passe dessus tout ça grâce au CSS 7.8.2 Maquette 101 Réaliser et publier un site WEB Page 13 sur 21
7.8.3 Réalisation Tout d'abord il faut faire une image de par exemples 6Opx de hauteur XHTML <ul id="menu"> <li><a href="#">item n 1</a></li> <li><a href="#">item n 2</a></li> <li><a href="#">item n 3</a></li> </ul> CSS ul#menu li a{ display:block; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */ width:170px; line-height:30px; font-weight:bold; text-indent:40px; /* On décale le texte de 40px du bord gauche */ text-decoration:none; background:url(endroit ou il y l image) no-repeat 0 0; /* On met une image en background, que l'on positionne à 0px du bord gauche et 0px du bord haut */ border:1px solid #fa7979; ul#menu li a:hover{ background:url(endroit ou il y l image) no-repeat 0-30px; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */ border:1px solid #76ade0; 7.8.4 Bilan synthèse Ce qui assez bien quand on fait un menu CSS on donne beaucoup de style au menu et contrairement aux boutons flash il ne faut qu'une image. 7.9 Ex: corriger une boîte flottante avec spacer 7.9.1 Donnée Dans cet exercice on devait une correction d'esthétique. 101 Réaliser et publier un site WEB Page 14 sur 21
7.9.2 Maquette 7.9.3 Réalisation <html xmlns="http://www.w3.org/1999/xhtml"> <!--Lucas Butty le 8 novembre 2005--> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>boîte flottante</title> <style type="text/css"> #vert{ background-color:#00ff33; #jaune{ margin:0px; margin-right:0px; background-color:#ffff66; float:right; width:20%; #spacer{clear:both // annule le float p{ padding:1em; </style> </head> <body> <div id="vert"> <p id="jaune"> plus grand paragraphe de 20% de la largeur de la fenêtre plus grand paragraphe de 20% de la largeur de la fenêtre </p> <p > Les informaticiens et informaticiennes développent, à partir de spécifications fonctionnelles définies au préalable, </p> <div id="spacer">   </div> //  = espace (obligatoire) </div> </body> 101 Réaliser et publier un site WEB Page 15 sur 21
</html> 7.9.4 Bilan synthèse Pour cet exercice je vais retenir que   = espace et que pour annuler un float il faut utiliser {clear:both 7.10 Ex page à trois colonnes 7.10.1 Donnée Dans cet exercice nous devions disposer plusieurs conteneurs sur la page pour que ceux-ci soient jolis à voir. 7.10.2 Maquette 7.10.3 Réalisation Je vous présente que le Css car c'est le plus important body{ font-family:veranda, sertif; background-color:#33ffcc; margin:0px; // obliger pour coller la page en haut div{ padding:0px; margin:0px; border:0px; #conteneur{ background-color:#ffffff; width:75%; margin:auto; margin-top:0px; // obliger pour coller la page en haut 101 Réaliser et publier un site WEB Page 16 sur 21
h1{ h3{ border:1px solid black; text-align:center; margin-left:1em; p{ margin:1em; #entete{ margin:1em; #droite{ float:right; #milieu{ border:1px solid black; margin:0.7em; width:14%; margin:auto; width:54%; #gauche{ margin:0px; margin-left:0.7em; padding-left:0px; border:1px solid black; background-color:#ccff99; #pied{ // permet de faire fotter l'image à droite // centre le block float:left; // permet de faire fotter le menu à gauche list-style-type: none ; // suprime les puces de la liste width:18%; li{ list-style-type: none ; li a{ text-decoration:none; color:#ff0000; li a:hover{ color:#00cc33; text-decoration:underline; img{ margin-left:0.7em; width:6em; #df{ text-align:center;.spacer{ clear:both; height:1px; font-size:1px; border:none; background:transparent; // quand la souris passe dessus il fait les modification 101 Réaliser et publier un site WEB Page 17 sur 21
7.10.4 Bilan synthèse Faire le design de son site est assez difficile il ne faut pas abuser du Css et vouloir mettre tous ce qui existe dans la page. Des fois il faut savoir rester simple. La notion la plus importante dans cet exercice est de savoir comment coller la page en haut (il ne faut pas oublier de mettre dans le "body" que la marge est égale à 0 et que dans le conteneur de la page la marge du haut est aussi égale à 0). 7.11 Ex formulaire 7.11.1 Donnée Pour l'exercice des formulaires nous devions analyser la signification de chaque balise du formulaire 7.11.2 Maquette 7.11.3 Réalisation Css a) Code body{ margin:0em; background-color:gray; #page{ margin-top:0em; margin:auto; margin-left:3em; margin-right:3em; paddin g-left:1em; padding-top:2em; padding-bottom:2em; background:yellow; #boutoncentrer{ //suprime la marge du haut //suprime la marge du haut 101 Réaliser et publier un site WEB Page 18 sur 21
width:auto; text-align:center; </style> Xhtml // centre les boutons </head> <body> <div id="page"> <form action="mailto:buttyl@studentfr.ch"> //envoie le mail à l'adresse <p>nom : <input type="text" name="text1" id="text1" size="30"/> </p> <p>mot de passe : <input type="password" name="psw1" size="10"/> // zone de texte </p> <p>email : <textarea name="text2" rows="10" cols="40"></textarea> // zone de texte </p> <p>vos bois préférés :<br/> <input type="checkbox" name="bois" value="cerisier" checked="checked"/> Cerisier<br/> <input type="checkbox" name="bois" value="érable" checked="checked"/> Erable<br/> <input type="checkbox" name="bois" value="chêne" checked="nochecked"/> Chêne</p> <p>votre couleur préférée :<br/> <input type="radio" name="couleur" value="bleu" checked="checked"/> Bleu<br/> <input type="radio" name="couleur" value="vert"/> Vert<br/> <input type="radio" name="couleur" value="rouge"/> Rouge</p> <p>choisir un outil :<br/> <select name="outils"> <option value="1">marteau</option> <option value="2" selected="selected">tournevis</option> <option value="3">perceuse</option> </select> </p> <p>votre animal préféré :<br/> <select name="animaux" multiple="multiple" size="3"> <option value="a">chien</option> <option value="b" selected="selected">chat</option> <option value="c">lapin</option> </select> </p> <div id="boutoncentrer"> <p> <input type="reset" name="effacer" value="effacer"/> </p> <p> <input type="submit" name="envoyer" value="envoyer"/> </p> </form> </div> </div> </body> 101 Réaliser et publier un site WEB Page 19 sur 21
b) Explication des balises <from > </from> le contenu sera dans ces balises <form id="monform" enctype="text/plain" action="mailto:buttyl@studentfr.ch?subject=envoi automatique" method="post" > Zone de texte <input type=" le type " name="le nom" value="se qu'on veut" /> Sorte de type : type="text" type="password" type="checkbox" type="radio" type="submit" type="reset" zone de texte sur une ligne texte caché (mot de passe) bouton radio bouton d'option bouton envoyer remise à zéro On peut aussi mettre une valeur par défaut <input type="radio" name="couleur" value="bleu" checked="checked"/> <textarea rows="nbr lignes" cols="nbr colonnes"> </textarea> Barre déroulement <select name="ce qu'on veut" > </select> <option value="france">france</option> <option value="espagne">espagne</option> <option value="italie">italie</option> On peut ajouter la taille de la barre dans la balise d'ouverture <select name="ce qu'on veut" multiple="multiple" size "nbr lignes" > On peut aussi mettre une valeur par défaut <option value="b" selected="selected">chat</option> zone de texte (présiser nbr de ligne et de colonne balise d'ouverture contenu contenu contenu fermeture de la balise 7.11.4 Bilan synthèse Le formulaire est assez intéressant à mettre dans un site mais comme on n'utilise pas le PHP son utilisation est limitée par exemple on ne peut pas utiliser dans la balise <from> la méthode get (method="get") on est obliger d'utilisé méthode post (method="post"). Ex : <form enctype="text/plain" action="mailto:buttyl@studentfr.ch?subject=envoi automatique" method="post" > 8 Conclusion Quand je suis arrivé à ce module je pensais que tout ce qui était Xhtml, Css serait très compliqué et que j allais être complètement largué mais au fur et à mesure que j avançais dans le module je me suis rendu compte que tout ce qui était compliqué pour moi au début devenait simple et évident. 101 Réaliser et publier un site WEB Page 20 sur 21
J ai eu beaucoup de plaisir à faire ce module. C est beaucoup plus simple d apprendre quand on a du plaisir a le faire 101 Réaliser et publier un site WEB Page 21 sur 21