ADOPTEUN

DEV #2

Reminder

web =

BASES DU HTML

  1. Elements 
  2. Attributs

<html> <!-- Racine du document -->

    <head> <!-- Déclaration de métadonnées + imports de fichiers (css/js) --> 
    </head>

    <body> <!-- Corps du document -->
    
        <header> <!-- Element -->

                <h1>Un titre</h1> <!-- Element -->

        </header>

        <div>

            <img /> <!-- Element -->

        </div> <!-- Element --> 

    </body>

</html> 


<html> <!-- Racine du document -->

    <head> <!-- Déclaration de métadonnées + imports de fichiers (css/js) --> 
    </head>

    <body> <!-- Corps du document -->
    
        <header class="canal-header"> <!-- Element -->

                <h1>Un titre</h1> <!-- Element -->

        </header>

        <div>
            
            <img src="http://www.canalplus.fr/image.jpg" /> <!-- Element -->

        </div> <!-- Element --> 

    </body>

</html> 

BASES DU HTML

pièges à éviter !!!

<!-- BAAAAAAAAADDDD !!!! -->
<div>
    <h1>
</div>
    </h1>

<!-- GooD ! o// -->
<div>
    <h1>
    </h1>
</div>

Bien imbriquer ses Elements et ne SURTOUT pas les croiser !

<!-- BAD :-( -->

<div>...<div> 
<Div>...</Div>

<!-- GOOD :-) -->

<div>...</div>
<div />

Ne pas oublier de :

  1. fermer ses Elements
  2. Ne JAMAIS mettre de majuscules

BASES DU CSS

3 types de selectors : 

body { // tag selector
    font-family : 'Arial'; 
}

.className { // class selector
    text-align : 'center';
}

#id { // id selector
    color : 'red';
}

On peut faire du cascading : 

.className #id { // cascading
    color : 'red';
}

// appliqué uniquement aux :
// - tag qui ont l'id #id
// - dans un tag qui a une class .className

C'EST PARTI !

Made with Slides.com