Beruflich Dokumente
Kultur Dokumente
ensa - oujda
ensa - oujda
ensa - oujda
ensa - oujda
ensa - oujda
ensa - oujda
<html>
<head>
<title>Titre de la page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<!-- Ici votre site -->
</body>
</html>
ensa - oujda
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
ensa - oujda
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
ensa - oujda
ensa - oujda
ensa - oujda
ensa - oujda
ensa - oujda
Lien texte
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
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.
Elles sont dmarques par la balise <ul> et chacun des items est entour de la balise <li>
:
ensa - oujda
ensa - oujda
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
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
Fusionner
Colspan : fusionner 2 colonnes
Rowspan : fusionner 2 cellules
ensa - oujda
Les formulaires
ensa - oujda
ensa - oujda
ensa - oujda
<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 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
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>
HTML5
Les nouveauts du HTML5 portent notamment
sur :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
ensa - oujda
exemple
<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
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
Signification
Valeurs possibles
font-size
font-size:12px
font-size:10pt
font-family
Nom de police
font-family:arial,verdana
font-family:sans serif
font-weight
font-weight:bold
font-weight:normal
font-style
font-style:italic
font-style:normal
color
Couleur de police
color:green
color:#FFCC00
Deug STPI 1re anne
55
Signification
Valeurs possibles
text-height
text-height:12px
Attribut de soulignement
text-decoration:overline
text-decoration:line-through
text-decoration:underline
text-decoration:none
text-align
text-align:left
text-align:right
text-align:center
text-indent
text-indent:25px
text-indent:-15px
text-transform:capitalize
text-transform:uppercase
text-transform:lowercase
text-decoration
text-transform
56
Signification
Valeurs possibles
background
Image d'arrire-plan
background:image.gif
background-color
Couleur d'arrire-plan
background-color:black
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 :
h1
{
border: 3px blue dashed;
}
ensa - oujda
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
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>
<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
ensa - oujda
if (x== 0){
}else if (x<0){
}else{
}
ensa - oujda
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
//var x=1;
for (x=1;x<=10;x++){
document.write("page"+x+"</br>");
}
ensa - oujda
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(){
</script>
</head>
<body>
<body>
aaaaaaaaa
</body>
ensa - oujda
<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