Mes
photos
Programmes
utiles
Windows
nous espionne!!!
Aide
windows 1
Aide
windows 2
Aide
windows 3
Applications
windows
Raccourcis
windows
Les
composantes d' un PC
Guide
HTML
Piratage
informatique
Gags
windows
Publicité
Forest
National
Mp3
Sondage
Livre
d'or
Liens
|
SOMMAIRE
La
base du HTML
On va essayer de faire simple pour commencer. D'accord?
HTML signifie HyperText Markup
Language (langage de marquage hypertexte). Il est très
simple à apprendre car sa structure repose sur la logique.
Presque toutes les commandes se terminent par une
commande de fermeture
Par exemple, je tape: <I> exemple de texte en
italique </I>
Vous voyez, le <I> est l'ordre de mettre le texte
en italique, et le </I> est l'ordre d'y mettre fin.
Il faut donc vous souvenir qu'il y a (dans 90% des cas)
une commande (d'ouverture) et une de fermeture. Dans
l'exemple ci-dessus, si j'oublie de placer le </I>, le
texte continuera d'être en italique.
Les quelques exceptions que je connaisse à cette règle
sont la commande <BR> la commande <P> et la
commande <LI> il doit y en avoir quelques autres mais
ne doivent pas être bien nombreuses.
Notion importante
Un traitement de texte travaille sur une feuille structurée
(marge droite, gauche, tabulations...) alors que HTML
travaille à l'aide de marques. Vous n'avez guère de choix:
Un texte sera margé à gauche ou centré, une image
pourra être à gauche, centrée ou à droite.
Mais ceci est relatif. En effet celui qui regarde ce
texte sur un quinze pouces n'aura pas le même nombre de
lignes que celui qui le regarde sur un vingt pouces. Amusez
vous à etroitiser ou élargir la fenêtre... Voilà, vous
avez tout compris.
Organisation
des codes
Il n'y pas de bonne ou mauvaise manière de s'organiser.
Tout est une question de clarté (pour la relecture, plus
tard, lorsqu'on cherche à enlever, ajouter, transformer...)
Que vous écriviez :
"Oh non, dit-il
<BR>
Qu'est ce que c'est? demanda-t-elle"
ou bien
"Oh non, dit-il <BR> Qu'est ce que c'est?
demanda-t-elle"
Le résultat sera toujours:
"Oh non, dit-il
Qu'est ce que c'est? demanda-t-elle"
Comme vous le voyez, du moment que les codes sont entrés
proprement, qu'on écrive tout sur la même ligne ou pas, ne
change que la clarté de la programmation sans influer sur
la présentation de la page web.
Les
espaces
Les espaces n'ont qu'une très petite signification en HTML.
Vous pouvez mettre cinq espaces: un seul sera vu. Ceci est dû
à la structure aléatoire du HTML, contrairement au
traitement de texte. Il existe cependant un caractère blanc
insécable ( )
Les
caractères spéciaux
Certains caractères ne sont pas utilisables en HTML et
doivent être entrés avec un code spécial. La raison en
est qu'ils sont déjà utilisés pour de nombreuses
commandes HTML.
Par exemple: si vous voulez entrer les caractères suivants:
(&) ampersand; (<) plus petit que ou (>) plus
grand que, il vous faudra taper & ou <
ou encore > (sans omettre le point virgule).
Voir aussi d'autres exemples par le code "ISO
Latin-1".
Les
lettres accentuées
á
|
á
|
a,
acute accent
|
Á
|
Á
|
A,
acute accent
|
â
|
â
|
a,
circumflex accent
|
Â
|
Â
|
A,
circumflex accent
|
æ
|
æ
|
ae
diphthong (ligature)
|
Æ
|
Æ
|
AE
diphthong (ligature)
|
à
|
à
|
a,
grave accent
|
À
|
À
|
A,
grave accent
|
å
|
å
|
a,
ring
|
Å
|
Å
|
A,
ring
|
ã
|
ã
|
a,
tilde
|
Ã
|
Ã
|
A,
tilde
|
ä
|
ä
|
a,
dieresis or umlaut mark
|
Ä
|
Ä
|
A,
dieresis or umlaut mark
|
ç
|
ç
|
c,
cedilla
|
Ç
|
Ç
|
C,
cedilla
|
ð
|
ð
|
eth,
Icelandic
|
Ð
|
Ð
|
Eth,
Icelandic
|
é
|
é
|
e,
acute accent
|
É
|
É
|
E,
acute accent
|
ê
|
ê
|
e,
circumflex accent
|
Ê
|
Ê
|
E,
circumflex accent
|
è
|
è
|
e,
grave accent
|
È
|
È
|
E,
grave accent
|
ë
|
ë
|
e,
dieresis or umlaut mark
|
Ë
|
Ë
|
E,
dieresis or umlaut mark
|
í
|
í
|
i,
acute accent
|
Í
|
Í
|
I,
acute accent
|
î
|
î
|
i,
circumflex accent
|
Î
|
Î
|
I,
circumflex accent
|
ì
|
ì
|
i,
grave accent
|
Ì
|
Ì
|
I,
grave accent
|
ï
|
ï
|
i,
dieresis or umlaut mark
|
Ï
|
Ï
|
I,
dieresis or umlaut mark
|
ñ
|
ñ
|
n,
tilde
|
Ñ
|
Ñ
|
N,
tilde
|
ó
|
ó
|
o,
acute accent
|
Ó
|
Ó
|
O,
acute accent
|
ô
|
ô
|
o,
circumflex accent
|
Ô
|
Ô
|
O,
circumflex accent
|
œ
|
|
(N''EXISTE
PAS)
|
Œ
|
|
(N''EXISTE
PAS)
|
ò
|
ò
|
o,
grave accent
|
Ò
|
Ò
|
O,
grave accent
|
ø
|
ø
|
o,
slash
|
Ø
|
Ø
|
O,
slash
|
õ
|
õ
|
o,
tilde
|
Õ
|
Õ
|
O,
tilde
|
ö
|
ö
|
o,
dieresis or umlaut mark
|
Ö
|
Ö
|
O,
dieresis or umlaut mark
|
ß
|
ß
|
sharp
s, German (sz ligature)
|
þ
|
þ
|
thorn,
Icelandic
|
Þ
|
Þ
|
THORN,
Icelandic
|
ú
|
ú
|
u,
acute accent
|
Ú
|
Ú
|
U,
acute accent
|
û
|
û
|
u,
circumflex accent
|
Û
|
Û
|
U,
circumflex accent
|
ù
|
ù
|
u,
grave accent
|
Ù
|
Ù
|
U,
grave accent
|
ü
|
ü
|
u,
dieresis or umlaut mark
|
Ü
|
Ü
|
U,
dieresis or umlaut mark
|
ý
|
ý
|
y,
acute accent
|
Ý
|
Ý
|
Y,
acute accent
|
ÿ
|
ÿ
|
y,
dieresis or umlaut mark
|
Ý
|
Ý
|
Y,
acute accent
|
Les
styles
| <ADDRESS> |
<B
(bold)> |
<CITE> |
<CODE> |
| <EM
(emphasize) > |
<I
(italic)> |
<STRONG> |
<STRIKE> |
| <TT
(typewriter)> |
<U
(underline)> |
La représentation dépend du "browser
" utilisé et des polices, par exemple:
Texte en normal
Texte en ADDRESS
Texte en Bold
Texte en CITE
Texte en CODE
Texte en EMphasize
Texte en Italic
Texte en Strong
Texte en Strike
Texte en Typewriter
Texte en Underline
Le
changement de style <xxx> nécessitent la commande de
fin de changement </xxx>.
Créer
sa première page
Dès que vous êtes sur un serveur et avez obtenu votre
espace, vous vous demandez par où commencer. Ne mettez pas
trop de liens vers d'autres sites. Si tout le monde faisait
ça, ça deviendrait très vite très rebutant.
Bon, commençons la programmation.
Commencez part écrire <HTML> au début de la page
et passez à la ligne suivante, pour que les choses restent
claires (le fait de passer à la ligne suivante n'étant pas
une commande HTML, il ne se passera rien sur la page Web)
Ensuite tapez <TITLE><HEAD> puis le nom de
votre page. Cela ne sera pas inscrit sur la page elle-même
mais sera le titre de la fenêtre (sur netscape). La mienne
s'appelle "Petit guide HTML".
Fermer ensuite les deux commandes en tapant
</TITLE></HEAD> (la fermeture de "HTML ne
se fera qu'en fin de document)
Passez à la ligne suivante et tapez <BODY> (on
peut mettre beaucoup de commandes dans BODY ). En ne précisant
rien, Netscape prend ses couleurs par défaut ou selon les
préférences que vous lui avez entrées. (cf. même
article)
Bon, on en a fini avec l'entête. On peut commencer à écrire
ce que d'autres pourront lire sur notre page.
On va commencer par mettre un gros titre sur notre page. En
utilisant les "Headers", on a de grandes chances
que ce sera à peu près identique sur tous les ordinateurs.
Appelons cette page "Ma Page d'accueil". Pour
cela, tapez:
<H1> Ma page d'accueil</H1> ce qui nous donne:
Ma
page d'accueil
D'accord
mon titre se retrouve en haut à gauche de l'écran. Il serait
mieux s'il était centré.
Alors tapons <CENTER><H1> Ma page
d'accueil</H1></CENTER> ce qui donne
Ma
page d'accueil
Ce qui fait plus présentable. Certains voudront améliorer en
faisant clignoter (commande BLINK). Essayons.
Tapez <BLINK> <CENTER><H1> Ma page d'accueil
</H1> </CENTER> </BLINK> ce qui donne:
Ma
page d'accueil
ça plaît ou pas, mais c'est toujours un moyen d'attirer
l'attention. N'en abusez pas, ça fait mal aux yeux.
Maintenant mettons un petit texte très simple qui ne
demande pas de commandes spéciales excepté le formatage en
gras et italique. Présentez vous:
Salut tout le monde! C'est ma première page et je voudrais
remercier Pierre Milan Grozdanic pour sa traduction du
guide de Bman
Ce qui s'écrit:
<B>Salut tout le monde! C'est ma première page et je
voudrais remercier <I>Pierre Grozdanic</I> pour
sa traduction du guide de <I>Bman</I> </B>
Bon, tout le monde suit jusque là? Alors mettons une
image sur notre page.
Pour cela vous aurez préalablement composé une image que
vous aurez enregistrée au format jpeg ou gif et que vous
aurez placée dans votre espace réservé sur votre serveur.
Pour l'exemple, on va placer une image qui a été enregistré
sous le doux nom de "anmatcat.gif". Sur mon
serveur j'ai créé un dossier "../Images/anim" où
j'entasse mes images animées.
Donc le chemin d'accès de mon portrait est
"../Images/anim/simpson.gif" car HTML a besoin de
connaitre le type de document qu'il recherche. Attention à
bien respecter la capitalisation. L'image à laquelle vous
vous réfeérez doit avoir un nom IDENTIQUE.
Plaçons l'image en tapant: <IMG
SRC="../Images/anim/simpson.gif"> (et on
n'oublie pas les guillemets) et plaçons, tant qu'on y est,
un lien qui nous ramène à ma page d'accueil en anglais. Et
voilà ce que devient notre page.
Ma
page d'accueil
Salut tout le monde! C'est ma première page et je
voudrais remercier Pierre Milan Grozdanic pour
sa traduction du guide de Bman
|
Ce
qui s'est programmé comme suit:
<HTML>
<HEAD><TITLE>Bien programmer en
HTML</HEAD></TITLE>
<BODY>
<CENTER>
<BLINK> <H1> Ma page d'accueil </H1>
</BLINK>
<P>
<B>Salut tout le monde! C'est ma première page et je
voudrais remercier <I>Pierre Milan Grozdanic</I>
pour sa traduction du guide de <I>Bman</I>
</B>
<P>
<IMG SRC="Images/anim/simpson.gif"><P>
</CENTER>
</HTML>
Bien, j'espère que tout ça a été très clair - enfin,
j'ai fait de mon mieux pour être le plus explicite possible.
J'espère que vous ferez tous de très belles pages.
Si au cours de vos progression (en allant examiner les sources
d'autres pages) vous découvrez de nouvelles fonctions en
sachant vous en servir faites m'en part afin que je les
incorpore dans ce guide.
Bien sûr il y a d'autres fonctions que je n'ai pas abordées
(Vspace; hspace, break=clear, margin; etc...) car je n'ai pas
encore testé leur fonctionnement et que certaines d'entre
elles ne me sont pas très claires.
|
