In English ?English flag

Petite leçon de HTML

!Si vous voulez apprendre le langage HTML, il vous suffit de regarder le source de cette page (menu "Affichage").

HTML : HyperText Markup Language, ce qui pourrait se traduire en Français par : langage permettant de mettre en page des textes avec des hyperliens et ceci à l'aide de balises. Je sais, c'est un peu long (j'en ai rajouté) mais je crois que c'est important de bien le définir.

Exemple de menu utilisant des ancres (#), cliquez et vous y êtes :

  1. Styles de polices de caractères.
  2. Titres et leurs 6 niveaux.
  3. Mise en page (alignement et indentation).
  4. Tableaux.
  5. Insertion d'images.
  6. Formulaires : Boutons, aires de texte, cadres, ...
  7. Autres adresses d'apprentissage du HTML.

Les ancres sont des sortes de repères à l'intérieur de pages.

Quelques caractères spéciaux : é è ê à ô ù ï ñ É ç æ œ < > « " » & ­ © ® ™ €

Si vous voulez revenir à ma page d'accueil, cliquez sur ce qui est souligné en bleu.

Si vous voulez me poser une question ou simplement me laisser un message par E-mail, cliquez sur l'animation en bas du menu à gauche ... ou alors, cliquez ICI.


Différents types d'affichage :

Attention, il est préférable d'utiliser des styles (CSS) pour gérer ce qui suit !

Gros (BIG) & petit (SMALL)
Citation (CITE)
Mise en valeur (EM)
Du code (CODE)
"Clavier" => Keyboard (KBD)
"Literal characters" (SAMP)
Texte barré (STRIKE) ... ne fonctionne que sous Netscape à moins d'utiliser des styles.
Forte mise en valeur (STRONG)
Nom de variable (VAR)
Indices & exposants : i0 & n2

Gras (B), Italique (I) ou Souligné (U).
Largeur fixée (TT ... ou PRE => voir tableau ci-dessous)

E-mail de PixEye (ADDRESS) :
jmoreau@bigfoot.com
Pratique pour les tabulations :
    Nom		(PRE)	!	Surnom
    ---------------------------------------
    Julien M.		!	PixEye
  
Enfin, les options du tag FONT pour changer de :
- police de caractères (FACE),
- ou de couleur (COLOR).
Retour en haut de la page.

Les différents niveaux de titres (Hearders) :

Attention : la feuille de style appelée aussi Cascading Style Sheet (CSS dans l'entête des sources de cette page) peut modifier la mise en page.

H1

H2

H3

H4

H5
H6
Retour en haut de la page.

Différents "tags" pour mettre en forme un texte :

BR sert à retourner
à la ligne.

Un tag DL englobe tout ça :

<- DT pour le ou les terme(s) à définir
<- DD pour la ou les définition(s)

C'est le seul moyen de faire UNE tabulation (éviter les &nbsp; en série). Je vous conseille donc de regarder la section un peu + bas sur les tabeaux.

Retour en haut de la page.

Les tableaux sont très utils en HTML :

Résultats : Profits Dépenses Solde
Balance
Résultats 1er semestre :  24,000.00 18,000.00 6,000.00
Résultats 2nd semestre :  27,000.00 17,000.00 10,000.00
Totaux :  51,000.00 35,000.00 16,000.00

Comme quoi il n'y a pas qu'Excel qui fait de beaux tableaux !  (-;

Retour en haut de la page.

Différentes manières d'inserer un texte à côté d'une image :

Will SmithAvec ALIGN=Top

Will SmithAvec ALIGN=Middle

Will SmithSans alignement (en bas)

Will Smith Image clicable (le lien est autour <A>).

Will Smith Image clicable avec mapping (seulement sur son visage et en haut).

Tete Plafond Autour Retour en haut de la page.

Différents types de boutons, aires de texte et cadres :


Saisie de

Boutons à cocher :

Boutons radio (un seul coché possible). Le sexe par exemple :

Retour en haut de la page.


Différentes adresses sur le HTML :

Pages d'exemples et de documentation :

Éditeurs (pour développements intensifs) :

J'ai malheureusement perdu la trace des autres mais ces 2 là devraient largement faire l'affaire. Ils fonctionnent sous Linux mais aussi sous Windows, Unix et bien d'autres systèmes d'exploitation.

Boîte à outils

Autres outils pour votre Web :

Valid HTML 4.0! Valid CSS!
Retour en haut de la page.