• Aucun résultat trouvé

101 Réaliser et publier un site WEB

N/A
N/A
Protected

Academic year: 2022

Partager "101 Réaliser et publier un site WEB"

Copied!
24
0
0

Texte intégral

(1)

101 – Réaliser et publier un site WEB

Rapport personnel de module

EMF - Section informatique John Baudin

Module du .2008 au .2008

(2)

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

(3)

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

(4)

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> indication que cette page sera une page en XHTML

<html> </html> ce sont les balises principales de la page

<head> </head> informations qui sont en en-tête

<title> </title> entre ces balises il y a le titre de la page web

<body></body> c'est entre ces balises qu'on va taper le contenu de notre site /*commentaire*/ 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>

(5)

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 <br/>

On est obligé de la mettre dans un paragraphe.

2.1.3 Donner de l'importance à une suite de caractères

Il existe plusieurs balises possibles pour mettre une suite de caractères en évidence (tout dépend de ce qu'on veut)

En italique <em> mot en italique </em>

En gras <strong> mot en gras </strong>

En exposant <sup> mot en exposant </sup>

En indice <sub> mot en indice </sub>

2.2 Les attributs

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" />

(6)

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 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)

Ex:

Balise{ p{

Propriété : valeurs ; text-align:center ;

} }

3.4 Les propriétés utiles

Texte

Sorte de police {font-family: police1,police2,…;}

Taille du texte {font-size:Indiquez la taille du texte en % ou en em;}

En gras {font-weight:bold;}

En Italique {font-style:italic;}

Tous en un {font: valeurs ci-dessus dans n'importe quel ordre entre virgule;}

Alignement du texte horizontalement

A droite {text-align:right;}

Centré {text-align:center;}

Justifié {text-align: justify;}

Couleur {color: méthode rgb ou méthode hexa ou méthode décimal;}

Couleur de fond {background-color: méthode rgb ou méthode hexa ou méthode décimal;}

(7)

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%

(8)

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: <a href= "fichier.html">Le nom du ficher</a>

Dans un sous-dossier <a href= "dossier/fichier.html">Le nom du ficher</a>

Vers un titre <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){ Balise (block){

display: 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 }

(9)

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 {top : valeur en em}

Par rapport à la droite de la page {right : valeur en em}

Par rapport à la gauche de la page {left : valeur en em}

Par rapport au bas de la page {bottom : valeur en em}

(10)

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

(11)

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).

(12)

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é :

(13)

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

(14)

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

Pour le code Xhtml je mets que le tableau car c'est le plus intéressant-

<table>

<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>

</tr>

<tr>

<td class="td1">Pr&eacute;nom : </td>

<td class="td2" >Lucas </td>

</tr>

<tr>

<td class="td1">Date de <br/>naissance : </td>

<td class="td2">1.06.1991</td>

(15)

</tr>

<tr>

<td class="td1"> Domicile : </td>

<td class="td2">Estavayer-le-lac</td>

</tr>

</table>

7.6.4 Code du CSS

body{

margin: 0px; //obliger pour coller la page en haut

background-color:#00FF66;

color:#000000;

text-align:center;

}

#page{

border: 0px solid black;

background-color:#FFCC00;

padding:1em;

margin:10em;

margin-top:0em; //obliger pour coller la page en haut }

table{

border-collapse:collapse;

border:1px solid #000000;

width:80%; // le tableau prendra 805 de la page

margin:auto;

} .img1{

width:8em;

vertical-align:middle; //centre l'image

padding:0px; //suprime le padding

}

.img2 {

width: 20em;

float:right;

margin:1em;

} .td{

text-align:left;

border-collapse:collapse;

border:1px solid #000000;

} .td2{

width:70%;

padding: 0.5em ; }

.td1{

font-weight:bold;

width:30%;

padding:0.5em;

}

// le width du td1 + le width du td2 = 100% donc l'image prendra la place qui reste

p{

text-align:justify;

(16)

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

(17)

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.

(18)

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"> &nbsp </div> //&nbsp = espace (obligatoire)

</div>

</body>

(19)

</html>

7.9.4 Bilan synthèse

Pour cet exercice je vais retenir que &nbsp = 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;

(20)

border:1px solid black;

} h1{

text-align:center;

} h3{

margin-left:1em;

} p{

margin:1em;

}

#entete{

margin:1em;

}

#droite{

float:right; // permet de faire fotter l'image à droite border:1px solid black;

margin:0.7em;

width:14%;

}

#milieu{

margin:auto; // centre le block

width:54%;

}

#gauche{

margin:0px;

margin-left:0.7em;

padding-left:0px;

border:1px solid black;

background-color:#CCFF99;

float:left; // permet de faire fotter le menu à gauche list-style-type: none ; // suprime les puces de la liste width:18%;

}

#pied{

} li{

list-style-type: none ; }

li a{

text-decoration:none;

color:#FF0000;

}

li a:hover{ // quand la souris passe

color:#00CC33; dessus il fait les modification

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;}

(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 a) Code

Css

body{

margin:0em; //suprime la marge du haut

background-color:gray;

}

#page{

margin-top:0em; //suprime la marge du haut

margin:auto;

margin-left:3em;

margin-right:3em;

paddin g-left:1em;

padding-top:2em;

padding-bottom:2em;

(22)

width:auto;

text-align:center;} // centre les boutons

</style>

Xhtml

</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>

(23)

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" zone de texte sur une ligne type="password" texte caché (mot de passe) type="checkbox" bouton radio

type="radio" bouton d'option type="submit" bouton envoyer type="reset" 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> zone de texte (présiser nbr de ligne

et de colonne

Barre déroulement

<select name="ce qu'on veut" > balise d'ouverture

<option value="France">France</option> contenu

<option value="Espagne">Espagne</option> contenu

<option value="Italie">Italie</option> contenu

</select> fermeture de la balise

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>

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

(24)

J’ai eu beaucoup de plaisir à faire ce module. C’est beaucoup plus simple d’apprendre quand on a du plaisir a le faire

Références

Documents relatifs

 Avez-vous bien compris qu'à la suite d'un brassage pendant la méiose, lors de la fécondation, s'effectue un autre brassage contribuant à la diversité génétique?. III

Consigne : Je reconstitue le tableau de Paul Klee &#34;Chat et Oiseau&#34; avec les éléments que j'ai découpés puis je les colle dans

Zaidou tire une boule au hasard et gagne s’il sort une boule blanche.. • Djelan dit &#34;J’ai une chance sur deux

Un code pour le cadenas est donc un nombre constitué de 6 chires, chacun d'entre eux provenant d'une des roues. (Les réponses aux questions suivantes devront être précisément

De ce fait, on introduit une autre notion plus simple dont on va montrer qu’elle suffit à assurer cette

x1 , x2 : sont les solutions recherchées pour cette équation de type réel delta : variable de type réel intermédiaire pour le calcul de delta.. 4/5 Remarque : Dans cet algorithme,

Soient premier et dernier les extrémités gauche et droite de l'intervalle dans lequel on cherche la valeur x, on calcule m, l'indice de l'élément médian :. m(premier + dernier) div

- Consigne 1 : Nous allons reprendre des groupes de mots dans les phrases du corpus que vous avez trié, cette fois nous allons nous intéresser aux verbes qui finissent par é, ée,