STI2D SIN
Sommaire
Page 1 / 99Le langage HTML
Balisage Fichier HTML Le modèle hiérarchique Organisation des balises Corps d'un document Héritage Caractères spéciaux Balises d'entête Feuilles de style Classes Les couleursSommaire
Les liens Positionnement Les flottants Les images Tableaux FormulairesSTI2D SIN
Sommaire
Page 2 / 99Historique
•H Hyper
•T Text
•M Markup
•L Language
Né au CERN à
Genève en 1989
sous l'impulsion
de Tim Berners
Lee
Langage
d’enrichissement
de texte par
balisage
STI2D SIN
Sommaire
Page 3 / 99Versions HTML
Les versions 1 et 2 (1989-1996) ne permettaient que de structurer du texte :
hiérarchisation des titres, paragraphe, inclusion d’images et de liens.
La version 3 (1996) a introduit les éléments de décoration qui ont provoqué de
vrais cauchemars chez les développeurs de grands sites.
La version 4 (1999) a introduit les styles, ce qui a résolu le problème de la v3 et
les scripts pour interagir sur événement avec le navigateur.
La version 5 (2007) est en cours d’adoption, elle intégrée à la plupart des
navigateurs..
L’extension XHTML (2000)
Norme plus rigoureuse d’écriture en HTML introduite à partir de la v4 (se base sur
XML alors que HTML se base sur SGML)
Version actuelle 1.1 (la version 2 est abandonnée) ne prend pas en compte les
balises obsolètes de HTML 4. La dernière mise à jour date de 2010.
Le futur HTML 5 reprend l’intégralité de XHTML qui, de fait, disparaitra. C'est cette
STI2D SIN
Sommaire
Page 4 / 99Enrichissement
Rendre le document plus lisible par :
La structuration et la mise en forme des pages : hiérarchie des paragraphes, listes,
tableaux
La mise en exergue d’éléments : couleurs, formes, etc. La décoration multimédia : formes, images, sons, vidéos Formulaires de saisie
Hypertexte = les liens vers d’autres pages, éléments multimédias
STI2D SIN
Sommaire
Page 5 / 99HTML : les principes
Ce n’est pas un langage de programmation ! C’est un langage de présentation
C'est un langage à balisage qui décrit la structure logique d'un document
hypertexte. Il a volontairement été conçu pour être simple.
Il contient donc des balises pour marquer les différents types de texte (titres,
paragraphe, listes …) , pour inclure des images, des formulaires, des liens …
Le langage est normalisé par le W3C (World Wide Web Consortium)
STI2D SIN
Sommaire
Page 6 / 99Avantages et inconvénients de HTML
Le document est « léger » car il ne contient que des commandes de mise en
forme, il ne contient pas d’images, pas de polices de caractères, il indique où aller chercher les documents à afficher et comment les afficher.
Le document est « généralement » lisible par tout matériel du smartphone à
l’ordinateur de bureau quelle qu’en soit la marque.
L’apparence du document dépend du navigateur qui respecte plus ou moins bien
la norme du W3C. Par exemple Micro$oft ne respecte pas la norme du W3C sur la marge autour des images ... Et ce n’est pas la seule entorse !
STI2D SIN
Sommaire
Page 7 / 99Le client doit pouvoir interpréter HTML et afficher le résultat. Ils sont divers, tournant sur des systèmes différents :
Firefox, Internet Explorer, Safari, Opéra, Konqueror, Iceveasel en mode texte :
Lynx, w3m …
STI2D SIN
Sommaire
Page 8 / 99Que choisir pour écrire de l' HTML?
A la main, avec un éditeur de texte simple
En environnement Linux : vi, gedit.
En environnement Window$ notepad++
Avec un logiciel "assistant " de code HTML
PageSpinner sur MacIntosh, Amaya sur Unix, HTML-Kit sur PC … A l'aide d'un programme dit "WYSIWYG"
Dreamweaver , Golive, Netscape composer, FrontPage, Claris Homepage ...
A l'aide d'un filtre
Les commandes "enregistrer sous html", que l'on trouve dans les suites bureautiques.
Dans quasiment tous les cas les éditeurs HTML produisent un code verbeux, non conforme aux standards. On leur préfèrera l’édition « à la main » !
STI2D SIN
Sommaire
Page 9 / 99HTML : exemple
Rendez-vous sur à http://www.systemx.fr
Donner des exemples
de liens hypertexte De contenu multimédia
Avec votre navigateur
IE Affichage > Source
Firefox Outils > Développeur Web > Code source de la page
STI2D SIN
Sommaire
Page 10 / 99Introduction au balisage
Pour décrire un fichier hypertexte, le langage HTML insère des
balises dans le texte du document :
Balise ouvrante
Balise fermante
Sans balise fermante
<
balise
>
ici votre texte
</
balise
>
<
balise
ici votre texte
/>
STI2D SIN
Sommaire
Page 11 / 99Introduction au balisage
Il faut respecter une logique d'imbrication : il ne doit pas y avoir de chevauchement de balises. Bon: <balise1> <balise2> Le cours HTML </balise2> </balise1> Mauvais: <balise1> <balise2>
Le cours HTML
</balise1> </balise2>
STI2D SIN
Sommaire
Page 12 / 99Les attributs
Les balises peuvent posséder un ou plusieurs attributs qui permettent de spécifier l'action de la balise.
Un attribut possède un argument.
Toujours mettre l'argument de l'attribut entre guillemets. Plusieurs attributs sont séparés par des espaces
Exemple :t
<marqueur attribut="argument">texte</marqueur>
STI2D SIN
Sommaire
Page 13 / 99Les commentaires
<!–- Voici un commentaire HTML -->
<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes
STI2D SIN
Sommaire
Page 14 / 99Structure de base d'un fichier HTML
Un fichier HTML est un document enfant de « fenêtre » (celle du navigateur,
lui-même application enfant de "écran") qui contient lui lui-même deux « enfants » : l’entête (head) et le corps (body). Dans l’exemple suivant on verra qu’il y a une balise « title » (obligatoire en HTML 5) qui est un enfant de « head ».
Mais avant que le navigateur puisse analyser le document on doit lui préciser
Le type de caractères que l’on va échanger (UTF-8) Le type de document qui va être lu (HTML)
La norme utilisée (HTML seul implique la version 5)
La langue et le pays du document (fr-FR=français de France. Il existe d’autres
pays francophones, par exemple fr-BE, fr-CA, fr-CH, fr-LU etc.)
C’est un peu obscur comme syntaxe pour le moment mais ça s’éclaircira … Un fichier HTML minimal ressemblera à ça :
STI2D SIN
Sommaire
Page 15 / 99Structure de base d'un fichier HTML
<!DOCTYPE html> <html lang="fr"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mon premier fichier HTML</title> </head>
<body>
</body> </html>
STI2D SIN
Sommaire
Page 16 / 99Le modèle hiérarchique
Depuis l’écran jusqu’au document affiché il y a une suite d’éléments « parent >
enfants » qui héritent l’un de l’autre
Exemple
L’écran est la « racine » du modèle
L’écran est le « parent » de la fenêtre ou la fenêtre est « l’enfant » de l’écran. La
fenêtre hérite des propriétés de l’écran : nombre de couleurs, résolution, etc.
L’écran peut avoir plusieurs enfants fenêtre. Les fenêtres n’ont qu’un père : l’écran.
Elles héritent toutes identiquement de l’écran.
Le document est « l’enfant » de la fenêtre. Il hérite des propriétés de la fenêtre : taille,
position, etc.
La fenêtre peut avoir plusieurs « enfants » documents qui héritent tous identiquement.
Les enfants d’un même parent sont dits « siblings »
Chaque élément d’un document hérite de son « parent » (le document) Un élément peut hériter d’un autre élément si ils sont imbriqués.
STI2D SIN
Sommaire
Page 17 / 99Le modèle hiérarchique
Écran
Fenêtre 1
Fenêtre 2
Fenêtre 3
Document 1-1
HTML 1-2
Document 2
Document 3
HEAD
BODY
DIV 2
DIV 1
Enfant
Père
Sibling
Père
Enfant
Père
Enfant
Données
d’entête
Texte 1
Texte 2-1
Texte 2-2
Sibling
STI2D SIN
Sommaire
Page 18 / 99Le modèle hiérarchique
Texte 1 hérite des propriétés de DIV1
Texte 2-1 et Texte 2-2 sont enfants de la même famille (sibling)
Texte 2-1 et Texte 2-2 sont enfants de DIV 2. Ils héritent identiquement des
propriétés de DIV 2
Texte 1 et Texte 2-x n’ont pas le même héritage
DIV 1 et DIV 2 héritent identiquement des propriétés de BODY BODY hérite des propriétés de HTML 1-2
HTML 1-2 hérite des propriétés de Fenêtre 1
STI2D SIN
Sommaire
Page 19 / 99Validation
Créer un fichier HTML minimal comme vu précédemment Valider ce fichier sur http://validator.w3.org
Quels sont le(s) message(s)
D’avertissement(s) ? D’erreur(s) ?
Vous devez avoir le message :
This document was successfully checked as HTML 5 !
STI2D SIN
Sommaire
Page 20 / 99Organisation des balises
Les balises peuvent être de deux types
Blocs : ces balises découpent le texte en parties logiques : divisions, entêtes,
paragraphes, listes, tableaux, formes etc. Il y a un retour à la ligne après une balise de type bloc
La balise de base est la division : <div> ... </div>
En ligne. À l’intérieur d’un bloc il y a des éléments qui représentent les propriétés
du texte : gras, italique, indice, exposant etc.
La balise de base est la portée (ou l'envergure) : <span> … </span>
Exemple :
<div> <!– Division -->
Texte dans <span>une balise span</span> de la premiere division ! <!-- Il n'y a pas d'accent intentionnellement -->
</div>
Un retour à la ligne sera interprété comme un espace
STI2D SIN
Sommaire
Page 21 / 99Organisation des balises
Compléter le corps du fichier précédent <body>
<div> <!– Division 1 -->
Texte dans une balise div <span> et dans une balise span</span> de la premiere division !
Saut de ligne. </div>
<div> <!– Division 2 -->
Autre texte dans une balise div <span> et dans une balise span</span> de la seconde division !
Plusieurs espaces. </div>
</body> Conclusions ?
STI2D SIN
Sommaire
Page 22 / 99Organisation des balises
Ici : http://www.w3schools.com/tags/ref_html_dtd.asp vous trouverez la liste des balises supportées suivant la version de HTML / XHTML utilisée
Le W3C organise les balises en module (ce qui permet, en ajoutant un module au navigateur, de créer de nouvelles balises).
Module « structure » : éléments de base de la structure d’un document HTML
<html> contient obligatoirement <head> et <body> <head> contient obligatoirement au moins <title>
<title> contient ce qui apparaitra dans l’onglet du document
<body> peut ne rien contenir mais ceci ne présente que peu d’intérêt. Seules les
STI2D SIN
Sommaire
Page 23 / 99Organisation des balises
Module « text » : ces balises peuvent être de type bloc, ou ligne
Type bloc
<div> division <p> paragraphe
<pre> texte pré-formatés <h1> à <h6> entête …
Type en ligne
<br /> saut de ligne
<em> mise en évidence (en emphase) …
Module « HyperText » : conteneur de lien de type en ligne
STI2D SIN
Sommaire
Page 24 / 99Organisation des balises
Module « list » : listes numérotées ou listes à puces de type bloc
<ul> liste à puce <ol> liste numérotée <li> élément de liste
…
Module « présentation » : formatage de caractères de type en ligne
<b> gras <i> italique
<hr/> trait horizontal
…
Module « form » : formulaires de saisie Module « table » : tableaux
Module « image » : type bloc
STI2D SIN
Sommaire
Page 25 / 99De l’aide sur le web
La référence : http://www.w3.org/2007/07/xhtml-basic-ref.html
Contient le liste des balises admises et les attributs possible(s) / obligatoire(s) La couleur change selon le type « in line » ou « block »
Exemple
Est-ce que la balise abbr accepte des éléments de type block ? Quels éléments de type block la balise dd accepte-t-elle ?
Est-ce que la balise br accepte des éléments d’un des deux types ? Quel élément est obligatoire avec la balise ol ?
Quel attribut est obligatoire avec la balise img ?
STI2D SIN
Sommaire
Page 26 / 99Corps d'un document
On va s’intéresser maintenant uniquement à ce qui se trouve à l’intérieur du corps du document
<body>
… éléments de corps </body>
Les balises que l'on va trouver dans le corps divisent le contenu du document en sections logiques. Ces sections vont se diviser en entêtes et blocs de texte. La balise body n’accepte que ces deux types de balises.
Les entêtes définissent des niveaux de titres. Par exemple <h1>Ceci est un entête de niveau 1</h1>
<h2>Et cela est un entête de niveau 2</h2> Il existe 6 niveaux d’entête de h1 à h6
STI2D SIN
Sommaire
Page 27 / 99Corps d'un document
• Une bonne habitude consiste à organiser d’abord le document en divisions.
Exemple :
<div> <!-– Une division -->
Une balise de type bloc n’est pas obligatoire dans une balise div <h1>Entête de niveau 1 dans une division</h1>
•<p>ceci est un paragraphe dans une division</p>
</div>
• A l’intérieur d’un bloc il y a des éléments qui représentent les propriétés du texte
(ex : gras, italique, indice, exposant ...). Exemple :
<p>Modification de
l’apparence<b>en gras
</b>
ou<i>
en italique</i>
dans un paragraphe</p>• Il est déconseillé d'imbriquer des blocs
• Bon <p> ... </p> <ol> ... </ol> <p>... </p> • Pas bon <p> ... <ol> ... </ol> ... </p>
STI2D SIN
Sommaire
Page 28 / 99Corps d'un document
•Pour tous ces exercices valider votre travail sur le site du W3C
• Modifier le corps de votre fichier de base en ajoutant à l’intérieur d’une balise de
division les balises de bloc suivantes :
• Entêtes sur trois niveaux
• Paragraphe avec un mot en gras seulement, en italique seulement et en gras
italique simultanément
• Décrire et tester les balises en ligne du module « text » suivantes : •abbr et acronym (prennent un attribut title=" ... ")
•code •cite •q •em •samp •strong •var •br et hr (sans fermeture)
STI2D SIN
Sommaire
Page 29 / 99Corps d'un document
Décrire et tester les balises suivantes du module « presentation » (on a déjà vu les balises b et i) :
hr
(sans fermeture)big
small
tt
sub
sup
STI2D SIN
Sommaire
Page 30 / 99Corps d'un document
• Quel est le comportement des balises de présentation à l’intérieur d’une balise
pre (module « text »)
• Balises du module « list ». Mettre en évidence les différences entre les listes • dl
• dt
• dd (item de liste des deux balises ci-dessus) • ul
• ol
• li (item de liste des deux balises ci-dessus) • Imbriquer deux niveaux de listes non ordonnées
STI2D SIN
Sommaire
Page 31 / 99Texte de remplissage
Pour faire un document maquette on utilise généralement un texte incompréhensible qui représente assez bien ce que sera visuellement n’importe quel texte une fois le document publié. Ce texte de remplissage est appelé « lorem ipsum », il figure ci après :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
STI2D SIN
Sommaire
Page 32 / 99Héritage
Mettre du texte dans le corps
Indiquer dans la balise <body> un attribut text ayant pour argument la valeur
green. Résultat ?
Valider sur http://validator.w3.org. Résultat ?
Remplacer l’attribut text de body par le nouvel attribut :
style
avec l’argument :
"color:green; text-align:center"
Valider. Résultat ?
Si tout s’est bien déroulé c’est que vous deviez avoir quelque chose qui
STI2D SIN
Sommaire
Page 33 / 99Héritage
<!DOCTYPE html> <html lang="fr"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Heritage</title> </head>
<body style="color:green; text-align:center"> <p>Mon premier <b>texte <i>HTML</i></b></p> </body>
STI2D SIN
Sommaire
Page 34 / 99Héritage
Reprendre le précédent fichier
Placer deux balises de division <div> qui héritent identiquement (sibling) de
<body>
Par défaut le texte sera en vert, centré
Placer trois paragraphe dans la première division et un dans la seconde
Faire en sorte que dans la première division le texte soit aligné à droite, affiché
en bleu pour le premier paragraphe et en rouge pour le second. Pas de modification pour le troisième.
Visualiser dans votre navigateur. Résultat ? Chaque paragraphe hérite de quoi ?
Valider. Résultat ?
Faire des essais avec l’argument de style background-color:couleur dans
STI2D SIN
Sommaire
Page 35 / 99Héritage
STI2D SIN
Sommaire
Page 36 / 99Héritage
À l’intérieur d’un paragraphe utiliser la balise font avec les attributs :
face="arial" size="20" color="blue"
Montrer que cette balise est obsolète
Toujours dans le cours d’un paragraphe, dans une balise span, fixer la police de
caractères en modifiant l’attribut style de la manière suivante :
font: italic bold 20px arial Couleur du texte : bleue
Remarque : la balise span n’altère pas la présentation, elle sert à regrouper certains éléments de présentation.
Fixer la police de caractère par défaut pour une division et changer la taille de la
police uniquement pour une partie d’un paragraphe. On utilisera l’argument font-size de l’attribut style.
STI2D SIN
Sommaire
Page 37 / 99Caractères spéciaux
Les caractères accentués ou spéciaux ne sont pas identiques dans toutes les
langues, ils devront faire l'objet d'un codage spécial au sein du fichier HTML. é s'écrit é être s'écrit être
Les serveurs Web peuvent imposer le jeu de caractères accentués au
navigateur. On spécifie l'encodage dans le fichier HTML dans l’entête avec une balise meta :
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
Attention : fidèle à ses mauvaises habitudes Micro$soft traine dans l’adoption des
standards ainsi WXP est en ISO-8859-15 (pourtant affiché ISO-8859-1) alors que Seven est en UTF-8. Il était temps !
STI2D SIN
Sommaire
Page 38 / 99Caractères spéciaux
Fixer le jeu de caractères à UTF-8
Écrire les caractères accentués du français (majuscule et minuscule) Ecrire les caractère & (esperluette) < > ‘ (apostrophe) " (guillemet) € Visualiser votre page dans le navigateur
Changer le je de caractères du navigateur. Constat ?
IE 9 Affichage > Codage
Firefox Affichage > Encodage des caractères
Changer le jeu de caractères de votre page
STI2D SIN
Sommaire
Page 39 / 99Les balises d’entête
La balise meta est une des balises d’entête. Les attributs name et content
permettent de renseigner les moteurs de recherche sur le contenu de la page.
Attribut name. Ses arguments peuvent être :
"author""description" "keywords"
"description"
Ces arguments impliquent un second attribut : content qui a pour argument le renseignement attendu. Exemple :
<meta name="author" content="Solange ACHAIRE">
Compléter votre page
STI2D SIN
Sommaire
Page 40 / 99Les balises d’entête
La balise meta permet aussi de communiquer avec le navigateur par l’intermédiaire de l’attribut http-equiv. Nous avons déjà vu comment fixer le jeu de caractères, la langue et le pays mais sans pouvoir les changer dynamiquement. Ceci pourra se faire avec cette balise (site multilingue).
http-equiv=
"content-type" nécessite un second attribut : content="text/html; charset=utf-8" l'argument fixe le type MIME
(Multipurpose Internet Mail Extensions) dans ce cas un texte lisible par un humain (text), en format html, utilisant le jeu de caractères UTF-8
STI2D SIN
Sommaire
Page 41 / 99Les balises d’entête
On aura par exemple : <head>
<title>Les balises meta</title>
<meta name="author" content="Solange ACHAIRE">
<meta http-equiv="content-type" content="text/html; charset=utf-8>
STI2D SIN
Sommaire
Page 42 / 99Les feuilles de styles CSS
Elles permettent de changer la mise en forme d'une page HTML sans en modifier
son contenu.
Le langage CSS spécifie l'apparence des blocs de texte ou image, et il peut
contrôler d'une manière très précise le positionnement des objets, les bordures, les marges, le recouvrement …
Le style peut être défini hors de la page HTML grâce à un fichier externe. La
modification de ce fichier change l’apparence de toutes les feuilles y faisant référence.
STI2D SIN
Sommaire
Page 43 / 99Les feuilles de styles CSS
Le navigateur lit le document
Il lit ensuite la feuille de style associée et interprète les différentes règles de
formatage.
STI2D SIN
Sommaire
Page 44 / 99Les feuilles de styles CSS – Les règles
Une feuille de style consiste en un ensemble de règles qui définissent le formatage des éléments (balises) d'un document HTML. On applique à une sélection un
ensemble de propriétés en écrivant : Sélecteur {Propriété: Valeurs;} Exemple :
h1 { color:blue; }
Sélecteur Propriété Valeur h2, h3 { font-weight:bold;
font-family:arial; }
Sélecteur multiple
Dans ce cas tous les entêtes de niveau 1 seront écrits en bleu. Les entêtes de niveau 2 et 3 seront écrits en police Arial gras. On remarque que le caractère de regroupement est une virgule.
STI2D SIN
Sommaire
Page 45 / 99Page sans style
STI2D SIN
Sommaire
Page 46 / 99Premier style
STI2D SIN
Sommaire
Page 47 / 99Premier style
body { font-size:75%; Font-family:verdana, arial, 'sans serif'; background-image:url ('gradient.png'); background-repeat:repeat-x; background-color:#FFFFF0; color:#000080; margin:70px; } h1 {font-size:200%;} h2 {font-size:140%;} h3 {font-size:110%;} th {background-color:#ADD8E6;} ul {list-style:circle;} ol {list-style:upper-roman;} a:link {color:#000080;} a:hover {color:red;}STI2D SIN
Sommaire
Page 48 / 99Second style
STI2D SIN
Sommaire
Page 49 / 99Second style
body { font-size:75%; font-family:"lucida calligraphy",arial,'sans serif'; background-color:#DCDCDC; color:#8A2BE2; margin:10px; } h1 {font-size:200%;} h2 {font-size:140%;} h3 {font-size:110%;} th {background-color:#D3D3D3;} td {background-color:#FFFAF0;} a:link {color:#8A2BE2;text-decoration:none;} a:hover {color:red;font- weight:bold;text-decoration:none;} a:visited {text-decoration:none;}STI2D SIN
Sommaire
Page 50 / 99 En externe, c'est un fichier indépendant du fichier HTML, on utilise dans l'entête
du document la balise link :
<link href="monstyle.css" rel="stylesheet" type="text/css" title="Mon style"/>
Exemple de fichier monstyle.css :
h1 { font-family: Arial, Helvetica, 'sans-serif'; }
En interne, dans l' entête de document, le style est spécifié pour tout le document
entre les balises style :
<style type="text/css">
h1 { font-family: Arial, Helvetica, 'sans-serif'; } </style>
En interne, dans le corps du document, le style est appliqué localement au texte
<h1 style='font-family: "Courier New", Courier, monospace;'>Mon titre</h1>
STI2D SIN
Sommaire
Page 51 / 99Les feuilles de styles CSS
Priorité des styles
Lorsque les styles sont définis plusieurs fois dans des endroits différents pour le même élément ils sont, par priorité décroissante :
Style inline défini dans une balise. Ex : <span style=" … "> … </span> Style défini dans l’entête
Style externe
Style par défaut du navigateur
D’où le nom de cascade. Exemple :
Fichier externe : h1 { font-family: Arial; font-size:200%;} Les balises h1 de tous les documents utilisant cette feuille externe seront en police arial de hauteur double de la police par défaut
Entête : h1 { font-size:150%;}
Dans ce document, même si il est fait appel à la feuille externe la hauteur de la police sera 1.5 fois la hauteur par défaut. La fonte sera toujours arial remplaçant la fonte par défaut du navigateur (en général Times).
STI2D SIN
Sommaire
Page 52 / 99Exercice CSS
Créer une feuille de style afin de hiérarchiser les balises h1, h2 et h3
Décaler chaque titre successivement vers la droite de 5% de la largeur Diminuer les polices par pas de 50% jusqu’à ce que h3 soit à 100% Fixer la police par défaut à Arial, gras, souligné.
Exemple
Titre de niveau 1
Titre de niveau 2
STI2D SIN
Sommaire
Page 53 / 99Exemples de style des balises de listes
<ul> . . </ul> Liste non triée, liste à puces <ol> . . </ol> Liste triée, liste à numéros <li> . . </li> Élément de la liste
Et aussi: dl, dt, dd Quelques éléments de style
ul
list-style-type:none/circle/square list-style-position:outside/inside list-style-image:url("exemple.png") padding:pixels/%/em margin:pixels/%/emol
list-style-type:upper-roman/lower-alphaSTI2D SIN
Sommaire
Page 54 / 99Exercice style des balises de listes
Créer deux listes chacune ayant deux niveaux
Une ordonnée
1. Item 1
a. Sous item 1-a b. Sous item 1-a
2. Item 2
a. Sous item 2-a
Une à puce Item Sous item Sous item Item Sous item
Pour la liste à puce changer l’image de la puce (sélecteur ul dans la feuille de
style)
STI2D SIN
Sommaire
Page 55 / 99On peut créer ses propres styles. On a alors une classe. Dans la feuille de style la classe commence toujours par un point « . » suivi obligatoirement d’un
caractère alphabétique. Exemple:
.maclasse { font-family:Arial,"sans serif";
font-size:px/%/em/larger/smaller; font-style:normal/italic/oblique; font-weight:normal/bold/bolder/lighter text-align:left/right/justity/center; text_color:#4169E1; text-indent:px/%/em;}
Une classe peut être définie dans une feuille externe (cas le plus fréquent) ou en entête.
STI2D SIN
Sommaire
Page 56 / 99 on applique une classe à un élément avec l' attribut
class
suivi du nom de laclasse (sans le point) comme argument
Plusieurs éléments de nature différente peuvent utiliser la même classe Dans le corps du document
pour une partie d’un bloc:
<p>Texte pour essayer : <span class="maclasse">la partie du texte formatée suivant la classe</span> maclasse.</p>
Pour un bloc entier :
<p class="maclasse">Paragraphe formaté suivant maclasse</p>
STI2D SIN
Sommaire
Page 57 / 99Les feuilles de styles CSS – les classes
Créer deux classes pour écrire en :
rouge bleu
Appliquer ces classes
À deux paragraphes distincts
À des mots à l’intérieur d’un même paragraphe
Variante : même exercice avec des noms de couleur de votre choix.
STI2D SIN
Sommaire
Page 58 / 99Les feuilles de styles CSS – les classes
Reproduire la présentation ci-dessous en utilisant les classes. Les paragraphes
sont en fonte times. Exemple :
Entête de niveau 1
(fonte arial black gras souligné 200%)Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Entête de niveau 2 (fonte arial souligné 150%)
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Entête de niveau 3 (fonte arial souligné)
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
STI2D SIN
Sommaire
Page 59 / 99On peut restreindre l’utilisation d’une classe donnée à certains éléments. Ici, la règle concerne uniquement les éléments p dont l'attribut class possède la valeur "maclasse".
Dans la feuille de style
p.maclasse { font-family: Arial, Helvetica, sans-serif;
font-size: larger;
font-style: italic;
text-align: center;
color: #4169E1;}
Dans le corps du document:
<p class="maclasse">la partie du texte formatée suivant maclasse</p> … <span class ="maclasse">Ne donne aucun résultat</span> …
STI2D SIN
Sommaire
Page 60 / 99Les feuilles de styles CSS – les classes
Exemple : <head> <style type="text/css"> p.centrer {text-align:center;} </style> </head> <body>
<h1 class="centrer">Cette déclaration est sans effet</h1> <p class="centrer">Ce paragraphe est centré.</p> </body>
STI2D SIN
Sommaire
Page 61 / 99Les feuilles de styles CSS – les emboitements
On peut définir une classe à l’intérieur d’une classe "supérieure" dont elle héritera
des propriétés. Exemple :
La classe :
.maclasse { background-color:red;
font-family:arial;}
Le style de tous les paragraphes :
p { color:blue;
text-align:center;
font-family:times;}
Le style des paragraphes dans un élément de style maclasse
.maclasse p { color:white;
STI2D SIN
Sommaire
Page 62 / 99Les feuilles de styles CSS – les emboitements
Exemple :
<body>
<p>Ce paragraphe est écrit en bleu, police times et centré</p>
<div class="maclasse">
<!– Arrière plan rouge et police arial pour toute la division -->
<p>Ce paragraphe est en blanc sur fond rouge aligné à gauche en police arial</p>
</div> </body>
STI2D SIN
Sommaire
Page 63 / 99Les feuilles de styles CSS – les emboitements
Créer trois divisions de couleurs d’arrière plan différentes : darkorange, lightcoral
et steelblue
Dans chacune des divisions écrire respectivement en : black, aqua et yellow en
police courier (avec un seul « r »), arial et arial black.
La première division sera celle par défaut les deux autres seront affectées
chacune par une classe
Créer un style pour le paragraphe par défaut : centré, police times de couleur
bleue.
Dans les deux dernières divisions les paragraphes seront respectivement : de
couleur blanche, aligné à gauche et de couleur deeppink aligné à droite.
STI2D SIN
Sommaire
Page 64 / 99Les feuilles de styles CSS – les emboitements
STI2D SIN
Sommaire
Page 65 / 99Les couleurs du web
Les couleurs naturelles et électroniques
L’œil humain ne perçoit pas les couleurs comme un capteur électronique. Nos couleurs de base sont le bleu le rouge et le jaune (Cyan Magenta Yellow = CMY), ce sont celles que l’on utilise en imprimerie, alors qu’en électronique les couleurs de base sont le rouge, le vert et le bleu ( Red Green Blue = RGB)
Les couleurs naturelles sont dites soustractives car le mélange des trois couleurs primaires (CMY) produit du noir alors que le mélange des trois couleurs primaires de l’électroniques (RGB) produit du blanc. Elles sont dites additives.
Le mélange de deux couleurs primaires donne une couleur secondaire.
On remarque que les couleurs secondaires de l’électronique sont les couleurs primaires naturelles (approximation).
STI2D SIN
Sommaire
Page 66 / 99Les couleurs du web
Chacune des couleurs électroniques a une intensité qui varie de 0 à 255. Une
couleur est donc définie par trois chiffres. Par exemple le rouge est représenté par (255,0,0), le vert par (0,255,0) et le bleu par (0,0,255).
Le mélange des trois couleur donnera donc 2563 combinaisons soit 16 777 216
couleurs allant du noir (0,0,0) au blanc (255,255,255)
On obtient du gris quand les trois couleurs sont au même niveau. (51,51,51) est
un gris plus foncé que (102,102,102).
Les couleurs « safe web » sont obtenues à partir de 6 valeurs distinctes des trois
composantes soit : 0, 51, 102, 153, 204 et 255. On a donc 63 = 216 couleurs dont
l’affichage correct est garanti sur le web.
Pour simplifier l’utilisation des couleurs 147 noms ont été normalisés dont 17 pour
lesquels l’affichage est garanti : aqua, black, blue, fuchsia, gray, grey, green, lime,
maroon, navy, olive, purple, red, silver, teal, white, and yellow. Par exemple la
STI2D SIN
Sommaire
Page 67 / 99Les couleurs du web
Pour réaliser un accord chromatique valide, choisir des couleurs opposées, en triangle ou en carré.
Le site http://colorschemedesigner.com est une excellente aide pour concevoir des pages web de qualité (du point de vue du choix des couleurs au moins).
STI2D SIN
Sommaire
Page 68 / 99Les couleurs du web
Les couleurs impossibles
L’œil humain perçoit les couleurs selon le spectre continu représenté ci dessous
On ne peut donc pas mélanger le vert et le rouge, il y a le jaune entre les deux, pas plus que le bleu et le jaune, il y a le vert entre les deux.
STI2D SIN
Sommaire
Page 69 / 99Les couleurs du web
Les couleurs affectent par exemple (liste non limitative) :
L’arrière plan : background-color Le texte : color
L’encadrement : border-color
Elles sont définies par :
Le nom : http://www.w3schools.com/cssref/css_colornames.asp La valeur hexadécimale : #R16G16B16 exemple le vert : #00ff00 La valeur décimale : rgb(R,G,B) exemple le bleu : rgb(0,0,255)
Les navigateurs modernes acceptent la transparence. Elle se définie par un indice
d’opacité compris entre 0 et 1, uniquement en définition RGB. Exemple rouge demi opaque : rgba(255,0,0,0.5). Remarque : CSS3 introduit l’attribut opacity.
Exemples (les trois valeurs donnent la même couleur)
background-color:BurlyWood color:#DEB887
STI2D SIN
Sommaire
Page 70 / 99Exercice
Écrire une ligne en 5 dégradé de jaune (255 à 51) sur 5 fond dégradé de gris (0 à
STI2D SIN
Sommaire
Page 71 / 99Les liens
Un lien est un élément cliquable qui conduit à un emplacement à l'intérieur du
document ouvert ou à un autre document. Il est créé par une balise en ligne qui se définie par <a>Texte du lien</a>.
Attributs :
href = "URL"
Exemple : <a href = "http://www.systemx.fr">Le site de SystemX</a>
Style. L’apparence des liens est gérée par des pseudo-classes :
a:link {color:#FF0000;} Lien pas encore visité (rouge) a:visited {color:#00FF00;} Lien visité (vert)
a:hover {color:#FF00FF;} La souris est sur le lien (magenta) a:active {color:#0000FF;} Le lien est cliqué (bleu)
On peut ajouter n’importe quel élément de décoration compatible (text-decoration, font-weight …)
STI2D SIN
Sommaire
Page 72 / 99Les liens
Réaliser une page avec 4 liens, un pour chaque bateau, un click ouvrant dans un
nouvel onglet la photo adéquate.
Les photos sont à http://sin.sti2d.org/IMG/jpg/boatX-Y.jpg où
X est l'un des bateaux, prend les valeurs 1,2,3 ou 4 Y est la taille de la photo, prend les valeurs xxs, xs et s
Exemple : http://sin.sti2d.org/IMG/jpg/boat4-s.jpg Changer les style selon que le lien :
n’est pas encore cliqué : police arial black, Déjà cliqué : police arial
STI2D SIN
Sommaire
Page 73 / 99Positionnement
L ’attribut de style position permet de placer un élément sur la page. Il permet
aussi de placer un objet au premier plan recouvrant ainsi un objet au second plan.
Les arguments de positionnement sont :
static : par défaut en suivant le flux normal de la page. Les attributs de placement
n’ont aucun effet.
fixed : par rapport à la fenêtre du navigateur. Ne défile pas quand on déplace la
fenêtre.
absolute : par rapport à la position du premier conteneur parent qui n’a pas une
position static. S’il n’y en a pas le parent sera html.
relative : par rapport à sa position normale dans le flux.
Les attributs de placement sont :
left right
top
bottom
STI2D SIN
Sommaire
Page 74 / 99Positionnement « fixed »
Exemple : <body> <p><img src="http://sin.sti2d.org/IMG/jpg/boat1-xs.jpg" alt="Bateau 1"/></p> <p style="position:fixed;top:0;left:420px"><img src="http://sin.sti2d.org/IMG/jpg/boat2-xs.jpg" alt="Bateau 2"/></p> <p><img src="http://sin.sti2d.org/IMG/jpg/boat3-s.jpg" alt="Bateau 3"/></p> <p><img src="http://sin.sti2d.org/IMG/jpg/boat4-s.jpg" alt="Bateau 4"/></p> </body> Conclusions ?
STI2D SIN
Sommaire
Page 75 / 99Positionnement « relative »
Exemple : Le style : .jaune { background-color:yellow; color:green; top:2em; } .verte { background-color:green; color:yellow; bottom:2em; } Le corps :<p>Attention au risque de chevauchement !!! </p>
<p>Relative : <span style="position:relative;" class="jaune">d'un texte top</span> et <span style="position:relative;"
class="verte">d'un texte bottom</span></p> <p>Le résultat n'est pas terrible !!!</p>
STI2D SIN
Sommaire
Page 76 / 99Positionnement « absolute »
Exemple (parent positionné par défaut à static) :
Le style : .rouge { background-color:red; color:blue; top:2em; } .bleue { background-color:blue; color:red; bottom:2em; } Le corps :
<p>Absolute : <span style="position:absolute;" class="rouge">d'un texte top</span> et <span style="position:absolute;"
class="bleue">d'un texte bottom</span></p>
STI2D SIN
Sommaire
Page 77 / 99Positionnement « absolute »
Exemple (parent positionné à relative) :
Le style est inchangé Le corps :
<p style="position:relative;top:2em;left:10%;" >
Statique : <span style="position:absolute;" class="rouge">d'un texte top</span> et <span style="position:absolute;" class="bleue">d'un texte bottom</span>
</p>
STI2D SIN
Sommaire
Page 78 / 99Les flottants
Le navigateur affiche le contenu de la page en suivant l’ordre du code HTML de
gauche à droite et de haut en bas sur la totalité de l’espace disponible.
Le navigateur considère le contenu d’une balise comme une boite (box). Les balises de type bloc sont alignées dans une succession verticale.
Exemple en mode bloc :
Style
.jaune { background-color: #ffff00; } .verte { background-color: #00ff00; }
Code HTML
<p class="jaune">Une boîte jaune</p> <p class="verte">Une boîte verte</p>
Affichage : tester cet exemple
Le navigateur traite successivement les deux éléments rencontrés (jaune et vert).
Comme il s'agit d'éléments de type bloc, il aligne la marge gauche de chaque élément sur la marge gauche de l'élément conteneur, c'est à dire ici le bloc conteneur parent qui est body.
STI2D SIN
Sommaire
Page 79 / 99Les flottants
Exemple de flux en conteneur div
<p>Paragraphe par défaut. Conteneur parent body</p>
<div style="background-color:yellow;margin-left:5%;width:40%;"> <p>Paragraphe aligne sur le conteneur parent div jaune</p>
</div>
<div style="background-color:green;margin-left:10%;width:40%;"> <p>Paragraphe aligne sur le conteneur parent div vert</p>
</div>
Affichage : tester cet exemple
Le navigateur aligne à gauche le premier paragraphe (marge nulle) et les deux divisions en fonction de leurs marges (margin-left 5% puis 10%) par rapport à leur conteneur initial qui est body. Le second paragraphe est aligné par rapport à son conteneur parent qui est la première division. Même chose pour le troisième paragraphe dans la dernière division.
STI2D SIN
Sommaire
Page 80 / 99Les flottants
Par défaut, les boîtes de type inline sont affichées dans une succession
horizontale.
Exemple en mode inline :
Style
.jaune { background-color: #ffff00; } .verte { background-color: #00ff00; }
Code HTML
<p>Test inline<span class="jaune">Une boîte jaune</span> et <span class="verte">une boîte verte</span></p>
Affichage : tester cet exemple
STI2D SIN
Sommaire
Page 81 / 99Les flottants
Avec l’attribut float un élément de type bloc peut être placé à gauche ou à droite (exclusivement) pendant que l’élément suivant du flux l’entoure. L’élément précédent n’est pas affecté par cet attribut.
Exemple
Le style est inchangé Corps :
<p style="float:right;width:30%" class="jaune">Paragraphe jaune flottant à droite</p>
<p class="verte">Mettre un texte lorem Ipsum assez long</p>
STI2D SIN
Sommaire
Page 82 / 99Les flottants
Mise en page sur 3 colonnes
Le style : .encolonne { float:left; width:33%; margin-left:1em; margin-right:1em; } Le corps
<p>Présentation sur 3 colonnes</p> <div class="encolonne">colonne 1
<p>Lorem ipsum … </p></div> <div class="encolonne">colonne 2
<p>Cum sociis … </p></div> <div class="encolonne">colonne 3
<p>In enim justo … </p></div>
STI2D SIN
Sommaire
Page 83 / 99Les flottants
Arrêter le flottement
Si on ne l’arrête pas la balise suivante est altérée par le flottement de la balise
précédente. A l’exemple précédent ajouter :
<div>
Cette division est altérée par le float:left de la précédente </div>
<div>
Et celle-ci ne l'est pas ! </div>
Modifier le style de la première division
<div style="clear:both "> Le flottement est arrêté </div>
STI2D SIN
Sommaire
Page 84 / 99Positionnement avec la balise div
Cette balise délimite une division sur la page. Elle peut englober des balises de
blocs (hn, p…) comme des balises inline (img, …), posséder son propre arrière plan etc. Exemple :
Division de dimension 80% x 80% dont le coin haut gauche est calé à x=15% et y=10% (positif vers le bas).
fichier css .d5 { background-color:#DDA0DD; height:80%; width:80%; position:fixed; left:15%; top:10%;
overflow:auto;} /* Si le texte à afficher déborde de la division il
apparaitra une barre de défilement */
fichier html
STI2D SIN
Sommaire
Page 85 / 99Exercice
Réaliser avec les couleurs safe web d’un modèle color scheme de votre chois la
page XHTML suivante
Le formatage des niveaux de titres et de paragraphes est celui que nous avons
déjà utilisé.
L’image de la division 1 est un lien cliquable
Les menus de la division 3, réalisés par des listes à puces, envoient le lecteur sur
une ancre du document de la division 5
Les menus de la division 6 sont factices.
Le document s’affiche dans la division 5. Y mettre assez de texte pour déborder
d’un écran.
1ière réalisation : toutes les divisions sont fixes
2ième réalisation : les division 3, 5 et 6 se déplacent ensemble avec un barre de
STI2D SIN
Sommaire
Page 86 / 99STI2D SIN
Sommaire
Page 87 / 99 Attention aux droits sur les images. La seule image qui vous appartient est celle
que vous avez prise avec votre matériel photo. Il faut aussi l'autorisation des personnes figurant sur la photo.
Attention aux images « libres de droits » . Généralement elles ne doivent pas être
retouchées et l’auteur doit être cité
Les images de Wikipedia (Wikimedia) sont vraiment libres de droit, ceux qui les ont
déposées s’y sont engagés. Il est de bon usage de mentionner « courtoisie Wikipedia ».
Attention au poids des images, il est important d'optimiser son fichier image. Inutile
de déposer une image de 10Mo, il vaut mieux déposer une image de 200 à 300 Ko et offrir un lien pour télécharger une image en résolution plus élevée.
Plusieurs formats sont lus par les navigateurs, GIF ( Graphics Interchange Format )
et JPEG (Joint Photographic Experts Goup).On utilise le GIF pour les illustrations, le JPEG pour les photos. Ces formats n’étant pas libres on leur préfèrera le
format PNG
STI2D SIN
Sommaire
Page 88 / 99Les images
La balise <img src="fichierimage" alt=" … "/> est une balise inline qui
insère une image là où en est le flux. L’image est le paramètre de l’attribut src. La paramètre de l’attribut alt est un texte qui s’affiche lorsque l’image ne
s’affiche pas.
Les deux paramètres sont obligatoires en XHTML 1.1 La source peut être un lien HTML Ex :
<img src="http://sin.sti2d.org/IMG/jpg/boat1-s.jpg" alt="Bateau 1" />
Vous pouvez utiliser librement les fichiers boat1 à 4 et pour chacun des fichiers en taille s, xs et xxs et les fichiers pelican1 à 4 en taille l et s
Ex : http://sin.sti2d.org/IMG/jpg/boat3-xs.jpg
http://sin.sti2d.org/IMG/png/pelican2-l.png
L’opacité se définie par le style opacity:0 à 1; C’est un attribut optionnel. Les images peuvent être utilisées comme arrière plan par un attribut de style.
Exemple :
background:url(klematis.jpg) repeat;
STI2D SIN
Sommaire
Page 89 / 99Exercice
STI2D SIN
Sommaire
Page 90 / 99Les tableaux
Les tables sont définies entre les balises <table> … </table>
Le contenu est divisé en : tête, pied et corps dans cet ordre impérativement
Exemple : <table> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody> </table>
STI2D SIN
Sommaire
Page 91 / 99Les tableaux
Les lignes ou rangées (row) sont définies par des balises (Table Row)
<tr> … </tr>
Sur une ligne sont définies les colonnes (Table Data) <td> … </td>
La définition se fait dans n'importe lequel des trois conteneur (tête, pied, corps)
Exemple :
<tr>
<td>Lig 1 Col 1</td> <td>Lig 1 Col 2</td> <td>Lig 1 Col 3</td> </tr>
<tr>
<td>Lig 2 Col 1</td> <td>Lig 2 Col 2</td> <td>Lig 2 Col 3</td> </tr>
STI2D SIN
Sommaire
Page 92 / 99Les tableaux
Une cellule peut déborder sur x cellules à droite
<tr>
<td colspan="2">Lig 1 Col 1 + 2</td> <td>Lig 1 Col 3</td> <!-- La colonne 2 disparait sur cette ligne -->
</tr> <tr>
<td>Lig 2 Col 1</td> <td>Lig 2 Col 2</td> <td>Lig 2 Col 3</td> </tr>
<tr>
<td>Lig 3 Col 1</td> <td>Lig 3 Col 2</td> <td>Lig 3 Col 3</td> </tr>
STI2D SIN
Sommaire
Page 93 / 99Les tableaux
Une cellule peut déborder sur y cellules en dessous
<tr>
<td rowspan="3">Lig 1 + 2 + 3 Col 1</td> <td>Lig 1 Col 2</td> <td>Lig 1 Col 3</td>
<!-- La colonne 1 disparait dans les deux rangées suivantes --> </tr>
<tr>
<td>Lig 2 Col 2</td> <td>Lig 2 Col 3</td> </tr>
<tr>
<td>Lig 3 Col 2</td> <td>Lig 3 Col 3</td> </tr>
STI2D SIN
Sommaire
Page 94 / 99Les tableaux
Hors des balises <thead> et <tfoot> qui sont faites pour ça une cellule peut être un entête de ligne ou de colonne avec la balise <th> à la place de <td>
Le style par défaut est gras, centré
<tbody> ... <tr> <th colspan="3">Lig 1 Col 1 + 2 + 3</th> </tr> <tr>
<td>Lig 2 Col 1</td> <td>Lig 2 Col 2</td> <td>Lig 2 Col 3</td> </tr>
...
STI2D SIN
Sommaire
Page 95 / 99Les tableaux
La légende est la balise <caption> située immédiatement après <table> Le cadre est un style de <table>
L'épaisseur du quadrillage est l'attribut border de <table>
Réaliser ce tableau
STI2D SIN
Sommaire
Page 96 / 99Les formulaires
La balise <form> permet de créer des formulaires, qui peuvent contenir des
zones de texte à saisir, des cases à cocher, des boutons radio, des listes déroulantes …
<form action="mon_programme.pl">
<div> <!-- La forme ne peut contenir que des blocs --> … éléments du formulaire
</div> </form>
Lorsque le masque de saisie sera validé le programme mon_programme.pl sera
exécuté par le serveur avec comme arguments les données de la forme. Si besoin, après traitement, des informations seront envoyées au client.
STI2D SIN
Sommaire
Page 97 / 99Eléments de formulaire
Les éléments de formulaire sont de type inline.
Chaque élément doit avoir un nom "name" unique qui servira d'argument au
moment de la validation avec la valeur de "value" Exemple :
<form action=""> <!-- action est un attribut obligatoire -->
<div>
Un champ de texte <input type="text" name="firstname" value=""/><br/> Un bouton radio à trois choix exclusifs<br/>
<input type="radio" name="rad1" value="check1"/>Choix 1<br/>
<input type="radio" name="rad1" value="check2" checked="checked"/>Choix 2<br/>
<!-- checked : coché par défaut -->
<input type="radio" name="rad1" value="check3"/>Choix 3<br/> ...
Pour que les cases à cocher puissent être exclusives celles-ci doivent appartenir à un input de même nom ici "rad1"
STI2D SIN
Sommaire
Page 98 / 99Eléments de formulaire
Un case à cocher à choix multiples<br/>
<input type="checkbox" name="chk1" value="choix4"/>Choix A<br/>
<input type="checkbox" name="chk2" value="choix5"/>Choix B<br/> <input type="checkbox" name="chk3" value="choix6"/>Choix C<br/> Liste déroulante à choix multiple
<select name="car" multiple="multiple" size="2"> <!-- size = nombre de ligne affichées -->
<option value="peu">Peugeot</option> <option value="cit">Citroën</option>
<option selected="selected" value="vol">Volkswagen</option> <option value="aud">Audi</option>
<option value="mer">Mercedes</option> </select><br/>
Bouton de validation <input type="submit" value="Valider"> </div>
STI2D SIN
Sommaire
Page 99 / 99Formulaires
Reproduire le formulaire suivant