Aide Mémoire HTML

ABC HTML
Centrer des Objets
Commentaires
Couleurs de Base
Exemple ou XMP
Frames ou Cadres
Form
Images
Ligne Horizontale
Listes
Meta 		Meta(2) Référencer le site
Multimédia
Polices de Caractères
Polices Animées -Microsoft Explorer
Saut de Ligne et Paragraphes
Signes Spéciaux
Target
Table (Tableaux)
Titres HTML
Utilisation de Links


Le Titre affiché dans la fenêtre du navigateur utilisé est à mettre entre les 2 marqueurs
<title>et </title>, placés entre les 2 Marqueurs <head> et </head>.

ATTENTION :
Ce titre n'est pas affiché sur la page HTML

Entre les 2 marqueurs <body> et </body>
On place le corps d'une page HTML.

<html> Début du Document
<head>  
<title>  
Bonjour Ici titre affiché par le Navigateur
</title> Annuler <title>
</head> Annuler <head>
</html> Fin du Document HTML

Exemple d'un Document HTML minimum

<html>
<head>
<title> </title>
</head>
</html>

Document Simple, Son Titre est Affiché dans la Fenêtre du Navigateur

<html>
<head>
<title>Titre Affiché par le navigateur</title>
</head>
</html>

Afficher une phrase

<html>
<head>
<title>Titre HTML </title>
</head>
<body>
Cette phrase est affichée dans une page HTML
</body>
</html>





Centrer des Objets

On peut centrer n'importe quel objet ; texte ou image avec le marqueur <center>.
Annuler l'effet avec </center>

Exemple comment Centrer en HTML

<html>
<head>
<title> CENTRER en HTML</title>
</head>
<body>
<center>
Ce texte est centré par le marqueur
</center>
</body>
</html>



Commentaires

Pour insérer des commentaires il suffit de placer le commentaire entre les 2 signes : <!-- et -->

Exemple d'un commentaire

 <html>
<head>
<title>
</title>
</head>
<body>
Ici texte <!-- Ici Commentaire -->
</body>
</html>



Couleurs de Base

nn 000000 black
BLANC FFFFFF white
nn 008000 green
nn 800000 maroon
nn 808000 olive
nn 000080 navy
nn 800080 purple
nn 808080 gray
nn FFFF00 yellow
nn 00FF00 lime
nn 00FFFF aqua
nn FF00FF fuschia
nn C0C0C0 silver
nn FF0000 red
nn 0000FF blue
nn 008080 teal



Afficher avec XMP


Pour Afficher des caractères spéciaux sans interprétation du Navigateur
on utilise le marqueur <xmp>.
Il faut annuler le marqueur avec </xmp>

Exemple utilisation de XMP

</html>
</head>
</title> xmp.htm</title>
</head>
</body>
</xmp> L'utilisation de </xmp> permet d'afficher des caractères spéciaux</xmp>
</xmp> et Pour afficher aussi les accents sans difficulté</xmp>
</body>
</html>



FRAMESET Divise la Fenêtre en Cadres

Frames

Par exemple <frameset rows="100,200,*"> divise la fenêtre en 3 fenêtres en longueur :

  1. la 1ère de 100 points
  2. la 2ème de 200 points
  3. la 3ème le reste de la taille de la fenêtre

2ème exemple <frameset cols="30%,70%"> 2 fenêtres de 30% et 70% (pour cent)
de la Taille de la fenêtre (colonnes)

3ème exemple <frameset cols="100,500"> 2 fenêtres de 100 et 500 points.

Cadre 1 Cadre 2

Remarque :

le * indique le reste de la fenêtre

par exemple au lieu d'indiquer

rows="50%,20%,30%"
on peut écrire
rows="50%,20%,*"


Important
1-<frameset> remplace <body> dans les documents HTML

2-Pour chaque sous fenêtre ou cadre, il faut un élément <frame>
--> entre <frameset> et </frameset>
il faut entrer autant d'éléments <frame> que la fenêtre est divisée en cadres.

<frameset rows="30%,30%,*">     3 Fenêtres
<frame src="nom_document.htm">   1
<frame src="autre_document.htm">  2
<frame src="image.gif">                   3
</frameset>                                     Fin de FRAMESET

3-Pour les Navigateurs qui n'affichent pas les frames, on peut afficher un message pour informer l'utilisateur.
Ce message est ignoré par les navigateurs qui affichent correctement les frames.
le message est à mettre entre les 2 marqueurs <noframes> et </noframes>

par exemple :
<frameset rows="44%,*"
<noframes>Ce Navigateur n'affiche pas les FRAMES
</noframes>
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>

NAME pour donner un nom au cadre et l'adresser par la suite.
MARGINWIDTH fixe la marge                  marginwidth="40"
MARGINHEIGHT fixe la marge en haut         marginheight="400"
SCROLLING="yes" ou "no" ou "auto"
Normalement le navigateur affiche une barre de défilement si le document est long pour la fenêtre
scrolling="yes"                         affiche toujours une barre de défilement
scrolling="no"                          pas de barre, même si le document est long.
scrolling="auto"                       par défaut. Affiche une barre selon besoin.
NORESIZE fige la taille du cadre (l'utilisateur ne peut redimensionner les cadres avec la souris).

-On peut remplacer le contenu d'une fenêtre en affichant un autre
document HTML dans cette fenêtre, et ceci en utilisant la commande
target et un link comme suite :
<a href="font.htm" target="fen1">

et Maintenant un clic sur la phrase suivante pour exécuter l'exemple et afficher le document
font.htm ici.

font.htm est un document HTML à afficher à la place du document affiché actuellement.
target ou cible est l'endroit où afficher font.htm.
fen1 est un nom donné a un cadre ou fenêtre avec NAME dans <frame>
par exemple on divise la fenêtre en 2 cadres, on affiche
dans le 1er cadre un link et dans le 2ème, une image gif.
un clic sur le link dans le 1er cadre charge le document font.htm à la place de l'image dans le 2ème cadre
Le link est dans le fichier tstframe.htm
<html>
<head>
<<title></title>
</head>
<frameset rows="50%,50%">
<frame src="tstframe.htm">
<frame src="image.gif" name="fen1">
</frameset>
</html>

On peut Annuler l'effet de frames en chargeant un document dans la fenêtre mère comme suite :
<a href="font.htm" target="_top">Clic pour Annuler les Cadres</a>

et maintenant un clic sur la phrase suivante pour annuler l'effet des frames et charger à place le document font.htm.

 

 

Autre Valeurs pour TARGET

target="_self"

le cible est ici (dans le même cadre)

target="_blank"

le cible est un nouveau document

target="_parent"

le cible est le parent

target="_top"

idem

 

Exemple : Diviser la fenêtre en 2 cadres

<html>
<head>
<title>Frameset</title>
</head>
<frameset rows="50%,50%">
<frame src="font.htm">
<frame src="image.gif">
</frameset>
</html>

Diviser la Fenêtre et Afficher un Message pour les Navigateurs n'Affichant pas les Frames

<html>
<head>
<title>FRAMESET et NOFRAMES</title>
</head>
<frameset rows="50%,50%">
<noframes>
Ce Navigateur n'affiche pas les Frames
</noframes>
<frame src="font.htm">
<frame src="image.gif">
</frameset>
</html>

Exemple Diviser la Fenêtre en 2 Colonnes

<html>
<head>
<title>FRAMESET</title>
</head>
<frameset cols="50%,50%">
<frame src="font.htm">
<frame src="imga.gif">
</frameset>
</html>

Diviser la fenêtre et utiliser les marges

<html>
<head>
<tiles></title>
</head>
<frameset cols="50%,50%">
<frame src="font.htm" marginwidth="40" marginheight="100">
<frame src="image.gif">
</frameset>
</html>

Exemple Diviser la Fenêtre en 2 Colonnes avec SCROOLING="no"

<html>
<head>
<title>frameset et scrolling</title>
<frameset cols="50%,50%">
<frame src="font.htm" scrolling="no">
<frame src="image.gif">
</frameset>
</html>

Diviser la Fenêtre en 2 Colonnes et Taille Fixe

<html>
<head>
<title>FRAMESET</title>
</head>
<frameset cols="50%,50%">
<frame src="font.htm" noresize>
<frame src="image.gif">
</frameset>
</html>

Exemple Utiliser TARGET et LINK pour afficher un autre document

<html>
<head>
<title></title>
</head>
<frameset rows="50%,50%">
<frame src="tstframe.htm">
<frame src="image.gif" name="fen1">
</frameset>
</html>

Le Fichier tstframe.htm
<html>
<head>
<title>tstframe</title>
</head>
<body>
<a href="font.htm" target="fen1">Clic pour charger font.htm</a>
</body>
</html>

Exemple Annuler l'effet de Cadres

<html>
<head>
<title></title>
</head>
<frameset cols="50%,50%">
<frame src="sansfram.htm">
<frame src="image.gif">
</frameset>
</html>

Le Fichier sansfram.htm
<html>
<head>
<title></title>
</head>
<body>
<a href="font.htm" target="_top">Clic pour Annuler les Cadres</a>
</body>
</html>

Diviser la Fenêtre en Cadres et Changement de ces cadres en cours d'exécution

<html>
<head>
<title></title>
</head>
<frameset cols="50%,50%">
<frame src="lframe.htm">
<frame src="image.gif">
</frameset>
</html>

Le Fichier lframe.htm
<html>
<head>
<title></title>
</head>
<body>
<a href="2frame.htm" target="_parent">Autre Fenêtre Mère avec Cadres</a>
</body>
</html>

Le Fichier 2frame.htm
<html>
<head>
<title></title>
</head>
<frameset cols="50%,20%,*">
<frame src="image.gif">
<frame src="image.gif">
<frame src="image.gif">
</frameset>
</html>



Form

Nom :

Mot de Passe :

Choisir :

choix1

choix2

Valider ou Annuler :

formulaires et HTML

 

Entrer un Texte Simple

Entrer Une Liste

Pour afficher un texte par défaut dans la liste :
on met le texte après le marqueur textarea
<textarea name="nom_de_liste" rows="5" cols="22">Texte Affiché par Défaut</textarea>

Entrer un texte  (mot de passe)

<input type ="password" name="code" rows="1" cols="22"> pas d'annulation

Utiliser Les cases à cocher, les boutons et les boutons radio

Cases à cocher :
avec
<input type="checkbox">
ou
<input name="case" type="checkbox"> avec un nom
ou
<input name="case" type="checkbox" CHECKED> coché par défaut
ou
<input type="checkbox">Texte
ou
<input type="checkbox" value="valeur"> valeur

Bouton Radio :

<input name="radio1" type="radio" value="r1" CHECKED>Texte
name est le nom de ce bouton, value=valeur, checked=coché, Texte est le texte à afficher et est indiqué après le marqueur <input>

Bouton de Commande

Ici type="button" et le texte affiché sur le bouton est la valeur de Value
<input name="bouton1" type="button" value="Texte sur le Bouton">

Utiliser Les Menus Déroulants

Utilisation des programmes CGI et les 2 boutons SUBMIT et RESET

Le bouton SUBMIT permet d'envoyer les informations de formulaires vers un programme CGI
Le bouton RESET Efface le texte entré

Exemple zone texte, liste et bouttons

<html>
<head>
<title>Forms</title>
</head>
<body>
<form>
Entrez votre Nom :<p>
<input name="nom" type="text" rows="1" cols="22"><p>
Liste :<p>
<textarea name="liste" rows="5" cols="22">Texte par Défaut </textarea><p>
Mot de Passe :<p>
<input name="code" type="password" rows="1" cols="22"><p>
Choisir :<p>
<input name="choix1" type="checkbox" value="choix1">choix1
<input name="choix2" type="checkbox" value="choix2">choix2<p>
Valider ou Annuler :<p>
<input name="ok" type="button" value="OK">
<input name="Annuler" type="button" value="Annuler">
</form>
</body>
</html>

Exemple Menu Déroulant

<html>
<head>
<title></title>
</head>
<body>
<h1>
Utilisation d'un Menu Déroulant
</h1>
<form>
<select name="nom_menu" size="1">
<option value="Option1">ID_option1
<option value="Option2">ID_option2
<option value="Option3">ID_option3
</select>
</form>
</body>
</html>

Exemple Liste Multiple

<html>
<head>
<title>Liste Multiple</title>
</head>
<body>
<form>
<select multiple name="nom_liste" size="2">
<option value="option1">ID_option1
<option vaue="option2">ID_option2
<option value="option3">ID_option3
</select>
</form>
</body>
</html>

Les Boutons SUBMIT et RESET

<html>
<head>
<title>CGI</title>
</head>
<body>
<form method="get" action="http://nom_server/cgi-bin/search.exe">
<p><big>Entrer le nom</big><p>
<input name="nom" type="text" rows="1" cols="22">
<input type="submit" value="Chercher">
<input type="reset" value="Effacer">
</form>
</body>
</html>



Afficher des Images

Afficher une image dans un document HTML

ALT+Message

Informer l'utilisateur :
  1. Si le navigateur n'affiche pas l'image
  2. Dans l'attente de l'affichage de l'image
  3. Microsoft Internet Explorer affiche le message sous forme d'aide

par exemple <img src="nom_image" alt="ici normalement une image">

Aligner une image

avec align="left" ou "right" ou "center"
ou align="top" ou "middle" ou "bottom"
ou Encore "texttop" ou "absmiddle" ou "baseline" ou "absbottom"

Donner des dimensions à une image

avec width= et height= dans <img>
<img src="nom_imag" width="150" height="150">
le Navigateur donne à l'image les dimensions demandées en modifiant,
visiblement les dimensions de l'image.

BORDER pour Encadrer une image
On peut ainsi choisir l'épaisseur du cadre avec border=10, ou 20 etc

Laisser un espace horizontal ou vertical

Utiliser une Image comme un Lien

En l'insérant entre <a href> et </a>
Par exemple :
<a href="nom.htm"><img src="nom_image"></a>
Remarque :
Pour avoir un lien image sans cadre il suffit de spécifier border=0
comme suite :
<a href="nom.htm"><img src="nom_image" border="0"></a>

Images Map

1-Une partie de l'image joue le rôle d'une zone sensible.
2-Cette partie sert à appeler un fichier ou une autre partie du document HTML
3-D'abord on indique l'image à utiliser et un nom symbolique pour la partie sensible.
4-La partie sensible doit être définie entre les 2 marqueurs
<map> et </map>
5-Enfin avec le marqueur <area href> l'action et la forme de la partie de l'image avec ses coordonnées.
<img src="nom_image" usemap="#m">
<map name="m">
<area href="autre_page.htm" shape="rect" coords="0,0,150,150">
</map>

Remarque :

Affichage rapide d'un document contenant une image

En indiquant les dimensions d'une image, le navigateur affiche le document HTML plus rapidement.
(Il affiche d'abord le texte et ensuite l'image)

Afficher des images Vidéo

avec <img dynsrc="nom_video.avi">
Uniquement Microsoft Explorer.Pour Netscape Navigator voir EMBED

Exemple afficher une image

<html>
<head>
<title>Afficher une Image</title>
</head>
<body>
<img src="s.jpg">
</body>
</html>

Exemple afficher une image ou un message

<html>
<head>
<title>Images et HTML</title>
</head>
<body>
<h1>
Afficher une image ou un Message avec ALT
</h1>
<img src="s.jpg" ALT="Normalement. Ici une Image !!">
</body>
</html>

Exemple Afficher une image alignée

<html>
<head>
<title>Images HTML</title>
</head>
<body>
<h1>
Aligner une image
</h1>
<img src="s.jpg" align="center">
</body>
</html>

Exemple d'une image, dimensions et alignée

<html>
<head>
<title>Image Dimensions et Align</title>
</head>
<body>
<h1>
Afficher une image alignée et dimensions
</h1>
<img src="s.jpg" align="right" width="150" height="150">
</body>
</html>

Exemple images Align, Dimensions et Border

<html>
<head>
<title>
</title>
</head>
<body>
<img src="s.jpg" align="top" width="20" height="20" border="10">
</body>
</html>

Exemple afficher des images Vidéo - Microsoft Explorer uniquement

<html>
<head>
<title>Images Vidéo</title>
</head>
<body>
<img dynsrc="s.avi">
</body>
</html>

Exemple d'utilisation d'une image Map

<html>
<head>
<title>Utilisation d'Images Map</title>
</head>
<body>
<img src="s.jpg" align="bottom" usemap="#map">
<map name="map">
<area href="test1.htm" shape="rect" coords="0,0,150,150">
</map>
</body>
</html>



Ligne Horizontale

-Le Marqueur <hr>introduit une ligne horizontale

-On peut aussi donner des attributs à une ligne horizontale comme suite :

HR
size La profondeur de cette ligne
width Largeur
align Alignement align="center" ou "left" ou "right"
noshade Pas d'effet 3 D
color une couleur pour la ligne. MSIE uniquement
<hr color="red">

Exemple ligne horizontale par défaut

<html>
<head><title>Ligne Horizontale</title>
</head>
<body>
<h1>Titre Souligné</h1>
<hr>
</body>
</html>

Ligne Horizontale Centrée et Taille

<html>
<head><title>Ligne Horizontale et Taille</title>
</head>
<body>
<h1 align="center">Titre Souligné</h1>
<hr align="center" width=100>
</body>
</html>

Exemple Ligne Horizontale Profonde

<html>
<head><title>Ligne Horizontale et Taille</title>
</head>
<body>
<h1 align="center">Titre Souligné</h1>
<hr align="center" size=10 width=100>
</body>
</html>

Exemple Ligne Horizontale Profonde Centrée sans effet 3D

<html> <head><title>Ligne Horizontale et Taille</title></head>
<body>
<h1 align="center">Titre Souligné</h1>
<hr align="center" size=10 width=100 noshade>
</body>
</html>



Listes en HTML

Exemple Liste Numérotée

<html>
<head>
<title> Listes HTML</title>
</head>
<body>
<ol>Liste
<li>Elément 1
<li>Elément 2
</ol>
</body>
</html>

Liste Numérotée et sous liste

<html>
<head>
<title> Listes HTML</title>
</head>
<body>
<ol>Liste1
<li>Elément 1
<li>Elément 2
<ol>Sous Liste1
<li>Elément 1
<li>Elément 2
</ol>
</ol>
</body>
</html>

Liste avec Symboles

<html>
<head>
<title> Listes HTML</title>
</head>
<body>
<ul>Liste1
<li>Elément1<li>Elément2
<ul>SousListe
<li>Elément1<li>Elément2
</ul>
<ul>Sous Liste2
<li>Elément1
<li>Elément2
</ul>
</ul>
</body>
</html>

Exemple Liste Numérotée type=A

<html>
<head>
<title> Listes HTML</title>
</head>
<body>
<ol type=A>Liste Type A
<li>Elément 1
<li>Elément 2
<ol type=a>Sous Liste Type a
<li>Elément1
<li>Elément2
</ol>
</ol>
</body>
</html>

Liste Symbole Type=Circle

<html>
<head>
<title>Listes HTML</title>
</head>
<body>
<ul type="circle">Liste Type Cercle
<li>Elément1
<li>Elément2
<ul>Sous Liste<li>Elément1<li>Elément2</ul>
</ul>
</body>
</html>



META

En utilisant le marqueur <meta>
un document html appel un autre automatiquement.
<meta http-equiv="refresh" content="2 ;url=nom_2_doc.htm">

meta Le nom de cette commande
http-equiv="refresh" Sert à effacer l'écran
content="2; URL=nom_document" Le temps d'attente ici 2 secondes et le nom du document à appeler

.

Attention

la commande META et à placer entre les 2 marqueurs : <head> et </head>

Exemple un Document HTML appel un autre après 2 secondes

<html>
<head>
<title>META et HTML</title>
<meta http-equiv="refresh" content="2; URL=test.htm">
</head>
<body>
<h1>
La commande META en HTML <hr>
</h1>
<img src="s.jpg" align="top" width="20" height="20" border="10">
</body>
</html>

Exemple : 2 Documents HTML chacun appel l'autre sans cesse

test.htm

<html>
<head>
<title>META et HTML</title>
<meta http-equiv="refresh" content="2; url=test1.htm">
</head>
<body>
<h1>
Document 1<hr>
</h1>
<img src="s.jpg" align="top" width="20" height="20" border="10">
</body>
</html>

test1.htm

<html> <head>
<title>META et HTML</title>
<meta http-equiv="refresh" content="2; url=test.htm">
</head>
<body>
<h1>
Document 2
</h1>
<img src="s.jpg" align="top" width="50" height="50" border="30">
</body>
</html>



META (2)

<meta name="keywords" content="clé1,clé2,etc">
<meta name="description" contenet="description du site">

Exemple d'Utilisation de META

<html>
<head><title>meta</title>
<meta name="keywords" content="aide mémoire, html, etc">
<meta name="description" content="Home Page Azzam et Kaesar ALNIJRES">
</head>
<body>
<h4 align="center">Page d'Accueil</h4>
</body>
</html>



MULTIMEDIA

 

Le marqueur <embed>permet d'insérer des éléments MULTIMEDIA dans des pages HTML
<embed src="nom_fichir.extension">

 

Cette commande est valable pour Netscape Navigator 3.0 et Sup
et Microsoft Explorer 3.0 et Sup.
Les extensions peuvent être : AVI, Wav, Doc etc.
La page HTML contiendra soit une Icône pour les fichier *.wav, *.avi etc.Soit une barre de défilement avec des commandes Jouer et Stop...Dans le cas des icônes, il suffit d'un clic droit sur l'icône et un clic dans le menu ouvert sur play
Pour l'arrêter->clic droit sur l'icône et clic sur pause ou stop.
ImportantPour pouvoir lire les fichiers multimédia, il faut activer les options concernant les fichiers multimédia du navigateur
(ATTENTION : problèmes de sécurité, et temps de chargement).

Insérer des éléments Multimédia

<html>
<head>
<title> MULTIMEDIA</title>
</head>
<body>
<h1 align="center">
MULTIMEDIA et HTML
</h1>
<hr align="center" width="100">
<embed src="fichier.wav">
<embed src="fichier.bmp">
<embed src="fichier.avi">
</body>
</html>



Police, Taille et Couleur par Défaut
Couleur Rouge
Police Arial
Police Arial, BleueRougeBlancVioletOr

Polices de Caractères

Taille :

Couleurs :

         

Choisir une Police :

Sélectionner plusieurs facteurs pour les polices :

Par exemple sélectionner une police, de taille donnée et une couleur pour cette police :
<font face="Arial" size=+3 color="blue">
une police Arial, taille supérieure de 3 unités et une couleur bleue

Fixer la Taille par défaut

<html>
<head>
<title<BASEFONT</title>
</head>
<body>
<basefont size=5>
Bonjour Basefont=5<br>
</body>
</html>

Font Size

<html>
<head>
<title>BASEFONT et Font Size</title>
</head>
<body>
<basefont size=5>
Bonjour Basefont=5<br>
<font size=+2>
Bonjour Font Size=+2<br>
</font>
Retour à la Taille par Défaut
</body>
</html>

Couleur pour la Police

<html>
<head>
</head>
<body>
<font color="#FF0000">
Couleur Rouge<p>
</font>
Couleur par défaut<p>
<font color="gold">
Couleur Or<p>
</font>
Couleur par défaut<p>
<font color="blue">
Couleur Bleue<p>
</font>
</body>
</html>

Utiliser plusieurs Facteurs pour la Police

<html>
<head>
</head>
<body>
<h1 align="center">Police au Choix</h1>
<font color="#FF0000" face="Arial" size=+2>
Couleur Rouge<br>
Police Arial<br>
Size+2<br>
</font>
Police par Défaut<p>
</body>
</html>

 



Police Animée MSIE

 

Polices Animées (Microsoft Explorer Uniquement)

Avec le marqueur <marquee>de Microsoft Explorer, on obtient une police de caractères animée.
Annuler l'effet avec </marquee>

Options de cette commande :

loop combien de fois l'action va se dérouler
loop="nombre_de_fois"
Sans indication de loop le texte reste en mouvement
<marquee loop="3">Bonjour</marquee>

behaviour Nature du mouvement
behaviour="scroll" par défaut ; mouvement droite->gauche
behaviour="alternate" mouvement dans les 2 sens (va et vient)
behaviour="slide" mouvement droite gauche et stop
<marquee behaviour="alternate">Bonjour</marquee>

direction direction du texte (par défaut droite gauche)
direction="right" mouvement gauche->droite
<marquee direction="right">Bonjour</marquee>

scrolldelay délai en millisecondes avant le mouvement
scrolldelay="4"
<marquee scrolldelay="20">Bonjour</marquee>

scrollamount de combien de pixels le texte bouge à chaque mouvement
scrollamount="20"
<marquee scrollamount="20">Bonjour</marquee>

bgcolor La couleur d'arrière plan
bgcolor="yellow" couleur jaune
bgcolor="#FFFF00" couleur jaune aussi
< marquee bgcolor="#FFFF00">Bonjour</marquee>

width et height largeur et hauteur de la région
width="250" unités
width="50%" pourcentage de la fenêtre
< marquee width="25%" height="10%">Bonjour</marquee>

Remarque :

Choisir une couleur pour le texte avec
<font color="couleur">
placée avant le marqueur
<marquee>

Une Police Animée

<html>
<head>
<title>Police Animée</title>
</head>
<body>
<marquee>Police Animée</marquee>
</body>
</html>

Exemple Police Animée avec Couleur et Fond

<html>
<head><title>Police Animée</title></head>
<body>
<font color="blue">
<marquee bgcolor="yellow" width=200 align="center">
Police Animée</marquee>
</font>
</body>
</html>

Police Animée avec Couleur et Fond et vitesse d'avancement, le mouvement dans 2 Sens

<html>
<head><title>Police Animée</title></head>
<body>
Police Animée dans les 2 sens.<p>
<font color="red">
<marquee bgcolor="#FFFF00" behavior="alternate" scrolldelay="4" scrollamount="40" width="25%">Police Animée</marquee>
</font>
</body>
</html>

Police Animée, 2 MARQUEE

<html>
<head><title>Police Animée
</title>
</head>
<body>
Police Animée dans les 2 sens<p>
<font color="red">
<marquee bgcolor="#FFFF00" behavior="alternate" scrolldelay="4" scrollamount="40" width="25%">Police Animée</marquee>
<p>
</font>
<font color="red">
<marquee bgcolor="white" behavior="scroll" scrolldelay="90" scrollamount="4" width="25%">Police Animée</marquee>
</font>
</body>
</html>



 

Saut de ligne et marque de Paragraphe

saut de ligne

<html>
<head><title>br.htm</title></head>
<body>
Ici un retour à la ligne <br>
</body>
</html>

division en paragraphes

<html>
<head><title>br.htm</title></head>
<body>
Texte Paragraphe 1<p>

Texte Paragraphe 2<p>

</body>
</html>

Paragraphes Alignés

<html>
<head><title>br.htm</title></head>
<body>
<p align="center">Ici paragraphe centré</p>
<p align="right"> Ici paragraphe aligné à droite</p>
</body>
</html>

Utilisation de NOBR

<html>
<head><title>br.htm</title>
</head>
<h1>
<nobr>Utilisation de <NOBR> dans des documents HTML pour afficher cette ligne sans la couper même si la fenêtre du navigateur est réduite
</nobr>
<p>Ici sans Utilisation de <NOBR> dans des documents HTML. Cette ligne est coupée si la fenêtre du navigateur est réduite
</h1>
</body>
</html>



 

Afficher des Signes Spéciaux en HTML

Afficher des signes spéciaux comme par exemple le signe < et > qui sont normalement traduits par les Navigateurs

 

Pour Afficher On Ecrit
< &lt;
> &gt;
un espace insécable &nbsp;
" &quot;
à &agrave;
â &acirc;
é &eacute;
è &egrave;
ê &ecirc;
ç &ccedil;
î &icirc;
ï &iuml;
ô &ocirc;
û &ucirc;
ù &ugrave;





 

TARGET

Utiliser target permet de diriger un link
<a href>
Pour afficher par exemple un fichier HTML dans un cadre (frame).

target="_self">
Charger un document HTML dans le même cadre ou fenêtre.
<a href="nom.htm" target="_self">un Clic ici Affiche nom.htm</a>

target="_blank">
Charger un document HTML dans une nouvelle fenêtre du Navigateur.
<a href="nom.htm" target="_blank">un Clic ici Affiche nom.htm</a>

target="_parent">
Charger un document HTML dans la fenêtre parent
<a href="nom.htm" target="_parent">un Clic ici Affiche nom.htm</a>

target="_top">
Charger un document HTML dans une fenêtre avec annulation des frames
<a href="nom.htm" target="_top">un Clic ici Affiche nom.htm</a>



 

Image

Des Tableaux avec <table>

Le tableau ci-dessus comporte 2 lignes, la 1ère à une seule colonne et la
2ème, 2 colonnes (La colonne de la 1ère a une largeur d'une colonne et ne couvre pas les 2 colonnes inférieures ).

 

Exemple d'un tableau

<html>
<head>
<title>
</title>
</head>
<body bgcolor="ltgreen">
<table border>
<tr>
<td>colonne 1 ligne 1</td>
</tr>
<tr>
<td>colonne 1 ligne 2</td>
<td>colonne 2 ligne 2</td>
<td>colonne 3 ligne 2</td>
</tr>
</table>
</body>
</html>

1 Colonne=Largeur de 3 colonnes

<html>
<head><title></title></head>
<body bgcolor=ltgreen>
<table border>
<tr>
<td colspan=3>Colonne sur 3 colonnes</td> </tr>
<tr>
<td>colonne 1</td>
<td>colonne 2</td>
<td>colonne 3</td>
</tr>
</table>
</body>
</html>

 

Tableau et BORDER

<html>
<head><title></title></head>
<table border=30>
<tr>
<td colspan=3>Colonne sur 3 colonnes</td> </tr>
<tr>
<td>colonne 1</td>
<td>colonne 2</td>
<td>colonne 3</td>
</tr>
</table>
</body>
</html>

Exemple de TH et ROWSPAN

<html>
<head>
</head>

<table border>

<tr>
<th colspan=3 >ici th </th></tr>
<tr>
<td>colonne 1</td>
<td>colonne 2</td>
<td>colonne 3</td>
</tr>
<tr>
<th rowspan=3>Cette colonne s'étend sur 3 lignes</th>
<td> ici la colonne 2</td>
<td> ici la colonne 3</td>
</tr>
<tr>
<td> ici la colonne 2</td>
<td> ici la colonne 3</td>
</tr>
<tr>
<td> ici la colonne 2</td>
<td> ici la colonne 3</td>
</tr>
</table>
</body>
</html>

cellspacing

<html>
<head>
<title></title>
</head>
<body>
<table border=2 cellspacing=22>
<tr> <td >colonne1</td><td>colonne 2</td> </tr>
<tr> <td>colonne 1</td> <td>colonne 2</td> </tr>
</table>
</body>
</html>

 

Caption

<html>
<head>
<title></title>
</head>
<body>
<table border>
<caption align="top">Titre Tableau</caption>
<tr> <td >colonne 1</td><td>colonne 2</td> </tr>
<tr> <td> colonne 1</td> <td>colonne 2</td> </tr>
</table>
</body>
</html>

 

Exemple Colonne Vide

<html>
<head>
<title></title>
</head>
<body>
<table border=2 cellspacing=22>
<tr> <td ><br></td><td>colonne 2</td> </tr>
<tr> <td> colonne 1</td> <td>colonne 2</td> </tr>
</table>
</body>
</html>

 

Exemple d'un tableau contenant une image

<html>
<head>
<title></title>
</head>
<body>
<table border=16>
<tr> <td > <img src="s.gif" width=200 height=200 border=10></td> </tr>
</table>
</body>
</html>

 

Deux tableaux entourent une image

<html>
<head>
<title></title>
</head>
<body>
<table border=16 > <!--1er Tableau -->
<tr>
<td >
<table border=16> <!--2ème Tableau dans une colonne du 1er Tableau-->
<tr> <td > <img src="s.gif" align="middle" width=100 height=100 border=10></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>

2 Tableaux, image et un titre

<html>
<head>
<title></title>
</head>
<body>
<table border=16 >
<caption align="bottom"> Image</caption>
<tr> <td >
<table border=16>
<tr> <td > <img src="s.gif" align="middle" width=100 height=100 border=10></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>

 



 

Titre Enorme

Titre plus Petit

Titre encore plus Petit

Titre Enorme Centré

Titre Plus Petit aligné à droite

Titre plus Petit aligné à gauche

-Les Titres en HTML

On affiche un titre en le plaçant entre : <h1 > et </h1> Gros caractères <h2 > et </h2> Taille Inférieure que dans <h1>
<h3 > et </h3> Taille Inférieure que dans <h2>
<h4 > et </h4> Taille Inférieure que dans <h3>
<h5 > et </h5> Taille Inférieure que dans <h4>
<h6 > et </h6> Taille Inférieure que dans <h5>
Pour avoir un titre en gros caractères on le place entre <h1> et </h1> Pour afficher un titre plus petit on le place entre <h2 > et </h2> et encore plus PETIT entre <h3> et </h3 > etc.

-Aligner les titres

avec :
<h1 align="right">Titre aligné à droite
<h1 align="left">Titre aligné à gauche
<h1 align="center">Titre Centré
<h2 align="right">Titre Taille inférieure aligné à droite
Exemple Titre

<html>
<head>
<title>Ici Titre Affiché dans la Fenêtre du Navigateur</title>
</head >
<body >
<h1 >
Titre Enorme HTML </h1>
Ici Cette phrase est affichée avec une taille normale
</body>
</html>
Exemple plusieurs Titres et Tailles

<html>
<head>
<title>Titre Fenêtre Navigateur</title>
</head>
<body>
<h1>
Titre Enorme HTML
</h1>
<h2>
Titre plus Petit
</h2>
Ici Texte Normal
</body>
</html>
Exemple Titres, Tailles et Alignés

<html>
<head>
<title>document HTML </title >
</head>
<body>
<h1 align="center" >
Titre Enorme HTML Centré
</h1 >
<h2 align="right">
Titre plus Petit et aligné à droite
</h2 >
Texte Normal
</body >
</html >



 

Utilisation de Links




un Clic ici pour le retour au Début

-Utilisation des Etiquettes vers un autre élément de la page HTML en cours
ou
vers un autre emplacement sur le WEB ; autre page ou autre site.
-On définit une étiquette dans un emplacement de la page en cours en
utilisant les marqueurs <a name="nom_de_l'étiquette"> et </a> pour l'annuler,
le texte décrivant l'étiquette est après le marqueur comme suite :
<a name="nom_étiquette">Texte </a>
-On envoie le lecteur vers l'étiquette avec le marqueur
<a href="#nom_étiquette">et l'annulation avec </a>
-Et entre ces 2 marqueurs on place le texte sur lequel on clic pour aller vers l'étiquette.
Ce texte est affiché avec une couleur différente par le Navigateur
<a href="#nom_etiquette">Clic ici pour aller vers l'étiquette</a>
-On peut aussi envoyer l'utilisateur vers une référence externe.
Avec le marqueur <a href="nom_autre_page.htm"> et annuler avec </a>
ou
le marqueur <a href="Référence_site_Web"> et annuler avec </a>
-Par exemple <a href="http://machine.fr/doc/page1.htm">
et annuler avec </a> et le texte entre les 2 marqueurs est affiché
avec une autre couleur. Pour envoyer le lecteur vers la référence on clic
sur ce texte.

Exemple Utilisant une Etiquette Locale

<html>
<head>
<title> ahref.htm </title>
</head>
<body>
C'est le Début de ce Document <a name="debut"> début</a>
<br>
<br>
<br>
<br>
<br>
<a href="#debut">Retour au Début</a>
</body>
</html>

Exemple Envoyant vers une autre Machine

<html>
<head>
<title>
</title>
</head>
<body>
<a href="http://machine.fr/doc/page1.htm">Clic ici pour aller vers un autre site</a>
</body>
</html>

Exemple Envoyant le Lecteur vers une autre Page HTML

<html>
<head>
<title>ahref.htm</title>
</head>
<body>
<a href="page.htm">un Clic ici pour aller vers page.htm </a>
</body>
</html>