• Aucun résultat trouvé

Structure d’un document HTML Exemple de fichier HTML Exemple de fichier HTML Balises HTML HMTL 1

N/A
N/A
Protected

Academic year: 2022

Partager "Structure d’un document HTML Exemple de fichier HTML Exemple de fichier HTML Balises HTML HMTL 1"

Copied!
5
0
0

Texte intégral

(1)

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&egrave;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&egrave;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>

(2)

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&egrave;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

&eacute; é

&egrave; è

&ecirc; ê

&Agrave; À

&ocirc; ô

&ccedil; ç

&Ccedil; Ç

&amp; &

&lt; <

&gt; >

&nbsp;

&laquo; «

&raquo; »

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&egrave;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.

(3)

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.

(4)

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.

(5)

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).

Références

Documents relatifs

Dans l’activité « 2-3 Le HTML – Activité 1 », on a vu que les pages Web sont écrites dans un langage à balises appelé HTML, et que la mise en forme se fait grâce à une

Vous pouvez modifier l'ordre selon lequel le focus passe d'un champs à l'autre en précisant l'attribut « tabindex » pour chaque champ (c'est utile dans les interfaces, lorsque

Il est affiché dans la barre de titre du

Voici ces caractères en code ISO 5589-1 (=ISO-Latin 1), ainsi que leur

E:\OneDrive\Informatik\JavaScript\WS PHBern Aufg &amp; Lsgn\Grundgeruest.html

_parent : remplace le document de définition du frameset _top : remplace toutes les frames de la fenêtre ouverte. •

• Enregistrer votre document Notepaad++ dans votre espace de travail de l'ordinateur (il s'enregistrera bien au format .html si vous avez choisi ce langage auparavant) au nom de

Remarquer « l'indentation » de ce texte (donner la définition d'indentation). Dans Windows le plus simple est le bloc-notes mais pour plus de lisibilité on préférera