Vous êtes sur la page 1sur 85

(x)HTML - CSS

JcT 11 janvier 2010

Sites web ?
If at first you don't succeed, call it version 1.0

(Serveur) (Ordinateur)

Sites web ?

Requte HTTP

Sites web ?

Page HTML

Sites web ?
Navigateur affiche la page

HTML, Css, javascript, actionscript

Sites web dynamique ?


Today is the last day of your life, so far...

(Ordinateur)

(Serveur)

(Base de Donnes)

Sites web dynamique ?

Requte HTTP

Sites web dynamique ?

Requte SQL

Sites web dynamique ?

Donnes

Sites web dynamique ?


Construction de la page HTML

Php (jsp, asp, ...)

Sites web dynamique ?

Page HTML

Sites web dynamique ?


Navigateur affiche la page

HTML, Css, javascript, actionscript

(x)HTML
Originality is the art of concealing your sources.

HyperText Markup Langage


X pour ? Norme du W3C

Structuration de document Ne gre pas (plus) la forme

(x)HTML
Originality is the art of concealing your sources.

HyperText Markup Langage


X pour ? Norme du W3C

balisage

Structuration de document Ne gre pas (plus) la forme

(x)HTML - balises

Commandes (x)HTML
Encadrent le contenu du document <nom balise> ... </nom balise> (en casse minuscule)

(x)HTML - balises

Commandes (x)HTML
Encadrent le contenu du document <nom balise> ... </nom balise>

balise fermante

balise ouvrante

(x)HTML balises indispensables


Best file compression around -'DEL *.*'

<html></html>
<head></head> <title></title> <body></body>

(x)HTML balises indispensables

<html></html>
<head></head> <title></title> <body></body>

Encadre l'ensemble de la page. Permet aux navigateurs de savoir qu'il s'agit d'une page HTML.

(x)HTML balises indispensables

<html></html>
<head></head> <title></title> <body></body>

Concerne tout ce qui n'est pas directement visible dans la page.

(x)HTML balises indispensables

<html></html>
<head></head> <title></title> <body></body>

Titre de la page.

(x)HTML balises indispensables

<html></html>
<head></head> <title></title> <body></body>

Tout ce qui apparat dans le navigateur. Corps de la page.

(x)HTML structure d'une page


To err is human... to blame your computer for your mistakes is even more human

<html> <head> <title>Titre de ma super page !</title> </head> <body> Blabla qui apparat dans le navigateur. </body> </html>

(x)HTML imbrication

Une balise ouverte l'intrieur d'une autre doit, obligatoirement, tre referme avant la fermeture de la premire.

(x)HTML imbrication

<balise1></balise1><balise2></balise2> <balise1><balise2></balise2></balise1> <balise1><balise2></balise1></balise2>

(x)HTML balises principales

Structures de la page :

<div> ... </div> <span> ... </span>

Mise en exergue :

<h1> ... </h1>, <h2> ... </h2>, ... , <h6> ... </h6> <strong> ... </strong>, <em> ... </em>

Liens :

<a> ... </a>

(x)HTML div & span

Structures de la page :

<div> ... </div> <span> ... </span>

type block type inline

(x)HTML div & span

(x)HTML Hx, strong & em

Mise en exergue :

<h1> ... </h1>, <h2> ... </h2>, ... , <h6> ... </h6> <strong> ... </strong>, <em> ... </em>

(x)HTML a

Liens :

<a> ... </a>

(x)HTML attributs
Computers are not intelligent. They only think they are.

Un attribut est une instruction l'intrieur d'une balise Fournit une information supplmentaire sur la manire dont cette balise doit tre interprte.

(x)HTML attributs

Exemple sur la balise <a> :

<a> texte du lien </a>

lien mais vers o ?

<a href="http://www.google.com"> Google </a>

nom de l'attribut

valeur de l'attribut

(x)HTML chemins

Valeur de l'attribut 'href' :

<a href="http://www.google.com"> Google </a> <a href="../page.html"> Page </a> <a href="/page.html"> Page </a>

(x)HTML chemins
Chemin relatif

Chemin absolu

.. . / \

\ / / \

(x)HTML chemins
Arborescence d'un site (exemple)

Images Mdia Nom du site Tests Pages HTML CSS Vidos Flv

Icones Design

(x)HTML attributs

Les attributs s'crivent toujours : nom="valeur"

en casse minuscule

toujours entre " "

Il est possible d'ajouter des attributs toutes les balises Les attributs peuvent tre spcifiques une (ou plusieurs) balise ou commun toutes les balises.

(x)HTML balises utiles

Mise en forme spciale :


Hit any user to continue.

<ul> ... </ul>, <ol> ... </ol>, <dl> ... </dl> <table> ... </table>

Image :

<img src="..." alt="..." />

Commentaires :

<!-- ... -->

(x)HTML commentaires

<!-- ... -->

<!--[if IE]> <link rel="stylesheet" href="ie.css" type="text/css"> <![endif]-->

<!--[if lt IE 7]> <link rel="stylesheet" href="ie6.css" type="text/css"> <![endif]-->

(x)HTML commentaires
Multitasking: Screwing up several things at once.

lt lte gt gte

< >

(x)HTML balises smantiques

<q> ... </q>, <blockquote> ... </blockquote>, <cite> ... </cite> <pre> ... </pre>, <samp> ... </samp>, <code> ... <code> <ins> ... </ins>, <del> ... </del> <abbr> ... </abbr>, <acronym> ... </acronym>

XHTML/HTML - diffrences
Some people keep repeating the same mistakes over and over and call it experience.

Imbrication hirarchique des balises Balises et attributs en minuscules Les balises "vides" doivent se terminer par /> Il faut spcifier un texte alternatif (alt) dans les balises <img>

XHTML/HTML - diffrences

Les balises non vides doivent se terminer obligatoirement par leur balise de fermeture. Les attributs doivent tre entre guillemets " Tout attribut doit avoir une valeur explicite : <input type="checkbox" checked="checked" />

(x)HTML Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

(x)HTML Encodage

Encodage des caractres : kesaco ?

(x)HTML Encodage
Is reading in the bathroom considered Multi-Tasking?

Encodage des caractres :

Association caractre <=> code machine

ISO-8859-1 vs utf-8 191 caractres => caractres fusionns, , ... absents

(x)HTML Encodage

Encodage des caractres :

<?xml version="1.0" encoding="utf-8" ?>

OU

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

(x)HTML Meta

<meta name="author" content="JcT" /> <meta name="category" content="Truc, machin, bidule" /> <meta name="language" content="fr" /> <meta name="keywords" content="html, css, xhtml, web" /> <meta name="robots" content="all" /> <meta name="googlebot" content="noarchive" />

(x)HTML Meta

<meta name="description" content="blablabla" />

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<meta http-equiv="refresh" content="10;url=http://www.google.com" />

(x)HTML caractres spciaux


&quot; &amp; &lt; &gt; " & < >

CSS

Cascading Style Sheets

Norme du W3C

Mise en forme de document

CSS - intrt

Homognit Evoluabilit Rutilisation ...

CSS Link

Les dfinitions CSS se mettent dans un fichier part


Elles sont relies la page html par la balise : <link> ... </link>

<link rel="stylesheet" type="text/css" href="style.css" />

CSS Fonctionnement
This time it will surely run.

slecteur { proprit1 : valeur; proprit2 : valeur; }

CSS Exemple
Modifie le corps de la page Couleur de fond : noire body { backgound-color : #000000; color : #FFFFFF; } Couleur d'criture : blanc

CSS Slecteurs

Une balise

Une classe

Un identifiant

CSS Class
When computing, whatever happens, behave as though you meant it to happen.

<balise class="nomdelaclasse"> ... </balise>


.nomdelaclasse { ... }

Peut s'appliquer sur autant de balises que ncessaire

CSS Id
<balise id="identifiant"> ... </balise>
#identifiant { ... }

Peut s'appliquer une et une seule balise !

CSS Collision
<div id="div1" class="class1"> blabla </div> div { color: #000; } .class1 { color: #FFF; } #div1 { color: #F00; }

blabla

CSS Hritage
<div id="div1"> <p> blabla </p> </div>

#div1 { color: #F00; }

blabla

CSS Combinaison de slecteurs


When computing, whatever happens, behave as though you meant it to happen.

h1, h2, h3 div p a .classA p body > div

{ font-style: italic; } { font-weight: bold; } { text-indent: 10px; } { border: 1px solid #FF00FF; }

CSS pseudo elements/class


:first-line :first-letter :after :before

:active :focus :first-child :hover :lang :link :visited

CSS padding, margin & border

CSS position
absolute = positionnement mesur partir des bords de l'lment parent. fixed = positionnement mesur partir du bord de l'lment parent; relative = positionnement relatif mesur partir de la position normale de l'lment.

CSS position

left : dcalage par la gauche top : dcalage par le haut right : dcalage par la droite bottom : dcalage par le bas

CSS position
div { postition: absolute; left: 50%; top: 10% }

CSS float

left = L'lment est gauche du conteneur et entour par llment suivant

right = L'lment est droite du conteneur et entour par llment suivant

(x)HTML & CSS - liens

W3C

Validator : http://validator.w3.org Schools : http://www.w3schools.com/ Norme :

http://www.w3.org/TR/xhtml11/

(x)HTML & CSS

- Programming is an art form that fights back :)

Rfrencement Bonnes pratiques

Google

Rfrencement Bonnes pratiques

Rfrencement Bonnes pratiques

Titre de la page (<title></title>)

Consciousness -That annoying time between naps.

Dcrit le contenu de la page Unique et diffrent pour chaque page Lisible et synthtique Utilise les mots-clefs principaux de la page

Rfrencement Bonnes pratiques

Description (<meta name="description"


content="..."></meta>)

Prsente et diffrente sur chaque page Lisible et synthtique Cohrente avec les mots-clefs du titre

Rfrencement Bonnes pratiques


Experience is what causes a person to make new mistakes instead of old ones.

Url (adresse des page)

User-friendly (pas de 155487494sds454s.html) Utilise les mots-clefs de la page Une seule adresse pour un contenu

Rfrencement Bonnes pratiques

Architecture (nom des dossiers)

Une architecture simple (viter /dir1/dir2/dir3/.../dirX/page.html) Des noms de dossier apportant des informations sur la page Utiliser un sitemap

Rfrencement Bonnes pratiques

Sitemap (xml)
http://youthinkyoucanscript.com/ 2010-01-12T21:22:25Z daily 0.5 http://youthinkyoucanscript.com/news 2010-01-12T21:22:25Z daily 0.5 http://youthinkyoucanscript.com/algorithmes 2010-01-12T21:22:25Z daily 0.5 ... ...

Rfrencement Bonnes pratiques


Accept that some days you're the pigeon and some days you're the statue.

Contenu (texte)

Attention erreurs d'orthographe ou de typo Ne jamais dupliquer du contenu Organiser pour des raisons smantiques et non de mise en forme

Rfrencement Bonnes pratiques

Liens (<a href=""> ... </a>)

viter les textes gnriques (Cliquez ici) Doit dcrire la page vers laquelle il pointe Suffisamment court (pas de paragraphe de texte)

Rfrencement Bonnes pratiques

Titres (<h1> ... </h1>, <h2> ... </h2>, ...)

Doit dfinir la structure de la page Garder la cohrence entre les balises (<h1>, puis <h2>, puis <h3>, etc.) Utiliser les mots clefs (viter les termes gnriques : chapitre, partie, ...)

Rfrencement Bonnes pratiques


Pride is what we have. Vanity is what others have

Images (<img src="" alt="" />)

Doit comporter un texte alternatif

Le texte doit tre descriptif (pas de logo.gif)

Rfrencement Bonnes pratiques

Robots.txt

User-agent: * Disallow: /administrator/ Disallow: /cache/

Rfrencement Bonnes pratiques

Mots clefs

Pas mots mais des expressions clefs (84% recherche 2 mots et plus) Bonne expression-clef = bon ratio entre le nombre de recherche et le nombre de page rfrence https://adwords.google.fr/select/KeywordToolExternal

Rfrencement Bonnes pratiques

Mots clefs

According to my calculations, the problem doesn't exist.

A quelle question rpond votre site ? <strong> </strong> <em> </em>

Rfrencement Bonnes pratiques

Liens entrant

Un lment indispensable du rfrencement Annuaires /!\ Sandbox google /!\

Rfrencement Bonnes pratiques

Page-rank

Indice entre 0 et 10 (~) PR site entrant / PR des sites sortant => TrustRank

Rfrencement Bonnes pratiques


Women who seek to be equal to men lack ambition.

La stratgie de rfrencement d'un site s'effectue

AVANT
la ralisation du site

Cours en ligne

http://youthinkyoucanscript.com