Bonjour.
Dans cette vidéo, nous allons voir comment ajouter du contenu HTML dans une page.
Voici la version finalisée de la page que nous allons produire ensemble.
Nous allons créer le code HTML de cette image et de la barre de navigation située en haut.
Nous ajouterons ces titres au centre, ce paragraphe, ainsi que cette image.
Le contenu HTML est le point de départ de tout site web.
La page HTML que vous voyez là est mise en forme à l'aide d'une feuille CSS.
Le mot « GOLDRUSH » est codé en HTML — vous saisissez le terme et indiquez qu'il s'agit d'un titre — mais c'est la feuille CSS qui définit sa couleur, sa taille et l'interlettrage, de même que la distance entre ces deux blocs et les couleurs de fond.
En gros, HTML sert à structurer le contenu, et CSS à le mettre en forme.
Dans cette vidéo, nous allons nous concentrer sur le code HTML.
Un autre tutoriel est consacré aux styles CSS, mais le sujet du jour est le langage HTML.
Voyons à quoi ressemble une page HTML sans style CSS.
Je clique sur ce deuxième onglet.
Le site est le même, mais sans aucune mise en forme CSS.
Je retrouve les éléments de navigation, le titre, les images et le paragraphe.
C'est précisément ce contenu que nous allons ajouter.
Ce n'est qu'après définition des styles CSS que nous nous rapprocherons de la version finalisée.
Ouvrons Dreamweaver et ajoutons ces éléments HTML.
Avant d'aller plus loin, vérifiez que vous êtes en mode Développeur.
Dans l'angle supérieur droit, passez du mode Standard au mode Développeur.
J'ai également défini le site dans Dreamweaver pour gérer les fichiers.
Pour suivre ce tutoriel, faites la même chose de votre côté en choisissant Site > Nouveau site.
Ce tutoriel ne porte pas sur la définition d'un site, mais sachez qu'une autre vidéo consacrée à ce sujet est à votre disposition.
Nous allons travailler sur cette page HTML qui s'intitule « rendered-index-start.html ».
Certains conteneurs HTML sont déjà présents.
Ils vont nous permettre d'insérer notre contenu et de faciliter le démarrage.
Jetons un œil à tout cela dans le navigateur.
Pour prévisualiser cette page, il suffit de cliquer en bas à droite sur le bouton Aperçu en temps réel et de choisir Google Chrome.
Voici la page qui sert de point de départ.
Elle est totalement vierge.
Les conteneurs sont encore vides, mais nous allons y ajouter des éléments HTML.
Allons-y et commençons par le premier élément.
Dans Dreamweaver, je vais d'abord m'occuper de l'image du logo.
Le conteneur étant déjà défini, je vais pouvoir ajouter l'image.
Pour cela, j'insère une parenthèse angulaire gauche, puis je saisis « img », autrement dit la balise HTML servant à ajouter une image.
J'indique « src » pour la source, puis j'appuie sur Entrée.
Dreamweaver ajoute alors une partie de la syntaxe dans le code HTML, à savoir un signe égal et des guillemets.
J'ai également cette fenêtre contextuelle dans laquelle je peux cliquer sur Parcourir pour accéder à mon dossier d'images.
Je choisis « logo-white.png », puis j'insère une parenthèse angulaire droite.
Voilà comment on ajoute une image en HTML.
Passons maintenant à la barre de navigation.
Elle doit apparaître en haut à droite de la page.
Pour la définir, il va falloir ajouter des éléments dans ce conteneur « nav » — abréviation de « navigation ».
Je vais donc créer une liste non numérotée.
Mais avant, je vais vous montrer à quoi cela ressemble.
Concrètement, il s'agit d'une liste à puces que vous pouvez mettre en forme pour supprimer les puces et obtenir une jolie barre de navigation.
Je commence par insérer une parenthèse angulaire gauche et le terme « ul ».
Cette balise désigne une liste non numérotée.
J'ajoute une parenthèse angulaire droite.
Il ne faut pas oublier la balise fermante.
L'élément « header » possède bien une balise ouvrante et une balise fermante.
La syntaxe est la même.
Il y a juste une barre oblique en plus.
Même chose pour cet élément, composé d'une balise ouvrante « a » et d'une balise fermante « /a ».
La balise ouvrante « ul » étant créée, je vais ajouter la balise fermante en insérant une parenthèse angulaire droite, suivie d'une barre oblique.
Dreamweaver complète la syntaxe à ma place.
À l'intérieur de ce conteneur parent, il faut ajouter des éléments de liste, autrement dit les différentes puces.
Pour cela, je vais utiliser des balises « li ».
Comme précédemment, je laisse Dreamweaver préremplir la balise fermante.
Voilà pour la première puce.
Dans cette liste, je vais insérer un lien.
J'insère une parenthèse angulaire gauche, puis je choisis la première option de la liste.
L'élément « a » sert à ancrer des liens.
J'y ajoute la mention « href » pour définir l'hyperlien de la page ou du site vers lequel l'utilisateur sera renvoyé dès qu'il cliquera sur le lien.
Dès que je tape le mot « href » et que j'appuie sur Entrée, Dreamweaver complète la syntaxe.
Pour définir ce lien, je vais utiliser un espace réservé en ajoutant un signe dièse.
Les hyperliens sont un peu plus complexes que les éléments « li ».
J'ajoute la balise fermante en procédant comme avant : j'insère une parenthèse angulaire suivie d'une barre oblique, et le tour est joué.
Je me place entre ces deux balises et je tape le nom du premier menu.
Voyons maintenant ce que ça donne dans le navigateur.
Super, j'ai un système de navigation.
Enfin, presque...
Il y a bien un lien et la première puce d'une liste non numérotée.
Parfait !
Vous vous demandez où est passé le logo ?
C'est un peu de ma faute.
Il est bien présent, mais il est blanc sur fond blanc.
On le verra mieux plus tard en ajoutant l'arrière-plan vert.
Passons aux autres éléments de la liste.
Il doit y en avoir cinq en tout.
Je repasse dans Dreamweaver.
Pour créer les quatre autres éléments de la navigation, je pourrais me placer sur cette ligne, la sélectionner, la copier, ajouter une entrée et coller ma sélection.
Mais je peux aussi me placer ici, et appuyer sur Cmd+D sur Mac ou Ctrl+D sur PC, pour dupliquer la ligne quatre fois.
Je peux ensuite remplacer ce « HOME » par « ABOUT » et ainsi de suite.
C'est bien pour se familiariser avec la syntaxe, mais il y a plus rapide.
Je supprime toutes ces lignes, et à l'intérieur de cet élément, je vais utiliser un raccourci Emmet.
Je tape « ul », puis « >li ».
Comme il me faut cinq éléments, j'insère un astérisque, suivi du chiffre 5, et j'ajoute enfin un élément « a » à l'intérieur.
Si j'appuie sur Entrée, il ne se passe rien.
Mais si j'appuie sur Tab, regardez !
Toutes les lignes sont dupliquées.
Ces astuces de Dreamweaver peuvent considérablement accélérer la création d'un site.
J'ajoute maintenant des signes dièse.
Il s'agit simplement d'espaces réservés que je remplacerai plus tard par les liens vers les différentes pages.
Je spécifie ensuite les noms des menus : « HOME », « ABOUT », « GALLERY », « TICKETS » et « CONTACT ».
Ce sont les éléments classiques d'une barre de navigation.
Et voici le contenu HTML qui compose la nôtre.
Vérifions tout cela dans le navigateur.
Voici à quoi ressemblent des éléments de navigation bruts.
Je vais maintenant joindre une feuille CSS préétablie à la page HTML pour la suite de ce tutoriel.
Je vais continuer à me focaliser sur le contenu HTML mais j'aimerais que les prochains éléments soient correctement mis en forme.
Je vais donc repasser dans Dreamweaver et joindre cette fameuse feuille CSS.
Elle doit figurer dans l'élément « head ».
Voici la balise ouvrante et la balise fermante.
Je peux la placer n'importe où à l'intérieur.
Je vais l'insérer après cette ligne de script.
La syntaxe d'une feuille CSS étant assez longue, je vais utiliser une astuce identique à la précédente.
Je tape « link » et si j'appuie sur Tab, j'obtiens le code indiquant qu'il faut joindre une feuille de style.
Je dois maintenant spécifier la feuille à utiliser.
Il s'agit du fichier que vous voyez là et que j'ai créé en amont.
Je me place entre les guillemets, je saisis les lettres « st », et Dreamweaver me propose le fichier « styles.css ».
Je clique sur Entrée pour appliquer la suggestion.
Difficile de savoir ce qui a changé en restant dans le code.
Je vais donc passer dans le navigateur.
Quel changement !
Le contenu HTML est le même mais il est mis en forme avec la feuille CSS préétablie.
Je vous rappelle qu'un tutoriel consacré aux styles CSS est à votre disposition.
Depuis que la feuille CSS est appliquée, les puces et traits de soulignement ont disparu, et les menus sont désormais blancs et accessibles en haut à droite.
Le logo est maintenant visible grâce à cet arrière-plan vert.
Le reste de la page a également changé.
Outre ce cadre vert, il y a cet espace blanc, ce deux blocs de dégradés, ainsi que d'autres éléments provenant de la feuille CSS.
Repassons sur le code HTML dans Dreamweaver.
Je vais maintenant m'occuper des titres.
Jetons un œil à la version finalisée.
Sur cette page, on a le titre principal, soit le titre de niveau un, le titre de niveau deux, soit « h2 », et enfin le titre de niveau trois.
Je vais donc les ajouter dans Dreamweaver.
Voici le cadre qui m'intéresse.
Je me place sous « hero-content ».
J'insère une parenthèse angulaire gauche et je saisis « h2 » pour le premier titre.
Je tape « > », « < » et « / » pour obtenir la balise fermante.
C'est assez rapide, mais il y a encore mieux.
Regardez.
Je saisis « h2 » et si j'appuie sur Tab, j'obtiens toute la syntaxe.
J'insère le texte.
J'ajoute le titre « h1 », j'appuie sur Tab, et j'insère Rendered.
Je repasse dans le navigateur.
Voici le titre « h2 » et le titre « h1 ».
Passons au titre « h3 ».
Je saisis « h3 » et j'appuie sur Tab.
Pour celui-ci, je vais saisir le texte car j'aimerais vous montrer un caractère spécial.
J'ajoute un tiret, puis les nombres 21 et 2017.
Ce tiret apparaîtra dans certains navigateurs, mais pas tous.
Si vous devez ajouter l'un de ces caractères spéciaux ou tout autre symbole non alphanumérique, vous devez utiliser une syntaxe HTML particulière.
Vous éviterez ainsi tout problème d'affichage.
Pour cela, il faut commencer par ajouter une esperluette.
Dreamweaver vole à mon secours car je n'arrive jamais à mémoriser ces codes.
Pour insérer un signe pourcentage, le code à utiliser est esperluette, dièse, 37 et point-virgule.
Le tout forme le signe pourcentage.
Vérifions le résultat dans le navigateur.
Le code a bien été interprété, puisqu'on voit le symbole et non les caractères HTML.
Je vais donc rechercher le code du tiret.
Je supprime celui-ci.
N'oubliez pas qu'il faut d'abord ajouter une esperluette.
Je recherche le tiret...
Le voici : esperluette, dièse, 45, point-virgule.
J'ai maintenant mon tiret.
Passons dans le navigateur.
Il est bien là !
Je complète le titre en ajoutant « SAN FRANCISCO ».
Voilà pour le titre « h3 ».
On va maintenant ajouter du texte dans cet espace blanc pour au final obtenir ce paragraphe d'introduction.
Allons-y.
Parmi les autres balises HTML vraiment utiles, il y a la balise « p ».
On va l'utiliser pour le texte d'introduction.
Je vais la placer dans ce conteneur « div ».
Je tape un « p » et j'appuie sur Tab.
C'est l'abréviation de « paragraphe ».
Les balises « p » sont souvent très nombreuses.
Elles constituent le corps d'un site.
Je vais donc insérer ce bloc de texte ici.
Et grâce à la feuille CSS que j'ai jointe, la police et la taille du paragraphe sont correctement définies.
Bien, je vais maintenant remplir cette partie.
Voici la version finalisée, avec cette belle image.
Allons-y.
L'élément « img » est toujours le même.
Tout à l'heure, j'avais tapé « img » et « src », puis obtenu une partie de la syntaxe.
Mais il y a plus rapide.
Je tape « img » et si j'appuie sur Tab, j'obtiens toute la syntaxe.
Dans cette balise, je spécifie le dossier « images » et je choisis le fichier « goldrush.jpg » dans la fenêtre contextuelle.
La balise « alt » est utilisée par les logiciels de lecture d'écran.
Son contenu apparaît sur la page lorsque l'image ne se charge pas.
Ici, je vais indiquer le nom de l'artiste.
Passons dans le navigateur.
L'image est là.
Elle est superbe.
La dernière chose à ajouter — j'affiche la version finalisée — c'est ce titre de niveau 2 et ce paragraphe.
À noter que le titre « h2 » doit être différent du précédent.
Même chose pour ce paragraphe.
Pour les différencier, on va utiliser une classe.
Le conteneur qui m'intéresse se trouve ici.
Je vais commencer par le titre « h2 ».
Je tape « h2 » et j'appuie sur Tab.
Je saisis « Goldrush ».
Pour le différencier de l'autre titre « h2 », je vais donc ajouter une classe.
Je tape le mot « class » et j'appuie sur Entrée pour obtenir la bonne syntaxe, avec le signe égal et les guillemets, puis je choisis « artwork-title ».
Malgré ce nom spécifique, il s'agit toujours d'un titre « h2 ».
Cette balise permet d'appliquer le style CSS « artwork-title » pour marquer la différence.
Je fais la même chose pour le paragraphe.
Je tape la lettre « p » et j'appuie sur Tab.
Cette fois, je vais ajouter une classe nommée « artwork-text ».
Je colle le texte et je vérifie le résultat dans le navigateur.
La différence a bien été faite.
Passons au bouton « See More » auquel est associé un lien.
Je vais l'ajouter sous la balise « p ».
Tout à l'heure, j'avais tapé « a href » et rédigé le reste du code.
Mais il y a plus rapide, puisqu'il suffit de taper un « a » et d'appuyer sur Tab pour récupérer toute la syntaxe.
Comme je n'ai aucun lien à ajouter pour le moment, j'insère un signe dièse.
Je me place ensuite ici et j'ajoute une classe nommée « see-more ».
Je saisis le texte « See More » entre les guillemets, puis je passe dans le navigateur.
Parfait, le bouton est là et le lien aussi.
Bien, nous avons donc ajouté un certain nombre d'éléments HTML.
Les balises « p » et « h1 », de même que les images et les hyperliens, sont les principaux éléments de la structure d'une page web.
Bon, on a eu la chance d'avoir une feuille de style préétablie.
À présent, j'aimerais vous montrer comment le contenu HTML se présente lorsqu'aucun style n'est appliqué.
Habituellement, vous ajoutez votre titre « h1 », puis vous définissez vos styles CSS.
Ce sujet est abordé dans de nombreuses vidéos, mais pas dans celle-ci.
Je vais donc désactiver la feuille de style.
Dans Dreamweaver, je remonte en haut de la page, où se trouve le lien vers mes styles.
Je sélectionne la ligne et je la supprime.
Vous avez vu ce qui s'est passé à l'arrière-plan ?
Il ne reste plus que le contenu HTML brut.
Voici la liste et les éléments associés, les titres « h2 » et « h1 », l'image, quelques liens et le pied de page.
Voilà à quoi ressemble une page HTML sans mise en forme.
Il y a donc une étroite corrélation entre la page HTML que vous créez et la feuille CSS que vous définissez.
Merci d'avoir suivi ce tutoriel sur l'ajout de contenu HTML dans une page web.
