XHTML & CSS PLAN. Ce COURS Intro. Ce COURS Intro. Gobelins

Transcription

1 PLAN XHTML & CSS Gobelins Isabelle Biamonti 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 Ce COURS Intro Ce COURS Intro Comprendre, avancer en groupe Aider chacun, selon le niveau Devenir des Concepteurs Réalisateurs MULTIMEDIA (et non print) Comprendre les contraintes Anticiper les besoins Préparer des maquettes prêtes à intégrer 1 TP en groupe à Pour identifier les attentes, et voir les différentes réponses possibles 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

2 1. LE WEB ET SES LANGAGES Intro 1. LE WEB ET SES LANGAGES Les apports de HTML 5 Il existe des millions de sites, et de nombreux navigateurs qui permettent de les visualiser. Cette technologie repose sur le langage HTML. 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. 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 créer des applications web Meilleure interaction avec javascript grâce aux WebApps 1.0 à développeurs Pour créer des formulaires pratiques sans avoir besoin de javascript Grâce aux WebForms 2.0 Pour ajouter un aspect sémantique aux balises Elles n auront plus seulement un aspect cosmétique 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 Fonctionnement 2. LE LANGAGE HTML Les balises Le HTML est un de «balisage» (de «structuration» ou de «marquage»). Il formalise l'écriture d'un document avec des balises de formatage. 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. 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. 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

3 2. LE LANGAGE HTML Les attributs 3. CRÉER UNE PAGE HTML Intro : le squelette 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. Si on ouvre, une balise de formulaire d image sur un éditeur, il propose automatiquement tous les attributs disponibles sur cette balise : La structure de base d une page HTML : 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 3. CRÉER UNE PAGE HTML Etape 1 : le doctype (ou Déclaration de Type de Document) 3. CRÉER UNE PAGE HTML Etape 1 : choix du doctype 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. 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»). Détails pour choisir correctement sa 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" " Depuis HTML5 : <!DOCTYPE html> 3

4 3. CRÉER UNE PAGE HTML Etape 2 : le header 3. CRÉER UNE PAGE HTML Etape 3 : le body 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. Exemple de header : <html xmlns=" 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> On va insérer du texte, et indiquer grâce aux balises XHTML de quoi il s'agit (titre, paragraphe, liste, image, lien, etc ) 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 : 3. CRÉER UNE PAGE HTML Etape 3 : le body 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=" 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

5 4. LIER LES PAGES HTML Lier les pages avec la balise <a> Rich Medias / CANVAS 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" 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 : Rich Medias / AUDIO Rich Medias / VIDEO Permet d insérer un fichier audio dans un document HTML5. Attention aux droits d auteurs Syntaxe : <audio src=«musique.mp3» autoplay loop controls></audio> ou <audio controls > <source src=«musique.mp3»> <source src=«musique.ogg»> </audio> MP3 (brevet) pour Safari, OGG pour Firefox, etc Exemples : Permet d insérer un fichier vidéo dans un document HTML5. Il fonctionne comme la balise audio. Attention aux droits d auteurs. Syntaxe : <video controls width=«300» height=«250» poster=«apercu.jpg»> <source src=«film.mp4» > <source src=«film.ogv»> </audio> MP4 (brevet), Theodora, etc Exemples :

6 Web Forms Web Forms 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=«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=«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 <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=« » 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. <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é. Balises pour spécifier la nature d un texte Balises pour structurer le contenu <mark></mark> - Pour montrer qu un texte a un intérêt à un moment donné (cf résultats recherche). <time datetime=«16:00»>16 h</time> - Pour que le navigateur puisse comprendre la date et/ou l heure. <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. <section></section> - Pour regrouper du contenu apparenté (div ne renseigne pas sur son contenu). <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 6

7 Intro Syntaxe CSS est un langage uniquement utilisé sur le web, en complément du langage HTML. HTML = le fond CSS = la forme 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. Voici la manière de formuler : un sélecteur, et un bloc de déclaration situé entre deux accolades. h1 à le (ou les) sélecteur(s) { color : #0000FF; margin : ; à 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 Les sélecteurs un identifiant (ne peut être utilisé qu'une seule fois par page html) à #moncadre { } 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 Exemples : #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

8 3 sélecteurs spécifiques CSS3 [attr^="stringvalue"] à p.example[title^="ess" ] { color:#0000ff; } à Sélectionne un élément DOM dont l'attribut "attr" commence exactement par la valeur "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> [attr$="stringvalue"] à p.example2[title$="sai"] { color:#ff0000; } à 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> Les pseudo-classes (liste non exhaustive) spécifiques CSS3 :root à Elément qui est la racine d un document :nth-child(expression) à 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) à 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. :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. 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 3 e élément. form input[type="text"] { width: 400px; } à On s adresse uniquement aux inputs de type texte 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 Quelques exemples ci-contre. 8

9 Les déclarations (liste non exhaustive) border-radius: 10px; ou border-radius: 5px 10px 0 5px; à Ce code créera un ou des angles arrondis background-color: rgba(0, 0, 255, 0.5); à Ce code prend en charge l alpha background-image: url("img1.jpg"), url("img2.jpg"); à On peut multiplier avoir plusieurs images de fond -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 Les déclarations (liste non exhaustive) box-shadow: 8px 8px 0 #aaa; et text-shadow: 0px 0px 9px #777; à Ce code appliquera une ombre portée, sur une boite / sur un texte { font-family: Calibri; src: local("calibri"), url("fonts/calibri.ttf") format("truetype"); font-weight: normal; font-style: normal; } à Ce code permettra d insérer des typos (Attention aux droits d auteurs et à la taille du fichier) background: -moz-radial-gradient(#ff0000, #0000FF); à Ce code créera un dégradé radial du rouge au bleu transition-property: color, width; transition-duration: 5s; à Ce code prépare une transistion 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. Précisions sur le positionnement 1 e é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. 2 e é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 Positionnement en fonction de son ordre d'arrivée. Valeur défaut. Absolute Positionnement par rapport aux bords de page, défile avec la page. Fixed Positionnement par rapport aux bords de page, sans défilement. Relative Positionnement par rapport à l'élément précédent. Inherit Même valeur que celle de l'élément parent. 9

10 Précisions sur le positionnement Appeler une feuille de style dans une page HTML Puis on définit les marges - marges à l intérieur du bloc : padding - marges autour du bloc : margin div#contenu { position : absolute; margin : 30px 0px 30px 0px; padding : 0; } 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. Enfin on définit tous les détails : couleurs, tailles, typos, etc Dans le header de la page web, deux façons de faire : <link rel="stylesheet" type="text/css" href="style/monstyle.css" /> <style title="currentstyle" "monstyle.css"; </style> 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. Exemple : <link rel="stylesheet" type="text/css" media="print" href="monstyle.css"> à Ce style ne sera appliqué que lors de l'impression. 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 Qu est-ce que le W3C? A quoi sert-il? 8. AFFICHAGE SUR LES DIFFÉRENTS NAVIGATEURS Que faire si le rendu du site diffère selon le navigateur? W3C est un Organisme de normalisation. Il émet des recommandations à valeur de standard industriel. 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 : Ou grâce à des modules à installer dans Firefox. (Détails dans cours pdf) Option 1 : utiliser les commentaires conditionnels (mécanisme valide).        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

11 SITES UTILISANT LA TECHNO HTML5/CSS3 Exemples d utilisation LIENS VERS DES SITES UTILES Articles sur HTML5 et CSS3 HTML5 Demos HTML5 Gallery BD utilisant des parallaxes Zurb. Boutons entièrement CSS3, pas d image Alsacréations «HTML 5 se dévoile»,«ce que nous réserve CSS3 en 2010» et «Osez HTML5 et CSS3» Liste des éléments et attributs HTML 5 Pompage «HTML5 et l avenir du web» BBX Design «Introduction au HTML 5» CSS3.info «Everything you need to know about CSS3» LIENS VERS DES SITES UTILES PDF sur HTML5 et CSS3 Letstudio.fr PDF succinct sur les nouveautés du CSS3. 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 cheat-sheet/html5-cheat-sheet.pdf 11