[PDF] Support d’ Introduction au langage de programmation Web XHTML | Cours informatique

Texte intégral

(1)

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

(2)

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

(3)

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

(4)

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

(5)

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)

(6)

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 !

(7)

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 …

(8)

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

(9)

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

(10)

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

/>

(11)

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>

(12)

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>

(13)

STI2D SIN

Sommaire

Page 13 / 99

Les commentaires

<!–- Voici un commentaire HTML -->

<!–-

Voici un commentaire HTML qui

peut se placer sur plusieurs lignes

(14)

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 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 :

(15)

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>

(16)

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.

(17)

STI2D SIN

Sommaire

Page 17 / 99

Le modèle hiérarchique

Écran

Fenêtre 1

Fenêtre 2

Fenêtre 3

Document 1-1

HTML 1-2

Document 2

Document 3

HEAD

BODY

DIV 2

DIV 1

Enfant

Père

Sibling

Père

Enfant

Père

Enfant

Données

d’entête

Texte 1

Texte 2-1

Texte 2-2

Sibling

(18)

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

(19)

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 !

(20)

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

(21)

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 ?

(22)

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

(23)

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

(24)

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

(25)

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 ?

(26)

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

(27)

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>

(28)

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)

(29)

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

(30)

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

(31)

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.

(32)

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

(33)

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>

(34)

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

(35)

STI2D SIN

Sommaire

Page 35 / 99

Héritage

(36)

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.

(37)

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 !

(38)

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

(39)

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

(40)

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

(41)

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>

(42)

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.

(43)

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.

(44)

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.

(45)

STI2D SIN

Sommaire

Page 45 / 99

Page sans style

(46)

STI2D SIN

Sommaire

Page 46 / 99

Premier style

(47)

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

(48)

STI2D SIN

Sommaire

Page 48 / 99

Second style

(49)

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

(50)

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>

(51)

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

(52)

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

(53)

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

(54)

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)

(55)

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.

(56)

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>

(57)

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.

(58)

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.

(59)

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

(60)

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>

(61)

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;

(62)

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>

(63)

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.

(64)

STI2D SIN

Sommaire

Page 64 / 99

Les feuilles de styles CSS – les emboitements

(65)

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

(66)

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

(67)

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

(68)

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.

(69)

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

(70)

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 à

(71)

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

(72)

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

(73)

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

(74)

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 ?

(75)

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>

(76)

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>

(77)

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>

(78)

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.

(79)

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.

(80)

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

(81)

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>

(82)

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>

(83)

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>

(84)

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

(85)

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

(86)

STI2D SIN

Sommaire

Page 86 / 99

(87)

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

(88)

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;

(89)

STI2D SIN

Sommaire

Page 89 / 99

Exercice

(90)

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>

(91)

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>

(92)

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>

(93)

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>

(94)

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>

...

(95)

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

(96)

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.

(97)

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"

(98)

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>

(99)

STI2D SIN

Sommaire

Page 99 / 99

Formulaires

 Reproduire le formulaire suivant

Figure

Updating...