IFT1147
Programmation Serveur Web avec PHP Un bref survol du langage HTML
IFT1147 - HTML 2
HMTL
HTML: Hypertext Markup Language
HTML est essentiellement un langage de description de structure de document (par exemple titre, paragraphe, etc.)
Les standards HTML sont créés par le World Wide Web Consortium.
Nous utiliserons la définition HTML 4.01
IFT1147 - HTML 3
Exemple de fichier HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Exemple simple</title>
</head>
<body>
<h1>Exemple simple</h1>
<p>
Un fichier HTML très simple contenant un seul paragraphe.
</p>
</body>
</html>
IFT1147 - HTML 4
Structure d’un document HTML
1. Définition du type de document; dans le cadre du cours, ce sera HTML 4.01 2. Conteneur HTML
1. En-tête
Le titre, l’auteur, la mise en page etc.
2. Corps
Le contenu principal de la page.
IFT1147 - HTML 5
Exemple de fichier HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Exemple simple</title>
</head>
<body>
<h1>Exemple simple</h1>
<p>
Un fichier HTML très simple contenant un seul paragraphe.
</p>
</body>
</html>
IFT1147 - HTML 6
Balises HTML
Une balise HTML est composée d’un mot clé placé entre deux chevrons
<html>, </body>, <p>, <img>
Dans le cas des conteneurs, la balise terminale est identique à la balise initiale à la différence qu’elle commence par /, par exemple <html> et </html>
IFT1147 - HTML 7
Exemple de fichier HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Exemple simple</title>
</head>
<body>
<h1>Exemple simple</h1>
<p>
Un fichier HTML très simple contenant un seul paragraphe.
</p>
</body>
</html>
IFT1147 - HTML 8
Entités de caractères
Les entités de caractères permettent d’utiliser des caractères qui ne sont pas nécessairement disponibles sur le clavier (par exemple des caractères accentués).
Toutes les entités de caractères commencent par le symbole & et se terminent par le symbole ;
IFT1147 - HTML 9
Entités de caractères - exemples
é é
è è
ê ê
À À
ô ô
ç ç
Ç Ç
& &
< <
> >
« «
» »
IFT1147 - HTML 10
Exemple de fichier HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Exemple simple</title>
</head>
<body>
<h1>Exemple simple</h1>
<p>
Un fichier HTML très simple contenant un seul paragraphe.
</p>
</body>
</html>
IFT1147 - HTML 11
Titres et paragraphes
Il existe 6 niveaux de titres
<h1>, <h2>, …, <h6>
<h1> est le conteneur pour le titre le plus important.
Le conteneur <p> sert à définir un paragraphe.
La balise <br> crée un retour à la ligne à l’intérieur d’un paragraphe.
IFT1147 - HTML 12
Jeux de caractères
Chaque fichier est enregistré selon un jeu de caractères.
Les plus fréquents (au Québec) sont du type iso-latin (iso-8859) ou unicode.
Il faut spécifier dans l’en-tête du document HTML le jeu de caractères approprié afin que le navigateur puisse afficher le document correctement.
IFT1147 - HTML 13
Unicode et UTF8
Utf8 est un jeu de caractères unicode qui enregistre les caractères les plus
fréquents en moins d’octets que les caractères moins fréquents.
La taille de fichiers utf8 est donc relativement petite.
Tout traitement de chaîne de caractères devient plus difficile !
IFT1147 - HTML 14
Commentaires
Vous pouvez insérer des commentaires dans le code source HTML
<!-- le code du commentaire -->
Un commentaire peut inclure plusieurs lignes.
Soyez conscients que les commentaires sont visibles (dans le code source HTML) pour les usagers de votre site.
IFT1147 - HTML 15
Liens
Un lien est un pointeur vers un autre document
<a href="url"> … </a>
L’URL peut prendre trois formes:
Lien externe: http://www.umontreal.ca
Lien relatif: ../../index.html
Position interne: index.html#position
IFT1147 - HTML 16
Listes
HTML permet de créer facilement des listes à puces ainsi que des listes numérotées.
Conteneur de liste à puces: <ul>
Conteneur de liste numérotée: <ol>
Chaque article de la liste est indiqué par le conteneur <li>.
IFT1147 - HTML 17
Listes - exemple
<ul>
<li>Lundi <ol>
<li>17h30</li>
<li>20h30</li>
</ol>
</li>
<li>Mardi</li>
<li>Mercredi</li>
</ul>
Lundi
1. 17h30
2. 20h30
Mardi
Mercredi
IFT1147 - HTML 18
Tableaux
Conteneur de tableau: <table>
Conteneur de ligne: <tr>
Conteneur de cellule: <td>
Conteneur de cellule de titre: <th>
Les tableaux sont aussi souvent utilisés pour la présentation visuelle du contenu.
IFT1147 - HTML 19
Tableaux - <thead> et <tbody>
Les conteneurs <thead> et <tbody>
peuvent être utilisés afin de séparer les lignes de l’en-tête de celles du contenu.
Dans plusieurs navigateurs, la partie
<thead> sera répétée, lors de l’impression, au début de chaque page (si le tableau s’imprime sur plusieurs pages).
IFT1147 - HTML 20
Tableaux - exemple
<table>
<tr>
<th>Nom</th>
<th>Devoir 1</th>
</tr>
<tr>
<th>Albert</th>
<th>9.4</th>
</tr>
<tr>
<th>Alice</th>
<th>10</th>
</tr>
</table>
10 Alice
9.4 Albert
Devoir 1 Nom
IFT1147 - HTML 21
Tableaux - paramètres
Plusieurs paramètres permettent d’influencer la disposition des tableaux.
Bordure: <table border=“1“>
Étendre les dimensions d’une cellule
Horizontalement: <td colspan=“2“>
Verticalement: <td rowspan=“2“>
IFT1147 - HTML 22
Images
La balise <img> permet d’insérer des images
<img src=“fichier“ alt=“des“>
L’attribut obligatoire alt spécifie un texte à afficher à la place de l’image si:
L’image n’est pas disponible
L’usager ne souhaite pas afficher les images (si sa connexion est lente par exemple)
IFT1147 - HTML 23
Images - formats
Trois formats d’image sont supportés par la vaste majorité de navigateurs.
JPEG
Le format de choix pour les photos
GIF
Pour les graphiques qui peuvent être animés
PNG
Aussi pour les graphiques
IFT1147 - HTML 24
Redirection automatique
Le langage HTML permet de rediriger le navigateur vers une nouvelle page.
Il faut écrire dans le conteneur <head>
<meta http-equiv="refresh" content="5;
url=http://www.example.com">
Ceci est très utile si vous devez déménager un site vers une nouvelle adresse.
IFT1147 - HTML 25
Validation
Afin d’être bien affiché dans tout navigateur, un document HTML ne devrait jamais contenir d’erreurs.
Il existe plusieurs logiciels qui
permettent de vérifier si un document est conforme à la spécification HTML.
Dans le cours, nous utiliserons http://validator.w3.org
IFT1147 - HTML 26
Ressources
http://www.w3.org
Toutes les spécifications HTML
http://www.htmlhelp.com
Une façon simple d’obtenir des conseils d’utilisation sur chaque balise
http://www.google.com
Comme d’habitude …
IFT1147 - HTML 27
Bonnes pratiques - 1
Créez du code HTML simple.
Vérifiez l’affichage des pages dans le plus grand nombre de navigateurs.
Vérifiez l’affichage sous différentes résolutions d’écran. Une façon simple d’y arriver est de créer un fond d’écran avec les bornes pour une résolution de 800x600 pixels et de 1024x768 pixels.
IFT1147 - HTML 28
Bonnes pratiques - 2
Évitez les noms de fichiers contenant des espaces, des caractères accentués etc.
Utilisez les descriptions de contenus et non pas les formattages. Pour ce qui est de la présentation visuelle, utilisez les feuilles de style (CSS).