INTERNET .. Construction de Pages WEB
Généralités & Historique
[Page_1]
1. Qu’est-ce que ce langage ?
HTML : HyperText Markup Language
Il repose sur le protocole HTTP.
C’est un langage de définition de Documents.
Ce n’est pas un Langage de Programmation.
Il est le Langage de tous les Navigateurs.
2. Ses Caractéristiques :
On l’écrit comme un simple Texte ASCII.
Il peut être employé aussi bien sur un PC, un Mac, une console
Sun, Unix etc..
En revanche, le Logiciel permettant d’interprêter ce Langage dépend
du Système d’Exploitation.
Ce Logiciel interprêteur sera celui du Navigateur.
Il peut comporter des Textes, des Images, des composants MultiMédia
(son-vidéo).
Surtout, il permet de construire des Liens ( HyperTexte ).
Ces Liens pouvant être de plusieurs
types ( internes, externes etc..).
3. Ses Versions..historique :
HTML 1.0 a fait son entrée sur Internet en Mai 1991...on
n’en parle plus.
HTML 2.0 apparu en septembre 1995...les vrais débuts.
HTML 3.0 apparu le 7 Mai 1996 réputé être le
standard actuel.
HTML 4.0 proposé le 8 Mai 1997. Cette version fonctionne
avec les versions 4.0 des 2
principaux Navigateurs ( Netscape et Intenet Explorer ). Elle
apporte les nouveautés suivantes:
les Frames.
les Feuilles de style.
le Contrôle amélioré des Tableaux.
les Formulaires optimisés.
l’intégration normalisée des éléments MultiMedia.
l’arrivée des symboles mathématiques.
l’intégration du jeu de caractères ISO 10646.
Réflexions dans l’instant
Les principaux Navigateurs travaillent pour intégrer cette version
HTML 4.0.
Actuellement, certains d’entre eux peuvent éprouver certaines
difficultés pour interprêter correctement toutes les fonctionnalités
de HTML 4.0.
Nous verrons bientôt, que les Navigateurs sont capables d’interprêter
en plus du Langage de Base HTML :
· les Applets de Java. · les Scripts de Java. · les VBScripts ( Internet Explorer ).
Donc, la foule d’outils Logiciels existant sur le marché ( en
constante évolution ), nous assure de pouvoir créer ou modifier
toute Page WEB.. Reste à nous de savoir les utiliser ...!
ORGANISATION
Tout d’abord , de quels outils avons-nous
besoin ?
un Editeur de Texte ASCII « sain » ..Exemple : Edit
du Dos ou NotePad de Windows95 ( le « Bloc-Notes »
).
un Navigateur ..
Exemple : Netscape ou Internet Explorer.
Quelle sera notre organisation de travail ?
Nous utiliserons le système d’exploitation Windows95 ou Windows
NT.
Nous pourrions utiliser une disquette de travail qui permettra d’enregister
nos programmes « Sources HTML ».
OBJECTIFS
Qu’allons-nous apprendre ?
De manière très progressive nous allons réaliser des
exercices illustrant les principales parties du langage de base HTML
. Au début les listings HTML seront relativement simples
et courts ..puis ils s’enrichiront au fur et à mesure de notre étude.
A la fin de l’étude vous serez capable d’écrire un listing
HTML permettant de créer une page WEB simple mettant
en oeuvre les principales fonctionnalités de HTML . Et ceci
grâce à votre méga mémoire et aux notes et exercices
résolus sur lesquels vous aurez travaillé et qui resteront
votre propriété.
Ce cours HTML peut servir de base à l’étude d’autres
langages tels que :
Java de Sun ( reconnu par tous les navigateurs ).
JavaSript (reconnu par tous les navigateurs ).
VBScript de Microsoft (uniquement reconnu par Internet Explorer
).
car les produits
de ces langages sont toujours insérés au sein de listings
HTML.
OBSERVATIONS MOTIVANTES
Tous ces langages ( HTML, JAVA , JavaScript et VBScript ) sont
:
Portables ( multi-plateforme ..WIN95 de PC,WIN NT de PC,Unix,SUN,MAC
de Apple..etc..)
Multitâche (multi-thread).
A la base de C++ orientés Réseau Internet.
Orientés « objet »
Graphiques.
Producteurs de fichiers *.HTML ou Applets Java peu gourmandes
en capacité car elles sont toujours interprêtées par
le Navigateur du client ...souvent quelques dizaines de K.octets
seulement transitent sur le réseau pour une Page Web...
Ce qui minimise les temps de transit ..!!
INTERNET
.. Construction de Pages WEB Les
Bases du Langage
Structure de Base
Tout listing HTML débute par :
<HTML> et se termine par :
</HTML>
Entre ces 2 Balises , il existe diverses instructions HTML
..
Il est possible d’inclure des commentaires où vous voulez :
Ils devront débuter par
<!- et se
terminer par ->
<!- Voici par exemple un commentaire ->
Une en-tête est utilisée habituellement ( en anglais : Header
) pour fournir des informations sur le contenu de la Page..On y range en
général le Titre de la Page ..Par exemple :
<HEAD> <TITLE>Le Titre de cette PAGE</TITLE> </HEAD>
Remarquez que chaque Balise ou Tag doit être «
refermée » ..pour cela son nom est alors précédé
par le slash. Une Balise est utilisée pour marquer le « corps »
du listing ..elle s’appelle : BODY..Par exemple:
Voici un exemple de listing que vous pouvez éditer immédiatement
(sachez que vous pouvez écrire les balises en minuscules ou majuscules.).:
<!-listing exemple0 -> <Html> <head> <Title>Titre de ce premier exemple</title> <BODY> Bonjour ..c’est rudement facile ..! </BODY> </HTML> <!- et voila c’est terminé!! ->
Utilisez Notepad de win95 ..sauvez-le par exemple sur A:
en le nommant : PROG0.HTML
Lancez votre Navigateur préféré et ouvrez le
fichier que vous venez de créer sur A:
Il est possible de choisir une langue avec HTML 4.0 . Par exemple
<HTML LANG=fr>
Ou DE pour Deutch. , ES pour l’Espagne ..US pour les Etats Unis.
CONSEILS
Attention vous pouvez imbriquer des Tags les uns dans les
autres ..mais veillez bien à la bonne cohérence de ces imbrications...comme
vous le feriez en Pascal , Basic ou en C . (
c'est-à-dire que vous devez toujours refermer la dernière
balise ouverte et ainsi de suite ..)
Vous pouvez insérer des lignes blanches pour une meilleure lisibilité
.
Refermez bien les tags ouverts ..et au bon endroit !
N’écrivez pas pour un Navigateur particulier car votre
Page sera interprêtée par le Navigateur du client et
...souvent, vous ne le connaissez pas !
Amusons nous avec les Textes en couleurs ...!!
Nous venons de voir la balise BODY ..Il est possible de profiter
de cette Balise pour définir une couleur de fond de Page et une
couleur de caractères.. par exemple :
<BODY bgcolor = yellow text = blue>
Les Principaux noms de couleurs utilisables sont:
aqua
bleu clair
black
noir
blue
bleu
fucshia
lilas
gray
gris
green
vert
lime
vert clair
maroon
marron
navy
bleu marine
olive
kaki
purple
pourpre
red
rouge
silver
argenté
teal
cyan foncé
white
blanc
yellow
jaune
Il est aussi possible de définir une couleur en ( base 16) ..l'Hexadécimal
..par Exemple :
<BODY bgcolor = #404040> le fond sera Gris Foncé (40h Rouge ,40h Vert et 40h Bleu )
R V B <BODY bgcolor = #FF00FF>le fond sera :____________ <Body bgcolor = ________> terminez cette écriture afin d'obtenir un fond cyan clair
.
Si vous éprouvez des difficultés
pour bien comprendre le principe de la synthèse Additive des couleurs
à partir des 3 Primaires ROUGE ,
VERT et
BLEU...
Voici un petit Test Pédagogique
....
Durant
ce Test une Bande Horizontale est créée en Haut de cette
fenêtre
Observez
sa couleur en règlant les 3 Octets de Couleur ( de 00 à F0
)...
Chaque
octet est représenté en notation Hexadécimale ..
Avec
ce Test pédagogique, les valeurs progressent ou régressent
de 10h en 10h
N'oubliez
pas que 10h ( 10 en Hexa ) = 16 en notation décimale..!
INTERNET
.. Construction de Pages WEB Les
Balises & les Textes
Exercice n°0
Trouvez les Erreurs !
<Html> <head> <TITLE> Exercice de Début </HEAD> <\TITLE> <BODY text=#400000 bgcolor=green> Bonjour a Tout le Monde ... <!- Est-ce que les sauts de ligne sont respectés ?? -> <\BODY> </HTML>
Vous pouvez tester ce petit programme ...corrigez les Erreurs en rouge
sur ce document.
Néanmoins , vous remarquerez peut-être que les sauts de
ligne ne sont pas respectés.
La solution existe grâce à une nouvelle balise :
<BR> fin
de Ligne
ou
<P> Comme paragraphe.. n’oubliez pas de refermer
ce Tag qui ouvre un paragraphe par : </P>
Donc le texte du listing ci-dessus pourrait devenir :
Bonjour<br> a<br> Tout le Monde ...<br>
ou en utilisant la propriété de paragraphe :
<p> Bonjour </p><p>a </p><p>Tout le Monde ...</p>
Il est possible de définir une couleur des caractères pour
chaque paragraphe ou chaque texte..la syntaxe est la suivante :
<FONT color=black>hip..hip.. je suis un peu noir..!</FONT> <font color=#008080>oui..je reconnais que je suis un peu cyan..!</font>
La suite va vous amener à écrire un petit listing HTML
tout seul , si..si..en utilisant les infos acquises..
EXERCICE n°1
Description de la Page à créer:
· Le Fond de la page sera bleu
· Un 1er paragraphe comprendra le texte suivant en rouge:
Je fais partie du 1er paragraphe et je suis
rouge..
· Un second paragraphe sera constitué des 3 Lignes suivantes
dont le texte est jaune.
Lundi Mardi Mercredi
· Un dernier paragraphe comprenant le texte suivant en gris.
INTERNET
.. Construction de Pages WEB Les
Textes & les Titres
Voici quelques Tags permettant de définir des attributs
pour les textes de vos Pages :
<i>Texte en Italique</i> <b>Texte en Gras</b> Bold
en anglais.. <u>Texte souligné</u>
Underline en anglais.. <sub>Texte indicé</sub> <sup>Texte en exposant</sup> <small>Texte en petite Police</small> <big>Texte en grande Police</big> <strike>Texte Rayé</strike>
<font size=2>Je suis un Texte dont la police est plus petite
que normale</font>
Les valeur de size(taille) vont de 1 à 7 .. 3
est la valeur par défaut. Vous pouvez combiner l’attribut size
à l’attribut color Par exemple:
<font size=7 color=green>Bah..Je suis un Gros Vert!!</font>
<font size= -1 >Je me trouve un peu plus petit que normal
!!</font> On peut définir la taille de Police en relatif
par rapport à la taille par défaut ( 3 ).
Comment aligner du texte à gauche,au centre ou à
droite ?
Revenons sur le Tag <p> du paragraphe..on peut par exemple
:
<p align=left>Je n’avais pas besoin de cet ordre car je
suis aligné à gauche par défaut!!</p> <p align=center>Texte centré</p> <p align right>Texte aligné à droite</p>
Il existe le Tag <DIV> avec lequel on peut aligner divers objets
... par exemple :
<DIV align=center> Me voici au centre du débat..!<br> <hr width=60%> Voici un nouvel
objet qui traçe des lignes Horizontales..vous allez le voir plus
loin.. </DIV>
Nous avons vu ,plus haut,que les sauts de ligne pouvaient être forcés
par la balise <br> ..mais , en revanche, si l’on veut ne pas
les forcer on utilisera la balise :
<NOBR>
HTML nous offre six « niveaux
de Titre »
<h1>Titre1</h1> Le titre Principal..le
plus gros <h2>Titre2</h2> <h3>Titre3</h3> <h4>Titre4</h4> <h5>Titre5</h5> <h6>Titre6</h6> Le sous/titre
le plus petit
EXERCICE n°2.
Ecrivez un listing HTML permettant :
· d’écrire 6 Titres de niveaux différents
et de couleurs différentes · Ils devront tous être alignés au centre.
Présentez-le à votre Navigateur chéri !!
Pour réaliser l’exercice précédent vous avez utilisé
les Tags appris et c’est très bien ..mais sachez qu’il existe aussi
la possibilité de demander l’alignement des Titres directement dans
la balise <hx> ..par exemple:
<h1 align=center>Grand Titre</h1>
Si vous êtes un peu perdu pour choisir vos
Couleurs de texte ou de Fond de page...Il existe un Test Pédagogique
dans cette Page pour vous aider à mieux maitriser ce sujet..: Test
Couleurs
INTERNET ..
Construction de Pages WEB Les
Lignes de Séparation
Comment insérer des Lignes Horizontales
de séparation ? la Balise est :
<hr> h comme head et r comme row.
Pas de balise de fermeture (comme pour br ).
La longueur de la ligne horizontale est quantifiée
par :
<hr width=50%> 50% de la
largeur de la fenêtre. <hr width=50>
50 pixels de longueur.
L’épaisseur de la ligne est quantifiée ainsi
:
<hr size=5> 5 pixels d’épaisseur
.. 1 pixel pour le mini et 2 pixels par défaut. <hr size=3 width=60% align=center> centrée
dans la largeur de la fenêtre.
Les
Lignes de séparation et leur ombre
Par défaut, les Navigateurs les plus courants montrent des lignes
de séparation en 3D ..(avec ombre)
Il est possible de l’éviter par :
<hr noshade>Encore une fois les attributs
peuvent se combiner ..(ombre se traduit shadow en anglais)
