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

Commencez. C'est gratuit
ou s'inscrire avec votre adresse courriel
Rocket clouds
MOOC HTML5/CSS3 semaine 3 Mise en page du site web par Mind Map: MOOC HTML5/CSS3 semaine 3 Mise en page du site web

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. Le modèle des boîtes

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 le site

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