- Introduction
- Les bases
- HTML avancé
- Récapitulatif
Préambules
Avant de commencer, voici encore quelques petites recommandations.
Qu'est ce que l'HTML ?
Le langage HTML n'est pas un langage de programmation proprement dit !
Ce sont "simplement" des balises pour mettre en forme (avec des liens, en tableau, ...) du texte et des images !
Qu'est ce qu'une balise ?
Une balise est une "instruction" comprise entre crochets < > qui possède un nom et parfois des attributs.
Presque toutes les balises doivent être ouvertes puis refermées. On retrouvera donc souvent une balise de début et une balise de fin. La balise de fin porte le même nom que la
balise de début à l'exception du nom du la balise qui est précédé du signe /. Nous aurons donc par exemple : (ouverture) <XYZ> et (fermeture) </XYZ>.
Le nom de la balise (contenu entre les crochets) n'est pas sensible à la casse, il peut être écrit indifféremment en majuscule, en minuscule ou un mélange des 2.
De quoi avez-vous besoin ?
- un navigateur (Internet Explorer, Netscape, Mozilla, Opera...)
- un éditeur HTML (==> Notepad, le "simple" Bloc-notes de Windows fera très bien l'affaire !)
Pour commencer le Bloc-notes est très bien, vous devrez taper vous même le code et ainsi vous pourrez vous familiariser beaucoup plus vite avec les balises.
A la fin du cours nous parlerons d'autres éditeurs, mais pour les utiliser il faut quand même connaître les bases du language HTML.
- du temps et de la patience (Rome ne s'est pas faite en un jour....)
- vous n'aurez pas besoin d'être connecté à Internet pour créer votre site !
Votre première page HTML
Voici enfin le moment de créer votre première page HTML.
Commencez par ouvrir le Bloc-notes (ou un autre éditeur HTML) pour pouvoir taper le code.
Voici le code à taper :
|
<HTML> |
Enregistrez le document au format HTML (*.html ou *.htm).
Pour cela, dans la case "Nom", tapez : index.html
Et dans la case "Type", choisissez Tous(*.*) dans la liste déroulante.
Voila votre page est enregistrée.
Vous pouvez ouvrir votre navigateur et visualiser votre première page.
Le seul texte qui apparaîtra sera "Bonjour, voici ...".
Explications des nouvelles balises utilisées :
- <html> et </html> : la première informe votre navigateur qu'il va afficher une page HTML. Cette balise
doit être la première de votre code. La seconde est la balise de fin. Elle referme la première. (remarquez le / devant le mot contenu entre crochets). Elle doit être la dernière de votre code
HTML et signifie la fin de votre code HTML.
- <head> et </head> : la première ouvre l'entête de votre page. Cet entête comprend pour l'instant le
titre de votre page. Cette balise est toujours placée juste après la balise <html>. La seconde, referme l'entête de votre page (remarquez encore une fois le / devant le mot entre
crochets).
- <title> et </title> : la première ouvre la partie titre de votre page. Ce titre sera placé dans la
barre tout au-dessus de votre navigateur. La seconde referme la première encore une fois en plaçant un / devant le mot entre crochets. La balise "title" doit être ouverte puis refermée à
l'intérieur de la balise "head". C'est à dire qu'il faut que la balise "title" doit être ouverte puis refemée avant que le balise "head" ne soit refermée.
- <body> et </body> : la première ouvre le début du corps de votre document. C'est là que vous allez
placer textes, images et tout ce que contiendra votre page. Cette balise doit se situer après la balise de fermeture de l'entête (=> </head>). La seconde referme la première et
maintenant je suppose que vous avez compris le principe pour fermer une balise...
Première constatation :
- Le code d'une page web est composé de 2 parties, l'en-tête de la page (HEAD) et le corps (BODY). Seul le corps de la page est affiché à l'écran (dans votre
première page, il n'y a que la phrase "Bonjour,..." qui s'est affichée).
Mise en forme : les couleurs
Maintenant que nous savons comment créer une page très simple, nous allons pourvoir
mettre le texte en forme.
Commencons par mettre le texte en couleur.
|
<HTML> |
Ce qui donnera une page dont le contenu sera comme ceci :
Rouge
Rouge
Vert
Vert
Bleu
Bleu
Jaune
Jaune
Vous pouvez également mettre le fond de l'écran en couleur comme sur ce site (plutôt qu'en blanc par défaut).
|
<HTML> |
Vous avez pouvez maintenant enregistrer votre page dans la Bloc-notes sous le même nom. Pas besoin de fermer votre navigateur puis de
réouvrir votre page. Il suffit de réactualiser la page en cliquant sur soit Refresh, soit Rafraîchir ou encore Actualiser selon le navigateur... (ou simplement la touche F5)
Explications des nouvelles balises utilisées :
- <br> : cette
balise permet de faire un saut de ligne. Lorsque vous écrivez du texte dans une page web, il y a un retour automatique à la ligne lorsque le texte atteint le bord droit de l'écran. Avec la balise
<br>, vous pourrez faire des sauts de ligne à votre guise. Un "BR" correspond à un saut de ligne, pour laisser une ligne blanche entre 2 paragraphes par exemple il faut placer 2 "BR"
(==> <BR><BR>). Il n'y a pas de balise de fin !
- <font> et
</font> : elles permettent de modifier l'apparence du texte. Elle doit recevoir des informations provenant d'attribut(s) pour connaître la mise en forme à appliquer. Pour
l'instant, nous avons juste vu l'attribut "color" qui permet de mettre le texte en couleur. Les couleurs les plus fréquentes peuvent être nommée explicitement en anglais (red, green, blue,...)
sinon il faut placer le code Hexadécimal de la couleur voulue. Vous trouverez la liste des principaux codes couleurs sur notre page Codes couleurs. La couleur du texte est par défaut noir (#000000 ou black).
- nous avons également vu l'attribut "bgcolor" dans <BODY> : "bgcolor" (==>background color : couleur de fond) permet de mettre le
fond de l'écran en couleur tout comme le fait "color" pour le texte. C'est le même principe pour le code des couleurs. La couleur du fond est par défaut blanc (#FFFFFF).
Petites "définitions" :
- Un attribut est un paramètre qui fournit des indications à une balise. Il possède un nom et très souvent une valeur à préciser (nom
= "valeur"). Il se rajoute dans la balise de début, c'est à dire toujours entre les < > après le nom de la balise (par exemple : <font color="#ff0000">.
- Le code Hexadécimal qui permet de définir une couleur est composé de 6 caractères précédés de #. Ces 6 caractères définissent la
"teneur" en rouge, vert et bleu (les couleurs de bases) de la couleur a former. Il n'y a que 16 caractères possibles : 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
Vous trouverez les codes les plus courants sur cette page. Mise en forme : police et taille
Nous allons maintenant faire varier la taille et la police de caractère du
texte.
|
<HTML> |
Ce qui donnera une page dont le contenu sera comme ceci :
Taille 7
Taille 6
Taille 5
Taille 4
Taille 3 (par
défaut)
Taille 2
Taille 1
Taille +4
Taille +3
Taille +2
Taille +1
Taille par
défaut ( => 3 )
Taille -1
Taille -2
Taille 4 en Verdana
Taille 2 en Comic sans MS
Taille normal en Arial si il existe sinon en Times New Roman en couleur #336699
Vous avez pouvez maintenant enregistrer votre page sous le même nom (ou un autre) et visualiser le résultat dans votre
navigateur.
Explications des nouveaux attributs utilisés :
- l'attribut "size" : "size" (==> taille) permet de modifier la taille du texte compris entre <font> et
</font>.
Vous avez le choix entre donner un nombre entre 1 et 7 (par
défaut => 3) ou bien donner une valeur de "décalage" par rapport à la taille par défaut du navigateur ("-2", "-1", "+1", "+2", "+3", "+4").
- l'attribut "face" : "face" (==> apparence) permet de choisir la police dans laquelle le texte sera affiché.
Vous pouvez préciser plusieurs noms de police séparés par des ','. Si la navigateur ne
reconnaît pas le premier nom, il essayera avec le suivant...Si il ne reconnaît aucun nom, il utilisera la police par défaut du navigateur utilisé.
Petites remarques :
- Vous pouvez tout à fait cumuler les attributs dans une balise (séparés par un espace) ! Dans le code ci-dessous nous combinons 3
attributs :
<FONT color="#ff0000" size=4 face="Verdana">Taille 4 en
rouge en Verdana</FONT>
- Inutile d'utiliser des polices très spéciales car si les visiteurs ne l'ont pas sur leur ordi, le navigateur ne la reconnaîtra pas
et donc ne l'utilisera pas.
Mise en forme : centré, gras, ...
Nous allons à présent voir comment mettre du texte en gras, italique,....
|
<HTML> |
Ce qui donnera une page dont le contenu sera comme ceci :
texte en gras
texte en italique
texte
souligné
texte centre
texte centré en gras
texte en rouge, gras, centré de taille 2
Vous avez pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur.
Explications des nouvelles balises utilisées :
- <b> et
</b> : écrit le texte en gras.
- <i> et
</i> : écrit du texte en italique. en gras.
- <u> et
</u> : souligne du texte. Evitez d'utiliser trop cette balise car un texte souligné peut être confondu avec un lien et ça peut étre gênant pour le visiteur.
- <center> et
</center> : centre le texte par rapport à l'écran.
- <!-- et
--> : Ces balises permettent de commenter votre code. Le texte compris entre ces balises ne sera pas pris en compte par le navigateur ( ==> pas affiché !). Le
commentaire peut s'étendre sur plusieurs lignes. Faites attention à bien fermer le commentaire (==> "-->") sinon la fin de votre code ne sera pas affichée !.
Remarques importantes :
- Attention à bien refermer vos balises (avec la balise de fin) sinon la suite du texte aura également les
propriétés de la balise non refermée. Par exemple si vous oubliez de refermer la balise pour placer des commentaires (<!-- ... -->), la fin de votre code ne s'affichera pas !
- Si vous voulez cumulez des balises, pour par exemple mettre un texte en gras, en italique et centré, il faut bien faire
attention à l'ordre des balises pour les refermer !
Voici ce qu'il ne faut pas faire :
<B><I><CENTER>mon texte</I></B</CENTER>
Il faut les refermer dans l'ordre inverse de l'ouverture :
<B><I><CENTER>mon texte</CENTER></I></B>
C'est le même principe pour toutes les balises !
Les paragraphes
Voici maintenant quelques traitements particuliers pour les textes.
|
<HTML> |
Ce qui donnera une page dont le contenu sera comme ceci :
Paragraphes :
Vous pouvez former des paragraphes si vous le souhaitez ce qui vous permetra d'aligner du texte soit à gauche (alignement par défaut soit à droite, au centre ou encore en
justifié)
texte aligné à droite
texte aligné au centre
texte aligné à gauche
texte justifié : blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla
retrait de texte :
votre texte
Titres :
Titre en 1
Titre en 2
Titre en 3
Titre en 4
Titre en 5
Titre en 6
Vous pouvez maintenant enregistrer votre page et visualiser le résultat dans votre navigateur.
Explications des nouvelles balises utilisées :
- <p> et </p> avec l'attribut "align" : permet de créer un paragraphe avec du texte aligné soit à gauche ("left"), à droite ("right"), au centre ("center") ou en justifié ("justify").
- <blockquote> et </blockquote> : permet de
décaler un bloc de texte par rapport au bord gauche.
- <h1> et </h1> : permet de définir des titres. Il
existe 6 types de titres numérotés de 1 à 6. Vous pouvez utiliser le même attribut "align" que celui de <p>.
Les listes
Pour présenter une certaine arborescence dans un sommaire par exemple, il est
souvent pratique d'utiliser une liste. Ces listes seront numérotées automatiquement...
|
<HTML> |
Ce qui donnera une page dont le contenu sera comme ceci :
Chapitre 1 : type disque plein (par défaut)
· Page 1
· Page 2
· Page 3
Chapitre 2 : type disque vide
o Page 4
o Page 5
o Page 6
Chapitre 3 : type carré
§ Page 7
§ Page 8
§ Page 9
Chapitre 4 : liste numérotée
1. Page 10
2. Page 11
3. Page 12
Chapitre 5 : liste numérotée avec les lettres de l'alphabet
a. Page 13
b. Page 14
c.
Page 15
Explications des nouvelles balises utilisées :
- <ul> et </ul> avec l'attribut "type" : indique le début et la fin d'une liste de puces (carrées, circulaires, en disque pleins).
- <ol> et </ol> avec l'attribut "type" : indique le début et la fin d'une liste numérotées (avec des lettres ou des chiffres).
- <li> : désigne un nouvel élément d'une liste.
)
)
