Premiers pas en HTML

Cette partie permet de découvrir les bases du langage HTML5 utilisé pour créer des sites WEB. Le script (c'est à dire les lignes de code que vous écrivez) se tape dans un éditeur de texte comme Gédit, Notepad ......
Un logiciel appelé "Le navigateur WEB" tel Firefox, Chrome, Safari, ... est nécessaire pour interpréter ("lire") ce script. Il permet de traduire ce langage HTML et d'afficher la page à l'écran.

Introduction

HTML (HyperText Markup Language) fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. Pour programmer en HTML, il vous suffit d'un simple éditeur de texte comme Bloc-Notes, nous utiliserons Gedit dans ce cours.

Avant de commencer, créer un dossier sur le bureau nommé ISN-VOTRENOM, par exemple ISN-TERNOY.
L'ensemble des fichiers relatifs à votre site sera dans ce dossier.

Les balises principales

Le code ci-dessous représente la structure de base d'une page.



<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8"/>
	<title> Titre </title>
    </head>    
    <body>
        <!-- corps de la page -->
    </body>
</html>

La première ligne permet d'indiquer au navigateur qu'il s'agit bien d'une page HTML. La balise <html> contiendra l'ensemble de votre page. La balise <head>, appelée l'en-tête, contiendra les informations générales relatives à votre page, ici l'encodage et le titre... mais d'autres informations compléteront celles-ci. La balise <body>, appelée le corps, contiendra tout ce qui sera affiché à l'écran.

Exercice 1:

Ouvrir Gedit et copier le code ci-dessus.
Modifier le titre... au choix.
Se présenter briévement en quelques lignes sous la ligne: .
(Nom, prénom, centres d'intérêts, parcours scolaire, études supérieures envisagées, idée de futur métier,...)
Enregistrer sous mapage.html dans votre dossier ISN.
Lancer Firefox et ouvrir le fichier mapage.html.
Que peut-on dire des modifications apportées ?

La ligne  est une ligne de commentaires. Elle ne sera pas traîtée par le navigateur. Ces lignes sont donc inutiles pour le navigateur mais très importantes pour vous et le lecteur de votre code... Elles permettent d'indiquer ce que vous faites.

Les balises de mise en page

Les titres: <h1>, <h2>...

Il existe six niveaux d'importance pour les titres avec les balises <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

Exercice 2: Pour vous en rendre compte, insérer le code ci-dessous dans votre fichier mapage.html.



	<h1>Titre super important</h1>
        <h2>Titre important</h2>
        <h3>Titre un peu moins important (sous-titre)</h3>
        <h4>Titre pas trop important</h4>
        <h5>Titre pas important</h5>
        <h6>Titre vraiment pas important du tout</h6>

Les paragraphes: <p>

Pour organiser son texte en paragraphes, très courant en HTML, on utlise la balise <p>

Exercice 3:

Retirer l'insertion des titres précédents.
Ajouter des titres à votre présentation.
Découper votre présentation en paragrahes sans oublier de fermer chaque paragraphe par sa balise fermante </p>

On peut également utiliser la balise <div> à la place de <p>. La différence ne sera pas flagrante. Disons que <div> jouera plus le rôle de "conteneur". On y reviendra plus tard.

Passer une ligne: <br/>

Vous vous êtes aperçus sans doute que passer une ligne dans l'éditeur ne provoquait pas un passage de ligne dans le navigateur. En effet, il n'a pas été informé de le faire... Pour passer une ligne, ajouter simplement <br/>.
Remarque: cette balise n'a pas de balise fermante associée.

Les listes: <ul> <li>

Exercice 4: Copier le code ci-dessous dans votre fichier mapage.html pour comprendre ce qu'il permet de réaliser puis l'adapter à une partie de votre présentation de votre choix.



	<ul>
    		<li>Nom: Goldman </li>
    		<li>Prénom: Jean-Jacques</li>
    		<li>Profession: Compositeur</li>
	</ul>

Si vous préférez numéroter les listes, remplacez <ul> par <ol> ainsi que pour la balise fermante.

D'autres balises de mise en page

Il existe une multitude de balises de mise en forme du texte pour mettre en gras,en italique,centrer le texte, souligner le texte, ..... Vous trouverez la liste de toutes ces balises sur ce site codeshttp.com Remarque : Certaines balises, comme pour modifier la couleur ou la taille du texte, disposent d'attributs modifiables selon la tranformation souhaitée et se codent de cette façon.


       <FONT color="red" face="Calibri">Patrick Bruel</FONT>

Insérer des images: <img ... />

Nous verrons plus tard les différents formats d'images qui existent. Si l'image à insérer est une photo, préférez le format .jpg ou .jpeg qui est beaucoup plus léger et la perte de qualité est imperceptible. Sinon, choisissez le format .PNG.

Il est préférable de stocker toutes les images utilisées dans votre site WEB dans un même dossier "images".

Le code ci-dessous permet l'insertion de l'image qui le suit.



	<img src="images/bretagne.jpg" alt="Photo de Bretagne" title="Souvenir de Bretagne" width= 300px />

Vous voyez apparaître pour la première fois dans ce cours des attributs associés à une balise:

src: indique où se trouve l'image à afficher
alt: texte alternatif à l'image dans le cas où celle-ci ne peut pas être téléchargée
title: info bulle qui apparaît en survolant l'image
width: la largeur en pixels (px) ou en pourcentage par rapport à la page entière (%)

Exercice 5:

Créer un dossier images dans votre dossier ISN-VOTRENOM.
Déposer dans ce fichier deux images trouvées sur internet pouvant agrémenter votre présentation.
Les insérer dans celle-ci.

Créer des liens: <a>

Lien vers un site internet

Exercice 6: Copier la ligne de code ci-dessous dans votre fichier mapage.html pour comprendre comment elle agit.



 <p> Le site  <a href="http://www.google.com">Google</a>  est le site le plus visité au monde avec 100 000 recherches par seconde.</p>

Lien vers une autre page du site

Supposons avoir créé la page page_projet_isn.html dans le même dossier que la page actuelle.



 <p> Vous pouvez consulter cette  <a href="page_projet_isn.html">page</a>  pour voir la présentation de mon projet ISN.</p>

Lien vers un endroit précis d'une page: les ancres

Par exemple, cliquer ici pour retourner sur l'explication des balises principales.

Dans un premier temps, il faut "identifier" le lieu visé: on utilise l'attribut d'identification id à la balise en question.



 <h3 id="balises_principales"> Les balises principales </h3>

Dans un deuxième temps, on crée le lien qui permettra ce déplacement.



 <p> Par exemple, cliquer <a href="#balises_principales">ici</a> pour retourner sur l'explication des balises principales.</p>

Exercice 7: Tester ceci dans votre fichier mapage.html en écrivant cette phrase:

Cliquer sur ce lien pour retourner au premier titre.
où le mot "lien" sera un lien permettant de se déplacer vers votre premier titre.

Lien pour envoyer un e-mail



 <a href="mailto:devoirsdemaths@free.fr">Envoyez-moi un e-mail !</a>

Voilà ce que cela donne: Envoyez-moi un e-mail !

Lien pour télécharger un fichier



 <a href="documents/gedit-setup-2.30.1-1.exe">Télécharger le fichier</a>

Voilà ce que cela donne avec un fichier .exe. Mais tous les types de fichiers sont autorisés, du moment que ceux-ci soient placés de préférence dans un dossier nommé "documents" par exemple, lui-même placé au même endroit que la page.

Par exemple, téléchargez le fichier d'installation de Gedit