Scribd
Importer
12 vues4 pages

Compte Rendue 4

Ce document décrit les étapes pour créer une première page web en HTML, incluant un titre, du texte, une image, un tableau et un formulaire. Il fournit des instructions détaillées sur la préparation de l'environnement, la structure de base d'une page HTML, et l'ajout de chaque élément requis. Enfin, il propose une vérification pour s'assurer que tous les éléments s'affichent correctement dans un navigateur.

Transféré par

dorhmifati
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 DOCX, PDF, TXT ou lisez en ligne sur Scribd
12 vues4 pages

Compte Rendue 4

Ce document décrit les étapes pour créer une première page web en HTML, incluant un titre, du texte, une image, un tableau et un formulaire. Il fournit des instructions détaillées sur la préparation de l'environnement, la structure de base d'une page HTML, et l'ajout de chaque élément requis. Enfin, il propose une vérification pour s'assurer que tous les éléments s'affichent correctement dans un navigateur.

Transféré par

dorhmifati
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 DOCX, PDF, TXT ou lisez en ligne sur Scribd

Tp : CREATION D’UNE PREMIERE PAGE WEB

Objectif : Réaliser une première page web en HTML contenant :

 Un titre
 Du texte avec modification de la taille d’écriture
 Une image
 Un tableau
 Un formulaire

1. Préparation de l’environnement

Etape 1 : Créer un dossier sur votre ordinateur "MonSiteWeb".

Etape 2 : Créer un nouveau fichier ‘[Link]’ dans le dossier ‘MonSiteWeb’.

Etape 3 : Ouvrir le fichier ‘[Link]’ avec bloc-note.

2. Structure de base d’une page HTML

Etape 1 : Commencer par écrire la structure de base suivante :

<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8">
<title>Ma première page web</title>
</head>

<body>

</body>

</html>

Etape 2 : Enregistrer le fichier. (ctrl+s)


Etape 3 : l’ouvrir avec un navigateur web.

3. Ajouter un titre et modifier la taille du texte

Etape1 : Dans la partie <body>, ajouter :

<h1> Bienvenue sur ma première page web </h1>

Etape 2 :Ajouter ensuite un paragraphe avec une taille d’écriture personnalisée :

<p style="font-size:20px;"> Ceci est mon premier site web réalisé en


HTML. </p>

Etape 3 : Modifier la valeur 20px en 30px pour changer la taille du texte.

4. Ajouter une image

Etape 1 :Placer cette image dans le même dossier que le fichier ‘MonSiteWeb’ sous le nom ‘[Link]’.

Etape 2 :Ajouter le code suivant dans le <body> :

<h2>Mon image</h2>
<img src="[Link]" alt="un ordinateur" width="300">
Etape 3 : Changer la valeur width en 400 pour modifier la taille de l’image.

5. Ajouter un tableau

Etape1: Ajouter le code suivant apres l’image :

<h2>Mon tableau</h2>
<table border="1">
<tr> <th>Nom</th> <th>Prénom</th> <th>Age</th> </tr>
<tr> <td>Dupont</td> <td>Jean</td> <td>20</td> </tr>
<tr> <td>Martin</td> <td>Sophie</td> <td>22</td> </tr>
</table>

Explication : La balise <table> crée le tableau.


La balise <tr> crée une ligne.
La balise <th> crée une cellule d’en-tête.
La balise <td> crée une cellule normale.

6. Ajouter un formulaire

Etape1: Ajouter le code suivant apres le tableaux

<h2>Formulaire de contact</h2>
<form>
<label>Nom :</label><br>
<input type="text" name="nom"><br><br>
<label>Email :</label><br>
<input type="email" name="email"><br><br>

<label>Message :</label><br>
<textarea name="message" rows="4" cols="30"></textarea><br><br>

<input type="submit" value="Envoyer">


</form>

La balise <form> permet de créer un formulaire.


La balise <input> permet de créer des champs de saisie.
La balise <textarea> permet d’écrire un message plus long.
Le bouton submit permet d’envoyer le formulaire.

7. Vérification

Etape 1 : Enregistrer le fichier. (ctrl+s)


Etape 2 : Ouvrir le fichier [Link] dans un navigateur.
Etape 3 : Vérifier que :

 Le titre s’affiche correctement


 La taille du texte est modifiée
 L’image apparaît
 Le tableau est visible
 Le formulaire fonctionne visuellement

Vous aimerez peut-être aussi