Programmation Web Avancé

Programmation web
avancé
Langage HTML
HyperText Markup Language
Le langage HTML
• HTML est le langage universel utilisé pour
communiquer sur le Web. L’information sera ainsi
transportée sur le réseau (éventuellement sur Internet),
pour aboutir sur un poste client (Micro-ordinateur) puis
interprétée grâce à un programme appelé navigateur ou
browser.
• Le logiciel que l'on appelle un navigateur (browser)
permet de surfer sur le Net et d'afficher sur l’écran les
"pages" trouvées. Il existe différents browser, dont les
plus connus sont Internet Explorer et Chrome mais il en
existe beaucoup d'autres.
Le document HTML minimum
• Une page HTML est un fichier texte, enrichi d'un
certain nombre de codes ou commandes,
appelés balises.
• Ces balises sont toujours exprimées sous la
forme d'un mot clé, encadré par les caractères
"<" et ">". Exemple : <BALISE>.
• Pour la plupart des balises, il existe une balise
de fermeture associée, reprenant le même nom,
mais précédée du caractère "/".
• La commande spécifiée s'applique donc
uniquement au texte situé entre le couple de
balises ainsi formé
Structure d’un document:
<HTML>
...
</HTML>
•Entre ces deux balises, on définit deux zones :
•l'en-tête, spécifié par les commandes
<HEAD> et </HEAD>,
• ainsi que le corps, délimité par: <BODY> et
</BODY>.
en-tête
• On ne met généralement qu'une seule
information, le Titre du document qui sera
affiché en haut de la fenêtre du
navigateur
• Le Titre est indiqué entre les balises
<TITLE> et </TITLE>
• Exemple
• <TITLE>Ceci est le Titre</TITLE>.
Le corps
• On met tout le document à afficher
(texte, définition des images etc.)
• Remarque:
– Signalons l'existence d'une balise de
commentaires, qui peut être utilisée partout
dans les documents HTML, définie comme
suit :
– 
Récapitulatif
<HTML> Ceci est le début d'un document de type HTML.
</HTML> Ceci est la fin d'un document de type HTML.

<HEAD> Ceci est le début de la zone d'en-tête
(contenant des informations destinées au
browser).
</HEAD> Ceci est la fin de la zone d'en-tête.

<TITLE> Ceci est le début du Titre de la page.
</TITLE> Ceci est la fin du Titre de la page.
<BODY> Ceci est le début du document.
</ BODY> Ceci est la fin du document.

Structure générale d'une page
HTML
<HTML>
<HEAD>
<TITLE> Titre du document</TITLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Traitement du texte
• Les balises élémentaires
• Les couleurs
• Les titres
• Les caractères spéciaux
Les balises élémentaires
Gras [Bold] <B>...</B> Début et fin de
zone en gras
Italique [Italic] <I>...</I> Début et fin de
zone en italique
Taille de caractère [Font size] <FONT SIZE=? Début et fin de
>...</FONT> zone avec cette
taille
Couleur de caractère [Font color] <FONT COLOR="# Début et fin de

$$$$$$"></FONT> zone en couleur
A la ligne [Line break] <BR> Aller à la ligne

Commentaires [Comments]  Ne pas afficher
Paragraphe [Paragraph] <P> Début d'un
nouveau
paragraphe
Centrage [Center] <CENTER> Centrer
</CENTER>
Remarque
• Il n'est pas rare d'utiliser plusieurs balises
pour un même élément de texte. Il faut
veiller à bien les imbriquer. Ainsi
<B><I>...</I></B> est correct et
<B><I>...</B></I> risque de vous créer
des ennuis.
• La taille dans <FONT SIZE=?> peut être
indiquée avec un nombre de 1 à 7. La
valeur par défaut étant 3
Retour
Couleurs en HTML
• Chaque élément de couleur (Rouge, Vert
ou Bleu) est codé en HTML sur 8 bit en
hexadécimal soit de 00 à FF (de 0 à 255)
Ainsi FF de rouge, FF de Vert et FF de
Bleu, donne du Blanc
Quelques Code de couleurs
basiques
Bleu #0000FF
Vert #00FF00
Blanc #FFFFFF
Violet #8000FF
Rouge #FF0000
Jaune #FFFF00
Gris clair #C0C0C0
Noir #000000
Exemple1
<HTML>
<HEAD>
<TITLE> Exemple1</TITLE>
</HEAD>
<BODY>texte simple<BR>
<B>texte en gras</B><BR>
<STRONG>texte en gras</STRONG><BR>
<I>texte en italique</I><BR>
<EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>

</BODY>
</HTML>
Les Titres
• Pour donner une taille aux caractères d’un
titre dans un texte avec un saut de ligne à
la fin, en utilise la balise <Hn> … </Hn>
• Où n peut prendre une valeur comprise
entre 1 et 6 (dans l’ordre décroissante des
tailles)
Exemple 3
<HTML>
<HEAD>
<TITLE> Exemple 3
</TITLE>
</HEAD>
<B><I><H1>texte en gras et en italique et H1</H1></I></B>
</BODY>
</HTML>
Les caractères spéciaux
• Les navigateurs ne reconnaissent pas les
caractères spéciaux. Heureusement
chaque caractère possède une abréviation
(ENTITY) permettant de le coder.
Voici quelque exemple
Espace
© ©
< <
> >
é é
è è
Listes
• Les listes numérotées
• Les listes à puces
Les listes numérotées
• Une liste numérotée est délimitée par les
balises <OL> et </OL> entre lesquelles
chaque élément de la liste est précédé de
la balise <LI>.
Exemple 4
<HTML>
<HEAD>
<TITLE> Exemple 4
</TITLE>
</HEAD>
<OL>
<LI> élément 1,</li>
<LI> élément 2, </li>
<LI> élément 3. </li>
</OL>
</BODY>
</HTML>
Les listes à puces
• Une liste non numérotée est délimitée par
les balises <UL> et </UL> entre lesquelles
chaque élément de la liste est précédé de
la balise <LI>.
Exemple 5
<HTML>
<HEAD>
<TITLE> Exemple 5
</TITLE>
</HEAD>
<UL>
<LI> élément 1,
<LI> élément 2,
<LI> élément 3.
</UL>
</BODY>
</HTML>
Remarque
• Notez qu'il est possible d'imbriquer des
listes, du même type ou de types
différents
Exemple 6
<HTML>
<HEAD>
<TITLE> Exemple 6
</TITLE>
</HEAD>
<UL>
<LI> élément 1,
<OL>
<LI>sous-élément 1A,
<LI>sous-élément 1B.
</OL>
<LI> élement 2,
<OL>
<LI>sous-élément 2A,
<LI>sous-élément 2B.
</OL>
<LI> élément 3.
</UL>
</BODY>
</HTML>
Liste de définitions
• Il est possible de définir des listes
spéciales, permettant de faire des
glossaires, en utilisant les balises <DL> et
</DL> pour encadrer la liste, <DT> pour
spécifier un élément et <DD> pour
indiquer sa définition.
Exemple 7
<HTML>
<HEAD>
<TITLE> Exemple 7
</TITLE>
</HEAD>
<DL>
<DT>HTML<DD>HyperText Markup Language
<DT>HTTP<DD>HyperText Transfert Protocol
</DL>
</BODY>
</HTML>
Les attributs
Type="type" UL & OL Spécifie l'aspect des
marqueurs des
éléments
Start="nombre" OL commence la
numérotation à la
valeur spécifiée.
Type des listes
<UL type="disc "> Puces rondes pleine
<UL type="circle"> Puces rondes creuses
<UL type="square"> Puces carrées
<OL type=1> (1,2,3)
<OL type=a> (a,b,c)
<OL type=A> (A,B,C)
<OL type=i> (i,ii,iii)
<OL type=I> (I,II,III)
Exemple
<HTML>
<HEAD>
<TITLE> Exemple
</TITLE>
</HEAD>
<OL Type=a >
<LI> élément 1,
<LI> élément 2,
<LI> élément 3.
</OL>
</BODY>
</HTML>
Exemple
<HTML>
<HEAD>
<TITLE> Exemple
</TITLE>
</HEAD>
<UL Type=circle >
<LI> élément 1,
<LI> élément 2,
<LI> élément 3.
</UL>
</BODY>
</HTML>
Tableau
• Grace aux balise <table> </table>
• Avec l’attribut « border » (<table border>) on

définit une grille.
• Les contenus de chaque cellule sont saisis
ligne par ligne.
– La balise <tr> détermine les lignes
– La balise <td> les contenus des cellules.
– La balise <th> le titre
Exemple
<HTML>
<HEAD>
<TITLE> Exemple
</TITLE>
</HEAD>
<BODY>tableau avec bordure<BR>
<table border>
<tr>
<th> Titre1 </th>
<th> Titre2 </th>
<th> Titre3 </th>
</tr>
<tr>
<td> ligne 1, Colonne1</td>
<td> ligne 1, Colonné3 </td>
</tr>
<tr>
</tr>
</table>
</BODY>
</HTML>
Formatage de colonne
• La balise <colgroup> définit une même
largeur de colonne ou une largeur
différente.
• Pour une même largeur de colonne le
paramètre width définit la largeur et le
paramètre span définit le nombre de
colonne.
Exemple 11
<HTML>
<HEAD>
<TITLE> Exemple
</TITLE>
</HEAD>
<BODY>tableau avec bordure, avec 3 colonnes de taille 150<BR>
<table border>
<colgroup width=150 span=3>
</colgroup>
<tr>
<th> Titre1 </th>
<th> Titre2 </th>
<th> Titre3 </th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</BODY>
</HTML>
Tableau à colonne de taille
différente
• La balise <col> avec le paramètre width
permet de définir la taille de chacune des
colonnes d’un tableau
Exemple
<HTML>
<HEAD>
<TITLE> Exemple
</TITLE>
</HEAD>
<BODY>tableau avec bordure, avec largeur des colonnes 90, 140 et 250<BR>
<table border>
<colgroup >
<col width= 90>
<col width= 140>
<col width= 250>
</colgroup>
<tr>
<th> Titre1 </th>
<th> Titre2 </th>
<th> Titre3 </th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</BODY>
</HTML>
Titre de tableau
• La balise <caption> permet d’ajouter un
titre à une table.
• Le paramètre align permet d’aligner le
titre en haut (top), en bat (bottom) à
gauche (left) ou à droite (right) du tableau.
Exemple
<HTML>
<HEAD>
<TITLE> Exemple
</TITLE>
</HEAD>
<BODY>tableau <BR>
<table border>
<colgroup >
<col width= 90>
<col width= 140>
<col width= 250>
</colgroup>
<caption align=top> tableau 1 </caption>
<tr>
<th> Titre1 </th>
<th> Titre2 </th>
<th> Titre3 </th>
</tr>
</table>
</BODY>
</HTML>
Exemple
<HTML>
<HEAD>
<TITLE> Exemple
</TITLE>
</HEAD>
<BODY>tableau <BR>
<table border>
<colgroup >
<col width= 90>
<col width= 140>
<col width= 250>
</colgroup>
<caption align=bottom> Tableau 2 </caption>
<tr>
<th> Titre1 </th>
<th> Titre2 </th>
<th> Titre3 </th>
</tr>
</table>
</BODY>
</HTML>
Couleur de fond et alignement du
contenu d’une colonne
• Le paramètre bgcolor, de la balise <col>
permet de définir la couleur de fond d’une
colonne.
• Le paramètre align, de la balise <col>
permet d’aligner l’écriture à gauche (left),
à droite (right) ou centrer (center)
Exemple
<HTML>
<HEAD>
<TITLE> Exemple
</TITLE>
</HEAD>
<BODY>tableau avec bordure, avec largeur des colonnes 90, 140 et 250<BR>
<table border>
<colgroup >
<col width= 90>
<col width= 140>
<col width= 250>
</colgroup>
<tr>
<th> Titre1 </th>
<th> Titre2 </th>
<th> Titre3 </th>
</tr>
<tr>
<td bgcolor = #8FFFE5> ligne 1, Colonne1</td>
<td align = right> ligne 1, Colonne2</td>
<td align = center> ligne 1, Colonné3 </td>
</tr>
<tr>
<td bgcolor = #8FFFE5> ligne 2, Colonne1</td>
<td align = right> ligne 2, Colonne2</td>
<td align = center> ligne 2, Colonne3 </td>
</tr>
</table>
</BODY>
</HTML>
Fusion de cellule de tableau
• La commande colspan permet d’indiquer
le nombre de colonnes sur lesquelles la
cellule s’étend.
• La commande rowspan permet d’indiquer
le nombre de lignes sur lesquelles la
cellule s’étend.
Exemple 18
<HTML>
<HEAD>
<TITLE> Exemple
</TITLE>
</HEAD>
<BODY>
<table border>
<tr>
<th colspan = 3> Les cellules peuvent s'étendre sur plusieurs colonnes </th>
</tr>
<tr>
<td> Cellule 1</td>
<td> Cellule 2</td>
<td> Cellule 3</td>
</tr>
</table>
</BODY>
</HTML>
Exemple
<HTML>
<HEAD>
<TITLE> Exemple 19
</TITLE>
</HEAD>
<BODY>
<table border>
<tr>
<th rowspan = 4> cellule sur 4 lignes </th>
<td> Contenu 1 </td>
</tr>
<tr>
<td> Contenu 2</td>
</tr>
<tr>
<td> Contenu 3</td>
</tr>
<tr>
<td> Contenu 4</td>
</tr>
</table>
</BODY>
</HTML>
Les liens Hypertexte
• HTML (Hyper Text Markup Language) est un
langage hypertexte qui permet en cliquant sur
un mot généralement souligné (ou une image)
de passer vers :
– un autre endroit du document.
– un autre fichier HTML situé sur l’ordinateur.
– un autre ordinateur situé sur le Web.
• Ce système d'hypertexte permet de naviguer de
page en page.
Les liens
• La syntaxe de ces liens entre plusieurs
«pages» est:
• <A HREF="URL ou adresse">...</A>
• Il existe principalement deux type de lien à
savoir:
– Les liens externes (vers un autre serveur)
– Les liens locaux (vers le même serveur)
• Dans le même fichier
• Dans un autre fichier sur le même serveur
Lien externe
<HTML>
<HEAD>
<TITLE> Exemple
</TITLE>
</HEAD>
<BODY>
<a href="http://estfbs.usms.ac.ma/">EST FBS</a>
</BODY>
</HTML>
Liens internes au fichier (ancres locales)
Exemple
HTML>
<HEAD>
<TITLE> Exemple
</TITLE>
</HEAD>
<BODY>
<p> Paragraphe 11 <BR>
<a href="#ancre1">EST FBS</a> <BR>
<a href="#ancre2">Université Sultan Moulay Slimane</a> <BR>
texte <BR> texte <BR> texte <BR>
texte <BR> texte <BR> texte <BR> texte <BR>
</P>
<H3 id="ancre1"> EST FBS </H3>
<A HREF="http://estfbs.usms.ac.ma/"> EST </A><BR>
texte <BR> texte <BR> texte <BR> texte <BR>
<A name ="ancre2"> Université Sultan Moulay Slimane </A>
</BODY>
</HTML>
Liens entre fichiers (ancres externes)
Exemple 22
<HTML>
<HEAD>
<TITLE> Exemple 22
</TITLE>
</HEAD>
<BODY>
<p> Paragraphe 21
<a href=« page21.html#ancre1">ancre1</a> </P>
<P> Paragraphe 22
<a href=“page21.html#ancre2">ancre2</a>
<P> Paragraphe 23 </P>
</p>
</BODY>
</HTML>
Les images
• Insérer une image
Exemple d'image <BR>

<img src="images/im.png" alt="Je n’ai pas
trouvé l’image"
title ="Je m’appelle im" />
src: adresse de l’image sur l’ordinateur

alt: texte alternatif si on ne trouve pas l’image
Les formulaires
Syntaxe
<form action="…" method="…">
----- champs du formulaire ici -----
</form>
action : L’URL où doit être traité la requête

method : "get" ou "post"
53
L’attribut « action »
• action="url"
• Uniform Resource Locator
• Identifie le programme auquel les
données du formulaire seront
soumises.
• http://www.google.ca/search?hl=en&q=cvm
protocole serveur programme
54
L’attribut method
• 2 possibilités:
– - get
○ Les données du formulaire sont ajouté à l’URL
spécifié par l’attribut action.
○ Ex: http://www.google.ca/search?hl=en&q=cvm
– - post
○ Les données sont envoyées dans le corps de la
requête et ne sont donc pas ajoutées à L’URL.
○ Ex: Tout formulaire d’authentification
55
Le champ d’insertion à 1 ligne
• <input type="text" name="" value="" />
L’URL résultante de la requête est :

http://www.google.ca/search?hl=en&q=cvm . Pouvez-vous y voir le nom du
champ d’insertion ?
56
Insertion d’un bloc de texte
• <textarea name="" cols=""
rows=""><textarea>
○ cols = nombre de colonnes
○ rows = nombre de lignes
<html>
<head>
</head>
<body>
<form action="" method="get">
<textarea name="monTexte" cols="5" rows="2"></textarea>
</form>
</body>
</html>
57
Insertion d’un bloc de texte
(suite)
<html>
<head>
</head>
<body>
<textarea name="monTexte" cols=“25" rows=“5"></textarea>
</form>
</body>
</html>
58
Insertion d’un bloc de texte (suite)
<html>
<head>
</head>
<body>
<textarea name="monTexte" cols=“25" rows=“5">Ceci est un texte de
départ!!</textarea>
</form>
</body>
</html>
59
Les groupes de boutons radio
• <input type="radio" name="" value="" />
…
<input type="radio" name="couleur" value="rouge" /> rouge <br/>
<input type="radio" name="couleur" value="vert" /> vert <br/>
<input type="radio" name="couleur" value="bleue" /> bleue <br/>
…
60
Les groupes de boutons radio
(suite)
• Pour sélectionner un des choix, utiliser l’attribut
« checked »
…
<input type="radio" name="couleur" value="rouge" checked="checked" /> rouge <br/>
<input type="radio" name="couleur" value="vert" /> vert <br/>
<input type="radio" name="couleur" value="bleue" /> bleue <br/>
…
61
Les cases à cocher
 <input type="checkbox" name="" value="" />
…
Je possède une voiture : <input type="checkbox" name="voiture" value="oui" /><br/>
Je possède 3 ordinateurs : <input type="checkbox" name="ordinateurs" value="oui" /><br/>
Je travaille la fin de semaine : <input type="checkbox" name="travaille" value="oui" /><br/>
</form>
….
62
Les cases à cocher (suite)
 Pour sélectionner, utiliser l’attribut « checked »
…
Je possède une voiture : <input type="checkbox" name="voiture" value="oui"
checked="checked"/><br/>
Je possède 3 ordinateurs : <input type="checkbox" name="ordinateurs" value="oui" /><br/>
Je travaille la fin de semaine : <input type="checkbox" name="travaille" value="oui" /><br/>
</form>
….
63
Les mots de passe
• <input type="password" name="" />
64
Les champs invisibles (ou
cachés)
• <input type="hidden" name="" value="" />
○ Permet de spécifier certaines informations dont
l’utilisateur n’a pas à modifier.
65
Les boutons
• <input type="submit" value="Envoyer" />
– Ce type de bouton permet de soumettre le
formulaire au serveur
• <input type="reset" value="Réinitialiser" />
○ Ce type de bouton sert à réinitialiser le formulaire
• <input type="button" value="Déclencher !"
onclick="alert(‘Hello world !’)" />
○ Ce type de bouton sert à déclencher des événements
Javascript
66
Les listes
…
Choisissez l'une des marques
d'ordinateurs suivantes :
<select name="maListe">
<option value="produit1">DELL</option>
<option value="produit2">Acer</option>
<option value="produit3">HP</option>
<option value="produit4">Sony</option>
</select>
…
67
Les listes – attribut « size »
• <select name="" size="3">
68
Les listes – attribut « multiple »
• <select name="" multiple="multiple">
69
Les listes – attribut « selected »
• <option value="…" selected="selected">
70
La balise <label>
• La balise label est pratique dans un
formulaire surtout lors de l’utilisation de
balises de type radio ou checkbox.
<input type="radio" name="sexe" id="homme" value="1"/><labe lfor="homme">Homme</label><br/>

<input type="radio" name="sexe" id="femme" value="2"/><label for="femme">Femme</label> <br/>
<input type="radio" name="sexe" id="alien" value="3"/><label for="alien">Alien</label> <br/>
En cliquant sur le mot, c’est comme si on cliquait sur le bouton directement
71
Feuilles de style
Objectif séparer le contenu de la forme
On décrit la forme dans une feuille de style (style
sheet)
Exemple de styles
<H1><B><FONT COLOR=« blue">Titre H1 rouge </FONT></B></H1>

<H2><B><FONT COLOR="green">Titre H2 vert </FONT></B></H2>
<H1><B><FONT COLOR="red">Titre H1 rouge </FONT></B></H1>

•La description du style est en rouge
•Les lignes 1-2 et 3-4 ont le même contenu, mais leur style (ici la
propriété « couleur ») change.
Exemple 24
<HTML>
<HEAD>
<TITLE> Exemple 24
</TITLE>
</HEAD>
<BODY>
<H1><B><FONT COLOR="blue">Titre H1 bleu </FONT></B></H1>

<H2><B><FONT COLOR="green">Titre H2 vert </FONT></B></H2>

</BODY>
</HTML>
Où mettre la description du style ?
• Dans le texte HTML lui-même :
– Peu lisible, difficile d’avoir un style uniforme dans un fichier, et encore plus
dans différents fichiers
– C’est le cas de l’exemple précédent
• Dans l’entête du fichier HTML
– Plus lisible, le partage du même style entre fichiers est lourd
– On associe les styles aux balises et aux classes
• Dans un fichier séparé
– Le partage du même style entre fichiers est plus simple
– On associe les styles aux balises et aux classes
Association d’un style aux balises
• Association d’un style à une balise :
H3 {font-family: Arial; font-style: italic; font-color: green}
• Plusieurs valeurs pour une propriété :

H3 {font-family: Arial, Helvetica, sans-serif}
• Le même style associé à plusieurs balises

H1, H2, H3 {font-family: Arial; font-style: italic}
Dans l’entête du fichier HTML
(Exemple 25)
<HTML>
<HEAD>
<STYLE type="text/css">
H3 {font-family: Broadway; font-weight: italic; color: green}

H2 {font-family: Arial; font-weight: bold; color: red}
</STYLE>
<TITLE> Exemple 25
</TITLE>
</HEAD>
<BODY>
<H3> Exemple de texte <H3>

<BR><BR>
</BODY>
</HTML>
Dans un fichier .css à part
• Fichier monstyle.css :
H3 {font-family: Broadway; font-weight: italic; color: green}
H2 {font-family: Arial; font-weight : bold; color: red}
• Utilisation du fichier monstyle.css

<HTML>
<HEAD>
<LINK rel=stylesheet type="text/css" href=“monstyle.css">
<HEAD>
Utilisation d’un fichier .css
(Exemple 26)
<HTML>
<HEAD>
<LINK rel=“stylesheet” type="text/css"
href=“monstyle.css“>
<TITLE> Exemple 26 </TITLE>
</HEAD>
<BODY>
<BR><BR>
</BODY>
</HTML>
Les attributs class
• L’attribut class permet de définir des

classes de style et de les appliquer
– Dans le fichier html :
<p class ="introduction"> Bonjour </p>
– Dans le fichier “style.css” :

.introduction { color: blue; }
.conclusion { color: red; }
Exemple 27
<!DOCTYPE html>
<HTML>
<HEAD>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<TITLE> Exemple 27 </TITLE>
</HEAD>
<BODY>
<p class ="introduction"> Bonjour </p>
<p class = "conclusion"> Au revoir </p>
</BODY>
</HTML>
FIN

Programmation Web Avancé

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Programmation Web Avancé

Transféré par

Droits d'auteur :

Formats disponibles

Programmation web

</HTML> Ceci est la fin d'un document de type HTML.

</HEAD> Ceci est la fin de la zone d'en-tête.

</ BODY> Ceci est la fin du document.

Couleur de caractère [Font color] <FONT COLOR="# Début et fin de

A la ligne [Line break] <BR> Aller à la ligne

• Avec l’attribut « border » (<table border>) on

• Insérer une image

Exemple d'image <BR>

src: adresse de l’image sur l’ordinateur

action : L’URL où doit être traité la requête

protocole serveur programme

L’URL résultante de la requête est :

<input type="radio" name="sexe" id="homme" value="1"/><labe lfor="homme">Homme</label><br/>

En cliquant sur le mot, c’est comme si on cliquait sur le bouton directement

<H1><B><FONT COLOR=« blue">Titre H1 rouge </FONT></B></H1>

<H1><B><FONT COLOR="red">Titre H1 rouge </FONT></B></H1>

•La description du style est en rouge

<H1><B><FONT COLOR="blue">Titre H1 bleu </FONT></B></H1>

<H1><B><FONT COLOR="red">Titre H1 rouge </FONT></B></H1>

• Plusieurs valeurs pour une propriété :

• Le même style associé à plusieurs balises

H3 {font-family: Broadway; font-weight: italic; color: green}

<H3> Exemple de texte <H3>

• Utilisation du fichier monstyle.css

• L’attribut class permet de définir des

– Dans le fichier “style.css” :

Vous aimerez peut-être aussi