technologie web - part2

Technologie Web
HTML, CSS & javascript
Le 19 Novembre 2010

Plan
1. Les technologies cotés clients
2. Le HTML
3. Le CSS
4. Le javascript

Plan
 1. Les technologies cotés clients
2. Le HTML
3. Le CSS
4. Le javascript

Les technologies coté client
• HTML (HyperText Markup Langage)
Langage permettant de créer des pages web. Permet de
décrire la structure ainsi que le contenu de la page
• CSS (Cascading Style Sheet)
Langage permettant de définir les styles associés aux
éléments de la page web. C'est le rendu visuel.
• Javascript
Langage permettant de contrôler le navigateur et le
HTML. Comment rendre du static dynamique.

La maquette / le montage
• Créer les pages de l'application web de façon
statistique en y intégrant la charte graphique
définit par l'infographiste (au format PSD)
• Doit être compatible avec tout les navigateurs
• Première étape de tout projet web (en dev.)
• Se base uniquement sur les langages
• HTML
• CSS
• JS

Les technologies coté client
NAVIGATEUR
Internet Exploreur 6
Firefox 2.X
Firefox 3.X
Opéra
Chrome Safari
Konqueror

Quelques statistiques
IE9
IE8
IE7
IE6
FF > 3.5
FF< 3.5
Chrome
Safari
Opéra

Plan

1. Les technologies cotés clients
2. Le HTML
3. Le CSS
4. Le javascript

(X)HTML
• C'est un standard : recommandations publiées
par le « world wide web consortium » (W3C)
• Basé sur le XML ( toute balise ouverte doit être
fermée !)
• C'est un code interprété par le navigateur. On
doit définir le doctype (sinon mode quirk)
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Page HTML simple
<html>
<head>
<title>A very simple page</title>
</head>
<body>
<h1>Hello World !</h1>
</body>
</html>

Page HTML
• Le head
• Contient les informations sur la page (comme la
couverture d'un livre)
• Le titre
• L'auteur
• Les mots-clef
• Le body
• Contient les données des pages, c'est la partie visible sur
les navigateurs
• Le document object model (DOM)
• la forme arborescente de la page web (racine : html)

HEAD
• Title : <title>Hello World</title> (100 char max !)
• Mots clef : <meta name="keywords" contents =" riri" />
• Description : <meta name="description" contents ="fifi" />
• Auteur : <meta name="author" contents ="loulou" />
• Langue : <meta http-equiv="content-language" content="fr" />
• Fav Icone : <link rel="shortcut icon" type="image/png"
href="/public/images/bsimard-logo.png" />
• Charset & content-type : <meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
• Indexation : <meta name="robots" content="follow| nofollow, index|
noindex" />

BODY
Les balises structurants du texte
Balise Type Description
blockquote Block Citation (longue)
Vous devez obligatoirement mettre une balise
de paragraphe à l'intérieur du blockquote
sup Inline Mise en exposant
sub Inline Mise en indice
strong Inline Mise en valeur (forte)
Le texte est généralement mis en gras.
H1, H2, H3 ... Block Titre de niveau X
p Block Paragraphe
a Inline Lien hypertexte.
img Inline Insère une image.
br Inline Retour à la ligne

BODY
Les balises de liste
ul Block Liste à puces.
<ul>
<li>Un élément</li>
<li>Un autre élément</li>
</ul>
ol Block Liste à puces numérotée.
<ol>
<li>Elément n°1</li>
<li>Elément n°2</li>
</ol>
li list-item Permet de créer un élément de liste

BODY
Les balises de tableau
table Block Délimite un tableau. Voici un exemple de
tableau simple :
<table>
<caption>Mon tableau</caption>
<tr>
<th>Col1</th>
</tr>
<tr>
<td>Cellule</td>
</tr>
</table>
caption Permet de donner un titre au tableau
tr Ligne de tableau
th Cellule d'en-tête du tableau (généralement mise
en gras)
td Cellule du tableau

BODY
Les balises de formulaire
form Block Délimite un formulaire.
Vous devrez donner 2 attributs
* method : indique la méthode d'envoi du
formulaire (get ou post).
* action : la page vers laquelle le visiteur doit
être redirigé lorsqu'il a validé votre formulaire.
fieldset Block Permet de regrouper plusieurs éléments d'un
formulaire.
legend Inline Titre d'un groupe dans un formulaire.
A utiliser à l'intérieur d'un <fieldset>
label Inline Titre d'un élément de formulaire.
Généralement, vous devrez mettre l'attribut for
sur cette balise pour indiquer le 'name' <de
l'élément auquel correspond le label.

BODY
input inline 
<input type="text" />

<input type="password" />

<input type="file" />

<input type="checkbox" />

<input type="radio" />

<input type="button" />

<input type="submit" />

<input type="reset" />

<input type="hidden" />
Pensez à donner un nom à vos champs grâce à
l'attribut id (for du label)

BODY
textarea Inline Zone de saisie multiligne.
Vous pouvez définir sa taille grâce aux attributs
rows et cols
select Inline Liste déroulante.
Utilisez la balise <option> pour créer chaque
élément de la liste
<select name="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
</select>
option Block Element d'une liste déroulante

BODY
Les balises génériques
span Inline
div Block

Exemple simple de css
•
my.html
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" media="screen" href="./my.css" />
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
•
my.css
Body {
background-color : red
}

Inclure du css
• Avec la balise link dans le head
<link rel="stylesheet" type="text/css" media="screen" href="./my.css" />
• Attention aux médias
• Screen
• Print
• Avec l'attribut style dans les balises html
<body style="backgroud-color:red">
• Directement dans le HTML grace à la balise script
<style media="screen,print">
Body { background-color : red}
</style>

Comment affecter du code CSS
• Par le nom de la balise HTML
• S'applique à toutes les balises de ce type
• Par identifiant
• L'identifiant doit être unique dans une page !
• On ajoute l'attribut id à une balise html
• <div id="monId"> | #monId{ … }
• Par classe
• On ajoute l'attribut class à une balise html
• <div class="maClasse"> | .maClass{ … }

Comment affecter du CSS
• On peut mixer tout ça
• p.maClass { … } : s'applique aux balises p
possédant la classe maClass
• Les sélecteurs
• div#monId > p.maClasse : descendant directe
• <div id="monId><p class="maClasse">bli</p></div>
• div#monId + p.maClasse : élément adjacent
• <div id="monId>blo</div><p class="maClasse">bli</p>
ATTENTION à la surcharge et à l'héritage !!!

Les propriétés les plus
courantes
•
background
•
border
•
color
•
cursor
•
display
•
float
•
font-family
•
font-size
•
font-weiht
•
margin
•
padding
•
overflow
•
text-align
•
text-decoration
•
text-transform
•
top, right, bottom, left
•
z-index

Les boites
Une balise ouvrante / fermante constitue une boite
M$ → Width = Border + Padding + Content
W3C → Width = Content

Block & inline
• Les balises de type inline
• Sont utilisés pour enrichir localement des portions de texte.
• Se placent par défaut les uns à la suite des autres (en ligne)
• Prennent par défaut la largeur de leur contenu
• Les balises de type block
• Sont en rapport avec la structure générale de la page
• Se placent par défaut les un en dessous des autres
• Prennent par défaut toute la largeur de la page

Le flux
La mise en place des différents éléments de la page se
fait par défaut selon le Flux courant.
Les éléments (balises) sont placés les uns après les
autres dans le code HTML de la page.
L'ordre dans lequel apparaissent les balises dans le
code HTML sera l'ordre dans lequel ils seront affichés et
apparaitront dans le document, c'est le Flux. Cela
signifie que, par défaut, chaque élément est dépendant
des éléments frères qui l'entourent.

Positionnement des éléments
• Positionnement absolu (page)
• #monId { position : absolute ; right:25px ; top :
25px }
• Positionnement fixe (navigateur)
• #monId { position : fixed; right:25px ; top :
25px }
• Positionnement relatif (sur elle-même)
• #monId { position : relative; right:25px ; top :
25px }

Les floatants
• La propriété float permet d'extraire un élément
du flux normal et le positionner
• A gauche → float : left
• A droite → float : right
<div id="bloc1"></div><div id="bloc2"></div><div
id="bloc3"></div>
#bloc1{float:left;} #bloc2{float:right;}
#bloc1{clear:both;}

Le Javascript
• C'est un langage de script pour le Web
• Partage le DOM avec la page HTML (manipulation du DOM
)
• Possède un gestionnaire d'évènement
• Esty éxecuté coté client
• Permet d'ajouter des fonctionnalités aux pages des sites
• Valider les formulaires
• Modifier le contenu de la page
• Caroussel d'image
• Ajax

Exemple
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

Comment inclure du JS
• Directement dans le HTML
• <a href= "Javascript:alert('Hello World')"> … </a>
• <a href="#" onmouseover="Javascript:alert('Hello
World')">...</a>
• Avec la balise SCRIPT
• Soit en incluant un fichier
• <script type="text/javascript"
src="/public/javascripts/jquery-1.4.2.min.js"></script>
• Soit en écrivant son code
• <script type="text/javascript"></script>

Les évènements
• onclick : sur un clic de la souris
• onmouseover : sur le passage du pointeur de la souris
• onblur : sur la perte de focus
• onfocus : sur l'activation (le focus)
• onselect : sur la sélection
• onchange : sur la modiﬁcation du contenu
• onsubmit : sur la soumission d’un formulaire
• onload : sur le chargement de la page

Opérateur
• Opérateur très proche de ceux de Java
• opérateurs arithmétiques : + - * / %
• in/décrémentation : var++ var-- ++var --var
• opérateurs logiques : && || !
• comparaisons : == != <= >= <>
• concaténation de chaîne de caractères : +
• a ectation :ﬀ = += -= *= ...

Variables
• Déclaration : var nom[=valeur] ;
• déclaration optionnelle mais fortement
conseillée
• ‘undefined’ si aucune valeur à l’initialisation
• aucun type !
• Sensible à la casse
• Typage dynamique
var x=5 ;
var x ;
x = x + 1;
alert('x vaut :' + x)
var x ;
x = x + 1;
alert('x vaut :' + x)

Les objets
• Langage objet pauvre
• Pas d'héritage
function Rectangle ( lo , la ) {
this.longueur = lo ;
this.largeur = la ;
this.perimetre = function(){
return (lo+la)*2;
}
}
...
var rectangle = new Rectangle (20 , 10) ;
alert('périmètre:' + rectangle.perimetre());

Les tableaux
• Déclaration :
• var nom = new Array([dimension]) ;
• var nom = new Array(o1, ..., on) ;
• Accession avec [] (tableau[i])
• Les indices varient de 0 à N-1
• les éléments peuvent être de type di érentsﬀ
• la taille peut changer dynamiquement
• les tableaux à plusieurs dimensions sont possibles
• Propriétés et méthodes : length, reverse(), sort(), toString(),
push(element), etc.
• Tableaux associatifs : Tab[’nom’]

Intéraction avec le DOM
• Document
• document.createElement(tagName)
• document.getElementByTagName(tagName)
• document.getElementById(elementId)

Intéraction avec le DOM
• Node / element
• Les fonctions
• getAttribute('title)
• ChildNodes : c'est un tableau comprenant les éléments
enfants
• insertBefore(Node), appendChild(Node)
• Les attributs
• style
• TagName / nodeName
• className
• Id
• nodeValue

Exemple
//three elements are required: p, b, br
var theNewParagraph = document.createElement('p');
var theBoldBit = document.createElement('b');
var theBR = document.createElement('br');
//set up theNewParagraph
theNewParagraph.setAttribute('title','The test paragraph');
//prepare the text nodes
var theText1 = document.createTextNode('This is a sample of some ');
var theText2 = document.createTextNode('HTML you might');
var theText3 = document.createTextNode('have');
var theText4 = document.createTextNode(' in your document');
//put together the bold bit
theBoldBit.appendChild(theText2);
theBoldBit.appendChild(theBR);
theBoldBit.appendChild(theText3);
//put together the whole paragraph
theNewParagraph.appendChild(theText1);
theNewParagraph.appendChild(theBoldBit);
theNewParagraph.appendChild(theText4);
//insert it into the document somewhere
document.getElementById('content').appendChild(theNewParagraph);

technologie web - part2

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (18)

Similaire à technologie web - part2

Similaire à technologie web - part2 (20)

Plus de Benoît Simard

Plus de Benoît Simard (6)

technologie web - part2