Téléchargé 124 fois
![VII. Les formulaires
Les formulaires sont utiles dès lors que l’on souhaite une interaction avec les utilisateurs du
site. Par exemple, pour récupérer leurs avis sur le site, tenir une base avec les informations sur
les utilisateurs ou encore pour les site de e-commerce.
Pour récupérer les informations saisies par l’utilisateur, les pages .htm doivent être interfacées
avec un langage de script tel que le PHP.
Les différentes options d’un formulaire :
1. Texte
<TEXTAREA rows="3" name="commentaires">
Tapez ici vos commentaires
</TEXTAREA>
2. Bouton radio (choix exclusifs)
<INPUT type=radio name="initiale" value="I">
Remarque : cette balise n’a pas de balise fermante.
3. Checkbox (choix multiples)
<INPUT type="checkbox" name="choix[]" value="lundi">
Remarque : l’identifiant est de type tableau d’où « choix[] ».
4. Liste déroulante
<SELECT name="cursus">
<OPTION VALUE="informatique">Informatique</OPTION>
<OPTION VALUE="mathematique">Mathématique</OPTION>
</SELECT>
Exemple de formulaire :
<HTML>
<BODY>
<FORM method=post action="etudiant.php">
Enregistrement d'un étudiant
<TABLE BORDER=0>
<TR>
<TD>Nom</TD>
<TD>
<INPUT type=text name="nom">
</TD>
</TR>
<TR>
<TD>Prénom</TD>
<TD>
<INPUT type=text name="prenom">
</TD>](https://image.slidesharecdn.com/courshtml-121218160202-phpapp02/75/Cours-html-16-2048.jpg)
![Le fonctionnement d’un formulaire :
Le formulaire est donc constitué d’un ensemble de champs texte, liste déroulante, bouton
radio, checkbox que l’utilisateur remplit. Ensuite, le bouton « valider » envoie les
informations dans un fichier script qui récupère chacune des informations renseignées par
utilisateur et peut alors les utiliser comme des variables.
Le bouton valide est décrit en HTML à l’aide de la balise <INPUT>. La valeur « submit » de
l’attribut type indique qu’il s’agit d’un bouton de vaidation. L’attribut « value » permet de
mettre du texte sur le bouton, par exemple « valider » ou « submit ».
Le nom du fichier script à utiliser pour la récupération des valeurs est indiqué au début du
formulaire à l’aide de l’attribut « action » de la balise <FORM>. L’attribut « method » de
cette même balise indique au navigateur la manière dont les informations doivent être passées.
Les deux valeurs possibles sont « post » et « get » (les informations passent dans la barre de
navigation du navigateur). Cette information est également importante pour l’interprétation
par le fichier script qui utilisera des fonctions différentes suivant la valeur de l’attribut
« method ».
Les langages de script, introduction au PHP
Les langages de script permettent de récupérer chaque information du formulaire. Ils utilisent
pour cela l’attribut « name » des balises du formulaire. L’information de l’utilisateur est ainsi
mise dans une variable qui peut alors être utilisée par le programme script.
Exemple de fichier script .PHP
<HTML>
<BODY>
<?PHP
$nom = $_POST['nom'];
$prenom = $_POST['prenom'];
$cursus = $_POST['cursus'];
echo "<CENTER>Récapitulatif de votre inscription:</CENTER><RB>";
echo "Nom : "; echo $nom;echo "<BR>";
echo "Prénom : "; echo $prenom;echo "<BR>";
echo "Cursus : "; echo $cursus;echo "<BR>";
?>
</BODY>
</HTML>
Les balises <HTML> sert ici à l’utilisation de balises HTML pour la présentation de la page.](https://image.slidesharecdn.com/courshtml-121218160202-phpapp02/75/Cours-html-18-2048.jpg)
Téléchargé parYahia Menassel
Cours html
Ce document est un cours HTML pour débutants qui couvre divers sujets, y compris le fonctionnement client-serveur, la structure des sites web, et l'utilisation de logiciels comme NVU et FileZilla pour mettre en ligne un site. Il fournit également des informations sur les balises HTML, leur utilisation, ainsi que des conseils sur l'ergonomie d'un site web et la création de formulaires. Des exemples pratiques illustrent les concepts abordés tout au long du cours.
Cours html
- 1. Cours HTML pourdébutant Guilhem PAROUX 09-10 Mai 2007
- 2. I. FONCTIONNEMENT CLIENT-SERVEUR..................................................................................................3 II. STRUCTURE D’UN SITE WEB.................................................................................................................... 4 III. LE LOGICIEL NVU...................................................................................................................................... 4 IV. METTRE EN LIGNE AVEC LE CLIENT FTP "FILEZILLA" .............................................................. 5 1. PRE-REQUIS ..................................................................................................................................................... 5 2. METTRE LE PREMIER TRAVAIL EN LIGNE .......................................................................................................... 6 V. LE LANGAGE HTML .................................................................................................................................... 7 1. LES BALISES, LEUR FONCTIONNEMENT ............................................................................................................ 7 2. LA STRUCTURE DE BASE .................................................................................................................................. 8 3. EXEMPLES HTML ........................................................................................................................................... 9 a. Mettre du texte ........................................................................................................................................... 9 b. Police, taille de la police, couleur ............................................................................................................. 9 c. Mettre en caractère gras, italique.............................................................................................................. 9 d. Alignement : utilisation des tableaux et listes...........................................................................................10 e. Les couleurs et images de fonds................................................................................................................12 f. Les liens (internes, externes) .....................................................................................................................13 VI. ERGONOMIE D’UN SITE WEB ................................................................................................................14 1. DEFINIR L’ORGANISATION DES PAGES, DES DOSSIERS.....................................................................................14 2. « INDEX.HTML ».............................................................................................................................................14 3. FAIRE UN SQUELETTE DE PAGE TEMPLATE .................................................................................................14 4. MISE EN PAGE D’UN SITE ................................................................................................................................14 a. La page d’accueil : une page claire, précise et simple.............................................................................14 b. Le menu ....................................................................................................................................................15 c. Les couleurs ..............................................................................................................................................15 d. Liens entre les pages.................................................................................................................................15 e. Les contenus (textes/images/animations)..................................................................................................15 VII. LES FORMULAIRES .................................................................................................................................16 1. TEXTE ............................................................................................................................................................16 2. BOUTON RADIO (CHOIX EXCLUSIFS) ...............................................................................................................16 3. CHECKBOX (CHOIX MULTIPLES) .....................................................................................................................16 4. LISTE DEROULANTE........................................................................................................................................16 VIII. LES FEUILLES DE STYLES (FOURNIE .CSS) ....................................................................................19 IX. LES FICHIERS .HTACCESS ......................................................................................................................21
- 3. I. Fonctionnement client-serveur Internetest basé sur une architecture de réseau nommée client-serveur. Ceci signifie qu'il existe des machines hébergeant l'information et fournissant l'accès (les serveurs) et d'autres cherchant cette information (les clients). Dans le cas d'un site internet, les pages composant le site sont stockées sur un serveur afin de permettre aux clients de les consulter. A notre niveau, nous distinguerons trois rôles : • Le serveur : une machine qui héberge les pages d'un site • L'administrateur : personne qui crée et met à jour le site (c'est vous !) • Le client : personne qui consulte le site via Internet Lorsque vous aurez créé vos pages internet, il faudra les envoyer sur un serveur qui les mettra alors automatiquement à disposition des clients. Nous verrons dans les prochains chapitres comment créer un site et comment le télécharger sur un serveur (et comment trouver un serveur pour héberger le site).
- 4. II. Structure d’unsite Web Un site web se décompose en 2 parties bien distinctes : le contenu et le contenant Le contenu : les messages à faire passer, l’information, l’objectif du site Le contenant : comment amener l’information, faire passer les messages Exemple simple : Page d’accueil Intro cours HTML Page 1 Page 2 Page 3 Le cours Les exercices Les TP Dans cet exemple, le contenant est en vert et le contenu est en orange. Le cours est organisé en 3 parties séparées sur 3 pages distinctes. Le langage HTML permet de travailler sur la structure des informations (le choix des pages, des liens entre elles, utilisation des cadres, des menus) et sur leur mise en page (les couleurs, les polices,…). III. Le logiciel NVU http://www.nvu.com/ NVU est un éditeur HTML graphique, c'est-à-dire qu'il permet de voir ce que l'on va obtenir sans se soucier du code HTML derrière (même s'il laisse la possibilité de le voir). NVU se présente donc comme un éditeur de texte de type Word. La zone principale de la fenêtre est occupée par la page en cours d'édition. Plusieurs vues sont possibles (ces vues sont accessibles via les onglets au bas de la page) : • La vue de base du mode édition • La vue avec les balises html • La vue du code html • La vue "résultat" (ce que l'on doit obtenir à la fin) La barre de menu située en haut de la fenêtre comprend principalement deux zones, que nous appellerons "zone texte" et "zone html". La première regroupe les fonctionnalités de mise en forme de texte, la seconde les fonctionnalités propre au HTML, comme les tableaux, les liens, les images, les formulaires. Grâce à ces deux zones, il sera très facile d'incorporer un nouvel élément dans la page. Bien que NVU soit très pratique, j'attire votre attention sur le fait que bien connaître le code HTML est essentiel. En effet, il arrivera que NVU ne donne exactement pas le résultat attendu, il faudra alors se plonger dans le code pour modifier certaines valeurs à la main.
- 5. IV. Mettre enligne avec le client FTP "FileZilla" http://sourceforge.net/projects/filezilla/ 1. Pré-requis Avant de pouvoir mettre en ligne cotre site au moyen d'un client FTP, vous devez savoir où le mettre en ligne. Pour cela vous devrez trouver un hébergeur de site internet. Il en existe de nombreux comme iFrance (www.ifrance.com) ou ClaraNet (www.claranet.fr/), mais votre fournisseur d'accès (Orange, Free, Noos, Club-Internet …) peut aussi vous proposer d'héberger vos pages. Il est impossible de comparer toutes les offres ici : les coûts sont très variés, de même que la capacité de stockage (argument essentiel si vous mettez beaucoup de photos en ligne). Un bref coup d'œil sur Google permet de se faire une opinion et de trouver des comparatifs entre les solutions (www.linternaute.com/internetpratique/hebergeurs/comphebergeurs.shtml). Lorsque vous aurez créé un compte chez un hébergeur, vous disposerez : • D'un nom d'utilisateur (login) • D'un mot de passe • D'une adresse de connexion à un serveur FTP Votre site internet sera accessible à une adresse que vous aura précisé votre hébergeur. Vous pourrez également acheter un nom de domaine (disponible, voire obligatoire, suivant les offres d'hébergement), par exemple en vous rendant sur www.domaine.fr/.
- 6. 2. mettre lepremier travail en ligne FilleZilla est très simple d'utilisation. Les quatre champs à remplir sont situés en haut de la fenêtre : • Adresse (exemple ftpperso.free.fr) • Utilisateur (mon_nom) • Mot de passe (mon_mot_de_passe) • Port (généralement : 21) Une fois ces 4 champs remplis, cliquez sur le bouton Connexion rapide. Si vous avez bien tout rempli, vous voyez apparaître dans la zone "Site Distant" le contenu de votre site Internet. Ce contenu est gérable exactement comme le contenu de votre disque dur : suppression, déplacement, re-nommage … Pour "mettre en ligne" vos pages, sélectionner les pages, photos, dossiers sur votre machine locale (zone "Site local"), faites un clic droit et sélectionner "charger sur le serveur". La page est alors envoyée sur le serveur et d'ores et déjà accessibles via un navigateur internet.
- 7. V. Le langageHTML (HyperText Markup Language) Note importante : seules les fonctionnalités "basiques" sont présentées dans ce cours. Il existe des fonctions plus avancées, qui ne sont hélas pas toujours standardisées et dont l'interprétation peut varier d'un navigateur à l'autre (Internet Explorer et Firefox par exemple). Il est difficile d'être exhaustif quant aux variantes possibles, mieux vaut donc s'abstenir. 1. les balises, leur fonctionnement 1 2 3 4 <Balise_1> <Balise_1> <Balise_1> <Balise_1> …… …… …… …… </Balise_1> <Balise_2> <Balise_2> <Balise_2> <Balise_2> …… …… …… …… </Balise_2> </Balise_2> <Balise_3> </Balise_2> …… …… …… </Balise_1> </Balise_1> </Balise_3> …… …… <Balise_3> </Balise_2> …… …… </Balise_3> </Balise_1> Le langage HTML se décrit comme un ensemble de balises ouvrantes et fermantes qui contiennent le contenu (texte, image, animation) et qui sont interprétées par le navigateur client (Internet Explorer, Netscape, Mozilla, Firefox,…). L’interprétation de certaines balises peut varier d’un navigateur à l’autre. (Ex : taille des textes) Voici la liste des balises de bases nécessaires à la construction d’un site Web : • <TITLE> : titre d’une page • <BR> : passage à la ligne suivante • <H1> à <H6>: taille du texte • <CENTER> : pour entrer le contenu • <B> : caractères gras • <FONT> : police de caractère • <FORM> : formulaire • <FRAME> : cadre • <IMG> : image • <TABLE> : tableau • <TH> : légende de ligne ou de colonne • <TR> : ligne d’un tableau • <TD> : colonne d’un tableau • <P> : séparation des paragraphes • <OL> : liste numérotée Remarque : Seules les balises <HTML> et <BODY> sont obligatoire dans une page Web.
- 8. Bien d’autres balisesaux pages suivantes : http://www.codeshttp.com/baliseh.htm http://www.chez.com/starshoot/html/listbalises.htm http://www.laurent-bernat.com/html-balises.php3?quoi=recap_balises 2. La structure de base Le code source d’une page HTML est toujours structuré de cette manière : <HTML> <HEAD> <TITLE>Cours HTML pour débutant</TITLE> </HEAD> <BODY> Page d’accueil du cours HTML. Le langage HTML est constitué de balises ouvrantes et fermantes interprétées par le navigateur du client. La page 1 décrit l’essentiel du cours. La page 2 les exemples et la pages 3 les exercices. </BODY> </HTML> Ensuite, on viendra mettre en forme le corps de la page : <HTML> <HEAD> <TITLE>Cours HTML pour débutant</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD> <CENTER> <H1>Page d’accueil du cours HTML. </H1> </CENTER> </TR> <TR> <TD> Le langage HTML est constitué de balises ouvrantes et fermantes interprétées par le navigateur du client. </TD> </TR> <TR> <TD> <UL> <LI>L’essentiel du cours (mettre lien) <LI>Les exemples <LI>Les exercices </UL> </TD> </TR> </TABLE>
- 9. </BODY> </HTML> Remarque : La balise<LI> pour les éléments d’une liste n’a pas de balise fermante. 3. Exemples HTML a. Mettre du texte Pour remplir une page, il suffit de saisir du texte entre les balises <BODY> et </BODY>. Dans ce texte, le nombre d’espaces entre les mots est ignoré, un ou plusieurs espaces étant équivalent. De même, les retours à la ligne classiques ne sont pas considérés et doivent être marqués à l’aide des balises <BR> et <P>. La balise <BR> permet d’aller à ligne. La balise <P> permet également d’aller à la ligne mais avec une interligne. b. Police, taille de la police, couleur La balise <FONT> sert à définir les caractéristiques des textes dans une page HTML. Ces caractéristiques se définissent à l’aide des attributs de la balise FONT. La police de caractère <font face=" Arial"> Le nom de la police doit être indiqué entre guillemets La taille de la police <font size="-1"> L’attribut « size » prend des valeurs allant de -7 à +7. La couleur de la police <font color="blue"> Cet attribut permet de paramétrer la couleur du texte ou d’une portion de texte. Alignement du texte <FONT align="center"> L’attribut « align » prend comme valeur : « right », « left », « center ». Les attributs d’une balise peuvent parfaitement se cumuler : <font face=" Arial" size="-1" color="blue"> c. Mettre en caractère gras, italique Il suffit de mettre le texte entre les balises appropriées. <B>Mise en caractères gras</B> <I>Mise en italique</I> Celles-ci peuvent être additionnées à volonté : <B><I>Mise en caractères gras et italique</I></B> Il n’y a pas d’autre de priorité : <I><B>Mise en caractères gras et italique</B></I>
- 10. d. Alignement :utilisation des tableaux et listes Les tableaux : <TABLE> <TH> <TD>entête colonne 1</TD> </TH> <TR> <TD> cellule 1 ligne 1</TD> <TD> cellule 2 ligne 1</TD> </TR> <TR> <TD> cellule 1 ligne 2</TD> <TD> cellule 2 ligne 2</TD> </TR> </TABLE> Les attributs des tableaux : Border : taille bordure du tableau Bordercolor : couleur de la bordure Bgcolor : couleur de fon du tableau Cellpadding : espace de remplissage entre les données et le quadrillage Cellspacing : espace entre les cellules du tableau Width : largeur des cellules Les attributs se cumulent : <table border="1" cellpadding="1" cellspacing="0" width="100%" bordercolor="#000000" bgcolor="#0099FF"> Le balises <TR> et <TD> peuvent elle est agrémentée des attributs : Bordercolor et bgcolor La balise <TR> : Elle marque chaque nouveau début de ligne, sa balise fermante </TR> marque chaque fin de ligne. Les attributs de cette balise sont: Bgcolor Valign Permet de préciser l'alignement vertical du contenu de chaque ligne. Valign="top" Le contenu de chaque cellule est justifié vers le haut. Il s'agit de la valeur par défaut. Valign ="middle" Le contenu de chaque cellule est centré verticalement. Valign ="bottom" LE contenu de chaque cellule est centré vers le bas. Valign ="baseline" Cet attribut est utilisé lorsque l'on souhaite que toutes les cellules de la ligne aient la même ligne de référence. Cette contrainte ne s'applique qu'à la première ligne de chaque cellule.
- 11. La balise <TD>: Elle définit chaque cellule d'un tableau. Ses attributs sont : Bgcolor Background Colspan="valeur" Spécifie le nombre de colonnes occupées par la cellule. La valeur par défaut est 1. Rowspan="valeur" Spécifie le nombre de lignes occupées par la cellule. La valeur par défaut est 1. Valign Height Spécifie la hauteur de la cellule. Width Spécifie la largeur de la cellule. Exemples : <TD colspan="3" align="middle"> <TD rowspan="3" valign="bottom"> Liste : <UL> <LI> <LI> <LI> </UL> Liste numérotée : <OL> <LI> <LI> <LI> </OL> Liste numérotée avec les lettres de l’alphabet : <OL type= "a"> <LI> <LI> <LI> </OL
- 12. e. Les couleurset images de fonds (Les couleurs) Les couleurs sont définies à l’aide de codes que l’on donne à des attributs des balises. On précise pour chaque élément page, tableau, cellule de tableau la couleur qu’elle doit avoir. Il existe un ordonnancement qui fait que la couleur de la balise <TABLE> recouvre la couleur de la balise <BODY> de même que la couleur de la cellule d’un tableau recouvre sa couleur. Les différents attributs pour mettre de la couleur sont : Bgcolor : couleur de fond <body bgcolor="#FFFFFF"> Bordercolor : couleur des bordures <Table bordercolor="#000000" > Une palette de code de couleur à cette adresse : http://www.netalya.com/fr/palette.asp Les couleurs peuvent également être indiqué par leur nom tel que « red », « blue », « green », etc. L’utilisation des codes permet une plus grande diversité. Les noms des couleurs et leurs codes correspondants à cette adresse : http://www.toulouse-renaissance.net/c_outils/c_colname.htm (Images libres de droits) Le photographe ou l’auteur des images renonce à son droit d'auteur. Il ne peut s'engager à vous céder des droits qu'il n'a pas, comme ceux des personnes éventuellement représentées sur l'image. Des images libres de droits à cette adresse : http://www.letopweb.net/webmaster/webmaster-photo-libre-droits.html http://www.freefoto.com/ <img src= «image1.jpg » > Remarque : la balise <IMG> n’a elle aussi pas de balise fermante.
- 13. f. Les liens(internes, externes) <a href="http://www.google.fr"></a> L’attribut href de la balise <a> permet d’indiquer l’adresse vers laquelle il faut pointer. Ici le lien ne pourra pas fonctionner car il faut appliquer ce lien à du texte, une image, une vidéo, etc. <a href="http://www.google.fr">Lien vers le site Google</a> Ou alors : <a href="http://mapage.htm"> <img src= «../images/image1.jpg »> </a>
- 14. VI. Ergonomie d’unsite Web 1. Définir l’organisation des pages, des dossiers Dossier Principal Pages Images Index.htm Pages1.htm Image1.jpg Pages2.htm Image2.jpg Pages3.htm Image3.jpg PagesN.htm ImageM.jpg 2. « Index.html » Le nom à donner à votre page d’accueil sera imposé par votre fournisseur d’accès. Le plus souvent ce sera « index.htm » ou « index.html ». Il s’agit de la première page de votre site que l’utilisateur verra. C’est la seule page dont le fournisseur d’accès à besoin de connaître le nom. Les autres pages ainsi que les images sont organisées selon votre souhait. 3. Faire un squelette de page template Pourquoi passer par un squelette que l’on trouve aussi sous le nom de template. Il s’agit d’un modèle de page, fait une fois et que vous pouvez réutiliser pour l’ensemble des pages du site. Le template est très utile si vous décrivez une charte de votre site qui est fortement conseillé. Le squelette vous permet une fois pour toute de décider de la police de caractère, taille de la police, les couleurs ou images de fond et de vous concentrer ensuite sur le contenu. 4. Mise en page d’un site a. La page d’accueil : une page claire, précise et simple Ergonomie de la page d’accueil. C’est la première page que l’utilisateur voit, elle est aussi importante si ce n’est plus car elle décidera l’utilisateur à visiter les pages du site. C’est pour cela qu’elle doit respecter ses 3 principes qui sont clarté, précision et simplicité.
- 15. b. Le menu Lemenu ; il faut savoir que l’utilisateur internaute est pressé. Il va sur Internet pour trouver une information précise et vite. Le menu doit donc être intuitif. Pour se faire vous pouvez utiliser des icônes, des couleurs, du texte et si possible mélanger les trois. Le menu peut aussi amener un sous-menu l’utilisateur sait alors avant même de cliquer sur un lien si elui-ci correspond à ses attentes (recherches). c. Les couleurs Les couleurs sont très importantes dans un site Web. (Hormis pour les sites destinés aux non- voyants pour qui les sites Web nécessitent des propriétés différentes) En effet, toujours penser à l’utilisateur lors de la construction d’un site car il est la cible. Aussi dans de plusieurs types d’utilisateurs, le site doit être penser pour les utilisateurs débutant et ne naviguant pas souvent sur Internet. Après la construction change suivant l’objectif. Les couleurs aident souvent à l’indexation du site, l’utilisateur peut plus facilement s’y retrouver surtout s’il revient à plusieurs occasions sur le site. d. Liens entre les pages Les liens entre les pages d’un site Web tiennent toute leur importance. La navigation intuitive permet à l’internaute de s’approprier plus facilement le site Web. Plus facilement il peut passer une page à une autre, revenir sur la page accueil, sur une page en particulier ou la page précédente sans utiliser les boutons « précédent » et « suivant » du navigateur. Les liens sont des index qui permet à l’utilisateur d’un site Web de trouver très vite les informations cherchées. e. Les contenus (textes/images/animations) Le contenu d’un site Web dépend pour beaucoup de l’objectif du site. Mais dans la plus part du cas, il faut envisager le site Web comme allant à l’opposé d’un livre et donc l’imaginer comme un support où l’on peut faire passer de l’information sous toutes ses formes. Et donc parfois il sera bien plus efficace d’insérer une vidéo, ou une simple image pour faire passer une information plutôt qu’un texte explicatif. Le site Web permet à tout moment d’ajouter des images, des vidéos ou du son pour compléter l’information. Les images, son ou vidéos étant très facilement interchangeables, elles permettent une information facilement à jour.
- 16. VII. Les formulaires Lesformulaires sont utiles dès lors que l’on souhaite une interaction avec les utilisateurs du site. Par exemple, pour récupérer leurs avis sur le site, tenir une base avec les informations sur les utilisateurs ou encore pour les site de e-commerce. Pour récupérer les informations saisies par l’utilisateur, les pages .htm doivent être interfacées avec un langage de script tel que le PHP. Les différentes options d’un formulaire : 1. Texte <TEXTAREA rows="3" name="commentaires"> Tapez ici vos commentaires </TEXTAREA> 2. Bouton radio (choix exclusifs) <INPUT type=radio name="initiale" value="I"> Remarque : cette balise n’a pas de balise fermante. 3. Checkbox (choix multiples) <INPUT type="checkbox" name="choix[]" value="lundi"> Remarque : l’identifiant est de type tableau d’où « choix[] ». 4. Liste déroulante <SELECT name="cursus"> <OPTION VALUE="informatique">Informatique</OPTION> <OPTION VALUE="mathematique">Mathématique</OPTION> </SELECT> Exemple de formulaire : <HTML> <BODY> <FORM method=post action="etudiant.php"> Enregistrement d'un étudiant <TABLE BORDER=0> <TR> <TD>Nom</TD> <TD> <INPUT type=text name="nom"> </TD> </TR> <TR> <TD>Prénom</TD> <TD> <INPUT type=text name="prenom"> </TD>
- 17. </TR> <TR> <TD>Formation</TD> <TD> Initiale : <INPUT type=radio name="initiale" value="I"> Continue : <INPUT type=radio name="continue" value="C"> </TD> </TR> <TR> <TD>Cursus</TD> <TD> <SELECT name="cursus"> <OPTION VALUE="informatique">Informatique</OPTION> <OPTION VALUE="mathematique">Mathématique</OPTION> <OPTION VALUE="lettres">Lettres</OPTION> <OPTION VALUE="economie">Economie</OPTION> <OPTION VALUE="autre">Autre</OPTION> </SELECT> </TD> </TR> <TR> <TD>Commentaires</TD> <TD> <TEXTAREA rows="3" name="commentaires"> Tapez ici vos commentaires</TEXTAREA> </TD> </TR> <TR> <TD COLSPAN=2> <INPUT type="submit" value="Envoyer"> </TD> <TD> <INPUT type="reset" value="Effacer"> </TD> </TR> </TABLE> </FORM> </BODY> </HTML>
- 18. Le fonctionnement d’unformulaire : Le formulaire est donc constitué d’un ensemble de champs texte, liste déroulante, bouton radio, checkbox que l’utilisateur remplit. Ensuite, le bouton « valider » envoie les informations dans un fichier script qui récupère chacune des informations renseignées par utilisateur et peut alors les utiliser comme des variables. Le bouton valide est décrit en HTML à l’aide de la balise <INPUT>. La valeur « submit » de l’attribut type indique qu’il s’agit d’un bouton de vaidation. L’attribut « value » permet de mettre du texte sur le bouton, par exemple « valider » ou « submit ». Le nom du fichier script à utiliser pour la récupération des valeurs est indiqué au début du formulaire à l’aide de l’attribut « action » de la balise <FORM>. L’attribut « method » de cette même balise indique au navigateur la manière dont les informations doivent être passées. Les deux valeurs possibles sont « post » et « get » (les informations passent dans la barre de navigation du navigateur). Cette information est également importante pour l’interprétation par le fichier script qui utilisera des fonctions différentes suivant la valeur de l’attribut « method ». Les langages de script, introduction au PHP Les langages de script permettent de récupérer chaque information du formulaire. Ils utilisent pour cela l’attribut « name » des balises du formulaire. L’information de l’utilisateur est ainsi mise dans une variable qui peut alors être utilisée par le programme script. Exemple de fichier script .PHP <HTML> <BODY> <?PHP $nom = $_POST['nom']; $prenom = $_POST['prenom']; $cursus = $_POST['cursus']; echo "<CENTER>Récapitulatif de votre inscription:</CENTER><RB>"; echo "Nom : "; echo $nom;echo "<BR>"; echo "Prénom : "; echo $prenom;echo "<BR>"; echo "Cursus : "; echo $cursus;echo "<BR>"; ?> </BODY> </HTML> Les balises <HTML> sert ici à l’utilisation de balises HTML pour la présentation de la page.
- 19. VIII. Les feuillesde styles (fournie .CSS) CSS signifie "Cascading Style Sheet". Les feuilles de styles permettent comme leur nom l’indique de définir le style d’une page Web. Les définissent les polices de caractères, leurs tailles, les couleurs des textes, des fonds de pages etc. CSS interne : Exemple simple : Faire un tableaux à 3 colonnes et 2 lignes avec des informations quelconques. Exe_css1.htm : <HTML> <HEAD> <link rel="stylesheet" type="text/css" href="exe1.css"> </HEAD> <BODY> <TABLE> <TR> <TD>A </TD> <TD>B </TD> <TD>C </TD> </TR> <TR> <TD>A1 </TD> <TD>B1 </TD> <TD>C1 </TD> </TR> </TABLE> </BODY> </HTML> Exe1.CSS: table { border:2px solid black; margin:auto; } td, tr{ border:1px solid #f02485; text-align:center; width:150px; height:50px; vertical-align:middle; text-align:center;}
- 20. CSS interne : L’autremanière d’utiliser les CSS est d’insérer le code dans la page htm. Le code doit être mis entre les balises <HEAD> et </HEAD> Voici le même exemple décrit de cette manière : Exe_css2.htm : <style type="text/css"> table { border:2px solid black; margin:auto; } td, tr{ border:1px solid #f02485; text-align:center; width:150px; height:50px; vertical-align:middle; text-align:center; } </style> Remarque : Il est tout à fait possible de cumuler les deux manières simplement les styles définis dans la page HTML auront priorité sur la feuille de style. Exemple dans la feuille de style on décide que la taille sera de 3 et dans une page du site certains textes seront en taille 2 Liste des attributs CSS : http://perso.orange.fr/sylvain.vernois/Conseils/CSS/CSS.html Travaux pratique : • Changer la couleur du tableau • Changer la taille du tableau • Mettre une couleur de fond Plus d’exemples à cette page : http://mammouthland.free.fr/parisweb2006/testscss2.html Les feuilles de styles permettent aussi une mise en page plus souple que les tableaux à l’aide des blocs décrit avec la balise <DIV> qui ont l'avantage de pouvoir être déplacés de gauche à droite, ou de haut en bas grâce aux CSS. La balise <DIV> (pour division) peut être utilisée pour diviser un document en plusieurs sections qui seront, par exemple, alignées chacune d'une façon différente. Ses principaux attributs sont : id, class, style. Exemple : <style type="text/css"> .marge { margin-left: 75px ; font-style: italic ; } </style>
- 21. <DIV class= "marge"> <H1>Titre</H1> <P> Paragraphe 1 </P> <P> Paragraphe 2 </P> </DIV> Dans cette exemple, la division aura les mêmes propriétés que la classe table définie précédemment. IX. Les fichiers .htaccess Ces fichiers représentent un moyen simple et efficace pour sécuriser votre site Internet en réduisant l'accès d'un répertoire à certaines personnes. Malheureusement, leur utilisation est rendue complexe par les hébergeurs, certains les interdisant, d'autres les limitant ou bien outrepassant leur configuration. Un tel fichier permet de définir les droits d'accès à un répertoire de votre site. On peut alors interdire totalement l'accès ou le limiter à un certain nombre d'utilisateurs (accès par login et mot de passe) ou bien à une machine (identification par adresse IP). Les informations à mettre dans ce fichier sont assez rigides et doivent être appliquées "bêtement". Voici un exemple de fichier restreignant l'accès à un répertoire. PerlSetVar AuthFile chemin/.htpasswd (fichier de couples utilisateur:mot de passe) AuthName "Accès restreint" AuthType Basic Require valid-user (type d'accès) Le fichier .htpasswd contient les lignes suivantes : Utilisateur1:motdepasse1 Utilisateur2:motdepasse2 … (autant de couples que désiré) Lorsque vous tentez d'accéder à une page protégée, on obtient une invite de commande pour le nom et le mot de passe. Plus d'informations sont disponibles à cette adresse : www.commentcamarche.net/apache/apacht.php3 Ce qu’il faut savoir • La mise en forme du texte (couleur, police, taille,..) • Les tableaux • Les images • Les liens (internes, externes) • Les formulaires (*) seulement à la fin, intro du PHP • Les couleurs de fond*
- 22. • Les feuilles de style (CSS) • Les fichiers .htaccess