HTML5 et CSS3
Ce cours condensé est issu d'un tutoriel dont l'auteur n'est autre que le créateur du Site du Zéro.
Bon courage dans l'écriture de votre première page web.
HTML5 - Balises structurantes1 - Afficher un en-tête de page avec la balise header
Code HTML :
<header>
<div>
<h1>Titre : Page test HTML5 et CSS3</h1>
</div>
<div id="bannière">
<h4>- bannière - bannière - bannière - bannière - bannière - bannière - bannière - bannière - bannière - bannière -</h4>
</div>
</header>
La plupart des sites web possèdent en général un en-tête, appelé header en anglais. On y trouve le plus souvent un logo, une bannière, le slogan de votre site…
Placez le code ci-dessus juste après la balise <body>.
Code CSS associé :
#bannière, h4
{
background-color: #FFFA32; /* Fond en nuance de jaune foncé */
border: 1px solid red; /* Bordure largeur 1 pixel, trait continu rouge */
color: black; /* Couleur du texte */
}
2 - Afficher un pied de page avec la balise footer
Code HTML :
<footer>
<p>
<a href="http://jigsaw.w3.org/css-validator" style="text-decoration:none">
<img style="border:0;width:88px;height:31px" src="../Images/Cours/vcss-blue.gif" alt="CSS Valide !" />
</a>
</p>
</footer>
À l'inverse de l'en-tête, le pied de page se trouve en général tout en bas du document. On y trouve des informations comme des liens de contact, le nom de l'auteur, les mentions légales, etc.
Le pied de page actuel inclut entre autres une image validant la bonne syntaxe du code CSS de cette page.
Il doit être placé juste avant la balise </body>.
3 - Afficher les principaux liens de navigation avec la balise nav
Code HTML :
<nav>
<ul>
<li><a href="page_test_2.html" class="lien1">Page_test_2</a></li>
<li><a href="Pages-bis/page_test_3.html" class="lien1">Page_test_3</a></li>
<li><a href="../page_test_4.html" class="lien1">Page_test_4</a></li>
</ul>
</nav>
La balise nav doit regrouper tous les principaux liens de navigation du site. Vous y placerez par exemple le menu principal de votre site.
Généralement, le menu est réalisé sous forme de liste à puces à l'intérieur de la balise nav.
Placez le menu ci-dessus juste avant la balise </header>
Code CSS associé :
a.lien1
{
color: yellow; /* Couleur des liens */
text-decoration: none; /* Suppression du soulignement des liens */
}
4 - Créer des sections de page avec la balise section
Code HTML :
<section>
</section>
Placez la balise <section> juste après la balise </header>
et la balise </section> juste avant la balise <footer>.
La balise section sert à regrouper des contenus en fonction de leur thématique. Elle englobe généralement une portion du contenu au centre de la page.
5 - Afficher un article indépendant avec la balise article
Code HTML :
<article>
</article>
La balise article sert à englober une portion généralement autonome de la page. C'est une partie de la page qui pourrait ainsi être reprise sur un autre site. C'est le cas par exemple des actualités (articles de journaux ou de blogs).
Les contenus des deux blocs de couleur jaune clair de cette page sont encadrés par des balises article.
Placez la balise <article> juste après la balise <section>
et la balise </article> juste avant la balise </section>.
6 - Afficher des informations complémentaire avec la balise aside
Code HTML :
<aside>
<h4>Ma page :</h4>
<p>page_test.html</p>
</aside>
La balise aside est conçue pour contenir des informations complémentaires au document que l'on visualise. Ces informations sont généralement placées sur le côté (bien que ce ne soit pas une obligation).
Le bloc jaune foncé de cette page est encadré par la balise aside.
Placez le code HTML ci-dessus entre la balise <section>
et la balise <article>.
7 - Résumé des balises étudiées ci-dessus sous forme d'un graphique
8 - Appel du script java "html5.js" pour assurer la compatibilité des balises HTML5 ci-dessus avec les anciens IE
Code HTML :
<head>
<!-- Appel du script java permettant d'assurer la compatibilité du site avec les anciens navigateurs IE -->
<!--[if lt IE 9]>
<script src="../Scripts_java/html5.js"></script>
<![endif]-->
</head>
Le code JavaScript HTML5 shiv permet de faire en sorte que ces balises soient reconnues pour les versions d'Internet Explorer antérieures à IE9.
Téléchargez le script sur internet et placez le ensuite dans le dossier Scripts_java.
Ajoutez les 4 lignes de code ci-dessus à l'intérieur de l'élément head situé en haut de votre page_test.html .
9 - Définition des balises de type block et inline
• block : une balise de type block sur votre page web crée automatiquement un retour à la ligne avant et après.
Il suffit d'imaginer tout simplement un bloc. Votre page web sera en fait constituée d'une série de blocs les uns à la suite des autres. Mais vous verrez qu'en plus, il est possible de mettre un bloc à l'intérieur d'un autre, ce qui va augmenter considérablement nos possibilités pour créer le design de notre site !
• inline : une balise de type inline se trouve obligatoirement à l'intérieur d'une balise block.
Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne (c'est pour cela que l'on parle de balise « en ligne »).
10 - Les balises universelles
Il existe deux balises génériques et, comme par hasard, la seule différence entre les deux est que l'une d'elle est inline et l'autre est block :
• <span></span> (inline) - Balise utilisée en page 1 pour sélectionner un groupe de mots.
• <div></div> (block) - Balise utilisée en page 3 pour créer 2 blocs à l'intérieur du header de votre page html.
Suite...
