Cours Html complet
HTML
Sommaire :
1. plan
2. Le Web
3. Les serveurs Web
4. Les protocoles de communication 5. Accès aux serveurs Web
6. Le langage H.T.M.L.
7. Structure
8. Styles
9. Autres styles
10. Interface universelle
11. Écriture d'accents 12. Les listes
13. ...
14. Exemple de fichier HTML
15. Les hyperliens
16. Un exemple
17. Les ancres
18. Les tableaux
19. Les formulaires
20. Le source d'un formulaire
21. Le formulaire correspondant
22. Les frames 23. ...
24. ...
25. Création de frames
26. Création ou acquisition de documents
27. Comparaisons d'éditeurs HTML
28. Exemple de petit générateur de HTML
29. Autres objets insérés dans les pages Web
30. Quelques astuces
31. Les feuilles de style
32. Moteurs de recherche / indexation
33. Les proxies
34. Bibliographie
ANNEXES:
Exemple d'utilisation de l'HTML : ADM
Différents clients
Bruno Pouliquen ()
WORLD WIDE WEB
Toile d'araignée d'étendue mondiale
Réseaux de communication mondial
• Interconnection de réseaux;
• Réseaux internet;
• Permet d'accéder à une masse gigantesque d'informations distantes;
• Chaque individu peut y mettre les informations qu'il désire;
• Le succès du Web : accès ergonomique et facile à une masse de données colossale et variée.
SERVEURS WORLD WIDE WEB
________________________________________
•Données Multimédia
•Hypermédia
•Données réparties
•Navigation transparente
PROTOCOLES DE COMMUNICATION.
Couches hautes :
• http : HyperText transfert protocol
• telnet
• ftp : file transfert protocol • smtp : send mail transfert protocol
• ...
Couches basses :
• Protocole TCP/IP : internet protocol;
• Appletalk
• ...
Couche matérielle :
=> Réseaux
• Ethernet
• A.T.M. : asynchronous transfert mode
• Numéris
• Localtalk
• R.T.C. : réseau téléphonique commuté
Logiciel Client :
• Netscape ou Internet Explorer (navigateur Web, browser, butineur, arpenteur, client Web)
• Eudora (lecture du courrier électronique)
• Newswatcher (lecture des "news")
• Fetch (client FTP)
Accès aux serveurs Web
L'accès se fait grâce à un URL (Uniform Ressource Locator) :
Le plus souvent un URL sera de la forme : http://nom_de_machine/nom_de_document
Où :nom_de_machine pourra être :
Un nom de machine (ex: ) Le numéro IP d'une machine (ex: 192.247.93.18) nom_de_document pourra être :
Le nom du document :
(ex: )
Le nom du document précédé par son chemin d'accès
(ex : )
Le nom d'un programme suivit des paramètres
(ex: ?rech=cardiopathie) Le nom d'un document avec positionnement sur une ancre
(ex: #1.3)
Une Url peut être un document local exemple sur Macintosh : ou sur PC : file:///C|/Mes
Important : Une URL peut être relative au document courant. C'est à dire qu'un lien vers un autre document du même répertoire pourra se faire avec l'URL simple :
H.T.M.L.
HyperText Markup Langage
H.T.M.L. est un format d'écriture de document du type SGML (Standard Generalized Markup Language). Ce langage est définit par le W3C (World Wide Web consortium), organisme indépendant chargé de la normalisation et de la recherche sur la technologie Web .
En d'autres termes, HTML est un ensemble (réduit) de balises (ou styles ou "tags") utilisés pour définir les différents composants d'un document
Les différentes balises de HTML utilisent une syntaxe SGML, on entre dans un environnement en le citant borné par les caractères , on le quitte en le nommant précédé d'un caractère /.
Les documents HTML sont des textes ascii ponctués par des séquence et
Comme dans les exemples suivants :
Exemple de document HTML
Important !
Bonjour |
HTML n'est pas un langage de programmation !
Ce n'est qu'un langage de description de documents.
Différentes versions :
• HTML 1.0 : C'est la toute première version
• HTML 3.2 : C'est la version utilisée actuellement (quelques "vieux" navigateurs ne supportent pas encore toutes ses fonctionnalités)
• HTML 4.0 (Décembre 97) : n'est pas encore implémenté sur la plupart des navigateurs
Structure générale d'un document HTML
Titre apparaissant sur la barre de titre
Titre apparaissant dans la fenêtre
...
Les styles pour les textes
Les plus utilisés :
Texte en gras (bold)
Ceci est en gras Texte en italique
Ceci est en italiques
Affiché avec une police de caractère fixe, courrier (vient de typewriter text).
L'espacement est identique pour chaque caractère Ceci est en format fixe
Balises courantes
, ... Définit des titres ou en-tête, de différentes tailles. En-tête
En-tête
En-tête
En-tête
...
"Break Line" force le passage à la ligne suivante
Nouveau paragraphe. Sert, avec le précédent, de retour chariot.
Ligne de démarcationPour centrer le texte
12> Pour fixer la taille des caractères (préférer les H1..H6 pour les titres), on peut utiliser cette balise sous la forme :
blue> Pour changer de couleur au texte: blue, green, red, yellow, ou le code hexadécimal de la couleur ()
Autres styles (moins utilisés, voire jamais utilisés !) :
Il peut exister des différences à l'affichage des styles en fonction du Browser.
Définition (souvent en italique)
H.T.M.L. signifie HyperText Markup Language
Emphasis - mise en évidence (souvent en italique) Attention : Tapez votre mot de passe en minuscule !
Citation (titre de livres...) (souvent en italique)
A Beginner's Guide to HTML
Code de programme (Souvent en format fixe) sort "-t|" +2 s
Permet de mettre le texte dans un style préformaté.
Voici un texte en format "pre".
Ces deux dernières commandes ont l'avantage de respecter les "retour-ligne: du texte sans demander des marques
ou
en fin de chaque ligne.
Pour définir un texte à entrer au clavier (Souvent en format fixe)
Tapez passwd pour changer votre mot de passe
Pour des messages de statut de l'ordinateur (Souvent en format fixe) riendutout: Command not found.
Pour une mise en évidence plus importante (Caractères gras)
Veillez à ce que votre mot de passe fasse plus de 5 caractères
Pour indiquer que l'utilisateur doit remplacer cette variable par une instance cat nom-de-fichier affiche le contenu du fichier.
Ceci permet d'afficher une adresse
Une adresse
ceci permet d'afficher un bloc en retraitUn retrait
Affichage d'un exemple.
Exemple
Barre un texte.
Texte barré
Permet de mettre du texte en clignotant
blink ...
sert à afficher du code informatique
Permet d'afficher les balises HTML sans les interpréter (jusqu'à la prochaine balise ).
Exemple
Le Web : une interface universelle
En chargeant différentes polices de caractères ("font") le browser peut afficher différents langages
????? ?? ???µ??? ?? ????
Les accents Français HTML
Norme : ISO Latin 1
Lettre
HTML
Signification
À
À
A majuscule, accent grave
Ç
ç
C majuscule, cédille
É
É
E majuscule, accent aigu
Ê
Ê
E majuscule, accent circonflexe
È
È
E majuscule, accent grave
Ë
Ë
E majuscule, tréma
Î
Î
I majuscule, accent circonflexe
Ô
Ô
O majuscule, accent circonflexe
Ú
Ú
U majuscule, accent aigu
Û
Û
U majuscule, accent circonflexe
Ù
Ù
U majuscule, accent grave
Ü
Ü
U majuscule, tréma
â
â
a minuscule, accent circonflexe
æ
æ
ae, diphthongue (ligature)
à
à
a minuscule, accent grave
ä
ä
a minuscule, tréma
ç
ç
c minuscule, cédille
é
é
e minuscule, accent aigu
ê
ê
e minuscule, accent circonflexe
è
è
e minuscule, accent grave
ë
ë
e minuscule, tréma
î
î
i minuscule, accent circonflexe
ï
ï
i minuscule, tréma
ô
ô
o minuscule, accent circonflexe
ö
ö
o minuscule, tréma
ú
ú
u minuscule, accent aigu
û
û
u minuscule, accent circonflexe
ù
ù
u minuscule, accent grave
ü
ü
u minuscule, tréma
LES LISTES
Les listes sont des éléments très utilisées sur les pages Web. Il en existe de différentes sortes.
Listes courantes
Listes à puces
• texte 1
• texte 2
- texte 1
- texte 2
Listes numérotées
1. texte 1
2. texte 2
- texte 1
- texte 2
Liste de définition
Terme 1 à définir
Définition du terme 1
Terme 2 à définir
Définition du terme 2 suite du terme 2
- Terme 1 à définir
- Définition du terme 1
- Terme 2 à définir
- Définition du terme 2
- suite du terme 2
l'imbrication de listes est bien sûr possible :
1. En automne : - pommes
- poires
2. Au printemps : - cerises
L'aspect de certaines listes est intimement lié au browser que l'on utilise.
Les listes qui suivent sont très peu utilisées.
Listes rares
Liste de répertoires
• texte 1
• texte 2
texte 1 texte 2 liste menus.• texte 1
• texte 2
texte 1 texte 2 Exemple de fichier HTML
Source HTML Tel que cela apparaît sur le navigateur Web
Exemple de document HTML
Entête de niveau 1
Exemple de lien
Exemple de changement de style
Entête de niveau 2
Liste non numérotée :
- Premier élément
- Second élément
Entête de niveau 3
Liste numérotée :
- Premier élément
- Second élément
Entête de niveau 4
liste descriptive :
- Premier Terme
- description du premier terme
- Second Terme
- description du second terme
Entête de niveau 5
ancre
Listes emboitées :
- Premier élément
- Second élément
- élément 1
- élément 2
Entête de niveau 6
Les Hyperliens
hyperlien
On peut dans un document HTML mettre un lien vers un autre document en utilisant la balise suivante :
Du coté du navigateur le texte un-petit-texte apparaîtra (en général) souligné et de couleur bleue, indiquant à l'utilisateur que cette portion de texte est un hyperlien qui va appeler l'URL correspondante.
Cet hyperlien peut être de plusieurs types :
• Un autre document HTML
• Un lien vers une image
• Un lien sur fichier son, ou vidéo à charger, un fichier compressé ...
cliquez ici pour visionner l'animation
• Un lien vers un programme de composition de mail.
• Cette directive mailto permet de spécifier le champ sujet :
texte etc.
Images
Un hyperlien très spécial est l'insertion d'une image dans le texte
Cette image doit être au format GIF, JPEG ou, plus rarement, XBM
Il est même possible de cumuler un hyperlien et une image incrustée afin de pouvoir suivre le lien en cliquant sur l'image. La syntaxe est :
L'alternative ALT permet d'afficher un texte si le lecteur de Web ne sait pas lire les images. Par exemple : (sur certains navigateurs, ce texte apparaît quand on place la souris sur l'image)
ALIGN={BOTTOM | TOP| RIGHT | LEFT ...} : Cette option permet de définir l'alignement du texte autour de l'image, ex: .
HEIGHT=n, WIDTH=n : Ces deux options permettent de spécifier la taille de l'image (on les utilise aussi pour diminuer, à l'affichage, la taille de l'image)
Voici un exemple de document HTML
Voici quelques liens possibles :
• Carte des serveurs Web
• Description de la grippe
________________________________________
Et maintenant voici le source HTML correspondant :
Exemple de document HTML
Voici un exemple de document HTML
Voici quelques liens possibles :