1. Page minimale HTML:

Ouvrir le bloc-notes et écrire le texte de l'image suivante. Observer la structure de ce code. Les crochets < > et leur contenu constituent des balises. Ces balises vont par paire <> pour le début et </> pour la fin. Le corps de votre document sera placé entre <body> et </body>.

Enregistrer ce code dans le répertoire souhaité sous le nom souhaité avec l'extension .html

On notera que le titre du document n'est pas obligatoirement le même que celui du fichier.

 Aller dans le répertoire choisi, ouvrir le fichier html précédemment enregistré. Regarder la barre de titre. Pour visionner le code que vous avez tapé, il faut aller à "Affichage" puis "Source": le bloc-notes s'ouvre, montrant le code html. S'entraîner à modifier le titre en n'oubliant pas d'enregistrer les modifications ("Enregistrer") puis d'actualiser la page html (clic droit sur la page puis "Actualiser" ou touche F5 du clavier).

2. Titre et polices:

Ouvrir de nouveau le bloc-note et écrire le texte:

Observer le résultat et modifier la police et/ou sa taille dans une même phrase ("Affichage" puis "Source" faites vos modifications et enfin "Enregistrer"). Ne pas oublier d'actualiser la page html (clic droit sur la page puis actualiser ou touche F5 du clavier).

3. Couleurs du texte et de l'arrière-plan:

Voici un exemple à taper dans le bloc-notes:

Pour essayer d'autres couleurs aller à: http://www.netalya.com/fr/palette.asp

4. Les accents et le retour à la ligne:

Ecrire dans le bloc-notes:

5. Insérer une image: enregistrer l'image suivante grâce à un clic droit et la placer dans le même répertoire que vos documents html.

S'entraîner avec d'autres images de votre choix (documents personnels, internet...).

6. Créer un lien:

Vous souhaitez renvoyer le lecteur vers votre page "titre-polices.html". Copier le texte suivant dans le bloc-notes:

 Vérifier.

7. Créer un tableau: on veut dessiner ce tableau à 2 lignes et 5 colonnes, bordure bleue taille 3, cellules de différentes tailles et de couleurs différentes, contenant un nombre différent de lignes dans les cellules, un gif animé, un lien vers un site internet , un lien d'une petite image vers une image agrandie.

a

b

c

d

e

f

g

h

i

j

Site Physique

k

l

m

n

o

p

 Copier d'un clic droit, dans votre répertoire, l'image de la boussole, la petite image du Mont-Blanc puis la grande image à laquelle renvoye le lien.

Puis écrire le code suivant dans le bloc-notes:

 Sauvegarder avec l'extension .html. S'entraîner à faire des modifications dans la source et observer le résultat.

Ecrire des pages de modèles pour faciliter le travail ultérieur.

8. Page type:

aller à la page suivante, cliquer sur "Affichage" puis "Source", copier le code sur le bloc-notes

ou télécharger le code depuis ceci