Module1 HTML Part1

Ingénierie du Web Avancé (IWA)
Module 1 : Initiation web: HTML – CSS – PHP
HTML 5
▪ Squelette d’une page HTML
▪ Balises de base
▪ Tableaux
2021/2022 - Faculté des Sciences - Tétouan - Maroc

Introduction
Le langage HTML (HyperText Markup Language) est un langage de formatage de texte adapté à
la conception de pages web.
Ce n'est pas un langage de programmation, mais un langage de mise en forme de données :
une page Web décrit une structure statique, tandis qu'un programme est un processus
dynamique.
Pas besoin d'avoir des bases de programmation pour écrire du HTML.
Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
HTML
Le HTML définit la structure logique d'un document, permettant ensuite à un navigateur

(Chrome, Firefox, etc.) de rendre visuellement (mais aussi auditivement ou tactilement, pour
les non-voyants) le document.
la norme actuelle recommandée par le W3C est le HTML 5
L'élément de base d'un site est la page. C'est un fichier dont l'extension est normalement .html
(ou .htm) et qui contient du code HTML.
Le HTML ne s'occupe que de définir la structure logique de votre document. Pour l'aspect
visuel (mise en page, couleurs, fontes, etc.), c'est le domaine des feuilles de style.
HTML - Principes fondamentaux : Les balises
Les noms des balises et des attributs sont en minuscules.

On écrit : <p> et plus <P>.
Les valeurs des attributs sont entre doubles quotes.

On écrit : <p align="center"> et plus <p align=center>.
Tout attribut doit impérativement avoir une valeur.

On écrit : <table border="1"> et plus <table border>.
Toute balise ouvrante doit être refermée.

On écrit : <p>blabla</p> et plus <p>blabla.
Toutes les balises sont ouvrantes.

On écrit : <br /> et plus <br>
On écrit<hr width="50%" /> et plus <HR WIDTH=50%>.
Les balises doivent être correctement imbriquées.

On écrit : <p><i>blabla</i></p> et pas <p><i>blabla</p></i>.
Squelette d'une page HTML - DTD
Toute page HTML est contenue entre les 2 balises <html> et </html>.
1- Le DTD
Toute page HTML doit commencer par une déclaration de Document Type Definition (DTD), qui
précise au navigateur quelle version de HTML est utilisée :
HTML 5
<!DOCTYPE html>
Squelette d'une page HTML - Langue
2. Langue de la page
<html lang="fr" />
fr pour le français, en pour l'anglais, es pour l'espagnol, ar pour l‘arabe. Déclarer la langue utilisée est utile
pour les synthétiseurs vocaux des navigateurs pour aveugles (qui en déduisent comment prononcer).
Pour les navigateurs standards qui peuvent en déduire s'il faut utiliser des guillemets anglo-saxons ("") ou
français (« »).
Pour l'instant, la page-squelette ressemble à :
<!DOCTYPE html>
<html lang="fr" />
<!– contenu de la page. -->
</html>
Squelette d'une page HTML - head
Le rôle des en-têtes dans une page HTML est de donner des méta-informations plus
ou moins importantes.
Exp: l'identité de l'auteur, le titre de la page, l'encodage, la langue utilisée, etc.
Les en-têtes sont déclarées à l'intérieur de l'élément <head>.
Squelette d'une page HTML - title
Le titre est affiché par les navigateurs dans la barre. Il est également utilisé par les
moteurs de recherche. Un bon titre est informatif, tout en restant relativement court.
Il se déclare dans l'élément <title> qui est obligatoire.
<title> mon titre </title>
Squelette d'une page HTML - meta
Les meta sont facultatives, mais importantes à la fois pour le navigateur qui a des
renseignements sur la manière dont afficher la page, et pour les moteurs de recherche,
qui s'en servent pour indexer vos pages:
Auteur de la page
<meta name="author" content="Hmida Hamid" />
Vous pouvez déclarer plusieurs auteurs en séparant les noms par des virgules.
Encodage de la page
<meta charset=UTF-8" />
Ceci déclare que votre page est du HTML respecte l'encodage UTF-8 (le plus utilisé). La
déclaration de l'encodage est importante pour le navigateur.
Mots clefs
<meta name="keywords" content=" mot-clef1, mot-clef2, mot-clef3" />
Cette balise meta est utilisée par certains moteurs de recherche pour indexer les pages.
Ne mettez que les mots-clefs les plus significatifs, les moteurs n'aiment pas les listes trop
longues.
Description
<meta name="description" content=" un texte de description de votre page" />
Squelette d'une page HTML – Références externes
Les références externes

Elles sont utilisées afin d'indiquer qu'un autre document est lié au document en cours.
Cela peut être un script, une feuille de style ou encore un icône.
Référence à un script
Pour faire référence à un script, il faut utiliser la balise <script>.
<script src=javascript/mon_script.js"></script>
Squelette d'une page HTML – Références externes
4.2. La balise <link>
La balise <link> permet de faire référence à de nombreux types de

documents, mais les principaux sont les feuilles de style (CSS) et l’icône.
• Pour un fichier CSS:

<link rel="stylesheet" href="css/fichier.css" />
•Pour un icône:
<link rel="icon" href="images/icon.png" />
Squelette d'une page HTML - body
Le corps de la page est ce que le lecteur va voir via son navigateur.

C’est le contenu entre balises <body>.
Squelette d'une page HTML
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
...

...
</body>
</html>
Balise lien: <a>
<a> Insère un lien ou un point d'ancrage.

Exemple :
- Un lien :
<a href="http://www.test.com">test.com</a>
- Un point d'ancrage :
<a href="#intro">Introduction</a>

<a id="intro"></a>
Balise saut de ligne: <br />
La balise <br /> provoque un saut de ligne.
Exemple :
Du texte <br />

La suite ...
Balises gras <strong> et mise en emphase <em>
Balise <strong> : mise en gras d’un texte.
Exemple :
Filière <strong>SMI</strong>.
Balise <em> : mise en emphase Met en emphase du texte.
Exemple :
Vive SMI et <em>moi</em> aussi !
Balises paragraphe <p> et trait horizontal <br />
Balise <p> : paragraphe

Définit un paragraphe.
Exemple :
<p>Un paragraphe</p>
Balise <hr /> : trait horizontal

Insère un trait horizontal.
Exemple :
<p>Premier paragraphe</p>
<hr />
<p>Deuxième paragraphe</p>
Balise <span>
Couplée à du CSS, la balise span met en forme du texte.
Exemple :
<span style="text-decoration:line-through">
Du texte barré
</span>
et du texte normal.
Balises des titres <h1> à <h6>
Balises <h1> à <h6> : entête de paragraphe

Utilité :
Définit un entête de paragraphe de niveau X (X pouvant aller de 1 à 6).
Exemple :
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>
Balises puces <ul> et numéros <ol>
La balise <li>Définit une liste.

La balise ul étant une liste à puces.
La balise ol étant une liste ordonnée avec des chiffres.
Exemple : <ul>
<li>Menu</li>
<li>Entrée</li>
<li>Plat principal</li>
<li>Plat secondaire</li>
<li>Dessert (important)</li>
</ul>
Balises image <img>
Insère une image.
Exemple :
<img src="logo.png" alt="Logo SMI" />
Balise <pre>
Définit un bloc où le texte sera affiché tel qu'il figure dans le fichier source.
Exemple :
<pre>
#include <stdio.h>
int main(void)
{
printf("Hello, world!\n");
return 0;
}
</pre>
Balise <div>
La balise <div> divise un document
Joue le rôle de "conteneur" en permettant de structurer la page en plusieurs blocs.
Exemple :
<div>
<div> Le haut de page </div>
<div> Le contenu principal de la page </div>
<div> Le bas de page </div>
</div>
Balise tableau <table>
Les tableaux sont décrits par l'élément <table>.

Un tableau simple
<table> définit l'ensemble du tableau. À l'intérieur, il faut décrire les lignes du tableau et ses cellules.
L'élément <tr> décrit les lignes, et <td> les cellules.
On déclare dans l'ordre <table>, puis <tr> et enfin <td>.
<table>
<tr><td> Cellule 1 </td><td> Cellule 2 </td></tr>
</table>
Ce qui donne :
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Cellule 5 Cellule 6
Balise tableau <table>
<table border=1>
<caption>Ceci est un tableau</caption>
<tr><th> Colonne gauche </th><th> Colonne droite</th></tr>
<tr><td> Cellule 1 </td><td> Cellule 2</td></tr>
</table>
Ceci est un tableau

Colonne gauche Colonne droite
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Cellule 5 Cellule 6
Tableaux évolués
Les balises <thead>, <tbody> et <tfoot> sert à différencier le contenu des entêtes.
<thead>: C'est elle qui contient l'entête du tableau, en général, la partie du tableau dont les
cellules sont définies par des <th>.
Type de balise : table-header-group
Attributs pouvant être employés : scope, lang, dir, title.
<tfoot>: Elle a la même fonction que <thead>, mais cette fois-ci, pour le pied du tableau.
Type de balise : table-footer-group
Attributs pouvant être employés : lang, dir, title.
<tbody>: Elle permet de délimiter la partie du tableau contenant uniquement les données.
Type de balise : table-row-group
Attributs pouvant être employés : lang, dir, title.
Tableaux – fusion des cellules
l'attribut colspan: pour fusionner des colonnes l'attribut rowspan : pour fusionner des lignes
<table>
<caption>Le titre du tableau </caption>
<thead> 
<tr><th> Colonne gauche </th><th> Colonne droite</th></tr>
</thead>
<tfoot> 
<tr><th>pied gauche</th><th>pied droit</th> </tr>
</tfoot>
<tbody> 
<tr><td colspan="2"> Cellule 1 et Cellule 2</td></tr>
<tr><td rowspan="2"> Cellule 3 et Cellule 5 </td><td> Cellule 4</td></tr>
<tr><td> Cellule 6</td></tr>
</tbody>
</table>

Module1 HTML Part1

Transféré par

Droits d'auteur :

Formats disponibles

Module1 HTML Part1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Module1 HTML Part1

Transféré par

Droits d'auteur :

Formats disponibles

Ingénierie du Web Avancé (IWA)

Module 1 : Initiation web: HTML – CSS – PHP

2021/2022 - Faculté des Sciences - Tétouan - Maroc

Le HTML définit la structure logique d'un document, permettant ensuite à un navigateur

Les noms des balises et des attributs sont en minuscules.

Les valeurs des attributs sont entre doubles quotes.

Tout attribut doit impérativement avoir une valeur.

Toute balise ouvrante doit être refermée.

Toutes les balises sont ouvrantes.

Les balises doivent être correctement imbriquées.

Pour l'instant, la page-squelette ressemble à :

<!– contenu de la page. -->

<title> mon titre </title>

<meta name="keywords" content=" mot-clef1, mot-clef2, mot-clef3" />

Les références externes

4.2. La balise <link>

La balise <link> permet de faire référence à de nombreux types de

• Pour un fichier CSS:

Le corps de la page est ce que le lecteur va voir via son navigateur.

<a> Insère un lien ou un point d'ancrage.

La balise <br /> provoque un saut de ligne.

Du texte <br />

Balise <strong> : mise en gras d’un texte.

Balise <em> : mise en emphase Met en emphase du texte.

Vive SMI et <em>moi</em> aussi !

Balise <p> : paragraphe

Balise <hr /> : trait horizontal

Couplée à du CSS, la balise span met en forme du texte.

Balises <h1> à <h6> : entête de paragraphe

La balise <li>Définit une liste.

Insère une image.

<img src="logo.png" alt="Logo SMI" />

La balise <div> divise un document

Joue le rôle de "conteneur" en permettant de structurer la page en plusieurs blocs.

Les tableaux sont décrits par l'élément <table>.

Ceci est un tableau

Vous aimerez peut-être aussi