// enjoliveur de code // fin enjoliveur

HTML - Intro

1. Travail à faire

Aujourd'hui nous allons travailler deux thèmes conjointement. D'une part nous allons aborder les bases (pour certains) de html et css et d'autre part effectuer une recherche documentaire surun thème sociétal lié à l'Informatique et aux Sciences du Numérique.

Votre mission est donc de réaliser une page html, respectant la charte graphique du site izeunetit (vos pages seront par la suite inétgrées au site) et traitant du thème ci-dessous :

Votre page devra contenir des images d'illustration, des liens, éventuellement des sons ou des vidéos illustratives.

Les critères d'évaluation seront les suivants :

C'est donc à la fois un travail technique (html et css) et un travail de recherche documentaire et de synthèse.

2. Le langage HTML

Le HTML ( Hypertext Markup Language = langage hypertexte de balisage ) est le langage qui sert à écrire les pages Web (WWW : World Wide Web).

Ce n'est pas un langage de programmation mais de description : on "n'écrit pas un programme" en HTML, mais on décrit une page par l'intermédiaire de balises de description ( voir ci-dessous ).

Le HTML est généralement associé avec :

La version actuelle du langage, et la plus utilisée, est HTML5.

Principes du langage

Une page web est entièrement décrite par un fichier HTML, qui est un simple fichier texte ( d'extension .html ), dans lequel on indique les éléments à afficher dans la page ( texte, liens, images,...).

Le navigateur lit les fichiers HTML depuis le début, de haut en bas et de gauche à droite : il faut en tenir compte pour l'affichage des divers éléments les uns par rapport aux autres...

Le fichier est formaté par des balises ( "markups" ), qui apparaissent dans le code encadrées par des chevrons :

‹balise›

Les balises servent à signaler au navigateur des éléments d'une page comme :

Généralement, une paire de balises ( une ouvrante et une fermante ) encadre l'élément sur lequel elle porte :

‹balise ouvrante›...... élément du code ............‹/balise fermante›
Certaines balises sont cependant uniques.

On trouvera ci-contre un exemple de fichier .html, celui de la page d'accueil d'izeunetit.fr.

Un mémento HTML5 fourni en fichier séparé présente un certain nombre de balises avec des exemples d’utilisation.
Et voici une page montrant l'affichage de ces différents éléments.

Attention, le concept actuel d'écriture des pages web est de séparer la sémantique de la mise en forme, c'est à dire en gros le fond et la forme de la page.

Ainsi, le fichier HTML indiquera les éléments qui devront s'afficher dans la page, tandis que la mise en page sera traité dans un fichier à part ( une feuille de style CSS )...
On n'écrira donc pas directement dans le fichier HTML les instructions de mise en forme; le fichier HTML signalera simplement par des balises que tels ou tels caratères doivent être formatés de manière particulière ( par exemple ), mais c'est dans la feuille de style CSS ( un fichier à part ) que l'on indiquera quel est ce formatage...

Les outils pour écrire en HTML

Le code d'une page HTML est stocké dans un fichier texte avec l'extension .htm ou .html.

Remarque : avec le navigateur Firefox, pour accéder :

Structure d'un fichier HTML

Un fichier HTML contient 2 sections principales :

					
 <!DOCTYPE html>

 <html>
							
	 <head>
							
		 <meta charset = "UTF-8">

		 <title>Titre de la page </title>

	 </head>

							
	 <body>

			Contenu de la page

	 </body>

							
 </html>
						
						
  • La première ligne indique au navigateur la version HTML utilisé ( ici HTML5 )
  • La deuxième est la balise html ouvrante de la page
  • En-tête ( balises head ) :
    • la première ligne d'en-tête ( balises meta ) indique le codage des caractères utilisé
    • La deuxième ligne ( balises title ) contient le titre de la page qui s'affichera dans la barre de titre de la fenêtre du navigateur
    • de nombreuses autres indications peuvent être portées dans l'en-tête, comme l'emplacement des feuilles de style et des scripts attachés à la page
  • Corps de page ( balises body ) : il contient la description de tous les éléments affichés dans la page
  • la dernière ligne du fichier est toujours la balise html fermante de la page.

L'indentation et les sauts de ligne dans le code source ne sont absolument pas obligatoires ( le navigateur les supprime à la lecture du fichier ) : on pourrait très bien décrire une très longue page HTML dans un fichier sur une seule ( très longue ) ligne !!
Mais bien sur, le code source apparaît beaucoup plus clair si on prend ainsi soin de le structurer....

Quelques règles de syntaxe

Éléments de type bloc et de type inline

Suivant leur signification, les balises peuvent être de deux types.

Éléments de type bloc

Par défaut, les éléments de type bloc sont affichés par le navigateur avec un saut de ligne au début et à la fin.

Exemples : ‹h1›, ‹p›, ‹ul›, ‹table›, ‹pre›, ‹form› ...

Éléments de type inline

Les éléments de type inline se placent normalement l'un à côté de l'autre ( pas de saut de ligne ).

Exemples : ‹strong›, ‹em›, ‹a›, ‹img›, ‹sup›, ‹sub› ...

Propriétés