SlideShare une entreprise Scribd logo
1  sur  43
Télécharger pour lire hors ligne
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
Internet Exploreur 7
Internet Exploreur 8
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
Balise Type Description
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
Balise Type Description
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
Balise Type Description
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
Les balises de formulaire
Balise Type Description
input inline <!-- Zone de texte d'une ligne -->
<input type="text" />
<!-- Mot de passe (le texte est caché) -->
<input type="password" />
<!-- Envoi de fichier -->
<input type="file" />
<!-- Case à cocher -->
<input type="checkbox" />
<!-- Bouton d'option -->
<input type="radio" />
<!-- Bouton -->
<input type="button" />
<!-- Bouton d'envoi -->
<input type="submit" />
<!-- Bouton de remise à zéro -->
<input type="reset" />
<!-- Champ caché -->
<input type="hidden" />
Pensez à donner un nom à vos champs grâce à
l'attribut id (for du label)
BODY
Les balises de formulaire
Balise Type Description
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
Balise Type Description
span Inline
div Block
Plan

1. Les technologies cotés clients
2. Le HTML
3. Le CSS
4. Le javascript
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;}
Plan

1. Les technologies cotés clients
2. Le HTML
3. Le CSS
4. Le javascript
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"><!--
document.write("Hello World!");//--></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 modification 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 :ff = += -= *= ...
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 opérateurs
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 érentsff
• 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);

Contenu connexe

Tendances

Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
TECOS
 
Alimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEBAlimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEB
Gaspar Daniel
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
Emmanuelle Morlock
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
Vlad Posea
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoc
priscilla_mommessin
 

Tendances (20)

Html et xhtml
Html et xhtmlHtml et xhtml
Html et xhtml
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
 
Css
CssCss
Css
 
HTML
HTMLHTML
HTML
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
 
cours Php
cours Phpcours Php
cours Php
 
Alimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEBAlimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEB
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3
 
Formation - P1 - Spip Utilisation
Formation - P1 - Spip UtilisationFormation - P1 - Spip Utilisation
Formation - P1 - Spip Utilisation
 
Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
 
E sidoc niveau avancé html
E sidoc niveau avancé htmlE sidoc niveau avancé html
E sidoc niveau avancé html
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoc
 

En vedette

MEGA HOLDİNGS İŞ SUNUMU ECD
MEGA HOLDİNGS İŞ SUNUMU ECDMEGA HOLDİNGS İŞ SUNUMU ECD
MEGA HOLDİNGS İŞ SUNUMU ECD
Hilmi Bulut
 
Boostez votre relation avec chaque visiteur de votre site
Boostez votre relation avec chaque visiteur de votre siteBoostez votre relation avec chaque visiteur de votre site
Boostez votre relation avec chaque visiteur de votre site
IgniteStrasbourg
 
Projektentwickler
ProjektentwicklerProjektentwickler
Projektentwickler
darionass
 
Birds high fashion_show___1
Birds high fashion_show___1Birds high fashion_show___1
Birds high fashion_show___1
baseandromeda1
 

En vedette (18)

Gestion de projet web
Gestion de projet webGestion de projet web
Gestion de projet web
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapes
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
 
Mettez de l'ux dans votre gestion de projet
Mettez de l'ux dans votre gestion de projetMettez de l'ux dans votre gestion de projet
Mettez de l'ux dans votre gestion de projet
 
A mediter1 (1)
A mediter1 (1)A mediter1 (1)
A mediter1 (1)
 
Energie & technologie
Energie & technologieEnergie & technologie
Energie & technologie
 
APD MAROC FORMATION_ BATIR UNE STRATEGIE EFFICACE POUR CROÎTRE ET DURER
APD MAROC FORMATION_ BATIR UNE STRATEGIE EFFICACE POUR CROÎTRE ET DURER APD MAROC FORMATION_ BATIR UNE STRATEGIE EFFICACE POUR CROÎTRE ET DURER
APD MAROC FORMATION_ BATIR UNE STRATEGIE EFFICACE POUR CROÎTRE ET DURER
 
Développer la fiabilité du collectif, prendre les bonnes décisions (à partir ...
Développer la fiabilité du collectif, prendre les bonnes décisions (à partir ...Développer la fiabilité du collectif, prendre les bonnes décisions (à partir ...
Développer la fiabilité du collectif, prendre les bonnes décisions (à partir ...
 
MEGA HOLDİNGS İŞ SUNUMU ECD
MEGA HOLDİNGS İŞ SUNUMU ECDMEGA HOLDİNGS İŞ SUNUMU ECD
MEGA HOLDİNGS İŞ SUNUMU ECD
 
Les petites entreprises et le Web
Les petites entreprises et le WebLes petites entreprises et le Web
Les petites entreprises et le Web
 
Ebber Cc Republica
Ebber Cc RepublicaEbber Cc Republica
Ebber Cc Republica
 
2 hr
2 hr 2 hr
2 hr
 
Altern IT by Tanguy Goretti
Altern IT by Tanguy GorettiAltern IT by Tanguy Goretti
Altern IT by Tanguy Goretti
 
Boostez votre relation avec chaque visiteur de votre site
Boostez votre relation avec chaque visiteur de votre siteBoostez votre relation avec chaque visiteur de votre site
Boostez votre relation avec chaque visiteur de votre site
 
Projektentwickler
ProjektentwicklerProjektentwickler
Projektentwickler
 
8066 2. Petrus 3, 10 ....
8066   2. Petrus 3, 10 ....8066   2. Petrus 3, 10 ....
8066 2. Petrus 3, 10 ....
 
Birds high fashion_show___1
Birds high fashion_show___1Birds high fashion_show___1
Birds high fashion_show___1
 
7954 Gottes Schutz im Glaubenskampf ....
7954   Gottes Schutz im Glaubenskampf ....7954   Gottes Schutz im Glaubenskampf ....
7954 Gottes Schutz im Glaubenskampf ....
 

Similaire à technologie web - part2

seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
AmineReal
 

Similaire à technologie web - part2 (20)

Html
HtmlHtml
Html
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
 
HTML5
HTML5HTML5
HTML5
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
CSS 3
CSS 3CSS 3
CSS 3
 
CSS
CSSCSS
CSS
 
initiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdfinitiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdf
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Conception Web Avec Dreamweaver
Conception Web Avec DreamweaverConception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Cours css niveau debutant
Cours css niveau debutantCours css niveau debutant
Cours css niveau debutant
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 

Plus de Benoît Simard (6)

Paris meetup-rdf
Paris meetup-rdfParis meetup-rdf
Paris meetup-rdf
 
20161020 - Paris - Retour GC
20161020  - Paris - Retour GC20161020  - Paris - Retour GC
20161020 - Paris - Retour GC
 
technologie web- part4
technologie web- part4technologie web- part4
technologie web- part4
 
technologie web - part3
technologie web - part3technologie web - part3
technologie web - part3
 
technologie web
technologie webtechnologie web
technologie web
 
Formation Play! framework
Formation Play! frameworkFormation Play! framework
Formation Play! framework
 

technologie web - part2

  • 1. Technologie Web HTML, CSS & javascript Le 19 Novembre 2010
  • 2. Plan 1. Les technologies cotés clients 2. Le HTML 3. Le CSS 4. Le javascript
  • 3. Plan  1. Les technologies cotés clients 2. Le HTML 3. Le CSS 4. Le javascript
  • 4. 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.
  • 5. 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
  • 6. Les technologies coté client NAVIGATEUR Internet Exploreur 6 Firefox 2.X Internet Exploreur 7 Internet Exploreur 8 Firefox 3.X Opéra Chrome Safari Konqueror
  • 7. Quelques statistiques IE9 IE8 IE7 IE6 FF > 3.5 FF< 3.5 Chrome Safari Opéra
  • 8. Plan  1. Les technologies cotés clients 2. Le HTML 3. Le CSS 4. Le javascript
  • 9. (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">
  • 10. Page HTML simple <html> <head> <title>A very simple page</title> </head> <body> <h1>Hello World !</h1> </body> </html>
  • 11. 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)
  • 12. 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" />
  • 13. 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
  • 14. BODY Les balises de liste Balise Type Description 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
  • 15. BODY Les balises de tableau Balise Type Description 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
  • 16. BODY Les balises de formulaire Balise Type Description 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.
  • 17. BODY Les balises de formulaire Balise Type Description input inline <!-- Zone de texte d'une ligne --> <input type="text" /> <!-- Mot de passe (le texte est caché) --> <input type="password" /> <!-- Envoi de fichier --> <input type="file" /> <!-- Case à cocher --> <input type="checkbox" /> <!-- Bouton d'option --> <input type="radio" /> <!-- Bouton --> <input type="button" /> <!-- Bouton d'envoi --> <input type="submit" /> <!-- Bouton de remise à zéro --> <input type="reset" /> <!-- Champ caché --> <input type="hidden" /> Pensez à donner un nom à vos champs grâce à l'attribut id (for du label)
  • 18. BODY Les balises de formulaire Balise Type Description 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
  • 19. BODY Les balises génériques Balise Type Description span Inline div Block
  • 20. Plan  1. Les technologies cotés clients 2. Le HTML 3. Le CSS 4. Le javascript
  • 21. 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 }
  • 22. 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>
  • 23. 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{ … }
  • 24. 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 !!!
  • 25. 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
  • 26. Les boites Une balise ouvrante / fermante constitue une boite M$ → Width = Border + Padding + Content W3C → Width = Content
  • 27. 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
  • 28. 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.
  • 29. 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 }
  • 30. 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;}
  • 31. Plan  1. Les technologies cotés clients 2. Le HTML 3. Le CSS 4. Le javascript
  • 32. 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
  • 34. 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"><!-- document.write("Hello World!");//--></script>
  • 35. 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 modification du contenu • onsubmit : sur la soumission d’un formulaire • onload : sur le chargement de la page
  • 36. 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 :ff = += -= *= ...
  • 37. 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)
  • 39. 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());
  • 40. 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 érentsff • 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’]
  • 41. Intéraction avec le DOM • Document • document.createElement(tagName) • document.getElementByTagName(tagName) • document.getElementById(elementId)
  • 42. 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
  • 43. 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);