Créer un site HTML

(1)

Date :

NOM – Prénom : TP n°

……

/6

Lycée professionnel

Pierre Mendès FRANCE

Compte Rendu de Travaux Pratiques

1

^ère

SEN

Créer un site HTML

1 )

1 ) Qu'est ce que le langage HTML ? Qu'est ce que le langage HTML ?

1.1 ) Donner la définition de H.T.M.L. ?

1.2 ) Depuis quand existe ce langage ? A quelle version du langage en est on maintenant ? 1.3 ) Qu'est ce qu'une balise ?

1.4 ) Donner quelques balises nouvelles apportée par le HTML5.

1.5 ) Dans l'exemple ci-dessous, donner le rôle des balises <h1>, <p> et <br>

1.6 ) Voir ci-dessous le fichier HTML minimum. Remarquer « l'indentation » de ce texte (donner la définition d'indentation). Pourquoi mieux vaut-il indenter ses programmes ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<TITLE>

</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

2 )

2 ) Écrire une page HTML Écrire une page HTML

Pour créer son premier site web, vous n'avez besoin que d'un logiciel extrêmement simple, gratuit et intégré à tout les systèmes d'exploitations, un éditeur de texte. Dans Windows le plus simple est le bloc-notes mais pour plus de lisibilité on préférera utiliser un autre éditeur de texte

(2)

gratuit : « Notepad++ ».

2.1 ) Comparer les deux images ci-dessous et donner le nom de cette faculté de mettre différentes couleurs dans le texte.

Fichier « html1.html » ouvert avec le bloc-notes Même fichier avec notepad++

2.2 ) Pour travailler sur votre nouveau site, créez un dossier portant votre nom et contenant les fichiers « html1.html » et « ma_photo.jpg », sur le bureau.

Modifier le fichier « html1.html » comme dans l'exemple ci dessus puis l'ouvrir avec un navigateur.

2.3 ) Un programme bien fait est un programme commenté. C'est à dire qu'il doit intégrer des informations permettant (à vous ou à un autre programmeur) de comprendre ce qui a été programmé. Commenté ce programme en expliquant le rôle de la balise <IMG>. Relancer cette page dans le navigateur.

2.4 ) Faire une page web comprenant un titre <h1> deux ou trois sous titre

<h2> et deux paragraphes par sous titre (pour le texte noter par exemple Titre, paragraphe1 du sous titre2, etc...).

2.5 ) Balise de modification de l'apparence du texte : - <B>texte</B> => texte gras

- <i>votre texte</i> => Texte en italique.

- <small>votre texte</small> Petite police. - <big>votre texte</big>

Grande police

. - <br>votre texte</br> Changement de ligne.

- <pre>votre texte</pre> Le navigateur considère que le texte est préformaté et tient compte des espaces et des sauts de ligne.

- <sup>votre texte</sup> Le texte est un exposant.

- <sub>votre texte</sub> Le texte est in indice.

- <u>votre texte</u>texte souligné.

- <s>votre texte</s> texte rayé. Ce truc ne fonctionne pas avec tous les navigateurs.

- <BLINK>votre texte</BLINK>texte clignotant.

La balise font :

- <font color=#0000FF> Texte en couleur.</font>

- <font size=3> Valeur absolue 3 – normal</font> (essayer avec d'autres chiffres)

- <BODY BGCOLOR = “#000000” (minimum)… “ffffff” (maximum)> Modifie la couleur de fond Voir le site http://www.code-couleur.com/ pour l'aide sur la couleur.

Faire valider par le professeur Faire valider

par le professeur Faire valider

par le professeur

(3)

=> Modifier la page « html2.html » pour qu'elle affiche le texte comme ci-dessous :

Le corbeau et le renard

Maître Corbeau, sur un arbre perché, Tenait en son bec un fromage.

Maître Renard, par l'odeur alléché, Lui tint à peu près ce langage :

"Hé ! bonjour, Monsieur du Corbeau.

Que vous êtes joli ! que vous me semblez beau ! Sans mentir, si votre ramage

Se rapporte à votre plumage,

Vous êtes le Phénix des hôtes de ces bois."

A ces mots le Corbeau ne se sent pas de joie ; Et pour montrer sa belle voix,

Il ouvre un large bec,

laisse tomber sa proie

. Le Renard s'en saisit, et dit : "Mon bon Monsieur, Apprenez que tout flatteur

Vit aux dépens de celui qui l'écoute :

Cette leçon vaut bien un fromage, sans doute. "

Le Corbeau, honteux et confus,

Jura, mais un peu tard, qu'on ne l'y prendrait plus.

Jean de la fontaine

2.6 ) Remplacer la couleur de fond par l'image « corbeauetrenard.jpg » qui devra avoir à peu près la taille de la fable sans se « répéter » plusieurs fois.

3 )

3 ) Lien entre pages Lien entre pages

3.1 ) Avec la balise :

<a href="fichier_cible.html" title="message en forme de bulle">lien vers le fichier cible</a>

réaliser un lien relatif sur la page html1 vers la page html2 puis un lien absolu de retour.

3.2 ) Est-ce logique d'utiliser un lien absolu dans notre cas ? Pourquoi ? Quels sont les cas ou l'on utilise un lien absolu ?

3.3 ) Placer l'image (Page1.jpg) à la place du texte du lien.

3.4 ) Nous allons maintenant utiliser un lien absolu (à

placer en bas de la page 2) pour nous diriger vers la page Google.fr. Pour plus de dynamisme sur notre site nous allons faire le lien sur l'image de google (Google.jpg) et au « survol » de la souris faire apparaître la deuxième image (Google2.jpg). Aide : « onmouseover ; onmouseout»

Faire valider par le professeur

Faire valider par le professeur Faire valider

par le professeur

Faire valider par le professeur Faire valider par le professeur

(4)

4 )

4 ) Constitution d'une adresse internet. Constitution d'une adresse internet.

Une adresse internet se présente généralement sous la forme : http://www.google.fr 4.1 ) Expliquer la signification de chacun des éléments

http://

www google .fr

4.2 ) Expliquer le sens du mot web

4.3 ) Citer le nom de l'organisme international chargé de gérer les noms de domaine

5 )

5 ) Les images Les images

5.1 ) En vous appuyant sur l'exemple de la question 2.1), rechercher la balise et ses attributs les plus courants permettant d'insérer une image dans une page web.

5.2 ) Modifier le fichier html1.html pour doubler la taille de l'image et décaler de 40px dans tous les sens par rapport au reste du contenu.

5.3 ) On a vu qu'il est possible de faire un lien sur une image (question 3.3)

mais si l'on désire qu'il y ait plusieurs liens sur la même image (sur des endroits différents de l'image) on peut utiliser une image « mappable ». Modifier le fichier html1.html pour répondre au cahier des charges ci-dessous. Les autres fichiers html (lumiere1.html, …) devront être créer mais ne comporteront que le titre de la page (balise <title>). Exemple :

« Page html de la lumière 1 ». Rq : l'image (domovea.jpg) devra être dans sa définition d'origine (100%).

Lien vers « lumière1.html

»

Lien vers « lumière2.html

»

Lien vers « prise1.html

»

Lien vers « prise2.html

»

Lien vers « volet3.html

»

Lien vers « piscine.html

»

Retour

Lien vers « index.html

»

(5)

6 )

6 ) Les tableaux Les tableaux

Un tableau est délimité par la balise <table> Mettre ici la totalité de votre tableau </table>

Entre ces balises on place le titre de ce tableau <caption>Titre de mon tableau</caption>

<tr> </tr> : indique le début et la fin d'une ligne du tableau.

<td> </td> : indique le début et la fin du contenu d'une cellule.

6.1 ) Construire le tableau ci contre

6.2 ) Ajouter une colonne dans laquelle vous placerez la photo des deux personnages 6.3 ) Faire un lien sur chacune de ces photos (sans bordure) pour aller sur

leur page wikipédia.

7 )

7 ) Utilisation d'un éditeur HTML WYSIWYG Utilisation d'un éditeur HTML WYSIWYG

7.1 ) Que veut dire wysiwyg ?

7.2 ) Quels sont les avantages et inconvénients de ce genre d'outils ?

7.3 ) Charger la version « portable » de la dernière édition du logiciel « KOMPOZER ».

7.4 ) Qu'est ce qu'une version « portable » d'un logiciel ?

7.5 ) Refaire la question 6.3) avec « KOMPOZER ». Analyser le code html généré par kompozer et comparer le au votre.