1. Structurer sa page
1.1. <header> </header>
1.1.1. Entoure une section d'entête
1.2. <nav> </nav>
1.2.1. Englobe un menu de navigation
1.3. <section> </section>
1.3.1. Englobe une portion de la page
1.3.1.1. <article> </article>
1.3.1.2. <aside> </aside>
1.4. <article> </article>
1.4.1. Représente une portion de texte
1.5. <aside> </aside>
1.5.1. Donne des infos sur le texte à coté
1.6. <footer> </footer>
1.6.1. Le pied de page du site
1.7. Exemple
1.8. Important :
1.8.1. Les balises ne positionnent pas les éléments
1.8.2. C'est le CSS qui positionne les éléments
1.8.3. Ces balises ne sont pas reconnues version < IE9
1.8.4. Un code java script permet de les rendre compatibles < IE9
2. L'auteur : Olivier Legrand
2.1. Formateur du Web
2.2. Olivier Legrand - Concepteur pédagogique multimédia
3. Les modèles des blocs
3.1. 2 types de balises
3.1.1. BLOC
3.1.1.1. Exemple
3.1.1.1.1. <h1>, <p>, <aside>, <article> <section> <div> <table>
3.1.1.2. Représente un bloc de contenu
3.1.1.3. Ils s'écrivent à la suite des autres
3.1.2. INLINE
3.1.2.1. Les balises Inline
3.1.2.1.1. Sont à l'intérieur d'un block
3.1.2.1.2. Elles suivent le flux du texte
3.1.2.2. Exemple
3.1.2.2.1. <a>, <em>, <strong> <span> <b> <img>
3.2. Taille du Bloc
3.2.1. Largeur
3.2.1.1. width: 50%;
3.2.1.2. min-width: 300px;
3.2.1.3. max-width: 600px;
3.2.2. Hauteur
3.2.2.1. height: 50%;
3.2.3. Exemple
3.3. Les marges
3.3.1. Extérieur
3.3.1.1. Marge extérieur de l'élément boîte
3.3.1.2. margin:
3.3.1.2.1. auto
3.3.1.3. margin-top
3.3.1.3.1. supérieure
3.3.1.4. margin-right
3.3.1.4.1. droite
3.3.1.5. margin-left
3.3.1.5.1. gauche
3.3.1.6. margin-bottom
3.3.1.6.1. bas
3.3.2. Intérieure
3.3.2.1. Marge intérieure de l'élément boîte
3.3.2.2. padding:
3.3.2.2.1. auto
3.3.2.3. padding-top
3.3.2.3.1. supérieure
3.3.2.4. padding-right
3.3.2.4.1. droite
3.3.2.5. padding-left
3.3.2.5.1. gauche
3.3.2.6. padding-bottom
3.3.2.6.1. bas
3.3.3. Exemple
3.4. Centrer un block
3.4.1. margin: auto;
3.4.2. Il faut dans la CSS cette balise
3.4.2.1. width: 400px;
3.5. Gestion du texte
3.5.1. overflow: hidden;
3.5.1.1. masque le texte qui dépasse dans le block
3.5.2. overflow: auto;
3.5.2.1. ajoute un scroller pour naviguer dans le block
4. Le positionnement en CSS
4.1. Menu flottant
4.1.1. Dans la CSS
4.1.2. nav
4.1.3. Section
4.2. Transfomation
4.2.1. Block Vs Inline
4.2.1.1. display: block;
4.2.2. Inline Vs Block
4.2.2.1. display: inline;
4.2.3. Supprimer une balise
4.2.3.1. display: none;
4.2.4. Exemple
4.3. Menu flottant
4.3.1. section
4.4. Les inline-block
4.4.1. 2 blocks cote à cote
4.4.2. Nav
4.4.3. Section
4.5. Absolue
4.5.1. Position: absolute;
4.5.2. Exemple
5. Créer les blocks
5.1. Menu flottant
5.1.1. Dans la CSS
5.1.2. nav
5.1.3. Section
5.2. Transfomation
5.2.1. Block Vs Inline
5.2.1.1. display: block;
5.2.2. Inline Vs Block
5.2.2.1. display: inline;
5.2.3. Supprimer une balise
5.2.3.1. display: none;
5.2.4. Exemple
5.3. Menu flottant
5.3.1. nav
5.3.2. section
5.4. Les inline-block
5.4.1. 2 blocks cote à cote
5.4.2. Section
5.5. Absolue
5.5.1. Position: absolute;
5.5.2. Exemple