Structure D'une Page Html

Qu'est-ce qu'un langage ?

Un langage c'est comme une langue, si vous partez en vacances et que voulez vous faire comprendre en Espagne il faudra apprendre et parler Espagnol !
Et bien, si vous souhaitez créer un site web il faudra apprendre et parler html / css. (à la différence que ce sera une langue écrite uniquement)

Qu'est-ce qu'un code ?

Un code est un morceau de texte suivant des normes et les conventions d'un langage, introduit à l'intérieur d'un fichier possédant l'extension du langage (exemple : .html, .css, etc.).

l'ensemble de ces lignes de code sont exécutées et lues (par un navigateur ou l'interpréteur d'un serveur) et permettent d'obtenir un affichage en retour.

Qu'est-ce qu'une balise ?

Une balise est un mot entre chevron, par exemple :

La balise permettant de contenir des paragraphes s'ouvre avec :

Cette même balise se ferme avec : </p>
Certaines balises sont auto-fermantes (elles ne se ferment pas), par exemple :

<mabaliseautofermante>

Parmis les balises autofermantes nous pouvons noter les suivantes : <br> , <hr> , <img> , <meta> , <input> , <link> ...

Qu'est-ce qu'un chevron ?

Un chevron ouvrant c'est ce caractère : <
Un chevron fermant c'est ce caractère : >

Qu'est-ce qu'un attribut ?

Un attribut est un mot complémentaire venant se glisser à l'intérieur d'une balise.

Exemple avec l'attribut charset :

			<meta charset="utf-8">
		

La balise Meta, peut servir à plusieurs utilisations...
Nous lui ajoutons donc l'attribut charset pour préciser que nous souhaitons régler l'encodage des caractères sur UTF-8 (attention il faudra que votre éditeur soit également réglé sur UTF-8 sans bom).


Un autre exemple avec l'attribut content :

Comme la balise Meta peut servir dans plusieurs situations, nous lui ajoutons donc l'attribut description pour préciser que nous souhaitons ajouter une description qui soit prise en compte par Google et les autres moteurs de recherche.

L'attribut description de la balise meta permettra de fournir à Google (et aux autres moteurs de recherche) une description.

Qu'est-ce qu'une valeur ?

Une valeur est un mot ou un ensemble de mots venant renseigner un attribut.

Dans notre code ci-dessus, les balises apparaissent en bleu, les attributs en blanc, les valeurs en vert. Exemple :

				<link rel="stylesheet" href="structure.css">
		

Une valeur est un morceau de texte saisi dans les guillemets d'un attribut. comme ici avec le nom de notre feuille de style css : structure.css.

Cette ligne nous permettra plus tard de lier le fichier Html au fichier Css.

Qu'est-ce qu'un commentaire ?

Un commentaire est une portion de texte (souvent une note ou une indication) ignorée par l'interpréteur, exemple :

		
 
			Mon Texte 
		

	

Les commentaires sont des morceaux de texte ignorés par le navigateur, c'est en quelque sorte des annotations que l'on peut ajouter pour y voir plus clair et se repérer plus rapidement dans un code-source.

Les commentaires sont également très pratiques lors d'un travail d'équipe de manière à ce qu'un nouveau développeur arrivant sur un projet comprenne rapidement avec quelques indications le travail ayant été réalisé.

Qu'est-ce que l'indentation ?

L'indentation consiste à se décaler (du bord gauche) vers la droite pour indiquer que l'information se trouve à l'intérieur.

		

			Mon Texte
		
	

Dans notre cas « Mon Texte » se trouve à l'intérieur des balises <p> et </p>.

Il est important de respecter cette méthodologie en entreprise (pour soi, mais aussi lorsque l'on collabore avec plusieurs personnes).

Si vous ne voyez pas l'intérêt de l'indentation, posez-vous cette question : aimeriez-vous que l'on vous partage 200 lignes de code totalement dé-indentées et quasi illisibles ?

Même si cela n'est pas obligatoire pour rendre un code personnel fonctionnel, cela reste hautement recommandé pour améliorer la lecture.

Débuter et créer une première page en Html

Nous allons créer un premier fichier par l'intermédiaire de notepad++.

Nous nommerons ce fichier : mapage.html

Voici le contenu à introduire dans votre fichier :

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page</title>
			</head>
			<body>
			
				<h1>Mon premier Titre !</h1>
				<p>Et mon premier paragraphe de texte qui l'accompagne !!</p>
				
			</body>
		</html>
		

N'oubliez pas d'enregistrer en sauvegardant votre fichier :



Décryptons ensemble les données saisies :

• Doctype est une balise obligatoire en début de document et cela peut aussi permettre de préciser son type ainsi que la version du langage Html utilisée. C'est également indispensable pour valider son code source auprès de l'organisation W3C.


• Html est également une balise indispensable, elle doit être présente dans tous vos documents pour englober le code de vos pages web.


• Head définie les entêtes de votre document, c'est une partie non visible mais nécessaire pour plusieurs raisons. Par exemple, nous pourrons définir un titre de page, se lier avec une feuille de style css ou encore préciser la description de notre site web.


• Title permet de donner un titre à votre page, c'est ce que vous verrez apparaitre sur l'onglet de votre navigateur


• body définit, cette fois, le corps de votre document, c'est la partie visible de votre page web, c'est à cet endroit que nous mettrons du texte, des images, et toute autre information.


• h1 est une balise qui permet de déterminer le titre du document (en général, nous ne mettons qu'un seul titre par page, par convention liée au référencement).


• p est une balise qui permet de créer un paragraphe de texte du document (nous pouvons en mettre autant qu'on le souhaite !).

Encodage des caractères

Les fichiers créés sous notepad doivent posséder l'encodage utf-8 sans bom :



Vous devrez ajouter la balise suivante dans la partie <head> pour éviter des problèmes d'encodage :

		<meta charset="utf-8">
	

Structure d'une page web ! Le code Html

Nous allons créer un nouveau dossier (sans espace, sans accent) nommé : /HtmlCss/
A l'intérieur du dossier /HtmlCss/, nous allons créer un nouveau dossier nommé : /Structure/
Nous allons étudier le code source d'une page web standard

Pour cela, créer un fichier nommé : structure.html



Nous travaillerons donc sur le fichier et le chemin suivant : /HtmlCss/Structure/structure.html

		<!Doctype html>
		<html>
			<head>
				<title>Ma Page</title>
				<link rel="stylesheet" href="structure.css">
				<meta charset="utf-8">
				<meta name="keywords" content="motclé1 motclé2">
				<meta name="description" content="la description du site web">
				<meta name="author" content="Nom Prenom">
			</head>
			<body>
			
				<header>
					
				</header>
				
				<nav>
					
				</nav>
				
				<section>
					<div>
						<span>
						
						</span>
					</div>
				</section>
				
				<article>
					
				</article>
				
				<footer>
				
				</footer>
				
			</body>
		</html>
		

Comme vous pouvez le constater, l'indentation a été respectée

Décryptons ensemble les données saisies :

• Doctype est une balise obligatoire pour déclarer un document et pour plus tard valider son code sur W3C.


• Html est également une balise indispensable, elle doit être présente dans tous vos documents pour englober le code de vos pages web.


• Head définit les entêtes de votre document, c'est une partie non visible mais nécessaire pour plusieurs raisons. Par exemple, nous pourrons définir un titre de page, se lier avec une feuille de style css ou encore préciser la description de notre site web.


• Title permet de donner un titre à votre page, c'est ce que vous verrez apparaitre sur l'onglet de votre navigateur


• Link permet de me relier à une feuille de style css (je pourrais écrire du code css à l'intérieur pour mettre en forme ma page web)


• Meta permet de donner des informations sur son site web comme l'encodage utilisé, une liste de mots clés décrivant votre site web, l'auteur du site, une description (la description est utilisée par Google, c'est ce qu'on peux apercevoir sous l'adresse url d'un site web dans le moteur de recherche).
  Meta description :
  
  
  
• Body définit le corps de votre document, c'est la partie visible de votre page web, c'est à cet endroit que nous mettrons du texte, des images, et toute autre information.


• Header est une balise permettant de prévoir un emplacement (ou une zone) pour le haut de votre site web. En général, nous y retrouvons un logo, un slogan ...


• Nav est une balise permettant de prévoir un emplacement (ou une zone) pour votre menu de navigation. En général, nous y retrouvons des liens.


• Section est une balise permettant de prévoir un emplacement (ou une zone) pour le contenu de votre site web. Nous y retrouverons plutôt un titre, du texte, des images, etc.


• Div est une balise permettant de prévoir un emplacement (ou une zone) quelconque de votre site web. L’élément div peut regrouper tout et n’importe quoi, alors que l’élément section a plutôt été pensé pour regrouper du contenu apparenté.


• Span est une balise permettant de prévoir un petit emplacement secondaire, on l'utilise souvent à l'intérieur d'une autre zone. L’élément span peut regrouper tout et n’importe quoi, il s'agit d'une zone secondaire d'information


• Article est une balise permettant de prévoir une zone de texte.


• Footer est une balise permettant de prévoir un emplacement (ou une zone) pour le bas de votre site web. En général, nous y retrouvons des liens administratifs (type: mentions légales, plan du site, Conditions Générales, etc), un copyright, etc.

Voici ce que ces balises pourraient donner lors d'un affichage :







L'ordre de saisie des balises determine l'ordre d'affichage.

Assurer la liaison entre une page html et une feuille de style css

Il n'est pas courant d'écrire un fichier Html sans se lier à une feuille de style Css.

Le code Html détermine la structure de la page (incluant les différentes zones), mais nous devons également écrire du code CSS pour positionner ces zones sur la page, leur donner des tailles, des couleurs, etc.

Reprenons les 2 fichiers précédents : structure.html et structure.css
Nous attribuons le même nom aux 2 fichiers toutefois les fichiers pourraient se nommer différement

Cette ligne (à placer dans le code HTML) vous permettra d'assurer la liaison avec votre feuille de style (fichier css) :

		<link rel="stylesheet" href="structure.css">
	

Comment être sûr d'être correctement relié à votre feuille de style ?

Et bien, si vous écrivez du code CSS de mise en forme et que vous ne voyez pas votre style sur votre page html, c'est sans doute qu'il y a un problème dans le code ou dans le chemin qui relie les deux fichiers.

Vous pouvez aussi effectuer un clic droit > code source de la page (ctrl + u au clavier) et cliquer sur le chemin du fichier « .css » qui est affiché.



Lorsque vous cliquerez dessus, deux résultats sont possibles :

1. Soit, vous pouvez observer votre code CSS apparaitre et vous savez que votre fichier est bien relié.
Si un problème persiste, cela sera certainement lié au code en lui-même mais pas à la liaison entre les fichiers. Pensez à relire le code html tout comme le code css, vérifiez que vos deux fichiers soient bien enregistrés et que la liaison entre html et css soit bien établie (cela peut aussi être une erreur de chemin de fichier).

2. Soit, une page d'erreur s'affiche :


Sur un site web static, généralement une seule feuille de style est utilisée.

Un seul code Html peut être personnalisé différemment selon les feuilles de style, voici l'exemple du zen garden.
Vous pourrez afficher le site du zen garden sous différentes couleurs et présentations, le code Html est toujours le même.

Comment voir votre page web et observer le rendu à l'écran dans le navigateur ?

Pour observer le rendu de votre page web à l'écran, il faut se rendre dans votre éditeur sur la partie exécution > Lancer avec Firefox (par exemple).



Un autre moyen consiste à aller sur l'emplacement de votre fichier pour effectuer un double clic gauche ou un clic droit > ouvrir avec > firefox (ou un autre navigateur).

Oui, rassurez-vous, c'est tout à fait normal :p ! nous n'avons pas encore écrit le code CSS.
Les emplacements et les zones sont bien déclarés mais il faut ajouter une mise en forme afin de les voir apparaitre.



N'oubliez pas d'actualiser votre navigateur (f5 ou ctrl + r) pour rafraichir votre page.

Observer le code-source de la page pour trouver ses erreurs

Avant d'aller plus loin, vous pouvez observer le code-source de la page, vous pouvez effectuer un clic droit > code source de la page dans votre navigateur.

Ou directement avec le racourci, au clavier : ctrl + u.

Regarder votre code-source est très utile, s'il y a une erreur de sémantique, celle-ci apparait généralement en rouge.

Exemple dans le code source :



Nous pouvons constater que la balise body apparait en rouge et que par conséquent il y a une erreur sur cette ligne !

Exemple dans l'éditeur :



Un autre indicateur d'erreur : La coloration syntaxique.

Sous notepad les balises apparaissent en bleu, les attributs en rouge, les valeurs en violet. Si les couleurs ne sont pas bonnes, cela peut être révélateur d'une erreur dans le code.

Nous voyons que la balise header n'a pas sa couleur habituelle, c'est donc qu'une erreur a été faite avant la ligne n°12.

Vous avez trouver l'erreur ? et oui, il s'agit du chevron fermant sur la balise body !

D'une manière générale, pensez donc à toujours vérifier votre code-source pour voir si rien n'apparait en rouge avant d'aller plus loin.

Validons notre code-source avec le W3C

Pour cela, il faut se rendre sur Google et saisir : w3c validator.

Nous avons 3 types de validation possibles :

• Par l'url
• Par un upload de fichier
• Par une saisie (copier/coller)

Etant donné que notre site n'est pas en ligne, nous allons éliminer le 1er choix et je vous propose de copier/coller votre code dans le 3e onglet, comme ceci :



Excellente nouvelle ! Notre document est valide et conforme et aucune erreur n'est relevée !

Comment créer une page d'accueil ?

Lorsqu'on crée un site web, c'est pour le mettre en ligne (sur le web) à terme.

En effet, si votre site web reste en local sur votre ordinateur, il risque de ne pas servir énormément puisque personne ne le verra à par vous même !

Lorsque l'on crée un site web, il y a toujours une page d'Accueil (Home Page, page par défaut), pour cela nous créons un fichier qui se nomme : index.html

En effet, c'est la première ressource que va rechercher le serveur lorsque vous accéderez à un site web. Gardez à l'esprit que si vous souhaitez créer une page d'accueil il faudra appeler le fichier index.html