TD n°1 : HTML et CSS – balises de mises en forme

Objectifs du TD

L’objectif du TD n°1 est d’aborder les balises HTML de mise en forme du texte les plus utilisées :

  • Titres de niveau différents
  • Matérialiser un paragraphe
  • Retour à la ligne
  • Gras, italique
  • Puces
  • Ajouter une citation

Ajouter une image au sein d’un texte, un lien vers un pdf ou un site extérieur.

Lier une Page HTML à une feuille de style CSS

Modifier la définition par défaut des balises HTML dans la feuille de style CSS

Organisation du dossier TD1

img1

 

1ère partie

Première partie : mise en forme de texte

  1. Créer un dossier TD1
  2. Créer une nouvelle page HTML à l’aide de Dreamweaver et l’enregistrer dans le dossier TD1 sous le nom de td1-loire-a-velo-1.html
  3. Télécharger le fichier texte brut (bas de page) puis coller le dans la partie <body></body>de votre page html. Enregistrer et vérifier le résultat.
  4. Faire une copie de ce fichier HTML et nommer cette copie td1-loire-a-velo-2.html
  5. Mettre en forme le texte à l’aide des balises de structuration du texte (voir Mémento HTML) comme indiqué ci-dessous

Résultats attendus

Texte brut - td1-loire-a-velo-1.html

Texte brut – td1-loire-a-velo-1.html

Mise en forme du texte - td1-loire-a-velo-2.html

Mise en forme du texte – td1-loire-a-velo-2.html

 

Téléchargement

2ème partie

Deuxième partie : Liens et images

 

  1. Créer le fichier td1-loire-a-velo-3.html à partir d’une copie de votre fichier HTML précédent ou à partir de la correction de la partie 1 à télécharger ci-dessous ( td1-loire-a-velo-2.html)
  2. Dans votre dossier TD1, créer 2 sous-dossier nommées img et pdf
  3. Télécharger le pdf ci-dessous nommé plaquette Loire à vélo dans votre sous-dossier pdf, puis insérer un lien vers ce fichier pdf depuis le texte « La Loire à vélo » du 1er paragraphe (voir résultat attendu)
  4. Télécharger les 2 images ci-dessous (image 1 et image 2) dans votre sous-dossier img puis les insérer dans la page comme indiqué ci-dessous
  5. Faire un lien depuis le texte « Cliquez ici » (dernier paragraphe) vers la page suivante : http://www.loireavelo.fr/infos-pratiques/acces-itineraire/train-velo-loire

Résultat attendu

Capture d’écran 2015-01-20 à 11.43.17Téléchargement

3ème partie

Troisième partie : feuille de style CSS

  1. Créer le fichier td1-loire-a-velo-4.html à partir d’une copie de votre fichier HTML précédent ou à partir de la correction de la partie 2 à télécharger ci-dessous ( td1-loire-a-velo-3.html)
  2. Enregistrer la feuille de style ci-dessous nommée style1.css dans un sous-dossier nommé « css« 
  3. Ajouter la ligne de code suivante permettant de lier la feuille HTML à la feuille de style style1.css dans la partie <head>… </head>
    <link href="css/style1.css" rel="stylesheet" type="text/css">
    
  4. Enregistrer et vérifier le résultat.
  5. Créer une copie de la feuille de style sous le nom style2.css puis créer une copie du fichier HTML sous le nom  td1-loire-a-velo-5.html
  6. Mettre en lien le nouveau fichier HTML avec la nouvelle feuille de style style2.css
  7. Créer votre propre design en modifiant la feuille de style style2.css
    • Exemples de style :
    • Changer la couleur de fond de la page
    • Changer le design de la balise H1 (couleur rouge, cadre de couleur bleu d’épaisseur 2px, de largeur 400px, centré sur la page, marges internes de 10px)

Résultat attendu

Capture d’écran 2015-01-20 à 11.43.35

Téléchargement