Manuel illustré sur HTML

10 carte

Document d'accompagnement pour le cours HTML.

10 carte

La ripetizione spaziata ti mostra ogni carta al momento ottimale per memorizzare a lungo termine, con revisioni sempre più distanziate.

Domanda

Quelle balise HTML est utilisée pour créer un paragraphe de texte ?

Risposta

La balise HTML utilisée pour créer un paragraphe de texte est la balise

. Elle indique un changement de paragraphe.

Domanda

Quelle balise HTML est utilisée pour le contenu visible d'une page web ?

Risposta

La balise <body> contient le contenu visible d'une page web.

Domanda

Combien de niveaux d'en-têtes existent en HTML, de

à

?

Risposta

Il existe six niveaux d'en-têtes en HTML, de

(le plus important) à

(le moins important).

Domanda

Quel élément HTML est utilisé pour définir le titre d'une page qui apparaît dans l'onglet du navigateur ?

Risposta

L'élément HTML <title> définit le titre de la page qui apparaît dans l'onglet du navigateur.

Domanda

Quelle est la balise HTML racine d'un document HTML ?

Risposta

La balise HTML racine par défaut est <html>.

Domanda

Quelle balise HTML est utilisée pour afficher du texte en italique ?

Risposta

Les balises , , et sont utilisées pour afficher du texte en italique.

Domanda
Quelle est la balise HTML pour un saut de ligne simple ?

Risposta
La balise HTML pour un saut de ligne simple est <br>.

Domanda
Quelle est la balise HTML pour créer un lien hypertexte ?

Risposta
La balise HTML pour créer un lien hypertexte est la balise ``, avec l'attribut `href` pour spécifier l'URL de destination.

Domanda
Quelle balise HTML est utilisée pour insérer une image dans une page Web ?

Risposta
La balise <img> est utilisée pour insérer une image, avec l'attribut src spécifiant le chemin du fichier image.

Domanda
Quelle balise HTML est utilisée pour afficher du texte en gras ?

Risposta
Les balises et sont utilisées pour afficher du texte en gras.

Ce document est un manuel illustré sur le HTML, créé par Daniel J. Boivin et Laurent Gauthier du Département de génie rural de l'Université Laval, publié en mars 1996 (version 1.53).

Structure de Base d'un Document HTML

Un document HTML est un simple fichier texte.

La structure minimale inclut:

<html> (début du document)

<head> (zone d'en-tête)

<title> (titre de la page, suivi de </title>)

</head> (fin de l'en-tête)

<body> (corps du document, où se trouve le contenu)

</body> (fin du corps)

</html> (fin du document)

La plupart des balises HTML fonctionnent par paires (ex: <balise> contenu </balise>).

Formatage du Texte

Titres

Utilisez les balises <h1> à <h6> pour les titres.

<h1> est le plus grand.

<h6> est le plus petit.

Ces balises incluent automatiquement un retour à la ligne et le gras.

Alignement et Sauts de Ligne

<center>texte à centrer</center>: Centrer le contenu.

<p>: Changement de paragraphe.

<br/>: Simple changement de ligne (ces deux n'ont pas de balise fermante).

Styles de Texte

<b> ou <strong>: Texte en gras.

<i>, <em> ou <cite>: Texte en italique.

<tt>: Texte à espacement constant (machine à écrire).

<pre>: Texte préformaté (respecte les retours chariot, utile pour des tableaux ASCII).

<code>: Texte de lignes de code (similaire à <tt>, les retours chariot ne sont pas respectés).

<var>: Indique une variable (s'affiche en italique).

Taille de Police (HTML3)

<font size="#+/-N">: Augmente ou réduit la taille du texte de N unités (de 1 à 7).

Effets Spéciaux (HTML3)

<blockquote>: Citation en alinéa.

<strike>: Texte barré.

<sub>: Indice (ex: H₂O).

<sup>: Exposant (ex: E=mc²).

<blink>: Texte clignotant (attention: fonctionne uniquement dans Netscape).

Caractères Spéciaux

Utilisez des commandes alternatives pour afficher des caractères HTML (ex: < pour < ou > pour >).

Pour les caractères accentués:

Caractères référencés (ex: é pour é) : Compatible US-ASCII (7 bits), assure l'intégrité mais rend le code moins lisible.

ISO Latin-1 (ISO-8859-1) : Utilise 256 caractères (8 bits), plus élégant et recommandé pour les langues latines occidentales, suppose une plateforme compatible.

Listes

<li>: Chaque élément de liste doit être précédé de cette balise.

Listes non-ordonnées (<ul>):

Utilise des puces (par défaut: disque, cercle, carré selon le niveau d'indentation).

Types modifiables avec <ul type="disc">, <ul type="circle">, <ul type="square">.

Listes ordonnées (<ol>):

Utilise des numéros ou lettres.

Types modifiables avec <ol type="A"> (majuscules), <ol type="a"> (minuscules), <ol type="I"> (chiffres romains majuscules), <ol type="i"> (chiffres romains minuscules), <ol type="1"> (chiffres arabes).

Listes de définitions (<dl>):

<dt>: Terme à définir.

<dd>: Définition (indentée).

Images

Formats supportés: GIF et JPEG.

<img src="chemin/nom_image.gif">: Insère une image.

Alignement:

align="TOP" (haut), align="MIDDLE" (centre), align="BOTTOM" (bas).

Espacement (HTML3):

hspace="N": Espace horizontal.

vspace="N": Espace vertical.

<br clear=""> (HTML3): Force un changement de ligne pour contourner une image flottante.

Lignes Horizontales

<hr>: Insère une ligne horizontale par défaut.

Options de personnalisation:

width="N%" ou width="N" (pixels): Largeur de la ligne.

size="N": Épaisseur de la ligne.

align="left", align="right", align="center": Alignement.

noshade (HTML3): Supprime l'effet de profondeur.

Possible d'utiliser des images comme lignes pour plus de personnalisation (<img src="images/ligne.gif">).

Pointeurs (Liens Hypertextes)

<a href="URL">Texte cliquable</a>: Crée un lien hypertexte.

Les URL peuvent pointer vers divers types de ressources:

HTTP (sites web): <a href="http://www.exemple.com">.

FTP (serveurs de fichiers): <a href="ftp://ftp.exemple.com/pub">.

TELNET (émulateurs de terminal): <a href="telnet://serveur.com">.

TN3270 (émulateurs IBM): <a href="tn3270://serveur.com">.

GOPHER (serveurs Gopher): <a href="gopher://serveur.com">.

USENET (forums de discussion): <a href="news:groupe.news">.

Fichiers locaux/relatifs: <a href="fichier.html"> ou <a href="dossier/fichier.html">.

Ancres dans un document:

<a name="nom_ancre">: Définit une ancre.

<a href="#nom_ancre">: Lien vers une ancre dans le même document.

<a href="document.html#nom_ancre">: Lien vers une ancre dans un autre document.

ALT dans les images:

<img alt="texte alternatif" src="image.gif">: Affiche un texte si l'image ne se charge pas ou pour les navigateurs textuels.

Courrier électronique:

<a href="mailto:adresse@domaine.com">: Ouvre le client de messagerie pour envoyer un email.

Formulaires

<form action="programme_serveur" method="POST/GET"> : Définit la zone du formulaire.

action: Script côté serveur pour traiter les données.

method: Méthode d'envoi des données (POST ou GET).

Types de champs d'entrée (<input type="...">):

type="text": Champ de texte libre (name, size).

type="radio": Boutons radio (choix unique, name commun pour le groupe, value différente).

type="checkbox": Cases à cocher (choix multiples, name, value).

type="submit": Bouton d'envoi.

type="reset": Bouton pour effacer/réinitialiser le formulaire.

<select name="nom_champ"><option>choix1</option>...</select>: Liste déroulante (choix unique).

<textarea name="nom_champ" rows="N" cols="M">: Zone de texte multiligne (rows, cols).

Toujours fermer avec </form>.

Images cliquables (Image Maps)

<img src="image.gif" ismap>: Rend une image cliquable.

Utilise un programme serveur (ex: imagemap.exe) pour associer des zones de l'image (rectangles, cercles, polygones définis dans un fichier map) à des URL spécifiques.

border="0" dans <img>: Supprime la bordure bleue autour des images cliquables.

Sons et Vidéos

L'intégration de sons et vidéos nécessite des programmes d'accompagnement ("helpers") configurés sur le navigateur de l'utilisateur.

Sons: <a href="sons/fichier.aiff"> (lien texte ou image).

Vidéos: <a href="animations/fichier.mov"> (Quicktime, MPEG, AVI).

Tableaux (Introduits avec Netscape 1.1N)

<table>: Déclare un tableau.

<tr>: Déclare une ligne (rangée).

<td>: Déclare une cellule de données.

<th>: Déclare une cellule d'en-tête (gras et centré par défaut).

<caption align="top/bottom">: Titre du tableau.

Attributs de tableau:

BORDER="N": Épaisseur de la bordure du tableau.

ALIGN="LEFT/RIGHT/CENTER": Alignement du contenu des cellules.

VALIGN="TOP/MIDDLE/BOTTOM/BASELINE": Alignement vertical du contenu des cellules.

NOWRAP (dans TH ou TD): Empêche le retour à la ligne du texte dans une cellule.

COLSPAN="N": Fusionne N colonnes.

ROWSPAN="N": Fusionne N rangées.

CELLSPACING="N": Épaisseur de l'espacement entre les cellules.

CELLPADDING="N": Espacement entre le contenu des cellules et leur bordure.

WIDTH="N%" ou WIDTH="N" (pixels): Largeur du tableau ou des colonnes.

Les tableaux peuvent contenir des images ou des pointeurs.

Les tableaux peuvent être imbriqués.

Fond d'Écran et Couleurs

<body background="images/fond.gif">: Image de fond.

<body bgcolor="#RRGGBB" text="#RRGGBB" link="#RRGGBB" alink="#RRGGBB" vlink="#RRGGBB">: Définit les couleurs de fond, texte, liens, liens actifs et liens visités.

Les codes couleurs sont en hexadécimal RGB (ex: #FFFFFF pour blanc, #000000 pour noir).

<font color="#RRGGBB">: Change la couleur du texte à un endroit précis.

Outils de Conversion HTML

Programmes comme rtfToHTML convertissent des documents de traitement de texte (format RTF) en HTML.

Exige que le document source utilise des styles de paragraphe (ex: "heading 1" -> <h1>).

Nécessite souvent une édition post-conversion pour optimiser le HTML.

rtfToHTML gère les images (convertit en fichiers image séparés à encoder en GIF) et peut créer une table des matières avec des liens.

Macro Excel x12html.xls (version 5.0): Convertit les tableaux Excel en HTML.

Commandes Diverses

<base href="URL_de_base/"> (dans <head>): Définit une URL de base pour les liens relatifs.

: Insère des commentaires invisibles dans le navigateur.

<isindex>: Affiche une boîte de recherche (liée au serveur HTTP).

<meta http-equiv="refresh" content="N; URL=page_suivante.html"> (dans <head>): Rafraîchit ou redirige la page après N secondes.

Conseils de Conception

Cohérence Graphique: Utilisez des couleurs, icônes et dessins harmonisés.

Gain de Temps: Réutilisez les mêmes logos, boutons, pointeurs. Créez des librairies de codes.

Optimisation de la Vitesse d'Affichage:

Limitez le nombre de logos et d'images.

Spécifiez toujours width et height des images pour un rendu plus rapide.

Porte d'entrée: Créez une page d'accueil simple pour filtrer les visiteurs et conserver la bande passante pour les utilisateurs ciblés.

Note sur l'Évolution du HTML

Ce manuel est basé sur HTML 2.0 et les propositions pour HTML 3.0, spécifiquement pour le navigateur Netscape.

Les commandes spécifiques à Netscape peuvent ne pas être des standards internationaux.

Inizia un quiz
Testa le tue conoscenze con domande interattive