TP1WEB

TP1 PREMIERS -
DOCUMENTS HTML
la base
Nous allons commencer par créer un document
html très petit, et nous l'enrichirons au fur et à
mesure. Lancez d'abord un éditeur de texte, et
recopiez le texte suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="Ma page web" />
<meta name="keywords" content="HTML5,CSS3,JavaScript,PHP" />
<meta name="author" content="foulen ben foulen" />

<title>
Premier essai
</title>
</head>
<body>
<p>
Bonjour tout le monde...

</p>
<hr />
</body>
</html>
Créez un sous-répertoire dans le

répertoire public_html pour ce
TP (~/public_html/TP1/Ex1.html), et enregistrez ce
fichier sous le nom a Ex1.html. À l'aide d'un
navigateur (konqueror ou firefox, par exemple),
regardez votre page. Nous allons modifier cette
page progressivement (n'hésitez pas à faire
d'autres changements que ceux proposés, en
vous en inspirant), et il faudra vérifier à chaque
nouvelle étape à quoi ressemble maintenant votre
page en rechargeant la page.
Titres
Changeons un peu le texte de notre page, pour
quelque chose comme :
<h1>Voici un titre</h1>
<h2>Maintenant un sous-titre</h2>
<h3>Et on peut continuer</h3>
<h4>La profondeur est limitée</h4>
<h5>Pénultième</h5>
<p>Un petit texte justifié à droite pour introduire cette partie, elle le
mérite bien, et puis il serait dommage de se priver. </p>
<h6>Un vraiment petit paragraphe</h6>
<p> Et un titre est un changement de paragraphe implicite.</p>
Ajoutez ces lignes dans la page précédente, et

vérifier l'affichage. Avez-vous besoin d'ajouter la
balise <br> après une balise d'entête <h1-6> ou un
paragraphe <p> ? Pourquoi ?
La barre horizontale
On a depuis le début une barre en bas de notre
page, représentée par <hr /> . On va la modifier
un peu. Corriger les erreus dans le code suivant :
<p>Barre horizontale simple, </p>
<hr />
<p>avec une longeur relative limitée,</p>
<hr style="width:50%;" />
<p>avec une longueur absolue,
<hr style="width:100%;" />
<p>avec d'autres positions dans la page,
<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>
<hr style="width:10%;size:10px;" />
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>
N'oubliez pas de changer la taille de votre fenêtre

pour voir comment évoluent les traits. Changez
aussi la taille des caractères (dans le menu
affichage, ou en appuyant sur CONTROL et + ou
-. Vérifier la validité de votre code en utilisant le
site web du W3C.
Énumérations
Copier ce code dans la page html:
<ul>
<li> <b> Le texte peut être en gras, </b> </li>
<li> <em> Les italiques mettent le texte en valeur ! </em> </li>
<li> Et enfin, on peut écrire à la machine du même nom, </li>
<li> un style souligné à éviter : ici, on ne peut pas cliquer,</li>
<li> et on peut même rayer du texte </li>
<li> <big> On peut écrire de gros caractères, </big> <small> ou de
petits </small> </li>
<li> Et enfin, on peut utiliser des exposants comme dans
1<sup>er</sup> ou des indices, u<sub>n+1</sub> = u<sub>n</sub>+1 </li>
</ul>
<ul>
<li> Du texte violet, </li>
<li> du texte, du texte plus gros (en relatif), </li>
<li> du texte, taille absolue, </li>
<li> et des jolies lettres.</li>
</ul>
Dans le code précédent, on vient de créer une

liste. Que se passe-t-il si on remplace ul par ol ?
Créez une liste, dont le premier élément

commencera par le mot « Les peintres », suivi
d'une liste numérotée avec dans l'ordre vos trois
peintres favoris. Le second élément sera la même
chose avec « Les musiciens ». Vous ferez de plus
suivre le nom de votre musicien préféré d'une
liste numérotée de ses trois meilleures chansons.
Vous pourrez ensuite essayer de remplacer
un <ol> par <ol start="42"> et la
deuxième <li> par <li start="100">.
Tableaux
<table>
<caption> Tableau 1: mes notes </captio>
<tr>
<td> X </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 2 </td>
<td> 2 </td>
<td> 4 </td>
<td> 6 </td>
</tr>
<tr>
<td> 3 </td>
<td> 3 </td>
<td> 6 </td>
<td> 9 </td>
</tr>
</table>
Le tableau n'est pas encore complet. Comment

peut-on ajouter les bordures ? Ajoutez à la balise
table un l'attribut style pour modifier les
propriétés suivantes :
<table border="1">
Liens
Votre document commence (enfin ce qu'il y a
après <body>) sans doute par un titre <h1>Titre</h1>.
Remplaçons-le par : <a
name="debut"><h1>Titre</h1></a>. Ajoutez maintenant
le texte suivant (avec la mise en forme):
Oubliez les débats et les meetings, selon une

étude américaine, notre orientation
politique est déterminée par notre cerveau.
(article de yahoo.fr)
Il y aurait donc des cerveaux siglés Hollande et

d'autres Sarkozy. À quelques mois de l'élection
présidentielle, voilà une révélation qui devrait
grandement simplifier la tâche des sondages.
Point de machination électorale bleu-blanc-rouge,
rassurez-vous, l'étude en question n'a pas été
réalisée dans l'Hexagone, mais de l'autre côté de
l'Atlantique (où la campagne présidentielle fait
également rage, cela dit). Et c'est The
Guardian qui relate les principales conclusions de
cette enquête. Et si le cerveau d'un électeur de
droite n'était pas le même que celui d'un électeur
de gauche ?
C'est ce qu'ont imaginé des chercheurs de

l'université Lincoln dans le Nebraska, aux États-
Unis, en constatant que les esprits conservateurs
réagissaient davantage aux stimuli négatifs que
les libéraux, qui, eux, seraient plus réactifs aux
stimuli positifs. Une étude réalisée en avril 2011
par des membres de l'University College of
London nous apprenait déjà que la structure
cérébrale pouvait varier en fonction des opinions
politiques. Les conservateurs, nous apprenait-on,
posséderaient un plus petit cortex cingulaire
antérieur (région cérébrale associée à la prise de
décision) et des amygdales (région des émotions
liées à la peur et à l'anxiété) plus développées
que les libéraux. Qui l'eût cru ?
Et les centristes ?
Cette nouvelle étude américaine, qui repose sur

les concepts de stimuli appétitif et aversif, va plus
loin. Le principe de l'expérience est simple :
l'équipe de chercheurs a présenté à un groupe de
deux cents personnes une série d'images
plaisantes ou désagréables et a analysé les
réactions du cerveau de chacun des cobayes. Elle
a ainsi distingué deux groupes : ceux qui se
focalisaient sur les images plaisantes
à la fin de votre document (avant </body>),

ajouter : <p> Lien vers <a href="#debut">en
haut</a></p>. Cliquez dessus dans le navigateur.
Ajoutez alors le code suivant:

Un <a href="http://www.google.html" title="Google selon moi"> Pour aller sur
le site de gogle </a>.<br />
Cliquez dessus dans le navigateur. A quoi sert

l'attribut "title" ?
Images
Si vous avez une image dans vos fichiers, tant
mieux. Sinon, téléchargez-en une sur internet,
n'importe laquelle. Créez un sous-
répertoire photo dans ~/public_html/TP1/, et mettez
cette image. Vous pouvez maintenant ajouter le
code : <img src="../photo/monimage.jpg" alt="texte
alternatif" title="comme une image" > en adaptant au
nom de l'image.
.. : pour remonter un répertoire.

./ : pour le répertoire courant
Vérification de la validité d'un document
XHTML
Normalement, le document HTML que vous êtes
en train de lire est un document valide au sens de
la norme proposée par le consortium W3C. Nous
allons utiliser l'extension WebDeveloper du
navigateur firefox pour le vérifier.
Dans un premier temps, suivre les étapes

suivantes pour installer cette extension :
1. Ouvrir le menu Outils.

2. Sélectionner l'option Extensions.
3. Cliquer sur le liens Obtenir d'autres
Extensions. Ceci conduit au site de
téléchargement mozilla updates.
4. Dans le menu en partie gauche
sélectionner Developer Tools.
5. Chercher Web Developer.
6. Cliquer sur Install.
7. Cliquer sur Installer maintenant.
8. Fermer Firefox (ou redémarrer firefox).
Web Developper est maintenant disponible dans

le menu Outils de Firefox.
Demander la validation du document avec le

menu Outils > Valider le HTML local
L'autre solution sera d'aller sur le

site: validator.w3.org et d'uploader votre fichier,
ou d'entrer le lien de votre page.
Constater la validité du document sur la page

affichée (1 warnings: Version experimental de
HTML5)
Écrire une page HTML avec un éditeur de

texte
Réalisez la page Web suivante:
Exercice
1. Créer le fichier Duchemol.html dans le

répertoire ~public_html/TP1/
2. Télécharger le fichier medical.txt et
l'enregistrer dans TP1.
3. Télécharger le fichier cabinet.jpg et
l'enregister dans TP1
4. Ouvrir le fichier Duchemol.html avec un
editeur de texte (bluefish par exemple).
5. Créer un document HTML dont le rendu est le
suivant :
• Valider votre page: http://validator.w3.org/

• Vous utiliserez 2 niveaux hiérarchiques pour
les titres.
• Vous insérerez un lien sur le formulaire de
contact suivant pointant
vers http://www.w3.org/TR/html5/ (<a
href="adresse">Texte</a>) et expliciterez
l’abéviation MMT (<abbr title="Signification
complète ">Abréviation</abbr>)sur la
dernière ligne.
En fin de session, n'oubliez pas de vous

déconnecter!

TP1WEB

Transféré par

Informations du document

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

TP1WEB

Transféré par

Droits d'auteur :

Formats disponibles

TP1 PREMIERS -

Créez un sous-répertoire dans le

Ajoutez ces lignes dans la page précédente, et

N'oubliez pas de changer la taille de votre fenêtre

Dans le code précédent, on vient de créer une

Créez une liste, dont le premier élément

Le tableau n'est pas encore complet. Comment

Oubliez les débats et les meetings, selon une

Il y aurait donc des cerveaux siglés Hollande et

C'est ce qu'ont imaginé des chercheurs de

Cette nouvelle étude américaine, qui repose sur

à la fin de votre document (avant </body>),

Ajoutez alors le code suivant:

Cliquez dessus dans le navigateur. A quoi sert

.. : pour remonter un répertoire.

Dans un premier temps, suivre les étapes

1. Ouvrir le menu Outils.

Web Developper est maintenant disponible dans

Demander la validation du document avec le

L'autre solution sera d'aller sur le

Constater la validité du document sur la page

Écrire une page HTML avec un éditeur de

1. Créer le fichier Duchemol.html dans le

• Valider votre page: http://validator.w3.org/

En fin de session, n'oubliez pas de vous

Vous aimerez peut-être aussi