12/09/2015
Exercices d’application
Créez un nouveau document html en partant de zéro avec TextWrangler ou TextEdit. Nommez-le correctement. Créez la structure de base de ce document html (avec les balises <html>, <head>, <body>…). Vous pouvez récupérer par copier-coller la structure du document de l’exercice sur le père Noël.
Le balisage des textes
Les balises H1, H2, H3, … doivent être utilisées pour indiquer la structure de vos textes : titres, sous-titres, etc.
Les balises STRONG et EM pour indiquer une insistance (forte ou modérée) sur une partie d’un paragraphe (en général le navigateur les traduit par du gras ou de l’italique).
Les balises BLOCKQUOTE ou Q pour indiquer une citation (longue ou courte).
Les listes
Reproduisez les deux listes 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 <ul>, <ol> et <li>
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.
Les couleurs
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 : <span style="color:#FF0000">La phrase est en couleur !</span>
Exercice : dans une des balises du texte de votre page exemple.html rajoutez style="color:#00A89F"
Un lien entre pages html
Utilisez la balise <a> pour faire un lien vers la page du père Noël. 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.
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.
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 |
Votre CV en HTML
Créez un nouveau document qui contiendra votre CV en HTML. Inspirez-vous de l’image ci-dessous pour présenter votre CV. Aidez-vous des indications en rouge pour choisir les balises appropriées.
Commencez par les titres, les images, les paragraphes et les listes à puces. S’il vous reste du temps, réalisez l’en-tête avec un tableau. Attention ! Faire une présentation avec un tableau n’est pas recommandé bien que souvent utilisé ; il existe une technique plus appropriée que vous pourrez apprendre en expert communication.
