Scribd
Importer
760 vues24 pages

Programmation Web 1 - Chapitre 1

Transféré par

Dalila Amara
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
760 vues24 pages

Programmation Web 1 - Chapitre 1

Transféré par

Dalila Amara
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 24

CHAPITRE 1I: LES BASES DE HTML5

INTRODUCTION

❑ Le HTML (HyperText Markup Language) est le format de données conçus pour présenter des pages web qui
pouvant être lues par des navigateurs (Exp : Internet Explorer, Mozilla Firefox, Opera, Google Chrome, …).

❑ C'est un langage de présentation de données, et non pas un langage de programmation. Il est figé, c'est-à-dire
qu'une fois le document chargé dans le navigateur, il ne répond à aucune action de l'utilisateur sur le contenu de
la page. Ce langage est pourvu d'un système de balisage (basé sur les balises) qui va permettre de structurer les
documents.

❑ HTML5 (HyperText Markup Language 5) est la dernière révision majeure d'HTML (format de données conçu
pour représenter les pages web). Cette version a été finalisée le 28 octobre 2014.

❑ Dans le langage courant, HTML5 désigne souvent un ensemble de technologies Web (HTML5, CSS3 et
JavaScript) permettant notamment le développement d'applications
QU'EST-CE QU'UNE BALISE HTML ?
❑ Une balise HTML est l’élément de base du codage HTML d’une page web. Invisibles pour l’internaute
(sauf en activant l’affichage du code source), elle est interprétée par le navigateur pour la composition
de la page. Elle est toujours délimitée par les signes « < » et « > ».
❑ Une balise peut en plus comporter de zéro à plusieurs attributs. Les attributs sont des informations
complémentaires qui la caractérisent. Ils se présentent sous la forme :

Nom_attribut=‘’valeur’’

Exemple

<html lang="fr">
<h1 id="titre"> Titre de ma page </h1>

NB. Chaque balise ouverte doit être fermée, cependant il existe des exceptions. On distingue deux types de balises :
• Les balises simples (mono-balises).
• Les balises doubles.
QU'EST-CE QU'UNE BALISE HTML ?
1.Les balises imbriquées
Lorsqu’on cumule l'écriture de plusieurs balises ouvrantes (forcément inévitable), il est impératif de respecter la
hiérarchie des balises, c'est-à-dire que la première ouverte sera la dernière fermée. Le chevauchement des balises
est une erreur grave.

Exemple (balises imbriquées)

<b><u>Ici les balises sont correctement imbriquées.</u></b>

Exemple (balises chevauchées)

<b><u>Ici les balises ne sont</b>pas correctement imbriquées, c’est une erreur. /u>
STRUCTURE D’UN DOCUMENT HTML
STRUCTURE D’UN DOCUMENT HTML
<!DOCTYPE html> C’est une déclaration obligatoire qui précise le type de document qui va être créé.
<html></html> C’est l’élément racine qui va recueillir les deux principaux éléments de la hiérarchie
: <head> et <body>.
<head></head> qui regroupe toutes les méta-informations, c'est-à-dire les données qui ne sont pas
représentées directement à l'écran dans le rendu du document, mais qui lui sont tout de même
liées :
✓ <meta charset= ‘’utf-8 ’’/> : indique l’encodage utilisé dans la page web. L’encodage
détermine comment les caractères spéciaux sont affichés
Utf-8 : Cette méthode d'encodage permet d'afficher sans aucun problème tous les symboles de
toutes les langues.
✓<title></title> : définit le titre du document
✓ <link rel="stylesheet" type="text/css" href="code.css"/>: permet de lier une
feuille de style CSS
✓ <script>

<body><body> C’est le contenu du site


STRUCTURE D’UN DOCUMENT HTML

Les commentaires
Les commentaires permettent de laisser des informations ou des descriptions du code et sont utilisables à n'importe
quel endroit du document.

Exemple

<!-- Voici un premier commentaire sur une ligne. -->


<!-- Voici un deuxième commentaire sur une ligne.
Celui-ci est multilignes. -->
<!--------------- Cette méthode est déconseillée ! --------------->
LE CORPS DU DOCUMENT (BODY)

1. Mise en forme des textes


a. Les niveaux de titres
Il existe différents niveaux de titres, ils vont de 1 à 6 et ont chacun leur importance. La balise représentant ces niveaux
de titre est <hX> où X représente le niveau.
Exemple

<h1> Titre de ma page </h1>


<h2> Titre de niveau 2 </h2>
<h3> Titre de niveau 3 </h3>

Application
Donner le code HTML qui affiche la page suivante.
Utiliser une couleur différente pour chaque titre.
LE CORPS DU DOCUMENT (BODY)

b. Les paragraphes de texte


Comme tout document texte, un
document HTML doit être segmenté
en paragraphes. Cette segmentation est
possible en précisant où commence
chaque paragraphe et où il se termine.

C'est le rôle de la balise <p>.


Les paragraphes de texte en HTML
<p> Voici un premier paragraphe. </p>
<p> Voici un deuxième paragraphe. </p>
<p> Voici un troisième paragraphe. </p>
LE CORPS DU DOCUMENT (BODY)
c. La mise en forme de texte

❑ Modifier la couleur du texte

Pour modifier la couleur du texte on utilise l'attribut « style » avec la propriété « color » :
Texte en rouge
<h1 style="color:#ff0000"> Ce texte sera en rouge. </h1>

Les couleurs peuvent être écrites de deux manières :


• En hexadécimal de type RVB et précédées d'un dièse (#) ;
Exemples : #ff0000 => rouge, #00ff00 => vert, #0000ff => bleu, …
• Textuelles en anglais US ;
Exemples: red, yellow, pink, violet, blue, Orange, SlateBlue, Tomato, MediumSeaGreen, …

Application
Modifier l’application précédente en utiliser une couleur différente pour chaque titre.
LE CORPS DU DOCUMENT (BODY)
e. Modifier la couleur du fond

Pour modifier la couleur du fond d’un texte on utilise l'attribut « style » avec la propriété « background-color» :

Fond du texte en bleu

<h1 style=" background-color :blue"> Ce texte sera en rouge. </h1>

f. Modifier la police du texte


Pour modifier la police du texte on utilise l'attribut « style » avec la propriété « font-family» :

Texte en verdana
<h1 style="font-family:verdana;"> Ce texte sera en verdana. </h1>
LE CORPS DU DOCUMENT (BODY)
On a tendance à écrire des familles de polices plutôt qu'une seule police. En effet, il se peut que sur un système, différent
du nôtre, la police choisie ne soit pas installée. On sépare alors les différentes polices par une virgule.

Texte en verdana ou sans-serif

<h1 style="font-family:verdana,sans-serif">Ce texte sera en verdana ou en sans-serif si


verdana n'est pas installée.</h1>

g. Modifier la taille du texte

Pour modifier la taille du texte on utilise l'attribut « style » avec la propriété « font-size» :
Texte en taille 10px

<h1 style="font-size: 10px"> Ce texte aura 10px de taille. </h1>


LE CORPS DU DOCUMENT (BODY)
LE CORPS DU DOCUMENT (BODY)

h. Alignement du texte HTML

Pour aligner un texte on utilise l'attribut « style » avec la propriété « text-align» :

Texte centré
<h1 style="text-align: center"> Ce texte sera centré </h1>
/* Exemples de valeurs */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
LE CORPS DU DOCUMENT (BODY)

2. Les images
Pour afficher une image en HTML, on utilise la balise «<img>». Elle admet des différents attributs, dont les plus
importants sont « src » et « alt ».
• src : permet de renseigner le chemin de l'image, qui peut être absolu ou relatif.
• alt : affiche un texte alternatif à la place de l'image dans le cas où, pour une raison ou
une autre, celle-ci ne peut pas être chargée. Il aide de plus les moteurs de recherche à référencer l'image.

Afficher une image

<img src="adresse/de/l/image" alt="Description de l'image">

Les différents formats d'image supportés par cette balise sont :


LE CORPS DU DOCUMENT (BODY)

3. Les listes
Elles servent, comme leur nom l'indique, à créer une liste d'éléments (items), plus précisément à les énumérer,
comme dans le cas d'un sommaire par exemple. On distingue cinq types différents de listes, chacun prévu pour un
usage bien précis :

o Les listes non ordonnées, ou à puces.


o Les listes ordonnées.
o Les listes de définitions.
o Les listes de répertoires.
o Les listes de menus.

Dans ce présent chapitre nous allons étudier que les deux premiers types.
LE CORPS DU DOCUMENT (BODY)

a. Les listes non ordonnées

Elles sont démarquées par la balise « <ul> » et chacun des items est entouré de la balise «<li>» :

Exemple

<p> Ma liste de courses : </p>


<ul>
<li> Champignons </li>
<li> Avocat </li>
<li> Dentifrice </li>
<li> Céréales </li>
</ul>
LE CORPS DU DOCUMENT (BODY)
Les différents types de puces
On renseigne le type des puces avec l'attribut « style » et la propriété «list-style-type» de la balise <ul>.
Les types sont :
• disc (par défaut au niveau 1 d'imbrication)
• circle (par défaut au niveau 2 d'imbrication)
• square (par défaut au niveau 3 d'imbrication)
• none
Dans l'exemple précédent, nous avons donc vu une liste non ordonnée avec une puce de type disc. Voici à quoi ressemblent
les deux autres :
Exemple
<p>Ma liste de courses :</p>
<ul style="list-style-type:circle">
<li>Champignons</li>
<li>Avocat</li>
<li>Dentifrice</li>
<li>Céréales</li>
</ul>
LE CORPS DU DOCUMENT (BODY)
Les différents types de puces

Exemple

<p> Ma liste de courses : </p>


<ul style="list-style-type:square">
<li>Champignons</li>
<li>Avocat</li>
<li>Dentifrice</li>
<li>Céréales</li>
</ul>
LE CORPS DU DOCUMENT (BODY)
Les puces en image
Pour avoir une puce sous forme d’image, il suffit d'utiliser cette image pour remplacer la puce originale.
Cependant cette méthode n'est possible qu'à l'aide de CSS et de la propriété list-style-image (Voir chapitre IV).
Exemple

<p>Ma liste de courses :</p>


<ul>
<li>Champignons</li>
<li>Avocat</li>
<li>Dentifrice</li>
<li>Céréales</li>
</ul>

CSS (voir chapitre IV)


Li {list-style-image : url(puce.gif); }
LE CORPS DU DOCUMENT (BODY)
b. Les listes ordonnées
Elles sont introduites par la balise «<ol>» et chacun des items est encadré par la balise «<li>» :
Exemple

<ol>
<li> 1ère place </li>
<li> 2ème place </li>
<li> 3ème place </li>
</ol>

Il existe cinq manières différentes de numéroter les listes ordonnées. On renseigne le type de numérotation avec l'attribut
type de la balise <ol>. Les types sont :
• 1 : Numérotation par les chiffres arabes (par défaut).
• I : Numérotation par les chiffres romains.
• i : Numérotation par les chiffres romains minuscules.
• A : Numérotation par les lettres de l'alphabet.
• a : Numérotation par les lettres de l'alphabet minuscules.
LE CORPS DU DOCUMENT (BODY)
Dans l'exemple précédent, nous avons donc vu une liste ordonnée avec une numérotation par
les chiffres arabes. Voici à quoi ressemblent les autres :
Exemples

<ol type="I">
<li> 1ère place </li>
<li> 2ème place </li>
<li> 3ème place </li>
</ol>

<ol type="i">
<li> 1ère place </li>
<li> 2ème place </li>
<li> 3ème place </li>
</ol>
LE CORPS DU DOCUMENT (BODY)

Il est tout à fait possible, pour une raison ou une autre, de modifier le numéro de départ par lequel va s'incrémenter la
numérotation.
Pour cela, il suffit de préciser une valeur à l'attribut start de la balise <ol>. Cette valeur doit dans tous les cas être
numérique :

Exemples

<ol type="1" start="8">


<li> 8ème place </li>
<li> 9ème place </li>
<li> 10ème place </li>
</ol>
LE CORPS DU DOCUMENT (BODY)
c. Les listes imbriquées

L'imbrication des listes permet une


présentation claire et détaillée d’un
menu ou d'un sommaire par exemple.
On peut imbriquer les listes non
ordonnées et ordonnées sans
distinction et même les mélanger :

Vous aimerez peut-être aussi