PARTIE I :HTML

Introduction

HTML est l’abréviation de HyperText Markup Language, soit en français « langage

hypertexte de balisage ». Ce langage a été créé en 1991 et a pour fonction de structurer et de
donner du sens à du contenu.
Retenez donc que le HTML est utilisé pour baliser un contenu, c’est à dire pour le structurer
et lui donner du sens. Le HTML sert, entre autres choses, à indiquer aux navigateurs quel
texte doit être considéré comme un paragraphe, quel texte doit être considéré comme un titre,
que tel contenu est une image ou une vidéo

CHAPITRE 1 : Les Bases en HTML

1 Éléments, balises et attributs

Il y a trois termes dont vous devez absolument comprendre le sens en HTML.
Ce sont les termes élément, balise et attribut.
 Les éléments, tout d’abord, vont nous servir à définir des objets dans
notre page. Grâce aux éléments, nous allons pouvoir définir un
paragraphe (élément p), des titres d’importances diverses (éléments h1,
h2, h3, h4, h5 et h6) ou un lien (élément a). Les éléments sont
constitués de balises. Dans la majorité des cas, un élément est constitué
d’une paire de balises : une balise ouvrante et une balise fermante.

 Les balises reprennent le nom de l’élément et sont entourées de

chevrons. La balise fermante possède en plus un slash qui précède le
nom de l’élément. Cependant, certains éléments ne sont constitués que
d’une balise qu’on appelle alors balise orpheline. C’est par exemple le
cas de l’élément ‘’br’' qui va nous servir à créer un retour à la ligne.
L’écriture en HTML est alors la suivante : <br />
Notez que, dans le cas des balises orphelines, le slash se situe après le
nom de l’élément. Notez également que ce slash n’est pas obligatoire et
que certains développeurs l’omettent volontairement.

 Les attributs ont pour fonction de compléter les éléments en leur

donnant des indications ou instructions supplémentaires.
NB :Notez que les attributs se placent toujours à l’intérieur
de la balise ouvrante d’un élément (ou de la balise
orpheline le cas échéant).
2 La structure d’une page html

En programmation comme dans beaucoup d’autres

disciplines, vous l’aurez compris, il y a des règles.

Ainsi, toute page écrite en HTML5 doit comporter une

certaine structure, un « squelette » qui sera toujours le
même. Ce squelette est bien évidemment constitué de
divers éléments.

Tout d’abord, toute page HTML5 doit commencer par la

déclaration de ce qu’on appelle un « doctype ». Le doctype,
comme son nom l’indique, sert à indiquer le type du
document. Dans notre cas, le type de document est HTML.
On écrira donc :

3 Les éléments heading, paragraphe et break

Le HTML, je vous l’ai dit, sert à différencier d’un point de

vue sémantique les différents objets que l’on peut
rencontrer et dont on peut avoir besoin (titre, paragraphe,
espace, image, etc.).
 Heading
Les éléments de heading nous permettent de définir du contenu en titre .Ils varient de 1 à 6
plus le chiffres est petit plus la mise en forme est importante. Ce sont les balises :

 Paragraphe
Pour mettre en place un paragraphe dans une structure HTML on utilise la balise <p>

 Break
L’élément break est utilisé pour faire les retours à la ligne, c’est une balise orpheline<br />

4 Les éléments Strong, Emphasis et mark

 Strong

L’élément strong est utilisé́ pour indiquer aux moteurs de

recherche qu’un contenu est particulièrement important,
afin que celui-ci soit traité avec plus d’importance. Le
résultat visuel est une mise en forme automatique en gras.
Mais encore une fois, on n’utilise pas l’élément strong pour
mettre un texte en gras !

Aperçu

 Emphasis
L’élément em, pour emphasis (« emphase » en français) est
proche de l’élément strong. Il sert lui aussi à signifier qu’un
contenu est important, mais moins important tout de même
qu’un contenu entre des balises strong.

 Mark Aperçu

l’élément mark est utilisé́ pour faire ressortir du contenu.

Ce contenu ne sera pas forcement considéré́ comme
important, mais cette balise peut servir dans le cas de
l’affichage de résultats suite à une recherche d’un de vos
visiteurs par exemple.

Aperçu

5 Listes ordonnées et non-ordonnées

Les listes servent à ordonner du contenu, à lui donner un
ordre cohérent.

Visuellement, les listes en HTML correspondent à ce que

vous créez lorsque vous utilisez des puces dans un
document Word ou PowerPoint par exemple, comme ceci :

 Élément numéro 1
 Élément numéro 2
 Élément numéro 3

En HTML, les listes vont avoir deux grands intérêts pour

nous : on va pouvoir les utiliser pour créer des menus ou,
dans leur forme brute, pour mieux présenter du contenu
pour un blog par exemple.

Il existe trois grands types de listes en HTML : les listes

ordonnées, les listes non-ordonnées et un dernier type
un peu particulier : les listes de définition. Nous allons
commencer avec les listes ordonnées et non-
ordonnées.

La différence entre les listes ordonnées et non-

ordonnées est que les listes ordonnées possèdent un
aspect de subordination, d’ordre logique, de
classement tandis que ce n’est pas le cas pour les
listes non-ordonnées.

Pour créer une liste non-ordonnée, on va avoir besoin

de deux nouveaux éléments : l’élément ul (abréviation
de unordered list), qui va contenir toute la liste et
l’élément li (pour list item) que l’on va utiliser pour
créer chaque élément de la liste.

Pour créer une liste ordonnée maintenant, nous allons

simplement remplacer l’élément ul par l’élément ol (pour
ordered list).
Listes de définitions
Dernier grand type de listes que nous allons voir ensemble,
les listes de définition son utilisées pour définir des termes.

Pour créer une liste de définition, il va nous falloir utiliser

l’élément dl (pour définition list), l’élément dt (pour
définition term) et l’élément dd pour la définition en soi.

Il n’y a qu’une règle à respecter lorsque l’on crée une liste

de définitions : vous devez toujours placer l’élément dt
avant l’élément

dd, c’est-à-dire le terme à définir avant sa définition. Cela

est assez intuitif et ne devrait donc pas vous poser de
problème.

En revanche, il est tout à fait possible d’associer plusieurs

termes à une définition ou même plusieurs définitions à un
même terme.

6 Liens internes et liens externes

Tout d’abord, il faut savoir qu’il existe différents types de
liens. Pour l’instant, nous allons nous concentrer sur les d
eux types les plus « classiques » : les liens internes et les
liens externes.

Quelle différence entre ces deux types de liens ? Un lien

interne est un lien créé́ entre deux pages d’un même site
web tandis qu’un lien externe est un lien menant d’un site
web vers un autre site web.
Dans tous les cas, pour créer un lien, nous allons utiliser
l’élément « a » accompagné de son attribut href (pour
Hypertext Reference) qui sert à indiquer la cible (c’est à
dire la destination) du lien.

Quel que soit le type de liens crées, la seule chose qui va

changer va être ce que l’on va indiquer en valeur pour
l’attribut href.

Commençons donc avec les liens internes. Nous avons trois

cas à distinguer :

 1er cas : La page à partir de laquelle on fait un lien et

celle vers laquelle on fait un lien se trouvent dans le
même dossier. Dans ce premier cas, il suffit de
préciser le nom de la page dans l’attribut href.
 2ème cas : La page vers laquelle on souhaite faire un
lien se trouve dans un sous-dossier. Dans ce cas, il
faudra en tenir compte et inclure le nom du sous-
dossier dans la valeur de l’attribut href.

 3ème cas : La page vers laquelle on veut faire un lien se

trouve dans un dossier parent. Dans ce cas, nous
devrons rajouter « ../ » dans la valeur de l’attribut href.

Pour créer des liens externes, maintenant, vous allez voir

que c’est beaucoup plus simple : il suffit d’indiquer l’URL
complète de la page vers laquelle on veut faire un lien en
valeur de l’attribut href.

En pratique, pour faire un lien vers la page d’accueil de

Facebook par exemple, on écrira :
NB : L’attribut target va vous permettre de choisir si vous
voulez que la cible de votre lien s’ouvre dans une nouvelle
fenêtre / nouvel onglet ou pas.

Pour que la cible de votre lien s’ouvre dans une nouvelle

fenêtre ou un nouvel onglet, on attribuera la valeur _blank
à l’attribut target.

7 Les autres types courants de liens

Il s’agit des liens de type « ancre », les liens pour envoyer
un mail et les liens pour télécharger un fichier.
 Lien de type ancre

Ce sont des liens menant à un autre endroit d’une même

page web. Ils peuvent être utile dans le cas d’une page web
très longue pour donner à vos visiteurs un accès rapide à
une section en particulier par exemple.

Pour créer une ancre, on commence par rajouter un attribut

id à une balise ouvrante HTML à l’endroit où l’on veut
envoyer le visiteur. On peut attribuer n’importe quelle
valeur à cet attribut.

NB : La valeur inscrite pour l’attribut href doit être

strictement la même que celle donnée à notre id.
  Lien pour envoyer un mail

Pour envoyer un mail on donne une valeur de type «

mailto : » à notre attribut href :

 Lien pour télécharger un fichier

il va tout d’abord disposer d’un fichier (au format zip, pdf,

xls ou autre) que l’on va placer dans le même dossier ou un
autre dossier que la page web à partir de laquelle on crée
le lien.

CHAPITRE 2 :Image, audio et vidéo

1 Insérer une image

Lorsque vous enregistrez une image sur votre ordinateur,
vous pouvez en théorie choisir entre différents formats
avec entre autres le png, le jpg ou jpeg, bitmap ou gif pour
ne citer que les plus connus.

Si votre image est une photographie, je vous recommande

d’utiliser le format jpg. Si, en revanche, votre image est un
dessin ou tout autre type d’image statique, préférez le png
qui est un type qui gère également la transparence. Enfin,
si votre image est animée, vous devrez choisir le format gif.

Pour insérer une image nous allons utiliser l’élément HTML

img. L’élément img doit être placé au sein d’un élément de
type block, comme l’élément p ou un div par exemple.

Pour que votre code soit valide, vous devez ajouter deux
attributs à l’élément img : l’attribut source, abrégé́ src et
l’attribut alternative, qu’on note alt.
2 Insérer de l’Audio
Tout comme pour les images, il existe différents formats
audios. Cependant, ça se complique avec l’audio car il
n’existe pas de format supporté par tous les navigateurs.
Cela signifie qu’il va falloir indiquer plusieurs formats
lorsque l’on va insérer de l’audio en HTML.

Pour ajouter de l’audio sur une page web, on va utiliser

l’élément audio. Tout comme pour l’élément img, l’élément
audio va demander un attribut src pour fonctionner. Cet
attribut prendre en valeur l’URL du fichier audio.

L’attribut controls, tout d’abord, va servir à afficher les

boutons de contrôle tels que les boutons lecture, pause et
volume entre autres. Cet attribut est donc bien
évidemment obligatoire.

L’attribut autoplay va nous permettre de lancer

automatiquement le fichier audio lors du chargement de la
page.

L’attribut loop nous permet de faire répéter la musique en

boucle.

L’attribut width est utile pour modifier la largeur par défaut

de la barre de l’élément audio.

L’attribut preload nous permet de sauvegarder de la

bande passante et d’accroître les performances de notre
site. Cet attribut peut prendre trois valeurs différentes :
metadata, auto et none. En pratique, on utilisera
généralement la valeur auto qui va préloader toutes les
informations et les données.

3 Insérer de la Vidéo
Pour créer et afficher une vidéo, il nous faut
obligatoirement trois choses : un codec audio (format mp3,
ogg, etc.), un codec vidéo (h.264, ogg thoera, webM) et un
format contener dans lequel on va stocker ces deux
éléments (généralement avi, mp4 ou mkv).

Là encore, il n’existe pas de format supporté par tous les

navigateurs et il est donc recommandé d’en utiliser
plusieurs pour être certain que la vidéo soit correctement
affichée.

Pour ajouter une vidéo, on utilise l’élément vidéo. Les

attributs pris par cet élément sont exactement les mêmes
que ceux pris par l’élément audio, à savoir : src, autoplay,
controls, loop, preload et width.

Contrairement aux éléments audio, une vidéo sera par

défaut affichée sur une page web.

Il est également possible d’ajouter un attribut poster à

votre vidéo. L’attribut poster permet de télécharger et
d’afficher une image qui sera affichée avant le lancement
de la vidéo.
 CHAPITRE 3 :Les tableaux

1 Création d’un tableau simple

Les tableaux en HTML ne servent et ne doivent être utilisés
que pour organiser des données.

Pour créer un tableau, il va nous falloir utiliser au minimum

trois éléments : les éléments table, tr et td.

L’élément table définit le tableau en soi. A l’intérieur de cet

élément table, on va utiliser l’élément tr (table raw) pour
ajouter des lignes à notre tableau.

Tout tableau en HTML sera construit ligne par ligne.

Enfin, on utilise l’élément td (table data) pour ajouter des

cellules dans nos lignes.

Si l’on insert plusieurs éléments td à l’intérieur d’un

élément tr, des colonnes vont se créer automatiquement à
l’intérieur de notre ligne.
2 Afficher les bordures du tableau
Il est possible d’afficher les bordures grâce à l’attribut
border

3 Structure complète d’un tableau

N

4 Fusionner des cellules

Pour combiner des cellules, on va utiliser les attributs HTML
colspan et rowspan.

L’attribut colspan va nous permettre de combiner des

cellules appartenant à différentes colonnes dans une même
colonne tandis que l’attribut rowspan va nous permettre
de combiner des cellules provenant de différentes lignes.