Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

MOOC HTML5/CSS3 semaine 3 Mise en page du site web by Mind Map: MOOC HTML5/CSS3
semaine 3
Mise en page du site web
5.0 stars - 3 reviews range from 0 to 5

MOOC HTML5/CSS3 semaine 3 Mise en page du site web

Structurer sa page

<header> </header>

Entoure une section d'entête

<nav> </nav>

Englobe un menu de navigation

<section> </section>

Englobe une portion de la page, <article> </article>, <aside> </aside>

<article> </article>

Représente une portion de texte

<aside> </aside>

Donne des infos sur le texte à coté

<footer> </footer>

Le pied de page du site

Exemple

Important :

Les balises ne positionnent pas les éléments

C'est le CSS qui positionne les éléments

Ces balises ne sont pas reconnues version < IE9

Un code java script permet de les rendre compatibles < IE9

L'auteur : Olivier Legrand

Formateur du Web

Olivier Legrand - Concepteur pédagogique multimédia

Le modèle des boîtes

2 types de balises

BLOC, Exemple, <h1>, <p>, <aside>, <article> <section> <div> <table>, Représente un bloc de contenu, Ils s'écrivent à la suite des autres

INLINE, Les balises Inline, Sont à l'intérieur d'un block, Elles suivent le flux du texte, Exemple, <a>, <em>, <strong> <span> <b> <img>

Taille du Bloc

Largeur, width: 50%;, min-width: 300px;, max-width: 600px;

Hauteur, height: 50%;

Exemple

Les marges

Extérieur, Marge extérieur de l'élément boîte, margin:, auto, margin-top, supérieure, margin-right, droite, margin-left, gauche, margin-bottom, bas

Intérieure, Marge intérieure de l'élément boîte, padding:, auto, padding-top, supérieure, padding-right, droite, padding-left, gauche, padding-bottom, bas

Exemple

Centrer un block

margin: auto;

Il faut dans la CSS cette balise, width: 400px;

Gestion du texte

overflow: hidden;, masque le texte qui dépasse dans le block

overflow: auto;, ajoute un scroller pour naviguer dans le block

Le positionnement en CSS

Menu flottant

Dans la CSS

nav

Section

Transfomation

Block Vs Inline, display: block;

Inline Vs Block, display: inline;

Supprimer une balise, display: none;

Exemple

Menu flottant

section

Les inline-block

2 blocks cote à cote

Nav

Section

Absolue

Position: absolute;

Exemple

Créer le site

Menu flottant

Dans la CSS

nav

Section

Transfomation

Block Vs Inline, display: block;

Inline Vs Block, display: inline;

Supprimer une balise, display: none;

Exemple

Menu flottant

nav

section

Les inline-block

2 blocks cote à cote

Section

Absolue

Position: absolute;

Exemple