<html>
- c'est la racine, on précise le langage de la page HTML
- C'est l'en-tête, on y retrouve l'encodage, le title, scrips, pages externe css
- C'est le corps de la page, c'est ici qu'on mettra notre contenu pour notre site web
- C'est une balise qui se trouve entre les balises <head> , le titre apparaît dans l'onglet, sert aussi de référencement.
- C'est la balise qui représente le style css, on peut intégrer directement le css soit dans une balise ou bien entre les balises <style>. Le placer entre les balises <head> de préférence.
- C'est pour donner des informations au navigateur, on l'utilise pour l'encodage en UTF-8 etc..
- C'est la balise qui va contenir notre script JavaScript et sert aussi à lier une page externe .js. <script src="page.js"></script>
- <script> mon code js</script>
- Titre du plus grand au plus petit
- Paragraphe
- Saut de ligne
- Conteneur de type bloc. C'est un sorte de boîte qui peut contenir d'autres boîtes. La div permet de délimiter en zone sa page html.
- Conteneur de type ligne. <span> est utilisé pour être placé dans des paragraphes et apporter du style. Il est neutre.
- Liste non ordonnée qui contient les balises des balises listes.
- C'est entre ces balises <li></li> que nous allons mettre du texte
- <ul>
- <li>menu</li>
- <li>blog</li>
- </ul>
- Liste ordonnée / numéroté contient aussi les balises <li></li>
- Balise HTML5
- Mettre en ligne vos sons
- <audio src="titre.mp3"controls></audio>
- Balise HTML5
- Mettre vos vidéos
- <video src="film.mp4" autoplay></video>
- Balise HTML5
- Balise qui se place entre les balises <audio> ou <video>. Parfois il faut préciser plusieurs sources possibles. Le type repésente le format des vidéos.
- <source src="film.mp4" type="video/mp4">
- <source src="film.ogv" type="video/ogg">
- Balise HTML5 pour une en-tête
- Balise HTML5 pour un menu
- Balise HTML5 pour mettre notre contenu, ça remplace en quelque sorte une div
- Balise HTML5 se place entre les balises <section></section> c'est à l'intérieur qu'on tappera notre texte.
- Balise HTML5 pour des informations complémentaire comme un profil des liens vers réseaux sociaux etc...
- Balise HTML5 pied de page
EXEMPLE : avec commentaire
<html>
<head>
<title>Mon titre</title> //Notre titre regardez l'onglet si vous l'avez fait chez vous
<meta charse="UTF-8"/> //Encodage
<link rel="stylesheet" type="text/css" href="style.css"/> // Feuille de style externe
</head>
<body>
<header> //Mon en-tête
<h1>Mon logo</h1> //Titre
</header>
<nav> //Début de mon menu
<ul> //Ma liste non ordonnée pour un menu déroulant
<li><a href="#">film</a> //Mon bouton de départ pour le déroulant
<ul> //Une nouvelle liste
<li class="rose"><a href="#">romantique</a><li> //Catégorie film qui sera en rose
<li><a href="#">fiction</a><li>
<li class="rose"><a href="#">comédie</a><li> //Catégorie film qui sera en rose
</ul>
</li>
<ul>
</nav>
<section> //Début de mon contenu principal
<aside> //Info supplémentaire
<h2>Mon profil</h2> //Titre 2
<img src="moi.jpg"/> //Mon image de profil
</aside>
<article> //Début des articles
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et auctor leo. Pellentesque et odio vel nisl vestibulum pretium. Integer tristique porta ex, a placerat purus dictum faucibus. Aliquam erat volutpat. Nunc suscipit quis sem at volutpat. Curabitur tincidunt neque at sem mattis, non sollicitudin urna posuere. Suspendisse in turpis metus</p>
</article>
</section>
<footer> //Pied de page
<h3>copyright</h3> //Titre 3
</footer>
</body>
</html>
<head>
<title>Mon titre</title> //Notre titre regardez l'onglet si vous l'avez fait chez vous
<meta charse="UTF-8"/> //Encodage
<link rel="stylesheet" type="text/css" href="style.css"/> // Feuille de style externe
</head>
<body>
<header> //Mon en-tête
<h1>Mon logo</h1> //Titre
</header>
<nav> //Début de mon menu
<ul> //Ma liste non ordonnée pour un menu déroulant
<li><a href="#">film</a> //Mon bouton de départ pour le déroulant
<ul> //Une nouvelle liste
<li class="rose"><a href="#">romantique</a><li> //Catégorie film qui sera en rose
<li><a href="#">fiction</a><li>
<li class="rose"><a href="#">comédie</a><li> //Catégorie film qui sera en rose
</ul>
</li>
<ul>
</nav>
<section> //Début de mon contenu principal
<aside> //Info supplémentaire
<h2>Mon profil</h2> //Titre 2
<img src="moi.jpg"/> //Mon image de profil
</aside>
<article> //Début des articles
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et auctor leo. Pellentesque et odio vel nisl vestibulum pretium. Integer tristique porta ex, a placerat purus dictum faucibus. Aliquam erat volutpat. Nunc suscipit quis sem at volutpat. Curabitur tincidunt neque at sem mattis, non sollicitudin urna posuere. Suspendisse in turpis metus</p>
</article>
</section>
<footer> //Pied de page
<h3>copyright</h3> //Titre 3
</footer>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire