docPremiers pas en CSS et HTML
download 
Plainte Transcription
Premiers pas en CSS et HTML
P O C H E S A C C È S L I B R E - P R E M I E R S P A S A V E C CS S 2 Dans le contenu d’une page web, chaque balise XHTML ou HTML représente un élément. Ces éléments sont toujours inclus à l’intérieur d’un autre, ne serait-ce que dans l’élément <body>. La hiérarchie entre ces éléments est importante à comprendre pour bien utiliser les feuilles de style. Rappels sur l’écriture des balises XHTML Le HTML, devenu maintenant XHTML, contient les éléments à afficher sous forme de textes entourés de différentes balises qui les caractérisent. Exemple d’élément (ici un titre de niveau 1) : <h1>Premier chapitre</h1> Normes existantes Les versions 2.0, 3.2, puis 4.0 du HTML ont été remplacées par le XHTML version 1.0, puis 1.1. Le XHTML 2 est en cours de conception. Le XHTML est une évolution du HTML dans laquelle la syntaxe est plus rigide, mais plus rigoureuse : cela simplifie beaucoup la maintenance des pages web. Les feuilles de style CSS 2 (Cascading Style Sheets) complètent cette norme. Règles d’écriture des balises Les normes XHTML nous demandent d’écrire les balises de la façon suivante : • Les balises s’écrivent en minuscules. • Chaque balise doit être refermée (sauf, en HTML, les balises seules comme le saut de ligne). • Les attributs des balises sont à écrire entre guillemets (ou entre cotes, c’est-à-dire entre apostrophes). Exemple : <img src="logo.gif" /> 10 © Groupe Eyrolles, 2005 2 – Structure du XHTML • S’il y a imbrication de balises, l’ordre doit être respecté pour leur fermeture. Exemple : <h1>...<em>...</em></h1> Fermeture des balises Notez qu’en XHTML, toutes les balises doivent être fermées. La barre de fermeture est intégrée aux balises seules, qui n’entourent pas de contenu : • <br /> au lieu de <br> • <hr /> au lieu de <hr> • <hr id="intro" /> au lieu de <hr id="intro"> • <img id="logo.gif" /> au lieu de <img id="logo.gif"> Principales balises XHTML Le XHTML n’a repris qu’une partie des balises HTML, les autres étant remplacées par des propriétés à écrire dans la feuille de style. Structure et balises d’en-tête Structure : html, head, body En-tête : title, meta, link, base Structure générale d’un document XHTML <!DOCTYPE ... > <html> <head> <title>Titre</title> ... </head> <body> ...contenu de la page... </body> </html> © Groupe Eyrolles, 2005 11 P O C H E S A C C È S L I B R E - P R E M I E R S P A S A V E C CS S 2 Principales balises de texte em : emphasis = accent ou insistance (mis en italique) strong : stronger emphasis = accent plus fort (mis en gras) h1, h2, h3, h4, h5, h6 : header = niveaux de titre 1 à 6 p : paragraphe br : break = saut de ligne div : divers = bloc de paragraphes liés pour leur mise en forme span : portée = ensemble de mots ayant une mise en forme commune Autres balises de texte q : quote = pour une courte citation (mis entre guillemets, sauf pour Internet Explorer 6 et 7) address : paragraphe constitué par une adresse (nouveau paragraphe, mis en italique) cite : citation au cours d’une phrase (en italique) dfn : définition d’un mot, en cours de phrase (en italique) var : nom d’une variable (en italique) code : extrait de code informatique (police Courrier) samp : exemple de code informatique (police Courrier) kbd : saisie au clavier (police Courrier) pre : préformaté (police Courrier, espaces et sauts de lignes affichés tels qu’ils sont notés) abbr : abréviation (pas de mise en forme) acronym : acronyme (pas de mise en forme) Liens hypertextes a : anchor = ancre (lien hypertexte) 12 © Groupe Eyrolles, 2005 2 – Structure du XHTML Listes ol : ordered list = liste numérotée ul : unordered list = liste sans numéros li : list item = élément de liste (qu’elle soit numérotée ou non) dl : definition list = liste de définitions dt : definition list term = un terme de la liste de définitions dd : definition list definition = une définition de la liste de définitions (asso- ciée à un terme) Formulaires form : formulaire textarea : zone de texte (pour la saisie) à plusieurs lignes input : entrée (zone de texte à une seule ligne, case à cocher, case d’option, bouton d’action) select : liste de choix option : élément de liste de choix optgroup : regroupement d’éléments de liste de choix label : étiquette pour liste de choix Figure 2–1 Exemple de formulaire © Groupe Eyrolles, 2005 13
