[go: up one dir, main page]
Scribd
Importer
19 vues30 pages

6306966f47358HTML CSS

Ce document présente les étapes de création de maquettes et de pages web en utilisant Lunacy, HTML5 et CSS3. Il explique les concepts de base d'HTML, y compris les balises, les attributs, la structure d'une page, l'organisation du texte, et la création de liens. Des exemples pratiques illustrent chaque concept pour faciliter la compréhension.

Transféré par

joetshimanga91
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
19 vues30 pages

6306966f47358HTML CSS

Ce document présente les étapes de création de maquettes et de pages web en utilisant Lunacy, HTML5 et CSS3. Il explique les concepts de base d'HTML, y compris les balises, les attributs, la structure d'une page, l'organisation du texte, et la création de liens. Des exemples pratiques illustrent chaque concept pour faciliter la compréhension.

Transféré par

joetshimanga91
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 30

1

CHAPITRE 1 : Création des Maquettes avec Lunacy

1. Une Maquette

Une maquette vous permet de réaliser une description très précise de la future
interface graphique de votre site. Il définit notamment la mise en page des contenus et
l'organisation de l'habillage visuel des principales pages : positionnement de votre logo,
des menus de navigation.

1.1. Début avec Lunacy

Lunacy est un logiciel de traitement d’image très utilisé par les graphistes pour créer des images ou
des maquettes.
2

CHAPITRE 2 : Découpage de la maquette avec HTML 5 &


CSS3

1. HTML
HTML signifie « HyperText Markup Language » qu'on peut traduire par «
langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le
contenu d'une page web et sa structure.

HTML n'est pas un langage de programmation. C'est un langage de balises qui


définit la structure de votre contenu. HTML se compose d'une série d'éléments, utilisés
pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître
ou agir d'une certaine façon.

1.1. Les Balises et Attributs


1. Les Balises

Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles
à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il
doit afficher. Les balises se repèrent facilement. Elles sont entourées de "chevrons",
c'est-à-dire des symboles < et >, comme ceci : <balise>

On distingue deux types de balises : les balises en paires et les balises orphelines :

a. Les Balises Paires

Elles s'ouvrent, contiennent du texte, et se ferment plus loin.

Voici à quoi elles ressemblent :

<title>Ceci est un titre</title>

b. Les Balises Orphelines

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis
(par exemple une image):

<img/>

2. Les attributs

Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner
des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante
et a le plus souvent une valeur, comme ceci :
3

<balise attribut="valeur">

Exemple :

<image nom="photo.jpg" />

<citation auteur="Voltaire">

Il faut s'instruire dans la gaieté. Le savoir triste est un savoir mort.

</citation>

Un attribut doit toujours avoir :

1. Un espace entre l'attribut et le nom de l'élément ou l'attribut précédent (s'il y a


plusieurs attributs) ;

2. Un nom (le nom de l'attribut), suivi d'un signe égal « = » ;

3. Des guillemets anglais (") pour encadrer la valeur de l'attribut.

1.2. Structure de Base d’une page HTML 5

La structure de base d’une page HTML 5 se présente comme suit :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>

</body>
</html>

On notera que les balises s'ouvrent et se ferment dans un ordre précis.

Par exemple, la balise <html> est la première que l'on ouvre et c'est aussi la dernière
que l'on ferme. Les balises doivent être fermées dans le sens inverse de leur
ouverture.

Exemple :
 <html><body></body></html> : correct.
4

Une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à
l'intérieur.
 <html><body></html></body> : incorrect, les balises s'entremêlent.

En se référant à la structure d’une page HTML 5, Nous allons expliquer chaque ligne :
a. DOCTYPE

La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui
indique qu'il s'agit bien d'une page web HTML.

b. La Balise html

<html>
</html>
C'est la balise principale du code. Elle englobe tout le contenu de votre page. Nous
remarquerons que la balise fermante </html> se trouve tout à la fin du code.

c. L’en-tête <head> et le corps <body>

Une page web est constituée de deux parties :

 L'en-tête <head> : cette section donne quelques informations générales sur la


page, comme le titre, l'encodage (pour la gestion des caractères spéciaux), etc.
Cette section est généralement assez courte. Les informations que contient
l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations
générales à destination de l'ordinateur. Elles sont cependant très importantes.

 Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce


que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps qu’on
écrit la majeure partie du code.

d. L’encodage (Charset)

<meta charset="utf-8" />

Cette balise indique l'encodage utilisé dans votre fichier .html

Il ne suffit pas de dire que votre fichier est en UTF-8. Il faut aussi que votre fichier soit
bien enregistré en UTF-8. C'est heureusement le cas désormais par défaut dans la
plupart des éditeurs de texte.

e. Le titre principal de la page <title>

C'est le titre de votre page, probablement l'élément le plus important ! Toute page doit
avoir un titre qui décrit ce qu'elle contient.

Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet
du navigateur).
5

Il faut savoir que le titre apparaît aussi dans les résultats de recherche, comme sur
Google.

f. Les commentaires

Un commentaire en HTML est un texte qui sert simplement de mémo. Il n'est pas
affiché, il n'est pas lu par l'ordinateur, cela ne change rien à l'affichage de la page.

Un commentaire est une balise HTML avec une forme bien spéciale :

<!-- Ceci est un commentaire -->

1.3. Organisation du Texte

Nous allons voir successivement dans cette partie :

 comment rédiger des paragraphes ;


 comment structurer sa page avec les titres ;
 comment donner de l'importance à certains mots de son texte ;
 comment organiser les informations sous forme de listes.

a. Les paragraphes
Lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes.

Le langage HTML propose justement la balise <p> pour délimiter les paragraphes.

<p>Bonjour et bienvenue sur mon site !</p>

 <p> signifie « Début du paragraphe » ;


 </p> signifie « Fin du paragraphe ».
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Paragraphes</title>
</head>

<body>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
6

</html>
b. Le saut à la ligne
En HTML, si vous appuyez sur la touche Entrée , cela ne crée pas une nouvelle
ligne comme nous en avons l'habitude.
Tout le texte s'affiche sur la même ligne alors qu'on est bien allé à la ligne dans le code
donc taper frénétiquement sur la touche Entrée dans l'éditeur de texte ne sert donc
strictement à rien.

En fait, si vous voulez écrire un deuxième paragraphe, il vous suffit d'utiliser une
deuxième balise <p> .

Il existe une balise à la ligne <br/>, c’est une balise orpheline qui sert juste à indiquer
qu'on doit aller à la ligne : <br/> .
Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe.

<body>
<p>Bonjour et bienvenue sur mon site ! <br />
Visitez les autres pages.
<p>
</body>

c. Les Titres

En HTML, on est verni, on a le droit d'utiliser six niveaux de titres différents.

On a donc six balises de titres différentes :

 <h1> </h1> : signifie « titre très important ». En général, on s'en sert pour
afficher le titre de la page au début de celle-ci ;
 <h2> </h2> : signifie « titre important » ;
 <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un «
sous-titre », si vous voulez) ;
 <h4> </h4> : titre encore moins important ;
 <h5> </h5> : titre pas important ;
 <h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.

Attention : A ne pas confondre avec la balise <title>. La balise <title> affiche le titre
de la page dans la barre de titre du navigateur, les titres <h1> et compagnie, eux,
servent à créer des titres qui seront affichés dans la page web.
7

d. La mise en valeur

Au sein de nos paragraphes, certains mots sont parfois plus importants que d'autres
et que nous aimerons les faire ressortir. HTML vous propose différents moyens de
mettre en valeur le texte de votre page.

 <i></i> ou <em></em> permet de mettre le texte en italique


 <b> ou <strong></strong> permet de mettre le texte en gras
 <u></u> permet de surligner le texte
 <mark></mark> permet de mettre une couleur de surlignage

e. Les listes

Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos
informations.
Nous allons découvrir ici deux types de listes :

 les listes non ordonnées ou listes à puces ;


 les listes ordonnées ou listes numérotées, ou encore énumérations.

Liste non ordonnée


Une liste non ordonnée ressemble à ceci :

 Fraises
 Framboises
 Cerises
C'est un système qui nous permet de créer une liste d'éléments sans notion d'ordre
(il n'y a pas de « premier » ni de « dernier »).

Créer une liste non ordonnée est très simple. Il suffit d'utiliser la balise <ul> que l'on
referme un peu plus loin avec </ul> .

<ul></ul>

On va écrire chacun des éléments de la liste entre deux balises <li></li> . Chacune
de ces balises doit se trouver entre <ul> et </ul>.

<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>
8

Liste ordonnée
Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut
remplacer <ul></ul> par <ol></ol>.

On utilise toujours des balises <li></li> pour délimiter les éléments.

<h1>Ma journée</h1>

<ol>
<li>Je me lève.</li>
<li>Je mange et je bois.</li>
<li>Je retourne me coucher.</li>
</ol>

1.4. Création des liens

Comme nous le savons, un site web est composé de plusieurs pages. Dans cette
partie, nous allons justement apprendre à créer des liens entre nos pages.

Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a> . Il
faut cependant lui ajouter un attribut, href , pour indiquer vers quelle page le lien doit
conduire.
9

a. Un lien vers un autre site

le code ci-dessous est un lien qui amène vers Google, situé à


l'adresse https://google.com :

<a href="https://google.com">Google</a>

Plaçons ce lien au sein d'un paragraphe. Voici donc comment reproduire l'exemple :

<p>Bonjour. Vous souhaitez visiter <a href="https://google.com">google</a> ? <br/>


cliquez dessus ;
</p>

Si on veut faire un lien vers un autre site, il suffit donc de copier son adresse (on parle d'URL)
en http:// .

Notez que certains liens commencent parfois par https://

b. Un lien vers une autre page de son site

 Deux pages situées dans un même dossier

Pour commencer, nous allons créer deux fichiers correspondant à deux pages HTML
différentes.

Exemple : Créons 2 pages Html, Index.html et Contact.html

si les deux fichiers sont situés dans le même dossier, il suffit d'écrire comme cible du
lien le nom du fichier vers lequel on veut amener.

<p>Bonjour. Souhaitez-vous consulter <a href="contact.html">Contact</a> ?</p>

 Deux pages situées dans des dossiers différents

Imaginons que contact.html se trouve dans un sous-dossier appelé contenu ,


comme à la figure suivante.
10

Dans ce cas de figure, le lien doit être rédigé comme ceci :

<p> Bonjour. Souhaitez-vous consulter <a href="contenu/contact.html"> Contact</a>


?</p>

S'il y avait plusieurs sous-dossiers, on écrirait ceci :

<p> Bonjour. Souhaitez-vous consulter <a href="contenu/autreDossier/contact.html">


Contact</a> ?</p>

Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » dans
l'arborescence, il faut écrire deux points, comme ceci :

<p> Bonjour. Souhaitez-vous consulter <a href=".. /contact.html"> Contact</a> ?</p>


11

c. Un lien vers un ancre

Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages
HTML lorsqu'elles sont très longues.

En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page,
pour que le visiteur puisse sauter directement à la partie qui l'intéresse.

Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir
de repère. Ce peut être n'importe quelle balise.

Exemple :

<h2 id="mon_ancre">Titre</h2>

Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois


l'attribut href contiendra un dièse (#) suivi du nom de l'ancre.

Exemple :

<a href="#mon_ancre">Aller vers l'ancre</a>

 Lien vers une ancre située dans une autre page

un lien qui ouvre une autre page et qui amène directement à une ancre située plus bas
sur cette page.

Il suffit de taper le nom de la page, suivi d'un dièse ( # ), suivi du nom de l'ancre.

Exemple :

<a href="contact.html#mon_ancre">

vous amènera sur la page contact.html , directement au niveau de l'ancre


appelée mon_ancre .

d. Autres cas pratiques des liens

 Un lien qui affiche une infobulle au survol

Vous pouvez utiliser l'attribut title qui affiche une bulle d'aide lorsqu'on pointe sur le
lien. Cet attribut est facultatif.

<p>Bonjour. Souhaitez-vous visiter <a href="https://google.com" title="Pour effectuer


une recherche">Google</a> ?</p>

La bulle d'aide peut être utile pour informer le visiteur avant même qu'il n'ait cliqué sur
le lien.
12

 Un lien qui ouvre une nouvelle fenêtre

Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela,
on rajoutera target="_blank" à la balise <a> :
<p>Bonjour. Souhaitez-vous visiter <a href="https://google.com"
target="_blank">Google</a> ?</p>

Un lien pour envoyer un e-mail


Vous pouvez utiliser des liens de type mailto.

Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de


l'attribut href comme ceci :

<p><a href="mailto:votrenom@domaine.com">Envoyez-moi un e-mail !</a></p>

Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse e-mail où
on peut vous contacter.

 Un lien pour télécharger un fichier

il faut procéder exactement comme si vous faisiez un lien vers une page web, mais en
indiquant cette fois le nom du fichier à télécharger.

Supposons que nous voulions faire télécharger monfichier.zip.

Plaçons simplement ce fichier dans le même dossier que votre page web (ou dans un
sous-dossier) et faites un lien vers ce fichier :

<p><a href="monfichier.zip">Télécharger le fichier</a></p>

Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer la
procédure de téléchargement lorsqu'on cliquera sur le lien.

1.5. Insertion des images

Il existe différents formats d'images que l'on peut utiliser sur des sites web, et on ne
doit pas les choisir au hasard. En effet, les images sont parfois volumineuses à
télécharger, ce qui ralentit le temps de chargement de la page (beaucoup plus que le
texte !).

1. Les Différents formats d’images


Voici quel format à adopter en fonction de l'image que vous avez :

 Une photo : utilisez un JPEG.


Les images JPEG sont enregistrées avec l'extension .jpg ou .jpeg .
13

 N'importe quel graphique avec peu de couleurs (moins de 256) : utilisez un


PNG 8 bits, ou éventuellement un GIF.
Le format PNG (Portable Network Graphics) est le plus récent de tous. il peut être
rendu transparent et il n'altère pas la qualité de l'image.

 Une image animée : utilisez un GIF animé.


le GIF conserve un certain avantage que le PNG n'a pas : il peut être animé.

Les erreurs à éviter lors de l’insertion d’une image

 Bannissez les autres formats

Les autres formats non cités ici, comme le format BITMAP ( *.bmp ) sont à bannir car
bien souvent ils ne sont pas compressés, donc trop gros.

Ils ne sont pas du tout adaptés au Web. On peut en mettre sur son site, mais le
chargement sera vraiment extrêmement long.
 Choisissez bien le nom de votre image

Il est préférable d'enregistrer nos fichiers avec des noms en minuscules, sans espace
ni accent ; par exemple : mon_image.png.

On peut remplacer les espaces par le caractère underscore (« _ »).

2. Insertion d’une image

La balise qui permet l’insertion d’une image dans un page web, c’est la balise <img/>

C'est une balise orpheline (comme <br/> ). Cela veut dire qu'on n'a pas besoin de
l'écrire en deux exemplaires, comme la plupart des autres balises que nous avons
vues jusqu'ici.

La balise doit être accompagnée d’un attribut obligatoire:

 src : il permet d'indiquer où se trouve l'image que l'on veut insérer.

On peut soit mettre un chemin absolu (ex. : http://www.site.com/fleur.png ),


soit mettre le chemin en relatif. Ainsi, si votre image est dans un sous-
dossier images , vous devrez taper : src="images/fleur.png"

<p>
Voici une photo:<br /> <img src="images/fleur.jpg"/>
</p>

 Les autres attributs d’une image

Si vous souhaitez aller plus loin dans l’insertion de votre image sur votre site web vous
allez pouvoir compléter votre balise <img/> avec d’autres attributs autres que src.

Parmi ces attributs on retrouvera (les plus connus) :


14

 Alt : L’attribut alt ou texte alternatif est un attribut très important sur une image
car celui-ci va offrir 2 possibilités importante à votre image :

1. Être lu par un lecteur d’écran qui serait utilisé par un utilisateur


déficient visuellement.
2. L’image pourra être indexé par les moteurs de recherche, Google
pour le plus connu, sur les mots-clés contenus dans votre balise alt.

 Title : Cet attribut va vous permettre d’ajouter à votre image une bulle d’aide
qui apparaîtra au survol de celle-ci pour apporter une information
complémentaire à la compréhension de l’image.

 Height et width : Ces deux attributs vont vous permettre de définir une
hauteur (height) et une largeur (width) de base à votre image, ce qui est
aussi possible en CSS. (en px, %, em, rem,…)

<p>
Voici une photo :<br />
<img src="images/fleur.jpg" alt="Photo de montagne" title="C'est une rose"
heigth="20px" width="20px" />
</p>

 Miniature cliquable
Si votre image est très grosse, il est conseillé d'en afficher la miniature sur votre site.
Ajoutez ensuite un lien sur cette miniature pour que vos visiteurs puissent afficher
l'image en taille originale.

<p>
Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !<br />
<a href="img/montagne.jpg"><img src="img/montagne_mini.jpg" alt="Photo de
montagne" title="Cliquez pour agrandir" /></a>
</p>
15

 Les Figures
Les figures peuvent être de différents types :

 images ;
 codes source ;
 citations ;
 etc.
En HTML5, on dispose de la balise <figure> . Voici comment on pourrait l'utiliser :

<figure>
<img src="images/blocnotes.png" alt="Bloc-Notes" />
</figure>

Une figure est le plus souvent accompagnée d'une légende. Pour ajouter une légende,
utilisez la balise <figcaption> à l'intérieur de la balise <figure> , comme ceci :

<figure>
<img src="images/blocnotes.png" alt="Bloc-Notes" />
<figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>

La balise <figure> a un rôle avant tout sémantique. Cela veut dire qu'elle indique
à l'ordinateur que l'image a du sens et qu'elle est importante pour la bonne
compréhension du texte.

Cela peut permettre à un programme de récupérer toutes les figures du texte et de les
référencer dans une table des figures.

Une figure peut très bien comporter plusieurs images. Voici un cas où cela se justifie :

<figure>
<img src="images/internetexplorer.png" alt="Logo Internet Explorer" />
<img src="images/firefox.png" alt="Logo Mozilla Firefox" />
<img src="images/chrome.png" alt="Logo Google Chrome" />
<figcaption>Logos des différents navigateurs</figcaption>
</figure>
16

2. MISE EN FORME AVEC


CSS 3
Les feuilles de style en cascade, généralement appelées CSS de l'anglais « Cascading
Style Sheets », forment un langage informatique qui décrit la présentation des
documents HTML, Il vient le compléter pour vous aider à mettre en forme votre page
web.

De la même façon que HTML, CSS n'est pas vraiment un langage de programmation.
C'est un langage de feuille de style, c'est-à-dire qu'il permet d'appliquer des styles sur
différents éléments sélectionnés dans un document HTML.

Sur une page web, les éléments sont positionnés grâce à l’HTML bien sûr, mais
également avec du code CSS. Les sélecteurs et les attributs CSS permettent de mettre
en page et d’ajouter du style au code HTML : couleurs, marges, espacements, tailles
de police, … Le CSS peut également être utilisé pour créer des animations et des
effets de transition. Il est aussi essentiel pour créer un site internet responsive.

2.1. Ecriture du CSS

Vous avez le choix car on peut écrire du code en langage CSS à trois endroits
différents :

1. Dans un fichier .css (méthode la plus recommandée) ;


2. Dans l'en-tête <head> du fichier HTML ;
3. Directement dans les balises du fichier HTML via un attribut style
(méthode la moins recommandée).
1. Dans Un Fichier .CSS

On écrit le plus souvent le code CSS dans un fichier spécial ayant


l'extension .css (contrairement aux fichiers HTML qui ont l'extension .html ). C'est
la méthode la plus pratique et la plus souple. Cela nous évite de tout mélanger dans
un même fichier.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Mon CSS</title>
17

</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
</body>
</html>

On notera que le contenu de la ligne , <link rel="stylesheet"


href="style.css" /> : c'est elle qui indique que ce fichier HTML est associé à un
fichier appelé style.css et chargé de la mise en forme.

Enregistrez le fichier en lui donnant un nom qui se termine par .css ,


comme style.css . Placez ce fichier .css dans le même dossier que votre
fichier .html .

2. Dans l’en-tête du fichier HTML

Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML : cela consiste
à insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-
tête <head>.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p
{
color: blue;
}
</style>
<title>Mon CSS</title>
</head>

<body>
<h1>Mon site</h1>
</body>
</html>

3. Dans les balises du fichier HTML (Non recommandé)

Une méthode, à manipuler avec précaution : vous pouvez ajouter un attribut style à
n'importe quelle balise. Vous insérerez votre code CSS directement dans cet attribut :
18

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Premiers tests du CSS</title>
</head>

<body>
<p style="color: blue;">Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
</body>
</html>

2.2. Méthode à choisir pour l’écriture du CSS

La méthode la plus recommandé est de placer son code css dans un fichier spécial
ayant l'extension .css.

Si vous placez le code CSS directement dans le fichier HTML, il faudra copier ce code
dans tous les fichiers HTML de votre site.

Si vous travaillez avec un fichier CSS externe, vous n'aurez besoin d'écrire cette
instruction qu'une seule fois pour tout votre site, comme le montre la figure suivante.
19

2.3. Sélection d’une balise

p
{
color: blue;
}
Dans un code CSS comme celui-ci, on trouve trois éléments différents :

 des noms de balises : on écrit les noms des balises dont on veut modifier
l'apparence. Par exemple, si je veux modifier l'apparence de tous les
paragraphes <p> , je dois écrire p ;
 des propriétés CSS : les « effets de style » de la page sont rangés dans des
propriétés.
Il y a par exemple la propriété color qui permet d'indiquer la couleur du
texte, font-size qui permet d'indiquer la taille du texte, etc.
 les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par
exemple, pour la propriété color , il faut indiquer le nom de la couleur.
Pour font-size , il faut indiquer quelle taille on veut, etc.

Schématiquement, une feuille de style CSS ressemble donc à cela :

balise1
{
propriete1: valeur1;
propriete2: valeur2;
}
balise2
{
propriete1: valeur1;
propriete2: valeur2;
}
20

On écrit le nom de la balise (par exemple h1 ) et on ouvre des accolades pour, à


l'intérieur, mettre les propriétés et valeurs que l'on souhaite.
On peut mettre autant de propriétés que l'on veut à l'intérieur des accolades. Chaque
propriété est suivie du symbole « deux-points » ( : ) puis de la valeur correspondante.
Enfin, chaque ligne se termine par un point-virgule ( ; ).
h1
{
color: blue;
}

2.4. Sélection de plusieurs Balises

h1, em
{
color: blue;
}
il existe un moyen en CSS d'aller plus vite si les deux balises doivent avoir la même
présentation. Il suffit de combiner la déclaration en séparant les noms des balises par une
virgule.

2.5. Application d’un style avec les attributs : Id et Class

Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ?

Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur
toutes les balises :

 l'attribut class ;
 l'attribut id .
les attributs class et id sont quasiment identiques.

Code : Html

<h1 class="nom_class">Bonjour </h1>


<p class="nom_class"> </p>
<img Id="nom_id" />
Code : Css

.nom_class
{
}
#nom_id
{
}
21

2.6. Les Balises universelles

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id ) à certains mots qui,
à l'origine, ne sont pas entourés par des balises.

Si, par exemple, je veux modifier uniquement « bienvenue » dans le paragraphe suivant :

<p>Bonjour et bienvenue sur mon site !</p>

En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification particulière :

 <span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on
place au sein d'un paragraphe de texte pour sélectionner certains mots uniquement.

Cette balise s'utilise donc au milieu d'un paragraphe et c'est celle dont nous allons nous servir pour
colorer « bienvenue » ;

2.7. Les sélecteurs avancés


 Sélecteur universelle

*{
}
Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel.

 Balise contenu dans une autre

h3 em
{
}
Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3> . Notez qu'il n'y a
pas de virgule entre les deux noms de balises.

 Une Balise qui suit une autre A + B

h3 + p
{
}
Sélectionne la première balise <p> située après un titre <h3> .

 Une Balise qui possède un attribut

a[title]
{
}
Sélectionne tous les liens <a> qui possèdent un attribut title .
22

2.8. Formatage du texte en css

Pour modifier la taille du texte, on utilise la propriété CSS font-size .

 indiquer une taille absolue : en pixels, en centimètres ou millimètres. Cette


méthode est très précise, mais il est conseillé de ne l'utiliser que si c'est
absolument nécessaire, car on risque d'indiquer une taille trop petite pour
certains lecteurs ;
 indiquer une taille relative : en pourcentage, « em » ou « ex », cette
technique a l'avantage d'être plus souple. Elle s'adapte plus facilement aux
préférences de taille des visiteurs.
p{
font-size: 14px; /* Paragraphes de 14 pixels */
}
h1{
font-size: 40px; /* Titres de 40 pixels */
}

a. Appliquez une taille relative

C'est la méthode recommandée, car le texte s'adapte alors plus facilement aux
préférences de tous les visiteurs.

Il y a plusieurs moyens d'indiquer une valeur relative.

 xx-small : minuscule ;
 x-small : très petit ;
 small : petit ;
 medium : moyen ;
 large : grand ;
 x-large : Très grand ;
 xx-large : Gigantesque.
p{
font-size: small;
}
h1{
font-size: large;
}

b. La police

La propriété CSS qui permet d'indiquer la police à utiliser est font-family.

Vous devez écrire le nom de la police comme ceci :

p{
font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}
23

Si le nom de la police comporte des espaces, on conseille de l'entourer de guillemets,


comme c’est fait pour « Arial Black ».

c. L’alignement

On utilise la propriété text-align et on indique l'alignement désiré :

- left : le texte sera aligné à gauche (c'est le réglage par défaut).


- center : le texte sera centré.
- right : le texte sera aligné à droite.
- justify : le texte sera « justifié ».

d. Mise en valeur
 Mettre en Gras

La propriété CSS pour mettre en gras est font-weight et prend les valeurs suivantes

- bold : le texte sera en gras ;


- normal : le texte sera écrit normalement (par défaut).

 Soulignement et autres décorations

La propriété CSS associée porte bien son nom : text-decoration.

Voici les différentes valeurs qu'elle peut prendre :

- underline : souligné.
- line-through : barré.
- overline : ligne au-dessus.
- blink : clignotant.
- none : normal (par défaut).
e. Les flottants

Le CSS nous permet de faire flotter un élément autour du texte. On dit aussi qu'on fait
un « habillage ».

float (« flottant » en anglais).

Cette propriété peut prendre deux valeurs très simples :

- left : l'élément flottera à gauche.


- right : l'élément flottera à droite.
24

L'utilisation des flottants est très simple :

1. Vous appliquez un float à une balise.

2. Puis vous continuez à écrire du texte à la suite normalement.

2.9. Couleur et fond en css


a. Couleur du texte

La propriété qui permet de modifier la couleur du texte : il s'agit de la propriété color.

h1 {
color: #000000 ; //couleur noire
}
b. Couleur de Fond

Pour indiquer une couleur de fond, on utilise la propriété CSS background-color.

Elle s'utilise de la même manière que la propriété color, c'est-à-dire que vous pouvez
taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la
méthode RGB.

body {
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}
c. Image de Fond

La propriété permettant d'indiquer une image de fond est background-image.

Comme valeur, on doit renseigner url("nom_de_l_image.png").

body {
background-image: url("../image/neige.png");
}
25

On peut compléter la propriété background-image par plusieurs autres propriétés qui


permettent de changer le comportement de l'image de fond.

La propriété CSS background-attachment permet de « fixer » le fond.

Deux valeurs sont disponibles :

- fixed : l'image de fond reste fixe ;


- scroll : l'image de fond défile avec le texte (par défaut).

Depuis CSS3, il est possible de donner plusieurs images de fond à un élément. Pour
cela, il suffit de séparer les déclarations par une virgule :

body {
background: url("soleil.png") fixed no-repeat top right,
url("neige.png") fixed;
}
2.10. Opacité, bordures et ombres
a. L’Opacité

La propriété opacity, très simple, permet d'indiquer le niveau d'opacité.


Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par
défaut.
Avec une valeur de 0, l'élément sera totalement transparent.
Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6,
votre élément sera opaque à 60%.
Img {
Opacity : 0.6 /* l’opacité de l’image sera à 60% */
}

b. Les bordures
Bordures Standard

De nombreuses propriétés CSS vous permettent de modifier l'apparence de vos


bordures : border-width, border-color, border-style.

h1 {
border: 3px blue solid;
}
26

Bordures Arrondies

La propriété border-radius va nous permettre d'arrondir facilement les angles de


n'importe quel élément. Il suffit d'indiquer la taille (« l'importance ») de l'arrondi en
pixels.

p{
border-radius: 10px ;
}

c. Les ombres

Il existe deux types d'ombres :

- les ombres des boîtes ;


- les ombres du texte.

Les propriétés box-shadow, text-shadow prennent quatre valeurs dans l'ordre suivant :

1. le décalage horizontal de l'ombre ;


2. le décalage vertical de l'ombre ;
3. l'adoucissement du dégradé ;
4. la couleur de l'ombre.
p{
box-shadow : 1px 1px 1px black; /* donnera de l’ombre à la boite */
text-shadow : 1px 1px 1px black; /* donnera de l’ombre au texte */
}
27

2.11. Les apparences dynamiques

Le CSS nous permet aussi de modifier l'apparence des éléments de façon dynamique,
c'est-à-dire que des éléments peuvent changer de forme une fois que la page a été
chargée. Nous allons faire appel à une fonctionnalité puissante du CSS : les pseudo-
formats.

Changer l'apparence :

a. au survol ; « Quand la souris est sur le lien »

a:hover
{
text-decoration: none;
color: red;
font-style: italic;
}
:hover signifie « survoler ». a:hover peut donc se traduire par : « Quand la
souris est sur le lien ».
À partir de là, c'est à vous de définir l'apparence que doivent avoir les liens lorsqu'on
pointe dessus.

b. lors du clic ;

Le pseudo-format :active permet d'appliquer un style particulier au moment du clic.


En pratique, il n'est utilisé que sur les liens.

Le lien gardera cette apparence très peu de temps : en fait, le changement intervient
lorsque le bouton de la souris est enfoncé. En clair, ce n'est pas forcément toujours
bien visible.

a:active /* Quand le visiteur clique sur le lien */


{
background-color: #FFCC66;
}
c. lors du focus (élément sélectionné) ;

Le pseudo-format :focus applique un style lorsque l'élément est sélectionné.

a:focus /* Quand le visiteur sélectionne le lien */


{
background-color: #FFCC66;
}
28

d. lorsqu'un lien a été consulté.

Il est possible d'appliquer un style à un lien vers une page qui a déjà été vue. Par
défaut, le navigateur colore le lien en un violet.

En pratique, sur les liens consultés, on ne peut pas changer beaucoup de choses à
part la couleur.

a:visited /* Quand le visiteur a déjà vu la page concernée */


{
color: #AAA; /* Appliquer une couleur grise */
}

2.12. Les marges

Il faut savoir que tous les blocs possèdent des marges. Il existe deux types de
marges :

 les marges intérieures ;


 les marges extérieures.

En CSS, on peut modifier la taille des marges avec les deux propriétés suivantes :

 padding : indique la taille de la marge intérieure. À exprimer en général en


pixels (px) ;
 margin : indique la taille de la marge extérieure. Là encore, on utilise le plus
souvent des pixels.

Voici la liste pour margin :

• margin-top : marge extérieure en haut ;


• margin-bottom : marge extérieure en bas ;
• margin-left : marge extérieure à gauche ;
• margin-right : marge extérieure à droite.
29

Et la liste pour padding :


• padding-top : marge intérieure en haut ;
• padding-bottom : marge intérieure en bas ;
• padding-left : marge intérieure à gauche ;
• padding-right : marge intérieure à droite.

a. Centrer un bloc
Pour centrer, il faut respecter les règles suivantes :

 donnez une largeur au bloc (avec la propriété width ) ;


 indiquez que vous voulez des marges extérieures automatiques, comme ceci
: margin: auto;

2.13. Ajuster le texte dans un bloc

Lorsqu'on commence à définir des dimensions précises pour nos blocs, il arrive qu'ils
deviennent trop petits pour le texte qu'ils contiennent.

Si on veut que le texte ne dépasse pas des limites du paragraphe, il va falloir utiliser
la propriété overflow.

• visible (par défaut) : si le texte dépasse les limites de taille, il reste visible et
sort volontairement du bloc ;

• hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne


pourra pas voir tout le texte ;

• scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette
fois, le navigateur mettra en place des barres de défilement pour qu'on puisse
lire l'ensemble du texte.

• auto : c'est le mode « pilote automatique ». En gros, c'est le navigateur qui


décide de mettre ou non des barres de défilement (il n'en mettra que si c'est
nécessaire). C'est la valeur la plus conseillée d'utiliser.
30

Si vous devez placer un mot très long dans un bloc, qui ne tient pas dans la
largeur, word-wrap permet de forcer la césure des très longs mots (généralement des
adresses un peu longues).

p
{
word-wrap: break-word;
}
Avec le code ci-dessus, la césure sera forcée dès que le texte risque de dépasser.

Vous aimerez peut-être aussi