Web Statique Chap2

Web Statique
Chapitre 2 : Les langages HTML 5 & CSS3
Fatma Achour
Institut Supérieur d’Informatique et de Multimédia de Gabès
CPI -2
2022/2023
Fatma Achour (ISIMG) Web Statique 2022/2023 1 / 92

Plan
1 Web Statique : HTML 5
Les balises HTML 5
Les balises structurantes
Les balises bloc
Les balises inline
Les balises de formulaire
Les différentes formes de l’input
Les attributs de formulaire
Les attributs de liens
2 Web Statique : CSS3
Principe de fonctionnement
Structure des règles
Déclaration
Sélecteurs
Propriétés

Plan
Les balises HTML 5
Les balises bloc
Les balises inline
Déclaration
Sélecteurs
Propriétés

Un document HTML5 minimal
les bases d’un code HTML5 ressemblent beaucoup à celles rédigées à

l’aide des précédentes versions HTML 4 et XHTML 1.x.
On y retrouve donc un doctype suivi des éléments les plus courants :
<html>, <head>, <title>, <meta>, <link>, <script> et <body>.

Les balises HTML 5
Exemple
<!doctype html>
<html lang="fr">
<head> <meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body> ... <!- Le reste du contenu -> ... </body>
</html>

Les balises HTML 5 : Le doctype
Syntaxe
<!doctype html>
Préciser quel est le type de document qui va suivre, afin de permettre

au navigateur de savoir quel langage de la vaste famille SGML il
devra interpréter.
Utilité
La déclaration DOCTYPE, sert à définir le type de document afin qu’il soit
correctement interprété par le navigateur.

Les balises HTML 5 : L’élément racine <html>
L’élément <html> est l’élément racine du document. C’est lui qui va
recueillir les deux principaux éléments de la hiérarchie : <head> et
<body>.
L’élément racine possède les attributs communs dont les plus utiles
sont :
L’attribut lang dont la valeur est un code de langue normalisée qui
indique la langue utilisée par défaut dans la page. Cette valeur sera
reconnue par les moteurs de recherche pour leur permettre d’indexer les
pages du site en effectuant un tri par langue.
L’attribut dir qui indique le sens de lecture du texte de la page. Il peut
prendre les valeurs ltr pour le texte qui se lit de gauche à droite
(langues européennes) ou rtl pour le texte qui se lit de droite à gauche
(langues orientales : arabe).
Syntaxe
<html lang="fr" dir="ltr">
<!- suite des éléments inclus ->
</html>
Les balises HTML 5: L’élément<head>
L’élément <head> englobe un certain nombre d’informations utiles
au bon affichage de la page web. Ces informations dites métadonnées
sont contenues dans six éléments différents qui ont chacun un rôle
bien déterminé. Il s’agit des éléments <base />, <link />, <meta
/>, <script />, <style /> et <title />
Syntaxe
<head><title>Titre de la page</title> <meta
http-equiv="Content-type" content="text/html;charset=UTF-8" />
<base href="http://www.monsite.com" />
<link rel="shortcut icon" type="images/x-icon"
href="../images/favicon.ico" />
<meta name="Author" content="Jean ENGELS" />
<script type="text/javascript">
<!- Scripts JavaScript ->
</script>
<style type="text/css">
<!- Styles CSS ->
</style></head>
Les balises HTML 5 : L’élément<base>
Il s’agit d’un élément vide et n’a donc pas de balise de fermeture.

L’information qu’il contient est donnée dans son unique attribut href
dont l’utilisation est obligatoire.
Le contenu de cet attribut est une URL qui fournit l’adresse de base
de tous les fichiers utilisés dans la page quand leur adresse est
transmise de manière relative.
Syntaxe
<base href="http://www.monsite.com" />

Les balises HTML 5 : L’élément<link>
Comme le précédent élément, il s’agit d’un élément vide dont

l’information est contenue dans ses attributs.
Il permet d’établir un lien entre la page HTML 5 en cours et un autre
document externe nécessaire à la page.
Nous l’utiliserons particulièrement pour lier la page à une feuille de
style CSS contenue dans un fichier ayant l’extension .css ou un script
JavaScript contenu dans un fichier sous l’extension .js.
Syntaxe
<link rel="stylesheet" href="styles.css" type="text/css">

Les balises HTML 5 : L’élément<meta>
L’élément <meta /> est également un élément vide pour lequel

l’information est contenue dans ses attributs.
Ces informations ne sont donc pas visibles dans la page mais elles
sont destinées au serveur web, aux navigateurs et aux moteurs de
recherche.
Chaque information est identifiée par un nom et un contenu. Le nom
de l’information est défini dans les attributs "name" ou "http-equiv"
dont les rôles sont similaires, et la valeur associée est contenue dans
l’attribut "content" sous la forme suivante :
Syntaxe
<meta name="nom1" content="valeur1" />
<meta http-equiv="nom2" content="valeur2" />

Les balises HTML 5 : L’élément<meta>
name="author" désigne le nom de l’auteur de la page sans pour
autant créer un copyright.
<meta name= "author" content="Jean Engels" />
name="keywords": cette valeur est très importante pour le créateur

de site car son incorporation dans un document sert à l’indexation des
pages web par les moteurs de recherche et les annuaires.
<meta name="keywords" content="HTML 4, XHTML, HTML 5, CSS 2,
CSS 3, design web, création de sites />
http-equiv="Content-type". Cette valeur de l’attribut permet de

définir simultanément le type du document et le jeu de caractères
employé dans la page.
<meta http-equiv="Content-type"
content="text/html;charset=UTF-8"/>

Les balises HTML 5 : L’élément<script>
Nous avons vu qu’il était possible de lier la page HTML 5 avec un

fichier externe contenant du code JavaScript au moyen de l’élément
<link />.
Si cette solution correspond bien au concept de séparation des fichiers
ayant chacun un rôle différent, il est également possible de réaliser la
même opération avec l’élément <script> qui sera alors vide.
Le type de langage utilisé est précisé dans l’attribut "type" qui est
obligatoire et contient généralement la valeur "text/javascript" ou
"application/javascript" pour JavaScript.

Les balises HTML 5 : L’élément<script>
Script externe :
Syntaxe
<script type="text/javascript"
src="http://www.funhtml/html/fichiercode.js">
</script>
Script interne :
Syntaxe
<script type="text/javascript">
<!-
function debut()
{alert(‘Bonjour HTML 5’);}
->
</script>

Les balises HTML 5 : L’élément<style>
L’utilisation des styles CSS est étroitement liée à HTML 5 comme elle
l’était déjà avec XHTML. Nous avons vu qu’ils pouvaient le plus
souvent être écrits dans un fichier externe lié à la page avec l’élément
<link />.
Il est possible de les placer directement dans le code HTML en tant
que contenu de l’élément <style>. Il n’est pas interdit d’écrire tous
les styles dans cet élément mais cette possibilité sera réservée aux cas
où les styles sont peu nombreux.
Il est aussi envisageable de lier un fichier externe contenant les styles
communs à toutes les pages d’un site avec <link /> et d’ajouter des
styles particuliers à une page dans l’élément <style> de celle-ci.

Les balises HTML 5 : L’élément<title>
Chacun a pu remarquer dans son navigateur qu’avant l’affichage

complet d’une page web, un titre apparaît dans la barre de titre située
en haut de la fenêtre du navigateur.
Ce texte est défini dans l’élément <title> qui est l’un des deux seuls
dont la présence est obligatoire dans l’élément <head>. Son contenu
est un simple texte qui doit résumer le contenu de la page en une
ligne maximum.
Il est important de bien réfléchir à ce contenu car c’est aussi lui qui
apparaîtra comme titre principal du site dans les moteurs de
recherche. Il doit donc être accrocheur et bien correspondre à l’esprit
de la page.
Syntaxe
<title>Le site de HTML 5 et CSS 3 </title>

Plan
Les balises HTML 5
Les balises bloc
Les balises inline
Déclaration
Sélecteurs
Propriétés

Un des plus gros apport de l’HTML5 a été l’arrivée de balises

sémantiques concernant le layout des pages – autrement dit les
balises qui définissent la structure globale de la page.
Au lieu d’utiliser des div à tour de bras, nous avons maintenant les
balises section, article, aside, header, footer, nav, figure,
figcaption et main.

Les balises structurantes : main
Représente le contenu principal d’une page ou une application. Il ne

doit y en avoir qu’une seule par page, donc pas deux fois main dans le
même balise body.

Les balises structurantes : main
Syntaxe
<!DOCTYPE html>
<html lang="fr">
<head> <meta charset="UTF-8" /> <title>Utilisation de
main</title>
</head> <body>
<header>Mon super site
<nav> <a href="/">Home</a> </nav> </header>
<main>
<article> <h1>Mon super article</h1>
<p>Bla bla bla</p> </article>
<aside> <p>Plus d’infos</p> </aside>
</main>
<footer>Copyright 2015</footer>
</body> </html>

Les balises structurantes : section
Représente une portion ou section générique d’un document.

Contrairement à une div, section est un regroupement thématique de
contenu.
Il prend la plupart du temps un titre h1.
Et, d’autres éléments : (article, aside ou nav)
Syntaxe
<section>
<h1>Articles</h1>
<article> ... </article>
</section>

Les balises structurantes : article
L’élément <article> est un type spécifique de section, lequel

représente un contenu se suffisant à lui-même, de sorte qu’il pourrait
être distribuable indépendamment de la page sur laquelle il se trouve
sans perdre de son sens.
On trouve assez souvent des balises article dans des balises section.
Syntaxe
<section>
<article>
<h1>Titre de l’article</h1>
<p>Contenu de l’article</p> </article>
</section>

Les balises structurantes : nav
L’élément <nav> est une section de liens de navigation. On peut

l’utiliser pour la navigation principale, mais également pour d’autres
parties du document devant lister des liens de navigation interne.
Comme il est courant de voir sur un site un menu principal en haut de
page, placé horizontalement, et un second menu, vertical cette fois,
lequel permet de naviguer selon une autre logique.
Syntaxe
<nav>
<ul>
<li><a href="index.html">Page d’accueil</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> </nav>

Les balises structurantes : header
S’utilise en en-tête de page. De manière générale, on ouvre cette

balise immédiatement après la balise body, et on y place le logo ou
titre du site dans un h1
Néanmoins, il peut y avoir plusieurs header sur une page.
En effet, les spécifications prévoient que chaque <section> ou
<article> puisse avoir son propre header.
Syntaxe
<article>
<header>
<h1>Titre de l’article</h1>
<p>Auteur : bidule</p> </header>
<p>Contenu de l’article</p>
</article>

Les balises structurantes : footer
C’est la balise en bas de page dans laquelle on place le copyright et

quelques autres infos annexes (mentions légales etc.). . .
De la même manière que pour les header, les balises section,
article,. . . prévoient la possibilité d’avoir un footer.
Placer des informations concernant l’auteur, des mentions légales, une
navigation ou une pagination, un logo de rappel, des coordonnées, des
dates de publication.
Syntaxe
<article> ...
<footer> <p>Posté par Simon, le
<time datetime="2012-02-02">2 février 2012</time>
</p> </footer> </article>

Les balises structurantes : aside
L’élément aside est destiné au contenu indirectement lié à l’article

lui-même : il représente ce qui l’entoure, de façon annexe.
Par exemple, on pourra s’en servir pour proposer la définition d’un
terme, une biographie de l’auteur de l’article, un glossaire, préciser
des sources, une liste d’articles en relation... aside n’est donc pas
forcément dédié à un seul usage d’une barre de contenu latérale.
Syntaxe
<aside>
<h4>Sources de l’article</h4>
<ul> <li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li> </ul>
</aside>

Plan
Les balises HTML 5
Les balises bloc
Les balises inline
Déclaration
Sélecteurs
Propriétés

Les balises bloc : figure
Représente une unité de contenu qui peut être dissocié du reste du

document sans perdre son sens. "figure " prend tout son intérêt
quand il est associé à "figcaption " afin de grouper un élément et sa
description.
Indiquer sémantiquement qu’une description ou légende à trait à un
élément en particulier.
On utilisera donc ces deux balises pour associer une légende à un
média, un diagramme, un exemple de code et donc souvent en
association avec les balises "img ", "audio ", "video ", "svg ", "canva
", "code " et "pre ".

Les balises bloc : figure
Syntaxe
<!- on associe trois image à une légende commune !->
<img src="/couple-bonobo.jpg" alt="Accouplement de Bonobos">
<img src="/bebe-bonobo.jpg" alt="Bébé Bonobo">
<img src="/baguette-bonobo.jpg" alt="Bonobo qui se nourrit">
<figcaption>De gauche à droite : un accouplement de bonobo, un
nourisson et un bonobo utilisant une baguette pour attraper des
termites</figcaption>
</figure>

Les balises bloc : blockquote
Permet de faire des citations. Cette balise de type bloc peut tout à
fait contenir d’autres éléments de type bloc, comme des paragraphe.
Cette balise possède aussi un attribut optionnel, "cite ", lequel permet
de donner l’url de la citation. L’url précisée dans cette attribut n’est
pas affiché par les navigateurs.
cite, qui existe en balise et en attribut, permet de citer le titre d’un
ouvrage – ou sa source, comme une url par exemple – pas d’un auteur.
Syntaxe
<blockquote cite="http://buzut.fr">
<p>Ma petite citation</p> </blockquote>
<p><cite>Blog de buzut</cite> - http://buzut.fr</p>

Plan
Les balises HTML 5
Les balises bloc
Les balises inline
Déclaration
Sélecteurs
Propriétés

Les balises inline
strong
strong, même si les navigateurs le mette en gras, sert donc à marquer
des éléments qui ont une forte importance, un caractère sérieux ou un
caractère insistant.
b
Le WHATWG préconise l’utilisation de b pour attirer l’attention sur
un élément à des fins utilitaires sans porter de sens particulier,
d’intonation de voie ou d’humeur.
On peut l’imaginer par exemple pour l’indiquer de manière visible les
noms des personnages dans un script de cinéma ou un dialogue de
théâtre.
Syntaxe
<!doctype html>

Les balises inline
em
Représente une emphase sur un mot ou expression. Les navigateurs
l’affichent en italique, mais de la même manière que pour strong ou b,
son but n’est pas d’indiquer une mise en forme particulière.
i
Sert à indiquer une portion de texte prononcé dans une voix, tonalité,
esprit ou langue alternative au discours principal, de fait qu’il indique
une qualité de texte différente. Cela peut-être un terme technique,
une réflexion etc.

Les balises inline
cite
On a vu que cite s’utilise souvent conjointement à blockquote. De
manière plus générale, cite permet de baliser le nom d’un travail. Ce
peut être un livre ou un article, mais aussi un film, une musique, le
nom d’une exposition ou d’une comédie musicale.
del
Permet de dire qu’un élément a été supprimé. Par défaut, les
navigateurs rendent le texte en barré.

Les balises inline
s
Représente une portion de texte qui n’est plus juste ou à jour. Les
navigateurs affichent le texte en barré.
small
Représente les choses moins importantes (telles que les petites lignes
d’un contrat). Sur un site e-commerce, on verra par exemple une
offre.
Syntaxe
<p>Offre promotionnelle famille : 2 places achetées, 2 places
offertes !<br> <small>Places offertes pour enfants de moins de
12 ans uniquement</small></p>

Les balises inline
time
Permet d’encadrer un élément de type date.
var
Permet d’indiquer une variable. Cela peut-être dans une expression
mathématique ou encore une variable en programmation informatique.
Code
Sert à indiquer qu’une portion de texte représente du code source.

Les balises inline
kbd
Représente une entrée utilisateur, typiquement une touche du clavier
(ou combinaison de touches). Cependant cela peut aussi correspondre
à une autre entrée, comme une commande vocale etc.
mark
Utile pour attirer l’attention de l’utilisateur sur une portion précise du
texte. Soit parce que cette portion est marqué pour référence de par
sa pertinence : le W3C donne l’exemple d’un moteur de recherche qui
balise dans ses résultats les termes que l’internaute a entrés; soit dans
une citation, cela signifiant alors que cette portion n’avait pas été
mise en évidence dans le texte cité et que cette mise en avant est
faite a posteriori.

Les balises inline
dfn
Permet de baliser un terme qui va être défini.
Syntaxe
<p><dfn>Procrastiner</dfn> est l’art de remettre les choses au
lendemain</p>
u
La balise u sert donc à mettre en évidence les fautes d’orthographe ou
de grammaire.

Plan
Les balises HTML 5
Les balises bloc
Les balises inline
Déclaration
Sélecteurs
Propriétés

form
Permet de déclarer un formulaire. Ainsi, toutes les autres balises de
formulaire se trouveront entre deux balises form. Cette balise possède
deux attributs essentiels : method et action. Ils servent à indiquer où
et comment envoyer le formulaire.
Syntaxe
<form method="post" action="page-de-reception.php">
<input type="text" name="test" placeholder="test">
</form>

input
La balise de formulaire la plus classique. Elle affiche un petit champ de
texte, lequel permet d’entrer un texte. Elle prend comme attribut type
qui définit son type, lequel peut-être text, number, password, email,
tel, url, range, color, date, datetime, datetime-local, month, time,
week, search et file.
Mention spéciale pour le type hidden qui fait un champ caché. Dans ce
cas, le input sert à transmettre des informations entre différentes pages.
Les noms sont plutôt parlant. Sachez qu’ils permettent d’afficher des
contrôles plus adaptés à leur contexte : pass n’affiche que des points
au lieu du texte entré, d’autres comme email, tel ou url permettent aux
terminaux tactiles d’afficher un clavier adapté etc.

datalist
Complète l’input text en permettant d’avoir des suggestions
automatiques au fur et à mesure de la saisie.
Syntaxe
<label for="choix_voiture">
Indiquez votre voiture préférée :</label>
<input list="voitures" type="text" id="choix_voitures">
<datalist id="voitures">
<option value="Berline">
<option value="Coupé">
<option value="Familiale">
<option value="4×4">
</datalist>
>

textarea
Similaire à la balise input en mode text, sauf que c’est un bloc de
texte, donc sur plusieurs lignes. C’est évidemment utile pour de larges
quantités de texte. En plus du placeholder et du name, on peut
définir sa taille via les attributs rows et cols, lesquels définissent la
taille du bloc en nombre de lignes et de colonnes.
Syntaxe
<textarea rows="50" cols="100" name="mon-bloc-de-texte">
</textarea>

fieldset
Permet de regrouper des champs. Dans le cas où vous avez de
nombreux champs, il peut être judicieux de les regrouper par thèmes.
Fieldset permet donc des regroupement et à l’aide de la balise legend
vous pourrez donner un intitulé à ces groupes.

fieldset
Syntaxe
<fieldset>
<legend>Vos coordonnées</legend>
<label for="nom">Nom</label>
<input type="text" name="nom" id="nom">
<label for="prenom">Prénom</label>
<input type="text" name="prenom" id="prenom">
<label for="email">Email</label>
<input type="email" name="email" id="email"> </fieldset>
<fieldset> <legend>Votre adresse</legend>
<label for="rue">Rue</label>
<input type="text" name="rue" id="rue">
<label for="ville">Ville</label>
<input type="text" name="ville" id="ville">
<label for="cp">Code postal</label> <input type="text"
name="cp" id="cp">
</fieldset>

Plan
Les balises HTML 5
Les balises bloc
Les balises inline
Déclaration
Sélecteurs
Propriétés

radio
Ce sont des input pour choisir parmi plusieurs options. Un peu
comme les cases à cocher, mais où il n’est possible d’en choisir
qu’une seule. Il faut pour cela mettre radio en tant que type de
l’input, et pour que le navigateur reconnaisse que les différentes
options font partie du même groupe, leur donner le même nom.
Syntaxe
<input type="radio" name="sexe" value="femme" id="femme">
<label for="femme">Femme</label><br>
<input type="radio" name="sexe" value="homme" id="homme">
<label for="homme">15-25 ans</label><br>

checkbox
similaire à radio à cela prêt qu’il est possible de cocher plusieurs
cases. Elles doivent donc avoir des nom (name) différents.

select
Permet de choisir une option pour les listes déroulantes . Il est
possible de grouper certaines sélections pour plus de clarté avec
optgroup.

select
<label>Indiquez votre pays :</label>
<select name="region"> <option value="France">France
Métropolitaine</option>
<optgroup label="Europe">
<option value="1">Allemagne</option>
<option value="3">Danemark</option>
<option value="2">Espagne</option>
<option value="4">Finlande</option>
<option value="6">Autres pays d’europe</option> </optgroup>
<optgroup label="Outre Mer">
<option value="OM1">Guadeloupe</option>
<option value="OM1">Martinique</option>
<option value="OM1">Réunion</option> </optgroup>
<optgroup label="Amérique">
<option value="7">USA</option> <option
value="7">Canada</option>
<option value="8">Amérique Centrale</option>
<option value="8">Amérique du Sud</option> </optgroup></select>

Plan
Les balises HTML 5
Les balises bloc
Les balises inline
Déclaration
Sélecteurs
Propriétés

for
S’applique au label afin de le lier au champ qu’il décrit. De cette
manière, un clic sur le label mettra le curseur dans le champ en
question (ou le sélectionnera s’il s’agit de cases à cocher). Le label
doit correspondre à l’id du champ de référence.
Syntaxe
<input id="femme" type="radio" name="sexe">
<label for="femme">Femme</label><br>
<input id="homme" type="radio" name="sexe">
<label for="homme">15-25 ans</label>

name
Donne le nom au champ. Ce nom sera associé à la valeur du champ
lors de l’envoi du formulaire. On utilisera donc ce nom pour récupérer
la valeur côté serveur. Par exemple en php $_POST[’nom’].
value
Si value est renseignée, la valeur associée est pré-remplie dans le
champ et sera envoyée avec le formulaire si rien d’autre n’y est défini.
En outre, value sert à définir la valeur des input qui ne reçoivent pas
d’entrée clavier (comme les radio, checkbox, hidden, select etc.).

placeholder
placeholder permet d’afficher un texte indicatif à l’intérieur des
champs de formulaires qui disparait lorsque l’on y entre des données.
autofocus
Attribut qui permet de placer le focus directement sur l’élément en
question au chargement de la page. Ainsi par exemple, inutile pour
l’internaute de cliquer avec sa souris dans un champ de recherche
avant de taper sa requête, le curseur y est directement et
automatiquement positionné.

required
Signifie qu’un champ doit obligatoirement être rempli avant d’envoyer
le formulaire. Les navigateurs récent le prenant en charge
empêcheront l’envoi du formulaire s’il n’est pas complet et signaleront
l’erreur à l’internaute. En plus de required, HTML5 prévoit une API
de validation.
pattern
Il s’accompagne régulièrement du required. Cet attribut permet de
spécifier une REGEX qui permettra de valider le contenu du formulaire

Autocomplete
comme son nom le suggère, permet d’indiquer au navigateur que nous
souhaitons qu’il complète automatiquement le champ. Ainsi, nous
évitons à notre utilisateur la saisie fastidieuse de ses données.
Cet attribut ne fonctionne qu’avec les formulaires en POST et
est ignoré si l’input est de type hidden, password, checkbox, radio,
file, ou button.

Autocomplete
En outre, l’attribut peut être complété par le type de données que
nous voulons obtenir. Il y a cinq grands types de données :
Nom avec name
Email avec email
Adresse avec street-address, locality (la ville), region, postal-code,
country
Téléphone avec tel
Carte de crédit avec cc-name, cc-number, cc-csc (le cryptogramme),
cc-exp-month, cc-exp-year, cc-exp, cc-type (le type de carte : CB,
Visa. . . )

Syntaxe
<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<input type="tel" name="tel" autocomplete="tel">
<input type="text" name="street" autocomplete="street-address">
<input type="text" name="city" autocomplete="locality">
<input type="text" name="cp" autocomplete="postal-code">

Plan
Les balises HTML 5
Les balises bloc
Les balises inline
Déclaration
Sélecteurs
Propriétés

download
Permet d’indiquer les liens qui ont vocation à être téléchargés plutôt
qu’ouverts. De nombreux navigateurs ouvrent en effet les liens qu’ils
savent lire s’il s’agit de fichier (image, pdf, audio, vidéo. . . ). Il fallait
alors utiliser un langage côté serveur pour envoyer un en-tête au
navigateur et lui dire de télécharger l’image au lieu de l’ouvrir.
Grâce à cet attribut, cette complexité est révolue. Il suffit de placer
cet attribut dans le lien, de lui préciser optionnellement le nom du
fichier telle qu’il doit apparaître sur le système de utilisateur.
Syntaxe
<p>Vous pouvez télécharger mon dernier son en <a
href="musique-douce.mp3" download="super-son.mp3">cliquant sur
ce lien tavu</a></p>

target
Assez connu parce qu’il permet d’ouvrir les liens dans de nouveaux
onglets. Ainsi target="_blank" permet d’ouvrir un lien dans un
nouvel onglet. Il existe aussi le self qui ouvre dans le même onglet
(c’est le comportement par défaut sans l’utilisation de target); parent
: le document associé est ouvert dans l’onglet qui est le parent
immédiat; top : ça se comporte comme self. . . ; enfin name qui
permet d’ouvrir le contenu dans une iframe nommée. Tous ces
éléments doivent être précédés d’un underscore "_ ".
Syntaxe
<p>Vous pouvez télécharger mon dernier son en <a
href="musique-douce.mp3" download="super-son.mp3">cliquant sur
ce lien tavu</a></p>

author
Permet de préciser que le lien pointe vers l’auteur du document
courant.
bookmark
Donne un lien permanent vers une section parente à mettre en favoris.
next, precedent
Permettent d’indiquer la suite du document courant (pratique pour
les articles en plusieurs parties).

Plan
Les balises HTML 5
Les balises bloc
Les balises inline
Déclaration
Sélecteurs
Propriétés

Cascading Style Sheet (CSS)
Besoin : mettre en forme des pages Web de façon

Standardisée
Réutilisable
Séparant clairement le fond et la forme
Intervention du W3C
Spécification d’un langage de description de feuilles de styles : CSS
Avec la spécification XHTML Strict, on se « débarrasse » des éléments
et attributs de style hérités de HTML

Cascading Style Sheet (CSS)
Une feuille de style est composée d’un certain nombre de règles (rules)
Une règle se compose
d’un sélecteur
d’une déclaration
Une déclaration se compose d’un ensemble de propriétés/valeurs
Remarque
L’ordre des déclarations est généralement indifférent
Tous les styles ne peuvent pas s’appliquer à tous les éléments
Ex. : une image n’a pas de style de police

Plan
Les balises HTML 5
Les balises bloc
Les balises inline
Déclaration
Sélecteurs
Propriétés

CSS : structure des règles

Exemple de règle CSS
Exemple
body {
background: #FFFFFF;
color: black;
/* commentaire */
margin-left: 5%;
margin-right: 5%;
font-family: Tahoma, Optima, Arial, sans-serif;
}

Plan
Les balises HTML 5
Les balises bloc
Les balises inline
Déclaration
Sélecteurs
Propriétés

Styles intégrés
Déclarés comme attribut style d’un élément

Exemple
body {<h1 style="font-family: Arial; font-style:italic;">
Un texte qui se retrouvera en arial italique
</h1>

Feuilles de styles incorporées
La feuille de style est déclarée dans l’en-tête (head) du document

HTML
Elle s’appliquera aux éléments dans body
Exemple
<html>
<head>
<title>Texte du titre</title>
.important {color: red;}
h1 {font-family: Arial; font-style: italic; }
em { color: green }
</style>
</head>
<body>
<!- éléments sur lesquels s’appliqueront les styles ->
</body>
</html>

Feuilles de styles liées
Les règles se trouvent dans un fichier extérieur

On indique au navigateur où ce trouve cette ressource de style, en
utilisant un élément link dans l’en-tête
<link rel="stylesheet" type="text/css" href="fichier-de-style.css" />
Intérêt
Plusieurs documents XHTML peuvent faire appel à la même feuille de
style

Héritage de styles
Par défaut
Les styles d’un élément sont héritées par ses éléments descendants
<p style="color: red ;">Du texte <em>mis en évidence</em>, pas mis en

évidence.</p>
A condition que l’héritage ait un sens

c-à-d que les caractéristiques soient applicables à l’élément enfant
un positionnement de bloc n’a pas d’intérêt pour un élément em qui y
est contenu
si un style est défini spécialement pour un élément (ex. em { color:
blue; } ), l’héritage ne se fait pas
<p style="color: red ;">Du texte <em style="color: blue ;">mis en

évidence</em>, pas mis en évidence.</p>

On peut avoir concurrence entre plusieurs styles définis dans de

multiples endroits
styles par défaut (1- navigateur)
fichiers CSS externes (2- spécifications globales au site)
élément head du document XHTML (3- spécification globales au doc.)
attributs style des éléments (4- spécification locales)
style utilisateur (5- spécification de l’utilisateur)
Notion de cascade ou ordre de priorité des styles
trouver toutes les déclarations qui s’appliquent à un élément
les classer par spécificité
système de poids qui s’ajoutent
les classer par ordre d’apparence
plus une déclaration apparaît tard, plus elle a de poids

Plan
Les balises HTML 5
Les balises bloc
Les balises inline
Déclaration
Sélecteurs
Propriétés

Types de sélecteurs
Simples et groupes
Classes
Pseudo-classes
Pseudo-éléments
Contextuels

Sélecteurs CSS : simple et groupe
Simple
Lié à un type d’élément HTML
Utilisation de son nom
h1 { text-align: center; }
Groupe
Regroupement de règles qui s’appliquent à plusieurs éléments
h2, p { font-family: Optima, Arial, sans-serif; }

Sélecteurs CSS : id
On peut assigner un identifiant à un élément HTML

<div id="menu">
On peut lui assigner un style par un sélecteur particulier dans la feuille

de style
#menu { position: fixed; }

Sélecteurs CSS : classes
On peut assigner une classe à un élément HTML

<h1 class="header" >
Celle-ci spécifie un sélecteur particulier dans le feuille de style

h1.header { text-align: center; }
Une classe peut s’appliquer à de multiples éléments

.header { text-align: center; }
s’appliquera aussi à <h2 class="header">, etc.

Sélecteurs CSS : pseudo-classes
Sélecteurs qui sélectionnent des éléments en fonction de leur état à

un moment donné
Exemple et intérêt principal
a:link — lien non visité et inactif
a:hover — lien sur lequel passe le pointeur de la souris
a:active — lien sur lequel on clique
a:visited — lien déjà visité
a:link {color: blue;}

a:visited {color: magenta;}
a:hover {color: red; textdecoration:none; font-weight: bold;}
a:active {color: red;}

Sélecteurs CSS : pseudo-éléments
:first-letter
première lettre dans
un élément bloc (ex.
p, h1, . . . )
:first-line
première ligne dans
un élément bloc (ex.
p, h1, . . . )

Sélecteurs CSS : pseudo-éléments
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html encoding="UTF-8">
<head>
p:first-letter {font-size: 200%;}
p.ligne1:first-line {font: bold;}
</style>
</head>
<body>
<h1>Voici le titre</h1>
<p>Ceci est un paragraphe qui contient du
texte. ... Ceci est un paragraphe qui
contient du texte. </p> <p
class="ligne1">Ceci est un paragraphe qui
contient du texte. ... Ceci est un
paragraphe qui contient du texte. </p>
</body>
</html>

Sélecteurs CSS : contextuels
Sélecteurs qui ne sélectionnent que des éléments dans un certain
contexte
<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html encoding="UTF-8">
<head>
h1 em { color: red; }
</style>
</head>
<body>
<h1>Ceci est un texte de header
<em>ce texte est mis en
évidence</em> celui-ci ne l’est
pas.</h1>
<p>Dans ce paragraphe, <em>ceci
est mis en évidence</em></p>
</body> </html>

Plan
Les balises HTML 5
Les balises bloc
Les balises inline
Déclaration
Sélecteurs
Propriétés

Quelques propriétés de textes
font-size:
small | medium. . . | % | x pt
font-family:
fontname1, fontname2 (si la première n’est pas disponible), familyname
(serif, sans-serif, etc.)
font-weight:
bold | lighter
font-style:
italic, oblique
text-align:
left | center | right | justify
text-indent: (retrait de première ligne)
% | x cm

Les couleurs
color:
red | blue. . . | hexcode
background-color:
red | blue. . . | hexcode

Types d’éléments
Éléments blocs
Prennent la forme d’un bloc dans la page
ensemble de lignes
ne peuvent être contenus que dans d’autres éléments bloc
Exemple
p, img, ul, table, h1, div...
Éléments inline
S’inscrivent dans la continuité des éléments
ne forcent pas un changement de ligne
peuvent être inclus dans n’importe quel élément
Exemple
a, em, span...
Éléments de listes
éléments HTML qui ont un marqueur (bullet, number) et un ordre

Rappels sur div et span
div
élément contenant d’autres éléments, servant à définir un bloc
servira essentiellement à faire du positionnement de bloc
span
élément contenant d’autres éléments, inline
servira essentiellement à regrouper des caractéristiques globales pour
des éléments textuels

Propriétés de styles graphiques
Attribut clip
définit une zone de rognage du bloc
par exemple pour rogner une image
Attribut visibility et display
indiquent si (visible|hidden) et comment un élément est affiché
Attribut z-index
en cas de superposition de blocs d’affichage, indique l’ordre dans
lesquels le navigateur doit les afficher (cf. logiciel de dessin)
Remarques
les distances s’expriment en pixels (px), points (pt), unités métriques
(cm, mm), ou pourcentages de la taille de la fenêtre (%)

Propriétés de styles graphiques (2)
Arrière-plan
background-color
couleur de fond
background-image
image de fond
background-repeat
types de répétition de l’image
background-attachement
arrière-plan fixe quand on utilise l’ascenseur
background-position
position par rapport au coin supérieur gauche
background
attribut de résumé
Exemple
p { background: image.gif fixed repeat-y }

Marges, bordures, padding
CSS définit des attributs pour définir précisément ces zones

Positionnement des blocs
position: relative
Pas de position particulière : à la suite des autres blocs du bloc le
contenant, dans le flot du document
position: fixed
Positionnement par rapport à la page
Ne fait plus partie du flot du document
Ne défile pas avec la page
position: absolue
Positionnement à l’intérieur du bloc le contenant
Ne fait plus partie du flot du document
Défile avec la page
Utilisation en conjonction avec top, bottom, left, right
Attention à ne pas mélanger les unités !
Lorsque des blocs "sortent" du flot du document, on peut obtenir un
recouvrement (overlap) entre les différents éléments
Utiliser la propriété z-index pour définir l’ordre d’affichage

Web Statique Chap2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Web Statique Chap2

Transféré par

Droits d'auteur :

Formats disponibles

Web Statique

Chapitre 2 : Les langages HTML 5 & CSS3

Institut Supérieur d’Informatique et de Multimédia de Gabès

Fatma Achour (ISIMG) Web Statique 2022/2023 1 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 2 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 3 / 92

les bases d’un code HTML5 ressemblent beaucoup à celles rédigées à

Fatma Achour (ISIMG) Web Statique 2022/2023 4 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 5 / 92

Préciser quel est le type de document qui va suivre, afin de permettre

Fatma Achour (ISIMG) Web Statique 2022/2023 6 / 92

Il s’agit d’un élément vide et n’a donc pas de balise de fermeture.

Fatma Achour (ISIMG) Web Statique 2022/2023 9 / 92

Comme le précédent élément, il s’agit d’un élément vide dont

Fatma Achour (ISIMG) Web Statique 2022/2023 10 / 92

L’élément <meta /> est également un élément vide pour lequel

Fatma Achour (ISIMG) Web Statique 2022/2023 11 / 92

name="keywords": cette valeur est très importante pour le créateur

http-equiv="Content-type". Cette valeur de l’attribut permet de

Fatma Achour (ISIMG) Web Statique 2022/2023 12 / 92

Nous avons vu qu’il était possible de lier la page HTML 5 avec un

Fatma Achour (ISIMG) Web Statique 2022/2023 13 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 14 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 15 / 92

Chacun a pu remarquer dans son navigateur qu’avant l’affichage

Fatma Achour (ISIMG) Web Statique 2022/2023 16 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 17 / 92

Un des plus gros apport de l’HTML5 a été l’arrivée de balises

Fatma Achour (ISIMG) Web Statique 2022/2023 18 / 92

Représente le contenu principal d’une page ou une application. Il ne

Fatma Achour (ISIMG) Web Statique 2022/2023 19 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 20 / 92

Représente une portion ou section générique d’un document.

Fatma Achour (ISIMG) Web Statique 2022/2023 21 / 92

L’élément <article> est un type spécifique de section, lequel

Fatma Achour (ISIMG) Web Statique 2022/2023 22 / 92

L’élément <nav> est une section de liens de navigation. On peut

Fatma Achour (ISIMG) Web Statique 2022/2023 23 / 92

S’utilise en en-tête de page. De manière générale, on ouvre cette

Fatma Achour (ISIMG) Web Statique 2022/2023 24 / 92

C’est la balise en bas de page dans laquelle on place le copyright et

Fatma Achour (ISIMG) Web Statique 2022/2023 25 / 92

L’élément aside est destiné au contenu indirectement lié à l’article

Fatma Achour (ISIMG) Web Statique 2022/2023 26 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 27 / 92

Représente une unité de contenu qui peut être dissocié du reste du

Fatma Achour (ISIMG) Web Statique 2022/2023 28 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 29 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 30 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 31 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 32 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 33 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 34 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 35 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 36 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 37 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 38 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 39 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 40 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 41 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 42 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 43 / 92

Fatma Achour (ISIMG) Web Statique 2022/2023 44 / 92