Afficher le menu
6. Autres exemples
6.1. Un autre document
Exercice
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
.htmou.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 partieUn 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.
Exemple :
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 |
