Scribd
Importer
131 vues6 pages

TP6 HTML Et CSS

Tp de html et css

Transféré par

danielntegue1
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
131 vues6 pages

TP6 HTML Et CSS

Tp de html et css

Transféré par

danielntegue1
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 6

PROGRAMMER UNE PAGE WEB

I2D
Lycée Felix Le Dantec EN HTML ET CSS TP6 - 3H
- Lannion

NOM : CLASSE :

PRÉNOM :

Condition de réalisation : Travail seul Durée : 3 heures


Matériel : • un ordinateur sous Ubuntu avec les logiciels Geany et Firefox (ou Notepad++ et
Firefox sous Windows)
Documents : • le sujet du TP
• le cours sur le langage HTML et les CSS

L'objectif du TP est d'écrire une page web composée d’images, de texte sous différentes tailles, de liens etc..
Dans la première partie du TP, vous allez vous familiariser avec certaines des balises les plus couramment
utilisées en HTML.
Dans la deuxième partie du TP vous aborderez les feuilles de styles (CSS).

La page Web finale ressemblera à celle-ci :

1. Écriture d'une page Web en HTML


1.1 Test de balises <!DOCTYPE html>
<html>
✔ Démarrer votre PC sous Ubuntu. <head>
✔ Lancer le logiciel Geany. Vous devez vérifier que vous utilisez <meta charset="utf-8" />
l'encodage UTF-8 des caractères : cliquer sur Document puis <title>Mon projet</title>
Définir l'encodage puis Unicode et enfin Unicode(UTF-8). </head>
✔ Ouvrir le texte de ce TP disponible sur le réseau et utiliser un <body>
La bataille navale
copier-coller pour écrire votre premier fichier HTML donné ci-
</body>
contre. Enregistrer le fichier sous le nom index.html. </html>
✔ Démarrer Firefox et ouvrir votre fichier.
✔ Remplacer le corps du programme par le texte page suivante. Enregistrer et regarder le résultat dans le
navigateur.

1STI2D SIN – TP {TP6 -HTML et CSS.odt - page 1/6}


<body>
La bataille navale
Le projet consiste à réaliser une version simplifiée du jeu de la bataille
navale, encore appelée touché-coulé.
</body>

✔ Le texte affiché comprend-il un retour à la ligne après « navale» comme ci-dessus ?

En fait la mise en page dans le fichier HTML n'a pas d'importance ; il faut utiliser des balises pour formater notre
texte.

✔ Modifier le corps du programme en ajoutant la balise orpheline <br/> après « La bataille navale ».
Enregistrer et regarder le résultat dans le navigateur. La balise <br />, comme break, permet donc
d'effectuer un saut de ligne.Supprimer la balise <br/>
On souhaite maintenant formater le texte :
✔ Appliquer le style titre de type h1 au texte "La bataille navale" en ajoutant les balises en paires <h1> et
</h1> autour de « La bataille navale ». De même, appliquer le style paragraphe p au reste du texte en
utilisant les balises <p> et </p>. Enregistrer et vérifier dans le navigateur.

1.2 Insertion d'image


La balise orpheline <img src="nom_fichier" alt="texte" /> permet l'insertion d’images.
✔ Télécharger sur le réseau le fichier TP8_images.zip et le décompresser dans un sous-dossier /images de
votre dossier de travail.
✔ Ajouter l'image du bateau bataille_navale.jpeg, que vous trouverez dans ce dossier, après le paragraphe
"Le projet consiste à ...". Le chemin pour trouver l'image sera de type images/nom_du_fichier. N'oublier
pas l'attribut alt qui affiche un texte si l'image n'est pas trouvée.
✔ Ajouter également le paragraphe ci-dessous.
<p>Le projet est réalisé par groupes de 2 à 3 élèves, et est limité à 3 séances de
TP.</p>
<p>Une présentation orale avec un support numérique sera faite en fin de projet.</p>

✔ Ajouter enfin le paragraphe suivant à votre page (copiez-collez !). Enregistrer et vérifier dans le navigateur.
<h2>Rappel des règles</h2>
<p>La bataille navale, appelée aussi touché-coulé, est un jeu de société dans lequel
deux joueurs doivent placer des « navires » sur une grille tenue secrète et tenter de
« toucher » les navires adverses. Le gagnant est celui qui parvient à torpiller complètement
les navires de l'adversaire avant que tous les siens ne le soient. Chaque joueur possède les
mêmes navires, dont le nombre et le type dépendent des règles du jeu choisies.
La grille de jeu est toujours la même, numérotée de 1 à 10 horizontalement et de A à J
verticalement.
Notre jeu de bataille "version light" aura une dimension réduite de 8x8 cases et 3 bateaux :
un croiseur (4 cases), un contre-torpilleurs (3 cases) et un torpilleur (2 cases).
</p>

<h2>Cahier des charges du mini-projet</h2>


le programme doit être réalisé en Java ;
le joueur joue contre l'ordinateur et doit trouver en un nombre minimum de coups les 3
bateaux placés aléatoirement par l'ordinateur ;
l'affichage se fera sous la forme de texte (voir ci-dessous), une interface graphique
pourra être ajoutée en fonction du temps restant en fin de projet ;
le programme indique en permanence le nombre de tirs effectués ainsi que les bateaux
coulés ;
le programme doit être structuré, l'utilisation de fonctions est indispensable pour une
bonne lisibilité ;
le programme devra être présenté et décrit oralement lors d'une soutenance avec
description de chacune des fonctions écrites. Cet oral, d'au maximum 10 minutes, commencera
par une présentation rapide du projet, puis chaque élève du groupe présentera sa partie. Vous
détaillerez également la démarche utilisée pour réaliser ce mini-projet, les problèmes
rencontrés et les solutions apportées. Vous présenterez le fonctionnement en l'état de votre
travail même si le programme n'est pas terminé.
l'affichage souhaité est donné ci-dessous.

<p>Projet de programmation 2019-2020</p>

1STI2D SIN – TP {TP6 -HTML et CSS.odt - page 2/6}


Le résultat doit être le suivant :

1.3 Les listes


Le cahier des charges du mini-projet doit être présenté sur la forme d'une liste à puces. L'écriture de ce type de
liste est la suivante :
<ul>
<li>puce 1</li>
<li>puce 2</li>
</ul>

✔ Modifier votre programme HTML pour y inclure la liste à puces dans la partie cahier des charges. Vérifier
dans le navigateur.

1.4 Création de tableau

Les tableaux peuvent être très utiles dans la mise en page. Nous allons utiliser un tableau pour la partie cahier des
charges. L'objectif est d'obtenir ceci :

Un tableau est délimité par les balises <table> ... </table>.


Le tableau se construit ligne par ligne avec les balises <tr> et </tr>, table row en anglais. Les cellules sont
définies à l'intérieur des lignes grâce aux balises <td> et </td>, table data en anglais.
Ex: La structure d'un tableau de 2 lignes sur 3 colonnes est donc :
<table>
<tr>
<td> lig1 col1 </td><td> lig1 col2 </td><td> lig1 col3
</td>
</tr>
<tr>
<td> lig2 col1 </td><td> lig2 col2 </td><td> lig2 col3
</td>
</tr>
</table>

1STI2D SIN – TP {TP6 -HTML et CSS.odt - page 3/6}


✔ Modifier votre programme HTML pour y inclure le tableau ainsi que la deuxième image dans la partie
cahier des charges. L'attribut colspan="2" dans une balise <td> permet de fusionner 2 colonnes. Vous
pourrez aussi ajouter l'attribut border="2" dans la balise <table> pour visualiser le tableau. Vérifier dans le
navigateur. Retirer ensuite l'attribut border.

1.5 Les liens hypertextes


Les balises <a href = " " > et </a> permettent d'écrire des liens hypertextes.
✔ Ajouter un lien hypertexte qui ouvre le site Java.com dans un nouvel onglet (attribut target="blank") lorsque
l'on clique sur le mot Java de votre page. Vérifier dans le navigateur.

Voilà, vous savez maintenant écrire une page WEB en HTML.


✔ Pour vérifier la conformité de cette page, copier le contenu du
programme dans le presse-papier, aller sur le site de validation du
W3C, http://validator.w3.org/ , cliquer sur l'onglet Validate by Direct
Input, coller votre programme puis cliquer sur check.

Le site du W3C ne doit pas vous trouver d'erreurs ... sinon corrigez-les !
Validation prof :

2. Mise en forme à l'aide d'une feuille de style


2.1 Mise en forme du texte
Nous allons maintenant utiliser une feuille de style pour la mise en forme du texte de la page.

✔ Afin d'établir un lien vers un fichier mon_style.css, ajouter dans l'en-tête de votre fichier HTML (entre
<head> et </head>) la ligne :

<link rel="stylesheet" type="text/css" href="mon_style.css" />

✔ Sous Geany, créer un nouveau fichier mon_style.css. Enregistrer ce fichier dans votre dossier de travail.

✔ Utiliser le cours pour effectuer les mises en forme suivantes. Vérifier dans le navigateur.
- titre h1 : police Trebuchet MS, gras, très très grande taille, centré
- titre h2 : police Trebuchet MS, gras, grande taille, couleur #007F0E
- paragraphe p : police Arial, taille normale
- liste ul : police Arial, taille normale

2.2 Mise en forme des images


Pour redimensionner les images, il faut ajouter une identité dans le fichier HTML et définir le style pour cette
identité dans le CSS. On vous donne les modifications à apporter pour l'image du bateau, dont la largeur est fixée
à 160 pixels.

HTML CSS
#bateau {
<img src="images/bataille_navale.jpg"
width:160px;
alt="bataille navale" id="bateau"/>
}

✔ Modifier votre programme. Pour la deuxième image, vous choisirez une largeur de 700 pixels. Vérifier dans
le navigateur.

1STI2D SIN – TP {TP6 -HTML et CSS.odt - page 4/6}


2.3 Agencement des éléments sur la page
Les nouvelle balises structurantes de l'HTML5 sont <header>, <nav>, <section>, <article>, <aside> et <footer>.
Attention ce sont des balises en paires (<header> s'utilise avec </header>, ...).

Le schéma ci-dessous montre un exemple de présentation d'une page utilisant ces différentes balises.

<header> : balise d'en-


tête => logo, slogan, <section> : balise de
bannière, ... regroupement de
contenus portant sur un
même sujet

<nav> : balise qui


regroupe les liens de
navigation de la page =>
menu, ... <aside> : balise
d'informations
complémentaires

<article> : balise qui


englobe une portion
autonome de la page =>
articles de journaux, flux
RSS, ...

<footer> : balise de pied


de page => liens de
contact, nom de l'auteur,
mentions légales, ...

Sur notre page nous utiliserons les blocs suivants :

<header>

<section
id="regles">
<nav>

<section
id="cdc">

<footer>

1STI2D SIN – TP {TP6 -HTML et CSS.odt - page 5/6}


Par exemple pour le bloc <nav>, le code HTML devient :
<nav>
<p>Le projet consiste à réaliser une version simplifiée du jeu de la bataille navale,
encore appelée touché-coulé.</p>
<img src="images/bataille_navale.jpg" alt="bataille navale" id="bateau"/>
<p>Le projet est réalisé par groupes de 2 à 3 élèves, et est limité à 3 séances de
TP.</p>
<p>Une présentation orale avec un support numérique sera faite en fin de projet.</p>
</nav>

✔ Ajouter ces balises structurantes au code HTML.

Il nous reste maintenant à écrire la mise en forme de ces balises dans le CSS. Il est possible grâce aux feuilles de
style de positionner au pixel près du texte ou des images. Nous allons utiliser ici le positionnement flottant, le plus
répandu sur les sites WEB.
- le sélecteur "float" permet de positionner l'élément sur la page
ex : float : left;
- le sélecteur "width" permet de spécifier la largeur de l'élément sur la page
ex : width : 20%;
- le sélecteur "height" permet de préciser la hauteur de l'élément sur la page
ex : height : 600px;

✔ Utiliser le cours sur les CSS pour effectuer les mises en forme suivantes. Vérifier dans le navigateur. Vous
devez obtenir la page WEB demandée en première page du TP.
- bloc header : couleur de texte blanche, couleur de fond #007F0E, arrondi d'angles de 10px, marges
intérieures droite et gauche de 5px
- bloc nav : positionnement à gauche, couleur de fond #E4E2E0, largeur 200px, arrondi d'angles de
10px, marges intérieures de 5px (haut, droite, bas, gauche)
- bloc section règles : marge extérieure gauche de 220px, couleur de fond #E4E2E0, arrondi d'angles
de 10px, marges intérieures de 5px (haut, droite, bas, gauche)
- bloc section cdc : marge extérieure gauche de 220px, marge extérieure haute de 10px, couleur de
fond #E4E2E0, arrondi d'angles de 10px, marges intérieures de 5px (haut, droite, bas, gauche)
- bloc footer : couleur de texte blanche, couleur de fond #007F0E, arrondi d'angles de 10px, marges
intérieures droite et gauche de 15px, caractères gras, marge extérieure haute de 10px

✔ Utiliser à nouveau le site du W3C pour valider votre fichier HTML ainsi que votre feuille de style.

http://validator.w3.org/
http://www.css-validator.org/

Validation prof :

1STI2D SIN – TP {TP6 -HTML et CSS.odt - page 6/6}

Vous aimerez peut-être aussi