4.2.1 Ressources d’apprentissage
Pour avoir un aperçu rapide des principales balises HTML au moment de faire l’exercice pratique, télécharger et imprimer le document en pièce jointe.
Ressources additionnelles
- Guide HTML et XHTML complet :
http://www.erwanhome.org/web/guide-... - Guide des couleurs hexadécimales :
http://html-color-codes.com
http://www.december.com/html/spec/c...
http://www.commentcamarche.net/html... - Banque de fonctionnalités javascript :
http://www.dynamicdrive.com
4.2.2 Exercice
Le/la stagiaire doit coder « à la mitaine », à l’aide d’un éditeur de texte, un document .htm ou .html nommé proprement (sans espace, accents ou caractères spéciaux).
La page doit contenir les éléments suivants :
- un titre ;
- deux niveaux d’en-tête ;
- deux paragraphes au minimum ;
- du texte en caractère gras et italique ;
- un bloc en retrait (citation) ;
- un hyperlien absolu (vers un site externe) avec titre et devant s’ouvrir dans une nouvelle fenêtre.
- une liste ordonnée (numérotée) ;
- une liste non ordonnée ;
- une table de trois rangées et quatre colonnes ;
- une image (avec spécification des dimensions et texte desctiptif). L’image choisie doit être sauvegardée au préalable dans un répertoire « img » ou « images » créé à cette fin.
NOTE : Il n’est pas nécessaire que le texte des paragraphes, listes et tables soit pertinent. Il est possible de copier-coller du Lorem Ipsum (faux texte) !!!
NOTE : Le fichier .html et les dossiers liés devront être conservés pour le lendemain (exercice avec les feuilles de style).
4.2.3 Exercice pour les plus avancés
- Essayer de modifier la table avec l’attribut colspan ;
- Insérer une couleurs de fond de table ou de page, ou une image de fond.
- Insérer l’alerte javascript ci-dessous et essayer de l’activer au chargement de la page (attribut onLoad), ou au comportement de la souris (attributs onMouseover ou onClick sur un hyperlien javascript ://).
- Changer le message de l’alerte.
À insérer dans le HEAD :
<script language="javascript" type="text/javascript">
<!-- Cachez toujours le code javascript avec la balise de commentaires
function showSomething(message) {
alert(message)
}
// fin de la balise commentaires -->
</script>À insérer dans un emplacement spécifique de la page :
onLoad="showSomething('« La justice sans la force est impuissante; la force sans la justice est tyrannique. Il faut donc mettre ensemble la justice et la force; et pour cela faire que ce qui est juste soit fort, ou que ce qui est fort soit juste. » - Blaise PASCAL')"
