docAide HTML et CSS
download 
Plainte Transcription
Aide HTML et CSS
BTS SIO
PPE
Aide CSS
1 OBJECTIFS
Ce document fournit un ensemble d'information pour pouvoir créer des pages web, utilisant un
formatage CSS.
2 PRÉ-REQUIS
Afin de mieux comprendre les informations données, il est recommandé :
•
D'avoir suivi le cours SI4 Programmation de base
•
D'avoir un éditeur de code tel que Notepad++
•
D'avoir un éditeur web de type WYSIWYG tel que BlueGriffon
3 DÉFINITIONS
3.1 HTML
HTML (Hyper Text Markup Language) est un langage de formalisation de données, universellement
utilisé pour les pages web.
Il utilise des balises dans le texte d'affichage. Il est lisible avec un simple éditeur de texte mais les
navigateurs peuvent interpréter les balises, ce qui enrichit le texte.
D'autre part, certaines balises ne sont pas visibles directement dans la page web, mais permettent
d'y ajouter des informations utiles pour les navigateurs et les moteurs de recherches.
3.2 CSS
Les feuilles de style (en anglais, Cascading Style Sheets) ne contiennent que des informations de
formatage de contenu. Parfois, le code CSS peut être inclus dans une page HTML, d'autres fois, il
sera dans un fichier séparé. Il utilise également des balises et est également lisible avec un éditeur
de texte.
David ROUMANET
26/02/2016
1
BTS SIO
PPE
Aide CSS
4 FONCTIONNEMENT HTML
Le fichier HTML pourrait ne contenir aucune balise. Il est possible de prendre un fichier ne
contenant que du texte et de le renommer en .htm ou .html et il sera lisible dans un navigateur.
Par la suite, nous utiliserons la structure de base du fichier HTML, c'est à dire, deux sections :
•
Une section HEAD : invisible pour l'utilisateur mais contenant de nombreuses informations
pour le navigateur ou les moteurs de recherche.
•
Une section BODY : les informations pour l'utilisateur.
Les informations se présentent comme suit :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8"
<title></title>
</head>
<body>
<p><br>
</p>
</body>
</html>
http-equiv="content-type">
C'est la structure de base lors de la création d'une nouvelle page dans l'éditeur BlueGriffon.
4.1 BALISES
Les balises sont des instructions que les navigateurs interprètent pour mettre en forme le texte, ou
bien pour placer des éléments ou encore pour délimiter les sections.
Les balises sont comprises entre les caractères < et >.
Les balises sont ouvrantes lorsqu’il n'y a rien de spécifiés et fermantes lorsque le caractère / est
présent.
La section délimitée par la balise <html> se termine par </html>
Les sections HEAD et BODY sont délimités par <head>...</head> et <body>...</body>
Une exception correspond aux balises <meta ...>
David ROUMANET
26/02/2016
2
BTS SIO
PPE
Aide CSS
4.2 EXEMPLES DE BALISES
Il existe de nombreuses balises, pour toutes sortes de mises en forme de données :
•
Formatage de texte : <b>...</b> pour un texte en gras, <strong>...</strong> également,
<i>...</i> pour un texte en italique, <u>...</u> pour un soulignement.
•
Formatage de style de texte : <h1>...</h1>, <h2>...</h2>… pour des titres et <p>...</p>
pour les paragraphes
•
Création de tableau : <table> <tr> <td>...</td><td>...</td></tr> </table> pour une table
d'une ligne (balise <tr>) et deux colonnes (balise <td>)
•
insertion d'image : <img title="image" alt="image" src="image.jpg" /> il est intéressant de
noter que l'ouverture et la fermeture de la balise se font dans la même balise : <img … />
•
etc.
Vous trouverez un descriptif de toutes les balises existantes sur de nombreux sites web comme
celui-ci :
https://developer.mozilla.org/fr/docs/Web/HTML/Element
5 FONCTIONNEMENT CSS
CSS est un langage qui vient combler les inconvénients du langage HTML pour le web :
•
mélange du fond (le texte) et de la forme (les balises)
•
difficultés de créer des modèles puis de les modifier par la suite sans toucher au fond
•
adaptation au web 2.0 dynamique (par l'utilisation de menus, de sections, etc.)
•
adaptation aux différents périphériques (smartphones, tablettes, ordinateurs ; écrans
horizontaux ou verticaux)… souvent nommé "web responsive"
CSS vient donc en complément des balises HTML et peut s'intégrer dans chaque balise (au sein du
fond) ou bien dans l'entête HTML (section HEAD) ou encore, être rédigé dans un fichier (avec
l'extension .css) avec un lien vers ce fichier dans la section HEAD :
<link rel="stylesheet" type="text/css" href="page.css" media="all"/>
Cette solution est la solution recommandée : en cas de changement de style, de couleurs, de
formes, il n'y a que le fichier contenant le style à modifier, pour toutes les pages concernées.
David ROUMANET
26/02/2016
3
BTS SIO
PPE
Aide CSS
Les balises sont encore plus nombreuses en CSS mais un éditeur comme BlueGriffon peut nous
éviter de les apprendre par cœur. Toutefois, pour comprendre ce que fait l'éditeur, il est important
de pouvoir retrouver les arguments et la syntaxe d'une commande CSS, voici un lien utile :
http://www.w3schools.com/css/default.asp
5.1 BALISES DE STYLE (TITRE)
CSS est orienté objet : c'est à dire qu'un style définit s'applique uniquement sur les objets
correspondant exactement à la description.
Voyons la balise HTML <h1>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8"
<title></title>
</head>
<body>
<h1>Voici le titre</h1>
<p>Ici mon texte</p>
<p><br>
</p>
</body>
</html>
http-equiv="content-type">
L'affichage sera par défaut en Times new Roman, noir.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<style type="text/css">
h1 {
color: rgb(255, 153, 0);
background-color: rgb(0, 51, 51);
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Voici le titre</h1>
<p>Ici mon texte</p>
<p><br>
</p>
</body>
</html>
En modifiant le style h1 dans la feuille de style, le résultat est immédiat et s'appliquera partout.
David ROUMANET
26/02/2016
4
BTS SIO
PPE
Aide CSS
Dans le logiciel BlueGriffon, la modification du style h1 pour tout le document se fera en écrivant
un texte, en y appliquant le style h1 par défaut (Liste déroulante en haut à gauche, choisir Titre de
niveau 1) puis dans la barre latérale, choisir l'onglet "Style CSS" et modifier les attributs.
5.2 BALISES DE CRÉATION DE SECTIONS
Une page web ne se présente presque jamais comme un texte linéaire, prenant la largeur
complète de la fenêtre du navigateur.
On trouve en général plusieurs sections :
•
Un en-tête qui reste affiché en permanence
•
Un menu latéral (par exemple)
•
Des articles ou blocs de texte au centre
•
Des encarts (publicités, définitions, flux RSS…)
Les balises CSS permettent de créer un maquette de la page, grâce à deux types de balises :
•
Les balises de type 'inline' (en ligne) : elles affichent les contenus les uns après les autres,
sur la même ligne jusqu'à la fin de la largeur de la page. Par exemple "écriture
<b>forte</b>"
•
Les balises de type 'block' (bloc) : elles s'imbriquent ou bien s’enchaînent les unes à la suite
des autres. Par exemple "<p>ceci est un paragraphe.</p>"
David ROUMANET
26/02/2016
5
BTS SIO
PPE
Aide CSS
Voici un exemple possible de site :
<header>
<nav>
<aside>
<section>
<section>
<footer>
Le code CSS pour obtenir un format équivalent serait (la balise <aside> a été omise) :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8"
<title>Exemple CSS</title>
<style type="text/css">
h1 {
color: rgb(255, 153, 0);
background-color: rgb(0, 51, 51);
font-family: Arial, Helvetica, sans-serif;
right: auto;
z-index: auto;
position: relative;
top: auto;
bottom: auto;
left: auto;
}
http-equiv="content-type">
header {
background-color: rgb(204, 0, 0);
}
footer {
background-color: rgb(102, 0, 0);
color: rgb(255, 255, 255);
text-align: center;
}
nav {
font-family: Arial, Helvetica, sans-serif;
David ROUMANET
26/02/2016
6
BTS SIO
PPE
Aide CSS
font-size: 12px;
float: left;
}
section {
border-top-color: rgb(0, 0, 153);
border-right-color: rgb(0, 0, 153);
border-bottom-color: rgb(0, 0, 153);
border-left-color: rgb(0, 0, 153);
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
left: 90px;
position: relative;
bottom: auto;
top: auto;
right: auto;
width: 600px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
</style> </head>
<body>
<header>
<h1>BTS SIO</h1>
<p>Le menu de l'entête</p>
</header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">BTS</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<aside>
<h1>Bienvenue sur le site du BTS SIO</h1>
<p>Vous apprendrez tout sur ce BTS merveilleux animé par d'excellents
professeurs compétents et géniaux.</p>
</aside>
<article>
<h1>Ce site n'est pas l'oeuvre d'un élève</h1>
David ROUMANET
26/02/2016
7
BTS SIO
PPE
Aide CSS
<p>Qui irait dire que ses profs sont aussi bons ? logique,
n'est-ce pas... ?</p>
</article>
</section>
<footer>
<p>CC: BY-NC-SA ROUMANET<br>
<a href="#">[email protected]</a></p>
</footer>
</body>
</html>
En réalité, le site ressemble à ceci :
5.3 LE PSEUDO STYLE : HOVER
Outre le fait de créer des styles statiques, CSS permet de prendre en compte les styles lorsque la
souris passe au-dessus d'un élément. C'est très utile pour montrer à l'utilisateur qu'il peut agir sur
cet élément.
Normal
David ROUMANET
Au survol
26/02/2016
8
BTS SIO
PPE
Aide CSS
Pour obtenir cet effet, il suffit de demander à CSS d'ajouter ou modifier un style lors du passage de
la souris. Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<title></title>
<style type="text/css">
h1 {
color: rgb(255, 153, 0);
background-color: rgb(0, 51, 51);
font-family: Arial, Helvetica, sans-serif;
}
h1:hover {
background-color: rgb(51, 153, 153);
}
</style>
</head>
<body>
<h1>Voici le titre</h1>
<p>Ici mon texte</p>
<p><br>
</p>
</body>
</html>
5.4 D'AUTRES INFORMATIONS
Mathieu Nebra (co-fondateur d'OpenClassrooms) propose un tutoriel sur les techniques modernes
d'agencement de blocs :
https://openclassrooms.com/courses/1603881/la-mise-en-page-avec-flexbox
Ce cours s'en est inspiré mais vous pouvez maintenant aller plus loin.
David ROUMANET
26/02/2016
9
