HTML/CSS. Louis-Claude CANON. 16 et 17 septembre CANON HTML/CSS 16 et 17 septembre / 40

Transcription

1 HTML/CSS Louis-Claude CANON 16 et 17 septembre 2009 CANON HTML/CSS 16 et 17 septembre / 40

2 Plan Contexte introductif 1 Contexte introductif 2 HTML 3 CSS 4 Synthèse CANON HTML/CSS 16 et 17 septembre / 40

3 Contexte introductif Internet C ANON HTML/CSS 16 et 17 septembre / 40

4 Internet Contexte introductif Internet Réseau : ensemble d équipements reliés entre eux pour échanger des informations. Internet : système mondial de réseaux informatiques interconnectés (réseau de réseaux). CANON HTML/CSS 16 et 17 septembre / 40

5 Internet Contexte introductif Internet Réseau : ensemble d équipements reliés entre eux pour échanger des informations. Internet : système mondial de réseaux informatiques interconnectés (réseau de réseaux). World Wide Web Système hypertexte de documents. Hypertexte/hyperlien : référence dans un document permettant d accéder directement à un autre document web. CANON HTML/CSS 16 et 17 septembre / 40

6 Internet Contexte introductif Internet Réseau : ensemble d équipements reliés entre eux pour échanger des informations. Internet : système mondial de réseaux informatiques interconnectés (réseau de réseaux). World Wide Web Système hypertexte de documents. Hypertexte/hyperlien : référence dans un document permettant d accéder directement à un autre document web. Navigateur web Logiciel conçu pour consulter des documents web et facilitant la navigation (i.e., le passage entre une succession de documents liés par des liens hypertextes). CANON HTML/CSS 16 et 17 septembre / 40

7 Page web Contexte introductif Élément de base Différent médias : texte, image, figure, graphique, son, vidéo. Éléments mis en page pour une navigation agréable. Encodage dans un format spécifique décrivant tous les détails relatif à la mise en page (couleur de fond, police de caractère, taille, emplacement des images, du texte,...). CANON HTML/CSS 16 et 17 septembre / 40

8 Page web Contexte introductif Élément de base Différent médias : texte, image, figure, graphique, son, vidéo. Éléments mis en page pour une navigation agréable. Encodage dans un format spécifique décrivant tous les détails relatif à la mise en page (couleur de fond, police de caractère, taille, emplacement des images, du texte,...). Une page, un fichier, une adresse Une page web est un fichier. Il est récupéré sur un site à partir d une adresse web. Le fichier est traduit par le navigateur en contenu visuel. CANON HTML/CSS 16 et 17 septembre / 40

9 Format Contexte introductif HTML Texte brut avec des informations sématiques et structurelles. Exemple : structure du document (délimitation du titre, des sections et des paragraphes) ; nature de portion de texte (acronyme, passage important, liens). CANON HTML/CSS 16 et 17 septembre / 40

10 Format Contexte introductif HTML Texte brut avec des informations sématiques et structurelles. Exemple : structure du document (délimitation du titre, des sections et des paragraphes) ; nature de portion de texte (acronyme, passage important, liens). CSS Spécifie la mise en page et l aspect graphique des structures définies dans le HTML. Exemple : largeur du texte, taille des caractères, police, couleur, agencement du contenu. CANON HTML/CSS 16 et 17 septembre / 40

11 Plan HTML 1 Contexte introductif 2 HTML 3 CSS 4 Synthèse CANON HTML/CSS 16 et 17 septembre / 40

12 Édition de code HTML Texte brut Il s agit de texte brut sans aucune particularité (les traitements de texte allourdissent le texte brut d informations liées à la mise en page). CANON HTML/CSS 16 et 17 septembre / 40

13 Édition de code HTML Texte brut Il s agit de texte brut sans aucune particularité (les traitements de texte allourdissent le texte brut d informations liées à la mise en page). Éditeur de texte Notepad, Wordpad, Notepad++ (recommandé), KompoZer. Qualité d un éditeur de texte : coloration syntaxtique des éléments clés du langages (HTML/CSS ou autre), vérification du respect des normes. CANON HTML/CSS 16 et 17 septembre / 40

14 Balises HTML Balises Commencent par < et finissent par >. Par paire : ouvrante et fermante (la balise fermante contient un / en deuxième position). Invisible lors de l ouverture de la page par le navigateur (utilisé pour le traitement interne). Elles spécifient la nature des éléments qu elles délimitent. CANON HTML/CSS 16 et 17 septembre / 40

15 Balises HTML Balises Commencent par < et finissent par >. Par paire : ouvrante et fermante (la balise fermante contient un / en deuxième position). Invisible lors de l ouverture de la page par le navigateur (utilisé pour le traitement interne). Elles spécifient la nature des éléments qu elles délimitent. Exemple <titre>ceci sera interprété comme étant un titre</titre> Les espaces et retour charriots n ont aucune incidence. CANON HTML/CSS 16 et 17 septembre / 40

16 Validité HTML Particularités Les balises ne se recouvrent pas : <a><b>ceci n est pas valide</a></b> <a><b>ceci l est</b></a> On trouve aussi des balises seules : <c /> CANON HTML/CSS 16 et 17 septembre / 40

17 Attributs HTML Attributs Enrichie une balise sur le contenu délimité. Une balise peut avoir des valeurs pour chacun de ses attributs. CANON HTML/CSS 16 et 17 septembre / 40

18 Attributs HTML Attributs Enrichie une balise sur le contenu délimité. Une balise peut avoir des valeurs pour chacun de ses attributs. Syntaxe On rajoute le nom de l attribut après le mot-clé de la balise suivie de sa valeur. CANON HTML/CSS 16 et 17 septembre / 40

19 Attributs HTML Attributs Enrichie une balise sur le contenu délimité. Une balise peut avoir des valeurs pour chacun de ses attributs. Syntaxe On rajoute le nom de l attribut après le mot-clé de la balise suivie de sa valeur. Exemple <citation auteur="martin">blabla</citation> Une citation de Martin. CANON HTML/CSS 16 et 17 septembre / 40

20 Une première page HTML Structure général d un document HTML On commence par un en-tête qui définie les informations générales du document. Vient ensuite le corps du document avec le contenu. CANON HTML/CSS 16 et 17 septembre / 40

21 Une première page HTML Structure général d un document HTML On commence par un en-tête qui définie les informations générales du document. Vient ensuite le corps du document avec le contenu. Exemple <html> <head> <title>titre de la page</titre> </head> <body> Une première page. </body> </html> CANON HTML/CSS 16 et 17 septembre / 40

22 Charset HTML Jeu de caractère On constate que les accents passent mal. Rajouter ceci dans l en-tête (en dessous de la ligne title) : <meta http-equiv="content-type" content="text/html ; charset=iso " /> CANON HTML/CSS 16 et 17 septembre / 40

23 HTML Structurer son contenu Balises liées à la structure Le contenu peut être structurer grâce aux balises suivantes : p chaque paragraphe en est délimité h1 titre de niveau 1 (h2 pour les titres moins importants, h3... il y a 6 niveaux) em mise en valeur d un passage (souvent en italique) strong mise en valeur plus forte (souvent en gras) br pour passer à la ligne (ne pas en abuser) CANON HTML/CSS 16 et 17 septembre / 40

24 HTML Structurer son contenu Balises liées à la structure Le contenu peut être structurer grâce aux balises suivantes : p chaque paragraphe en est délimité h1 titre de niveau 1 (h2 pour les titres moins importants, h3... il y a 6 niveaux) em mise en valeur d un passage (souvent en italique) strong mise en valeur plus forte (souvent en gras) br pour passer à la ligne (ne pas en abuser) Mise en page Il s agit uniquement d informations structurelles (la correspondance em/italique est donnée à titre indicatif, c est le CSS qui spécifiera cette correspondance). CANON HTML/CSS 16 et 17 septembre / 40

25 HTML Exemple de contenu structuré Exemple <html>... <body> <h1>un titre important</h1> <h2>un titre un peu moins important</h2> <p> Un premier paragraphe.<br /> Noter le saut de ligne. </p> </body> </html> CANON HTML/CSS 16 et 17 septembre / 40

26 Autres balises HTML Plus rare sup mettre en exposant (XXI^ème siècle) sub en indice (x_n = x_{n - 1} + 1) q citation courte blockquote citation longue acronym encadre un acronyme et utilise l attribut title pour indiquer l acronyme développé CANON HTML/CSS 16 et 17 septembre / 40

27 HTML Différent types de balises Inline Utilisées à l intérieur des paragraphes (c est le cas de q). CANON HTML/CSS 16 et 17 septembre / 40

28 HTML Différent types de balises Inline Utilisées à l intérieur des paragraphes (c est le cas de q). Bloc Structure le contenu en blocs (c est le cas de blockquote, h1 et p). CANON HTML/CSS 16 et 17 septembre / 40

29 HTML Différent types de liens Absolu/relatif Lien absolu adresse web pointant vers une page sur n importe quel site Lien relatif adresse web partielle permettant de pointer vers une page relativement à la page en cours de visite CANON HTML/CSS 16 et 17 septembre / 40

30 HTML Différent types de liens Absolu/relatif Lien absolu adresse web pointant vers une page sur n importe quel site Lien relatif adresse web partielle permettant de pointer vers une page relativement à la page en cours de visite Exemple Pour aller sur la page : on peut aussi aller sur le site puis aller sur : identite/identite.htm CANON HTML/CSS 16 et 17 septembre / 40

31 Faire des liens HTML Balise a Utilise l attribut href pour indiquer la cible (relative ou absolue) et l attribut title pour décrire le lien (apparaît dans la bulle d aide). CANON HTML/CSS 16 et 17 septembre / 40

32 Faire des liens HTML Balise a Utilise l attribut href pour indiquer la cible (relative ou absolue) et l attribut title pour décrire le lien (apparaît dans la bulle d aide). Exemple <a href="cible.html">lien vers un fichier local (dans le même dossier que le document HTML courant)</a> <a href=" vers un site externe</a> CANON HTML/CSS 16 et 17 septembre / 40

33 Encore des liens HTML Mail Pour faire un lien ouvrant le mailer pour composer un message : <a href="mailto :jean.dupont@free.fr"> cliquez ici</a> CANON HTML/CSS 16 et 17 septembre / 40

34 Encore des liens HTML Mail Pour faire un lien ouvrant le mailer pour composer un message : <a href="mailto :jean.dupont@free.fr"> cliquez ici</a> Ancre Pour faire un lien vers une position spécifique d un document, créer une ancre : <h1 id="ancre1">... </h1> Pour pointer vers cette ancre : <a href="#ancre1">... </a> <a href="page.html#ancre1">... </a> CANON HTML/CSS 16 et 17 septembre / 40

35 Insérer des images HTML Balise img Attributs : src lien vers l image à insérer alt description alternative pour ceux qui ne visualiserons pas l image title bulle d aide On peut faire une image cliquable en encadrant les balises img par des balises a. CANON HTML/CSS 16 et 17 septembre / 40

36 Insérer des images HTML Balise img Attributs : src lien vers l image à insérer alt description alternative pour ceux qui ne visualiserons pas l image title bulle d aide On peut faire une image cliquable en encadrant les balises img par des balises a. Exemple <img src="image.png" alt="une figure" title="description de la figure" /> CANON HTML/CSS 16 et 17 septembre / 40

37 Commentaires HTML Doumenter son code Pour rajouter des descriptions qui ne seront pas traiter pas le navigateur comme faisant partie du HTML : <!-- Description sur plusieurs lignes --> CANON HTML/CSS 16 et 17 septembre / 40

38 Plan CSS 1 Contexte introductif 2 HTML 3 CSS 4 Synthèse CANON HTML/CSS 16 et 17 septembre / 40

39 Introduction CSS Séparation du fond et de la forme Toute la mise en page est définie dans une feuille de style (fichier CSS). Possibilité de manipuler le fond (e.g., rajouter du code HTML) sans se soucier de l aspect visuel. Possibilité de changer la charte graphique sans rééditer chaque fichier HTML. CANON HTML/CSS 16 et 17 septembre / 40

40 CSS Référencer le fichier CSS Balise link dans l en-tête Attributs : rel type de relation (stylesheet dans notre cas) media technologie de rendu concernée (media) type type de document lié (text/css) title nom donné au CSS href lien vers le CSS CANON HTML/CSS 16 et 17 septembre / 40

41 CSS Référencer le fichier CSS Balise link dans l en-tête Attributs : rel type de relation (stylesheet dans notre cas) media technologie de rendu concernée (media) type type de document lié (text/css) title nom donné au CSS href lien vers le CSS Exemple <head> <link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" /> <head/> CANON HTML/CSS 16 et 17 septembre / 40

42 CSS Structure d une feuille de style Trois éléments sélecteur balise dont l apparence sera affectée propriété caractéristique graphique à modifier valeur style CANON HTML/CSS 16 et 17 septembre / 40

43 CSS Structure d une feuille de style Trois éléments sélecteur balise dont l apparence sera affectée propriété caractéristique graphique à modifier Exemple valeur style Pour que les paragraphes soient écrits en bleue avec une taile de police de 18 pixels : p { } color : blue ; font-size : 18px ; CANON HTML/CSS 16 et 17 septembre / 40

44 Commentaires CSS Doumenter son code Pour rajouter des descriptions qui ne seront pas traitées pas le navigateur comme faisant partie du CSS : /* Description sur plusieurs lignes */ CANON HTML/CSS 16 et 17 septembre / 40

45 CSS Spécifier des classes graphiques Gérer finement l aspect visuel L attribut class est utilisé pour limiter la porté des styles à certains éléments seulement. Comme sélecteur dans le CSS, on utilise le nom de la classe précédé d un point. CANON HTML/CSS 16 et 17 septembre / 40

46 CSS Spécifier des classes graphiques Gérer finement l aspect visuel L attribut class est utilisé pour limiter la porté des styles à certains éléments seulement. Comme sélecteur dans le CSS, on utilise le nom de la classe précédé d un point. Exemple <p class="specific">... </p>.specific {... } CANON HTML/CSS 16 et 17 septembre / 40

47 Pour un usage unique CSS L attribut id Utilisé en tant qu ancre en HTML, il peut aussi être utilisé pour caractériser une partie du contenu. On précède la valeur par un dièse. CANON HTML/CSS 16 et 17 septembre / 40

48 Pour un usage unique CSS L attribut id Utilisé en tant qu ancre en HTML, il peut aussi être utilisé pour caractériser une partie du contenu. On précède la valeur par un dièse. Exemple <p id="unique">... </p> #unique {... } CANON HTML/CSS 16 et 17 septembre / 40

49 Diviser son HTML CSS Les balises div et span Ces balises n ont pas de signification au niveau HTML. Elles permettent d encadrer des parties de contenu nécessitant une mise en page similaire. div est un balise de type bloc, tandis que span est de type inline. CANON HTML/CSS 16 et 17 septembre / 40

50 Diviser son HTML CSS Les balises div et span Ces balises n ont pas de signification au niveau HTML. Elles permettent d encadrer des parties de contenu nécessitant une mise en page similaire. div est un balise de type bloc, tandis que span est de type inline. Exemple <p> <span class="c1">ce contenu précis sera formatté</span>, mais pas celui-ci</p>.c1 {... } CANON HTML/CSS 16 et 17 septembre / 40

51 Imbrication de balises CSS Structurer davantage On peut enchaîner les sélecteurs en CSS pour signifier que les styles s appliquent de façon restreinte. On peut aussi spécifier qu un style s applique à plusieurs classes. CANON HTML/CSS 16 et 17 septembre / 40

52 Imbrication de balises CSS Structurer davantage On peut enchaîner les sélecteurs en CSS pour signifier que les styles s appliquent de façon restreinte. On peut aussi spécifier qu un style s applique à plusieurs classes. Exemple p.c1 { /* S applique aux parties c1 si elles sont contenues dans un p */ } p,.c1 { /* S applique aux parties p et c1 */ } CANON HTML/CSS 16 et 17 septembre / 40

53 Taille du texte CSS font-size On définit les tailles de plusieurs manières : pixel hauteur maximale en pixel (18px) relative xx-small, x-small, small, medium, large, x-large, xx-large em 1.3em est 1.3 fois la taille normale pourcentage même principe que pour em (100%) CANON HTML/CSS 16 et 17 septembre / 40

54 Taille du texte CSS font-size On définit les tailles de plusieurs manières : pixel hauteur maximale en pixel (18px) relative xx-small, x-small, small, medium, large, x-large, xx-large em 1.3em est 1.3 fois la taille normale pourcentage même principe que pour em (100%) Exemple p { font-size : 1.3em ; } CANON HTML/CSS 16 et 17 septembre / 40

55 Police CSS font-family Utilise les polices par priorité (une police peut être absente sur un système). CANON HTML/CSS 16 et 17 septembre / 40

56 Police CSS font-family Utilise les polices par priorité (une police peut être absente sur un système). Exemple Pour avoir du Arial Black en priorité : p { } font-family : "Arial Black", Arial, Verdana, seri CANON HTML/CSS 16 et 17 septembre / 40

57 Formatage du texte CSS Mise en forme du texte text-align left, center, right, justify text-indent pour rajouter une indentation (en pixel, cm, mm) word-spacing l espace entre les mots (en pixels,...) letter-spacing l espace entre les lettres (en pixels,...) font-style italic, normal font-weight bold, normal font-variant small-caps, normal text-transform uppercase, lowercase, capitalize, none text-decoration underline, line-through, overline, blink, none CANON HTML/CSS 16 et 17 septembre / 40

58 Couleurs CSS Exprimer une teinte par son nom Directement par un nom : white, silver, gray, black, red, maroon, lime, green, yellow, olive, blue, navy, fuchsia, purple, aqua, teal. CANON HTML/CSS 16 et 17 septembre / 40

59 Couleurs CSS Exprimer une teinte par son nom Directement par un nom : white, silver, gray, black, red, maroon, lime, green, yellow, olive, blue, navy, fuchsia, purple, aqua, teal. En notation hexadécimal Composantes Rouge-Vert-Bleu aggrégées en un unique nombre commençant par dièse. Exemple : #FF5A28 (FF rouge, 5A vert et 28 bleu). CANON HTML/CSS 16 et 17 septembre / 40

60 Couleurs CSS Exprimer une teinte par son nom Directement par un nom : white, silver, gray, black, red, maroon, lime, green, yellow, olive, blue, navy, fuchsia, purple, aqua, teal. En notation hexadécimal Composantes Rouge-Vert-Bleu aggrégées en un unique nombre commençant par dièse. Exemple : #FF5A28 (FF rouge, 5A vert et 28 bleu). En notation RGB Exemple : rgb(243,65,243) CANON HTML/CSS 16 et 17 septembre / 40

61 Fond d écran CSS background-color couleur de fond background-image image à charger (exemple : url("../images/degrade.png")) background-attachment fixed, scroll background-repeat no-repeat, repeat-x, repeat-y, repeat background-position position de l image (couple de valeurs en pixels ou modalité : top, bottom, center, left, right) CANON HTML/CSS 16 et 17 septembre / 40

62 Héritage CSS Application des styles en cascades Les styles s appliquant à un sélecteur s appliquent à l ensemble de son contenu même si d autres balises et d autres classes sont présentes à l intérieur. Pour appliquer un style à l ensemble du document, il faut l appliquer à body. Chaque nouveau style modifiera celui de plus haut niveau. CANON HTML/CSS 16 et 17 septembre / 40

63 Style des liens CSS Plusieurs états possible Un lien peut avoir été visité. On utilise la pseudo-classe visited pour appliquer un style aux liens visités. CANON HTML/CSS 16 et 17 septembre / 40

64 Style des liens CSS Plusieurs états possible Un lien peut avoir été visité. On utilise la pseudo-classe visited pour appliquer un style aux liens visités. Exemple a {... } a :visited { color : green } CANON HTML/CSS 16 et 17 septembre / 40

65 Pseudo-classes CSS Ajouter de la flexibilité Les pseudo-classes offrent plus de souplesse dans la définition des styles. CANON HTML/CSS 16 et 17 septembre / 40

66 Pseudo-classes CSS Ajouter de la flexibilité Les pseudo-classes offrent plus de souplesse dans la définition des styles. Exemple link pour les liens, lorsqu ils n ont jamais été visités focus pour les liens, lorsqu ils sont sélectionnés active pour les liens, lorsque l on clique dessus hover lorsque le curseur survole une partie (lien ou autre) first-letter première lettre (exemple p :first-letter) first-line première ligne (exemple p :first-line) before à utiliser en conjonction de la caractérisque content qui permet d ajouter du contenu avant une partie after inverse de before CANON HTML/CSS 16 et 17 septembre / 40

67 Plan Synthèse 1 Contexte introductif 2 HTML 3 CSS 4 Synthèse CANON HTML/CSS 16 et 17 septembre / 40

68 Synthèse Synthèse http :// http :// http ://en.wikipedia.org/wiki/html http :// http :// http ://en.wikipedia.org/wiki/cascading_style_sheets CANON HTML/CSS 16 et 17 septembre / 40