8/6/2019 Apprendre Le HTML

1/8

1

APPRENDRE LE HTML

SANCE 1

Activit 1Ouvrir une page quelconque sur Internet. Affichage Source / Code source de la page balise racine ; indique que le langage utilis dans le document sera le HTML

textes,images

fin du document

Activit 2 Dmarrer

Tous les programmes Accessoires Bloc-notes (= diteur de texte)Taper :phrase 1

Fichier Enregistrer sousEnregistrer le fichier dans son dossier perso sous le nom Page1.html.Fermer la fentre Bloc-notes.Ouvrir son dossier perso ; fichier Page1.html pour afficher la page web.Fermer la page.

Activit 3Ouvrir le fichier Page1.html dans Bloc-notes afin daccder au code source de la page : D

Fichier Page1.html Ouvrir avec Blocs-notesTaper une deuxime phrase sous la premire.Enregistrer les modifications ralises ( Fichier Enregistrer).

= corps de la page tout ce qui se trouve entre et est visible sur la page Web.

< > = balise ouvrante = balise fermanteSauf exception (
, ) chaque balise de dbutdaction < > correspond unebalise de fin daction .

= en-tte informations invisibles au visiteur (titre except)destines aux navigateurs et aux moteurs de recherche

= code source

8/6/2019 Apprendre Le HTML

2/8

2

Rduire la fentre Blocs-notes.Ouvrir la page web Page1.html.Obs : la deuxime phrase est ct de la premire, et non en dessous. nc. mettre entre les deux lignes une balise indiquant quil faut passer la ligne (balise
)

phrase 1
phrase 2 Fichier EnregistrerRduire la fentre Blocs-notes.Actualiser ( Actualiser ou F5) la page web Page1.html pr faire apparatre le rsultat desmodifications.

Activit 4Mettre la premire phrase en italique ; ajouter une troisime phrase en gras et en italiquesous les deux prcdentes (balises et ).phrase 1

phrase 2
phrase 3

Activit 5Chercher sur Google dautres exemples de balises HTML. : texte soulign : texte centr : texte dfilant : lien : tableau

rle des balises = structurer le texte dudocument HTML (i.e. indiquer ce qui esttitre, paragraphe, tableau, etc.) afin quele navigateur puisse en interprtant cecode afficher les lments de la pageweb

8/6/2019 Apprendre Le HTML

3/8

3

: titre de niveau 1 : titre de niveau 2 : titre de niveau 3 : titre de niveau 4 : titre de niveau 5 : titre de niveau 6etc.

SANCE 2

Activit 1Afficher le titre de sa page HTML (par ex. Premier document ) dans la barre de titre dunavigateur.

Premier documentphrase 1

phrase 2
phrase 3

Activit 2Mettre le fond dcran en couleur, en jaune par ex.Premier document

= balises de texte : pour obtenir des titresde diffrentes tailles (h1h6)

8/6/2019 Apprendre Le HTML

4/8

4

phrase 1
phrase 2

phrase 3

La balise a de nombreux arguments, par ex. : text : texte en rose

alink & vlink : < body alink=purple vlink=blue>

liens activs en violet ; liens dj visitsen bleu leftmargin : marge gauche de 100 pixels de large topmargin : marge du haut de 50 pixels de large background : cf. activit 3Activit 3Utiliser une image JPEG comme fond dcran.Commencer par enregistrer une photo sous le nom photo.jpg dans son dossier perso.Premier documentphrase 1
phrase 2
phrase 3

8/6/2019 Apprendre Le HTML

5/8

5

SANCE 3 & 4

Activit 1Revenir un fond dcran uni (cf. activit 2 sance 2).Ajouter une image sur la page ; en fixer les caractristiques, par ex. : longueur = 204 pixels, largeur = 152 pixels, avec bordure () ; longueur = 204 pixels, largeur = 152 pixels, le nom apparat lorsque lon passe lasouris dessus, pas de bordure ().Premier document

phrase 1
phrase 2
phrase 3

Activit 2

Ajouter un tableau sur la page ; en fixer les caractristiques, par ex. : tableau sur toute la page, sans bordure () ; tableau sur la moiti de la page avec une bordure rouge ; texte en bleu et centr ().

Premier document

En-tte 1 En-tte 2 En-tte 3Cellule 1.1 Cellule 2.1 Cellule 3.1Cellule 1.2 Cellule 2.2 Cellule 3.2Cellule 1.3 Cellule 2.3 Cellule 3.3

8/6/2019 Apprendre Le HTML

6/8

6

phrase 1
phrase 2

phrase 3

8/6/2019 Apprendre Le HTML

7/8

7

phrase 1

phrase 2
phrase 3

En-tte 1En-tte 2En-tte 3Cellule 1.1Cellule 2.1

Cellule 3.1Cellule 1.2Cellule 2.2Cellule 3.2Cellule 1.3Cellule 2.3Cellule 3.3

Lien vers la page 2
Lien vers Google

8/6/2019 Apprendre Le HTML

8/8

8

SANCE 5

Ouvrir KompoZer.En bas 3 onglets pour linstant on va uniquement utiliser les onglets Conception et Source.Taper 3 phrases dans Conception en gras et/ou en italique et/ou en soulign.

Aller dans Source pour reprer les balises de style correspondantes.Activit 1Crer une rgle de style pour les phrases crites en h2.Activit 2Crer une rgle de style pour les phrases crites en h1.Activit 3Crer une rgle de style body pour mettre le fond en couleur.

Sances suivantes : travail partir du polycopi Utilisation du logiciel KompoZer .