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

STRUCTURER SON SITE EN HTML5 by Mind Map: STRUCTURER SON SITE EN
HTML5
5.0 stars - 1 reviews range from 0 to 5

STRUCTURER SON SITE EN HTML5

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

Les modèles des blocs

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 les blocks

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