book

Premiers pas en CSS et HTML

by Francis Draillard

January 2012

Beginner to intermediate

488 pages

French

Eyrolles

Read now

Unlock full access

Signification de HTML et CSSPrincipes de base pour une page webChoix sensé des balises HTMLAdaptation aux navigateursAccessibilitéL’apparence, fonction du thème et du public concernéPolices de caractèresEn résumé, quelques sentiments liés aux couleursHomogénéité du sitePrincipes d’une bonne écriture HTML/CSS : donner du sens au codageTitre de pageMise en gras ou en italiqueListe de liens hypertextes (menu)Intérêt des feuilles de style
Principe des balisesÉvolution de la norme HTMLPremières règles d’écriture HTMLRègles pour les noms des fichiersRègles d’écriture des balises en HTML et XHTMLStructure d’une page HTMLEspaces, sauts de ligne et commentaires invisiblesPrincipales balises HTMLUn exemple pour commencerLes deux premières balisesEn-têteCorps de la pageParagraphes et titresMise en forme commune à une partie du textePrincipales mises en formeItalique et grasExposant et indiceAnnotations en petite taille de caractèresCitation avec retraitLiens hypertextesLes listesListes à puces ou numérotéesListes de définitionsTableauxCréation d’un tableau HTMLFusionner des cellulesInsertion d’imagesLa balise imageDimensionner une imageObjets multimédiasAnimation FlashVidéoSauts, lignes et caractères spéciauxFormulairesBalise formulaireRegroupement de parties de formulaireLes étiquettesZones de texte simplesZones de texte sur plusieurs lignesBoutons radio, à choix uniqueCases à cocherListes déroulantesBoutons d’effacement et d’envoiFichier d’envoi du formulaireUne page dans un cadreAutres balises de texteDeux catégories d’éléments : blocs et en ligne/niveau texteÉléments en ligne ou de niveau texteÉléments de type blocHiérarchie des éléments : l’héritageHiérarchie des blocs imbriqués et juxtaposésTermes hiérarchiques utilisés en HTML/CSSHéritage des propriétés de styleCompléments sur les balises d’en-têteBalise DOCTYPEBalise meta et codage en utf-8Autres balises d’en-têteValidation du code HTML
Orientations du HTML 5Évolution et compatibilitéUn en-tête simplifiéBlocs et sections en HTML 5Sections de base d’une pageSous-sections de type <div>Des détails sur demandeAttributs supplémentaires pour les blocsPersonnalisation des listes numérotéesÉléments déplaçables dans la pageDavantage de signification pour le texteNouvelles balises de texte HTML 5Surlignage de motsMesures comprises entre deux bornesDates et heuresLes balises <b>, <i> et <s> sont de retourCoupure des mots trop longsDe nouveaux attributs pour le texteContenus modifiablesLiens hypertextesImages, sons, vidéos et animationsImages, photos et figuresContenus audio et vidéoAnimations de type FlashImages dynamiquesLa balise canvasIndicateur de progressionContrôle précis des formulairesBalise formContrôle des balises inputNouveaux types d’entréesAttributs des balises inputNouvelles balises de formulaireListes d’options modifiablesAffichage du résultat d’un calculNouveaux attributs pour les éléments de formulaireRattachement à un autre élémentZones de saisie à plusieurs lignesÀ utiliser progressivement
Définition d’une règle de stylePrincipeExemple de règle de styleCommentairesEmplacement des stylesFeuille de style interneFeuille de style externeStyles en ligneSélecteurs de styleComme au théâtreSélecteur simpleClasseUne catégorie de balisesUne même classe pour plusieurs types de balisesIdentifiantIdentifiant sans nom de baliseDifférence entre classe et identifiantPseudo-classesPseudo-classes pour les liens hypertextesAutres pseudo-classesPseudo-élémentsRègle associée à plusieurs sélecteursRegroupement de propriétés à l’aide de « raccourcis »Hiérarchie des sélecteursHiérarchie précise des sélecteursImbrication directeJuxtapositionSélecteur d’attribut […]Sélecteur universel *Ordre de priorité des stylesRègle de style prioritaireDegré de priorité d’une règle de styleApplicationValeurs, tailles et couleursHéritage de propriétéUnités de tailleUnités de taille fixeUnités de taille relatives (conseillées)Tailles définies par mots-clésCodage des couleursNoms de couleursCode RVBCouleurs «sûres »Exemple de page avec feuille de style interne
Mise en forme des caractèresChoix des policesTaille de policeCouleur du texteTexte en grasItaliqueSoulignement et autres « décorations »Majuscules et minusculesPetites majusculesSurlignage de lettresDécalage vers le haut ou le basRaccourci pour la mise en forme de caractèresParagraphes et blocs de texteAlignement horizontal du texteRetrait de première ligneInterligne minimumEspacement entre les lettresEspacement entre les motsConservation des espaces et sauts de ligne saisisModification du curseur de la sourisAffichage automatique d’un contenuGuillemets à utiliserRéinitialisation d’un compteurIncrémentation d’un compteurSens de l’écritureÉcriture bidirectionnelleBorduresStyle de bordureStyles de bordure pour chaque côtéÉpaisseur de bordureÉpaisseur de bordure pour chaque côtéCouleur de bordureCouleur de bordure pour chaque côtéRaccourci pour toutes les propriétés de bordureRaccourci des propriétés de bordure pour chaque côtéContour superposé à un élémentImages et couleurs d’arrière-planCouleur d’arrière-planImage d’arrière-planRépétition ou non de l’image d’arrière-planAlignement de l’image d’arrière-planFixation de l’image d’arrière-planRaccourcis pour les arrière-plansListes à puces ou numérotéesType de puce ou de numérotationUtilisation d’une image comme pucePosition de la puceRaccourci pour toutes les propriétés de listeLes tableauxLargeur fixe ou variable des colonnes ou du tableauRecouvrement des borduresEspacement entre les bordures de cellulesContour des cellules videsPosition du titre du tableauAlignement sur la virguleAlignement vertical des cellules

Marges et dimensions d’un blocMarges externes autour d’un blocRaccourci pour les marges externesMarges internes d’un blocRaccourci pour les marges internesLargeur fixe pour un bloc ou une imageHauteur fixe pour un bloc ou une imageLargeur et hauteur totales d’un blocLargeur et hauteur minimalesLargeur et hauteur maximalesPosition des élémentsFlux normal des élémentsPrincipe du positionnement des blocsTypes de position possiblesPosition normalePosition relative, absolue ou fixePosition flottanteUtilisation des différents types de positionnementÉlément dans le flux (position normale)Position relativePosition absoluePosition fixeÉlément flottantType de positionnement d’un blocDécalages indiquant la position d’un blocNiveau d’empilement des blocsTransformation en bloc flottantPas d’éléments flottants sur le côtéAffichage ou non d’un élémentAffichage des débordementsZone visible d’une boîteChangement de type d’élémentDélimitation des blocsExemples de positionnementImage du haut (nuages)Image de l’arbre en position absolueSous-titre « En images » en position relativeCentrage horizontal du titreTitre latéral fixé sur l’écranPosition absolue pour la galerie d’imagesImages côte à côte en position flottanteCentrage d’éléments à l’intérieur des blocsCentrage horizontalCentrage horizontal d’éléments en ligneCentrage horizontal de blocsCentrage verticalCentrage vertical d’éléments en ligneCentrage vertical de blocsExemple de centrage vertical
Du relief pour nos pagesNouveaux types de sélecteursSélecteur de voisinageSélection sur les attributsAttribut existant ou ayant une valeur donnéeAttribut sélectionné sur une partie de son contenuAttribut commençant par…Attribut se terminant par…Attribut contenant…Pseudo-classesÉlément ou attribut différent de…Pseudo-classes pour les éléments de formulaireDistinction des éléments inclus dans un blocCodes couleurs et niveaux de transparenceNiveau d’opacitéCodage RGBA des couleursCodages HSL et HSLA des couleursDe nouveaux effets pour le texteStyle d’écritureÉtirement des caractèresUne police originale avec @font-faceOmbrage du textePrésentation et ergonomieApparence d’un élémentMarqueur de ligne tronquéeCoupure des mots trop longsDes bordures plus variéesNouvelles lignes d’encadrementDes images en guise de borduresEnfin, des coins arrondis !Des ombres pour nos boîtesEspacement pour encadrement doubleDimensions des blocsDimensions globales des blocsBlocs de dimensions modifiablesCouleurs et images de fondPlusieurs images d’arrière-planPlacement et étendue des images d’arrière-planFixation de l’image d’arrière-planDégradés de couleurDégradé linéaireDégradé radialDégradés répétitifsMulticolonnageNombre et largeur de colonnesEspacement des colonnesTrait de séparation des colonnesÉquilibrage des colonnesTitre sur plusieurs colonnesTransformations géométriquesPropriété de transformationFonctions de transformation 2DFonctions de transformation 3DLe Web s’anime en CSS 3Les transitionsLes animationsLes CSS 3 : bientôt et déjà !
Structure d’une page webCode HTML de baseCréer des pages de base à menu horizontal ou verticalPage de base avec menu horizontalPage de base avec menu verticalInsérer les images de fond de nos sitesUne grande image pour toute la pageSite contenant plusieurs images de fond
Les contraintes du Web mobileDes feuilles de style spécifiquesSélection en fonction du type d’écranUne sélection plus précise en CSS 3Syntaxe de sélection de médiaApplication aux navigateurs mobilesLes règles de conception pour mobilesAdaptation pratique d’un site pour le Web mobileAjouter une version pour mobile à un site existantAdaptation d’une page aux mobilesPage d’accueil et menu pour mobiles
Types de médiasMédia paginé : styles CSS 2 et CSS 3 pour l’impressionGestion des veuvesGestion des orphelinesSaut de page avantSaut de page aprèsCoupure par un saut de pageDimensions d’une pageSélecteur de pageRéférence à un type de pageParamétrage des imagesRotation d’imageOptions de remplissage de la page par une imagePositionnement d’une image sur la pageMédia sonore : fonctions audio CSS 3
Les 16 couleurs de baseCouleurs sûresListe de toutes les couleurs nommées
Test des pages sur plusieurs navigateursAdaptations pour les anciens navigateursBalises HTML conditionnellesRègles de style en fonction des navigateursRègles de style pour Internet Explorer 6 et versions antérieuresRègles de style pour Internet Explorer 7 seulPropriétés de styles affectées à un navigateurCompensation en JavaScriptInterprétation du HTML et des propriétés CSS 2Principaux défauts des anciennes versions d’Internet ExplorerProblèmes liés à Internet Explorer 6Problèmes liés à Internet Explorer 7Test complet des anciens navigateursInterprétation des propriétés CSS 3Nouveaux sélecteurs CSS 3Polices et couleursPropriétés CSS 3
Propriétés communes aux normes CSS 2 et CSS 3Propriétés d’affichagePrincipales propriétés spécifiques aux CSS 3Styles pour les médias paginés et sonoresMédia paginéMédia sonorePropriétés classées par catégoriesPropriétés communes aux CSS 2 et CSS 3Propriétés spécifiques aux CSS 3Médias paginés et sonores
BibliographieSites web utiles

Overview

Choisissez la simplicité et l'élégance du couple HTML et CSS
pour créer vos sites web avec style et panache !

Séparez mise en forme CSS et contenu HTML pour plus de simplicité et de souplesse ;
Changez sans peine la charte graphique de votre site ;
Apprenez à écrire une feuille de style CSS pour une présentation homogène ;
Comprenez le HTML : l'imbrication, la hiérarchie des éléments et balises ;
Enrichissez vos pages : mise en forme et alignement du texte et des images, marges et positionnement des blocs ;
Insérez des images, sons, vidéos et animations Flash ;
Spécifiez des styles destinés aux terminaux mobiles : Android, iPhone, Windows Phone...

Cette quatrième édition tient compte de l'évolution des standards (HTML 5 et CSS 3) et des navigateurs. Depuis les notions de base, elle vous conduit jusqu'à la mise en place d'un site complet, adapté aux écrans d'ordinateur comme aux smartphones, grâce à deux

En annexes : Codage des principales couleurs - Spécificités des navigateurs Mozilla Firefox, Internet Explorer, Chrome, Safari, Opéra - Aide-mémoire des propriétés CSS 2 et 3.

Au sommaire