Sie sind auf Seite 1von 77

Qu'est-ce que le HTML ?

Le HTML (HyperText Markup Language) est un format de prsentation de


donnes permettant de crer des pages web pouvant tre lues dans des
navigateurs.
C'est un langage de description de donnes, et non un langage de
programmation. Il est fig c'est--dire qu'une fois le document charg dans
le navigateur, il ne rpond aucune action de l'utilisateur sur le contenu de la
page.
Ce langage est pourvu d'un systme de balisage qui va permettre de
structurer notre document.

ensa - oujda

Qu'est-ce qu'une balise HTML ?

Une balise HTML est un lment que l'on va ajouter au texte de


dpart pour dire au navigateur de quelle manire l'afficher. Elle n'est
pas affiche telle quelle dans le navigateur, elle est interprte par
celui-ci.
Elle est toujours dlimite par les signes < et >.

ensa - oujda

Chaque balise ouverte doit tre ferme, cependant il


existe des exceptions.

On distingue deux types de balises :


** Les balises simples.
** Les balises doubles.
- Les balises simples
Ce sont des balises qui sont dites "vides", c'est--dire
qu'elles ne vont contenir aucune autre balise HTML. Ces
balises n'ont pas besoin d'tre fermes.
Exemple de balise simple
<img src="http://www.google.fr/logo.gif">
<img src="file:/c:/dossier/image.gif">

ensa - oujda

Les balises doubles

Les balises doubles sont dites ouvrantes/fermantes,


c'est--dire qu'elles ncessitent deux balises, une
ouvrante et une fermante dans lesquelles on va pouvoir
mettre d'autres balises ou du texte.
La balise fermante est identique la balise ouvrante,
la diffrence qu'elle contient un "/" pour indiquer quel
endroit on la ferme.
Exemple de balise double
<p>Ici du texte ou tout autre balise.</p>

ensa - oujda

Imbrication des balises


Lorsque l'on cumule l'criture de plusieurs balises
ouvrantes (forcment invitable), il est impratif de
respecter la hirarchie des balises, c'est--dire que la
premire ouverte sera la dernire tre ferme.
Exemple de balises imbriques
<b><u>Ici les balises sont correctement
imbriques.</u></b>

ensa - oujda

Structure d'un document HTML

Avant de commencer tout dveloppement,


il est important de connatre la structure
d'une page HTML.
Commenons donc par voir celle-ci avec
la structure minimale obligatoire d'une
page qui sera notre base de travail:

ensa - oujda

Document HTML de base


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Titre de la page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<META HTTP-EQUIV="refresh" CONTENT="Dlai;url=AdressePage">


permet de passer automatiquement une autre page aprs un certain dlai
:
Dlai = temps (en seconde) avant lappel dune autre page
AdressePage = adresse de la page charger

</head>
<body>
<!-- Ici votre site -->
</body>
</html>
ensa - oujda

La premire ligne du document s'appelle le DOCTYPE. C'est une


balise indispensable pour conserver la compatibilit du rendu de
votre page sur les diffrents navigateurs modernes.
Aprs le DOCTYPE, vient la balise <html>. Elle encadre l'ensemble
des autres balises.
La balise <html> contient deux grandes balises : <head>, qui va
contenir tout l'en-tte de la page et <body> qui va contenir tout le
corps du document.

ensa - oujda

Le DOCTYPE
quoi sert ce fameux DOCTYPE ? Est-il vraiment utile ?
Oui, il est utile, mme trs utile.
Il sert d'une part dclarer quel "langage", "grammaire",
ou norme on applique notre page. Cette dclaration
nous permet de soumettre nos pages au validateur du
W3C (World Wide Web Consortium) qui vrifie que notre
code HTML ne comporte aucune erreur de syntaxe
(balises mal fermes, utilisation d'attributs inexistants...)
en fonction du DOCTYPE, donc de la DTD (Document
Type Definition) choisie. D'autre part, il indique au
navigateur de quelle manire interprter telle balise, telle
proprit CSS.
L'absence de cette balise est appele le mode Quirks, ou
non conforme, alors qu'au contraire, la prsence de cette
balise est appele le mode Standard, ou conforme.
ensa - oujda

Les commentaires

Les commentaires permettent de laisser des informations ou des


descriptions du code et sont utilisables n'importe quel endroit de votre
document. Cependant, ce ne sont pas ces commentaires-l qu'il faudra
utiliser pour les langages JavaScript et CSS qui possdent leur propre
systme de commentaires.
Ces commentaires ne seront pas affichs dans le navigateur mais ils
resteront prsents dans le code source, donc il faut tout prix viter de
mettre des informations confidentielles dedans.
Ils sont dlimits par <!-- et --> et peuvent tre multilignes.
Par souci de compatibilit entre les navigateurs et de mal interprtation de
ceux-ci, il est fortement dconseill d'crire
deux tirets d'union (ou plus) conscutifs.

Exemples Commentaires HTML


<!-- Voici un premier commentaire sur une ligne. -->
<!-- Voici un deuxime commentaire.
Celui-ci est multilignes. -->

ensa - oujda

Le corps du document - body


C'est dans la balise <body> que nous allons mettre tout
le texte et toutes les images qui apparatront lorsqu'un
visiteur viendra sur notre page.
- Les niveaux de titres
Il existe diffrents niveaux de titres, ils vont de 1 6 et
ont chacun leur importance. La balise reprsentant ces
niveaux de titre est <hX> o X reprsente le niveau.
Exemple de titre
<h1>Titre de ma page</h1>
Il est important de respecter la hirarchie des diffrents
niveaux de titres, sachant que l'lment le plus haut est
le <h1>. En effet, un titre <h2> ne se retrouvera jamais
au-dessus d'un <h1> dans un document.
Le titre <h1> tant le plus important, il convient
galement de ne le faire apparatre qu'une seule fois
dans un document.
ensa - oujda

Les paragraphes de texte


Comme vous tapez du texte dans un traitement de texte,
vous segmentez votre texte en paragraphes. En HTML
c'est la mme chose, sauf qu'il faut prciser nous-mme
o commence un paragraphe et o il se termine. C'est
ce quoi sert la balise <p>.
Exemple:
<p>Voici un premier paragraphe.</p>
<p>Voici un deuxime paragraphe.</p>

ensa - oujda

Le texte en gras
Pour mettre le texte en gras on l'encadre de la balise <b>
Exemple : <b>Ce texte s'affichera en gras.</b>
Le texte en italique
Pour mettre le texte en italique on l'encadre de la balise <i> :
Texte en italique
Exemple : <i>Ce texte s'affichera en italique.</i>
Le texte soulign
Pour souligner le texte on l'encadre de la balise <u> :
Exemple : <u>Ce texte sera soulign.</u>

Le texte barr
Pour barrer le texte on l'encadre de la balise <s> :
Exemple : <s>Ce texte sera barr.</s>
ensa - oujda

Le texte en exposant
Pour placer le texte en exposant on l'encadre de la balise <sup> :
Exemple:
<sup>Ce texte sera en exposant.</sup>
Le texte en indice
Pour placer le texte en indice on l'encadre de la balise <sub> :
Exemple:
<sub>Ce texte sera en indice.</sub>
Modifier la couleur du texte
Pour modifier la couleur du texte on utilise l'attribut color de la balise
<font> :

Texte en rouge

<font color="#ff0000">Ce texte sera en rouge.</font>

ensa - oujda

Le codage des couleurs


Pour tre universel, le codage des couleurs en HTML
s'appuie sur le modle RVB (Rouge - Vert - Bleu).
Chaque couleur affiche est dcomposable en 3
couleurs primaires
Chaque couleur primaire prend sa valeur entre 0 et 255.
La couleur dcrite par (0,0,0) est le noir.
La couleur dcrite par (255,255,255) est le blanc.

ensa - oujda

Le codage des couleurs


La palette complte des couleurs est dcrite par
toutes les valeurs de triplet possible entre le noir
et le blanc.
Le rouge est dcrit par (255,0,0)

Le codage se fait en hexadcimal sur 3x2


chiffres (2 par couleur primaire) prcds par le
caractre #
Le noir est reprsent par #000000, le blanc par
#FFFFFF et le rouge par #FF0000

ensa - oujda

Les couleurs peuvent tre crites de deux manires :


En hexadcimal de type RVB et prcdes d'un dise (#) ;
Exemples : #ff0000 => rouge, #00ff00 => vert,
#0000ff => bleu.
Textuelles en anglais US ; Exemples : red, yellow, pink.

- Modifier la taille du texte


Pour modifier la taille du texte on utilise l'attribut size de la balise
<font> :
Texte en taille 5
<font size="5">Ce texte sera en taille 5.</font>
Par dfaut, la valeur de l'attribut size vaut "3".

ensa - oujda

Modifier la police du texte


Pour modifier la police du texte on utilise l'attribut face de la
balise <font> :
Texte en verdana
<font face="verdana">Ce texte sera en verdana.</font>
<font face="verdana,sans-serif">Ce texte sera en verdana ou
en sans-serif si verdana n'est pas installe.</font>

ensa - oujda

Lien texte

Les liens hypertextes

<a href= http://www.google.fr"> lien vers notre site web</a>


<a href="http://www.google.fr"><img src="/c:/images/hamza.jpg" align="right"></a>

<a href="http://www.google.fr"><img src="c:/images/hamza.jpg" width="150"


height="100" border="5" align="right"></a>

Les liens e-mails

Vous pouvez permettre vos visiteurs d'crire sur votre adresse e-mail
avec la syntaxe "mailto:" :
Exemple d'un lien vers une adresse e-mail
<a href="mailto:hbarboucha@ensa.ump.ma">Ecrivez-moi</a>
<a href="mailto:coco@eheio.ma?subject=invitation Sujet du mail">Ecrivezmoi</a>
<a
href="mailto:destinataire1@monsite.com;destinataire2@monsite.com">Ecri
vez-nous</a>
<a href="mailto:coco@eheio.ma?subject=Sujet du mail&body=Rendez-vous
le 17/05/2011Corps du mail">Ecrivez-moi</a>
Exemple d'un lien vers une adresse e-mail et une autre en copie
<a
href="mailto:destinataire1@monsite.com?cc=destinataire2@monsite.com">Ecriveznous</a>

ensa - oujda

Les ancres
Les ancres permettent de naviguer l'intrieur d'une mme page.
avec des liens qui renvoient plus bas dans la page, ce sont des
ancres.
Pour faire une ancre, il faut utiliser le signe dise (#) suivi d'un motclef. Ce mot-clef sera repris dans l'attribut id d'une balise laquelle
on fait faire une ancre :
Exemple d'une ancre interne
<a href="#motClef">Texte de mon ancre</a>
<h2 id="motClef">Texte vers lequel l'ancre est renvoye</h2>

ensa - oujda

Les protocoles
Un protocole est un moyen qu'ont deux
ordinateurs de communiquer. Il diffre
selon le type de donnes echanges.
Il existe de nombreux protocoles
disponibles par lien hypertexte, en voici
une liste non exhaustive :

ensa - oujda

ensa - oujda

Infobulle sur le lien

<a href="adresse/de/destination.html" title="Description de la page


cible">Texte du lien</a>

Fonction Javascript appele dans un lien


<a href="javascript:maFonctionJavascript()">Texte du lien</a>

ensa - oujda

Les listes

Elles servent, comme leur nom l'indique, crer une liste d'items, plus
prcisment les numrer, comme dans le cas d'un sommaire par
exemple.

Les diffrents types de listes


a - Les listes non ordonnes

Elles sont dmarques par la balise <ul> et chacun des items est entour de la balise <li>
:

Exemple de liste non ordonne


<p>Mes matires du 1er semestre:</p>
<ul>
<li>Informatique</li>
<li>conomie</li>
<li>Marketing</li>
<li>Chimie</li>
</ul>
ensa - oujda

Les diffrents types de puces


On va pouvoir jouer sur le design des puces l'aide de trois types
diffrents. On renseigne le type des puces avec
l'attribut type de la balise <ul>.
Les types sont :
disc (par dfaut au niveau 1 d'imbrication)
circle (par dfaut au niveau 2 d'imbrication)
square (par dfaut au niveau 3 et suivants d'imbrication)
Exemple : circle ou disc - square
<p>Mes matires du 1er semestre:</p> <ul type="circle">
<li>Informatique</li>
<li>conomie</li>
<li>Marketing</li>
<li>Chimie</li>
</ul>
ensa - oujda

b - Les listes ordonnes


Elles sont introduites par la balise <ol> et
chacun des items est encadr par la balise
<li> :
Exemple de liste ordonne
<p>Programme de la semaine :</p>
<ol>
<li>lundi</li>
<li>mardi</li>
<li>mercredi</li>
</ol>
ensa - oujda

Les listes de dfinitions


Elles sont dlimites par la balise <dl> qui comprend une
liste de termes dfinir reprsents par la balise <dt> qui
peuvent avoir une ou plusieurs dfinitions elles-mmes
encadres par la balise <dd> (une pour chaque
dfinition).
<dl>
<dt>Oreiller</dt>
<dd>Pice de literie bourre de plumes, de duvet, de crin... destine
soutenir la tte pendant le repos.</dd>
<dt>Puce</dt>
<dd>Insecte de trs petite taille se dplaant par sauts.</dd>
<dd>March o l'on vend des objets d'occasion.</dd>
</dl>
ensa - oujda

Les diffrents types de numrotation


Il existe cinq manires diffrentes de numroter les liste
ordonnes. On renseigne le type de numrotation avec
l'attribut type de la balise <ol>.
Les types sont :
1 : Numrotation par les chiffres arabes (par dfaut).
I : Numrotation par les chiffres romains.
i : Numrotation par les chiffres romains minuscules.
A : Numrotation par les lettres de l'alphabet.
a : Numrotation par les lettres de l'alphabet
minuscules.

ensa - oujda

Exemple de liste ordonne


<p>Top 3 du tierc :</p>
<ol type="I">
<li>Jolly</li>
<li>Tonnerre</li>
<li>Tornade</li>
</ol>
<p>Top 3 du tierc :</p>
<ol type="i">
<li>Jolly</li>
<li>Tonnerre</li>
<li>Tornade</li>
</ol>
ensa - oujda

<p>Top 3 du tierc :</p>


<ol type="A">
<li>Jolly</li>
<li>Tonnerre</li>
<li>Tornade</li>
</ol

<p>Top 3 du tierc :</p>


<ol type="a">
<li>Jolly</li>
<li>Tonnerre</li>
<li>Tornade</li>
</ol>

ensa - oujda

Modifier le dbut de la numrotation


Il est tout fait possible, pour une raison ou une autre, de modifier le
numro de dpart par lequel va s'incrmenter la numrotation.
Pour cela, il suffit de prciser une valeur l'attribut start de la balise <ol>.
Cette valeur doit dans tous les cas tre numrique :

Exemple de liste ordonne

<p>Top 3 invers du tierc :</p>


<ol type="I" start="8">
<li>Tortue</li>
<li>Escargot</li>
<li>Limace</li>
</ol>

ensa - oujda

Les tableaux
Un tableau est tout simplement une suite de lignes et de colonnes
qui forment un ensemble de cellules.
Un tableau est dlimit par la balise <table>. Le contenu d'un
tableau HTML est gnr horizontalement. C'est--dire qu'il n'est
pas cr colonne par colonne mais ligne par ligne. Pour crer un
tableau, nous commenons par crer des lignes grces aux balises
<tr>. Puis nous insrons dans ces lignes les cellules du tableau
grce aux balises <td>.
Le contenu (textes, images, autres balises) se trouve uniquement
dans les balises <td> et ne doit se trouver en aucun cas en dehors.

ensa - oujda

<table border="1">
<caption align="bottom">Emploi du temps</caption>
<tr>
<td>Lundi</td>
<th>mardi</th>
<th>mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
</tr>
<tr>
<td>8</td>
<td>14</td>
<td>10</td>
<td>16</td>
<td>10</td>
</tr>
<tr>
[...]
</tr>
</table>
ensa - oujda

Arrire-plans
image arrire-plan
<table background= "/c:/images/ensa.jpg"
border="1">

Couleurs arrire-plans

<table bgcolor= "ccffcc" border="1">

ensa - oujda

WIDTH=
Fixe la largeur du tableau

HEIGHT=
Fixe la hauteur du tableau

CELLPADDING=
Dfinit l'espace entre l'objet et le contour d'une cellule

CELLSPACING=
Dfinit l'paisseur du trait entre les cellules

Dcrit le titre du tableau


<CAPTION ALIGN=>
</CAPTION>
ALIGN=
ALIGN=TOP (par dfaut) la lgende du tableau est en haut ALIGN=BOTTOM la lgende du
tableau est en bas

Fusionner
Colspan : fusionner 2 colonnes
Rowspan : fusionner 2 cellules

ensa - oujda

Les formulaires

Les formulaires servent envoyer des donnes


au serveur, donnes remplies en gnral par un
visiteur, que ce soit pour l'inscription sur un site
ou un formulaire de contact par exemple.
Les formulaires sont dots de divers contrles
comme des champs de saisie, des boutons, des
listes, etc, qui permettent au visiteur d'interagir
avec la page qu'il est en train de consulter.

ensa - oujda

Exemple de balise form


<form action="envoi-formulaire.php" method="post">
<!-- Contenu du formulaire -->
</form>
Exemples de champs texte - monolignes

<input type="text" size="5" name="code_postal"


maxlength="5">
<input type="text" name="nom_champ"
readonly="readonly" value="Champ vrouill">
<input type="text" name="login" value="Entrez ici votre
login" size="20">
<input type="password" name="mdp">
ensa - oujda

Exemples de champs texte multilignes


<textarea name="commentaire" rows="5"
cols="80"></textarea>
<textarea name="sujet" rows="6"
cols="100">Texte par dfaut</textarea>

ensa - oujda

Exemple de champ file


<input type="file" name="image">
Limitation du poids du champ file
<input type="hidden"
name="MAX_FILE_SIZE" value="20000">

ensa - oujda

Exemples de groupes de boutons radio


Les boutons radio sont utiliss lorsque vous voulez laisser aux
visiteurs un choix et un seul parmi une liste de propositions.

<p>
<input type="radio" name="civilit" value="mlle"> Mademoiselle
<input type="radio" name="civilit" value="mme"> Madame
<input type="radio" name="civilit" value="mr"> Monsieur
<input type="radio" name="civilit" value="homme"
checked="checked"> Homme
</p>

ensa - oujda

Les cases cocher


Les cases cocher sont sensiblement identiques aux boutons radio,
mais permettent un choix multiple pour un groupe de propositions

<input type="checkbox" name="qualite"


value="intelligent"> Intelligent
<input type="checkbox" name="qualite"
value="beau"> Beau
<input type="checkbox" name="qualite"
value="serviable"> Serviable
<input type="checkbox" name="qualite"
value="fort"> Fort
<input type="checkbox" name="qualite"
value="gnreux"> Gnreux
ensa - oujda

Exemples de boutons d'envoi


<input type="submit" name="envoyer"
value="Valider">
<button type="submit"
name="soumettre">Soumettre<br>les
rponses</button>
<input type="image" name="envoyer"
src="adresse/de/l/image">
<input type="reset" name="effacer"
value="Effacer toutes les valeurs">
ensa - oujda

Les listes
Les listes permettent de laisser un choix aux visiteurs, au mme titre
que les boutons radio ou les cases cocher,
mais sont plus pratiques lorsqu'il s'agit de proposer un grand
nombre de choix.

<select name="couleur_yeux">
<option value="bleus">Bleus</option>
<option value="bruns"
selected="selected">Bruns</option>
<option value="verts">Verts</option>
<option value="noisettes">Noisettes</option>
<option value="gris">Gris</option>
</select>
ensa - oujda

Cette liste est donc une liste droulante avec un


seul choix possible parmi les cinq proposs.
On peut rendre cette liste non droulante en
rajoutant l'attribut size qui prend pour valeur le
nom de choix afficher,
par exemple "3".
Ce qui donne :
Exemple de liste
<select name="couleur_yeux" size="3">

ensa - oujda

Exemple de liste choix multiple

<select name="matieres_preferees" size="5"


multiple="multiple">
<option value="maths">Maths</option>
<option value="franais">Franais</option>
<option value="anglais">Anglais</option>
<option value="histoire">Histoire</option>
<option value="sport">Sport</option>
<option value="dessin">Dessin</option>
<option value="musique">Musique</option>
<option value="physique">Physique</option>
<option value="sciences naturelles">Sciences
naturelles</option>
</select>
ensa - oujda

fieldset
Exemples de <fieldset>
<legend>Informations
personnelles</legend>
<!-- Ici divers champs sur les informations
personnelles, comme la saisie du nom,
prnom et adresse -- >
</fieldset>
ensa - oujda

balise <label>

Il y a d'autre part, la balise <label> qui permet de donner


un libell un champ de formulaire en les associant
l'aide
de l'attribut for de cette balise qui doit tre identique
l'attribut id du champ auquel elle est rattache. Le texte
mis
dans le label est alors cliquable.
Par exemple :
Exemples de fieldset
<label for="nom">Votre nom</label> <input type="text"
name="nom" id="nom">
Aimez-vous la viande ?
<label for="oui">Oui</label> <input type="radio"
name="viande" id="oui">
<label for="non">Non</label> <input type="radio"
name="viande" id="non">
ensa - oujda

HTML5
Les nouveauts du HTML5 portent notamment
sur :

** syntaxe : plus transparente pour le


dveloppeur et plus proche du rendu,

grace, par exemple, des nouveaux tags


comme <*header*>, <*section*>, <*video*>.

** formulaires : cration et gestion des


formulaires facilites

** multimedia : meilleure intgration des


contenus photo et vido

** javascript : plus d'interactivit pour moins


de lignes de code javascript
ensa - oujda

Structure de base d'une page HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
ensa - oujda

exemple

<h1>Test Music 1</h1>


<audio controls autoplay >
<source src="bobby.mp3" ></source>
</audio>

<h1>Test Music 2</h1>


<audio controls >
<source src="bobby.mp3" ></source>
</audio>

<h2>Test Video1</h2>
<video controls poster="image.jpg" width="400" height="300">
<source src="video.mp4" />
</video>

<br/>
<h1>Youtuve en direct</h1>
<iframe width="340" height="200"
src="http://www.youtube.com/embed/6_I70KACh4o?feature=player_embe
dded" frameborder="4" allowfullscreen></iframe>
ensa - oujda

CSS
Cascading Style Sheets

ensa - oujda

quoi sert CSS ?

Les feuilles de Style en Cascade (CSS : Cascading Style


Sheets ) permettent d'automatiser l'affichage du corps
de la page : titres, paragraphes, divisions, tables,
ancrages, ..
CSS ? C'est lui qui vous permet de choisir la couleur de
votre texte.
Lui qui vous permet de slectionner la police utilise sur
votre site.
Lui encore qui permet de dfinir la taille du texte, les
bordures, le fond...
Et aussi, c'est lui qui permet de faire la mise en page de
votre site. Vous pourrez dire : je veux que mon menu
soit gauche et occupe telle largeur, que l'en-tte de
mon site soit cal en haut et qu'il soit toujours visible,
etc.
ensa - oujda

Il y a 4 versions importantes de CSS :


CSS 1
CSS 2.0
CSS 2.1
CSS 3
Plus le navigateur est vieux, moins il connat
de fonctionnalits CSS.
ensa - oujda

O crit-on le CSS ?
Vous avez le choix, car on peut crire du code en
langage CSS 3 endroits diffrents :
Dans un fichier .css (mthode la plus
recommande) ;
Dans l'en-tte <head> du fichier HTML ;
Directement dans les balises du fichier HTML
via un attribut style (mthode la moins
recommande) ;
ensa - oujda

Les proprits de police


Proprit

Signification

Valeurs possibles

font-size

Hauteur de police en points ou pixels

font-size:12px
font-size:10pt

font-family

Nom de police

font-family:arial,verdana
font-family:sans serif

font-weight

paisseur de la police (gras)

font-weight:bold
font-weight:normal

font-style

Style de police (italic)

font-style:italic
font-style:normal

color

Couleur de police

color:green
color:#FFCC00
Deug STPI 1re anne

55

Les proprits de texte


Proprit

Signification

Valeurs possibles

text-height

Hauteur de ligne en points ou pixels

text-height:12px

Attribut de soulignement

text-decoration:overline
text-decoration:line-through
text-decoration:underline
text-decoration:none

text-align

Alignement de paragraphe (balise P)

text-align:left
text-align:right
text-align:center

text-indent

Indentation de paragraphe (balise P)

text-indent:25px
text-indent:-15px

Transformation des majuscules

text-transform:capitalize
text-transform:uppercase
text-transform:lowercase

text-decoration

text-transform

Deug STPI 1re anne

56

Les proprits d'arrire-plan


Proprit

Signification

Valeurs possibles

background

Image d'arrire-plan

background:image.gif

background-color

Couleur d'arrire-plan

background-color:black

Deug STPI 1re anne

57

h1, h2, em

{
color: blue;
}
Cela signifie : "Je veux que le texte de mes <h1> <h2> et <em> soit crit en bleu"

ensa - oujda

class & id
Comment faire pour que seulement certains
paragraphes soient crits d'une manire
diffrente ? On pourrait placer notre code CSS
dans un attribut style la balise que l'on vise (oui
mais non recommand, il vaut mieux utiliser un
fichier CSS externe).
c'est un attribut que l'on peut mettre sur
n'importe quelle balise, aussi bien titre que
paragraphe, image, etc.
ensa - oujda

Exp : .fiche
{
}
<h1 class= fiche"> </h1>
<p class=""></p>
<img class="" />
#id
{
}

ensa - oujda

valeur relative
p { font-size: small; }
h1 { font-size: large;}
La technique prfre consiste indiquer la taille en "em". C'est une unit spcifique
au CSS.
p
{
font-size: 0.8em;
}
h1
{
font-size: 1.3em;
}

ensa - oujda

Les flottants

Le CSS nous permet de faire flotter un lment autour du texte. On dit aussi
qu'on fait un "habillage".
left : l'lment flottera gauche.
right : l'lment flottera droite
Exp:
<p><img src="flash.gif" class="imageflottante" alt="Image flottante" /> Ceci
est un texte normal de paragraphe, crit la suite de l'image et qui
l'habillera car l'image est flottante.</p>

Code : CSS
.imageflottante
{
float: left;
}
ensa - oujda

Bordures standard
Le type de bordure :

none : pas de bordure (par dfaut)


solid : un trait simple.
dotted : pointills.
dashed : tirets.
double : bordure double.
groove : en relief.
ridge : autre effet relief.
inset : effet 3D enfonc.

outset : effet 3D surlev.

h1
{
border: 3px blue dashed;
}
ensa - oujda

En haut, droite, gauche, en bas...

border-left: 2px solid black;

border-right: 3px solid black;

border-top : 4px solid black;

border-bottom :5px solid black;

ensa - oujda

Javascript
Le Javascript est un langage de programmation de
scripts orient objet
un langage de programmation orient objet est un
langage qui contient des lments, appels objets, et
que ces diffrents objets possdent des
caractristiques spcifiques ainsi que des manires
diffrentes de les utiliser. Le langage fournit des
objets de base comme des images, des dates, des
chanes de caractres mais il est galement
possible de crer soi-mme des objets pour se
faciliter la vie et obtenir un code source plus clair
(facile lire) et une manire de programmer
beaucoup plus intuitive (logique).
ensa - oujda

Le Javascript est un langage dit client-side, c'est--dire que les


scripts sont excuts par le navigateur chez l'internaute (le client).
Cela diffre des langages de scripts dits server-side qui sont
excuts par le serveur Web. C'est le cas des langages comme le
PHP.
Le Javascript s'inclut directement dans la page Web (ou dans un
fichier externe) et permet de dynamiser une page HTML, en ajoutant
des interactions avec l'utilisateur, des animations, de l'aide la
navigation, comme par exemple :

Afficher/masquer du texte ;
Faire dfiler des images ;
Crer un diaporama avec un aperu en grand des images ;
Crer des infobulles

ensa - oujda

exemple

<!DOCTYPE html>
<html>
<head>
<title>test javascript!</title>
</head>
<body>
<script> ou <script type=text/javascript> ou <script language=javascript>
alert('Hello javascript!');
</script>
</body>
</html>

<script language="javascript" src="exp1.js"></script>


</head>

<body onload="appel()">
ensa - oujda

Fonctions
Fonction alert() est une instruction simple,
appele fonction, qui permet d'afficher une
bote de dialogue contenant un message. Ce
message est plac entre apostrophes, ellesmmes places entre les parenthses de la
fonction alert().
Fonction Confirm() : Son utilisation est simple :
on lui passe en paramtre une chane de caractres
qui sera affiche l'cran et elle retourne un boolen
en fonction de l'action de l'utilisateu

Fonction prompt.
ensa - oujda

Les oprateurs de concatnation


var nom = "hamdaoui";
var prenom = " ali";
alert ("votre nom est:"+ nom+" "+prenom+' '+
"bienvenue");

ensa - oujda

Structures de choix avec If


var x=-10;

if (x== 0){

alert("le nombre est null");

}else if (x<0){

alert("le nombre est ngatif");

}else{

alert("le nombre est positif");

}
ensa - oujda

Structures de choix avec switch-case

var x = 2;
switch (x){
case 1 :
alert ("la ville est Ahfir");
break;
case 2 :
alert("la ville est Berkane");
break;

default :
alert("ville inconnue");
}
ensa - oujda

Structure de boucle avec for

//var x=1;
for (x=1;x<=10;x++){
document.write("page"+x+"</br>");
}

ensa - oujda

Structure de boucle avec while


var x=1;
while (x<=10){
document.write("page"+x+"</br>");
x=x+1;
}

ensa - oujda

Evnements
Load
onClick & onDblclick
onFocus

OnBlur
OnChange
OnKeyDown
OnKeyPress
OnKeyUp

OnSelect

OnMouseOver
OnMouseOut
OnMouseDown & OnMouseUp

ensa - oujda

Evnements Load
<script language="javascript">

window.load(page_demar());

function page_demar(){

alert ("Bienvenue au site web de...");

//javascript est sensible la case exp(Maj et Min) ;

</script>
</head>
<body>
<body>
aaaaaaaaa

</body>
ensa - oujda

onClick & onDblclick

<script language="javascript">

function clique(s){

alert (s);

</script>
</head>
<body>
<form>
<input type="submit" value="valider-1clik"
onClick="clique('bienvenue')">
<input type="submit" value="valider2-clik"
ondblclick="clique('marhaba')">
</form>
ensa - oujda

Onfocus -- onblur

<script language="javascript">
function focuss(){
document.form1.ville.value="oujda";
}
</script>
</head>
<body>
<form action="#" method="post" name="form1">
<input type="text" name="ville" onfocus="focuss()" /></br>
<input type="text" name="nationalite" onfocus="this.value='Marocaine'"
onblur="if(this.value == ){this.value='franaise'}"/></br>
<input type="submit" value="valider2-clik" ondblclick="clique('marhaba')">
</form>

ensa - oujda

Das könnte Ihnen auch gefallen