1
Download Module Technologie du web Contenu Planning Mode d`emploi
Transcript
Contenu Module Technologie du web Æ Xhtml/css (html5/css3) SL Æ Javascript SL Æ Xml/dtd/xslt/xpath ED Æ Php SL Æ Ajax ED Æ Jquery ED Æ Responsive web SL Æ Projet Æ S Lanquetin Aile sciences de l’ingénieur Bureau G206 Æ Présentation 4 février Æ Attribution 18 février Æ Point 18 mars Æ Démo semaine 5 mai 2 Planning S. Lanquetin - L3 : Introduction Technologie pour le Web Mode d’emploi Æ Ponctualité : CM TD TP Æ En cas d’absence : récupérer!!! Æ Projets : groupes en février, début en mars Æ Modalités examen ■ Durée : 2 heures ■ Pas de documents Semaine du 19 mai ■ 1 unique feuille manuscrite recto-verso ■ Questions Cours + Exercices 3 4 S. Lanquetin - L3 : Introduction Technologie pour le Web Qu'est ce que c'est ? Technologie pour le Web (X)HTML CSS Æ Langage de description qui permet de créer des documents interactifs Sandrine Lanquetin ■ liens hypertextes (lecture non linéaire) Aile sciences de l'ingénieur Bureau G206 [email protected] ■ « indépendant » du système d'exploitation et de l’ordinateur (fichier texte + marqueurs) marqueur = balise = tag 6 S. Lanquetin - L3 : Introduction Technologie pour le Web 1 Mais encore ? Comment ça fonctionne ? Æ 2 langages Æ Commandes sous forme de balises <> ■ Balise en paire <title> Titre de la fenêtre </title> ■ XHTML pour le fond ■ CSS pour la forme ■ Balise auto-fermante <img /> Æ Consulter un site Æ Attribut : complément d’information pour la balise ■ Code interprété par le logiciel de navigation (Navigateurs : Mozilla Firefox, Internet Explorer…) ■ En tester au moins 2 <img src="photos/image.jpg" /> Æ Remarques Æ Créer un site 7 ■ Editeur de texte (Notepad++) ■ WYSIWYG (Dreamweaver, Frontpage, Nvu…) S. Lanquetin - L3 : Introduction Technologie pour le Web 8 Structure d’un document HTML URL du DTD Balise de base html En-tête Liste des balises S. Lanquetin - L3 : Introduction Technologie pour le Web Baliser le texte Version du langage utilisé <p> Paragraphe </p> <p> Passage <br/> A la ligne </p> <?xml version="1.0" encoding="UTF-8"?> <!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 xml:lang="fr"> <head> <title> Page 1 </title> Titre de la page </head> <body> Corps de page : <p> Texte </p> Affiché </body> </html> Fin du document <html> 9 S. Lanquetin - L3 : Introduction Technologie pour le Web <h1> Titre du plus important </h1> <h2> … </h2> … <h6> Titre du plus important </h6> <!-- Texte en commentaire --> 10 S. Lanquetin - L3 : Introduction Technologie pour le Web Baliser le texte Liens Mise en valeurs Æ Vers 1 autre page <em> Souvent en italique </em> ■ Faible ■ Forte Abréviations Page1.html Page2.html title pour ajouter une infobulle ■ Courtes ■ Longues Exposant Indice Site <p><a href="page2.html"> Aller page 2 </a></p> <strong> Souvent en gras </strong> Citations 11 Langue utilisée ■ Les balises sont écrites en minuscule (xml) ■ Les retours de chariot, espaces blancs ou tabulations ne sont pas pris en compte <p> <q> entre " " sauf IE </q> </p> Æ Dans la page <blockquote> <p> … </p> </blockquote> page2.html <sup> … </sup> <p><a href= href=“#fin”> "#fin"> Bas Bas de de page page </a></p> </a></p> <sub> … </sub> <p> <abbr> sigle + infobulle </abbr> </p> S. Lanquetin - L3 : Introduction Technologie pour le Web 12 <h1 id="fin"> Titre </h1> S. Lanquetin - L3 : Introduction Technologie pour le Web 2 Liens Liens Æ Liens dans une autre page Æ Liens dans une autre page page2.html Site page2.html Site Page1.html Page1.html Page2.html rep2 Page2.html <h1 id="fin"> Titre </h1> page1.html page1.html <p> <a href= href=“page2.html#fin”> "page2.html#fin"> Bas Bas de de page page 22 </a> </a> </p> 13 Adresse relative S. Lanquetin - L3 : Introduction Technologie pour le Web <p> <a href="rep2/page2.html"> Page 2 </a> </p> 14 Liens S. Lanquetin - L3 : Introduction Technologie pour le Web Liens Æ Liens dans une autre page Æ Liens externes page2.html Site rep1 Page1.html <p> <a href="http://www.google.fr"> Google </a> </p> rep2 Page2.html Æ Envoi d’un email <p> <a href="mailto:[email protected]"> Contact </a> </p> page1.html <p> <a href="../rep2/page2.html"> Page 2 </a> </p> 15 S. Lanquetin - L3 : Introduction Technologie pour le Web ! 16 Image ?subject= S. Lanquetin - L3 : Introduction Technologie pour le Web Les accents Æ Débuter le code par le "&" Æ Inscrire le caractère (a e i o u) Æ Ecrire avec un des codes suivants Æ Formats JPEG PNG GIF BMP TIFF Æ Balise <p> <img src="image/photo1.jpg" alt="texte alternatif" /> </p> <p><a href="lien.html"> <img src="image/photo1.jpg" alt="texte alternatif" /> </a></p> S. Lanquetin - L3 : Introduction Technologie pour le Web accent aigu acute accent grave grave accent circonflexe circ cédille cedil Æ Terminer le tout avec un point-virgule Æ Donc: é = é Æ Lien image 17 spamsÆphp 18 S. Lanquetin - L3 : Introduction Technologie pour le Web 3 Caractères réservés CSS : comment faire ? Site deco.css index.html < > deco.css > propriété:valeur; & 19 index.html & S. Lanquetin - L3 : Introduction Technologie pour le Web … <head> <link rel="stylesheet" type="text/css" href="css/deco.css" /> </head> … 20 Style et balise S. Lanquetin - L3 : Introduction Technologie pour le Web Regroupement de sélecteurs Æ Style commun à toutes les balises *{ /*Commentaire en css*/ } Æ style pour une balise Si les informations sont les mêmes pour 2 éléments text-align:center; h1 { text-align:center;} h2 { text-align:center;} h1{ text-align:center; } Æ Style commun à plusieurs balises On peut les grouper Æ Style pour des balises imbriquées 21 p{ text-align:center; } css < S. Lanquetin - L3 : Introduction Technologie pour le Web h1,h2 { text-align:center;} 22 Sélecteurs descendants S. Lanquetin - L3 : Introduction Technologie pour le Web Sélecteurs d'enfants p strong{ color:red;} p>strong{ color:red;} Le style n’est appliqué à strong que s’il est imbriqué dans une balise p Le style n’est appliqué à strong que s’il est descendant direct d’une balise p Exemple Exemple <p>La couleur <strong> rouge</strong> est appliquée <strong> ici </strong>, <q>Et <strong> ici aussi</strong></q></p> <div><strong> Mais pas ici</strong></div> <p>Ni là </p> <p>La couleur <strong> rouge</strong> est appliquée <strong> ici </strong>, <q>Mais <strong> pas ici </strong></q></p> Pas supporté par IE6 23 S. Lanquetin - L3 : Introduction Technologie pour le Web 24 S. Lanquetin - L3 : Introduction Technologie pour le Web 4 Sélecteur d'enfants adjacents Style et balise Æ Style pour certaines balises h2+p {color : red; } ■ Identifiant unique : id index.html Le style n’est appliqué à p que s’il suit une balise h2 deco.css <p id="intro"> … </p> Exemple <h2>La couleur rouge est appliquée </h2> <p>ici</p> <p>mais pas là </p> #intro{ color:#555555; } ■ Identifiant réutilisable (classe) : class index.html <p class="centre">… </p> <h1 class="centre">… </h1> Pas supporté par IE6 25 S. Lanquetin - L3 : Introduction Technologie pour le Web 26 Sélecteur pour identifiant et classe S. Lanquetin - L3 : Introduction Technologie pour le Web Æ Aligner Æ Sélecteur d’identifiant Æ Alinéas p#intro {…} Æ Taille Æ Sélecteur de classe text-align:center; left; right; justify; text-indent: 20px; font-size:20px; Notations relatives : 1.5em (/ largeur M) 1.5ex (/ hauteur de X) p.centre {…} 27 S. Lanquetin - L3 : Introduction Technologie pour le Web xx-large S. Lanquetin - L3 : Introduction Technologie pour le Web Mise en forme du texte Æ Polices Æ Souligner font-family:Verdana; "Comic Sans MS"; Æ Plusieurs polices font-family:Inexistante Rare Arial Verdana; text-decoration:underline; line-through; overline; blink; none; Par ordre de priorité Æ Majuscule / Minuscule Polices par défaut : • serif (avec empattement) • sans serif 29 font-weight:bold; none; Æ Italique font-style:italic; normal; S. Lanquetin - L3 : Introduction Technologie pour le Web Æ Petite majuscule 30 Nom de taille : xx-small x-small small medium large x-large 80% 28 Mise en forme du texte Æ Gras .centre{ text-align:center; } Mise en forme du texte <p class="centre">… </p> <h1 class="centre">… </h1> <p id="intro"> … </p> deco.css text-transform:uppercase; lowercase; capitalize; none; font-variant:small-caps; normal; S. Lanquetin - L3 : Introduction Technologie pour le Web 5 Couleur et fond Æ Couleur du texte Couleurs Code couleur = # Red Green Blue color:green; color:rgb(0,255,0); Æ Couleur de fond Æ Image de fond (RGB ) 2 chiffres 2 chiffres 2 chiffres hexas hexas hexas color:#00FF00; 256 valeurs possibles par couleur background-color:blue; background-image:url("image.jpg"); Image de fond < 50 Ko 31 S. Lanquetin - L3 : Introduction Technologie pour le Web 32 Hexadécimal S. Lanquetin - L3 : Introduction Technologie pour le Web Conversion décimal ↔ hexadécimal Binaire 0, 1 2 chiffres Décimal 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 33 16 1 2 16 2 0 10 chiffres 255 16 15 F 15 16 15 F 0 Hexadécimal 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F 33↔21h 16 chiffres 33 S. Lanquetin - L3 : Introduction Technologie pour le Web 34 La calculatrice de l’ordinateur fait ces conversions!!! S. Lanquetin - L3 : Introduction Technologie pour le Web Image de fond Couleurs Æ Fixer l’image de fond Code couleur = # Red Green Blue (RGB ) Valeurs comprise entre 0 et FF pour chaque couleur Rouge = #ff0000 Æ Répétition de l’image Synthèse additive des couleurs rouge, vert et bleu Vert = #00ff00 Bleu = #0000ff Æ Positionner le fond Blanc = #ffffff background-attachment:fixed; scroll; background-repeat:no-repeat; repeat-x; repeat-y; repeat; background-position:300px 100px; center middle; Top / middle / bottom / left / center / right Noir = #000000 35 255↔FF S. Lanquetin - L3 : Introduction Technologie pour le Web 36 S. Lanquetin - L3 : Introduction Technologie pour le Web 6 Pseudo-formats Æ Passage de la souris Æ Clic Les listes Æ Liste non ordonnée a:hover{ color:red; } <ul> <li>1er element</li> <li>2eme element </li> <li>3eme element </li> </ul> a:active{ color:white; } Æ Page visitée Æ Liste ordonnée a:visited{ color:blue; } 37 <li></li> correspond à une puce S. Lanquetin - L3 : Introduction Technologie pour le Web 38 Les listes <ol> <li>1er element</li> <li>2eme element </li> <li>3eme element </li> </ol> Style css pour changer le type de numérotation S. Lanquetin - L3 : Introduction Technologie pour le Web CSS pour les listes Æ Liste de définition ul{ color:red;} <dl> <dt>1er element</dt> <dd>2eme element </dd> </dl> Æ Retrait de liste list-style-position:inside; Æ Apparence de la puce list-style-type:disc; circle; square; none; Imbrication de listes entre <li> et </li> Æ Image pour puce 39 S. Lanquetin - L3 : Introduction Technologie pour le Web 40 list-style-type:decimal; decimal-leading-zero; upper-roman; lower-roman; alpha; greek; list-style-image:url("puce.png"); S. Lanquetin - L3 : Introduction Technologie pour le Web Les tableaux Les tableaux Æ Balise <body> <table> <tr><th>Titre Colonne 1</th><th>Titre Colonne 2</th></tr> <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> </body> <table>…</table> Æ Création par ligne <tr>…</tr> Æ Ligne découpée en cellules <td>…</td> 41 <th>…</th> Entête (gras) S. Lanquetin - L3 : Introduction Technologie pour le Web 42 S. Lanquetin - L3 : Introduction Technologie pour le Web 7 Bordures en CSS Les tableaux Æ Type de bordure Æ table{border:1px solid black} Style à appliquer sur <table> ET <td> border-style:solid; double; dashed; dotted; inset; outset; ridge; none; Æ Epaisseur Æ Couleur border-color:blue; Æ Raccourci border:3px solid blue; border-width:3px; 43 Æ th,td{border:1px solid black} Æ 1 seule bordure border-collapse:collapse; border-left: right: top: bottom: S. Lanquetin - L3 : Introduction Technologie pour le Web cellpadding = 2 cellspacing = 3 44 Les tableaux Æ Titre du tableau Æ CSS S. Lanquetin - L3 : Introduction Technologie pour le Web Position dans la page Æ Balises type bloc <table> <caption> titre </caption> <tr> … </tr> </table> <p> <table> <h1> <form> ■ Largeur page ■ Les unes en dessous des autres caption-side:left; right; bottom; top; Æ Balise type en ligne Æ Passage bloc-ligne display:block; inline; none; <td rowspan="3"> S. Lanquetin - L3 : Introduction Technologie pour le Web 46 Balise générique div et span <div> S. Lanquetin - L3 : Introduction Technologie pour le Web Modifier un bloc Æ Marge par coté <span> margin padding Contenu……………………… ………………………………… …………………………………. border <a> <q> <strong> ■ Taille du texte ■ Pas de retour à la ligne Æ Grand tableau <thead> <tfoot> <tbody> Æ Fusion des cellules <td colspan="2"> 45 padding : 2px border-spacing : 3px contenu marge interne marge externe bordure Æ Dimensions Æ Centrer margin-top:20px; bottom left right width:80%; padding-top:10px; bottom left right height:20px; % s’adapte résolution 1. donner une largeur 2. Marges automatiques à gauche et à droite Par défaut : 47 Pas de bordure Pas de marge (en ligne) Marge (block sauf div) Les marges externes ne s’ajoutent pas S. Lanquetin - L3 : Introduction Technologie pour le Web 48 p{ width:50%; margin-left:auto; margin-right:auto; } IE 5.5 et avant .conteneur_de_p{ text-align:center; } S. Lanquetin - L3 : Introduction Technologie pour le Web 8 Habillage du texte float: left; right; none; Exemple de flottement <p><img src="calimero.jpg" class="imgfloat" alt="Img calim" /></p> <p>Attention…</p> <p> <img src="photo.jpg" alt="ma photo" class="flottant" /> blabla .flottant{ </p> float:left; } Æ Arrêter flottement 49 clear: left; right; both; none; S. Lanquetin - L3 : Introduction Technologie pour le Web .imgfloat { float:left; } .imgfloat { float:right; } 50 Exemple de flottement et d'arrêt S. Lanquetin - L3 : Introduction Technologie pour le Web Positionnement absolu Æ Placement au pixel près <p><img src="calimero.jpg" class="imgfloat" alt="Img calim" /></p> <p>Ce Texte est à coté de l'image</p> <p class="dessous">Celui-ci se place sous l'image</p> position:absolute; top:100px; left:260px; (260,0) (0,0) (0,100) bottom / right .imgfloat { float:left; } .dessous { clear:both; } IE 6 et avant : pas de positionnement absolu Æ Imbrication de bloc A B 51 S. Lanquetin - L3 : Introduction Technologie pour le Web 52 z-index le plus élevé devant les autres S. Lanquetin - L3 : Introduction Technologie pour le Web Positionnement fixe Positionnement relatif Æ Absolu + élément reste fixe quand la page défile Æ Position par rapport à la position théorique position:fixed; top:100px; left:260px; strong{ background-color:#bbbbff; position:relative; top:20px; left:10px; } Æ Utilisation : Menu 53 Æ Superposition S. Lanquetin - L3 : Introduction Technologie pour le Web 54 S. Lanquetin - L3 : Introduction Technologie pour le Web 9 Positionnement statique Exemple de positionnement Æ Retour au positionnement par défaut Æ display : ■ inline ■ block ■ table (>= ie8) ■ table-cell (>= ie8) ■ inline-block (Safari, Opéra, firefox 3) *{position:static;} 55 S. Lanquetin - L3 : Introduction Technologie pour le Web 56 Exemple de positionnement S. Lanquetin - L3 : Introduction Technologie pour le Web Exemple de positionnement Æ Bloc contenu plus grand que bloc menu #conteneur { <div id="conteneur"> width:600px; <div id="titre"> Bloc titre </div> margin:0 auto; <div id="menu"> Bloc menu </div> background-color:#ccffcc} <div id="contenu"> Bloc contenu <br/> avec #menu { bloc contenu plus grand ou egal au bloc menu position:absolute; width:200px; </div> background-color:#ccffcc} <div id="pied"> Bloc pied de page </div> #contenu { </div> margin-left:200px; background-color:#ffffcc} #titre{background-color:#cccccc} 57 #pied{background-color:#ffccff} S. Lanquetin - L3 : Introduction Technologie pour le Web Exemple de positionnement <div id="conteneur"> <div id="titre"> Bloc titre </div> <div id="menu"> Bloc menu </div> <div id="contenu"> Bloc contenu <br/> avec bloc contenu plus grand ou egal au bloc menu </div> <div id="pied"> Bloc pied de page </div> </div> 58 #conteneur { width:600px; margin:0 auto; background-color:#ccffcc} #menu { position:absolute; width:200px; background-color:#ccffcc} #contenu { margin-left:200px; background-color:#ffffcc} #titre{background-color:#cccccc} #pied{background-color:#ffccff} S. Lanquetin - L3 : Introduction Technologie pour le Web Exemple de positionnement Æ Bloc menu plus grand que bloc contenu Cette solution n’est pas satisfaisante 59 float S. Lanquetin - L3 : Introduction Technologie pour le Web <div id="conteneur"> <div id="titre"> Bloc titre </div> <div id="milieu"> <div id="menu"> Bloc menu <br/>avec … </div> <div id="contenu"> Bloc contenu </div> </div> <div id="pied"> Bloc pied de page </div> 60 </div> #conteneur { width:600px; margin:0 auto; background-color:#ccffcc} #milieu {overflow:hidden;} #menu { float:left; width:200px; background-color:#ccffcc} #contenu { margin-left:200px; background-color:#ffffcc} #titre{background-color:#cccccc} #pied{background-color:#ffccff} S. Lanquetin - L3 : Introduction Technologie pour le Web 10 Exemple de positionnement Les Formulaires <div> <ol> <li id="col1"> <h2>Colonne 1</h2> <p> blabla. </p> </li> <li id="col2"> <h2>Colonne 2</h2> <p> blabla. </p> </li> <li id="col3"> <h2>Colonne 3</h2> <p> blabla. </p> </li> <li id="col4"> <h2>Colonne 4</h2> <p> Cette colonne est la plus grande! </p> </li> </ol></div> 61 * {padding:0; margin:0;} ol {position:relative; margin:0 10%; list-style:none;margin-top:10px} ul {list-style:inside;} div{width:50%} #col1,#col2,#col3 {position:absolute; width:25%; height:100%; background-color:#ddeeff} #col2 {right:50%; background-color:#99ccff} #col3 {left:50%; background-color:#55aaff} #col4 {margin-left:75%; background-color:#1188ff} S. Lanquetin - L3 : Introduction Technologie pour le Web Exemple de formulaire Pourquoi ? Æ Envoyer des informations ■ 1ère méthode : informations dans l'adresse de la page (http://...) } limitée à 255 caractères } Informations visibles method="get" ■ 2nde méthode : method="post" 63 S. Lanquetin - L3 : Introduction Technologie pour le Web 64 Comment ? Elément <input /> Æ Balise Permet de créer de nombreuses commandes Syntaxe : <form> </form> ■ Attributs : } method } action : adresse de la page ou du programme qui va traiter les informations <input type="text" name="nom" value="toto" size="10" /> Æ type : type de commande à créer. Par défaut, text (saisie de texte sur 1 ligne) Æ size : largeur initiale de la commande en nb de caractères Æ maxlength : nombre maxi de caractères que l'utilisateur peut saisir Æ value : remplir le champ par défaut Ø envoyées par mail Ø Stockées BD (puis réaffichées) <form method="post" action="traitement.php"> </form> ■ Pour écrire dans un formulaire, il faut des balises de type block (<p>) 65 S. Lanquetin - L3 : Introduction Technologie pour le Web S. Lanquetin - L3 : Introduction Technologie pour le Web 66 S. Lanquetin - L3 : Introduction Technologie pour le Web 11 Elément <input /> Elément <input /> Exemple : type="password" : saisie de texte sur une ligne de type mot de passe (masqué). <form id="nomform" action=""> <h3> Nom <input type="text" name="nom" value="toto" size="10" /> </h3> </form> <label for="pass">Mot de passe</label> <input type="password" name="pass" id="pass" value="toto" size="10" /> Affichage 67 S. Lanquetin - L3 : Introduction Technologie pour le Web Elément <input /> type="radio" : bouton radio - attribut checked si case présélectionnée – attribut value obligatoire type="checkbox" : case à cocher – attribut checked si case présélectionnée - attribut value obligatoire S. Lanquetin - L3 : Introduction Technologie pour le Web <input type="checkbox" name="homme" /> homme<br /> <input type="checkbox" name="femme" checked="checked" / >femme 70 S. Lanquetin - L3 : Introduction Technologie pour le Web Elément <input /> Elément <input /> Æ Le type submit crée un bouton de soumission du formulaire. Effectue l'action définie dans l'élément <form> Æ Le type image crée un bouton de soumission graphique, alors l'attribut src spécifie l'URL de l'image, alt donne une alternative <input type="submit" name="envoyer" value="envoyer" /> Æ Le type reset crée un bouton de réinitialisation du formulaire <input type="reset" name="reset" value="reset" /> 71 S. Lanquetin - L3 : Introduction Technologie pour le Web Elément <input /> <p>Boutons radio<br /> <input type="radio" name="rad" value="rouge" /> rouge<br /> <input type="radio" name="rad" value="vert" /> vert<br /> <input type="radio" name="rad" value="bleu" checked="checked" /> bleu<br /></p> 69 68 S. Lanquetin - L3 : Introduction Technologie pour le Web <input type="image" src="coccinelle.gif" alt="coccinelle" /> Æ Le type button crée un bouton d'action (javascript) <input type="button" name="nom" value="Go!" /> 72 S. Lanquetin - L3 : Introduction Technologie pour le Web 12 Elément <input /> Elément <button> Æ Le type hidden crée une commande cachée Ajoute au formulaire avant l'envoi des données Comme <input> + accepte contenu <button>…</button> < input type="hidden" name="label" value="texte" /> <button type="reset" name="reset" value="reset">texte sur bouton</button> Æ Le type file crée une commande de sélection de fichier Attributs : ■ Name : nom commande ■ Value : valeur initiale ■ Type : submit,reset,button <input type="file" name="label" value="texte" /> 73 S. Lanquetin - L3 : Introduction Technologie pour le Web 74 Elément <select> S. Lanquetin - L3 : Introduction Technologie pour le Web Elément <select> Crée un menu Syntaxe : <select name="nom"> <option>…</option> … </select> Chaque option est représentée par un élément <option> Attributs : Exemple : <select name="pays" size="3" multiple="multiple"> <option>Allemagne</option> <option>Angleterre</option> <option>France</option> <option>Italie</option> </select> ■ Name ■ Size à nombre de lignes de menu affichées ■ Multiple : autorise la sélection simultanée de plusieurs items de la liste 75 S. Lanquetin - L3 : Introduction Technologie pour le Web S. Lanquetin - L3 : Introduction Technologie pour le Web Elément <select> Elément <select> Attributs de l'élément <option> : <optgroup>...</optgroup > : groupe d'options dans une liste déroulante ■ label nom du groupe ; ■ value définit la valeur passée au script ■ selected pré-sélection d'un item de la liste ou valeur par défaut du menu <select name="pays" size="3" multiple="multiple" > <option value="All">Allemagne</option> <option value="Ang">Angleterre</option> <option value="Fr" selected="selected">France</option> <option value="It">Italie</option> </select> 77 76 S. Lanquetin - L3 : Introduction Technologie pour le Web <select name="pays"> <optgroup label="Europe"> <option value="fr" selected="selected">France</option> <option value="it">Italie</option> </optgroup> <optgroup label="Asie"> <option value="ch">Chine</option> </optgroup> </select> 78 S. Lanquetin - L3 : Introduction Technologie pour le Web 13 Elément <textarea> Elément <textarea> Crée une zone de texte multiligne Attributs : ■ Name ■ Rows à nombre de lignes visibles ■ Cols à largeur visible ■ Readonly à booleen pour mode lecture seule ■ wrap à passage à la ligne automatique dans le Exemple : <textarea cols="15" rows="5" readonly="readonly">blabla </textarea> champ de saisie : } off : pas activé } virtual : affiche le passage à la ligne mais n'envoie pas les retour à la ligne au serveur } physical : affiche et transmet les retour à la ligne 79 S. Lanquetin - L3 : Introduction Technologie pour le Web Eléments <fieldset> et <legend> Æ Permet d'ajouter des libellés Æ Attribut optionnel for permet de lier le label à la commande par son attribut id Æ <fieldset> permet de rassembler par thème certains éléments d'un formulaire Æ <legend> permet d'associer une légende à ce groupe d'éléments S. Lanquetin - L3 : Introduction Technologie pour le Web <form action=""> <fieldset><legend>Sexe :</legend> <ul><li><input type="radio" value="H" name="sexe" id="Ho"/> <label for="Ho">Homme</label></li> <li><input type="radio" value="F" name="sexe" id="Fe"/> <label for="Fe">Femme</label></li></ul> </fieldset> </form> 82 S. Lanquetin - L3 : Introduction Technologie pour le Web Soumission du formulaire Les Pseudo-éléments Protocole HTTP ■ get à préféré quand pas d'effets secondaires Æ Un pseudo-élément est une caractéristique qui permet de rajouter du détail de style. (type recherche) ■ post à quand la soumission du formulaire a un effet (ajout dans une base de données) Æ On reconnaît un pseudo-élément à l’utilisation de « : » dans la définition du style correspondant Type de contenu : enctype Æ Quelques exemples ? ■ Application/x-www-form-urlencoded ■ Multipart/form-data (fichiers,données non ASCII, données binaires) 83 S. Lanquetin - L3 : Introduction Technologie pour le Web Elément <label> <label for="prenom">Prénom</label> <input type="text" name="commande prenom" id="prenom" /> 81 80 S. Lanquetin - L3 : Introduction Technologie pour le Web 84 S. Lanquetin - L3 : Introduction Technologie pour le Web 14 Quelques pseudo-éléments Les Pseudo-classe Æ Une pseudo-classe est très similaire à un pseudo-élément. :first-letter ne s’applique que sur la première lettre de l’ensemble :first-line ne s’applique que sur la première ligne de l’ensemble Æ On parle de pseudo-classe quand un objet peut avoir différents états Æ Un exemple ? On peut préciser à quel élément appliquer le pseudo-élément p:first-letter { color : red; font-size : large }; :first-letter { color : red; font-size : large }; 85 S. Lanquetin - L3 : Introduction Technologie pour le Web 86 Les Pseudo-classe liens S. Lanquetin - L3 : Introduction Technologie pour le Web Les Pseudo-classe liens Æ Un lien peu avoir plusieurs états Ø :link ■ Visité ■ Actif ■ Pointé par la souris Ø s’applique à un lien actif (avant visite) Ø :visited Ø s’applique à un lien visité Ø :active Ø au moment ou le lien est activé Æ Les pseudo-classes permettent de donner des styles différents à ces différentes classes de liens. Ø :hover Ø lorsque la souris est sur le lien Ø :focus Ø lorsque le focus est sur le lien (tabulation par exemple) 87 S. Lanquetin - L3 : Introduction Technologie pour le Web 88 Résolution d’un site S. Lanquetin - L3 : Introduction Technologie pour le Web Fixe à gauche Æ Statistiques ■ 4% d'utilisateurs en 800x600 (en juin 2009) ■ 36% en 1024x768 ■ 57% en résolutions supérieures Æ Tendances ■ Fixe à gauche ■ Fixe au centre ■ Fluide 89 S. Lanquetin - L3 : Introduction Technologie pour le Web 90 S. Lanquetin - L3 : Introduction Technologie pour le Web 15 Fixe centré Fluide Æ % Æ Bloc menu fixe et autre non précisé 91 S. Lanquetin - L3 : Introduction Technologie pour le Web 92 Fluide intelligent Æ Gérer taille extrème Gestion d’IE6 S. Lanquetin - L3 : Introduction Technologie pour le Web Favicon div { width: 80%; max-width: 1000px; min-width: 700px; } <!--[if lt IE 7]> <style type="text/css"> div { width: 770px; width: expression(document.body.clientWidth <= 602? "600px" : document.body.clientWidth >= 1002? "1000px" : "auto"); } </style> 93 <![endif]--> S. Lanquetin - L3 : Introduction Technologie pour le Web <link rel="shortcut icon" href="favicon.ico" /> Pas supporté par IE <link rel="icon" type="image/png" href="logo.png" /> 94 S. Lanquetin - L3 : Introduction Technologie pour le Web coalition anti IE6 Æ Norvège, Suède, Indonésie et Australie 95 S. Lanquetin - L3 : Introduction Technologie pour le Web 16
