22/02/2021

6. Autres exemples

6.1. Un autre document

Créez un nouveau document au format HTML en partant de zéro avec un éditeur de texte.

Enregistrez le document dans votre dossier en faisant attention à choisir le bon suffixe de fichier (bonne extension de fichier) à savoir .htm ou .html. Attention ! avec un éditeur de texte, il n'est pas possible d'automatiser la mise en place de ce suffixe et il faut donc le saisir. Si vous n'avez pas de coloration syntaxique des mots clés html dans l'éditeur (alors que vous l'aviez avec l'exemple précédent), votre suffixe n'est sans doute pas correct.
Saisissez la structure de base de ce document HTML (avec les balises <html>, <head>, <body>…). Pour cela, revoyez si nécessaire la partie Un document html. Vous pouvez récupérer par copier-coller la structure du document de l'exercice sur le père Noël.
Ajoutez un titre de niveau 1 dont le texte sera votre nom (vos noms si vous travaillez en binôme).

6.2. Les listes

Reproduisez les deux listes ci-dessous. Pour cela, vous pourrez observer le code source de l'énoncé de ce TD (via votre navigateur). Vous pouvez aussi, éventuellement, chercher des explications sur les balises à utiliser sur le web, pour comprendre le fonctionnement des balises <ul> (unordered list), <ol> (ordered list) et <li> (list item).

Une liste à puces :

Premier élément
Un deuxième
Le dernier

Une liste numérotée :

Premier élément
Un deuxième
Le dernier

À retenir : La totalité de la liste à puces est encadrée par la balise ul (ou ol pour la liste numérotée) et chaque item de la liste est encadré par la balise li. Cette imbrication doit être absolument respectée.

6.3. Les couleurs

Dans le développement actuel de page web, il est conseillé d'utiliser le langage HTML uniquement pour décrire la structure et le contenu d'une page, et d'utiliser le langage CSS (non étudié dans ce cours) pour les mises en forme. Toutefois le langage HTML contient aussi des balises (ou des attributs de balise) permettant de préciser des aspects de mise en forme

Utilisez des couleurs pour colorer les lettres de votre nom.

Pour cela, vous pourrez observer le code source de l'énoncé de cette page de TD pour comprendre le fonctionnement de l'attribut style : La phrase est en couleur !

Le code html correspondant est : <span style="color:#FF0000">La phrase est en couleur !</span>

6.4. Un lien entre pages html

Utilisez la balise <a> pour faire un lien vers la page du père Noël sur votre ordinateur. L'attribut href doit prendre comme valeur le chemin entre la page que vous êtes en train d'éditer et la page du père Noël.

6.5. Une image cliquable !

N'importe quel élément peut devenir cliquable (du texte, un paragraphe, une image…). Il suffit d'ouvrir et de fermer une balise <a> autour de l'objet que l'on veut rendre cliquable. Insérez une image dans votre document puis ajoutez un lien vers un site qui parle de ce qui est représenté sur cette image.

6.6. Les tableaux

Reproduisez le tableau ci-dessous. Pour cela, vous pourrez observer le code source de l'énoncé de ce TD (éventuellement voir la bibliographie en fin de page) pour comprendre le fonctionnement des balises <table>, <tr> et <td>.

TDB1	HTML	2h
TDB2 - TDB3	Traitement de texte	4h
TDB4	Tableur	2h
TDB5	Révisions	2h
TD final	Examen	1h