_blank

_Blank – Etape 06

23 mars 2019

1Sémantique

Une class s’applique à tout élément HTML…
Utiliser les balises induites par le HTML5, c’est définir le rôle de chaque contenant plus finement et donc se garantir un meilleur référencement naturel.

Aussi chaque <div> dans la page « donnée » par skeleton peut se voir attribuer son rôle au regard de notre projet…

<header>
<main>
<section>
<aside>
<footer>
<article>
<div> si nous n’avons pas d’autre choix…

Pour rappel…

Cette structure, est l’opportunité de concevoir différents type de pages, une page d’accueil ainsi que trois pages destinées à recevoir du contenu – avec 2 colonnes ou sans.

Zones utiles sur toutes les pages.
Tête de page et pied de page – header et footer.
Contiennent généralement l’identité/logo et navigation.
Rappel d’une adresse, liens formels obligatoires – mentions légales, politique de confidentialité, (…)
Zones utiles sur la page d’accueil – hero
Une image (représentative) qui « anime » la page, peut être support de texte
Zones d’appel.
Liens vers d’autres parties du site – ou présentation de services.
Zone des propos principaux de la page – Main.
Texte, listes, tableaux, liens, images, vidéos, galerie photos…
Zone secondaire – sidebar.
Si relatif aux propos principaux, peut contenir des liens complémentaires.
Texte, listes, tableaux, liens, images, vidéos, galerie photos…

2Code Final de cette étape

Rappel : Une balise « s’ouvre » et « se ferme »

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Your page title here :)</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/monstyle.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

</head>
<body class="gris">

<!-- PAGE -->
<div class="container">

	<!-- ENTETE -->
	<div class="row">
		<header class="twelve columns vert">
		<p>1</p>
		</header>
	<!-- /ENTETE -->
	</div>
	
	<!-- ACCUEIL ligne 1 -->
	<div class="row">
		<div class="twelve columns violet">
		<p>1</p>
		</div>
	<!-- /ACCUEIL ligne 1 -->
	</div>
	<!-- ACCUEIL ligne 2 -->
	<div class="row">
		<article class="four columns magenta">
		<p>1</p>
		</article>
		<article class="four columns magenta">
		<p>2</p>
		</article>
		<article class="four columns magenta">
		<p>3</p>
		</article>
	<!-- /ACCUEIL ligne 2 -->
    </div>
	
	<!-- 2 COLONNES 2/3+1/3 -->
	<div class="row">
		<main class="eight columns bleu">
		<p>1</p>
		</main>
		<aside class="four columns orange">
		<p>2</p>
		</aside>
	<!-- /2 COLONNES 2/3+1/3 -->
	</div>
	
	<!-- 2 COLONNES 1/3+2/3 ATTENTION L'ORDRE DES COLONNES EST GERE DANS LA FEUILLE DE STYLE-->
	<div class="row inversion">	
		<main class="eight columns bleu bureauDroit">
		<p>2</p>
		</main>
		<aside class="four columns orange bureauGauche">
		<p>1</p>
		</aside>
	<!-- /2 COLONNES 1/3+2/3 -->
	</div>
	
	<!-- PLEINE LARGEUR -->
	<div class="row">
		<main class="twelve columns bleu">
		<p>1</p>
		</main>
	<!-- /PLEINE LARGEUR -->
	</div>
	
	<!-- PIED -->
	<div class="row">
		<footer class="twelve columns vert">
		<p>1</p>
		</footer>
	<!-- /PIED -->
	</div>

 
<!-- /PAGE -->
</div>

<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

Précédent Suivant