Titre

Terminale SIG.TP html

TP HTML, série d'exo n°1.

Ces exercices sont progressifs et s'enchaînent. Les faire dans l'ordre.

Xo 1 : Observation

Afficher le code de cette page : click droit > afficher le code source.

Wow! y a du monde ... pas de problème, on retrouve l'architecture globale (html, body, section, article, ...) plus de nouvelles balises.

Faire une liste de quelques balises en indiquant leur rôle
retrouver ces balises dans une page d'un site quelconque (ne pas tenir compte des indications dont vous ne trouvez pas le sens).

(l'observation est la première étape de l'apprentissage, l'imitation est la seconde ...)

Xo 2 : hello world

Créer le fichier bonjour.html vide avec l'explorateur de fichier. Y écrire la phrase : "bonjour à tous".

Sauvegarder le fichier et le rouvrir avec un navigateur. Vous devriez avoir obtenir quelque chose comme ci-contre.

hello world

Vous avez réalisé votre première page web

Xo 3 : Les balises html de base

Henri IV de France
Henri IV, né Henri de Bourbon et surnommé Henri le grand 3 le 13 décembre 15534 à Pau et assassiné le 14 mai 1610 à Paris, fut roi de Navarre (Henri III de Navarre, 1572-1610) puis roi de France (1589-1610), premier souverain français de la branche dite de Bourbon de la dynastie capétienne.
(source : Wikipédia, Henri IV de France).

Créer le fichier henri.html vide avec l'explorateur de fichier. Y copier le contenu de l'encart et mettez le en forme.

Le titre sera grand et souligné, la signature en italique, les noms propres en gras.

Liste des balises à utiliser :

b bold : texte en gras
h1 header : titre de chapitre. Il existe les niveaux H1 à H5, H1 est le plus grand.
i italic : texte en italique
u underline : texte souligné
br break : saut de ligne

Xo 4 (long): Bis

Créer le fichier murphy.html et copiez-y le texte du fichier murphy.txt. Mettez le texte en forme comme dans l'image bleue ci-contre.

Vous y ajouterez l'image N&B d'Edward Murphy en encart (click droit > enregistrer sous ...).

Balises à utiliser:

Balises de mise en forme du texte vues précédemment,
center center : centrer le texte
h1 ou h2 : titres.
li list item : article, ligne de liste.
p paragraph : bloc de paragraphe
ul unordonned list : liste à puces
img image : image. Il faut utiliser le paramètre src pour indiquer le nom de l'image (note, c'est un chemin ou url relatif).

La longueur de cet exercice sera réduite en utilisant des rassourcis claviers Windows (ctl+s, alt+tab, ctl+c, ctl+v, début, fin, ctl+droite/gauche, ctl+maj+droite/gauche, ...) et de npp (ctl+d=doubler une ligne, ctl+maj+haut/bas=déplacer une ligne)

Xo 5 : Liens hypertexte

Créer deux pages : source.html et cible.html.

Ces deux pages contiennent, respectivement, les codes suivants (à copier) :

Page source.html :

<h1>Page source</h1>

ET cible.html :

<h1>Page cible</h1>

Balise(s) nécéssaire(s) :

a anchor : lien hypertexte vers une autre page, un autre site
Attribut href (hypertext reference) obligatoire : contient l'URL de la page cible

Xo 6 : Créer un menu de navigation entre les pages

jusqu'à présent, nous avons les pages : bonjour.html, henri.html, murphy.html, source.html et cible.html

En utilisant une table et des liens, créer la page index1.html contenant les liens vers les pages déjà créées. Ne pas oublier la page en cours.

Ce premier "menu" sera fait grâce à une table.

Tester.

Mettre en forme le texte en colorant la table avec bgcolor=silver et une ligne sur deux avec bgcolor=GoldenRod (vous pouvez changer de couleur).

Tester.

Balise(s) nécéssaire(s) :

table création de la table
tr ligne de table
td colonne de table (une cellule dans une ligne)
th colonne d'entête de table

Ajoutons du style embarqué.

Effacer les bgcolor et utiliser la propriété css pour modifier la couleur du fond des lignes ou des cellules avec <tr style='...'>.

Style(s) possible(s) :

propriété	description
background:...;	Couleur du fond, ...=est une couleur nommée ou codée (#fff=blanc, #000=noir)
color:...;	Idem pour la couleur du texte
font-weight:bold;	Texte gras
font-size:XXpx;	Taille du texte, XX est le nombre de pixels (/ex. 14px)
text-align:center;	Centrer le texte dans la cellule

Xo 7 : Mise en forme de la page : Créer l'index

Problème d'accents ? essayez de mettre qquchose comme ça dans head :
<meta charset="UTF-8">

Nous allons (enfin) réaliser l'index, la page d'accueil de notre site. Il ne sera pas terrible, mais c'est un début et 'faut bien commencer qqpart ...

Créons la page index.html qui contiendra une structure comme vue dans le 1er cours (à copier).

Nous y mettrons :

Le titre de notre site (balise title),
Le logo (img) et le titre (h1) dans le header de la page,
Le menu horizontal, pour changer (voir + loin) dans la balise nav,
Le même menu vertical dans une balise aside et
Le contenu de la page dans un article de la 1ère section,
Le pied de page dans le footer.

Effacer toutes les balises inutiles

Le menus horizontal est une reprise du menu vertical, adapté (une seule tr au lieu de 5).

Le logo est une image au choix. Attention à la taille ... ou rectifiez la avec style="... width:60px;"

Pour les balises à utiliser : voir les exercices précédents.

Terminer en uniformisant la présentation pour que le visiteur du site ne soit pas désorienté par le changement de page.

Il faut donc copier/coller la structure dans chaque page déjà existante.