Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
HTML Cours 2
2
Plan du cours Retour sur le cours 1 Les feuilles de styles CSS
Mise en forme du texte et des paragraphes
3
Retour sur le cours 1 Le minimum requis
<html> <head> <title>titre</title> </head> <body> Le contenu </body> </html> S’assurer que le fichier possède bien l’extension .htm ou .html.
4
Balise, attribut, valeur
Exemple <a href=" êtes-perdus?</a> a est la balise href est l’attribut est sa valeur
5
Table Exemple <table width="300" height="200"> <tr>
<td> </td> </tr> </table>
6
Deux types de balises Les balises de type bloc (block) et en ligne (inline) Et voici un exemple d’un type en ligne (balises b, i, em) voilà Type bloc (balises div, p, h1 etc)
7
CSS CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à ajuster l’apparence d’un document HTML. Introduit au milieu des années 1990, le CSS devient couramment utilisé dans la conception de sites web dans les années 2000.
8
CSS Avantages La structure et la présentation sont gérées séparément.
La conception sans se soucier de la présentation. Le code HTML est réduit en taille et en complexité.
9
CSS La syntaxe du CSS est selecteur { propriété : valeur; } Ou encore
selecteur { propriété : valeur; propriété : valeur; etc... }
10
CSS Le CSS « parle » au code HTML. Il lui dit la façon de s’afficher. Les sélecteurs du CSS s’adressent aux balises HTML. Un sélecteur contient une ou plusieurs propriétés déterminant l’apparence. Les sélecteurs s’adressent à certaines balises particulières ou à un ensemble de balises HTML.
11
CSS: les propriétés Propriétés les plus courantes: Color Font-size
Font-family Background-color Width Margin Padding
12
CSS: les propriétés Exemples selecteur { font-size : 12px; }
selecteur { margin : 5px; } selecteur { font-size : 12px; color: red; }
13
CSS: le sélecteur Il existe 3 façons de faire un sélecteur.
Chaque manière détermine sur quelle(s) balise(s) les propriétés du sélecteur vont s’appliquer.
14
CSS: le sélecteur Le sélecteur fait référence aux balises HTML par son… attribut id (#) attribut class (.) nom de balise
15
CSS: le sélecteur Exemples #truc { propriété : valeur }
.ceci { propriété : valeur } p { propriété : valeur }
16
CSS: le sélecteur On peut attribuer divers attributs à la plupart des balises HTML. Exemple: <table width=“200”> L’attribut global id détermine un identifiant unique à une balise. Exemple: <table id=“rapport”> L’attribut global class spécifie une ou plusieurs classes à une balise. Exemple: <table class=“rapport”>
17
CSS: le sélecteur attribut id (#): pour modifier l’apparence d’une seule balise. attribut class (.): pour appliquer un même sélecteur sur plusieurs balises différentes. nom de balise: pour modifier l’apparence de toutes les balises de la même famille.
18
CSS: le sélecteur Le code CSS n’est pas du HTML. Il ne peut donc pas s’écrire dans un document HTML… à moins d’y être préparé. Le code CSS doit se retrouver à l’intérieur d’une balise <style> dans le <head> Exemple: <style type="text/css"> … code CSS… </style>
19
CSS: le sélecteur Les règles CSS sont déclarées dans le <head> et sont appliquées dans le <body>. Une déclaration n’a aucun effet: c’est l’énoncé d’une intention. On peut déclarer quelque chose sans qu’elle n’ait d’effet. On prépare quelque chose.
20
CSS: le sélecteur Exemple Déclaration (head)
<style type="text/css"> #cadrepub { color: red } </style> Application (body) <p id="cadrepub">L'OMS a établi dans ce dernier bilan quinze pays étaient touchés par le H1N1. </p>
21
CSS Il existe trois façons de déclarer une feuille de style.
1. La balise STYLE dans l’entête <head> <style type="text/css"> body { color: red } </style> </head>
22
CSS 2. Avec une feuille attachée <head> <link rel="stylesheet" href="monstyle.css" type="text/css"> </head> 3. Dans l’attribut global style d’une balise <p style="font-size: 12px;">Exemple</p> <p style="font-size: 12px; color:red;">Autre exemple</p>
23
Exercice Reproduire l’effet suivant en utilisant l’attribut style d’une balise p Pour s’inspirer de différents exemples: w3schools.com/css/css_examples.asp
24
CSS La façon la plus couramment utilisée consiste à lier le document HTML à un fichier CSS externe (méthode 2). Notez que plusieurs feuilles CSS peuvent être attribuées au même document HTML. Vous pouvez attribuer différentes feuilles CSS selon le médium: print, handheld, braille, screen, etc.
25
CSS La façon de déclarer un sélecteur détermine sur quelle(s) balise(s) il va s’appliquer. Le sélecteur fait référence aux balises HTML par son… attribut id (#) attribut class (.) nom de balise
26
1. L’attribut id Sa valeur est l’identifiant d’une balise.
Il est unique. Une seule balise peut avoir le même id. C’est un attribut global, on peut l’assigner à presque toutes les balises HTML. On y fait référence en CSS avec un #.
27
1. L’attribut id Déclaration CSS #publicite { color: red }
Application HTML <p id="publicite">Ceci est un paragraphe</p> Signifie littéralement « Met le texte a l’intérieur de la balise avec l’id ‘publicite’ en rouge. »
28
1. L’attribut id En résumé Vous utilisez cette façon de faire un sélecteur lorsque vous souhaitez changer l’apparence d’un seul élément HTML.
29
2. L’attribut class Sa valeur est un ou des noms de classe.
L’attribut est global, on peut l’assigner à presque toutes les balises HTML. Une même classe peut être assignée à plusieurs balises différentes pour appliquer à chacun le même sélecteur CSS. On y fait référence avec un (.) point.
30
2. L’attribut class Déclaration CSS .monstyle { color: red }
Application HTML <p class="monstyle">Ceci est un paragraphe</p> Signifie littérallement «Met le texte rouge à chaque balise utilisant la classe ‘monstyle’»
31
2. L’attribut class Sélecteur .test { margin-top: 5px; } Application <body class="test"> <h1 class="test">Titre</h1> <p class="test">Paragraphe</p> </body>
32
2. L’attribut class En résumé Vous utilisez cette méthode lorsque vous souhaitez changer l’apparence d’un ou de plusieurs élément HTML.
33
3. Noms des balises Solution globale. À utiliser pour configurer, par exemple, tous les paragraphes, les titres, les liens etc du site web.
34
3. Noms des balises Déclaration h2 { color: red; } Application
<body> <h2>Titre</h2> </body> Signifie littérallement « Mettre le contenu de toutes les balises <h2> en rouge. »
35
3. Noms des balises Sélecteur p { font-size: 12px } Application
<p>Paragraphe 1</p> <p>Paragraphe 2</p> <h2>Titre</h2> <p>Paragraphe 3</p>
36
3. Noms des balises En résumé Vous utilisez cette méthode lorsque vous souhaitez changer l’apparence de toutes les balises HTML du même nom. Par exemple, changer l’espacement entre tous les paragraphes du site web.
37
Les pseudos-classes a:hover { color: red } Applique la couleur rouge quand on survole un lien hypertexte a:visited { color: green } Applique la couleur verte aux liens qui ont été visités a:link { color: black } Les liens hypertexte deviennent noirs
38
Les contextes distincts
Permet de délimiter un contexte spécifique. <span> et </span> est une balise de type en ligne. <div> et </div> est une balise de type bloc.
39
Exemples de sélecteur #cadrepub { propriété : valeur } Signifie littérallement «Assigner la couleur rouge à la balise avec l’id ‘cadrepub’. » .cadrepub Signifie : «Assigner la couleur rouge à la ou les balises possédant la classe ‘cadrepub’. »
40
Exemples de sélecteur #cadrepub h2 Signifie : «Assigner la couleur rouge a chaque balise <h2> a l’intérieur de la balise avec l’id ‘cadrepub’. » .cadrepub h2 Signifie : «Assigner la couleur rouge a chaque balise <h2> a l’intérieur de la ou les balises possédant possédant la classe ‘cadrepub’. »
41
Exemples de sélecteur #cadrepub, h2 Signifie: Concerne la balise dont l’id est ‘cadrepub’ et aussi tous les titres <h2>. [title="fleur"] Signifie: Tous les éléments avec l’attribut titre possédant la valeur ‘fleur’.
42
Exemples de sélecteur h1[title="special"]
Signifie: Tous les titres h1 possédants un attribut title contenant la valeur ‘special’.
![Exemples de sélecteur h1[title= special ]](http://slideplayer.fr/slide/3330119/11/images/42/Exemples+de+s%C3%A9lecteur+h1%5Btitle%3D+special+%5D.jpg "Signifie: Tous les titres h1 possédants un attribut title contenant la valeur ‘special’.")
43
CSS Sélecteur Exemple L’exemple sélectionne balise>balise div>p
Toutes les balises <p> dont le parent est une balise <div> balise+balise div+p Toutes les balises <p> placées immédiattement après une balise <div> [attribut] [target] Tous les éléments avec l’attribut target [attribut=valeur] [target=_blank] Toutes les balises dont l’attribut target est “_blank” [attribut~=valeur] [title=flower] Toutes les balises avec un attribut title qui contient des mots séparés par des espaces, l’un de ceux-ci étant ‘fleur’ [attribut|=langage] [lang|=en] Toutes les balises dont l’attribut lang est “en”, même si la valeur contient un caractère (-), comme dans “en-us”.
44
Exemple (index.html) <div id="main">
<p class="lettrine">L'Organisation mondiale de la santé (OMS) révèle samedi l'existence de 615 cas confirmés de grippe A </p> <div id="cadrepub"> <h2>Publicité :</h2> <p>Ceci est une publicité. </p> </div> <p>L'OMS a établi dans ce dernier bilan que quinze pays étaient touchés par le H1N1.</p>
45
La feuille de style (main.css)
padding: 1px 1em 1px 1em; background-color: #FFFFFF; border-left: 1px solid #990000; } #main .lettrine:first-letter { float:left; margin-right:5px; font- size:3em; #main p { font-size:12px; #main ul { font-size:10px; } h1 { font-size:18px; } img { float:left; padding : 0 1em 0 0; text-decoration: none; }
46
Les unités de mesure Unit Description % Pourcentage in Pouces cm
Centimètres mm Milimètres em 1em est équivalent à la taille de la police actuelle. 2em signifie deux fois la taille de la police actuelle. Par exemple, si une police est de 12 px, 2em équivaut à 24px. Cette unité de mesure est très utile, puisqu’il s’adapte par rapport à la grandeur utilisée par le lecteur. ex 1 ex est la hauteur x-height d’une police (habituellement la moitié de la hauteur de la police). pt point (1 pt équivaut à 1/72 pouce) pc pica (1 pc équivaut à 12 points) px pixels (un point sur un écran d’ordinateur)
47
Références w3schools.com/css/css_reference.asp cssdebutant.com
48
Laboratoire Reproduire en utilisant les CSS la page suivante. Faire une démonstration.
Présentations similaires
