Initiation au HTML Qu’est ce qu’une page web ?

(1)

Initiation au HTML

Qu’est ce qu’une page web ?

Il s’agit ni plus ni moins que d’un fichier, qui contient seulement des caractères alphanumériques.

Autrement dit, vous n’avez besoin que de votre bloc-notes, ou d’un éditeur de texte quelconque pour créer un site Internet. Il est nécessaire de connaître les bases du langage pour arriver à un site de qualité.

Lors de l’affichage d’un tel fichier, votre navigateur Internet (Internet Explorer, Firefox, Chrome, Opera, ...) fait tout le travail. En effet, ce dernier lit le fichier en question, et repère ce qu’on appelle les balises ou les tags HTML. Ces balises indiquent au navigateur comment afficher le contenu de la page (mise en valeur des paragraphes, titre de la page, titre d’une partie, d’une sous-partie, caractères en gras, retour à la ligne, etc).

Ces balises fonctionnent par paire, l’une définit le début d’un bloc et l’autre la fin.

Par exemple, le titre d’une page est codé grâce à la balise <title>, et ce de la manière suivante dans votre éditeur de texte : <title>Ceci sera le titre de la page</title>.

Le squelette d’une page web.

Toutes les pages web sont construites d’une manière identique. Elles se composent d’une entête, qui peut contenir tout un tas d’informations, puis d’un corps, qui contient toutes les informations affichées dans le navigateur.

Le squelette de toute page est défini par l’utilisation de trois balises : HTML, HEAD et BODY. La première indique au navigateur qu’il s’agit bien d’un fichier HTML (car un navigateur peut afficher un fichier image ou un fichier texte), la seconde permet de donner des informations sur la page (dont le titre) et correspond à l’entête du document et la troisième définit le corps de la page et contient toutes les informations que seront affichées sur l’écran de l’internaute.

Le cadre suivant correspondant à l’édition d’un fichier HTML, identifiez les trois (paires) balises dont nous venons de parler.

<html>

<head>

<title>Titre de la page !!!</title>

</head>

<body>

<!-- Commentaires :

Ce bloc délimité par les balises  correspond à un commentaire qui n’est pas affiché sur le navigateur. Les commentaires sont souvent très utiles lors du développement -->

Hello Wordl !!

</body>

</html>

(2)

Vous pouvez taper ce code dans votre bloc-notes. Enregistrez votre fichier, nommez-le par exemple

«hello-world.html» et ouvrez-le avec votre navigateur, vous apercevez maintenant «Hello World !!» et le titre que vous avez renseigné dans la barre de titre.

1. Par défaut le bloc-notes enregistre les fichiers au format .txt, dans notre cas vous devez spécifier l’extension .htm ou . html

2. Les retours à la ligne ou plusieurs espaces consécutifs représentent au maximum un espace dans le navigateur.

Les trois exemples ci-dessous sont donc équivalents :

Il nous reste maintenant à voir les balises les plus communes et leurs caractéristiques respectives. Je vous rappelle que le texte et les balises doivent se trouver entre les balises <body> et </body>.

Les principales balises

Il en existe plusieurs dizaines, mais une minorité d’entre elles seulement nous intéressent.

La balise «paragraphe» <p> et la balise «retour à la ligne» <br/>

La balise la plus utilisée est peut-être la balise <p>, elle signifie «paragraphe». elle permet de dissocier deux paragraphes. A l’affichage, l’espace entre les paragraphes est plus important que l’espace entre les lignes d’un même paragraphe.

Il est important de remarquer que dans le cas d’une phrase relativement longue située entre les balises

<p> et </p>, le navigateur renvoie le texte à la ligne automatiquement si besoin. Inutile d’aller à la ligne dans votre éditeur (un retour à la ligne, deux espaces accolés ou un espace accolé à un retour à la ligne sont interprétés comme un unique espace par le navigateur), le seul moyen d’aller à la ligne est l’utilisation de la balise <br/>. <br/>, contrairement à tous les autres tags, ne s’utilise pas par paire.

La balise <p> </p> est une balise de type bloc, elle force un retour à la ligne. Comme toute balise (ou tags) elle a une ouverture <p> et une fermeture </p>. Nous verrons plus loin d’autres balises de type Inline (en ligne) qui ne force pas de retour à la ligne et permettent une écriture à la suite.

La balise <br/> est une balise auto-fermante, étant unique on la clos en plaçant un slash (/) dans la

(3)

Remarque : En réalité, le corps de notre page Hello World ci-dessus aurait du contenir <p>Hello World</p>.

Exemple : Redimensionner la fenêtre de l’aperçu pour voir comment sont affichés les paragraphes.

<html>

<head>

</head>

<body>

<p>

L’Hypertext Markup Language, généralement abrégé HTML, est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d’insérer des hyperliens dans du texte, donc de créer de l’hypertexte, d’où le nom du langage.

</p>

<p>

Techniquement, HTML est une application du Standard Generalized Markup Language (SGML).

<br/>Le développement de HTML proprement dit a cessé depuis 1999, et son successeur, le XHTML, est une application de l’Extensible Markup Language (XML).

</p>

</body>

</html>

(4)

L’ensemble des balises «titre» <h1>, <h2>, ... et <h6>

Elles permettent de mettre en valeur des textes correspondant aux titres <h1>, sous-titres <h2>, titre de paragraphe <h3>, jusqu’à la balise <h6>. La plupart du temps, vous n’utiliserez que les balises h1 et h2 voire h3.

Pour mieux comprendre, vous pouvez regarder le code source décrit ci-dessous puis regarder l’aperçu de l’exemple.

Exemple : les six balises h1 à h6 sont utilisées dans cette ordre, suivies de deux paragraphes.

<html>

<head>

</head>

<body>

<h1>Ceci est une définition Wikipedia de HTML</h1>

<!--Le navigateur renvoie à la ligne automatiquement de la même manière que la balise

<p> -->

<h2>L’Hypertext Markup Language</h2>

<h3>généralement abrégé HTML</h3>

<h4>est le langage informatique</h4>

<h5>créé et utilisé pour écrire les pages Web</h5>

<h6>HTML permet en particulier</h6>

<p>

d’insérer des hyperliens dans du texte, donc de créer de l’hypertexte, d’où le nom du langage.

</p>

<p>

Techniquement, HTML est une application du Standard Generalized Markup Language (SGML).

<br/>Le développement de HTML proprement dit a cessé depuis 1999, et son successeur, le XHTML, est une application de l’Extensible Markup Language (XML).

</p>

</body>

(5)

Les balises «puce¨ <ul> et <li>

La balise <li> encapsule des éléments présents dans des listes. Elle est toujours employée lors de l’utilisation de listes ordonnées, déclarées avec la balise <ol>, ou non ordonnées : balise <ul>.

Lorsque nous verrons les feuilles de styles nous verrons comment créer un menu grâce à ces balises.

Il est possible de modifier l’apparence de la puce devant un élément contenu dans la balise <li> en utilisant le style css ¨list-style-type¨.

<html>

<head>

<title>Les listes</title>

</head>

<body>

<h1>Balises <ul> & <ol></h1>

<ul>

<li>catégorie 1</li>

<li>catégorie 3 <ul>

<li>Sous catégorie 3.1</li>

</ul>

</li>

</ul>

</body>

</html>

(6)

Les balises <b> (ou <strong>), <i>, <em>

Balises de mises en forme que l’on imbrique régulièrement les unes dans les autres (comme toutes les autres balises par ailleurs).

La balise <b> (ou <strong>) force le bold (gras), la balise <i> force l’italique tandis que la balise <em>

est une balise purement sémantique (nous verrons ce terme en classe) représentant l’emphase et donc la mise en exergue d’une phrase.

<html>

<head>

<title>Mise en forme</title>

</head>

<body>

<h1>Balises <b>, <i> & <em></h1>

<b>Citation de <i>John Lennon</i></b>

<em>

“Quand je suis allé à l’école, ils m’ont demandé ce que je voulais être quand je serais grand. J’ai répondu «heureux». Ils m’ont dit que je n’avais pas compris la question, j’ai répondu qu’ils n’avaient pas compris la vie.”

</em>

</body>

</html>

(7)

La balise «image» <img>

Comme son nom le suggère elle permet l’insertion d’image dans le navigateur.

Trois formats d’image peuvent être mis sur l’internet :

- le format GIF, il est utilisé pour des images contenant peu de couleur. En effet le nombre de couleur dans le gif est de 256 dont une couleur transparente.

- le format JPG, il est utilisé pour les des images contenant beaucoup de couleur, une photo par exemple. Le jpg doit être en RVB.

- le format PNG, concurrent du gif peut contenir plus de couleurs que le gif et gère la transparence il est de loin le format le plus utilisé (PNG pour Portable Network Graphic).

Notez que l’attribut «src» de la balise <img> indique l’endroit où se trouve l’image à insérer.

La balise <img> est une balise auto-fermante et de type Inline ce qui signifie que l’on peut l’insérer dans une ligne de texte sans forcer de retour à la ligne (à moins biens sûr d’utiliser la balise <br/>).

<html>

<head>

<title>Insérons notre première image</title>

</head>

<body>

<h1>Insertion d’image</h1>

<p> -->

<p>

<img src=¨monimage.png¨/>La balise <img> est une balise auto-fermante et de type

Inline ce qui signifie que l’on peut l’insérer dans une ligne de texte sans forcer de retour à la ligne (à moins biens sûr d’utiliser la balise <br/>).

</p>

</body>

</html>

(8)

La balise «lien» <a>

La balise <a> permet de créer un lien hypertexte pointant vers un document en spécifiant l’url de celui- ci au niveau de l’attribut «href». Le tag <a> peut également définir des ancres au sein d’un document et les liens pour y accéder.

La page définie par le lien hypertexte s’affiche dans la page courante si l’attribut «target» n’est pas spécifié. Ce tag doit être fermé avec le tag </a>. Il n’est pas possible de croiser ou d’insérer deux balises l’une dans l’autre (pour ouvrir un lien dans une nouvelle fenêtre : target=¨_blank¨).

Pour personnaliser l’aspect des liens hypertextes, les propriétés de style à modifier sont entre autre l’attribut color pour la couleur du texte et text-decoration pour définir si le lien doit être souligné ou non.

NOus NE vErrONs AucuN DEs ATTrIBuTs NON-INDIspENsABLEs pOur TOuTEs BALIsEs QuE NOus vErrONs DANs cE cOurs cAr AujOurD’HuI ON uTILIsE LEs fEuILLEs DE sTYLE à cET EffET cE QuI sErA L’OBjET Du cOurs EN 4^éME.

Dans cet exemple nous utilisons une adresse dites absolue --> http://www.google.be.

Nous verrons par la suite en classe comment naviguer dans nos propres pages internes grâce à des

<html>

<head>

<title>Notre premier lien</title>

</head>

<body>

<h1>Hyperlien</h1>

<p> -->

<p>

Pour toute recherche, je vous conseille vivement l’utilisation du moteur <a href=¨http://

www.google.be¨ target=¨_blank¨>Google</a>

</p>

</body>

</html>

(9)

Les balises «calque» <div> (en bloc) & <span> (Inline)

Les calques sont simplement des sortes de cadres dans lequels on peut inclure du texte, des images, des animations, et même d’autres calques. L’immense avantage est que les calques, contrairement aux tableaux, qui, eux, ne permettent pas toujours un positionnement au pixel près, les calques permettent d’être placés exactement ou on veut dans la page.

Pour créer un calque : Insertion/Calque

Il existe 2 genres de calques : les calques CSS (balise DIV, SPAN), et les calques Netscape. Les calques Netscape (balise Layer, ILayer)utilisant des balises propres à Netscape, il me semble sage de les écarter au profit des balises de CSS.

Voici un exemple de l’utilisation d’un calque assez petit, de fond cyan, en haut à gauche de la fenêtre, avec comme texte à l’intérieur : «Ceci est un calque». On constale que tout se passe dans les options de la balise <div>

Nous n’utiliserons que peu les calques puisque nous ne verrons pas dans ce cours les feuilles de style (css) permettant leur mise en forme.

<html>

<head>

<title>Les calques</title>

</head>

<body>

<h1>Balise <div></h1>

<p> -->

<p>

<div id=¨intro¨ style=¨position:absolute; width:255px; height:30px; z-index:1; left:8px;

top: 6px; background-color:#CCFFFF; background-color: #CCFFFF; background- image:url(/images/maison.gif); ¨>

Ceci est un calque

</div></p>

</body>

</html>

(10)

Les balises «tableau» <table>, <tr> et <td>

La balise <table> est un conteneur très utilisé dans les pages web. Elle facilite la mise en forme des informations grâce à son découpage en lignes et cellules complètement paramétrables. Il est nécessaire d’utiliser au minimum les balises <tr> et <td> pour mettre en forme les éléments à afficher dans la table. D’autres balises peuvent structurer la table, voici toutes ces balises et leur ordre d’apparition :

la balise <tr> permet de créer une nouvelle ligne dans le tableau. La balise <td> crée une cellule au sein d’une ligne.

Les balises <thead>, <tbody> et <tfoot> permettent de donner une structure à la table, la partie thead étant censé contenir la partie relative aux titres, la partie tbody contenant les données et la partie tfoot d’éventuelles annotations ou remarques complémentaires.

Le tag tfoot apparaît avant le tag tbody, le navigateur devant pouvoir afficher la partie basse tfoot

<html>

<head>

<title>Les tables</title>

</head>

<body>

<h1>Balise <table></h1>

<table cellspacing=¨2px¨ cellpadding=¨2px;¨ rules=¨all¨ style=¨border:solid 1px

black;¨>

<caption>Titre du tableau</caption>

</colgroup>

<thead>

<tr>

<th>Titre Col 1</th>

<th>Titre Col 2</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Valeur Footer 1</td>

<td>Valeur Footer 2</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>Valeur 1</td>

<td>Valeur 2</td>

</tr>

<tr>

<td>Valeur 1</td>

<td>Valeur 2</td>

</tr>

</tbody>

</table>

</body>

</html>