Cours 2 HTML Css Cours 09-05-10

(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)
Requte HTTP
Requte SQL
Donnes

Construction de la page HTML
Php (jsp, asp, ...)
Page HTML

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>
<html></html>
Encadre l'ensemble de la page. Permet aux navigateurs de savoir qu'il s'agit d'une page HTML.
<html></html>
Concerne tout ce qui n'est pas directement visible dans la page.
<html></html>
Titre de la page.
<html></html>
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



(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

" & < > " & < >
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
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
Description (<meta name="description"

content="..."></meta>)
Prsente et diffrente sur chaque page Lisible et synthtique Cohrente avec les mots-clefs du titre

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
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
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 ... ...

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
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)
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, ...)

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)
Robots.txt
User-agent: * Disallow: /administrator/ Disallow: /cache/
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
Mots clefs
According to my calculations, the problem doesn't exist.
A quelle question rpond votre site ? <strong> </strong> <em> </em>
Liens entrant
Un lment indispensable du rfrencement Annuaires /!\ Sandbox google /!\
Page-rank
Indice entre 0 et 10 (~) PR site entrant / PR des sites sortant => TrustRank

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

Cours 2 HTML Css Cours 09-05-10

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours 2 HTML Css Cours 09-05-10

Transféré par

Droits d'auteur :

Formats disponibles

(x)HTML - CSS

JcT 11 janvier 2010

HTML, Css, javascript, actionscript

Sites web dynamique ?

Sites web dynamique ?

Sites web dynamique ?

Sites web dynamique ?

Sites web dynamique ?

Php (jsp, asp, ...)

Sites web dynamique ?

Sites web dynamique ?

HTML, Css, javascript, actionscript

HyperText Markup Langage

Structuration de document Ne gre pas (plus) la forme

HyperText Markup Langage

Structuration de document Ne gre pas (plus) la forme

(x)HTML balises indispensables

(x)HTML balises indispensables

(x)HTML balises indispensables

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

(x)HTML balises indispensables

(x)HTML balises indispensables

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

(x)HTML structure d'une page

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

(x)HTML balises principales

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

<a> ... </a>

(x)HTML div & span

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

type block type inline

(x)HTML div & span

(x)HTML Hx, strong & em

<a> ... </a>

Exemple sur la balise <a> :

<a> texte du lien </a>

lien mais vers o ?

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

Valeur de l'attribut 'href' :

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

toujours entre " "

(x)HTML balises utiles

Mise en forme spciale :

Hit any user to continue.

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

(x)HTML balises smantiques

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

Encodage des caractres : kesaco ?

Encodage des caractres :

Association caractre <=> code machine

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

Encodage des caractres :

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

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

<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

Cascading Style Sheets

Mise en forme de document