Bonjour.
Dans cette vidéo, nous allons voir comment utiliser le langage HTML pour créer la structure d'un site web.
Le site que vous voyez là nous servira de référence.
Nous n'allons pas le recréer intégralement mais examiner les bases HTML sur lesquelles il repose.
Cette page comporte un en-tête HTML, avec un logo sur la gauche et une barre de navigation sur la droite.
Juste après, vous avez la section principale avec le grand titre « Rendered » et la vidéo.
Le paragraphe d'introduction est un peu plus bas, suivi de la section d'illustration, avec une image à gauche et sa description à droite.
Et tout en bas, vous avez la section du pied de page.
Nous allons donc recréer ce site dans Dreamweaver.
Voici la page du site finalisé que nous venons de voir.
Je suis en mode Développeur.
J'ai aussi défini le site dans Dreamweaver pour gérer les fichiers du projet.
Pour suivre ce tutoriel, faites la même chose de votre côté.
Pour cela, il suffit de choisir Site > Nouveau site.
Un autre tutoriel vidéo consacré à la définition d'un site est à votre disposition.
J'ouvre la page html-layout-index-start.html.
Pour commencer, je vais donner un titre à la page.
Chaque page doit en avoir un.
Je vais remplacer la mention par défaut « Untitled » par « RENDERED ».
Voilà.
Le titre d'une page apparaît dans l'onglet du navigateur.
Google l'utilise pour afficher les résultats d'une recherche.
Jeton un coup d'œil au navigateur en générant un aperçu en temps réel.
Je clique en bas à droite de l'écran et je choisis Google Chrome.
Super, une page s'affiche !
Et que voit-on ?
Eh bien, regardez !
Il y a ici la mention « RENDERED », c'est-à-dire le titre de la page.
C'est parfait !
Nous allons maintenant ajouter à cette page blanche des éléments HTML.
Je reviens dans le code HTML.
J'ai ici quelques commentaires qui m'indiquent où ajouter quoi.
Tant qu'ils sont entourés de chevrons, ils seront ignorés par le navigateur.
Ce sont de simples indications.
Tout d'abord, je vais ajouter une indentation sous le commentaire « Header », puis le premier élément de la mise en page HTML.
Je tape un chevron et le terme « head ».
Avant même d'avoir saisi toutes les lettres, Dreamweaver me propose des indications de code.
J'ai le choix entre « head » et « header ».
Je choisis « header », puis j'ajoute le chevron fermant.
Chaque élément doit avoir une balise ouvrante et fermante.
La balise ouvrante est là.
J'ajoute la fermante en tapant un chevron, suivi d'une barre oblique.
Le reste est ajouté automatiquement.
Donc, chaque élément HTML possède une balise ouvrante — puis header dans ce cas — et une balise fermante.
L'intitulé est le même, mais précédé d'une barre oblique.
Si vous prenez l'élément « body », vous avez bien une balise ouvrante et fermante.
Même chose pour l'élément « head ».
Pourquoi utiliser l'élément « header » ici ?
Lorsque vous ajoutez des éléments « header », « main » ou « footer », vous utilisez des balises HTML5 prédéfinies servant à structurer la page.
Pour ce site, nous utiliserons certains de ces éléments, puis nous en créerons quelques-uns.
Je vais générer à nouveau un aperçu en temps réel dans le navigateur.
Cette fonctionnalité permet de vérifier le code dans un vrai navigateur.
Je sélectionne Chrome.
Et regardez !
Cette bande grise correspond à mon en-tête.
Vous vous demandez pourquoi il se présente ainsi ?
Généralement, lorsque vous ajoutez un élément « header », comme ici, vous ne pouvez pas le voir dans le navigateur.
Mais j'ai pris les devants et ajouté des styles CSS prédéfinis pour que vous puissiez le visualiser.
C'est uniquement pour que vous compreniez.
Je reviens dans Dreamweaver pour vous montrer ce que j'ai fait.
Voici l'élément « header ».
Ce tutoriel est consacré aux éléments HTML5, mais dans tous les cas, chaque élément doit savoir quoi faire.
Il faut, par exemple, définir la couleur et la taille.
J'ai donc déjà créé une feuille CSS pour la mise en forme.
Elle se trouve ici.
Je clique dessus pour l'ouvrir.
Je retrouve l'en-tête et ses propriétés de taille et de couleur.
Une autre vidéo est consacrée aux styles CSS.
Ici, nous allons nous concentrer sur les éléments HTML5.
Je repasse dans le code source, où je vais ajouter l'élément de navigation.
L'en-tête correspond à la bande en haut de la page dont la couleur noire est semi-opaque.
La barre de navigation apparaîtra en haut à droite.
Il va donc falloir que je me place à l'intérieur de la section d'en-tête.
Pour cela, j'appuie sur Entrée, je tape le mot « nav », suivi d'un chevron fermant.
J'ajoute un chevron ouvrant, puis une barre oblique.
La balise fermante est préremplie.
Dreamweaver est un outil formidable !
J'ai créé quelques styles CSS pour rendre la barre de navigation visible dans le navigateur.
Je repasse dans le navigateur.
Et voici la barre de navigation à l'intérieur de la zone d'en-tête.
Elle est blanche, comme je l'ai définie dans la feuille CSS.
Ces deux éléments HTML sont très importants.
Je reviens dans Dreamweaver.
J'appuie plusieurs fois sur Entrée pour bien séparer les sections.
J'ai ici mon en-tête, et je vais maintenant m'occuper du contenu principal.
Comme précédemment, j'ajoute un chevron ouvrant, je tape « main », suivi d'un chevron fermant, et j'insère la balise fermante.
J'ai maintenant ma section principale.
Elle sera relativement grande.
J'appuie sur Entrée.
Cette section sera composée d'un grand cadre vert pour la vidéo et d'une zone blanche pour le paragraphe d'introduction.
Nous utiliserons donc un élément « section » pour les différentes parties de la page web.
L'élément « section » est une balise HTML5 prédéfinie, au même titre que les éléments « header » et « main ».
Je tape le mot « section » suivi d'un chevron fermant.
Si vous ne voulez pas vous embêter à saisir tous ces chevrons et barres obliques, Dreamweaver peut accélérer votre workflow.
Si je saisis simplement « section » et que j'appuie sur la touche Tab, les balises ouvrante et fermante s'insèrent.
Si vous débutez, ce raccourci très pratique peut vous aider à obtenir la bonne syntaxe.
Je vais maintenant ajouter une section pour la zone principale.
Je tape « section », j'appuie sur Tab, et non sur Entrée.
Cette section servira à l'introduction.
Le problème ici, c'est qu'il faut que le premier cadre soit vert, et le second blanc.
Or, rien ne les différencie dans ma feuille CSS.
Nous allons donc les distinguer en créant ce qu'on appelle une classe.
Jusqu'ici, nous avons utilisé des balises prédéfinies.
L'en-tête est toujours appelé « header », et la navigation « nav ».
Nous allons donc créer une classe.
J'ajoute un espace après « section » et je tape « class ».
Dreamweaver me propose des indications autour du mot « class ».
J'appuie sur Entrée, et j'obtiens le reste de la syntaxe.
À l'intérieur des guillemets, je vais ajouter le nom de la classe.
Vous pouvez saisir ce que vous souhaitez.
Jusqu'ici, nous avons utilisé des balises prédéfinies.
L'en-tête est toujours appelé « header », et la navigation « nav ».
Pour cette classe, nous allons utiliser le mot « hero ».
Si ce dernier est déjà proposé, c'est parce que j'ai déjà créé une feuille CSS.
Nous l'avons utilisée plus tôt pour mettre en forme les premiers éléments.
C'est de cette feuille CSS que proviennent ces noms.
Lorsque vous créez un site, vous définissez des noms de classe au fur et à mesure.
Mais comme nous avons déjà cette feuille CSS, nous allons reprendre ces noms.
Je sélectionne « hero ».
Cela va me permettre d'identifier la première section.
Je répète l'opération ici, j'appuie sur Entrée, et je sélectionne « intro ».
Examinons le résultat dans le navigateur.
Parfait, j'ai mon en-tête représenté par cette bande laissant apparaître du vert en transparence.
Voici la barre de navigation, la section principale, et juste en dessous, une zone blanche d'information.
Je repasse dans Dreamweaver pour m'occuper de la section d'illustration.
Mais avant cela, jetons un coup d'œil au projet finalisé pour comprendre la structure de l'élément.
Voici l'en-tête avec la barre de navigation, puis la section principale, la zone d'information et la section d'illustration constituée de deux zones : une image à gauche, et sa description à droite.
Nous allons recréer cela.
Comme tout à l'heure, j'appuie plusieurs fois sur Entrée pour ajouter une nouvelle section.
Souvenez-vous, il suffit de taper « section », d'appuyer sur Tab, puis d'ajouter la classe.
Je choisis « artworks ».
Mais il est possible d'aller encore plus vite.
Je vous montre.
Saisissez le mot « section », et avant d'appuyer sur Tab, ajoutez un point, saisissez le nom de la classe — artworks — et appuyez sur Tab.
Magique !
La syntaxe est insérée.
Dans cette section, je vais ajouter un article.
Je tape un chevron ouvrant et le mot « article ».
Un article est une balise qui enveloppe le contenu le plus important sur la page.
Il s'agit du cœur de la page.
Il y a d'autres sections importantes et d'autres balises déjà présentes, mais elles se répètent.
Voici donc l'élément « article ».
Je n'utilise pas le raccourci.
Il faut une classe, que j'ajoute ici et que je nomme « artwork ».
Tout ce qui se trouve à l'intérieur de cet article est le contenu important.
Dans notre cas, il s'agit de l'illustration et de sa description.
J'ai maintenant une section et un article.
Je vais maintenant ajouter une balise « div ».
Ce type de balise sert à diviser l'espace lorsque vous avez une section et un article mais que vous ne pouvez pas réutiliser d'autres sections ou deux articles.
La balise « div » est un élément réutilisable que nous allons appliquer à l'illustration et à sa description.
Je définis la classe « artwork-piece ».
C'est à vous de définir le nom de la classe que vous créez.
La balise est préremplie ici, car j'ai déjà créé la feuille CSS.
J'ajoute la balise fermante.
Voilà pour la partie gauche du site web.
Passons à celle de droite.
J'ajoute l'élément « div class », et je choisis « artwork-description ».
Je n'oublie pas la balise fermante.
Vérifions tout cela dans le navigateur.
J'ai bien mes deux éléments « div », avec l'illustration sur la gauche et la description sur la droite.
L'un des derniers éléments de mise en page HTML que nous allons voir aujourd'hui est la balise « figure », souvent utilisée comme conteneur d'image.
Je vais donc me placer au niveau de l'élément « artwork-piece » et ajouter une balise « figure » à l'intérieur.
C'est ici qu'apparaîtra l'image du site.
Je tape « figure », et j'ajoute la balise fermante.
L'ajout d'une image à l'intérieur de cette balise offre davantage de souplesse pour ajouter des légendes.
Il suffit d'ajouter ici l'image et la légende qui, par défaut, seront indissociables.
Cette balise ayant déjà été mise en forme, voyons le résultat dans le navigateur.
Il s'agit du carré bleu clair que vous voyez ici.
Il ne manque plus que le pied de page.
La section se trouve un peu plus bas.
Je me place sous le commentaire, je saisis « footer », et j'appuie sur Tab.
Je descends un peu dans le navigateur.
Super, mon pied de page est là.
Nous n'allons pas ajouter de contenu, car l'objectif ici est de se concentrer sur les éléments de mise en page HTML5, autrement dit la structure.
Je vous propose maintenant de supprimer la feuille CSS préétablie pour voir comment le contenu HTML se présente lorsqu'aucun style n'est défini.
Voici donc notre page HTML mise en forme par la feuille CSS.
Imaginons que cette feuille n'existe pas.
Je la supprime.
Je repasse dans le navigateur.
Voici ce que nous avons : la page HTML s'affiche, mais elle n'est pas mise en forme.
La structure est bien là.
Il faut simplement définir les styles CSS.
Je rappelle qu'une vidéo est consacrée à ce thème.
Je réapplique la feuille CSS.
Dans cette vidéo sur les éléments de mise en page HTML5, nous avons ajouté les éléments « header », « main » et « footer », chacun se rapportant à une section spécifique.
Nous avons abordé la saisie automatique et ajouté une balise « figure ».
Vous savez maintenant comment structurer un site web en HTML.
Félicitations !
