Internet III
Le HTML de "base"
Tout document HTML est composé de balises du type <commande>
... </commande> .
Tout ce qui se trouve entre ces deux balises sera traité en fonction de
commande.
Comme par exemple: <b>Texte en gras</b> produit le résultat
suivant:Texte en gras.
NB:Plus d'infos, suivre ce lien(http://www.ccim.be/ccim328/)
I - Structuration du document HTML
<HTML>
Tous les documents HTML commenceront par la balise <HTML> et se
termineront par </HTML>.
<HEAD>
Permet de définir une zone d'en-tête dans un document HTML.
<TITLE>
Permet de définir un titre pour la page en cours, ce titre apparaîtra
dans la zone titre du navigateur. Ce titre servira de label à cette
page si le lecteur met cette page en favori dans son navigateur
Web.
Enfin cette balise doit être placée dans la zone d'en-tête.
<BODY>
Entre <BODY> et <\BODY> réside tout le reste du
document. Il est possible de lui rajouter des attributs pour spécifier
la couleur du fond et/ou la couleur des liens, etc...
<BODY
BGCOLOR=white FGCOLOR=black> signifie que par défaut dans notre
document, le fond sera blanc et le texte noir.
II - Formattage du texte
<Hn>
C'est la balise qui permet d'affecter la taille des caractères. On
fait varier n de 1 à 6. Plus n est grand et plus le
texte est écrit en petit et inversement ...
Remarque: La balise de début et de fin génèrent automatiquement
un espace de type nouveau paragraphe.
<BR>
Permet de forcer le retour à la ligne. Retour à la ligne sans alinéa.
<P>
Entre <P> et <\P> on définit un paragraphe. Cela se
traduit par un retour à la ligne avec une tabulation comme pour début
un paragraphe nouveau.
<B>...</B>
Début et fin de zone en gras.
<I>...</I>
Début et fin de zone en italique.
<U>...</U>
Début et fin de zone en souligné.
<CENTER>...</CENTER>
Début et fin de zone centrée.
III - Les listes
Nous traiterons ici 3 types de listes:
- Listes descriptives.
- Listes non ordonnées.
- Listes ordonnées.
Listes descriptives
Une liste descriptive est balisée par <DL> pour la commencer
et par </DL> pour la terminer.
La balise <DT> permet de spécifier l'identification de
l'élément. Le texte qui s'y rapporte ne doit pas dépasser une ligne.
La balise <DD> correspond à la zone de définition de l'item. La
taille de cette zone n'est pas limitée.
Remarque: Les balises <DT> et <DD> sont des balises
dites vides car elles ne nécessitent pas de balise fermante
</DT> et </DD>
Exemple de liste descriptive:
Le code HTML suivant:
<dl>
<dt>ASCII<dd>Jeu de caractères qui assigne des valeurs numériques
standard aux lettres, chiffres et signes de ponctuation.
<dt>EPS<dd>Format de description de fichiers PostScript,
ou PostScript encapsulé.
<dt>POLICE<dd>Assortiment de styles que possède une catégorie de
caractères.
</dl>
produit le résultat suivant:
- ASCII
- Jeu de caractères qui assigne des valeurs numériques
standard aux lettres, chiffres et signes de ponctuation.
- EPS
- Format de description de fichiers PostScript, ou PostScript
encapsulé.
- POLICE
- Assortiment de styles que possède une catégorie de
caractères.
Listes non ordonnées et ordonnées
Les listes non ordonnées et ordonnées sont délimitées, respectivement,
par les balises <ul>, <ol> et </ul>,
</ol>.
Enfin pour les deux types de listes, un élément de la liste est
caractérisé par la balise <li> (cette balise est aussi une balise
vide).
Exemple:
Le code HTML suivant:
<ul>
<li>ASCII: Jeu de caractères qui assigne des valeurs numériques
standard aux lettres, chiffres et signes de ponctuation.
<li>EPS: Format de description de fichiers PostScript,
ou PostScript encapsulé.
<li>POLICE: Assortiment de styles que possède une catégorie de
caractères.
</ul>
produit le résultat suivant:
- ASCII: Jeu de caractères qui assigne des valeurs numériques
standard aux lettres, chiffres et signes de ponctuation.
- EPS: Format de description de fichiers PostScript, ou PostScript
encapsulé.
- POLICE: Assortiment de styles que possède une catégorie de
caractères.
IV - Les Tableaux
En Html, les tableaux servent non seulement à aligner des chiffres
mais surtout à placer des éléments à l'emplacement que vous
souhaitez. L'usage des tableaux est donc TRES fréquent.
Un tableau est composé de lignes et de colonnes qui forment les cellules
du tableau.
Les balises les plus courantes sont:
- <table border=1></table>: Début et fin de tableau,
avec des bordures. (0=pas de bordures, 1,...,infini épaisseur de la
bordure)
- <tr></tr>: Début et fin de ligne
- <td></td>: Début et fin de cellule
Exemple:
Le code HTML suivant:
<table border=1>
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</table>
produit le résultat suivant:
V - Inclure une image
Tout d'abord, deux points importants:
- Les deux formats d'image reconnus sur le Web, sont le format GIF
(version 89a) et le format JPEG. Pour le format GIF (maximum 256
couleurs), on retiendra la caractéristique "entrelacé" qui permet de
charger progressivement 'image lors de l'ouverture de la page. Ces
deux formats donnent des résultats assez équivalents bien que JPG soit
plutôt recommandé pour des images avec des tons nuancés ou dégradés.
- L'ennemi sur le Web, c'est la taille des images! Plus l'image
sera grande, plus le temps de chargement sera long... au risque de
décourager vos visiteurs. Si cela est possible, une image en 16
couleurs peut très bien faire l'affaire. Présenter une petite image
indiquant un lien vers l'image complète est également un bon conseil.
Pour ajouter une image, il faut donc ajouter le code HTML
suivant:<img src="adresse de l'image (emplacement sur le disque dur
ou URL de l'image)".
Cette balise possède quelques attributs dont:
- alt="***": Pour mettre un commentaire lorsque l'on laisse
le pointeur de la souris sur l'image pendant un petit instant.
- width=? et height=?: Pour spécifier la hauteur et la
largeur en pixels.
- border=?: Pour spécifier la taille de la bordure en pixels
(idem tableau: 0=pas de bordure, 1,..., inf= taille de la bordure)
VI - Inclure un lien hypertexte
Html (Hyper Text Markup Language) est un langage hypertexte (et
hypergraphique) qui vous permet en cliquant sur un mot, généralement
souligné (ou une image) de vous transporter:
- vers un autre endroit du document.
- vers un autre fichier Html situé sur votre ordinateur.
- vers un autre ordinateur situé sur le Web.
Ce système de liens hypertexte permettent de surfer de page en page et
constituent l'essence des documents Html.
Pour créer un lien, il faut créer une ancre de la manière
suivante:<a href="URL du lien">Texte du
lien</a>
L'URL du lien peut prendre différentes formes en fonction du lien
pointé: une image, une page externe, une page interne, une applet
Java, etc...
Le public_html
L'école met à votre disposition la possibilité d'héberger votre
propre site Internet. Pour cela, vos fichiers HTML doivent être copiés
dans le répertoire ~login/public_html.
Pour accéder à votre
page, depuis l'extérieur, il faut taper l'adresse:
http://www.enseirb.fr/~login.
I - Structuration du répertoire
Libre à vous d'organiser votre répertoire à votre façon, le plus
important est d'avoir un fichier index.html à la racine du
répertoire pour éviter que le navigateur vous affiche l'arborescence
du répertoire (à éviter !!!).
Généralement, il est conseillé de mettre les images dans un répertoire
à part des fichiers HTML.
II - Netiquette concernant l'hébergement à l'ENSEIRB
Enfin, l'ENSEIRB accepte d'héberger votre site à condition que son
contenu soit en rapport avec vos études et soit utilisé à des fins
pédagogique (stockage de supports de cours, etc...). Une partie
"personnelle" est tolérée dans le sens où elle n'est pas utilisée à
des fins commerciale, pornographique, etc...
Toute infraction sera signalée par REAUMUR aux administrateurs de
l'école qui après un avertissement sans frais, vous fermeront votre
compte et se retrouver sans compte à l'ENSEIRB ... c'est pas l'idéal.