Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le...

99
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

Transcript of Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le...

Page 1: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 2: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 3: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 4: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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é

Page 5: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 6: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 !

Page 7: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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?

Page 8: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 9: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 ?

Page 10: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 11: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 12: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 13: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

STI2D SIN Sommaire Page 13 / 99

Les commentaires

<!–- Voici un commentaire HTML -->

<!–-

Voici un commentaire HTML qui

peut se placer sur plusieurs lignes

-->

Page 14: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 :

Page 15: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 16: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 17: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 18: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 19: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 ?

Page 20: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 21: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 ?

Page 22: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 23: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 24: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 25: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 ?

Page 26: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 27: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 28: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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)

Page 29: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 30: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 31: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 32: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 :

Page 33: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 34: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 35: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

STI2D SIN Sommaire Page 35 / 99

Héritage

Vous devez obtenir quelque chose comme ça :

Page 36: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 37: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 &eacute; être s'écrit &ecirc;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 !

Page 38: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 ?

Page 39: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 40: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 41: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 42: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 43: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 44: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 45: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

STI2D SIN Sommaire Page 45 / 99

Page sans style

CSS : exemple

Page 46: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

STI2D SIN Sommaire Page 46 / 99

Premier style

CSS : exemple

Page 47: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 48: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

STI2D SIN Sommaire Page 48 / 99

Second style

CSS : exemple

Page 49: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 50: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 51: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 52: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 53: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 54: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 ?

Page 55: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 56: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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&eacute;e suivant la classe</span> maclasse.</p>

Pour un bloc entier :

<p class="maclasse">Paragraphe format&eacute; suivant maclasse</p>

Les feuilles de styles CSS – les classes

Page 57: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 )

Page 58: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 59: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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&eacute;e suivant maclasse</p>

… <span class ="maclasse">Ne donne aucun r&eacute;sultat</span> …

Les feuilles de styles CSS – les classes

Page 60: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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&eacute;claration est sans effet</h1>

<p class="centrer">Ce paragraphe est centr&eacute;.</p>

</body>

Page 61: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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}

Page 62: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

STI2D SIN Sommaire Page 62 / 99

Les feuilles de styles CSS – les emboitements

Exemple :

<body>

<p>Ce paragraphe est &eacute;crit en bleu, police times et

centr&eacute;</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&eacute; &agrave;

gauche en police arial</p>

</div>

</body>

Page 63: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 64: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

STI2D SIN Sommaire Page 64 / 99

Les feuilles de styles CSS – les emboitements

Fichier css-emboitement.html

Page 65: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 66: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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)

Page 67: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 68: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 69: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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)

Page 70: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 71: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 72: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 73: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 74: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 ?

Page 75: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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&apos;un

texte top</span> et <span style="position:relative;"

class="verte">d&apos;un texte bottom</span></p>

<p>Le r&eacute;sultat n&apos;est pas terrible !!!</p>

Conclusions ?

Page 76: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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&apos;un

texte top</span> et <span style="position:absolute;"

class="bleue">d&apos;un texte bottom</span></p>

Conclusion ?

Page 77: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 ?

Page 78: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 79: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

STI2D SIN Sommaire Page 79 / 99

Les flottants

Exemple de flux en conteneur div

<p>Paragraphe par d&eacute;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.

Page 80: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 81: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 ?

Page 82: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 ?

Page 83: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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 ?

Page 84: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 85: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 86: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

STI2D SIN Sommaire Page 86 / 99

Exercice

Page 87: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 88: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 89: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

STI2D SIN Sommaire Page 89 / 99

Exercice

A l’aide des outils de positionnement et d’opacité reproduire l’écran ci-dessous.

Page 90: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 91: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 92: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 93: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 94: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 95: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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

Page 96: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.

Page 97: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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"

Page 98: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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>

Page 99: Le langage HTML - D-Linkblewando.dlinkddns.com/cours/sin/014/fichier.pdf · 2014-05-26 · Le langage HTML Balisage Fichier HTML Le modèle hiérarchique Organisation des balises

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.