Introduction ` la conception de sites web                aFormation de 12h donn´e ` l’ENS Lyon entre 2011 et 2013         ...
Sommaire 1   Introduction         Fonctionnement d’Internet         Les langages XHTML et CSS 2   Premiers ´l´ments de XHT...
Introduction   Pr´sentation du cours                                              ePourquoi XHTML/CSS ?Clart´ dans la conc...
Introduction   Pr´sentation du cours                                              eObjectif du coursLes outils pour r´alis...
Introduction   Pr´sentation du cours                                              eQuestions pr´miminaires            e   ...
Introduction   Pr´sentation du cours                                             eCycle de conception d’un site internet  ...
Introduction   InternetFonctionnement : l’Internet, un monde norm´                                          e 1   Protocol...
Introduction   InternetLes protocoles de la pile TCP/IPUn mod`le indicatif des protocoles composant la famille TCP/IP dans...
Introduction   InternetEncapsulation de l’information lors de sa descente de la pileSource : https ://en.wikipedia.org/wik...
Introduction   InternetDeux protocoles de transfert utilis´s ici                                   eHTTP (HyperText Transf...
Introduction   InternetHTTPSHTTPS ⇒ combinaison de HTTP avec une couche de chiffrement.Fonctionne grˆce ` un certificat d’au...
Introduction   InternetL’h´bergement   eEn pratique :    Fichiers stock´s sur un serveur connect´ ` internet              ...
Introduction   InternetLe navigateurLe moteur de renduPermet d’afficher les ´l´ments d’une page Web                      eeP...
Introduction   Les langagesUn binˆme      oDeux langages de mise en forme, un travail compl´mentaire :                    ...
Introduction   Les langagesXHTML : un langage de description formelle de document´Ecriture dans un ´diteur de texte :     ...
Introduction   Les langagesParent´      eInscription dans la    famille       des langages de description formelle    Ordo...
Introduction   Les langagesHistorique : le HTMLHypertext Markup LanguageLangage de balisage qui permet d’´crire de l’hyper...
Introduction   Les langages´Etat des lieux : XHTML et CSSXHTMLeXtensible HyperText Markup Language, dit XHTML, est un lang...
Introduction   Les langagesLes standardsLe W3CWorld Wide Web ConsortiumOrganisme de standardisation ` but non-lucratif    ...
Introduction   Les langagesWeb statique et web dynamique Web statique                               Web dynamique     Cont...
Structure XHTML   BalisesLes balisesSyntaxe<balise>Texte affect´ par la balise</balise>                   e<balise-seule/><...
Structure XHTML   EssentielStructure d’un document XHTMLPour ˆtre valide, un document XHTML doit respecter la structure   ...
Structure XHTML   EssentielStructure d’un document XHTMLPour ˆtre valide, un document XHTML doit respecter la structure   ...
Structure XHTML   EssentielMinimum requisCf fichier modele 1.html    Encodage du texte source (souvent utf-8 ou iso-8859-1)...
Structure XHTML   EssentielExerciceTravail sur l’´diteur, consultation du r´sultat dans le navigateur              e      ...
Structure XHTML   Mise en formeLes titresHi´rarchie  eIl est possible d’introduire six niveaux de hi´rarchie dans les titr...
Structure XHTML   Mise en formeLignesRetours ` la ligne        aPeu importe le nombre de lignes saut´es dans le fichier sou...
Structure XHTML   Mise en formeParagraphesD´limitation eLe marquage d’un d´but de paragraphe se fait avec la balise <p>   ...
Structure XHTML   Mise en formeMise en forme du texteIl est possible de marquer du texte pour qu’il apparaisse en gras ou ...
Structure XHTML   Mise en formeListesDeux types diff´rents              e     liste simple : ul     liste num´rot´e : ol   ...
Structure XHTML   LiensArborescence et chemins d’acc`s                             eDescriptionLes fichier stock´s dans le ...
Structure XHTML   LiensR´alisation de liens e´eEl´ment et attributLes liens sont un ´l´ment qui comporte au moins un attri...
Structure XHTML   LiensLiens vers des fichiersLiens relatifsLes fichiers peuvent ˆtre stock´s localement.                   ...
Structure XHTML   R´visions et remarques                                            eEncodageCf fichier mod`le             ...
Structure XHTML   R´visions et remarques                                               eDeux validations diff´rentes       ...
Structure XHTML   R´visions et remarques                                            eNotion d’arborescence IPrincipeChaque...
Structure XHTML   R´visions et remarques                                           eNotion d’arborescence IIExempleC:Windo...
Structure XHTML   Signes r´serv´s                                                     e    eSignes r´serv´s en XHTML      ...
Structure XHTML   Signes r´serv´s                                                    e    eInsertion de commentairesIl est...
CSS   IntroductionCSS, un bref historique (I)D´veloppement eLes sp´cifications CSS sont d´velopp´es par      e             ...
CSS   IntroductionCSS, un bref historique (II)VersionsSp´cification CSS1 finale publi´e le 17 d´cembre 1996, d´finit une   e ...
CSS   IntroductionStandards et pratiques : un comparatifUn comparatif des diff´rents moteurs d’affichage est tenu ` jour sur ...
CSS   BasesUne affaire d’h´ritages              ePrincipecascading ⇒ les caract´ristiques de pr´sentation se propagent     ...
CSS   BasesIncorporation dans un documentIl y a deux possibilit´s pour mettre en forme un document par une feuille        ...
CSS   SyntaxeSyntaxe des ´l´ments            eeChaque ´l´ment de la feuille de style ob´it ` cette syntaxe :       ee     ...
CSS   SyntaxeExemple de syntaxeFichier .csss´lecteur1 { e    propri´t´1 : valeur1 ;          ee    propri´t´2 : valeur2 ; ...
CSS    Style du texteChanger le style du textePropri´t´s et valeurs      ee   font-style italic, oblique ou normal font-we...
CSS   Style du texteFontesLes fontes se changent par la propri´t´ font-family:                                    eeExempl...
CSS   Style du texteFontesValeursLe CSS d´finit des familles g´n´riques : serif, sans-serif, monospace,          e         ...
CSS   Style du texteFontesExemplesfont-family : Times New Roman, Times, serif ;oufont-family : Georgia, Palatino, Garamond...
CSS   Style du texteTaille des caract`res                 eLa taille se change par la propri´t´ font-size:                ...
CSS   Style du texteAlignement du texteAlignement → propri´t´ text-align:                   eeValeurs     left (souvent pa...
CSS   Style du texteExercice⇒ Essayez ` pr´sent de changer l’apparence des titres (style, police de            a ecaract`r...
CSS   ClassesClasses d’´l´ments          eePour personnaliser le style des ´l´ments HTML, il est possible de leur         ...
CSS   ClassesExemple                                    Fichier .css  Fichier .html                                       ...
CSS   ClassesStyle g´n´rique       e eLe HTML fournit deux ´l´ments, <div> au niveau bloc et <span> au                    ...
ExerciceExercice de synth`se                 eR´alisez 3 documents XHTML dont le style est r´gi par le mˆme fichier .css e ...
RappelsR´visions : XHTML et CSS eLa mani`re la plus simple pour cr´er un ensemble de pages web est de         e           ...
RappelsR´visions : exemple ePour r´aliser deux types de paragraphes diff´rents :      e                                    ...
CouleursCouleursCouleur du texte → propri´t´ color                         ee3 formats diff´rents             ePrenons l’ex...
CouleursUtilisation              Exemple 1 : les titres              h1 {              color : orange ;              }    ...
CouleursPour en savoir plus    Liste des 147 noms de couleurs reconnus par HTML et CSS :    http://www.w3schools.com/cssre...
Couleurs   ExerciceAjouts ` l’exercice de synth`se       a                    eR´alisez 3 documents XHTML dont le style es...
Insertion d’imagesInsertion d’imagesPr´requis  ePour ˆtre valide, la balise <img> doit comporter au moins ces deux      ea...
Insertion d’imagesInsertion d’images : ExemplesImage stock´e localement           e<img src=”montagne.jpg” alt=”paysage de...
Insertion d’imagesRedimensionner les imagesAttributs      width largeur (en pixels par d´faut)                            ...
Insertion d’imagesExerciceAffichez une image qui est ´galement un lien.                         e(Indice : au sens strict il...
Mise en ligneMise en ligne des fichiersCr´ation d’un espace  eAfin d’avoir un endroit o` d´poser ses fichiers il faut cr´er u...
Bordures et placement en CSS   BorduresBordures en CSSDessiner un cadreborder-style obligatoire : solid (ligne), dotted (e...
Bordures et placement en CSS   BorduresBordure d’un seul cˆt´                   oeParam`tres     eIl y a 4 indications pou...
Bordures et placement en CSS   BorduresRaccourciForme br`ve        eIl est possible de simplifier la d´finition du cadre en ...
R´visions                                eCode source des pagesAfficher la sourceIl est possible d’afficher le code source d’u...
R´visions                                eFichiersNomsAttention ` ce que les fichiers XHTML soient bien enregistr´s au form...
R´visions                                eMettre des fichiers en ligneUtilisation d’un client FTP    Il faut en g´n´ral une...
R´visions                                eExistence d’un site sur internetR´f´rencement et visiteurs ee    L’op´ration qui...
XHTML   ListesRappel : listesDeux types diff´rents              e     liste simple : ul     liste num´rot´e : ol           ...
XHTML   ListesListes descriptives (lexiques)Les ´l´ments dl, dt et dd    ee          dl (definition list) encadre le conten...
XHTML   TableauxTableauxBalises          table d´finit l’ensemble du tableau                 e            th (table header ...
XHTML   TableauxTitre du tableauCaptionLa balise caption se place ` l’int´rieur du tableau.                           a   ...
CSS   BorduresR´visions : bordures en CSS eDessiner un cadre border-style obligatoire : solid (ligne), dotted (en pointill...
CSS   Style des tableauxD´limitation des tableaux et des cellules e            Bordure            table, th, td           ...
CSS   Style des tableauxTaille et style des cellules   XHTML                                             CSS   <table>    ...
CSS   Unit´s                                      eUnit´s de mesure absolues    e           Unit´e       Nom en CSS       ...
CSS   Unit´s                                         eUnit´s de mesure relatives    e        Unit´            e   Descript...
CSS    Boˆ                                           ıtesR´glage de la taille eParam`tres     eDeux moyens de modifier la t...
CSS   FlottantsPositionner deux ´l´ments l’un ` cˆt´ de l’autre                 ee            a oeLes flottantsPour permett...
CSS   FlottantsExample avec trois parties   XHTML                               CSS   <p>                                 ...
CSS   FlottantsParam`tres des boˆ     e           ıtesimage disponible ` l’adresse suivante :                 ahttp://www....
CSS   FlottantsExample : deux blocs                                       Sur la droite   Sur la gauche                   ...
CSS   FlottantsExample 2 : texte d´coll´ du cadre                   e e   Sur la gauche                       Sur la droit...
Propri´t´s des liens                               ee               AncresCr´er des liens ` l’int´rieur d’une mˆme page : ...
Propri´t´s des liens                               ee               CiblesD´finir la fenˆtre cible d’un lien e           e ...
Propri´t´s des liens                                  ee               D´coration en CSS                                  ...
Arri`re-plan                                eArri`re plan en CSS    eCouleur de l’arri`re plan                 e    backgr...
Listes / Menus   FormatFormat des listes                     → Propri´t´ list-style-type                             eeNum...
Listes / Menus   MenuCr´ation d’un menu  eNous allons cr´er un menu simple en utilisant les ´l´ments de XHTML et          ...
InformationsPr´sentation r´alis´e avec LTEX Beamer  e           e e          AAuteur : Adrien BarbaresiDocument sous licen...
Prochain SlideShare
Chargement dans…5
×

Cours d’introduction à la conception de sites web (CSS-XHTML)

7 539 vues

Publié le

Sommaire :
1. Introduction
⋅ Fonctionnement d’Internet
⋅ Les langages XHTML et CSS
2. Premiers éléments de XHTML
⋅ Structure d’un document
⋅ Mise en forme du texte
⋅ Liens, remarques et signes réservés
3. Premiers éléments de CSS
⋅ Syntaxe, style du texte et classes
4. Couleurs
5. Insertion d’images
6. Mise en ligne
7. Mise en page avancée
⋅ Bordures
⋅ Listes et tableaux
⋅ Boîtes et flottants
⋅ Propriétés des liens
⋅ Listes et menus

Publié dans : Formation
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
7 539
Sur SlideShare
0
Issues des intégrations
0
Intégrations
65
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Cours d’introduction à la conception de sites web (CSS-XHTML)

  1. 1. Introduction ` la conception de sites web aFormation de 12h donn´e ` l’ENS Lyon entre 2011 et 2013 e a Adrien Barbaresi 1 / 97
  2. 2. Sommaire 1 Introduction Fonctionnement d’Internet Les langages XHTML et CSS 2 Premiers ´l´ments de XHTML ee Structure d’un document Mise en forme du texte Liens, remarques et signes r´serv´s e e 3 Premiers ´l´ments de CSS ee Syntaxe, style du texte et classes 4 Couleurs 5 Insertion d’images 6 Mise en ligne 7 Mise en page avanc´e e Bordures Listes et tableaux Boˆ et flottants ıtes Propri´t´s des liens ee Listes et menus 2 / 97
  3. 3. Introduction Pr´sentation du cours ePourquoi XHTML/CSS ?Clart´ dans la conception eGestion du contenu (XHTML) s´par´e de la gestion de la forme (CSS) e eUne combinaison ´prouv´e (plus de 10 ans d’existence) e eAjout r´gulier de nouvelles fonctions ePolyvalent et utilisable partoutLa m´thode n’est pas tout eR´aliser un site internet ne se r´sume pas ` cela e e aDes adaptations sont parfois n´cessaires e 3 / 97
  4. 4. Introduction Pr´sentation du cours eObjectif du coursLes outils pour r´aliser des sites internet sont nombreux et en constante e´volution.eIl s’agit d’acqu´rir un socle de connaissances qui pourra resservir : e Le langage HTML est pr´sent au cœur du web et de ses outils e La mise en forme via CSS fait quasiment l’unanimit´ e Le tandem XHTML/CSS permet de r´aliser une pr´sentation soign´e e e e La mise en ligne des fichiers se fait tr`s souvent de la mˆme mani`re e e e 4 / 97
  5. 5. Introduction Pr´sentation du cours eQuestions pr´miminaires e Un site, pour quoi faire ? (professionnel / personnel) Quel contenu ? fixe ou fr´quentes mises ` jour ? e a Pour quel public ?Les r´ponses peuvent amener ` faire certains choix lors de la r´alisation. e a e 5 / 97
  6. 6. Introduction Pr´sentation du cours eCycle de conception d’un site internet Analyse de l’existant Conception Impl´mentation e D´ploiement e Diffusion⇒ D´finir un cahier des charges pour la validation de l’unit´ du C2i2e. e e 6 / 97
  7. 7. Introduction InternetFonctionnement : l’Internet, un monde norm´ e 1 Protocoles d’´change d’informations e 2 H´bergement et adresses e 3 Rˆle du navigateur o 7 / 97
  8. 8. Introduction InternetLes protocoles de la pile TCP/IPUn mod`le indicatif des protocoles composant la famille TCP/IP dans le emod`le OSI de l’ISO : e ´ Etape Exemples de protocoles 7 Application HTTP, HTTPS, SMTP, FTP 6 Pr´sentation e ... 5 Session SOCKS, NFS 4 Transport TCP, UDP 3 R´seau e IPv4, IPv6, IPSec, ICMP 2 Liaison Ethernet, Wi-Fi, Bluetooth, irDA 1 Physique ... 8 / 97
  9. 9. Introduction InternetEncapsulation de l’information lors de sa descente de la pileSource : https ://en.wikipedia.org/wiki/File :UDP encapsulation.svg 9 / 97
  10. 10. Introduction InternetDeux protocoles de transfert utilis´s ici eHTTP (HyperText Transfer Protocol)Protocole de communication client-serveur d´velopp´ pour le e eWorld Wide Web.Clients HTTP les plus connus : les navigateurs Web, qui permettent ` aun utilisateur d’acc´der ` un serveur contenant les donn´es. e a eIl existe aussi des syst`mes pour r´cup´rer automatiquement le contenu e e ed’un site (aspirateurs, robots d’indexation, etc.).FTPProtocole de communication destin´ ` l’´change informatique de ea efichiers sur un r´seau TCP/IP. e´Egalement mod`le client-serveur. eSouvent utilis´ pour la mise en ligne de contenu. e 10 / 97
  11. 11. Introduction InternetHTTPSHTTPS ⇒ combinaison de HTTP avec une couche de chiffrement.Fonctionne grˆce ` un certificat d’authentification ´mis par une autorit´ a a e etierce r´put´e fiable. e eGarantit th´oriquement la confidentialit´ et l’int´grit´ des donn´es e e e e eenvoy´es et re¸ues. e cSoit dans la pile TCP/IP (simplifi´e) : e Application HTTP Transport TCP + SSL/TLS R´seau e IPv4 / IPv6 Acc`s e Ethernet, Wifi, ... 11 / 97
  12. 12. Introduction InternetL’h´bergement eEn pratique : Fichiers stock´s sur un serveur connect´ ` internet e ea Souvent : un compte utilisateur, des logiciels sp´cifiques e Donn´es accessibles ` une certaine adresse e a (via des serveurs sp´cifiques) e 12 / 97
  13. 13. Introduction InternetLe navigateurLe moteur de renduPermet d’afficher les ´l´ments d’une page Web eePlusieurs moteurs de rendu HTML : Gecko (Mozilla), KHTML (Linux) etWebkit (Apple), Trident (Microsoft), Presto (Opera), etc.En th´orie des normes, mais en pratique une certaine variabilit´ dans e el’affichage...Les ressources annexesContenus sp´cifiques affich´s par des plugins (audio, vid´o, animations) e e eD´pend de la configuration de l’utilisateur, de l’installation et de la mise ` e ajour de certains logiciels 13 / 97
  14. 14. Introduction Les langagesUn binˆme oDeux langages de mise en forme, un travail compl´mentaire : ele fichier XHTML (.html) appelle un fichier CSS (.css)AvantagesChanger l’apparence de tout un site facilement (pr´sentation uniforme) eOu changer le contenu sans se soucier de la pr´sentation eCode plus l´ger, meilleure visibilit´ e e 14 / 97
  15. 15. Introduction Les langagesXHTML : un langage de description formelle de document´Ecriture dans un ´diteur de texte : e un bloc-notes peut suffire texte brut augment´ de balises (balisage logique) e introduit par des caract`res sp´ciaux e e le r´sultat : un fichier .html affichable par un navigateur e 15 / 97
  16. 16. Introduction Les langagesParent´ eInscription dans la famille des langages de description formelle Ordonner et structurer des informations Permettre une lecture par les machines Mais aussi une lecture humaine Forte redondanceQuelques membres de la famille A LTEX XML (h´ritier de SGML) e feuilles de style (XSLT) MediaWiki et autres 16 / 97
  17. 17. Introduction Les langagesHistorique : le HTMLHypertext Markup LanguageLangage de balisage qui permet d’´crire de l’hypertexte ePr´sent d`s le d´but du web, depuis le d´but des ann´es 90 e e e e eAdaptation d’un langage d´j` existant (SGML) pour r´pondre en ea eparticulier ` ces besoins : a structurer s´mantiquement et mettre en forme le contenu des pages e inclure des ressources multim´dias dont des images, des formulaires e de saisie, et des ´l´ments programmables eeStandard actuelHTML 4 date de 1997. HTML 5 est de plus en plus r´pandu. e 17 / 97
  18. 18. Introduction Les langages´Etat des lieux : XHTML et CSSXHTMLeXtensible HyperText Markup Language, dit XHTML, est un langage debalisage servant ` ´crire des pages pour le World Wide Web. ae Con¸u ` l’origine comme le successeur d’HTML c a Reformulation de HTML, syntaxe plus stricteCSSCascading Style Sheets : feuilles de style en cascade⇒ D´crire la pr´sentation e eCascade : diff´rents styles adapt´s ` la configuration de l’utilisateur et ` e e a al’architecture des documentsFormatage du document par cat´gories, blocs de r`gles e e 18 / 97
  19. 19. Introduction Les langagesLes standardsLe W3CWorld Wide Web ConsortiumOrganisme de standardisation ` but non-lucratif aStandards pour XHTML (stable) et CSS (3`me version en cours de ed´veloppement) eValidation du codePossibilit´ de faire valider son code pour savoir s’il est compatible e(L’existence d’un standard n’implique pas qu’il soit toujours appliqu´) ehttp ://validator.w3.org/ 19 / 97
  20. 20. Introduction Les langagesWeb statique et web dynamique Web statique Web dynamique Contenu fix´ d’avance e Contenu inject´ ` chaque ea Le serveur HTTP renvoie un consultation fichier Le serveur HTTP transmet ´ Evolution lente (ne change des requˆtes dont il recueille e que par une intervention les r´sultats e humaine) Toujours diff´rent, peut e changer en fonction du contexte et de l’utilisateur 20 / 97
  21. 21. Structure XHTML BalisesLes balisesSyntaxe<balise>Texte affect´ par la balise</balise> e<balise-seule/><balise attribut=”texte de l’attribut”>Texte affect´</balise> eExemples<i>Texte en italique</i><br/> (Retour ` la ligne) a<a href=”http ://www.ens-lyon.fr/”>Lien vers l’ENS Lyon</a> 21 / 97
  22. 22. Structure XHTML EssentielStructure d’un document XHTMLPour ˆtre valide, un document XHTML doit respecter la structure esuivante : 1 D´claration de type de document e 2 Marqueur de d´but de document (ou ´l´ment racine) e ee 3 Marqueur de d´but d’en-tˆte e e 4 Champ titre 5 Marqueur de fin d’en-tˆte e 6 Corps du document 7 Marqueur de fin de document 22 / 97
  23. 23. Structure XHTML EssentielStructure d’un document XHTMLPour ˆtre valide, un document XHTML doit respecter la structure esuivante : 1 DTD : < !DOCTYPE html PUBLIC Formal Public Identifier System Identifier > 2 Marqueur de d´but de document : <html> e 3 Marqueur de d´but d’en-tˆte : <head> e e 4 Champ titre : <title></title> 5 Marqueur de fin d’en-tˆte : </head> e 6 Corps du document : <body></body> 7 Marqueur de fin de document : </html> 23 / 97
  24. 24. Structure XHTML EssentielMinimum requisCf fichier modele 1.html Encodage du texte source (souvent utf-8 ou iso-8859-1) DTD En-tˆte comprenant les balises de titre (mˆme sans titre) e e Corps de document Fin de document 24 / 97
  25. 25. Structure XHTML EssentielExerciceTravail sur l’´diteur, consultation du r´sultat dans le navigateur e e Texte entre les balises de titre Texte dans le corps de document Espaces dans les balises Espaces dans le texte 25 / 97
  26. 26. Structure XHTML Mise en formeLes titresHi´rarchie eIl est possible d’introduire six niveaux de hi´rarchie dans les titres. eLes balises de d´but et de fin s’ouvrent et se ferment toujours de la mˆme e emani`re. ePar d´faut les titres ont un certain style, qui peut ˆtre modifi´ par le e e efichier CSS.Exemple<h1>Titre principal</h1><h3>Titre secondaire</h3><h6>Titre de paragraphe</h6> 26 / 97
  27. 27. Structure XHTML Mise en formeLignesRetours ` la ligne aPeu importe le nombre de lignes saut´es dans le fichier source, le eretour ` la ligne ne se fait que par la balise : a <br />On peut la placer plusieurs fois de suite pour cr´er un plus grand espace evertical.Cela dit la gestion de l’espacement se fait plutˆt par des param`tres de o estyle. 27 / 97
  28. 28. Structure XHTML Mise en formeParagraphesD´limitation eLe marquage d’un d´but de paragraphe se fait avec la balise <p> eLa fin est marqu´e par </p> e Exemple <p> Ceci est un paragraphe. R´sultat e </p> Ceci est un paragraphe. <p> En voici un autre. En voici un autre. </p> 28 / 97
  29. 29. Structure XHTML Mise en formeMise en forme du texteIl est possible de marquer du texte pour qu’il apparaisse en gras ou enitalique.NB : quelque soit l’´l´ment, il faut qu’il soit ´crit en minuscules pour ˆtre ee e evalide. Exemple R´sultat e Text normal et <b>mots en Text normal et mots en gras. gras</b>.<br/> Texte en italique. <i>Texte en italique.</i> 29 / 97
  30. 30. Structure XHTML Mise en formeListesDeux types diff´rents e liste simple : ul liste num´rot´e : ol e eLes lignes sont toujours d´limit´es par la balise li e e Exemple : liste simple <ul> <li>texte de la premi`re e R´sultat e ligne</li> texte de la premi`re ligne e <li>texte de la seconde texte de la seconde ligne ligne</li> </ul> 30 / 97
  31. 31. Structure XHTML LiensArborescence et chemins d’acc`s eDescriptionLes fichier stock´s dans le disque dur d’un ordinateur sont repr´sent´s par e e eune arborescence.Elle compte un ´l´ment racine, des r´pertoires et des fichiers. ee eExample : lien localC :/Mes documents/Mes photos/image.jpgRacine et chemin d’acc`s jusqu’au fichier. eExemple : adresses internethttp ://www.ens-lyon.fr/http ://perso.ens-lyon.fr/adrien.barbaresi/cours/ 31 / 97
  32. 32. Structure XHTML LiensR´alisation de liens e´eEl´ment et attributLes liens sont un ´l´ment qui comporte au moins un attribut : ee<a>texte du lien</a>(marquage pr´sent mais lien inop´rant) e eSyntaxe de l’attribut : au sein de la balisehref=”adresse”Exemple<a href=”http ://www.ens-lyon.fr/”>ENS Lyon</a> 32 / 97
  33. 33. Structure XHTML LiensLiens vers des fichiersLiens relatifsLes fichiers peuvent ˆtre stock´s localement. e eOn passe alors par le chemin d’acc`s local d’apr`s la position du fichier e ehtml.On parle de lien relatif.Exemple<a href=”fichier.pdf”>voir fichier PDF</a><a href=”images/photo1.jpg”>cf photo num´ro 1</a> e 33 / 97
  34. 34. Structure XHTML R´visions et remarques eEncodageCf fichier mod`le e utf-8 (format appel´ ` ˆtre le standard) eae iso-8859-1 (ordinateurs Windows voire Mac r´cents) e windows-1252 (ordinateurs Windows de la salle)Indication dans l’en-tˆte (obligatoire pour que le texte s’affiche ecorrectement)<meta http-equiv=”Content-Type” content=”text/html ;charset=windows-1252” /> 34 / 97
  35. 35. Structure XHTML R´visions et remarques eDeux validations diff´rentes eLe W3CSi le r´sultat attendu s’affiche dans le navigateur, cela n’implique pas en´cessairement que tout le code soit valide. eDe la mˆme mani`re, un code peut ˆtre valide mais ne pas s’afficher e e econform´ment aux attentes. eRappel : validation du codehttp ://validator.w3.org/ 35 / 97
  36. 36. Structure XHTML R´visions et remarques eNotion d’arborescence IPrincipeChaque fichier ou r´pertoire est r´f´renc´ par un autre r´pertoire, ce e ee e equi forme une hi´rarchie coh´rente, appel´e aussi arborescence, dont le e e epoint d’entr´e est le r´pertoire racine. e eLa racine est unique.Par exemple, sur une partition Windows la racine est souvent C :Pour les syst`mes Windows, le s´parateur est un antislash. e eDans les pages HTML en revanche c’est un slash. 36 / 97
  37. 37. Structure XHTML R´visions et remarques eNotion d’arborescence IIExempleC:Windowssystem32avifile.dllLe fichier avifile.dll se trouve donc dans le r´pertoire system32, qui elui-mˆme se trouve dans le r´pertoire Windows, lui-mˆme se trouvant ` la e e e aracine du syst`me de fichiers C: eOn dit que Windows est le r´pertoire parent de system32. eOn dit de C:windowssystem32 que c’est un chemin absolu carc’est une r´f´rence qui ne tient pas compte de la position pr´c´dente. ee e ePar contre, system32 est un chemin relatif : cette r´f´rence suppose eeque le r´pertoire courant est C:Windows. e 37 / 97
  38. 38. Structure XHTML Signes r´serv´s e eSignes r´serv´s en XHTML e eFonctionnementCertains signes ne peuvent pas ˆtre ´crits tels quels car ils sont utilis´s par e e ele langage XHTML.Il faut alors passer par une formulation alternative.Liste < &lt ; > &gt ; ” &quot ; ’ &apos ; & &amp ; 38 / 97
  39. 39. Structure XHTML Signes r´serv´s e eInsertion de commentairesIl est possible d’ins´rer dans le fichier des lignes qui ne seront pas affich´es. e eCela permet de d´crire ce que l’on a mis en place, de dresser une liste des echoses restant ` faire, etc. aLes commentaires sont toujours introduits de la mˆme mani`re. e eExemple< !- - commentairesur plusieurs lignes- -> 39 / 97
  40. 40. CSS IntroductionCSS, un bref historique (I)D´veloppement eLes sp´cifications CSS sont d´velopp´es par e e e niveaux .Chaque nouveau niveau doit int´grer le pr´c´dent, et chaque e e eimpl´mentation doit ˆtre compatible avec la pr´c´dente. e e e eLe r´sultat : une mise en place fastidieuse qui n’est toujours pas achev´e. e e 40 / 97
  41. 41. CSS IntroductionCSS, un bref historique (II)VersionsSp´cification CSS1 finale publi´e le 17 d´cembre 1996, d´finit une e e e ecinquantaine de propri´t´s. eeSecond niveau de CSS publi´ en tant que recommandation en mai e1998 – ´tend consid´rablement les possibilit´s th´oriques avec environ 70 e e e epropri´t´s suppl´mentaires. ee eRetours d’impl´mentation de CSS2 → le groupe de travail CSS du W3C er´dige ` partir de 2001 une version r´vis´e CSS 2.1 sur la base de ce qui e a e e´tait effectivement adopt´ par les diff´rents navigateurs.e e eCSS 3 n’est que tr`s partiellement standardis´. e e 41 / 97
  42. 42. CSS IntroductionStandards et pratiques : un comparatifUn comparatif des diff´rents moteurs d’affichage est tenu ` jour sur le site e aWikip´dia anglophone : ehttps ://secure.wikimedia.org/wikipedia/en/wiki/Comparison of layout engines (CSS)Les tableaux sont ´difiants : certains ´l´ments de CSS sont loin d’ˆtre e ee eaffich´s par tous les navigateurs, d’autres ne le sont que partiellement. e 42 / 97
  43. 43. CSS BasesUne affaire d’h´ritages ePrincipecascading ⇒ les caract´ristiques de pr´sentation se propagent e e encascade d’un ´l´ment ` ses fils. ee aExempleSi un ´l´ment de type <a>, dont on ne sait rien de la police, se trouve eedans un ´l´ment de type <p>, alors le <a> va h´riter de cet ´l´ment ee e ee<p> les propri´t´s de style. ee 43 / 97
  44. 44. CSS BasesIncorporation dans un documentIl y a deux possibilit´s pour mettre en forme un document par une feuille ede style CSS :Int´gr´ au document e eFeuille de style directement dans l’entˆte du document eEntre une paire de balises <style type=”text/css”>...</style>Fichier ` part (solution retenue pour ce cours) aCode dans un fichier s´par´, souvent nomm´ en .css e e eAppel dans l’en-tˆte du fichier .html avec une balise de la forme e<link rel=”stylesheet” type=”text/css” href=”fichier.css”/>NB : Dans ce cas, le fichier CSS se trouve dans le mˆme r´pertoire que le e efichier XHTML. 44 / 97
  45. 45. CSS SyntaxeSyntaxe des ´l´ments eeChaque ´l´ment de la feuille de style ob´it ` cette syntaxe : ee e aUn s´lecteur ou plus eIl sert ` indiquer ` quelle cat´gorie les modifications de style s’appliquent. a a e s´lecteur { e ... }Une d´claration ou plus eElle comporte syst´matiquement une propri´t´ et une valeur : e ee propri´t´ : valeur ; ee 45 / 97
  46. 46. CSS SyntaxeExemple de syntaxeFichier .csss´lecteur1 { e propri´t´1 : valeur1 ; ee propri´t´2 : valeur2 ; ee}s´lecteur2 { e propri´t´1 : valeur1 ; ee propri´t´3 : valeur3 ; ee propri´t´X : valeurX ; ee} 46 / 97
  47. 47. CSS Style du texteChanger le style du textePropri´t´s et valeurs ee font-style italic, oblique ou normal font-weight bold ou normal font-variant small-caps pour les petites capitales, ou normal (inutilis´ e pour l’instant)normal ⇒ par d´faut, inutile de le pr´ciser sauf si des changements sont e esusceptibles d’ˆtre h´rit´s d’une cat´gorie sup´rieure. e e e e e Fichier .css Fichier .html p{ <p> font-weight : bold ; Quelque chose. } </p> ou p { font-style : italic ; } 47 / 97
  48. 48. CSS Style du texteFontesLes fontes se changent par la propri´t´ font-family: eeExemplesp{font-family : Arial ;}oup { font-family : Times New Roman ; } 48 / 97
  49. 49. CSS Style du texteFontesValeursLe CSS d´finit des familles g´n´riques : serif, sans-serif, monospace, e e ecursive et fantasy.On peut les utiliser en dernier recours, en proposant plusieurs possibilit´s es´par´es par des virgules : e e Arial, Helvetica, sans-serif Courier New, Courier, monospace Times New Roman, Times, serif Verdana, sans-serifLes polices propos´es ci-dessus sont suppos´es tr`s courantes. e e e 49 / 97
  50. 50. CSS Style du texteFontesExemplesfont-family : Times New Roman, Times, serif ;oufont-family : Georgia, Palatino, Garamond, serif ;(moins courant)Si cette question vous int´resse : ehttps ://secure.wikimedia.org/wikipedia/en/wiki/Web typography 50 / 97
  51. 51. CSS Style du texteTaille des caract`res eLa taille se change par la propri´t´ font-size: eeValeursIl y a trois types d’indications diff´rents : e valeur descriptive (xx-small, x-small, small, medium, large, x-large, xx-large) valeur relative ` la taille actuelle (larger, smaller ou un pourcentage) a longueur fixe, souvent en pixels (px)Exemplesfont-size : x-small ;oufont-size : 15px ; 51 / 97
  52. 52. CSS Style du texteAlignement du texteAlignement → propri´t´ text-align: eeValeurs left (souvent par d´faut) e right center justifyExempletext-align : center ; 52 / 97
  53. 53. CSS Style du texteExercice⇒ Essayez ` pr´sent de changer l’apparence des titres (style, police de a ecaract`res, taille). e⇒ Et l’apparence de tout le corps de document. 53 / 97
  54. 54. CSS ClassesClasses d’´l´ments eePour personnaliser le style des ´l´ments HTML, il est possible de leur eeajouter une classe, qui fait alors partie de leurs attributs. Fichier .html Fichier .css <p class=”nom-de-classe”> p.nom-de-classe{ ... ... </p> } 54 / 97
  55. 55. CSS ClassesExemple Fichier .css Fichier .html p.test{ <p class=”test”> text-align : right ; ... font-size : 20px ; </p> } 55 / 97
  56. 56. CSS ClassesStyle g´n´rique e eLe HTML fournit deux ´l´ments, <div> au niveau bloc et <span> au eeniveau inline, qui n’ont aucune pr´sentation particuli`re, et servent ` se e e avoir attacher un style.Fichier .html<div class=”times”>Ce texte apparaˆ dans la police Times, <span class=”it”>une partie est ıten italique</span>, pas l’autre.</div>Fichier .cssdiv.times{ font-family : Times New Roman, Times, serif ; }span.it{ font-style : italic ; } 56 / 97
  57. 57. ExerciceExercice de synth`se eR´alisez 3 documents XHTML dont le style est r´gi par le mˆme fichier .css e e eIls comporteront trois cat´gories de titres diff´rents. e eCertains paragraphes seront tout en italique et justifi´s. eD’autres seront diff´rents par leur police de caract`res (taille et famille). e eCertains ´l´ments du texte seront syst´matiquement marqu´s en gras. ee e eChaque page contiendra au moins un lien vers chacune des deux autres. 57 / 97
  58. 58. RappelsR´visions : XHTML et CSS eLa mani`re la plus simple pour cr´er un ensemble de pages web est de e es´parer le fond et la forme : e Le fond : XHTML En-tˆte et corps de document e La forme : CSS Texte et marquage : titres, Indications de pr´sentation e liens, divisions... S´rie de s´lecteurs e e ´ Edition dans ´diteur de texte e Propri´t´s et valeurs ee Plusieurs documents XHTML ´ Edition dans ´diteur de texte e par fichier CSS 58 / 97
  59. 59. RappelsR´visions : exemple ePour r´aliser deux types de paragraphes diff´rents : e e Fichier .html Fichier .css <p class=”enorme”> p.enorme { Cette balise <br /> text-weight : bold ; permet de revenir ` la ligne. a font-size : 40px ; </p> } <p class=”illisible”> p.illisible { Ces caract`res sont beaucoup e font-size : xx-small ; trop petits. } </p> 59 / 97
  60. 60. CouleursCouleursCouleur du texte → propri´t´ color ee3 formats diff´rents ePrenons l’exemple du bleu, la mˆme valeur peut ˆtre repr´sent´e par : e e e e un nom : blue une valeur hexad´cimale : #0000FF e une valeur RGB : rgb(0,0,255)Possibilit´s eIl y a 17 couleurs standard : aqua, black, blue, fuchsia, gray, grey, green,lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.Au total 16 million de couleurs peuvent ˆtre repr´sent´es de mani`re e e e ehexad´cimale ou cod´e Red-Green-Blue. e e 60 / 97
  61. 61. CouleursUtilisation Exemple 1 : les titres h1 { color : orange ; } Exemple 2 : Couleur du fond body { background-color : #d0e4fe ; } 61 / 97
  62. 62. CouleursPour en savoir plus Liste des 147 noms de couleurs reconnus par HTML et CSS : http://www.w3schools.com/cssref/css_colornames.asp Nuancier de couleurs : http://www.w3schools.com/cssref/css_colors.asp Notion de gamut de couleur : https://fr.wikipedia.org/wiki/Gamut 62 / 97
  63. 63. Couleurs ExerciceAjouts ` l’exercice de synth`se a eR´alisez 3 documents XHTML dont le style est r´gi par le mˆme fichier .css e e eIls comporteront trois cat´gories de titres diff´rents, chacune dans une e ecouleur donn´e. eCertains ´l´ments du texte seront syst´matiquement marqu´s en gras et en ee e erouge.Chaque page contiendra au moins un lien vers chacune des deux autres.Tous les documents seront valides. 63 / 97
  64. 64. Insertion d’imagesInsertion d’imagesPr´requis ePour ˆtre valide, la balise <img> doit comporter au moins ces deux eattributs : src la source de l’image (un nom de fichier ou une adresse) alt un texte de remplacement, au cas o` l’image est indisponible uSyntaxe<img src=”adresse” alt=”texte”/> 64 / 97
  65. 65. Insertion d’imagesInsertion d’images : ExemplesImage stock´e localement e<img src=”montagne.jpg” alt=”paysage de montagne” />Image disponible sur un site distant<imgsrc=”https ://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Locomotives-Roundhouse2.jpg/619px-Locomotives-Roundhouse2.jpg”alt=”locomotives” /> 65 / 97
  66. 66. Insertion d’imagesRedimensionner les imagesAttributs width largeur (en pixels par d´faut) e height hauteur (en pixels par d´faut) eExemples<img src=”...” alt=”...” width=”250” height=”400” /><img src=”...” alt=”...” width=”25%” />NB : Il est pr´f´rable de redimensionner les images avant de les mettre en eeligne, le rendu peut ˆtre mauvais. e 66 / 97
  67. 67. Insertion d’imagesExerciceAffichez une image qui est ´galement un lien. e(Indice : au sens strict il s’agit plutˆt d’un lien qui renferme une image.) o 67 / 97
  68. 68. Mise en ligneMise en ligne des fichiersCr´ation d’un espace eAfin d’avoir un endroit o` d´poser ses fichiers il faut cr´er un compte u e ed’h´bergement quelque part, par exemple en utilisant le service propos´ e epar l’ENS.TransfertPour transf´rer les fichiers on utilise le protocole FTP et un client eadapt´ : le logiciel FileZilla. e 68 / 97
  69. 69. Bordures et placement en CSS BorduresBordures en CSSDessiner un cadreborder-style obligatoire : solid (ligne), dotted (en pointill´s), dashed e (tirets), ou doubleborder-width indication en pixels ou thin, medium, thickborder-color nom de couleur ou code Exemple 2 Exemple 1 p{ p{ border-style : dotted ; border-style : solid ; border-width : thin ; border-width : 1px ; border-color : blue ; } } 69 / 97
  70. 70. Bordures et placement en CSS BorduresBordure d’un seul cˆt´ oeParam`tres eIl y a 4 indications pour signifier la position en CSS :top, bottom, left et right. Exemples p{ border-left-style : solid ; border-width : 3px ; } p{ border-bottom-style : solid ; } 70 / 97
  71. 71. Bordures et placement en CSS BorduresRaccourciForme br`ve eIl est possible de simplifier la d´finition du cadre en pla¸ant tous les e c´l´ments les uns apr`s les autres, dans un ordre pr´d´fini :ee e e e(border-width), border-style, (border-color)Les propri´t´s entre parenth`ses sont facultatives ee e Exemples p{ border : solid blue ; } p{ border : 5px solid red ; } 71 / 97
  72. 72. R´visions eCode source des pagesAfficher la sourceIl est possible d’afficher le code source d’une page.Avec le navigateur Firefox par exemple : Ctrl + U Affichage → Code source de la page⇒ Il est donc envisageable de s’inspirer de la mise en forme ou du contenud’un site donn´. e 72 / 97
  73. 73. R´visions eFichiersNomsAttention ` ce que les fichiers XHTML soient bien enregistr´s au format a e.html et les fichiers CSS au format .css.Fonction Enregistrer sous dans l’´diteur de texte ou Renommer dans eFileZilla.CorrespondanceAttention ` ce que le nom exact de la feuille de style (CSS) utilis´e se a eretrouve bien dans l’en-tˆte du document XHTML ` la ligne : e a<link rel=”stylesheet” href=”style.css” type=”text/css” /> 73 / 97
  74. 74. R´visions eMettre des fichiers en ligneUtilisation d’un client FTP Il faut en g´n´ral une adresse d´termin´e, un compte et un mot de e e e e passe. Le transfert de fichiers, la cr´ation et la suppression de r´pertoires se e e fait toujours de la mˆme mani`re. e e Le contenu en ligne apparaˆ toujours dans la fenˆtre de droite, le ıt e contenu local ` gauche (avec FileZilla). aRestrictionsLa mise en ligne de fichiers sujets ` des droits d’auteur est fortement ad´conseill´e, sur le site de l’ENS et ailleurs. e eEn suivant la m´thode d´crite dans ce cours vous n’ˆtes en aucune fa¸on e e e canonyme sur internet. 74 / 97
  75. 75. R´visions eExistence d’un site sur internetR´f´rencement et visiteurs ee L’op´ration qui consiste ` faire indexer son site par un moteur de e a recherche s’appelle le r´f´rencement. ee Les liens entrants sont essentiels. L’ad´quation ` des mots-cl´s donn´s joue ´galement un grand rˆle. e a e e e o M´moire e d’internetLes informations d’un site clos mais qui a ´t´ r´f´renc´ un jour sont ee ee esouvent accessibles, mˆme si elles ne sont plus en ligne depuis longtemps. e 75 / 97
  76. 76. XHTML ListesRappel : listesDeux types diff´rents e liste simple : ul liste num´rot´e : ol e eLes lignes sont toujours d´limit´es par la balise li e eExemple : liste simple<ul><li>texte de la premi`re ligne</li> e<li>texte de la seconde ligne</li></ul> 76 / 97
  77. 77. XHTML ListesListes descriptives (lexiques)Les ´l´ments dl, dt et dd ee dl (definition list) encadre le contenu dt (definition term) est une entr´e e dd (definition definition) est la d´finition associ´e ` une entr´e e e a eExemple<dl> <dt>Tennis</dt> <dd>Le court de tennis est situ´ derri`re le bˆtiment A.</dd> e e a <dt>K-fˆt</dt> e <dd>La caf´t´ria se trouve dans le bˆtiment A.</dd> ee a</dl> 77 / 97
  78. 78. XHTML TableauxTableauxBalises table d´finit l’ensemble du tableau e th (table header ) cellule d’en-tˆte e tr marque le d´but et la fin de ligne e td entoure le contenu de chaque celluleExemple : tableau ` deux colonnes a<table> <tr><th>Colonne gauche</th><th>Colonne droite</th></tr> <tr><td>Cellule 1 gauche</td><td>Cellule 1 droite</td></tr> <tr><td>Cellule 2 gauche</td><td>Cellule 2 droite</td></tr> <tr><td>Cellule 3 gauche</td><td>Cellule 3 droite</td></tr></table> 78 / 97
  79. 79. XHTML TableauxTitre du tableauCaptionLa balise caption se place ` l’int´rieur du tableau. a eExemple<table><caption>Titre</caption> <tr><th>Colonne gauche</th><th>Colonne droite</th></tr> <tr><td>Cellule 1 gauche</td><td>Cellule 1 droite</td></tr> ...</table> 79 / 97
  80. 80. CSS BorduresR´visions : bordures en CSS eDessiner un cadre border-style obligatoire : solid (ligne), dotted (en pointill´s), dashed e (tirets), ou doubleborder-width indication en pixels ou thin, medium, thickborder-color nom de couleur ou code div.qqc { border-style : solid ; border-width : 1px ; } div.test { border-style : dotted ; border-width : thin ; border-color : blue ; } 80 / 97
  81. 81. CSS Style des tableauxD´limitation des tableaux et des cellules e Bordure table, th, td { border : 1px solid black ; /* Forme br`ve */ e } Fondu table { caption-side : bottom ; /* ou top */ border-collapse : collapse ; } 81 / 97
  82. 82. CSS Style des tableauxTaille et style des cellules XHTML CSS <table> td.abc { < !- -<th> est facultatif- -> text-align : right ; <tr> height : 50px ; <td>...</td> vertical-align : bottom ; <td class=”abc”>...</td> /*top, bottom ou middle*/ </tr> } </table> ⇒ Comment changer la couleur du fond et/ou du texte ? 82 / 97
  83. 83. CSS Unit´s eUnit´s de mesure absolues e Unit´e Nom en CSS Description Pouce in 1 in = 2,54 cm Pica pc 1 pc = 1/6 in Point pt 1 pt = 1/72 in Centim`tre e cm Millim`tre e mm 83 / 97
  84. 84. CSS Unit´s eUnit´s de mesure relatives e Unit´ e Description em Taille de police de l’´l´ment s´lectionn´ ou du ee e e parent (si font-size). ex Hauteur de la minuscule de l’´l´ment ee s´lectionn´ ou du parent (si font-size). e e px D´pend de la r´solution du p´riph´rique d’af- e e e e fichage. % 100 % = taille de l’´l´ment ou du parent ee 84 / 97
  85. 85. CSS Boˆ ıtesR´glage de la taille eParam`tres eDeux moyens de modifier la taille d’un paragraphe ou d’un bloc : width largeur d´sir´e e e height hauteurEt deux unit´s courantes : e px taille en pixels % taille en pourcentage de la surface d’affichage div.exemple1 { width : 400px ; } div.exemple2 { height : 20% ; } 85 / 97
  86. 86. CSS FlottantsPositionner deux ´l´ments l’un ` cˆt´ de l’autre ee a oeLes flottantsPour permettre ` deux ou trois blocs d’ˆtre l’un ` cˆt´ de l’autre, il faut a e a oeles faire flotter , c’est-`-dire rendre leurs positions d´pendantes l’une a ede l’autre. Exemple div.exemple1 { width : 40% ; float : left ; } div.exemple2 { width : 40% ; } 86 / 97
  87. 87. CSS FlottantsExample avec trois parties XHTML CSS <p> p{ <span class=”gauche”> text-align : center ; partie ` gauche a } </span> p span.gauche { <span class=”droite”> float : left ; partie ` droite a } </span> p span.droite { partie au centre float : right ; </p> } 87 / 97
  88. 88. CSS FlottantsParam`tres des boˆ e ıtesimage disponible ` l’adresse suivante : ahttp://www.w3.org/Talks/2008/0911-CSS-Amsterdam/ 88 / 97
  89. 89. CSS FlottantsExample : deux blocs Sur la droite Sur la gauche div.exemple2 { div.exemple1 { border-style : dotted ; border-style : dotted ; border-width : thin ; border-width : thin ; border-color : blue ; border-color : blue ; width : 40% ; width : 40% ; float : right ; float : left ; margin-bottom : 40px ; margin-bottom : 40px ; margin-left : 30px ; } } 89 / 97
  90. 90. CSS FlottantsExample 2 : texte d´coll´ du cadre e e Sur la gauche Sur la droite div.exemple1 { div.exemple2 { border-style : dotted ; border-style : dotted ; border-width : thin ; border-width : thin ; border-color : blue ; border-color : blue ; width : 40% ; width : 40% ; float : left ; float : right ; margin-bottom : 40px ; margin-bottom : 40px ; padding : 10px ; padding-left : 4em ; } } 90 / 97
  91. 91. Propri´t´s des liens ee AncresCr´er des liens ` l’int´rieur d’une mˆme page : les ancres e a e eDans un menu<ul><li><a href=”#partie2”>texte du lien</a></li><li><a href=”#photo”>texte du lien</a></li><li><a href=”page2.html#ancre”>lien vers une autre page</a></li></ul>Plus loin dans la page<h2><a name=”partie2”>Deuxi`me Partie</a></h2> eou bien <h2 id=”partie2”>Deuxi`me Partie</h2> e<a name=”photo”></a><img src=”...”></img> 91 / 97
  92. 92. Propri´t´s des liens ee CiblesD´finir la fenˆtre cible d’un lien e e → Attribut targetDans le fichier HTML blank ouvrir dans une nouvelle fenˆtre/onglet e self ouvrir dans la mˆme fenˆtre e eExample<a href=”page3.html” target=” blank”>texte du lien</a> 92 / 97
  93. 93. Propri´t´s des liens ee D´coration en CSS eD´coration des liens en CSS eLes pseudo-classes link lien non visit´ e visited lien visit´ e hover pointeur de la souris au-dessus du lien active liens activ´s (pendant le clic par ex.) eExemplesa : link {color : orange ;}a : visited {text-decoration :none ;}a : hover {font-weight : bold ;}NB : les pseudos-classes hover et active peuvent s’appliquer ` d’autres a´l´ments.ee 93 / 97
  94. 94. Arri`re-plan eArri`re plan en CSS eCouleur de l’arri`re plan e background-color: yellow; background-color: rgb(60%,90%,75%);Image en fond background-image: url(http://www.un-site.fr/image.jpg); background-repeat: repeat-x; ou repeat-y; ou no-repeat;⇒ Trouvez un motif de fond sur internet et ajoutez-le ` votre page. a 94 / 97
  95. 95. Listes / Menus FormatFormat des listes → Propri´t´ list-style-type eeNum´rotation (type ol) e decimal (par d´faut au premier niveau) e lower-roman et upper-roman lower-alpha et upper-alpha lower-greek, hebrew, hiragana etc.Symboles (type ul) disc (par d´faut au premier niveau) e circle square none 95 / 97
  96. 96. Listes / Menus MenuCr´ation d’un menu eNous allons cr´er un menu simple en utilisant les ´l´ments de XHTML et e eede CSS vus en cours, en suivant le tutoriel sur la page ci-dessous :http ://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html 96 / 97
  97. 97. InformationsPr´sentation r´alis´e avec LTEX Beamer e e e AAuteur : Adrien BarbaresiDocument sous licence CC BY-SA 97 / 97

×