Académique Documents
Professionnel Documents
Culture Documents
XHTML/CSS
1re Anne BTS Informatique Dveloppeur
dApplication
M. Benjamin GOGBE
2014
Ce support de cours contient quelques explications sur certains concepts de HTML en vigueur au
programme en 1re anne BTS option IDA en Cte dIvoire. Il a t labor sur la base de supports de cours
existants et de sources trouves sur Internet.
Support de cours Module HTML 1re Anne BTS Informatique Dveloppeur
dApplication
INTRODUCTION................................................................................................................... - 3 -
Mini-PROJET:...................................................................................................................... - 48 -
INTRODUCTION
Conu par Tim Berners-Lee en 1991, HTML 1 est un langage bas sur le SGML
(Standard Generalized Markup Language) : il s'agit en effet de prsenter un contenu
affichable non seulement par les ordinateurs classiques, mais galement sans trop
de dgradation par des terminaux mobiles (PDA : Personnal Digital Assistant,
Smartphones, etc) bien moins puissants. (Wikipedia, 2011).
Les versions successives de HTML sont HTML 1 en 1991, HTML 2 en 1994, HTML 3
en 1996 et HTML 4 en 1998. En 2000, le W3C lance la version XHTML qui est une
variante plus rigoureuse du langage.
Les premires spcifications du XHTML ont vus le jour en 2000 sous lappellation
XHTML 1.0. Un an plus tard, elle fut remplace par la version 1.1. En 2009, le W3C
lance une tude pour la version HTML 5.
Lenvironnement de travail
Pour crer des pages web avec XHTML et CSS, il faut disposer dun environnement
de travail adapt.
Avec ces diteurs vous avez la possibilit de travailler graphiquement sur la page
sans taper de code qui est gnr automatiquement. Lon peut citer le plus connu
est Dreamweaver, FrontPage (payant ou en version dessai) et Nvu (libre et gratuit).
Leur inconvnient est quils rendent le dveloppeur trop passif et le code gnr est
difficilement maitrisable (souvent problme de compatibilit avec les nouvelles
spcifications).
1 Le langage HTML, qui a maintenant volu vers le XHTML, fut invent en 1991 par
Tim Berners-Lee lorsquil travaillait au CERN de Genve (Centre Europen de
Recherche Nuclaire). Lobjectif tait alors dafficher des pages dinformation ayant
les proprits suivantes : les pages taient relies entre elles par des liens
hypertexte (ces liens sur lesquels, aujourdhui, nous narrtons pas de cliquer !) ;
ces documents devaient tre lisibles sur tous les ordinateurs, quel que soit leur
systme dexploitation : Windows, Unix, Mac OS, etc. (Drailard, 2008)
Les navigateurs permettent de visualiser le contenu les pages web. Ils traduisent les
codes HTML et CSS et prsentent le rsultat visuel lcran. Il existe de nombreux
navigateurs parmi lesquels on peut citer :
- Google Chrome
- Mozilla FireFox
- Internet Explorer
- Safari
- Opera
Il existe des variantes de ces navigateurs pour les appareils mobiles comme les
Smartphones. On peut citer :
- Safari Mobile sur iPhone dApple
- Chrome Mobile pour les appareils sous Android
- Internet Explorer Mobile pour les appareils sous Windows Mobile
Il est important de noter quil faut disposer de plusieurs navigateurs dans leurs
dernires versions sur notre ordinateur afin de tester la conformit du code HTML et
CSS des pages avec les dernires spcifications du langage.
Les diffrentes parties dune page web (la structure) sont reprsentes dans le code
HTML sous forme dlments constitus de balises. On parle alors de langage de
balisage.
Dans un langage de balisage, tout contenu, tels que les blocs de texte, les images,
les tableaux, paragraphes et autres, doivent tre renferm dans un lment.
La liste des lments utilisables est clairement dfinie dans la DTD (Document Type
Definition) qui dpend de la version du langage. La DTD contient les spcifications
du langage qui sont tablies par le W3C (World Wide Web Consortium), organisme
de normalisation dans le domaine du web.
I- LES BALISES
Les balises HTML structurent le contenu du document, en dlimitant les blocs qui
seront amens contenir des paragraphes, des titres, diffrents types de mdias
(images, sons, vidos), des contrles de formulaires ou encore des liens
hypertextes.
Une balise dbute par le signe infrieur , et finit par le signe suprieur ;
on parle aussi de chevrons.
Voici quelques balises dans ce cas sont : area, base, br, col, command, embed, hr,
img, input, keygen, link, meta, param, source, wbr.
Un lment est lensemble compos dune balise ouvrante, dun contenu (du texte
et/ou dautres balises), et de la balise fermante correspondante.
Exemple dlment :
<strong> texte mettre en gras </strong> === Toute
cette ligne reprsente un lment
Les attributs sont toujours placs lintrieur la balise ouvrante. Leur valeur est
toujours entoure dapostrophes simples (') ou doubles (").
Exemple :
<h1 id="monTitre">Bienvenue sur le site web de GOBIS
TRAINING</h1>
<img src="images/photo.jpg" />
Llment 2 reprsente une image dont lattribut src indique quil sagit du
fichier photo.jpg dans le dossier images.
NB : Certains attributs sont devenus obsoltes avec lavnement du CSS. Ce sont pour
la plupart des attributs de mise en forme tels que : align, valign, color, bgcolor, border,
face, width, height.
Dans cet exemple, nous avons un titre de niveau 2 dans lequel la portion de texte
et moi est renforc (en gras).
Les possibilits dimbrications doivent rpondre des critres stricts qui dfinissent
quels lments peuvent en contenir dautres, et quelles sont les consquences en
termes daffichage ou de smantique.
Globalement, un lment de type bloc (bloc-level) peut contenir soit dautres blocs
et du contenu texte, soit uniquement des lments de type en ligne (inline) et du
contenu texte.
Un lment de type en ligne ne peut pas contenir dlments de type bloc, mais
uniquement des lments en ligne ou du contenu texte.
Chaque page web est un fichier dont le nom peut comprendre des lettres, des
chiffres et des tirets. Il faut viter : les espaces, les caractres accentus et le .
Son extension est gnralement .html .
La premire page dun site web doit tre nomm index.html (ou index.htm).
Pour respecter les rgles du XHTML, il faut toujours crire les noms de balises
en minuscules
Toute balise ouverte doit tre referme ; y compris les balises simples ou
orphelines.
Dans ce dernier cas, la barre de fermeture est alors intgre dans la balise
elle-mme.
Exemples :
Saut de ligne: <br /> au lieu de <br>
Trac dune ligne horizontale : <hr /> au lieu de <hr>
Image: <img src="photo.gif" /> au lieu de <img
src="photo.gif">
Les valeurs des attributs des balises sont crire entre guillemets simples ou
doubles :
<img src="photo.gif" />.
Tous les attributs utiliss doivent avoir une valeur, y compris ceux dont la
valeur est unique. Par exemple, il ne faut plus crire : <input type=
"checkbox" checked />
mais le code suivant : <input type= "checkbox" checked="checked"/>
Lattribut name qui servait identifier certains lments (<a>, <form>,
<input>) doit tre remplac par lattribut id.
<!DOCTYPE html>
<html>
</body>
</html>
Le reste de la page est encadr par des balises <html> et </html> qui
signifient dbut et fin de la page HTML.
Entre ces deux balises se trouvent deux parties :
o len-tte de la page entre <head> et </head> qui contient les
informations qui ne seront pas visibles sur la page sauf la balise
<titre> qui contient le texte afficher dans la barre de titre.
o et le contenu (le corps) de la page entre <body> et </body>.
La dclaration DOCTYPE
<! DOCTYPE html >
Exercice pratique :
Crer une page contenant un texte vous dcrivant en quelques mots (au plus 2
lignes).
NB :
1. le texte doit contenir des accents et des caractres spciaux
2. dfinir les mots-cls et une description afin que votre page soit visible par les
moteurs de recherche.
Les commentaires
Ils permettent une meilleure comprhension, une rutilisation facile et une
meilleure lisibilit du code lors des mises jour. On utilise les symboles : < !et
-->.
Exemple : < !-- Menu principal du site -->
Exercices
Exercice 1 : quel emplacement est dfini la DTD utilise dans le document ?
Exercice 3 : quoi sert llment <head> ? Quels peuvent tre ses lments
enfants ? Peuvent-ils tre employs plusieurs fois dans le mme document ?
Exercice 4 : Quel lment est obligatoire dans llment <head> ? quoi sert-il ?
Exercice 5 : Comment dclarer les mots-cls associs la page ? Quelle est lutilit
de cette dclaration ? crivez-en un exemple.
<body>
<title>Bienvenue dans notre site </title>
<h1>Le site du XHTML et de CSS2</h1>
</body>
Exercice 7 : Peut-on inclure les lments <img />, <form> et <li> dans llment
<body> ?
Exercice 8 : Ecrire le code HTML complet dune page web comportant les lments
suivants :
1. Titre : Ma bienvenue sur ma page personnelle
2. Mots cls : GOGBE, Benjamin, Informaticien, Ingnieur, Enseignant
3. Rechargement chaque 10 minutes
4. Auteur : Benjamin GOGBE
5. Description : Ma page personnelle
6. Jeu de caractres : utf-8
Insrer des commentaires chaque niveau pour expliquer chaque tape du code
HTML.
1- Dfinition
Ce sont les lments qui se placent automatiquement les uns en dessous des
autres.
Le rendu de ces balises occupe par dfaut toute la largeur de la page.
Gnralement, le navigateur insre automatiquement un espace au-dessus et en
dessous du contenu de la balise.
Les blocs distinguent des sections entires de la page comme des titres, des
paragraphes, des listes, des citations, etc.
Exemples dlments de type bloc
<h1>....</h1> <!-- titre de niveau 1 -->
<p>...</p> <!-- paragraphe -->
Les blocs peuvent contenir dautres blocs et des lments en ligne, lexception
des paragraphes <p> et des titres <h1>, <h2>,...<h6> qui ne peuvent inclure
dautres lments de bloc.
(Goetter, 2005) P 29
<thead><th>Balise</th><th>Commentaires</th></thea
d>
<tbody>
<tr><td>body</td><td>Corps
du document</td></tr>
<tr><td>head</td><td>Entte
du document</td></tr>
</tbody>
</table>
</div>
</body>
</html>
1- Dfinition
Contrairement aux balises de bloc, les balises en ligne se placent toujours les unes
ct des autres.
Les lments en ligne sont prvus pour enrichir localement des portions de texte
(lien hypertexte, emphase, renforcement, etc.).
Les lments en ligne ne peuvent contenir que dautres lments en ligne mais pas
dlments de bloc.
Seuls les lments remplacs peuvent tre redimensionns. Ils acceptent des
attributs de dimensions tels que : height, width.
Il sagit entre autres des lments <img>, <input>, <textarea>, <select> et
<object>.
Les autres nont pas de dimension, et noccupent que la place ncessaire
leur contenu. Cest le cas des lments <strong>, <em>, <a>, <span>, etc.
Evaluation N1
Un tableau est compos de lignes et de colonnes. Lintersection entre une ligne et une
colonne forme une cellule. La balise permettant de crer un tableau est <table>.
Ainsi, on peut crer des tableaux simples et des tableaux plus complexes.
I- TABLEAU SIMPLE
Pour crer une entte de tableau, il suffit dutiliser llment <th></th> la place de
llment <td></td> dans la premire ligne du tableau. En gnral, le contenu de
llment <th></th> apparait en gras. On obtient la syntaxe suivante :
<table>
<tr>
<th>Entte 1</th>
<th> Entte 2</th>
</tr>
<tr>
<td>cellule 1</td>
<td> cellule 2</td>
</tr>
<tr>
<td> cellule 3</td>
<td> cellule 4</td>
Figure 6- Tableau avec entte
</tr>
</table>
Exercice dapplication
<table>
<caption>LISTE DES CLIENTS</caption>
<tr>
<th>NOM ET PRENOMS</th>
<th> VILLE</th>
<th> CONTACT</th>
</tr>
<tr>
<td>KONE MOHAMED</td>
<td> BOUAKE</td>
<td> 05 45 76 23</td>
</tr>
<tr>
<td> KOUAKOU JOEL</td>
<td> ABIDJAN</td>
<td>09 47 28 47</td>
</tr> Figure 7-Aperu de la Liste des clients sous IE 9
<tr>
<td>AGOULE BENOIT</td>
<td> DIVO</td>
<td>04 57 65 48</td>
</tr>
</table>
En reprenant lexemple prcdent, on pourra crire une longue liste de clients avec le code
suivant :
<table>
<caption>LISTE DES CLIENTS</caption>
<thead>
<tr>
<th>NOM ET PRENOMS</th>
<th> VILLE</th>
<th> CONTACT</th>
</tr>
</thead>
<tfoot>
1. Fusion de lignes
Pour fusionner des lignes, on utilise lattribut rowspan=x dans la balise td de la cellule
fusionne ; o x reprsente le nombre de lignes fusionner verticalement.
<table>
<tr>
2. Fusion de colonnes
1
3 4
5
<table>
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
Le format GIF : utilis pour les petits lments graphiques, les icnes, les petites
images animes avec un seul niveau de transparence.
Le format JPEG : utilis pour les photographies. Il ne supporte pas la
transparence
Le format PNG : utilis pour les images de haute qualit avec plusieurs niveaux
de transparence.
Pour afficher une image dans une page HTML, on utilise la balise <img>. Elle
possde plusieurs attributs dont les plus utiliss sont : src, alt et title.
Syntaxe :
<img src= url image alt=texte title=texte
dinfobulle />
Lattribut src : chemin daccs du fichier image. Ce chemin peut tre relatif
ou absolu selon les cas.
o Cas de chemin relatif : le chemin fait rfrence lemplacement
courant du fichier image.
Exemple : src=images/photo.jpg
o Cas de chemin absolu : le chemin fait rfrence la racine du site web.
Il est utilis gnralement pour faire rfrence une image situe sur un
autre site web.
Exemple : src=http:\\www.galeriesdumonde.com\photos\montnimba.png
Lattribut alt : texte alternatif qui saffiche lorsque lattribut src nest pas
dfini ou lorsque limage narrive pas safficher pour une raison quelconque.
Lattribut title : texte dinfobulle qui apparait lorsquon pointe la souris sur
limage.
III- LES BALISES DIMAGES-MAPS ET SES ATTRIBUTS
La balise <map> permet de crer des images ractives. Limage ractive contient
plusieurs zones cliquables amenant chacune vers un lien dtermin.
Pour dfinir les zones cliquables, on utilise la balise <area> dont les principaux
attributs sont :
1. shape : qui dfinit la forme de la zone. Ses valeurs possibles sont rect
(rectangle), circle (cercle), poly (polygone),
SYNTAXE GENERALE
Insertion de limage
</map>
NB :
1. Pour obtenir les coordonnes dun point sur une image, il suffit douvrir le fichier
image avec les logiciels PAINT ou encore Photoshop. Passer la souris sur le
point et regarder en bas sur la barre de statut.
2. Les balises <img />, <map> sont des balises en ligne. De ce fait elles doivent
toujours tre utilis dans une balise de bloc telle que <p></p> ou
<div></div>.
EXERCICE DAPPLICATION N1
Proposition de solution
EXERCICE DAPPLICATION N2
D Soit limage relative la photo densemble dtudiants ci-aprs. Lon veut crer des images
C ractives sur cette photo, de sorte pouvoir ouvrir une page concernant chaque tudiant en
cliquant sur sa tte.
B
Proposition de solution :
<p>
<img src="images/etudiant.jpg" alt="Etudiant" title="Groupe d'tudiants"
usemap="#mapetudiant"/>
Fichier
HTML/CSS, Javascript, etc.
Comme vous pouvez le constater sur le schma, lchange entre le serveur web et
lutilisateur se fait avec les langages ct client tels que HTML/CSS, Javascript. Alors
que les transactions entre le serveur web et les serveurs de fichiers, de bases de
donnes ou de messagerie se font avec les langages ct serveur tels que PHP, JSP,
DOTNET, etc.
Notre cours sintressera particulirement aux manipulations ct client du
formulaire.
Le ct serveur du formulaire sera vu en 2 me anne de BTS avec ltude du langage
PHP.
I. LA BALISE <FORM>
La balise principale de cration de formulaire est <form></form>. Il indique le
dbut et la fin dun formulaire.
Syntaxe :
<form>
<p>Texte l'intrieur du
formulaire</p>
</form>
Valeur Description
application/x-www- Par dfaut. Tous les caractres sont encods avant lenvoi
form-urlencoded (les espaces sont convertis en symboles + et les caractres
spciaux en valeurs hexadcimales du code ASCII).
multipart/form-data Aucun caractre nest encod. Cette valeur est utilise dans
les cas o le formulaire contient un champ denvoi de fichier
au serveur.
text/plain ou Elles sont utilises dans les cas denvoi des donnes par
text/html email. Elles indiquent si les donnes seront envoyes sous
forme de texte ou de code XHTML
Syntaxe :
<form id="form1" action=" valider.php" method=" valeur " enctype=" valeur
">
<! Contenu -->
</form>
Syntaxe :
<input type="valeur" name="nom_champ" size="N" maxlength="N"
value="valeur_par_defaut"/>
Exemple:
<label>Nom :</label><input type="text" name="nomuser"
size="15" maxlength="40" value="GOGBE" />
Pour restreindre les fichiers envoyer des types prcis, on utilise lattribut accept
dont la valeur est la liste des types MIME accepts.
Pour limiter la taille des fichiers envoyer, on insre un champ cach dont
lattribut name sera MAX_FILE_SIZE et lattribut value sera la taille maximale
du fichier en octets.
Exemple complet :
Ecrire le code HTML du formulaire ci-dessous :
Pour crer une liste doptions choix unique, on utilise la balise <input /> en
dfinissant lattribut type la valeur radio.
Lattribut name des options appartenant un mme groupe doit avoir la mme
valeur pour chaque option.
Lattribut value dfinit la valeur qui sera envoye au serveur si lutilisateur clique
sur loption.
Pour dfinir par dfaut le choix dune option dans un groupe doptions, on donne la
valeur checked lattribut checked (checked="checked").
Syntaxe :
<input type="radio" name="nomgroupe" value="valeur1" />
------
------
<input type="radio" name="nomgroupe" value="valeurN" />
Exemple:
<fieldset><legend>Qualit du produit</legend>
<label><input type="radio" name="info" value="Excellent"
/>Excellent</label><br />
<label><input type="radio" name="info" value="Bon"
checked="checked" />Bon</label><br/>
Syntaxe :
<input type="checkbox" name="nom1" value="valeur1" />
------
------
<input type="radio" name="nomN" value="valeurN" />
Exemple :
Soit une socit de distribution de repas qui dsire concevoir un formulaire dans le
but de permettre aux clients de passer leur commande dans le menu du jour. Dans
cet exemple le plat Tchep au poulet est choisi par dfaut. Le formulaire doit se
prsenter comme suit :
Exemple
<input name="valider" type="submit" width="15"
value="Envoyer" />
<input name="valider" type="reset" width="15"
value="Annuler" />
Pour utiliser une image sous forme de bouton de validation, on utilise la syntaxe
suivante :
Syntaxe:
<input name="nom" type="image" src="url image" width="x"
height="y" alt="texte alternatif" />
Exemple :
<input name="valider" type="image" src="images/zendf.jpg"
width="103" height="54" alt="Envoyer" />
Figure 16 : Exemple de
bouton image
1) LES LISTES
Il sagit de listes droulantes ou de listes simples.
Pour crer une liste droulante on utilise les balises <select></select> avec
lintrieur des balises <option></option> pour chaque lment de la liste.
Les attributs de <option> sont :
- value : dfinit la valeur envoye au serveur par le formulaire
- selected : pour dfinir si loption est choisie par dfaut
Syntaxe :
<select name=nomliste>
<option value=valeur1></option>
-----
<option value=valeurN></option>
</select>
Pour dfinir une liste simple, il suffit dajouter lattribut size pour indiquer le nombre
dlments de la liste.
Pour permettre que plusieurs lments soient slectionns en mme temps, on
dfinit lattribut multiple dans la balise <select>.
Exemple :
Ecrire le code HTML des listes suivantes :
Pour dfinir une valeur par dfaut pour la zone de saisie, il suffit de placer le texte
entre les balise <textarea> et </textarea>.
Exemple :
<textarea name="comment" cols="50" rows="5" cols="50">Entrez un
commentaire sur notre service ici</textarea>
<h2>Formulaire d'inscription</h2>
<fieldset><legend>Informations de
connexion</legend>
<label>Pseudo</label><br/> <input name="pseudo"
type="text" size="50" maxlength="250"
placeholder="Votre pseudo en un seule mot"><br/>
<label>Mot de passe</label><br/> <input
name="pass" type="password" size="50"
maxlength="250" placeholder="Votre mot de passe en 8
caracteres mini"><br/>
<label>Retaper le mot de passe</label><br/> <input
name="repass" type="password" size="50"
maxlength="250" placeholder="Retaper le meme mot de
passe">
</fieldset>
<fieldset><legend>Identit du client</legend>
<label>Nom et prnoms</label><br/> <input
name="nom" type="text" size="50" maxlength="250"
><br/>
<label>Entreprise / Socit</label><br/> <input
name="entreprise" type="text" size="50" ><br/>
<form name="finscription"
action="validinscription.ph
p" method="post"
enctype="multipart/form
-data">
<h2>Saisie des recettes
proposes</h2>
<fieldset><legend>Inform
ations sur la
recette</legend>
<label>Nom de la
recette</label><br/>
<input
name="nomrecette"
type="text" size="50"
maxlength="250"><br/>
<label>Description
de la recette</label><br/>
<textarea
name="description"
rows="5"
cols="50"></textarea><br
/>
<label>Prix du plat
pour une personne
<input name="prix"
type="number" min="0"
max="10000"
step="500"
/></label><br/>
Figure 21 : Formulaire complet 2 - Cas de saisie de recette propose <label>Capacit de
production
<input
name="capacite"
type="number" min="0"
max="100"
/></label><br/>
<label>Priode de
disponibilit</label><br/>
<label><input
name="periode[]"
type="checkbox"
value="matin" >Matin
(Petit
djeuner)</label><br/>
<label><input
name="periode[]"
type="checkbox"
value="midi">Midi
(Djeuner)</label><br/>
<label><input
name="periode[]"
type="checkbox"
<fieldset><legend>Echant
illons</legend>
<label>Tlcharger
quelques images (Format
JPG, PNG, GIF - Taille totale
< 5 Mo) <br/>
<input name="photo"
type="file" multiple
accept="image/gif,image/jp
eg,image/x-png"
></label><br/>
<input
name="MAX_FILE_SIZE"
type="hidden"
value="5000000"
/></label><br/>
</fieldset>
<br/>
<input
name="valider"
type="submit"
value="Valider"><input
name="Annuler"
type="reset"
value="Annuler">
</form>
Un lien hypertexte (hyperlien) est un lment HTML qui renvoie le visiteur une page ou
un emplacement de la page du mme site ou dun autre site web. Le lien hypertexte est
dlimit par la balise <a>.
Syntaxe gnrale :
<a href="url_page_destination" title="Texte_infobulle" target="cible ">Texte du lien</a>
Valeur Description
_self Affichage dans le cadre courant (par dfaut).
Il suffit de prciser dans lattribut href ladresse URL absolue du site web de
destination.
Exemple :
Lien vers le site web www.google.ci:
<a href="http://www.google.ci">Accdez au Google </a>
Lien vers la page inscription.html du site www.bonappetit.ci :
<a href="http://www.bonappetit.ci/inscription.html"> Bon appetit </a>
Exemple
Lien vers la page agenda.html de notre site web : <a href="agenda.html"> Bon appetit
</a>
monsite
|--index.html
|---Contenu
Lorsque la page cible se trouve dans le dossier parent du dossier courant, la valeur de
lattribut href scrira :
../pagecible.
Une ancre est une sorte de point de repre que lon place sur une page web pour faire
rfrence une portion de cette page. Elle est trs souvent utilise pour crer un lien
permettant daller directement au bas ou en haut de la page.
Pour crer une ancre, on ajoute lattribut id dans une balise qui servira de repre sur la
page.
- Cas dune ancre situe sur une page dun autre site
Syntaxe : <a href="http://url_site/page#nom_ancre">Texte du lien vers lancre</a>
Exemple :
<a href="http://www.bonappetit.com/client.html#inscription">Inscrivez-vous sur le site
bonappetit.com </a>
NB: pour crer un lien vers le dbut dune page, on crit : <a href="#">Dbut de la
page</a>
Exemple 1:
<p>Liste des matires :</p>
<ul type="circle">
<li>Algorithmique</li>
<li>Langage de
programmation</li>
<li>Merise</li>
<li>Dveloppement Web</li>
</ul>
Exemple 2:
<p>Liste des matires :</p>
<ul type="square">
<li>Algorithmique</li>
<li>Langage de
programmation</li>
<li>Merise</li>
<li>Dveloppement Web</li>
</ul>
Figure 22 : Aperu de listes puces
II- LES LISTES ORDONNES
Elles sont introduites par la balise <ol> et chaque lment par la balise <li>.
Lattribut start permet de dfinir le dbut de la numrotation. Pour inverser la
numrotation, on ajoute lattribut reversed dans la balise <ol>.
Syntaxe :
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item n</li>
</ol>
Exemples
<!--Cas des listes numrotes-->
<p>Exemple 1: Le plan de lexpos
:</p>
<ol>
<li>Introduction</li>
<li>Les causes</li>
<li>Les consquences</li>
<li>Les perspectives</li>
<li>Conclusion</li>
</ol>
<!--Cas de liste commenant pas un
numro-->
<p>Exemple 2: Le plan de lexpos
:</p>
<ol start="2">
<li>Introduction</li>
<li>Les causes</li>
<li>Les consquences</li>
<li>Les perspectives</li>
<li>Conclusion</li>
</ol>
<!--Cas de liste avec numrotation
inverse-->
<p>Exemple 3 : Le plan de lexpos
:</p>
<ol reversed>
<li>Introduction</li>
<li>Les causes</li>
<li>Les consquences</li>
<li>Les perspectives</li>
<li>Conclusion</li>
</ol> Figure 23 : Aperu de listes numrotes avec
plusieurs variantes
Syntaxe gnrale :
<dl>
<dt>Terme 1</dt>
<dd>Description terme 1</dd>
<dt>Terme 2</dt>
<dd>Description terme 2</dd>
<dt>Terme N</dt>
<dd>Description terme N</dd>
</dl>
Exemple :
<!--Cas des listes de dfinitions-->
<p>Quelques dfinitions de termes en Dveloppement
web</p>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>URL</dt>
<dd>Uniform Resource Location</dd>
<dt>Internet</dt>
<dd>Rseau mondial d'ordinateurs</dd>
<dt>HTTP</dt>
<dd>HyperText Transfert Protocol</dd>
</dl>
Les scripts excutables sont des fonctions qui sexcutent gnralement lors des
vnements (clics, survol, appui de touche, etc) lis aux objets tels que les boutons, les
images, les liens, etc.
On utilise la balise <script> et lattribut src pour inclure le fichier dans la page.
Balise <script>
<script type="text/javascript">
function maFonction()
{
/* du code ici */
}
</script>
NB : Contrairement aux scripts externes, les scripts internes ne sont pas rutilisables dans
les autres pages.
I. INTRODUCTION
Les feuilles de style en cascade ou Cascade Style Sheet (CSS) ont t adoptes par le W3C
pour sparer le contenu des pages HTML et leur apparence. Elles rgissent lapparence des
lments HTML dune page concernant la disposition, la couleur, les dimensions, etc.
Apparues depuis les annes 1996, les versions successives de ce langage ont t :
- CSS 1;
- CSS 2.0 ;
- CSS 2.1 ;
- CSS 3, la version actuelle
On peut dfinir une feuille de style dans trois (3) endroits dans le code HTML de la page web
:
- Directement lintrieur des balises avec lattribut style (mthode pas
recommande) ;
On insre le code CSS dans la balise <style> entre les balises dentte <head> de la page
HTML.
Syntaxe :
<head>
<meta charset="utf-8" />
Exemple : le code suivant dfinit une couleur appliquer aux lments <li> des
listes de la page :
Cette mthode consiste crer un fichier css externe la page HTML (gnralement dans
un dossier css) et ensuite de lier ce fichier la page HTML avec la balise <link>.
Application :
1re tape : crons un fichier style.css (par exemple) dans un dossier CSS (par exemple)
que lon aura cre auparavant. Ensuite, crivons le code CSS de la feuille de style
prcdente.
2me tape : A lintrieur des balises <head> de la page HTML, on insre la balise <link>
comme suit :
<link rel="stylesheet" href="url_du_fichier_css">
par exemple <link rel="stylesheet" href="css/styles.css">.
L'attribut href=" URL " donne l'URL de la feuille de style, c'est--dire son
emplacement sur Internet.
Dans cette syntaxe, le slecteur reprsente llment ou les lments auxquels on veut
appliquer les diffrentes proprits.
Contrairement aux classes, le nom des pseudo-classes est prdfini, il n'est donc pas
possible de crer ses propres pseudo-classes.
:link Lien
Exemples :
a:hover {font-decoration: underline;} permet de souligner le texte du lien lors
du survol de celui-ci
a:link{color: #FF0500;} permet de dfinir les proprits des liens que visiteur na
pas encore t slectionn.
p::first-letter{
font-weight: bold;
Figure 26: Rsultat du code
color:rgb(0,0,120);
CSS ci-contre
text-decoration:none;
Elles reprsentent les diffrents effets souhaits sur llment. La ligne de proprit est
compose dun nom de proprit et dune valeur spare par deux points termine par un
point-virgule.
Il existe un nombre important de proprits CSS mme si toutes ne sont pas encore prises
en compte par tous les navigateurs.
Nous numrerons quelques proprits selon les groupes dlments auxquelles elles
peuvent sappliquer.
pixels (px), ou en %
Exemple :
p{
font-family: Georgia, "Times New Roman", Times, serif; /*Famille de
police*/
font-size:16px; /* taille 16*/
font-weight:bold; /*texte en gras*/
text-align:justify;
}
Exemple :
body{
background-
image:url(../images/bonappetitfig.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
background-size:10% 15%;
}
Exemple:
table, tr, td{
border-width:1px;
border-color:#CCCCCC;
border-style:solid;
border-spacing:0px;
width:60%;
}
Marge margin-top En points (pt), pouces (in), en cm, en pixels Valeur de la marge
s (px), ou en % suprieure
padding-top En points (pt), pouces (in), en cm, en pixels (px), Ecartement entre
ou en % l'lment et le bord
suprieur
padding-right En points (pt), pouces (in), en cm, en pixels (px), Ecartement entre
ou en % l'lment et le bord
droit
padding- En points (pt), pouces (in), en cm, en pixels (px), Ecartement entre
bottom ou en % l'lment et le bord
infrieur
padding-left En points (pt), pouces (in), en cm, en pixels (px), Ecartement entre
ou en % l'lment et le bord
gauche
Exemple complet :
Rsultat attendu :
MINI-PROJET:
Projet 1 : Ralisation dun site web de la classe BTS IDA 1re Anne
CODE HTML 5
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Bienvenue sue le site de la classe BTS IDA 1re Anne</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="corps">
<header>
<div id="titre_ecole">
<img id="logo" alt="logo esicom" src="images/logoesicom.gif"/>
<h2>Ecole Suprieure d'Informatique et de Commerce</h2>
</div>
<div id="banniere">
<h1> Bienvenue sur le site des etudiants de BTS IDA 1re Anne</h1>
<h3> La programmation et le developpement web n'ont plus de secret pour nous.
</h3>
</div><!---->
</header>
<nav>
<ul id="menu_h">
<li> <a href="#"> Accueil </a> </li>
<li> <a href="#"> Formation </a> </li>
<li> <a href="#"> Rcompense </a> </li>
<li> <a href="#"> Bibliothque </a> </li>
<li> <a href="#"> Infos </a> </li>
<li> <a href="#"> Contactez-nous </a> </li>
</ul>
</nav>
<section>
<article>
<h2>Presentation de la filire</h2>
<p> Le mot algorithme est un terme dorigine arabe, venant plus prcisment
du nom du <strong>clbre mathmaticien de Bagdad (780-850), AL-
KHUWARIZMI</strong> qui crivit le premier ouvrage de rsolution des quations linaires
et quadratiques.</p>
<p>L'algorithmique est lensemble des rgles et des techniques qui sont impliques
dans la dfinition et la conception d'algorithmes.
</p>
<p>Un algorithme est donc une suite ordonne et finie dinstructions lmentaires
permettant de rsoudre un problme.</p>
<p>Le dictionnaire Robert dfinit lalgorithme comme un ensemble de rgles
opratoires propres un calcul.</p>
</article>
<article >
<h2>Album Photos</h2>
<figure>
<figcaption>Quelques photos d'tudiants de la Classe</figcaption>
<a href="images/btsida1_ens.png" target="_blank"><img class="photo_ens"
alt="photo ensemble" src="images/btsida1_ens.png"/></a>
<a href="images/btsida1_garcons.png" target="_blank"><img
class="photo_ens" alt="photo garcons" src="images/btsida1_garcons.png"/></a>
<a href="images/btsida1_filles.png" target="_blank"><img class="photo_ens"
alt="photo filles" src="images/btsida1_filles.png"/></a>
</section>
<aside>
<h2>News TIC</h2>
<p class="titreinfo"><a href="http://www.lemondeinformatique.fr/"
target="_blank">Droit l'oubli : Google s'incline devant la Justice europenne</a></p>
<p>Google a mis en ligne un formulaire permettant toute personne de demander
la suppression de son moteur de recherche des rsultats de recherche inclu...</p>
<p class="titreinfo"><a href="http://www.lemondeinformatique.fr/"
target="_blank">Droit l'oubli : Google s'incline devant la Justice europenne</a></p>
<p>Google a mis en ligne un formulaire permettant toute personne de demander
la suppression de son moteur de recherche des rsultats de recherche inclu...</p>
<p class="titreinfo"><a href="http://www.lemondeinformatique.fr/"
target="_blank">Droit l'oubli : Google s'incline devant la Justice europenne</a></p>
<p>Google a mis en ligne un formulaire permettant toute personne de demander
la suppression de son moteur de recherche des rsultats de recherche inclu...</p>
</aside>
<footer>
<h2>Rubriques</h2>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Formation</a></li>
<li> <a href="#"> Rcompense </a> </li>
<li> <a href="#"> Bibliothque </a> </li>
<li> <a href="#"> Infos </a> </li>
<li> <a href="#"> Contactez-nous </a> </li>
</ul>
<p>Copyright © 2013-2014 - BTS IDA 1 ESICOM Plateau- Tous droits
rservs<br/>
Plateau, Prs de l'Htel IBIS<br />
Contactez-nous <a href="mailto:esicom.ida2014@gmail.com">ici</a></p>
</footer>
</div>
</body>
</html>
BIBLIOGRAPHIE
Commentamarche. (2006, Juin). Feuille de style - CSS. Retrieved Octobre 2010, from Portail
encyclopedique commentcamarche.net: http://www.commentcamarche.net