HTML Bases

Tous les documents HTML doivent commencer par une déclaration de type:
<!DOCTYPE html> : Il sert à définir le type du document afin qu’il soit correctement interprété par le navigateur.
Le document HTML lui-même commence par la balise <html> et se termine par </html>.
La balise <head> contient tous les éléments de l’en-tête de votre document.
La partie visible du document HTML est située entre <body> et </body>
<meta charset="utf-8"/> : Tout document contenant du texte sont enregistrés avec un jeu de caractères précis. Ce jeu de caractères, utilisé pour créer ou enregistrer le document, correspond à l'encodage réel du document (UTF-8 permet d'encoder toutes les langues).

		<!DOCTYPE html>

		<html>

			<head>

				<meta charset="utf-8"/>
				<title>Ma première page</title>

			</head>
			
			<body>

				<p>Je suis la partie visible du corps de la page WEB</p> 

			</body>

		</html>

Les titres : <hx>...</hx> ; x = 1 à 6

La balise <h1> définit un titre de niveau 1

Un titre de niveau 1 commence par la balise <h1> et se termine par </h1>.

L'élément contenu se trouve entre les deux balises <h1> et </h1>.

Il existe 6 niveaux de balise h:

		<h1>Je suis un titre de niveau 1</h1>
		<h2>Je suis un titre de niveau 2</h2>
		<h3>Je suis un titre de niveau 3</h3>
		<h4>Je suis un titre de niveau 4</h4>
		<h5>Je suis un titre de niveau 5</h5>
		<h6>Je suis un titre de niveau 6</h6>

Voir

Le paragraphe : <p>...</p>

La balise <p> définit un paragraphe

Ca commence par la balise <p> et se termine par </p>.

L'élement contenu se trouve entre les deux balises <p> et </p>.

		<p>Je suis un paragraphe</p>
		<p>Je suis un autre paragraphe</p>
		<p>Je suis toujours un paragraphe</p><p>Je suis encore et toujours un paragraphe</p>

		<p>Je suis un paragraphe</p>
		<p>Je suis<br />un paragraphe<br />sur trois lignes</p>
		<p>Je ressemble &agrave; un paragraphe
		sur deux lignes mais en fait, pas du tout ! Je suis sur une ligne</p>

Voir

Les exemples ci-dessus fonctionnent dans tous les navigateurs, même si vous oubliez la balise de fermeture ; car celle-ci est considérée comme facultative.

MAIS ne jamais se fier à ce sujet. Il pourrait produire des résultats et/ou des erreurs inattendues si vous oubliez la balise de fin !!!!

La balise <br /> définit un retour à la ligne (line break)

Les ancres (liens) : <a>...</a>

		<h1>Pratique de <a href="http://www.mysql.com">Mysql</a></h1>
		<p>Ce chapitre, vu &agrave; <a href="http://www.hei.fr">HEI</a>,
		est consacr&eacute; au HTML</p>
		<p>Vous pouvez revoir l'exemple <a href="exemple002.html">pr&eacute;c&eacute;dent</a>
		si vous le souhaitez !</p>

Voir

L'adresse du lien est spécifiée dans l'attribut href
Le lien peut désigner un site, une page, un positionnement à un endroit de la page

Exemple de lien pour se positionner sur une marque dans la page :

voici le lien à positionner dans la page : <a href="#top">Aller en haut de la page</a>

Voici l'ancre à mettre à l'endroit où on veut atterrir (ici en haut) : <a name="top"></a>

Les images : <img />

Le fichier source (src), un texte alternatif (alt), et la taille (largeur et hauteur) sont fournies comme attributs :

		<img src="../../img/bob.jpg" alt="bob" />
		<img src="../../img/bob.jpg" height="100" alt="bob" />
		<img src="../../img/bob.jpg" height="200" alt="bob" />
		<img src="../../img/bob.jpg" width="30" alt="bob" />
		<img src="../../img/bob.jpg" width="50" height="250" alt="bob" />
		<img src="../../bob.jpg" width="50" height="200" alt="bob" />

Voir

Ligne 1 : le lien vers l'image et le texte alternatif
Ligne 2 et 3 : on force la hauteur
Ligne 4 : on force la largeur
ligne 5 : on force les deux proportions
ligne 6 : mauvaise référence de stockage de l'image

Remarque

Les balises HTML ne sont pas sensibles à la casse: <P> signifie la même chose que <p>.

La norme HTML5 ne nécessite pas de balises en minuscules, mais W3C recommande l'utilisation des minuscules dans HTML4, et exige les minuscules pour les types de documents stricts comme XHTML.