TP HTML

TP : HTML5 et CSS3
1. Installation de l'environnement de travail

Dans ce TP vous allez crer votre site web. Il sera enrichi tout au long de lanne, par des
recherches, des projets,
Pour faire ce TP, nous avons besoin dun navigateur et de lIDE GEANY
Un IDE (Integrated Development Environment) (EDI, environnement de dveloppement intgr en
franais), est un logiciel qui simplifie la programmation. Il intgre un diteur texte pour crire votre
code et propose un certain nombre de raccourcis et d'aides adaptes au langage utilis. Pour le HTML,
le logiciel NetBeans nest pas inintressant ; une alternative est Eclipse. Les deux IDE sont libres. Mais il
est parfaitement possible de crer 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 dernire version (pour
amliorer le support de CSS3 et HTML5) ainsi que les extensions Webdeveloper et Firebug.
La premire ajoute un menu et une barre d'outil au navigateur et permet de visualiser de nombreuses
informations sur la page web affiche ; en particulier, le raccourci clavier <ctrl>-<shift>-A lance une
vrification de la conformit du code html de la page aux spcifications du W3C. La deuxime (active
par la touche <F12>) permet de visualiser, en dplaant la souris sur les lments 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 premire ajoute un menu et une barre d'outil au navigateur et permet de visualiser de nombreuses
informations sur la page web affiche ; en particulier, on peut lancer une vrification de la conformit du
code html de la page aux spcifications du W3C.
La deuxime permet de visualiser, en dplaant la souris sur les lments de la page, leur code html et
formatage css.
2. HTML : Cration dune page personnelle
a. Page web minimale

Une page HTLM est un fichier texte ASCII avec lextension .html, destins 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-tte (<head>
</head>)
Il suffit de regarder l'exemple suivant pour avoir une ide sur les mta-donnes que peut contenir l'entte d'un document html. (Remarquez la faon 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 particulire de botes, 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 lment, y
compris d'autres lments bloc.
2) Les structures de type enligne (inline), comme <span> ou <a>, ne peuvent se mettre que cte
cte. Une structure de type inline ne peut contenir que des lments du mme type.
3. Ma premire page web

Avant de commencer, voici quelques liens vers des sites de rfrence et des tutoriaux :
tout sur les balises, w3schools ;
http://fr.openclassrooms.com/informatique/exportPdf/apprenez-a-creer-votre-site-web-avechtml5-et-css3
http://www.prog-info.org/html/index.php
Alsacration,
Tlcharger le fichierwww.zip, puis le dcompress le rpertoire HTML_CSS
A laide de geany crer un fichier index.html et le place dans le rpertoire
Modifier le contenu de la balise <title> </title> et en ajoutant les balises et en les adaptant.
<meta
<meta
<meta
<meta
charset="UTF-8"/>
name="author" content="Nom de l'auteur"/>
name="keywords" content="Mots clefs relatifs cette page"/>
name="description" content="Descriptif court"/>
Vous allez crer votre site personnel, il rassemblera
4. Comment structurer le contenu de ma page web ?

Crer 7 blocs <DIV></DIV> selon le diagramme ci-dessous
3) Ouvrez le fichier monstyle_1.css ,

4) A laide des informations fournies par le fichier de style monstyle_1.css , complter les
balises <DIV > avec leur identifiant : id=" "
5) Complter chaque bloc par le contenu appropri en ladaptant vos informations personnelles
(nom, courriel, qualits, hobbies, ) :
Le menu du bloc lattral gauche, utilise une balise <menu>, chaque item a un lien vers un
fichier, que vous devez crer (vide) avec un titre appropri.
le bloc entte 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 ordonne, lautre 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 laide dun 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 complter le avec votre propre style
5. Mini projet
Vous compltez votre site personnel, par deux pages web :
1) une page sur les droits et liberts.
a) Chercher sur le Web la dfinition du droit loubli que certains cherchent promouvoir
comme un droit fondamental.
b) Rechercher le texte de la loi du 6 janvier 1978 ; afin den prsenter les ides principales.
c) Prsenter la Commission nationale de linformatique et des liberts (La CNIL).
2) une page web sur larchitecture des ordinateurs :
En sappuyant sur votre cours n2 architecture des ordinateurs et faites des recherches,
vous ralisez une page sur la structure des ordinateurs, larchitecture des microprocesseurs ainsi
que les volutions des microprocesseurs et du matriel informatique en gnral. Votre synthse
de recherche doit tre concise, contenir des explications des images des schmas de diffrents
lmnts dun ordinateur.
Vous pourrez vous aider des questions suivantes :
a. Quels sont les diffrents lments constitutifs dun ordinateur.
b. Quel est le rle de la mmoire ? quelles sont les diffrents types de mmoire ?
c. Quel est le rle dun microprocesseur ? Quels sont ces lments constitutifs ?
d. Expliquez en particulier ce que veut dire le terme UAL ? Quel est le rle dune UAL ?
e. Les BUS : dans une machine de VON NEUMANN que trouve-t-on comme bus, quels sont les
informations vhicules sur chacun deux.
f. Quels sont les diffrents types de processeur que lon 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 sil est correctement crit ou sil 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 faons diffrentes, cest pour cela quil y a trois onglets :
adresse (URL) ;
envoi du fichier .html ;
copier-coller du code HTML.
Comme votre site nest 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 rencontres. 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 gnral tre dans des balises de paragraphes. Il est interdit de mettre du texte
directement entre les balises <body></body> sans lavoir entour des fameux <p></p>. Ceci est aussi
valable pour les retours la ligne <br />, qui doivent tre lintrieur de paragraphes. Cest une erreur
ultra-courante chez les dbutants.
< p > Ceci est un texte correctement plac dans un paragraphe .
< br / >
Les balises < br / > doivent se trouver l intrieur 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 limage. Si, par hasard,
votre image est purement dcorative (vous ne pouvez pas en trouver de description), vous tes autoriss
ne rien mettre comme valeur pour lattribut alt.
< !-- L image comporte une description -- >
< img src = " photo . jpg " alt = " Une photo de moi " / >
< !-- L image ne comporte pas de description mais quand mme un attribut alt -- >
< img src = " deco . png " alt = " " / >
Vos balises doivent tre fermes dans lordre.

< !-- Les balises ne sont pas fermes dans leur ordre d ouverture -- >
< p > Texte < em > important </ p > </ em >
< !-- Les balises sont fermes 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 HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

TP HTML

Încărcat de

Drepturi de autor:

Formate disponibile

TP : HTML5 et CSS3

1. Installation de l'environnement de travail

a. Extensions pour Firefox

b. Extensions pour Chrome

2. HTML : Cration dune page personnelle

a. Page web minimale

b. Contenu de l'en-tte (<head>

c. Contenu du corps d'une page web (<body>

3. Ma premire page web

Vous allez crer votre site personnel, il rassemblera

4. Comment structurer le contenu de ma page web ?

3) Ouvrez le fichier monstyle_1.css ,

6) A laide dun navigateur, tester votre travail.

Vos balises doivent tre fermes dans lordre.

S-ar putea să vă placă și