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 avec : 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.


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)
Texte barré (DEL un texte supprimé)
Mise en valeur (EM)
Du code (CODE)
"Clavier" => Keyboard (KBD)
"Literal characters" (SAMP)
Texte barré (S pour un texte barré)
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 SPAN pour changer de :
- police de caractères (font-family),
- 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 ou grilles en HTML :

Légende
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

En HTML aussi, on peut faire de beaux tableaux !  (-;

Retour en haut de la page.

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

Will SmithAvec la CSS class="top"

Will SmithAvec la CSS class="middle"

Will SmithSans alignement (en bas)

Will Smith Image clicable : le tag de lien (A) est autour du tag de l'image (IMG).

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

Tete Plafond 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.