HTML-CSS, Format PDF

Transcription

PLAN
XHTML & CSS
Gobelins 2013 – 2014
1. Le Web et ses langages
2. Le langage HTML
3. Créer une page HTML
4. Créer un site en liant les pages HTML
5. Balises spécifiques à HTML 5
6. Le langage CSS
7. W3C et validation du code
8. Affichage d’une page web sur les différents navigateurs
Isabelle Biamonti
Ce COURS
Ce COURS
Comprendre, avancer en groupe
Aider chacun, selon le niveau
1 TP en groupe
à  Pour identifier les attentes, et voir les différentes réponses possibles
Intro
Devenir des Concepteurs Réalisateurs MULTIMEDIA (et non print)
Comprendre les contraintes
Anticiper les besoins
Préparer des maquettes prêtes à intégrer
Intro
2 TP personnels
à  Les rendus se font sur Claroline
à  -1 point par jour de retard
Note finale
à  TP intégration ……………………… /8
TP WordPress ……………………… /9
Note globale de participation ………. /3
à  0/3 si utilisation de facebook/gtalk…
1
1. LE WEB ET SES LANGAGES
1. LE WEB ET SES LANGAGES
Il existe des millions de sites, et de nombreux navigateurs qui permettent de les
visualiser. Cette technologie repose sur le langage HTML.
Pour créer des applications web
Intro
Les apports de HTML 5
Meilleure interaction avec javascript grâce aux WebApps 1.0 à développeurs
Pour créer des formulaires pratiques sans avoir besoin de javascript
Les sites sont créés (ou générés) en HTML à Le fond
Et mis en forme grâce au langage CSS à La forme.
Grâce aux WebForms 2.0
Pour ajouter un aspect sémantique aux balises
Elles n’auront plus seulement un aspect cosmétique
La base du HTML, c’est de pouvoir faire des liens entre les pages.
On peut faire un site uniquement en HTML.
Il existe d’autres langages utilisés sur internet. Par exemple le PHP, l’ASP, JSP pour générer dynamiquement
de l’HTML, le Javascript, l'Ajax pour l'interaction dans les pages web et les BDD, l'AS dans Flash, etc…
Pour mieux gérer les erreurs
La spécification indique comment les navigateurs se comportent avec un document mal formé
Pour mieux intégrer les contenus rich medias
Grâce à des balises spécifiques
En simplifiant tout en gardant l’existant
Syntaxe plus indulgente à chacun style son code à sa façon. On ne réinvente pas ce qui existe.
En ajoutant quelques balises utiles
2. LE LANGAGE HTML
2. LE LANGAGE HTML
Le HTML est un de «balisage» (de « structuration » ou de «marquage»).
Il formalise l'écriture d'un document avec des balises de formatage.
Balises en paires
Elles sont constituées de balises "ouvrantes" (<p>) et "fermantes"(</p>).
à Exemple : <h1>Ici mon titre principal</h1>
Ces balises doivent toujours être ouvertes et refermées.
Si plusieurs sont imbriquées, elles doivent être refermées dans l'ordre d’ouverture.
à Exemple : <p>Ici mon <b>titre principal</b></p>
à  La balise <b> signifie "gras" donc tout ce qui sera entre <b> et </b> sera en gras.
Fonctionnement
Les balises permettent d'indiquer le type des éléments (paragraphe, liste,…) et les liens
qu'il établit avec d'autres documents.
Pour faire simple, le HTML fonctionne avec :
des balises, qui indiquent au navigateur ce qu'il doit faire,
et des attributs, qui indiquent au navigateur comment le faire.
HTML vs XHTML
à  XHTML est une version plus "stricte" du HTML. Cette évolution permet de s'assurer du
rendu des pages quel que soit le navigateur employé par l'utilisateur.
Les balises
Balises auto-fermantes
Pour les balises non paires, le signe de fermeture (/) est dans la balise.
à Exemple : la balise de passage à la ligne s'écrit <br />
à Pour insérer une image on écrit <img src="image.jpg" />
2
2. LE LANGAGE HTML
3. CRÉER UNE PAGE HTML
Si on écrit <img src="image.jpg" />, src="…" est un attribut de la balise img.
Chaque balise peut être précisée à l'aide d’un ou plusieurs attributs.
La structure de base d’une page HTML :
Les attributs
Si on ouvre, une balise de formulaire d’image sur un éditeur,
il propose automatiquement tous les attributs disponibles sur cette balise :
Intro : le squelette
Le rendu :
<!doctype html>
à toute page html doit commencer par le doctype
<html> à ouverture du langage HTML
<head>
à header dans lequel on insère le titre de la page et autres
<title>Titre de la page</title>
</head>
à On peut alors écrire :
<img src="image.jpg" border="0" alt="description" height="2" width="4" />
à Affichera l'image "image.jpg" sans bordure, en 4x2 px, avec un texte alternatif.
à Usage : rédiger tout en minuscule, avec un = et des "" à attribut="…"
<body>
à body dans lequel on insère contenu + structure de page.
Ici le contenu de la page qui s'affichera dans le navigateur.
</body>
</html> à fermeture du langage HTML
Le doctype est un document qui informe le validateur :
- de la version de HTML utilisée dans le document,
- du lien vers un document W3C qui spécifie les règles d’écritures, les propriétés de
chaque élément (balises, attributs) de cette version.
Détails pour choisir correctement sa DTD :
Etape 1 : le doctype (ou Déclaration de Type de Document)
Il doit apparaître en toute première position de chaque page HTML.
à  Permet au validateur de comparer le document aux règles auxquelles il doit obéir, et
en déduire s’il est valide ou non. Sans DTD, pas de validation.
Pour le navigateur, la DTD n’est pas indispensable puisqu’il a son propre moteur et ses
propres règles. Néanmoins elle peut faire varier le rendu selon le doctype utilisé.
Sans doctype, le navigateur passera en mode « quirks » (codage « à l’ancienne »).
Etape 1 : choix du doctype
à http://www.alsacreations.com/article/lire/560-dtd-doctype-html-xhtml-comment-choisir.html
à http://openweb.eu.org/articles/differentes_dtd
Pour les versions <HTML5
6 DTD, 2 qui suffisent en général avec comme différences principales :
- syntaxe HTML
- stock de balises différent entre 3 catégories :
transitionnelle, stricte et frameset.
Exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
Depuis HTML5 :
<!DOCTYPE html>
3
Il contient des données qui décrivent le document ou le lient avec des ressources.
Title : indique le titre de la page (affichée dans la barre de titre du navigateur)
Link : pour lier une feuille de style ou un script à la page
Meta : informations supplémentaires (auteur, instructions moteurs recherches, encodage page,…)
Script : pour insérer directement du contenu en script, ou appeler un script externe
Style : pour insérer directement des éléments CSS spécifiques à la page.
On va insérer du texte, et indiquer grâce aux balises XHTML de quoi il s'agit
(titre, paragraphe, liste, image, lien, etc…)
Etape 2 : le header
Exemple de header :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta charset="UTF-8“>
<meta name="keywords" content="mots, clefs" />
<meta name="description" content="Description affichée dans les moteurs " />
<title>Le titre de ma page</title>
<link rel="stylesheet" type="text/css" href="css/mafeuilledestyle.css" />
</head>
Etape 3 : le body
Etape 3 : le body
Les balises peuvent être de type bloc ou en ligne :
• les éléments de rendu "bloc" servent à distinguer les parties entières de texte,
comme des titres <h1>, paragraphes <p>, listes <ul>, citations <blockquote>,…
à La suite du code HTML passera à la ligne dans le navigateur
• les éléments "en-ligne" sont prévus pour rester dans le texte, pour l'enrichir
comme des liens hypertexte <a>, emphase <em>, renforcement <strong>,…
à La suite du code HTML s’affichera à la suite
* Tableau des principales balises en annexe du cours PDF ou sur :
http://www.w3schools.com/tags/default.asp
4. LIER LES PAGES HTML
Lier les pages avec la balise <a>
C’est en liant les pages les unes aux autres que l’on va créer un site.
à A noter : la page d’accueil du site doit toujours se nommer « index.htm ».
Les liens se font via la balise <a>, avec la syntaxe :
<a href=«url» target=«fenetre d’ouverture» title=«titre du lien»>Mon lien</a>
L’URL peut être en relatif : <a href="mapage.htm">lien</a>
ou en absolu : <a href="http://www.google.com/mapage.htm">lien</a>
Il existe plusieurs valeurs pour la cible (fenêtre d’ouverture) :
target ="_blank"
à Affichage du lien dans une autre fenêtre du navigateur
target ="_top"
à Affichage dans la totalité de la fenêtre courante
target ="_parent" à Affichage dans le cadre qui enveloppe la structure courante
target ="_self"
à Affichage dans le cadre courant (par défaut)
target ="moncadre" à Affichage dans le cadre spécifié
4
4. LIER LES PAGES HTML
Lier les pages avec la balise <a>
Exemples de liens relatifs en prenant comme arborescence
l'exemple ci-contre :
Si on est sur index.htm
à on souhaite appeler une image : "images/image.jpg"
à on souhaite appeler une page : "pageshtml/page1.htm"
Si on est sur page1.htm
à on souhaite appeler une image : "../images/image.jpg"
à on souhaite appeler une page : "page1.htm"
à on souhaite remonter à l'index : "../index.htm"
5. BALISES SPECIFIQUES HTML5
Rich Medias / CANVAS
Permet de créer des images dynamiques.
Son contenu peut être modifié et redessiné à tout moment, selon les actions de
l’utilisateur.
Théoriquement, permet de faire la même chose qu’Illustrator de Adobe.
Syntaxe :
<canvas id=«mon-canvas» width=«350» height=«200»>
Le texte entre les balises sera lu uniquement par les navigateurs ne supportant pas canvas
</canvas>
Ensuite on « dessine » dans ce conteneur grâce à Javascript.
Exemples :
http://www.canvasdemos.com/
http://9elements.com/io/projects/html5/canvas/
http://w3c.html5.free.fr/news/canvas.php
http://html5doctor.com/video-canvas-magic/
Permet d’insérer un fichier audio dans un document HTML5.
Attention aux droits d’auteurs
Permet d’insérer un fichier vidéo dans un document HTML5.
Il fonctionne comme la balise audio. Attention aux droits d’auteurs.
Syntaxe :
Syntaxe :
<audio src=«musique.mp3» autoplay loop controls></audio>
ou
<audio controls >
<source src=«musique.mp3»>
<source src=«musique.ogg»>
</audio>
<video controls width=«300» height=«250» poster=«apercu.jpg»>
<source src=«film.mp4» >
<source src=«film.ogv»>
</audio>
Rich Medias / AUDIO
Rich Medias / VIDEO
MP4 (brevet), Theodora, etc…
http://diveintohtml5.org/video.html
MP3 (brevet) pour Safari, OGG pour Firefox, etc…
Exemples :
http://www.phpguru.org/html5-examples#html5.audio
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio
Exemples :
http://sublimevideo.net/demo
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_simple
http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/
http://double.co.nz/video_test/
5
Une série de balises et d’attributs pour rendre le formulaire interactif, sans utiliser
javascript. Un grand nombre ne sont pas -encore- stylables.
<input type=«search» id=«recherche» placeholder=«Saisissez votre recherche» />
- Le contenu du placeholder s’efface au clic et réapparaît si on laisse la zone vide.
<input type=«text» id=«recherche» placeholder=«Saisissez votre recherche» />
- Le contenu du placeholder s’efface au clic et réapparaît si on laisse la zone vide.
<input type=«email» id=«mail» />
<input type=«url» id=«adresse» />
<input type=«tel» id=«telephone» />
- Pas de modification visuelle mais la mise en avant d’informations sur le champ.
- Sur terminal à clavier virtuel (ex:iphone), le clavier sera différent en fonction du type de champ.
Web Forms
<input type=«text» id=«recherche» autofocus required autocomplete=«off» />
- Quand le document est chargé, on sélectionne automatiquement un champ précis de formulaire.
- Empêche la validation du formulaire si le champ n’est pas rempli. (pas encore fonctionnel)
- On peut désactiver le pré-remplissage des formulaires
<input type=«text» id=«proporecherche» list=«recherche»>
<datalist id=«recherche»><option value=«1»><option value=«2»></datalist>
- Hybride entre un input et un select à aide à la saisie
http://minimul.com/demo/datalist/index.html
http://www.quackit.com/html_5/tags/html_datalist_tag.cfm
Web Forms
<input type=«range» id=«slider» />
- Crée un slider, par défaut de 0 à 100
<input type=«number» id=«valeur» />
<input type=«date» id=«valeur» />
- Crée un champ de saisie pour nombres / pour dates, avec boutons pour diminuer ou augmenter.
<input type=«color» id=«palette» />
- Crée un champ avec widget intégré pour choisir une couleur. Pas encore implémenté.
<mark></mark>
- Pour montrer qu’un texte a un intérêt à un moment donné (cf résultats recherche).
<section></section>
- Pour regrouper du contenu apparenté (div ne renseigne pas sur son contenu).
<time datetime=«16:00»>16 h</time>
- Pour que le navigateur puisse comprendre la date et/ou l’heure.
<header></header>
<footer></footer>
<aside></aside>
<nav></nav>
<article></article>
- Pour le ou les en-têtes, footers,
textes apparentés, navigation, articles.
- C’est le contenu qui est important,
et pas la position (2 écoles ?)
- Cela apportera sans doute par la suite une
meilleure interprétation du site par les moteurs
Balises pour spécifier la nature d’un texte
<meter min=«0» max=«100»></meter>
- Pour baliser des mesures
<progress min=«0» max=«100»></ progress>
- Crée un champ de saisie pour nombres / pour dates, avec boutons pour diminuer ou augmenter.
…
Balises pour structurer le contenu
6
CSS est un langage uniquement utilisé sur le web, en complément du langage HTML.
HTML = le fond
CSS = la forme
Voici la manière de formuler :
un sélecteur, et un bloc de déclaration situé entre deux accolades.
Intro
CSS permet de mettre en page et donner de l’esthétisme aux pages web.
Depuis CSS3, on peut remplacer certaines images par du CSS à gagner en poids
Externaliser le style de la page dans une feuille CSS
à permet d'avoir du code HTML beaucoup plus léger.
à permet aux moteurs de recherche d’aller plus rapidement au contenu.
à et surtout permet de concentrer en un document tous les styles des pages d'un site.
Exemple : on vous demande de changer la couleur des titres de niveau 1,
vous le changez à un seul endroit, et pas page par page.
Syntaxe
h1 à le (ou les) sélecteur(s)
{
color : #0000FF;
margin : 0 0 0 0;
à les déclarations, toujours terminées par un point-virgule
}
L’ordre d’apparition décide.
Les derniers sélecteurs (et les dernières déclarations) annulent les précédent(e)s
6. LE LANGAGE CSS
6. LE LANGAGE CSS
un identifiant (ne peut être utilisé qu'une seule fois par page html)
à #moncadre { … }
Exemples :
Les sélecteurs
une classe (peut être utilisé plusieurs fois dans une même page)
à .montexte { … }
un objet global (correspondant à une balise)
à p { … }
une classe ou un identifiant qui est typé selon la balise
à p.textebleu { … } ou p#intro { … }
un élément d'un objet supérieur (on descend dans le DOM)
à p strong { … }
Les sélecteurs
#mondiv p { … }
s'appliquera à toutes les balises <p> contenues dans le div #mondiv
(pas les balises <p> situées ailleurs dans la page)
#mondiv p strong { … }
seules les balises <strong> contenues dans les balises <p> qui
elles mêmes sont contenues dans le div #mondiv seront concernées.
p, span.montexte, a.monlien { … }
s’appliquera sur 3 éléments : les paragraphes, les spans ayant pour style « montexte »,
et les liens ayant pour style « monlien »
plusieurs éléments en même temps (à séparer par une virgule)
à p, a, span.montexte { … }
7
6. LE LANGAGE CSS
6. LE LANGAGE CSS
[attr^="stringValue"] à p.example[title^="ess" ] { color:#0000FF; }
:root
à Sélectionne
à Elément qui est la racine d’un document
3 sélecteurs spécifiques CSS3
un élément DOM dont l'attribut "attr" commence exactement par la valeur
Les pseudo-classes (liste non exhaustive) spécifiques CSS3
"stringValue".
à S’appliquera uniquement aux p avec class exemple, ayant un title commençant par « ess »
à <p class="example" title="essai"> j'ai un attribut title commençant par "ess"</p>
:nth-child(expression)
[attr$="stringValue"] à p.example2[title$="sai"] { color:#FF0000; }
à Accepte les mêmes arguments que :nth-child() et correspond au dernier enfant d'un élément parent.
à C'est le même principe que le :nth-child() sauf que l'on part de la fin.
Sélectionne un élément DOM dont l'attribut "attr" finit exactement par la valeur "stringValue".
à S’appliquera uniquement aux p avec class exemple2, ayant un title terminant par « sai »
à <p class="example2" title="essai"> j'ai un attribut title finissant par "sai"</p>
à
[attr*="stringValue"] à p.example3[title*="val"] { color:#00FF00; }
Sélectionne un élément DOM dont l'attribut "attr" comporte au moins 1 fois la valeur "stringValue".
à S’appliquera uniquement aux p avec class exemple3, ayant un title contenant « val »
à <p class="example3" title="val"> j'ai un attribut title contenant au moins "val"</p>
à
à Cible les éléments, se basant sur leur position dans la liste enfants / parent.
à expression peut être un nombre, une expression numérique ou un mot clé tel que "odd" ou "even".
:nth-last-child(expression)
:last-child
à Correspond à :nth-last-child(1) .
:first-child
à Correspond à :nth-child(1) .
:nth-of-type(expression)
à Ce sélecteur représente un élément qui a expression frères du même type devant lui dans l'arbre DOM.
:checked
à Correspond aux éléments cochés d'un formulaire.
http://debray-jerome.developpez.com/demos/selecteurs.html#nth-child
6. LE LANGAGE CSS
Les pseudo-classes : exemples
tr:nth-child(odd) td { background-color: #FF0000; }
à Ce code appliquera un fond rouge à une ligne sur 2 du tableau
ul.gallery li:last-child { margin-right: 0px; }
à Dans le cas d’une galerie photo avec pour chaque photo une marge à droite,
le dernier élément de la ligne n’aura pas de marge (ce qui lui évitera de passer à la ligne.
ul.gallery li:nth-child(3n) { margin-right: 0px; }
à Si la liste est répétée, on s’adresse à chaque 3e élément.
form input[type="text"] { width: 400px; }
à On s’adresse uniquement aux inputs de type texte
http://www.veille-web.fr/post/Un-code-plus-propre-avec-les-selecteurs-CSS3
6. LE LANGAGE CSS
Les déclarations
La liste des déclarations est longue.
Elles permettent de définir les aspects visuels :
position par rapport à la page ou aux autres blocs,
affichage ou masquage,
couleur du texte, des fonds, …
style de texte : typo, italique, gras, soulignement, …
bordures,
etc…
Cf. annexes du cours pdf ou sur
http://www.w3schools.com/CSS/CSS_reference.asp
Quelques exemples ci-contre.
8
6. LE LANGAGE CSS
6. LE LANGAGE CSS
border-radius: 10px; ou border-radius: 5px 10px 0 5px; box-shadow: 8px 8px 0 #aaa; et text-shadow: 0px 0px 9px #777;
à Ce code créera un ou des angles arrondis
http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html
à Ce code appliquera une ombre portée, sur une boite / sur un texte
http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html
http://www.css3.info/preview/text-shadow/
Les déclarations (liste non exhaustive)
background-color: rgba(0, 0, 255, 0.5);
Les déclarations (liste non exhaustive)
à Ce code prend en charge l’alpha
http://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html
@font-face { font-family: Calibri; src: local("Calibri"), url("fonts/calibri.ttf")
format("truetype"); font-weight: normal; font-style: normal; }
background-image: url("img1.jpg"), url("img2.jpg");
à Ce code permettra d’insérer des typos (Attention aux droits d’auteurs et à la taille du fichier)
http://css-tricks.com/snippets/css/using-font-face/
à On peut multiplier avoir plusieurs images de fond
http://www.alsacreations.com/tuto/lire/814-css3-background-image-multiple.html
background: -moz-radial-gradient(#FF0000, #0000FF); -moz-column-width: 13em; -webkit-column-width: 13em;
-moz-column-gap: 1em; -webkit-column-gap: 1em;
à Ce code scindera le texte en colonnes de 13em de large
http://www.css3.info/preview/multi-column-layout/
à Ce code créera un dégradé radial du rouge au bleu
http://www.alsacreations.com/tuto/lire/813-css3-background-radial-gradient.html
transition-property: color, width; transition-duration: 5s; à Ce code prépare une transistion
http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html
…
5. LE LANGAGE CSS
Les préfixes
Ils permettent de commencer à utiliser CSS3 sur les navigateurs actuels.
Chaque navigateur reconnaît son propre préfixe et applique les règles correspondantes.
6. LE LANGAGE CSS
Précisions sur le positionnement
1e étape : se représenter la maquette sous forme de zones.
Ces zones seront intégrées en DIVs (calques superposables).
Ils peuvent être imbriqués les uns dans les autres dans le HTML.
2e étape : positionner et mettre en forme ces DIVs et leur
contenu grâce à CSS dont on vient d’observer la syntaxe.
Utilisation :
.monCadreBordsArrondis{
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
/* on termine toujours par la véritable propriété car ce sera celle qui sera prise en compte au final,
quand CSS3 sera implémenté dans tous les navigateurs */
}
On définit tout d'abord le modèle de positionnement du bloc :
Static
Absolute
Fixed
Relative
Inherit
Positionnement en fonction de son ordre d'arrivée. Valeur défaut.
Positionnement par rapport aux bords de page, défile avec la page.
Positionnement par rapport aux bords de page, sans défilement.
Positionnement par rapport à l'élément précédent.
Même valeur que celle de l'élément parent.
9
6. LE LANGAGE CSS
6. LE LANGAGE CSS
Puis on définit les marges
- marges à l’intérieur du bloc : padding
- marges autour du bloc : margin
Dans le header de la page web, deux façons de faire :
div#contenu {
position : absolute;
margin : 30px 0px 30px 0px;
padding : 0;
}
<style title="currentStyle" type="text/css">
@import "monstyle.css";
</style>
Précisions sur le positionnement
Appeler une feuille de style dans une page HTML
<link rel="stylesheet" type="text/css" href="style/monstyle.css" />
On peut spécifier dans le header des éléments propres à la page : <style> </style>
Lors de l’appel d’une feuille de style, on peut définir sur quel support elle sera active.
Ordre : haut/droite/bas/gauche.
Si un seul côté : padding-right / padding left, etc…
Si 4 fois la même valeur, on peut ne l’indiquer qu’une fois.
Exemple : <link rel="stylesheet" type="text/css" media="print" href="monstyle.css">
à Ce style ne sera appliqué que lors de l'impression.
Enfin on définit tous les détails : couleurs, tailles, typos, etc…
Exemple : < link rel="stylesheet" type="text/css" media="screen" href="style.css">
à Ce style ne sera appliqué que sur écran
7. W3C ET VALIDATION DU CODE
8. AFFICHAGE SUR LES DIFFÉRENTS NAVIGATEURS
W3C est un Organisme de normalisation.
Il émet des recommandations à valeur de standard industriel.
Option 1 : utiliser les commentaires conditionnels (mécanisme valide).

Qu’est-ce que le W3C ? A quoi sert-il ?
Le W3C oeuvre pour mettre Internet, et les millions de données qu’il comporte,
à la portée de tous, quelque soit leur matériel, logiciel, réseau, langue ou handicap.
4 principes qui guident les efforts de conception :
* simplicité,
* modularité,
* compatibilité,
* l'extensibilité.
Pour vérifier la validité W3C d’une page.
Directement depuis le site du W3C, grâce au Markup validator : http://validator.w3.org/
Ou grâce à des modules à installer dans Firefox. (Détails dans cours pdf)
Que faire si le rendu du site diffère selon le navigateur ?





 si ce n'est pas IE 
On appelle une CSS pour les navigateurs anciens (ie 6) et une pour les navigateurs
modernes.
La CSS pour anciens navigateurs ne reprendra que les sélecteurs posant problème.
Autre option : utiliser la propriété !important (dans la CSS).
#container {
margin-left : 10px !important; à sera retenue par Firefox et navigateurs modernes
margin-left : 5px; à sera retenue par IE.
}
10
SITES UTILISANT LA TECHNO HTML5/CSS3
LIENS VERS DES SITES UTILES
HTML5 Demos
http://html5demos.com/
Alsacréations
« HTML 5 se dévoile »,« Ce que nous réserve CSS3 en 2010 » et « Osez
HTML5 et CSS3 »
Exemples d’utilisation
HTML5 Gallery
http://html5gallery.com/
BD utilisant des parallaxes
http://www.nevermindthebullets.com/strip.html#1-1
Zurb. Boutons entièrement CSS3, pas d’image
http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html
Articles sur HTML5 et CSS3
http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html
http://www.alsacreations.com/actu/lire/919-ce-que-nous-reserve-css3-en-2010.html
http://www.alsacreations.com/article/lire/947-osez-creer-site-html5-css3.html
Liste des éléments et attributs HTML 5
http://simon.html5.org/html5-elements
Pompage « HTML5 et l’avenir du web »
http://www.pompage.net/pompe/html5-et-le-futur-du-web
BBX Design « Introduction au HTML 5 »
http://bbxdesign.com/2009/06/08/introduction-au-html-5/
CSS3.info « Everything you need to know about CSS3 »
http://www.css3.info/
LIENS VERS DES SITES UTILES
PDF sur HTML5 et CSS3
Letstudio.fr
PDF succinct sur les nouveautés du CSS3.
http://www.letstudio.fr/documentation/nouveautes-CSS3.pdf
Developpez.com
Cours sur les sélecteurs CSS3
ftp://ftp-developpez.com/debray-jerome/articles/les-selecteurs-en-css3/les-selecteursen-css3.pdf
Smashingmagazine.com
HTML5 Cheatsheet
http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/html5cheat-sheet/html5-cheat-sheet.pdf
11

HTML-CSS, Format PDF

Transcription

Documents pareils

L3 info Techno Web Fiche html5 / css3 Exercice 1 Insérer une

Programme de formation creation site Internet HTML

WEB DESIGN - HTML CSS

Module de formation HTML / CSS - niveau 2

Télécharger CV pdf

Formation Web Adobe DREAMWEAVER PERFECTIONNEMENT

Offre stage

HTML 5, CSS 3, créer des sites Web riches

Concepteur/développeur web junior