HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le...
-
Upload
francois-senechal -
Category
Documents
-
view
110 -
download
0
Transcript of HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le...
![Page 1: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/1.jpg)
HTMLHTML CSSCSS
![Page 2: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/2.jpg)
HTML HTML
HTML est un langage Universel de description textuelle destinée à Internet.
Le créateur d'une page WEB définit la structure ou l'organisation d'une page en utilisant des balises.
![Page 3: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/3.jpg)
CSSCSS
Le World Wide Web a introduit les feuilles de styles en cascade pour compléter la langage HTML.
Les CSS permettent de gérer l'apparence des documents.
Les feuilles indiquent aux balises HTML leur comportement ou style.
![Page 4: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/4.jpg)
Les stylesLes styles
Un style rassemble tous les attributs que l'on peut appliquer à des types de textes similaires.
Attribut : taille,format
Textes similaires : titres, en-têtes, pied de page
Les styles donnent un nom commun à des groupes d'attributs
![Page 5: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/5.jpg)
Les styles de WordLes styles de Word
Applique le style : Titre 1
![Page 6: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/6.jpg)
Avantage du CSSAvantage du CSS
Une CSS est constituée de code séparé qui améliore les possibilités du HTML en permettant de redéfinir la façon dont fonctionnent les balises HTML existantes.
L'avantage par rapport à la création de nouvelles balises HTML repose sur le fait qu'en modifiant la définition d'une seule règle CSS centralisée, l'apparence de toutes les balises contrôlées par cette règles est modifiée.
![Page 7: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/7.jpg)
Style dans la pageStyle dans la page
<style type="text/css">
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: indianred ;
}
</style>
![Page 8: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/8.jpg)
Du HTML au CSS : PrincipeDu HTML au CSS : Principe
<HTML> <HEAD> <TITLE>Le CSS</TITLE>
</HEAD> <BODY> <H1>Introduction</H1>
... </BODY></HTML>
@charset "iso-8859-1";
H1 { color : red ;}
.HTML
Fichier.CSS
Introduction
…
Le Résultat
Sélecteur simple
<link rel="stylesheet" type= "text/css" href= "fichier.css"> <link rel="stylesheet" type= "text/css" href= "fichier.css">
![Page 9: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/9.jpg)
Les règlesLes règles
Une règle définit l'apparence et le comportement du code HTML.
Un règle indique à une balise HTML comment afficher son contenu.
La création de règles générique permet également de les appliquer à plusieurs balises.
![Page 10: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/10.jpg)
SyntaxesSyntaxes
Sélecteur HTML
valeur;}propriété:Selecteur {
attribut à définir
définit la propriété
Règle
![Page 11: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/11.jpg)
SyntaxesSyntaxes
Les propriétés identifient ce qu'il faut définir. Elles caractérisent l'apparence du contenu.
Les valeurs sont assignées à une propriété pour définir sa nature
Vari Faux
Nombre
Pourcentage
![Page 12: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/12.jpg)
Types de règlesTypes de règles
Les sélecteurs sont des caractères alphanumériques qu'identifie la règle.
Sélecteur HTML
La classe
L'ID
![Page 13: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/13.jpg)
Sélecteur HTMLSélecteur HTML
La partie textuelle d'une balise HTML est appelé sélecteur
H1 est le sélecteur de <H1>
Le sélecteur est exploité pour redéfinir le style de l'affichage de la balise.
![Page 14: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/14.jpg)
Syntaxe générale utilisée Syntaxe générale utilisée
Les styles d'une balise
Sélecteur HTML
p { font-size: 12px;}
Propriété Valeur
Définition
![Page 15: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/15.jpg)
Propriétés héritées d'un parentPropriétés héritées d'un parent
Toutes balises ont un parent : une balise conteneur qui les encadre.
Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style
<body><b color:red>
<i> Denis
</i></b>
</body>
![Page 16: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/16.jpg)
Propriétés héritées d'un parentPropriétés héritées d'un parent
Toutes balises ont un parent : une balise conteneur qui les encadre.
Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style
<body><b color:red>
<i> Denis
</i></b>
</body>
![Page 17: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/17.jpg)
Propriétés héritées d'un parentPropriétés héritées d'un parent
Toutes balises ont un parent : une balise conteneur qui les encadre.
Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style
<body><b color:red>
<i> Denis </i>
</b></body>
![Page 18: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/18.jpg)
Propriétés héritées d'un parentPropriétés héritées d'un parent
Toutes balises ont un parent : une balise conteneur qui les encadre.
Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style
<body><b color:red>
<i> Denis </i>
</b></body>
![Page 19: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/19.jpg)
Propriétés héritées d'un parentPropriétés héritées d'un parent
Toutes balises ont un parent : une balise conteneur qui les encadre.
Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style
<body><b color:red>
<i> Denis
</i></b>
</body>
timestimes + bold +red
times + bold +red+italics
DenisDenis
Denis
![Page 20: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/20.jpg)
Définition de règles identiques pour plusieurs basilesDéfinition de règles identiques pour plusieurs basiles
Liste de sélecteurs séparés par les virgules
h1,h2,h3,p { font-size: 12px;}
Propriété Valeur
Définition
p { margin-top: 25px;}
![Page 21: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/21.jpg)
La classeLa classe
Une classe est un style indépendant que l'on peut appliquer à toute balises HTML.
Chaque classe se voit attribuée un nom unique spécifié ensuite dans la ou les balises HTML qui l'utilise par le biais de l'attribut style.
Les règles de classe peuvent être définies entre les balises <style> </style>
dans l'en-tête ou dans un fichier CSS en ligne*.
Elle permettent aux fonctions Javascript d'identifier un objet unique, elles sont très utilisées en DHTML.
Les id sont comme les classes définit dans l'entête ou exportées d'un fichier CSS externe ou liés au document HTML.
![Page 22: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/22.jpg)
Syntaxe générale d'une classe CSSSyntaxe générale d'une classe CSS
Le sélecteur de classe permet de définir un style applicable à toutes balises HTML.
Une sous class possède un nom unique précédé d’un point.
![Page 23: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/23.jpg)
Syntaxe générale d'une classe CSSSyntaxe générale d'une classe CSS
Les styles d'une balise
.copy { font-size: 12px;}
Sélecteur de classe
Propriété
Définition
Valeur
utilisation <p class="copy"> … </p>utilisation <p class="copy"> … </p>
![Page 24: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/24.jpg)
Exemple : sous class indépendanteExemple : sous class indépendante
.nav {color:red;}
<ul class="nav"> <li>nom</li><li>prenom</li><li>age</li>
</ul>
<ul class="nav"> <li>nom</li><li>prenom</li><li>age</li>
</ul>
<ul><li class="nav">nom</li><li class="nav">prenom</li><li class="nav">age</li>
</ul>
<ul><li class="nav">nom</li><li class="nav">prenom</li><li class="nav">age</li>
</ul>
Factorisationimportante
![Page 25: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/25.jpg)
héritage sous class indépendantehéritage sous class indépendante
.nav li{color:red;}
<ul class="nav"> <li>nom</li><li>prenom</li><li>age</li>
</ul>
<ul class="nav"> <li>nom</li><li>prenom</li><li>age</li>
</ul>
Cela va affecter tous les éléments li dans la classe .nav
li sera enfant de la classe .nav
![Page 26: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/26.jpg)
EcritureEcriture
.nav li{color:red;}
<ul><div class="nav">
<li>nom</li><li>prenom</li><li>age</li>
</div></ul>
<ul><div class="nav">
<li>nom</li><li>prenom</li><li>age</li>
</div></ul>
![Page 27: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/27.jpg)
suitesuite
.nav ul ul{color:red;}<div class="nav">
<ul><li>nom
<ul> <li>dupont</li> <li>martin</li></ul>
</li><li>prenom
<ul> <li>denis</li> <li>gerard</li></ul>
</li></ul>
</div>
<div class="nav"><ul>
<li>nom<ul> <li>dupont</li> <li>martin</li></ul>
</li><li>prenom
<ul> <li>denis</li> <li>gerard</li></ul>
</li></ul>
</div>
![Page 28: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/28.jpg)
Sous class dépendante Sous class dépendante
li.nav{color:red;}
<ul><li class="nav">nom</li><li class="nav">prenom</li><li class="nav">age</li>
</ul>
<ul><li class="nav">nom</li><li class="nav">prenom</li><li class="nav">age</li>
</ul>
![Page 29: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/29.jpg)
Sous class dépendanteSous class dépendante
<div class="nav">…</div>
![Page 30: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/30.jpg)
<BODY> <ul class="niveau1">
<li>Exemple 1</li><li>Liste simple</li>
</ul> <div class="italic_rouge">
Exemple 2 </div></BODY>
BilanBilan
.italic_rouge { color:red; font-style:italic;
}
Sous Class indépendante
.CSS
Sous Class dépendante
ul.niveau1 {list-style-type:square;color:blue;
}
.CSS
.HTMLLe Résultat
Exemple 1
Liste simple
![Page 31: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/31.jpg)
Du HTML au CSS : SélecteursDu HTML au CSS : Sélecteurs
Le Résultat
Exemple 1
Liste simple
Exemple 2
<BODY> <ul class="niveau1">
<li>Exemple 1</li><li>Liste simple</li>
</ul> <div class="italic_rouge">
Exemple 2 </div></BODY>
<BODY> <ul class="niveau1">
<li>Exemple 1</li><li>Liste simple</li>
</ul> <div class="italic_rouge">
Exemple 2 </div></BODY>
.HTML
.italic_rouge { color:red; font-style:italic;
}
Sous Class indépendante
.CSS
Sous Class dépendante
ul.niveau1 {list-style-type:square;color:blue;
}
.CSS
![Page 32: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/32.jpg)
IDID
Très utile pour spécifier des règles qui ne s'appliquent qu'à un élément avec un ID unique donné défini par l'attribut id en HTML.
Pas plus d'un élément ne doit avoir un ID donné.
utilisé avec Javascript pour repérer et traiter un élément particulier.
![Page 33: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/33.jpg)
Syntaxe générale d'une IDSyntaxe générale d'une ID
des styles UNIQUE indépendants de toute balise HTML
utilisation <p id="area"> … </p>
Sélecteur d'ID
#area { font-size: 12px;}
Propriété Valeur
Définition
![Page 34: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/34.jpg)
Du HTML au CSS : SélecteursDu HTML au CSS : Sélecteurs
<BODY>
<div id="bloc_unique">Bloc A</div>
</BODY>
<BODY>
<div id="bloc_unique">Bloc A</div>
</BODY>
.HTML
Le sélecteur id
#bloc_unique { background-color:black; color:white ;
}
.CSS
Le Résultat
Bloc A
L’élément devient unique, il est utilisé une seule fois dans la page.
![Page 35: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/35.jpg)
LectureLecture
<li class="submenu">
li a un attribut class de valeur submenu
div#nav ul.niv1 li.submenu:hover ul.niv2 {}
la liste de la classe niv2
qui descend d'un élémentde liste survolé
qui descend d'une liste niv1
qui descend d'un div id nav
![Page 36: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/36.jpg)
Positionnement et Flux en CSSPositionnement et Flux en CSS
Vue d’ensemble des méthodes de positionnement
![Page 37: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/37.jpg)
Le fluxLe flux
On oubliera les tableaux !
![Page 38: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/38.jpg)
Les modes de positionnementLes modes de positionnement
Flux : ordre d’affichage des éléments
4 méthodes de positionnementnormal float relatif absolu
Quels sont les différences ?
![Page 39: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/39.jpg)
La fenêtreLa fenêtre
C'est dans la fenêtre du navigateur que se déroule l'action des pages Web.
Elle est l'ultime élément de conception : le parent de tous les éléments.
Avec CSS, on définit la fenêtre par le biais de la balise <body>
Origine (0,0)
hauteur du navigateur
hauteur réelle
![Page 40: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/40.jpg)
Définition du type de positionnementDéfinition du type de positionnement
Lorsque vous définissez les attributs d'une balise vous désignez ce qui se trouve dans le conteneur de la balise en tant qu'élément unique de la fenêtre.
Il est possible d'attribuer différents types de positionnement
relatif : c'est le comportement par défaut, l'élément se positionne après ce qui le précède et avant ce qui le suit.
absolu : le positionnement crée un élément indépendant, un agent libre, séparé du reste du document, que l'on peut compléter par le code HTML de notre choix. L'élément qui l'héberge représente son origine.
on peut déplacer sa position depuis l'emplacement naturel dans la fenêtre par le biais des propriétés top et left.
![Page 41: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/41.jpg)
Le Flux normalLe Flux normal
Bloc ABloc B
<BODY><div class="conteneur"> <div class="normalA"> Bloc A </div> <div class="normalB"> Bloc B </div></div></BODY>
.normalA {width:150px;height:150px;background-color:red;border:1px solid black;
}
.normalB {width:250px ;height:100px ;background-color:green;border:1px solid black;
}
Bloc conteneur
![Page 42: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/42.jpg)
Le Flux normal : en blocLe Flux normal : en bloc
Bloc conteneur
Flux normal en bloc : Succession verticale
Flux normal en bloc : Succession verticale
Bloc A
Bloc B
<BODY><div class="conteneur"> <div class="normalA"> Bloc A </div> <div class="normalB"> Bloc B </div></div></BODY>
.normalA {width:150px;height:150px;background-color:red;border:1px solid black;
}
.normalB {width:250px ;height:100px ;background-color:green;border:1px solid black;
}
![Page 43: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/43.jpg)
Le Flux normal : en ligneLe Flux normal : en ligne
Bloc conteneur
Bloc CBloc CBloc DBloc D
<BODY><div class="conteneur"> <span class="normalC"> Bloc C </span> <span class="normalD"> Bloc D </span></div></BODY>
.normalC {width:150px;height:150px;background-color:red;border:1px solid black;
}
.normalD {width:250px ;height:100px ;background-color:green;border:1px solid black;
}
![Page 44: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/44.jpg)
Le Flux normal : en ligneLe Flux normal : en ligne
Bloc conteneur
Bloc CBloc CBloc DBloc D
<BODY><div class="conteneur"> <span class="normalC"> Bloc C </span> <span class="normalD"> Bloc D </span></div></BODY>
.normalC {width:150px;height:150px;background-color:red;border:1px solid black;
}
.normalD {width:250px ;height:100px ;background-color:green;border:1px solid black;
}
Flux normal en-ligne :
Succession horizontale
Flux normal en-ligne :
Succession horizontale
![Page 45: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/45.jpg)
Le Flux relatifLe Flux relatif
<BODY><div class="conteneur"> <div class="bloc_marge"> Bloc A </div> css css css css...
</div></BODY>
.conteneur {width:800px;border:1px solid black;
}
.bloc_marge {position:relative;width:300px;top:20px;left:30px;border:1px solid black;}
Bloc conteneur
Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css css css
Left – 30px
Top – 20px
Bloc A
![Page 46: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/46.jpg)
rappel : margerappel : marge
<BODY><div class="conteneur"> <div class="bloc_relatif"> Bloc A </div> css css css css...
</div></BODY>
.conteneur {width:800px;border:1px solid black;
}
.bloc_relatif {width:300px;margin-top:20px;margin-left:30px;border:1px solid black;}
Bloc conteneur
Bloc A
Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css css css
Left – 30px
Top – 20px
![Page 47: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/47.jpg)
Le Flux flottantLe Flux flottant
Bloc conteneur
<BODY><div class="conteneur"> <div class="flotteA"> Boîte A </div> <p> Texte...blabla ... </p></div></BODY>
.flotteA {float:left;width:500px;background-color:yellow;border:1px solid black;
}
Boîte A – float:leftBoîte A – float:left
![Page 48: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/48.jpg)
Le Flux flottantLe Flux flottant
Bloc conteneur
<BODY><div class="conteneur"> <div class="flotteA"> Boîte A </div> <p> Texte...texte ... </p></div></BODY>
.flotteA {float:left;width:650px;background-color:yellow;border:1px solid black;
}
Boîte A – float:leftBoîte A – float:left Texte…texte…text…texte … texte…texte…texte…texte…texte…texte…texte…texte…texte…texte…texte
texte…texte…texte…texte…texte…texte…texte…text…texte…texte
texte…texte…texte…texte…texte…texte…texte…text…texte…texte
texte…texte…texte…texte…texte…texte…texte…text…texte…texte
texte…texte…texte…texte…texte…texte…texte…text…texte…texte
texte…texte…texte…texte…texte…texte…texte…text…texte…texte
![Page 49: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/49.jpg)
Le Flux flottant/relatifLe Flux flottant/relatif
Bloc conteneur
<BODY><div class="conteneur"> <div class="flotteA"> Boîte A </div> <p> Texte...texte ... </p></div></BODY>
.flotteA {
position : relatif
top:100px;float:left;width:650px;background-color:yellow;border:1px solid black;
}
Boîte A – float:leftBoîte A – float:left Texte…texte…text…texte … texte…texte…texte…texte…texte…texte…texte…texte…texte…texte…texte
texte…texte…texte…texte…texte…texte…texte…text…texte…texte
texte…texte…texte…texte…texte…texte…texte…text…texte…texte
texte…texte…texte…texte…texte…texte…texte…text…texte…texte
texte…texte…texte…texte…texte…texte…texte…text…texte…texte
texte…texte…texte…texte…texte…texte…texte…text…texte…texte
![Page 50: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/50.jpg)
Le Flux flottantLe Flux flottant
Bloc conteneur - 800px de large
<BODY><div class="conteneur"> <div class="flotteA"> Boîte A </div> <div class="flotteB"> Boîte B </div> </div></BODY>
.conteneur {width:800px;border:1px solid black;
}
.flotteA {float:left;width:650px;background-color:yellow;border:1px solid black;
}
.flotteB {float:left;width:100px;background-color:blue;border:1px solid black;
} Boîte A – 650pxBoîte A – 650px
![Page 51: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/51.jpg)
Le Flux flottantLe Flux flottant
Bloc conteneur - 800px de large
<BODY><div class="conteneur"> <div class="flotteA"> Boîte A </div> <div class="flotteB"> Boîte B </div> </div></BODY>
.conteneur {width:800px;border:1px solid black;
}
.flotteA {float:left;width:650px;background-color:yellow;border:1px solid black;
}
.flotteB {float:left;width:100px;background-color:blue;border:1px solid black;
}
Boîte A – 650pxBoîte A – 650px
Boîte B – 100pxBoîte B – 100px
![Page 52: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/52.jpg)
Le Flux flottantLe Flux flottant
Bloc conteneur - 800px de large
<BODY><div class="conteneur"> <div class="flotteA"> Boîte A </div> <div class="flotteB"> Boîte B </div> </div></BODY>
.conteneur {width:800px;border:1px solid black;
}
.flotteA {float:left;width:650px;background-color:yellow;border:1px solid black;
}
.flotteB {float:left;width:600px;background-color:blue;border:1px solid black;
}
Boîte A – 650pxBoîte A – 650px
Boîte B – 600pxBoîte B – 600px
![Page 53: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/53.jpg)
Le Flux flottantLe Flux flottant
Bloc conteneur - 800px de large
<BODY><div class="conteneur"> <div class="flotteA"> Boîte A </div> <div class="flotteB"> Boîte B </div> </div></BODY>
.conteneur {width:800px;border:1px solid black;
}
.flotteA {float:left;width:650px;background-color:yellow;border:1px solid black;
}
.flotteB {float:left;width:600px;background-color:blue;border:1px solid black;
}
Boîte A – 650pxBoîte A – 650px
Boîte B – 600pxBoîte B – 600px
![Page 54: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/54.jpg)
Le Flux absoluLe Flux absolu
<BODY><div class="conteneur"> <div class="bloc_absolu"> Bloc A </div>
css css css css css...
</div></BODY>
.conteneur {width:800px;border:1px solid black;
}
.bloc_absolu {position:absolute;width:300px;margin-top:20px;margin-left:30px;border:1px solid black;}
Bloc conteneur
Bloc A
Css css css css css css css css Css css css css css css css css Css css css css css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css
Left – 30px
Top – 20px
![Page 55: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/55.jpg)
Le Flux absoluLe Flux absolu
<BODY><div class="conteneur"> css css css css css...
<div class="bloc_absolu"> Bloc A </div>
ddddddd…..dddd
</div></BODY>
.conteneur {width:800px;border:1px solid black;
}
.bloc_absolu {position:absolute;width:300px;margin-top:20px;margin-left:30px;border:1px solid black;}
![Page 56: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/56.jpg)
Création d'un siteCréation d'un site
![Page 57: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/57.jpg)
Exemple completExemple complet
Bloc conteneur
Bloc Header – flux normal
![Page 58: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/58.jpg)
Exemple completExemple complet
Header_gauche - float left Header_droit – float left
![Page 59: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/59.jpg)
Exemple completExemple complet
Bloc Menu Header – flux normal
Header_gauche - float left Header_droit – float left
![Page 60: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/60.jpg)
Exemple completExemple complet
Bloc Menu Header – flux normal
Header_gauche - float left Header_droit – float left
BlocMenu
-Float left
![Page 61: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/61.jpg)
Exemple completExemple complet
Bloc Menu Header – flux normal
Header_gauche - float left Header_droit – float left
BlocMenu
-Float left
Bloc contenu – float right
![Page 62: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/62.jpg)
Les contrôle de visibilité et affichage d'un élémentLes contrôle de visibilité et affichage d'un élément
La propriété display est utile pour définir si un élément comprend des retours chariot avant et après, s'il se trouve dans d'autres éléments, s'il fait partie d'une liste.
voir menu.ppt
Les contrôles de visibilité d'un élément sont très utiles avec JavaScript.
![Page 63: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/63.jpg)
Conclusion et OuvertureConclusion et Ouverture
Liberté dans la mise en page des sites web.
La présentation est beaucoup simple.
Nombreux problèmes de compatibilité.
![Page 64: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/64.jpg)
ExemplesExemples
<style type="text/css">
.abs{
position: absolute;
top:25px;left:25px;
color:blue; border:blue solid 1px;
}
.rel{
position:relative;
top:25px; left:25px;
color:red;
border:red solid 2px;
}
</style>
![Page 65: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/65.jpg)
<body>Sous le pont mirabeau<div class="abs"> coule </div>la Seine</body>
![Page 66: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/66.jpg)
Sous le pont Mirabeau coule
la Seine
![Page 67: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/67.jpg)
absabs
![Page 68: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/68.jpg)
<body>Sous le pont mirabeau <div class="rel"> coule </div> la Seine</body>
![Page 69: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/69.jpg)
.rel{ position:relative; top:0px; left:0px; color:red; border:red solid 2px;
![Page 70: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/70.jpg)
Avec le décalageAvec le décalage
Sous le pont Mirabeau
la Seinecoule
![Page 71: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/71.jpg)
Avec le décalageAvec le décalage
![Page 72: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/72.jpg)
<body>Sous le pont mirabeau<span class="rel"> coule </span>la Seine</body>
![Page 73: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/73.jpg)
Sous le pont Mirabeau la Seinecoule
![Page 74: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/74.jpg)
![Page 75: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/75.jpg)
<body>Sous le pont mirabeau<div class="rel"> coule </div><div class="rel"> la Seine </div>et nos amours</body>
![Page 76: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/76.jpg)
![Page 77: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/77.jpg)
<body>Sous le pont mirabeau<div class="abs"> coule </div><div class="abs"> la Seine </div>et nos amours</body>
![Page 78: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/78.jpg)
idem avec span
![Page 79: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/79.jpg)
<body>Sous le pont mirabeau<span class="rel"> coule </span><span class="rel"> la Seine </span>et nos amours
![Page 80: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/80.jpg)
![Page 81: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/81.jpg)
<body>Sous le pont mirabeau<div class="rel">
coule<div class="rel"> la Seine </div>
</div>et nos amours
</body> <body>Sous le pont mirabeau<div class="rel"> coule<div class="rel"> la Seine </div></div>et nos amours</body>
![Page 82: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/82.jpg)
Sous le pont Mirabeau coule
la Seine
et nos amours
![Page 83: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/83.jpg)
![Page 84: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/84.jpg)
![Page 85: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/85.jpg)
<body>Sous le pont mirabeau<div class="abs"> coule <div class="abs"> la Seine </div></div>et nos amours</body>
<body>Sous le pont mirabeau<div class="abs"> coule
<div class="abs"> la Seine
</div>
</div>et nos amours</body>
1
1
![Page 86: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/86.jpg)
![Page 87: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/87.jpg)
</head><body>Sous le pont mirabeau<div class="rel"> coule<span class="rel"> la Seine </span></div>et nos amours</body>
![Page 88: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/88.jpg)
![Page 89: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/89.jpg)
<body>Sous le pont mirabeau<div class="rel"> coule<span class="rel"> la Seine <span class="rel"> et nos amours</span></span></div></body>
![Page 90: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/90.jpg)
![Page 91: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/91.jpg)
<style type="text/css">.rel{ position:relative; float:left; top:25px; left:25px; color:red; border:red solid 2px; </style>
<body>Sous le pont mirabeau<div class="rel"> coule<div class="rel"> la Seine</div></div><div class="rel"> et nos amours</div></body>
![Page 92: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/92.jpg)
Sous le pont Mirabeau coule
la Seine
et nos amours
![Page 93: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/93.jpg)
![Page 94: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/94.jpg)
.rel{ position:relative; float:left; top:25px; left:25px; color:red; border:red solid 2px; }
.rel1{ position:relative; float:left; top:0px; left:0px; color:red; border:blue solid 2px; }</style>
<body>Sous le pont mirabeau<div class="rel"> coule<div class="rel"> la Seine</div></div><div class="rel1"> et nos amours</div></body>
![Page 95: HTMLCSS. HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation.](https://reader036.fdocument.pub/reader036/viewer/2022062404/551d9d8c497959293b8c0d30/html5/thumbnails/95.jpg)