Ma première page web, pas à pas HTML06

Cet exercice consiste à créer pas à pas sa première page web en créant la structure de base puis en utilisant des balises simples.

Avant de commencer l’exercice

Nous allons utiliser du texte de type Lorem Ipsum pour avoir du contenu textuel lors de la réalisation de cette exercice.

Définition :
Le faux-texte (également appelé lorem ipsum, lipsum) est, en imprimerie, un texte sans valeur sémantique, permettant de remplir des pages lors d’une mise en forme afin d’en calibrer le contenu en l’absence du texte définitif.

Source : Article Faux-texte de Wikipédia en français, http://fr.wikipedia.org/wiki/Faux-texte

Consignes de l’exercice

Créez un dossier racine à l’emplacement de votre choix, sous le nom html06-dossier pour stocker la totalité des fichiers de votre futur site web.

Ouvrez un éditeur de texte tel que Notepad++ ou Brackets.

À l’aide de votre éditeur de texte, créez une nouvelle page HTML sous le nom ma-premiere-page.html en prenant soin de bien placer votre fichier dans le dossier racine créé précédemment et en saisissant bien l’extension de fichier .html.

Attention
Les noms des fichiers d’un site web ne doivent jamais contenir d’accents, de majuscules, d’espaces ou de caractères spéciaux (excepté _ et -).
Cette règle vous permettra d’éviter bien des déconvenues lors de la mise en ligne.

Création d'une nouvelle page web avec notepad++
Création d’une page html avec Notepad++

Saisissez la structure de base suivante dans la page que vous venez de créer :

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
	</body>
</html>

Attention
À partir de maintenant, vous saisissez la totalité de votre code entre les balises <body> et </body> sauf mention contraire.

Ouvrez le fichier ma-premiere-page.html dans le navigateur Firefox ou Chrome. Vous devriez obtenir une page blanche… C’est tout à fait normal, votre page web est vierge pour le moment. Conserver cependant voter page html ouverte dans navigateur

Ouvrez un nouvel onglet de votre navigateur Internet et saisissez l’adresse https://fr.lipsum.com.

Générez du texte Lorem Ipsum sur le site que vous venez d’ouvrir.

Génération de Lorem sur le site fr.ipsum.com
Génération de Lorem sur le site https://fr.ipsum.com

En utilisant le faux-texte généré à la question précédente et une balise de paragraphe <p></p> , créez un nouveau paragraphe dans votre page web.

Enregistrez les modifications apportées en utilisant le raccourci clavier adapté (Ctrl + S sur Windows ou Cmd + S sur MacOs).

Retournez sur votre navigateur (Alt + Tabulation sur Windows ou Cmd + Tabulation sur MacOs).

Actualisez la fenêtre de votre navigateur (Ctrl + R sur Windows ou Cmd + R sur MacOs). Le paragraphe que vous venez d’insérer s’affiche.

Effectuez la même manipulation pour insérer un nouveau paragraphe en dessous du premier.

Vérifiez votre travail en actualisant votre page dans le navigateur pour afficher les modifications apportées à la question précédente.

À l’intérieur du premier paragraphe, utilisez la balise <strong></strong> pour mettre en valeur (emphase forte) cinq mots répartis dans le paragraphe.

Vérifiez votre travail en actualisant votre page dans le navigateur…

Dans votre navigateur, affichez le code source de votre page. Vous devez retrouver le code que vous avez saisi dans votre éditeur.

À l’intérieur du second paragraphe, utilisez la balise <em></em> pour mettre en valeur (emphase modérée) cinq mots répartis dans le paragraphe.

Vérifiez votre travail… Encore… Vous comprenez bien que vous devez vérifier vos modifications à chaque manipulation ! C’est essentiel pour identifier le plus vite possible les erreurs de code éventuelles.

Insérez un titre de niveau 1 en utilisant la balise <h1></h1> avant les deux paragraphes.

Insérez un titre de niveau 2 avant le premier paragraphe.

Insérez un second titre de niveau 2 avant le second paragraphe.

Avez-vous penser à vérifier votre travail dans votre navigateur à chaque question ?

  • Si oui, félicitations, continuez comme ça !!!
  • Si non, ne commencez pas à prendre de mauvaises habitudes et pensez à vérifier même si vous avez l’impression de perdre votre temps et pensez à utiliser les raccourcis clavier.

En dessous du deuxième paragraphe, insérez un titre de niveau 3 , un titre de niveau 4 et un titre de niveau 5.

À la suite de votre page web, insérez du texte contenant des accents. En fonction de votre navigateur, il est probable que vous ayez un problème d’encodage et que des caractères « bizarres » s’affichent en lieu et place des caractères accentués comme dans l’exemple ci-dessous

Problème d'encodage des caractères accentués
Problème d’encodage des caractères

Afin de régler le problème d’encodage identifié à la question précédente. Ajoutez la balise <meta> permettant de définir l’encodage de votre page web directement dans l’en-tête de votre page html comme illustré par l’exemple ci-dessous :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
	</body>
</html>

Toujours dans l’en-tête de la page utilisez la balise <title></title> pour ajouter un titre à votre page. Repérez dans votre navigateur où s’affiche le titre de la page…

De retour dans le corps de la page… Vous travaillerez désormais exclusivement entre <body> et </body> jusqu’à la fin de l’exercice.

Insérez, à l’intérieur des deux paragraphes, plusieurs sauts de ligne avec la balise <br>.

Insérez, avant les deux titres de niveau 2, un trait de séparation avec la balise <hr>.

Insérez un paragraphe spécial de citation longue en utilisant la balise <blockquote></blockquote> et du texte de type Lorem.

Insérez un nouveau paragraphe classique dans lequel vous ajoutez le texte « <p></p> est une balise de paragraphe » les balises html doivent être visibles dans le navigateur.

Ajoutez la balise <code></code> autour du texte « <p></p> » inséré à la question précédente.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.