Académique Documents
Professionnel Documents
Culture Documents
Source :
http://www.w3schools.com/
Source :
http://www.w3schools.com/
Un systme hypertexte est un systme contenant des nuds lis entre eux par des hyperliens
permettant de passer automatiquement d'un nud un autre. Un document hypertexte est donc
un document qui contient des hyperliens et des nuds. Un nud est une "unit minimale
d'information".
Lorsque les nuds ne sont pas uniquement textuels, mais aussi audiovisuels, on peut parler de
systme et de documents hypermdias.
Un hyperlien ou lien hypertexte
Cest une rfrence dans un systme hypertexte permettant de passer automatiquement d'un
document consult un document li. Les hyperliens sont notamment utiliss dans le World
Wide Web pour permettre le passage d'une page Web une autre d'un simple clic.
Une page Web :
Est une ressource du Word Wide Web conue pour tre consulte par des visiteurs l'aide d'un
navigateur Web. Elle a une adresse Web ou une URL. (pour Uniform Resource Locator)
Techniquement, une page Web est souvent constitue d'un document en Hypertext Markup
Language (HTML) (ou XHTML) et d'images. Cependant, tout type de ressources ou
d'assemblage de ressources, textuelles, visuelles, sonores, logicielles, peuvent constituer une page
Web.
Une URL (pour Uniform Resource Locator) pointe sur une ressource. Cest une chane de caractres
permettant dindiquer un protocole de communication et un emplacement pour toute ressource
du Web.
HTML (pour HyperText Markup Language)
Cest un langage informatique permettant de dcrire le contenu dun document (titres,
paragraphes, disposition des images, etc.) et dy inclure des hyperliens.. Les documents HTML
sont les ressources les plus consultes du Web.
Cest un langage de balisage qui permet denrichir le contenu dun texte.
Source :
http://www.w3schools.com/
Exemple
<!DOCTYPE HTML>
<html>
<head>
<title> Premier site </title>
</head>
<body>
C'est ma premire page Web ! Le fureteur affiche le texte contenu dans le bloc
body ;.
</body>
</html>
Une fois que votre fichier est enregistr avec lextension .html vous pouvez utiliser votre
navigateur pour visualiser le rsultat de votre page Web, pour ce faire, vous pouvez utiliser les
deux manires faons
Source :
http://www.w3schools.com/
2- Choisir parcourir, puis choisissez le nom de votre page Web, puis cliquez sur OK
Deuxime faon
Double cliquer sur licne de votre page Web (icne Internet Explorer qui porte le nom de votre
page)
Voici le rsultat affich en interprtant le code prcdent
Remarquez le titre de la page
Actualise
Important :
) Toutes les modifications que vous allez apporter votre page Web doivent se faire dans
votre diteur de texte.
) A chaque modification apporte, votre page doit tre enregistre
) Si votre page est dj ouverte ave votre navigateur, il suffit de faire Actualiser dans votre
navigateur pour que les modifications saffiche par le navigateur.
Source :
http://www.w3schools.com/
<!DOCTYPE HTML>
<html>
<head>
<title> Ma premiere page web </title>
</head>
<body>
<p> Voici un premier paragraphe </p>
<p> Voici un deuxime paragraphe </p>
</body>
</html>
Source :
http://www.w3schools.com/
style="background-color:yellow"
style="font-size:10px"
style="font-family:Times"
style="text-align:center"
Exemple
Source :
http://www.w3schools.com/
Alignement du texte ;
<!DOCTYPE HTML>
<html>
<body>
<h1 style="text-align:center">Ce titre est au centre</h1>
<p style="text-align:left">Ce paragraphe est align gauche </p>
<p style="text-align:right">Ce paragraphe est align droite </p>
<p style="text-align:center">Ce paragraphe est align au centre</p>
</body>
Source :
http://www.w3schools.com/
Rles
Permet de mettre le texte en GRAS
Permet de mettre le texte en italique
Permet de mettre le texte en soulign
Permet dafficher du texte prformat
Permet dafficher du texte en plus petit
Affiche le texte en indice
Affiche le texte en exposant
Insrer une adresse dans un document html
Permet de mettre en valeur un paragraphe
Source :
http://www.w3schools.com/
4-
<!DOCTYPE HTML>
<html>
<body>
<h3>Une liste numrote:</h3>
<ol>
<li>Programmation structure</li>
<li>Programmation objet</li>
<li>Programmation Web</li>
</ol>
</body>
Source :
http://www.w3schools.com/
10
<!DOCTYPE HTML>
<html>
<body>
<h3>Une liste numrote:</h3>
<ol type ="1" start ="5">
<li>Programmation structure</li>
<li>Programmation objet</li>
<li>Programmation Web</li>
</ol>
<h4> Une liste avec des lettres majuscules
</h4>
<ol type ="A">
<li>Programmation structure</li>
<li>Programmation objet</li>
<li>Programmation Web</li>
</ol>
<h4> Une liste avec des lettres minuscules
</h4>
<ol type ="a">
<li>Programmation structure</li>
<li>Programmation objet</li>
<li>Programmation Web</li>
</ol>
<h4> Une liste avec des lettres romaines
</h4>
<ol type ="I">
<li>Programmation structure</li>
<li>Programmation objet</li>
<li>Programmation Web</li>
</ol>
<h4> Une liste avec des lettres romaines
</h4>
<ol type ="i">
<li>Programmation structure</li>
<li>Programmation objet</li>
<li>Programmation Web</li>
</ol>
</body>
Source :
http://www.w3schools.com/
11
Source :
http://www.w3schools.com/
12
<!DOCTYPE HTML>
<html>
<body>
<h4>Une liste de dfinition:</h4>
<dl>
<dt>Style de programmation</dt>
<dd>1-Programmation objet</dd>
<dd>2-Programmation
structure</dd>
</dl>
<h4>Une autre liste de dfinition:</h4>
<dl>
<dt>Langage de programmation</dt>
<dd>C++</dd>
<dd>Java</dd>
<dt>Bases de donnes</dt>
<dd>Oracle</dd>
<dd>Access</dd>
<dd>MySql</dd>
</dl>
</body>
</html>
Source :
http://www.w3schools.com/
13
5-
Les liens ou les hyperliens nous permettent de nous dplacer lintrieur dune page Web, dune
page Web une autre lintrieur dun mme site Web ou dun site Web un autre.
La balise qui permet dcrire un lien est <a> pour ancre.
Exemples et syntaxe
<!DOCTYPE HTML>
<html>
<body>
<a href ="liste1.html"> cliquer ici pour cet exemple </a>
<p> Ouvrir la page dans une nouvelle fentre </p>
<a href="liste1.html" target="_blank"> exemple</a><br />
<a href ="http://www.clg.qc.ca"> mon cegep </a><b r 3>
<a href="mailto:syacoub@clg.qc.ca"> me contacter </a>
<a href ="D:\00Automne 2009\420-KA8\Ateliers/Atelier1.html"> Cliquer ici pour voir mon
Atelier1 qui n'est pas dans le dossier dans lequel se trouve cette page web</a>
</body>
</html>
Attention :
) Si le fichier sur lequel vous voulez faire le lien nest pas dans votre dossier qui contient
votre fichier principal, alors il faut indiquer le chemin daccs du fichier de lien.
) Il est fortement recommander de mettre tous vos fichiers html et toutes vos images dans
le mme dossier. Ainsi, vous nallez pas avoir de mauvaises surprises.
Insertion dun lien lintrieur dune mme page :
Lorsque vous tes en bas de page et que vous voulez revenir en haut de celle-ci vous utilisez alors
un lien lintrieur dune mme page.
Une ancre nomme est une position dans une page qui peut tre utilise comme rfrence. Elle
est invisible dans la page Web, seul le crateur de la page connait sa position.
Un lien vers une ancre nomme commence toujours par le symbole #
<a name ="debut"> Definition </a>
Du texte et du texte
<a href="#debut"> retour la Dfinition </a>
Source :
http://www.w3schools.com/
14
6-
<img
Source :
http://www.w3schools.com/
15
16
La balise <map>
La balise <map> permet de crer plusieurs zones sur une mme image. On peut donc crer
plusieurs liens sur une mme image
Exemple
<!DOCTYPE HTML>
<html>
<html>
<body >
<img src ="voiture.gif" width="300" height="300" alt="Ma voiture" usemap ="#voiture" />
<map name="voiture">
<area shape="rect" coords="10,170,30,126" href="http://www.clg.qc.ca" alt = "phare1"/>
<area shape="rect" coords="200,190,30,126" href="http://www.picto.qc.ca" alt="phare2" />
<area shape="circle" coords="150,250,20" href="http://www.google.ca" alt="Roue avant" />
</map>
</body>
</html>
Notez que :
<area> se trouve lintrieur de la balise map. Cette balise permet de dfinir une zone
lintrieur de limage. Elle prend pour attribut :
Shape : qui prend les valeurs : rect : Pour un rectangle, circle .Pour un cercle et poly :Pour un
polygone
Coords : permet de dfinir les coordonnes de la zone
Pour un rectangle : Indique les coordonnes des coins suprieurs gauche et infrieur droit
de la zone rect
Pour un cercle. Indique les coordonnes du centre du cercle et la dimension du rayon de
ce mme cercle pour la valeur circle
href : dfinit la page de destination du lien correspondant la zone
En absence de lien, utiliser lattribut nohref="nohref"
Source :
http://www.w3schools.com/
17
Source :
http://www.w3schools.com/
18
7-
Les Tableaux :
HTML offre la possibilit de crer des tableaux. Un tableau constitue la principale possibilit de
matriser la mise en page globale d'un document (disposition en colonne, respect des alignements,
insertion d'images au milieu du texte. Un tableau est vu comme un ensemble de lignes, chaque
ligne tant divise en cases ou cellules
Exemple
<!DOCTYPE HTML>
<html>
<head><title> les tableaux </title></head>
<body>
<table border =1>
<caption> Voici un tableau</caption>
<tr>
<th> Joueurs </th>
<th>Gardiens </th>
</tr>
<tr>
<td> Guillaume Latendresse </td>
<td>Yaroslav Halak </td>
</tr>
<tr>
<td> Maxime Lapierre </td>
<td>Carey Price</td>
</tr>
</table>
</body>
Source :
http://www.w3schools.com/
19
Les attributs inclus dans <tr> : ils agissent sur toute la ligne
Les attributs inclus dans <td> : ils agissent sur la cellule
3. Regroupement de cellules (attributs de la balise <td>)
Regroupement de colonnes : Utiliser lattribut colspan
Source :
http://www.w3schools.com/
20
<!DOCTYPE HTML>
<html>
<head>
<title> site </title>
<meta charset="utf-8" />
</head>
<body>
<table border ="1">
<tr>
<td> case 1 </td>
<td colspan ="2"> les deux cases sont regroupes </td>
</tr>
<tr>
<td> case 3 </td>
<td> case 3 </td>
<td> case 3 </td>
</tr>
</table>
</body>
</html>
21
Source :
http://www.w3schools.com/
22
8-
Les formulaires:
1. Introduction
Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web
d'lments interactifs permettant un dialogue avec les internautes.
On peut envoyer un formulaire soit un serveur qui permettra de restituer les donnes, que
lutilisateur pourra analyser et mettre jour, dans ce cas une technologie des serveurs est
obligatoire (comme par exemple CGI) ; soit directement par courriel un utilisateur qui disposera
du formulaire comme il veut.
Dans ce qui suit, seule la mthode pour envoyer un formulaire par courrier est tudie.
23
<!DOCTYPE HTML>
<html>
<body>
<form action="">
Nom de l'usager:
<input type="text" name="user" />
<br>
Mot de passe:
<input type="password" name="password" />
</form>
</body>
</html>
4. La zone de saisie
Si vous voulez avoir une zone de saisie plus grande alors, vous devez utiliser la commande :
textarea
Syntaxe :
<textarea name="zone1" rows=4 cols=40>entrez votre commentaire ici </textarea>
Lattribut rows permet de dfinir le nombre de lignes de la zone de texte
lattribut cols permet de dfinir le nombre de colonnes de la zone de texte
Source :
http://www.w3schools.com/
24
Attributs de select
Lattribut size permet de fixer le nombre dlments de la liste qui seront affichs. Par dfaut il est
gal 1.
Si llment a affich nest pas indiqu alors la liste affiche le premier lment.
Lattribut selected permet de faire afficher llment voulu en dbut de liste, dans notre exemple
mathmatique est affich. Remarquez galement que SIZE ntant pas prcis, il est 1 par
dfaut
Source :
http://www.w3schools.com/
25
Remarque : Lattribut checked permet de slectionner un bouton un bouton radio par dfaut
Exemple
<input type="radio" name="bouton1" value="mathmatique"/> Mathmatique
<input type="radio" name="bouton1" value= "informatique" checked/> Informatique
<input type="radio" name="bouton1" value="Franais"/> Franais
Source :
http://www.w3schools.com/
26
Source :
http://www.w3schools.com/
27
Source :
http://www.w3schools.com/
28
Voici le rsultat
Source :
http://www.w3schools.com/
29
9-
Les feuilles de styles (en anglais "Cascading Style Sheets", abrg CSS) sont un langage qui permet
de grer la prsentation d'une page Web. Le langage CSS est une recommandation du World Wide
Web Consortium (W3C), au mme titre que HTML ou XML.
Les styles permettent de dfinir des rgles appliques un ou plusieurs documents HTML. Ces
rgles portent sur le positionnement des lments, l'alignement, les polices de caractres, les
couleurs, les marges et espacements, les bordures, les images de fond, etc.
Le but de CSS est sparer la structure d'un document HTML et sa prsentation. En effet, avec
HTML, on peut dfinir la fois la structure (le contenu et la hirarchie entre les diffrentes
parties d'un document) et la prsentation. Mais cela pose quelques problmes. Avec le couple
HTML/CSS, on peut crer des pages web ou la structure du document se trouve dans le fichier
HTML tandis que la prsentation se situe dans un fichier CSS.
Avantage:
Rend la mise jours des sites Web facile.
- insertion directement dans le code HTML:
<head>
<style type="text/css">
body
{
background-image: url("images/back40.gif")
}
</style>
</head>
-
insertion dans un fichier .css et faire un lien vers ce fichier: idal lorsque le style est
applicable plusieurs pages.
<head>
<link rel="stylesheet" type="text/css"
href="monstyle.css" />
</head>
Source :
http://www.w3schools.com/
30
1. Syntaxe CSS:
Une ligne CSS se prsente comme trois lments:
selector {
property: value
}
selector : reprsente un lment du code HTML (exemple les balises HTMl: body, h1, p )
proprety: la proprit que l'on souhaite changer (color background, font-size, font-family ..)
value: reprsente la valeur de la proprit
Chaque instruction se termine par un point virgule (;)
Les accolades dterminent les proprits dun slecteur.
Exemple:
p
{
text-align: center;
color: black;
font-family: arial,"Courrier New";
}
2. Regroupement de proprits:
On peut appliquer les mmes valeurs de proprits un ensemble de selectors, il suffit de les
sparer par une virgule.
h1,h2,h3,h4,h5,h6
{
color: green
}
3. Le slecteur class:
Il arrive que nous ayons par exemple deux tableaux dans notre page HTML et nous ne
voulons pas appliquer les mmes proprits ces deux tableaux. Dans ce cas il faudrait les
distinguer dans le code HTML par l'attribut class comme suit:
<html>
<head>
<style type="text/css">
table.one
{
table-layout: automatic;
background-color:blue;
}
table.two
{
table-layout: fixed;
background-color:green;
}
</style>
</head>
Source :
http://www.w3schools.com/
31
4. Le slecteur id
la place dutiliser le slecteur class, on peut galement utiliser le slecteur id. Lavantage
du id par rapport class est quil est unique dans le code HTML
Exemple
<html>
<head>
<style type="text/css">
#par1
{
text-align: center;
color: red;
font-family: arial
}
#par2
{
text-align: right;
color: green;
font-family: verdana
}
</style>
</head>
<body>
<p id="par1">
ce paragraphe est rouge et centr
</p>
Source :
http://www.w3schools.com/
32
5. Autres exemples
Couleur de fond (background-color)
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparaent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>en-tte h1</h1>
<h2>en-tte h2</h2>
<p>un paragraphe</p>
</body>
</html>
Image de fond (background)
<html>
<head>
<style type="text/css">
body
{
background-image:
url('image2.jpg');
background-repeat: no-repeat
}
</style>
</head>
<body>
suite du code html
</body>
</html>
Si on veut que limage se rpte sur tourte la page il faut utiliser
Source :
http://www.w3schools.com/
33
lattribut img
<html>
<head>
<style type="text/css">
img
{
width:100px;
height:100px;
}
</style>
</head>
<body>
<img src="image2.jpg"
</body>
</html>
/>
Le texte:
<html>
<head>
<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>Cest len-tte 1</h1>
<h2> Cest len-tte 2</h2>
<p> cest un paragraphe</p>
</body>
</html>
Source :
http://www.w3schools.com/
34
Source :
http://www.w3schools.com/
35
Source :
http://www.w3schools.com/
36