TP Htmloff

TP : HTML5 et CSS3
1. Installation de l'environnement de travail
Dans ce TP vous allez créer votre site web. Il sera enrichi tout au long de l’année, par des
recherches, des projets, …
Pour faire ce TP, nous avons besoin d’un navigateur et de l’IDE GEANY
Un IDE (Integrated Development Environment) (EDI, environnement de développement intégré en

français), est un logiciel qui simplifie la programmation. Il intègre un éditeur texte pour écrire votre
code et propose un certain nombre de raccourcis et d'aides adaptées au langage utilisé. Pour le HTML,
le logiciel NetBeans n’est pas inintéressant ; une alternative est Eclipse. Les deux IDE sont libres. Mais il
est parfaitement possible de créer son site web simplement avec n'importe quel éditeur de texte ;
choisissez l'approche qui vous convient le mieux.
a. Extensions pour Firefox
Pour ceux qui utilisent le navigateur Firefox, il est conseillé d'installer sa dernière version (pour
améliorer le support de CSS3 et HTML5) ainsi que les extensions Webdeveloper et Firebug.
La première ajoute un menu et une barre d'outil au navigateur et permet de visualiser de nombreuses
informations sur la page web affichée ; en particulier, le raccourci clavier <ctrl>-<shift>-A lance une
vérification de la conformité du code html de la page aux spécifications du W3C. La deuxième (activée
par la touche <F12>) permet de visualiser, en déplaçant la souris sur les éléments de la page, leur code
html et formatage css.
b. Extensions pour Chrome
Pour ceux qui utilisent le navigateur Chrome, il est conseillé d'installer les extensions Webdeveloper et
Firebug Lite.
La première ajoute un menu et une barre d'outil au navigateur et permet de visualiser de nombreuses
informations sur la page web affichée ; en particulier, on peut lancer une vérification de la conformité du
code html de la page aux spécifications du W3C.
La deuxième permet de visualiser, en déplaçant la souris sur les éléments de la page, leur code html et
formatage css.
2. HTML : Création d’une page personnelle
a. Page web minimale
Une page HTLM est un fichier texte ASCII avec l’extension .html, destinés à structurer un document via
des balises (markup) et à faciliter le partage de l'information via les textes enrichis (hypertext).
<!DOCTYPE html>
<html>

<head>

</head>
<body>

</body>
</html>
b. Contenu de l'en-tête (<head> … </head>)

Il suffit de regarder l'exemple suivant pour avoir une idée sur les méta-données que peut contenir l'en-
tête d'un document html. (Remarquez la façon de mettre en commentaire du code html.)
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"/>

<meta name="author" content="Nom de l'auteur"/>
<meta name="keywords" content="Mots clefs relatifs à cette
page"/>
<meta name="description" content="Descriptif court"/>
<title>Titre de ma page</title>
<link rel="stylesheet" type="text/css"
href="styles/ monstyle2base.css" media="all" />
<link rel="stylesheet" type="text/css"
href="styles/monstyle_1.css" media="screen" />

</head>
c. Contenu du corps d'une page web (<body> … </body>)
Une page web est une disposition particulière de boîtes, ou conteneurs, pouvant contenir d'autres
structures html (tableaux, listes, formulaires, etc.).
On distingue deux types importants de structures :
1) les structures de type bloc

 comme les paragraphes <p>,
 les listes <ul>,
 les titres <h1>, …, <h6>,
 les sections <section> imposent un saut de ligne et s'étendent au maximum en largeur
suivant les contraintes CSS : les structures de ce type se positionnent verticalement.
Une structure de type bloc peut contenir, éventuellement, n'importe quel autre élément, y
compris d'autres éléments bloc.
2) Les structures de type enligne (inline), comme <span> ou <a>, ne peuvent se mettre que côte à
côte. Une structure de type inline ne peut contenir que des éléments du même type.
3. Ma première page web

Avant de commencer, voici quelques liens vers des sites de référence et des tutoriaux :
tout sur les balises, w3schools ;

http://fr.openclassrooms.com/informatique/exportPdf/apprenez-a-creer-votre-site-web-avec-
html5-et-css3
http://www.prog-info.org/html/index.php
Alsacréation,
Télécharger le fichierwww.zip, puis le décompressé le répertoire HTML_CSS
A l’aide de geany créer un fichier index.html et le place dans le répertoire …
Modifier le contenu de la balise <title> …</title> et en ajoutant les balises et en les adaptant.
<meta charset="UTF-8"/>
<meta name="author" content="Nom de l'auteur"/>
<meta name="keywords" content="Mots clefs relatifs à cette page"/>
<meta name="description" content="Descriptif court"/>
Vous allez créer votre site personnel, il rassemblera à :

4. Comment structurer le contenu de ma page web ?
Créer 7 blocs <DIV>…</DIV> selon le diagramme ci-dessous
3) Ouvrez le fichier « monstyle_1.css »,
4) A l’aide des informations fournies par le fichier de style « monstyle_1.css », compléter les
balises <DIV …… > avec leur identifiant : id=" … "
5) Compléter chaque bloc par le contenu approprié en l’adaptant à vos informations personnelles
(nom, courriel, qualités, hobbies, …) :
 Le menu du bloc lattéral gauche, utilise une balise <menu>, chaque item a un lien vers un
fichier, que vous devez créer (vide) avec un titre approprié.
 le bloc entête contient, votre photo, un titre, un paragraphe qui utilise la balise <strong>
 le bloc central utilise deux niveaux de titre, des paragraphe , et un bloc dont le fond est blanc
(<pre> <code> … </code></pre>)
 le bloc des liens contient deux titres, deux listes : une ordonnée, l’autre non, avec des images et
des liens vers des sites externes
 Le bloc pied de page contient des paragraphes, un lien pour envoyer un mail :
<a class="lien" href="mailto:monadresse@free.fr" style="text-decoration:none;color:#ffff00">
mon nom ou pseudo </a>
6) A l’aide d’un navigateur, tester votre travail.
Valider votre page par le validateur HTML : http://validator.w3.org. (voir annexe)
7) Ouvrir le fichier de style «styles/ monstyle2base.css » et compléter le avec votre propre style
5. Mini projet
Vous complétez votre site personnel, par deux pages web :
1) une page sur les droits et libertés.

a) Chercher sur le Web la définition du « droit à l’oubli » que certains cherchent à promouvoir
comme un droit fondamental.
b) Rechercher le texte de la loi du 6 janvier 1978 ; afin d’en présenter les idées principales.
c) Présenter la Commission nationale de l’informatique et des libertés (La CNIL).
2) une page web sur l’architecture des ordinateurs :
En s’appuyant sur votre cours n°2 « architecture des ordinateurs » et faites des recherches,
vous réalisez une page sur la structure des ordinateurs, l’architecture des microprocesseurs ainsi
que les évolutions des microprocesseurs et du matériel informatique en général. Votre synthèse
de recherche doit être concise, contenir des explications des images des schèmas de différents
éléménts d’un ordinateur.
Vous pourrez vous aider des questions suivantes :
a. Quels sont les différents éléments constitutifs d’un ordinateur.
b. Quel est le rôle de la mémoire ? quelles sont les différents types de mémoire ?
c. Quel est le rôle d’un microprocesseur ? Quels sont ces éléments constitutifs ?
d. Expliquez en particulier ce que veut dire le terme UAL ? Quel est le rôle d’une UAL ?
e. Les BUS : dans une machine de VON NEUMANN que trouve-t-on comme bus, quels sont les
informations véhiculées sur chacun d’eux.
f. Quels sont les différents types de processeur que l’on trouve sur le marché ?
Annexe
Le W3C (World Wide Web Consortium) propose sur son site web un outil appelé le « Validateur », qui va
analyser votre code source et vous dire s’il est correctement écrit ou s’il comporte des erreurs que vous devez
corriger. Il existe un validateur pour HTML et un validateur pour CSS : http://validator.w3.org.
Vous pouvez valider votre page web de trois façons différentes, c’est pour cela qu’il y a trois onglets :
adresse (URL) ;
envoi du fichier .html ;
copier-coller du code HTML.
Comme votre site n’est encore en ligne, vous pouvez envoyer votre fichier .html ou encore de copier-coller
directement le code HTML. Si votre document est validé vous verrez le message :
Dans le cas contraire, le validateurs vous informe des erreurs rencontrées. Il est indispensable de les corriger, si
on souhaite que sa page soit correctement affichable par tous les navigateurs.
Voici une liste non exhaustive de conseils qui peuvent vous aider à corriger les erreurs :
 Tous vos textes doivent en général être dans des balises de paragraphes. Il est interdit de mettre du texte
directement entre les balises <body></body> sans l’avoir entouré des fameux <p></p>. Ceci est aussi
valable pour les retours à la ligne <br />, qui doivent être à l’intérieur de paragraphes. C’est une erreur
ultra-courante chez les débutants.
< p > Ceci est un texte correctement placé dans un paragraphe .

< br / >
Les balises < br / > doivent se trouver à l ’ intérieur d ’ un paragraphe , ne l ’ oubliez pas </ p >
Ceci est un texte en - dehors d ’ un paragraphe . C ’ est interdit .
< br / >
 Toutes vos images doivent comporter un attribut alt qui indique ce que contient l’image. Si, par hasard,
votre image est purement décorative (vous ne pouvez pas en trouver de description), vous êtes autorisés à
ne rien mettre comme valeur pour l’attribut alt.
< !-- L ’ image comporte une description -- >
< img src = " photo . jpg " alt = " Une photo de moi " / >
< !-- L ’ image ne comporte pas de description mais quand même un attribut ’ alt ’ -- >
< img src = " deco . png " alt = " " / >
 Vos balises doivent être fermées dans l’ordre.
< !-- Les balises ne sont pas fermées dans leur ordre d ’ ouverture -- >
< p > Texte < em > important </ p > </ em >
< !-- Les balises sont fermées dans leur ordre d ’ ouverture -- >
< p > Texte < em > important </ em > </ p >
 Si vos liens comportent des & , vous devez les remplacer par le code &amp ; pour éviter toute confusion
au navigateur.
< !-- Exemple d ’ un mauvais lien en HTML -- >

< a href = " http ://www . site . com / ? jour =15& mois =10& an =2000 " >
< !-- Exemple d ’ un bon lien en HTML -- >
< a href = " http ://www . site . com / ? jour =15& amp ;mois =10& amp ;an =2000 " >

TP Htmloff

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP Htmloff

Transféré par

Droits d'auteur :

Formats disponibles

TP : HTML5 et CSS3

1. Installation de l'environnement de travail

Un IDE (Integrated Development Environment) (EDI, environnement de développement intégré en

a. Extensions pour Firefox

b. Extensions pour Chrome

b. Contenu de l'en-tête (<head> … </head>)

On distingue deux types importants de structures :

1) les structures de type bloc

3. Ma première page web

tout sur les balises, w3schools ;

Télécharger le fichierwww.zip, puis le décompressé le répertoire HTML_CSS

A l’aide de geany créer un fichier index.html et le place dans le répertoire …

Vous allez créer votre site personnel, il rassemblera à :

Vous complétez votre site personnel, par deux pages web :

1) une page sur les droits et libertés.

< p > Ceci est un texte correctement placé dans un paragraphe .

 Vos balises doivent être fermées dans l’ordre.

< !-- Exemple d ’ un mauvais lien en HTML -- >

Vous aimerez peut-être aussi