le langage html - d-linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · le...
TRANSCRIPT
STI2D SIN Sommaire Page 1 / 99
Le 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 couleurs
Sommaire Les liens
Positionnement
Les flottants
Les images
Tableaux
Formulaires
STI2D SIN Sommaire Page 2 / 99
Historique
• 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 / 99
Versions 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
norme que nous adopterons.
STI2D SIN Sommaire Page 4 / 99
Enrichissement
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
Rendre le document lisible par n’importe quelle machine = interopérabilité
STI2D SIN Sommaire Page 5 / 99
HTML : 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)
http://www.w3.org
STI2D SIN Sommaire Page 6 / 99
Avantages 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 / 99
Le 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 …
Que choisir pour lire HTML?
STI2D SIN Sommaire Page 8 / 99
Que 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 / 99
HTML : 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
Quelles balises avez-vous repérées ?
STI2D SIN Sommaire Page 10 / 99
Introduction 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 />
Le langage XHTML est sensible à la casse : toujours écrire en minuscule.
STI2D SIN Sommaire Page 11 / 99
Introduction 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 / 99
Les 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>
<marqueur attribut1="argument1" attribut2="argument2">texte</marqueur>
STI2D SIN Sommaire Page 13 / 99
Les commentaires
<!–- Voici un commentaire HTML -->
<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes
-->
STI2D SIN Sommaire Page 14 / 99
Structure 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 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 / 99
Structure 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 / 99
Le 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.
Cette hiérarchie se représente sous forme arborescente la racine en haut
STI2D SIN Sommaire Page 17 / 99
Le modèle hiérarchique
Écran
Fenêtre 1 Fenêtre 3 Fenêtre 2
Document 1-1 Document 3 Document 2 HTML 1-2
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
Sibling
STI2D SIN Sommaire Page 18 / 99
Le 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
Les trois fenêtres héritent identiquement de Écran
STI2D SIN Sommaire Page 19 / 99
Validation
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 !
Supprimer la balise <title> … </title> et repasser la validation : résultat ?
STI2D SIN Sommaire Page 20 / 99
Organisation 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
Plusieurs espaces seront interprétés comme un seul
STI2D SIN Sommaire Page 21 / 99
Organisation 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 / 99
Organisation 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
balises de type bloc sont admises dans body.
STI2D SIN Sommaire Page 23 / 99
Organisation 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
<a> Ce conteneur crée un lien vers n’importe quel objet multimédia
STI2D SIN Sommaire Page 24 / 99
Organisation 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
<img>
STI2D SIN Sommaire Page 25 / 99
De 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 ?
Quels sont les attributs possibles pour la balise abbr ?
STI2D SIN Sommaire Page 26 / 99
Corps 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 / 99
Corps 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 / 99
Corps 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 / 99
Corps 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 / 99
Corps 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 / 99
Texte 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 / 99
Hé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 ressemble à ça :
STI2D SIN Sommaire Page 33 / 99
Hé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>
</html>
STI2D SIN Sommaire Page 34 / 99
Hé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
le corps et dans les divisions
STI2D SIN Sommaire Page 35 / 99
Héritage
Vous devez obtenir quelque chose comme ça :
STI2D SIN Sommaire Page 36 / 99
Hé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 / 99
Caractè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 / 99
Caractè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
Est-ce que le navigateur a bien fixé le nouveau jeu ?
STI2D SIN Sommaire Page 39 / 99
Les 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 / 99
Les 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 / 99
Les 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>
</head>
STI2D SIN Sommaire Page 42 / 99
Les 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 / 99
Les 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.
Il parcourt l'arbre de haut en bas et applique les règles au contenu de l'élément
STI2D SIN Sommaire Page 44 / 99
Les 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 / 99
Page sans style
CSS : exemple
STI2D SIN Sommaire Page 46 / 99
Premier style
CSS : exemple
STI2D SIN Sommaire Page 47 / 99
Premier 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 / 99
Second style
CSS : exemple
STI2D SIN Sommaire Page 49 / 99
Second 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>
Les feuilles de styles CSS
STI2D SIN Sommaire Page 51 / 99
Les 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 / 99
Exercice 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
Titre de niveau 3
STI2D SIN Sommaire Page 53 / 99
Exemples 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/%/em
ol
list-style-type:upper-roman/lower-alpha
STI2D SIN Sommaire Page 54 / 99
Exercice 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)
Applique le style list-style-image dans le sélecteur body : résultat ?
STI2D SIN Sommaire Page 55 / 99
On 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.
Les feuilles de styles CSS – les classes
STI2D SIN Sommaire Page 56 / 99
on applique une classe à un élément avec l' attribut class suivi du nom de la
classe (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>
Les feuilles de styles CSS – les classes
STI2D SIN Sommaire Page 57 / 99
Les 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.
( http://www.w3schools.com/cssref/css_colornames.asp )
STI2D SIN Sommaire Page 58 / 99
Les 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 / 99
On 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> …
Les feuilles de styles CSS – les classes
STI2D SIN Sommaire Page 60 / 99
Les 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 / 99
Les 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;
text-align:left}
STI2D SIN Sommaire Page 62 / 99
Les 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 / 99
Les 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.
Dans chacune des divisions faire apparaitre un texte inline et un paragraphe.
STI2D SIN Sommaire Page 64 / 99
Les feuilles de styles CSS – les emboitements
Fichier css-emboitement.html
STI2D SIN Sommaire Page 65 / 99
Les 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 / 99
Les 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
couleur lightcoral se code : (240,128,128) et steelblue : (176,76,222)
STI2D SIN Sommaire Page 67 / 99
Les 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 / 99
Les 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.
En couleurs électroniques ces mélanges conduiront à du marron
STI2D SIN Sommaire Page 69 / 99
Les 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
border-color:rgb(222,184,135)
STI2D SIN Sommaire Page 70 / 99
Exercice
Écrire une ligne en 5 dégradé de jaune (255 à 51) sur 5 fond dégradé de gris (0 à
204), le jaune le plus vif étant sur le gris le plus clair.
STI2D SIN Sommaire Page 71 / 99
Les 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 / 99
Les 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
Survolé par la souris : couleur jaune
STI2D SIN Sommaire Page 73 / 99
Positionnement
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
Les arguments s’expriment en %, em, px et les unités métriques
STI2D SIN Sommaire Page 74 / 99
Positionnement « 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 / 99
Positionnement « 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>
Conclusions ?
STI2D SIN Sommaire Page 76 / 99
Positionnement « 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>
Conclusion ?
STI2D SIN Sommaire Page 77 / 99
Positionnement « 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>
Conclusion ?
STI2D SIN Sommaire Page 78 / 99
Les 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 / 99
Les 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 / 99
Les 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
On observe que le navigateur affiche les balises span dans le flux.
STI2D SIN Sommaire Page 81 / 99
Les 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>
Conclusions ?
STI2D SIN Sommaire Page 82 / 99
Les 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>
Conclusion ?
STI2D SIN Sommaire Page 83 / 99
Les 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>
Conclusion ?
STI2D SIN Sommaire Page 84 / 99
Positionnement 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
<div class="d5"> <p>Division d5</p> </div>
STI2D SIN Sommaire Page 85 / 99
Exercice
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
défilement vertical.
STI2D SIN Sommaire Page 86 / 99
Exercice
STI2D 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
Les images : droits d’auteurs
STI2D SIN Sommaire Page 88 / 99
Les 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;
L’image est répétée autant de fois que nécessaire pour remplir l’arrière plan.
STI2D SIN Sommaire Page 89 / 99
Exercice
A l’aide des outils de positionnement et d’opacité reproduire l’écran ci-dessous.
STI2D SIN Sommaire Page 90 / 99
Les 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 / 99
Les 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 / 99
Les 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 / 99
Les 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 / 99
Les 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>
...
</tbody>
STI2D SIN Sommaire Page 95 / 99
Les 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
Dans la cellule L6C4 insérer une table de 3 lignes x 3 colonnes
STI2D SIN Sommaire Page 96 / 99
Les 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 / 99
Elé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 / 99
Elé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>
</form>
STI2D SIN Sommaire Page 99 / 99
Formulaires
Reproduire le formulaire suivant
Lors de la validation comment sont passés les paramètres et les valeurs.