Mathacadémie

L’objectif de ce TD est de faire son premier site internet. Le code utilisé pour cela est le html. Pour taper ce code, on peut utiliser n'importe quel éditeur de texte comme par exemple notepad, notePad++ ou sublime text.

L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade css).

Il se présente comme ceci :


<!DOCTYPE!>
<html>
	<head>
		<html lang="fr">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Titre de mon site</title>
	</head>

	<body>
		<div>
			<p>Et patati et patata</p>
		</div>
	</body>
</html>

Taper ce code dans votre éditeur de texte et l'enregistrer sous le nom index avec l'extention html (index.html). Cette extention permettra au navigateur de savoir que c'est du code html. Exécuter ensuite ce code. Pour cela, vous pouvez utiliser le menu exécution (ou run) de votre éditeur, puis launch in chrome ou alors via un click droit sur votre fichier dans l'explorateur de fichier, puis ouvrir avec le navigateur Chrome, Firefox ...

Vous devez obtenir la figure suivante :

Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple.

Une page HTML est ainsi un simple fichier texte contenant des balises (parfois appelées marqueurs ou repères ou tags en anglais) permettant de mettre en forme le texte, les images, les boutons, etc. Certaines de ces balises sont reconnues par les navigateurs. Il sera donc important de les uriliser pour avoir un site fonctionnant correctement sur la plupart des plateformes (tablettes, téléphone, PC ...).

Pour constituer une page HTML, on dispose donc des balises (une ouvrante et une fermante) les unes à la suite des autres ou en les emboitant. Il existe des exceptions pour les éléments qui n’enveloppent pas de texte, les boutons et les images par exemple ou la balise est ouvrante et fermante :
<input type="bouton" value="Valider"/> ou <img src="Adresse de votre image" width="100px" height="100px"/> ou encore le saut de ligne <br />, etc.

Par exemple, pour un lien on ouvrira avec <a> et on fermera avec </a> comme dans cet exemple :


<a href=http://lepoittevin.olivier.free.fr>texte du lien</a>

Rajouter cette ligne de code dans à la suite de "et patati et patata" et avant la balise fermante </p>, puis actualiser votre page Web. Vous verrez apparaître le lien. En cliquant sur le lien, vous devriez ouvrir le site où ce trouve ce tutoriel. Un lien pourra aussi vous permettre de télécharger des documents ou d'ouvrir des fichiers

Par « emboiter », il faut comprendre que le « code » d’un document HTML est hiérarchisé et que toute balise possède un « parent », la balise <html> étant la parente de toutes. Ainsi <body> est emboitée dans <html> et si on place des balises <div> et <p> de cette manière :


<html>
	<body>
		<div>
			<p>Et patati et patata</p>
		</div>
	</body>
</html>

On peut alors dire que le paragraphe <p> a comme parent, le bloc <div> qui lui-même a comme parent <body>, etc. A l’inverse, on dit que le paragraphe <p> est un enfant du bloc <div>.

Les balises ont une fonction précise, un sens sémantique, veillez donc – dans la mesure du possible – à utiliser les bonnes balises par rapport à la fonction du texte contenu dans le document.

Par exemple, si vous avez un titre de niveau 1 dans votre document, il est préférable de l’entourer de <h1> et </h1> plutôt que <span> et </span> auquel on appliquerait une police plus grande. Les bailses <nav> et </nav> seront réservés pour les menus etc.

Vous trouverez ici la liste des principales balises HTML et leur sens sémantique lorsqu’elles en ont un ; <span> et <div> par exemple, n’en n’ont pas, on parle de balises génériques.

A titre d'exemple, on va essayer de créer un site composé des blocks suivants :

Avant de s’occuper du côté cosmétique de notre blog exemple, il faut d’abord disposer les grands blocs HTML qui serviront à accueillir le contenu. Chaque block sera nomé par une identité (id) qui dans ce cas est unique, ou appartient à une class qui dans ce cas sera générique à plusieur parties du document. Ces noms seront repris pour le coté cosmétique. Le code html de ce site sera donc le suivant :


<!DOCTYPE!>
<html>
	<head>
		<html lang="fr">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Titre de mon site</title>
	</head>

	<body>
		<div id='wrapper'>
			<div id='header'>
			</div>

			<div id='content'>
				<div class='contents'>
					<div class="entry">
					</div>

					<div class="entry">
					</div>
				</div>

				<nav id='sidebar'>
				</nav>
			</div>
		</div>

		<div id='footer'>
		</div>
	</body>
</html>

l’instruction <!DOCTYPE> (ce n’est pas une balise html) qui permet au navigateur d’identifier à quel type de document il a à faire. Ici un fichier html5.

les balises de premier niveau :
- <html> balise principale
- <head> le début des entêtes.
- <meta> qui va permettre d’indiquer ici le jeu de caractères utilisé dans la page (la balise peut contenir une grande variété d’attributs/valeurs)
- <title> le titre de la page.
- <body> corps de la page

Entre les balises <body></body>, on a inséré les blocs suivants (on retrouve cette disposition sur beaucoup de sites à l’heure actuelle mais vous êtes libres de créer les blocs de votre choix) en utilisant l’élément <DIV> :

des blocs d’enrobage (wrapper en anglais) qui permettront entre autres de centrer du contenu que l'on a découper en 3 zones

un bloc d’entête (header) qui contiendra le logo, le menu, etc
un bloc de contenu (content) qui contiendra la liste de nos articles.
une éventuelle barre d’outils à droite ou à gauche (sidebar)

un bloc de bas de page (footer) qui contiendra les informations de contact, une synthèse du site, etc

Si vous lancez ce fichier html dans votre navigateur, vous ne verrez rien, on a simplement ici défini les blocks. Il faut rajouter du contenu pour pouvoir voir le résultat comme dans le code ci-dessous. Une des particularité du langage html est de pouvoir rajouter des liens à l'aide des balises "<a>" et "</a>" qui permettent d'ouvrir d'autre page html, de vous rediriger vers d'autre site web, d'ouvrir des pdf, de télécharger des fichiers etc

Vous pourrez tester un de ces lien en cliquant sur "accueil" après avoir lancé le fichier html dont le code est ci-dessous.


<!DOCTYPE!>
<html>
	<head>
		<html lang="fr">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Titre de mon site</title>
	</head>

	<body>
		<div class='wrapper'>
			<div id='header'>
				<div id='logo'>
					<h1><a href='index.html'>Formation ISN</a></h1>
					<div class='description'>Mon premier site internet</div>
				</div>
				<ul id='main-nav'>
					<li><a href='http://lepoittevin.olivier.free.fr'>Site de Mr Le poittevin</a></li>
					<li><a href='ecrire.html'>écrire</a></li>
					<li><a href='categorie.html'>catégories</a></li>
					<li><a href='http://lepoittevin.olivier.free.fr'>contact</a></li>
				</ul>
			</div>

			<div id='content'>
				<div class='contents'>
					<div class="entry">
						<div class="date">
							<div class="jour">7</div>
							<div class="mois">Janvier</div>
							<div class="annee">2013</div>
						</div>
					</div>

					<div class="post">
						<h2><a href='#'>Mon premier article</a></h2>
						<div class='author'>par <a href='#'>Carole Ouvrard</a></div>
						<div class='entry'>
							<p>Comme le préconise mme Ouvrard, travailler c’est bien, se tuer au travail c’est mieux.</p>
						</div>
					</div>
				</div>

				<div class='contents'>
					<div class="entry">
						<div class="date">
							<div class="jour">7</div>
							<div class="mois">Janvier</div>
							<div class="annee">2013</div>
						</div>
					</div>

					<div class="post">
						<h2><a href='#'>Mon premier article</a></h2>
						<div class='author'>par <a href='#'>Carole Ouvrard</a></div>
						<div class='entry'>
							<p>Comme le préconise mme Ouvrard, travailler c’est bien, se tuer au travail c’est mieux.</p>
						</div>
					</div>
				</div>

				<nav id='sidebar'>
					<h3>Liste des catégories</h3>
					<ul>
						<li>catégorie 1</li>
						<li>catégorie 2</li>
					</ul>
				</nav>
			</div>
		</div>

		<div id='footer'>
			<h2>A propos</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non sapien orci. Nulla facilisi.</p>
		</div>
	</body>
</html>

En recopiant ce code dans votre fichier html et en le lançant via votre navigateur, vous devriez obtenir quelque chose comme l'image suivante.

Si vous cliquez sur "contact", votre navigateur ouvrira le site http://lepoittevin.olivier.free.fr. En cliquant sur le menu "écrire", le navigateur va ouvrir le fichier "ecrire.html" et en cliquant sur catégorie le fichier "categorie.html". Il nous faut donc créer ces deux fichiers. Pour cela, on reprendra le code html ci-dessous.


<!DOCTYPE!>
<html>
	<head>
		<html lang="fr">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Titre de mon site</title>
	</head>

	<body>
		<p>Ecrire</p>
	</body>
</html>

Ce dernier code étant pour le fichier "ecrire.html. En faire un du même type pour le lien catégorie.

Ce site bien que très intéressant, n’est pas très lisible et est loin de ressembler aux sites que l’on voit sur internet. La mise en forme ce fait via ce que l’on appelle les feuilles de style (.css)