In English?

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 : i₀ & n²

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

      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).

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

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

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.

Les tableaux ou grilles en HTML :

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

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

Avec la CSS class="top"

Avec la CSS class="middle"

Sans alignement (en bas)

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

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

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

Différentes adresses sur le HTML :

Pages d'exemples et de documentation :

• Très bonne documentation sur le HTML4.
• Très bonne documentation sur les feuilles de style (CSS).
• OpenWeb.eu.org pour les standards du web.
• Bibliothèque complète en Français.
• Á lire : les exemples et Conseils d'Antoine MOREAU.
• Toutes les documentations officielles sont sur le site du W3C.

Éditeurs (pour développements intensifs) :

• Vim (celui que j'utilise).
• XEmacs (encore + puissant).

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.

Autres outils pour votre Web :

• L'indispensable validator du W3C (organisme officiel de normalisation du web, c'est eux qui valident tous les standards du web).
• Et enfin, s'il vous manque encore quelque chose, demandez à Google, je le connais bien, il vous aidera sûrement !  (-;