Voir le résultat Retour à la page du projet
Afficher/Masquer les commentaires
Indique que le document est au format html5
<!DOCTYPE html>Début du code html, le document est écrit en langue française
<html lang="fr">Début de la partie head
<head>L'encodage des caractères de la page est en utf-8
Note : Les balises meta n'ont pas de balise fermante séparée, ce sont des balises auto-fermantes qui se terminent par un slash (placé juste avant le symbole >).
<meta charset="utf-8"/>Indique le titre qui est affiché dans la barre de la fenêtre du navigateur. Ce titre est également utilisé par les moteurs de recherche.
<title>Titre de la page</title>Indique le résumé du contenu de la page. Il est souvent utilisé par les moteurs de recherche dans l'affichage des résultats.
<meta name="description" content="Résumé du contenu de la page."/>Entre les balises <style> et </style> figure du code CSS.
Ce langage ne fonctionne pas par balisage comme le HTML.
<style>Mise en forme pour le body :
La propriété background-color prend la valeur silver.
Cette propriété définit la couleur de fond de la page qui sera gris clair.
Note : observez bien la syntaxe particulière du CSS, bien différente de celle du HTML.
body{
background-color:silver;
}La couleur des titres h1 est rouge.
h1{
color:red;
}La règle CSS suivante s'applique à tous les éléments qui possèdent l'attribut class="centre".
Tout élément de la page web avec cet attribut a son texte centré. Dans ce document deux paragraphes possèdent cet attribut, du coup le texte inclus dans ces paragraphes est centré.
Note : Une règle de classe débute par un point suivi du nom de la classe.
.centre{
text-align:center;
}Cette règle CSS concerne l'élément de la page ayant l'attribut id="monSousTitre". L'élément en question, en l'occurence un titre h2, est écrit en jaune avec une police de caractères de 16 pixels de haut.
Un même identificateur ne peut pas être attribué à des éléments différents.
Note : Une règle relative à un élément identifié commence par #;
#monSousTitre{
color:yellow;
font-size:16px;
}
</style>
</head>Fin de la partie head et début de la partie body
<body>
<h1>Titre de la page</h1>
<h2 id="monSousTitre">Sous-titre</h2>Ce premier pararagraphe contient plusieurs phrases. Un passage à la ligne dans le code source HTML ne provoque pas de saut de ligne à l'affichage de la page dans le navigateur. Pour obtenir effectivement un saut de ligne il faut utiliser la balise <br/>.
<p>Voici une premiere phrase du paragraphe.
Ceci est une deuxième phrase.
<br/>
Voici une troisième phrase avec passage à la ligne.</p>Le paragraphe suivant appartient à la classe centre, donc son contenu est centré. Il contient un élément d'image qui affiche l'image contenue dans le fichier image.png.
Note : Les images se trouvent dans des fichiers séparés. Leur chargement
pour affichage est assuré par le navigateur lorsqu'il rencontre un élément img.
<p class="centre"><img src="image.png"/></p>
<p>Un troisième paragraphe.</p>
<h2>Sous-titre</h2>Ce paragraphe contient un hyperlien. Cet élément fondamental permet la navigation entre les différentes pages du web, l'attribut href indique la page de destination.
<p>Voici un lien : <a href="autre-page.html">Le texte du lien vers mon autre page</a></p>
</body>
</html>