TD - HTML/CSS

Ce site est une version plus légère que le fichier original dont il est issu. Vous pouvez aussi le visionner sur le site MathSoup.

Afin d'écrire votre code, il est conseillé d'utiliser un éditeur de texte comme Notepad++. Il n'est pas demandé de connaître toutes les balises HTML, ni de connaître tous les attributs CSS. Il vous faudra utiliser :

Exercice 1 Ouvrir dans une nouvelle fenêtre la page TD_html_1.html et afficher son code source. Pour afficher le code source, faire un clic-droit sur la page, et cliquer sur code source de la page (on peut aussi appuyer sur ctrl + U).
1 Afficher le code de la page TD_html_1.html et, pour chaque balise, expliquer quelle est sa fonction. Vous pourrez expliquer chaque balise en commentaire directement dans le fichier HTML ou dans un fichier annexe issu d'un éditeur de texte (.docx ou .odt).
2 Enregistrer la page web TD_html_1.html dans votre dossier personnel de travail ISN (Fichier → Enregistrer Sous), et ouvrez le fichier .html avec notepad++ (Faire clic-droit sur le fichier enregistrer et cliquer sur Edit with Notepad++). Modifier le fichier pour ajouter :
  • Un commentaire
  • Un paragraphe avec du texte dedans (peu importe quoi)
  • Une liste numérotée
  • Une ligne à la table
  • Un lien
  • Une image
Pour voir le résultat, il faut enregistrer les modification et ouvrir le fichier .html avec le navigateur.
Exercice 2 Le but est de créer une page avec une foule de bonhommes ressemblant à l'image ci-dessous :
1 Créer une page web (que vous enregistrerez dans votre dossier de travail ISN) contenant 50 bonhommes (5 lignes de 10). Pour celà, utilisez une table et cette petite image :
Dans notepad++, appuyer sur Ctrl + D permet de dupliquer une ligne (Si plusieurs lignes sont sélectionnées, alors elles sont toutes dupliquées).
2 Cachez un bonhomme parmi les autres de sorte à ce que l'on le trouve et clique dessus, cela mène l'internaute sur le site http://www.perdu.com/.

Exercice 3 Enregistrez cette page web dans votre dossier de travail. Enregistrer aussi le fichier de style appelé "style.css" en faisant apparaitre son contenu:
  • faire apparaître le contenu da la page TD_html_3.html en "cliquant droit" et en sélectionnant le "code source de la page",
  • cliquer sur le lien "TD_html_3/style.css"
  • enregistrer la feuille de style qui apparait dans votre dossier courant.
  • Pour pouvoir modifier le style de la page TD_html_3.html, il vous faut, dans le < head > cette page, notifier un lien sur votre propre fichier de style: < link rel="stylesheet" type="text/css" href="style.css" >
Le but de cet exercice est d'ajouter des modifications à la feuille de style CSS (que l'on ouvrira dans notepad++ ou SublimeText) afin de réaliser une belle mise en forme.
1 Utilisez firebug ou lisez directement le code source de la page et expliquez les rôles des différentes balises utilisées.
2 Ouvrir la feuille de style CSS et décommenter la partie suivante :
*{
border-style:solid;
border-width:1px;
}
Cela permet de mettre des bordures à tous les éléments afin de mieux les visualiser.
le caractère "*", représente n'importe quelle balise, cela signifie que toutes les balises de la page sont concernées par les modifications sur le style du bord ("border-style") et l'épaisseur du bord ("border-width").
3 Les attributs déjà présents dans la CSS servent à disposer correctement les différents éléments HTML (notamment pour que la section se trouve à gauche du aside et que le footer soit bien en bas). En ajoutant desattributs avec les bonnes valeurs, essayer d'obtenir un rendu aussi proche que celui-ci (vous pouvez toutefois choisir des couleurs qui vous semblent plus attrayantes si vous le souhaitez):
Il va falloir utiliser certains attributs tels que :
color : white;
background_color : #AAAAAA;
Les attributs de couleur peuvent prendre des valeurs connues comme white, red, black,..., mais on peut être plus précis en donnant une couleur R V B en hexadécimal (voir le site code-couleur.com ).
Il va également falloir utiliser les attributs :
margin : 10px;
padding : 5px;
Ils correspondent à des marges intérieures et extérieures aux éléments, comme représenté ci-dessous :
Exercice 4 Sous forme de mini-projet, il est demandé de réaliser une page web sur un (ou plusieurs) thèconcernant :
  • Les licences logicielles et la propriété intellectuelle
  • Les libertés et les droits sur internet
  • La supranationnalité du réseau
  • Vie privée et informations personnelles
Il sera demandé d'éviter au maximum les clones de wikipedia, et la page html construite devra contenir :
  • Une feuille CSS pour la mise en forme
  • Une entête
  • Un pied de page
  • Un ou plusieurs articles
  • Une bibliographie sous forme de liens pour citer vos sources
Le résultat est à envoyer à l'adresse mail segura.math@outlook.fr