|
|
Pour visionner le code HTML sous Dreamweaver,
il vous suffit de cliquer sur l'icône en haut à
gauche de votre fenêtre.
Il est également possible de visionner le code d'une
page Web en ligne par le menu affichage de
votre navigateur. Il vous suffit de demander l'affichage de
la source de la page
|
| Nous verrons ici comment
comprendre ce code, non comment l'écrire "mot à
mot". Ce tutorial n'a pas pour ambition de faire de vous
des "programmeurs" mais des amateurs éclairés,
capables de comprendre et corriger les erreurs pouvant survenir
sur une page HTML en cours de création. |
1/ Le "corps" et
la "tête"
Une page HTML "vide" se presente comme cela :
|
 |
<html>
correspond au début de la page
<head> débute la balise
head ( tête ) qui contient des informations "invisibles"
sur la page, notamment toutes les indications relatives
au référencement et au javascript ( espèce
de "patois" du HTML ).
La balise <title> ( le titre
) vous permet de nommer votre page internet. Comme nous
le verrons plus loin, c'est une étape important
du référencement.
</head> ferme cette partie de
la page. A quelques exeptions prés ( que nous
verrons ), toute balise ouverte doit être fermée.
<body> ouvre le "corps"
de la page. Cette partie contiendra tout ce qui va être
visible à l'écran par l'internaute.
</body> ferme le "corps".
</html> ferme la page.
|
|
|
2/ Le texte
Le texte en HTML peut se présenter
de différentes façons, tout dépends des
options de mises en pages que vous utilisez. En simplifié,
avez vous basé votre construction de page sur des tableaux,
des calques ou à la "va comme je te pousse"
?
|
|
Voici par exemple comment
se présentera la page étudiée précédemment
si nous tapons du texte sans aucune option de mise en
page : celui ci se placera tout simplement entre <body>
et </body>. Il utilisera alors ce que Dreamweaver
appelera la police "par défaut"
qui est tout simplement celle qui est réglée
dans les options de votre navigateur pour afficher le
texte.
|
|
|
|
|
Il est possible de donner
au texte une couleur particuliere à l'écran
qui n'est pas celle "par défaut".
Pour cela on insere le code de la couleur dans la balise
<body> sous la forme ci contre ( ici on oblige
le texte à être noir ). Le code des couleur
peut vous être donner par Photoshop dans son sélecteur
de couleur si celle que vous choisissez n'appartient
pas au nuancier de votre éditeur de pages. La
couleur est alors définie pour l'ensemble de
la page.
|
|
|
Mais on peut aussi
définir la couleur "au cas par cas",
dans ce cas on insérera la balise <font>
( police ) avant le texte à coloré.
Dans le cas présent, le texte général
est en noir et les deux derniers mots en rouge. Attention,
la ligne doit être close par </font> et
les sauts à la ligne ne sont présent
que dans le code. Ici, le texte visible se trouvera
sur la même ligne.
|
|
|
| Enfin, il est possible
de donner plusieurs caractéristiques à la balise
<font>, comme dans l'exemple suivant : |
|
|
|
Ici nous disons au texte d'être de
taille ( size ) "1" sur l'échelle du navigateur
et de police ( face ) "Verdana". De plus vous voyez
que pour des couleurs simples il est possible de remplacer
le code par le nom ( en anglais ) de la couleur ( ici rouge
). Attention, souvenez vous bien, que ce langage est un langage
universel, donc en anglais !
|
|
Autre remarque importante, elle concerne
les caractères accentués. Si vous avez à
taper ce genre de caractères, regardez bien ce que
cela donne dans le code, et allez toujours les corriger en
mode création. Un exemple avec le "é":
|
|
|
|
Voilà ce que nous pouvons dire pour
le texte de façon simple. Nous aborderons les problème
de saut de ligne, de tableau et de paragraphe dans une autre
partie.
|
|
3/ Les images
De la même façon que le texte,
les images supportent de nombreuses mises en page. Nous nous
contenterons de voir ici les caractéristiques principales
que peut revétir la balise image.
Pour cela nous allons reprendre notre page vierge du début
et y insérer une image au lieu d'un texte. Voici comment
elle se présentera :
|
|
|
|
La balise <img>, contrairement
au texte, est une balise unique ( sans fermeture ) contenant
toutes les informations : La source ( src ) de l'image, c'est
à dire l'endroit ou celle ci est stockée, sa
largeur ( width ) et sa hauteur ( height ).
C oncernant la source de l'image, je vous rappelle qu'il est
primordial de bien enregistrer toutes les images du site dans
un dossier "images" et stocké dans le même
dossier que les pages HTML ( ce dossier est appelé
"racine du site" par les webmasters )
|
|
La balise <img>
posséde une carastéristique vous permettant
de sous-titrer vos image. En insérant la fonction
"alt" à l'intérieur de la balise,
comme ci contre, un petit encart contenant votre description
apparaitra si le pointeur de la souris reste fixe sur
l'image suffisamment longtemps. Cette fonction permat
également un meilleur référencement
de l'image et de la page en général. Mais
il ne faut pas en abuser.
|
|
|
|
Voilà pour les fonctions les plus
évidentes du HTML. Dans la partie suivante, nous verrons
les différentes options de mises en page.
|
|
|
