TP HTML

TIC
Bac Sc Info
TP HTML
1) Créer un nouveau répertoire sous C : avec le nom votre nom et votre prénom.
2) Dans ce répertoire, cliquez par le bouton droit de la souris sur une zone vide et
choisissez nouveau document texte.
3) Ouvrez le document et déroulez le menu fichier et choisissez Enregistrer sous et donnez
le nom TP1.html pour le document (le document est transformé en page web)
4) A partir du dossier images dans C : copier une image de type jpg dans votre répertoire de
travail et la renommez en image1.jpg
5) Ouvrez le fichier TP1.html, déroulez le menu Affichage et choisissez Source et tapez le
code suivant :

<html>
<head>
<title> MA PREMIERE PAGE
</title>
</head>
<body>
<center>
<font size="5" color="blue">
page web N°1
</font> <br><hr><br>
<img src="image1.jpg" width="80"

heigth="78">

</center>
</body>
</html>

6) déroulez le menu Affichage et choisissez Actualiser. Le résultat est la suivante :

TIC Bac Sc Info

7) créez un nouveau fichier tp2.html dans votre dossier de travail
8) déroulez le menu Affichageà Source et saisissez le code suivant :

<html> <HR color ="#000000" width="500">

<head> <BR>
<title>
<B> Langage HTML </B>
Textes et paragraphes <BR>
</title> <I> Langagae Javascript </I>
</head> <BR>
<body> <U> Langage PHP </U>
<P align= center> <BR>
<Font color="blue" size=7 face="arial"> <P>
<B> Développement Web </B> <Font size ="5"> Autre </Font>

</Font> </P>
</P>
Merci
<HR color="#884412" width="400" size="5">
</Body>
<center> </html>
<font size="6"> les images pour le web </font>
</center>

9) Déroulez le menu Affichage et choisissez Actualiser. Le résultat est la suivante :

10) Dans votre répertoire de travail, créez un fichier TP3.html
11) déroulez le menu Affichageà Source et saisissez le code suivant

TIC Bac Sc Info

<html>
<head>
<title> Les titres </title>

</head>

<body>
<P align="center"> <font size=7> Les titres </font> </p>
<BR>
<HR>
<P><H1> On distingue six niveaux pour les titres</H1> </P>
<H1> titre de taille 1 </H1>
</body>
</html>

12 ) déroulez le menu Affichage et choisissez Actualiser. Le résultat est la suivante :

13) dans votre répertoire de travail, créez un fichier TP4.html et copiez un deuxième image
nommé image2.
14) déroulez le menu Affichageà Source et saisissez le code suivant

TIC Bac Sc Info

<html>
<head>
<title> Les images </title>
</head>
<body>
<P align="center"> <font size=6> L'insertion des images </font><BR> </p>
<HR COLOR= "#123456" width="400"size="2">

<img src= "image1.jpg" width="200" height="150">

<HR color ="#123456" width="400" size="2">

<img src= "image2.jpg" width="200" height="150" Align ="right" border ="2" ALT =
"image insérée">
</body>
</html>

Enregistrer et déroulez le menu Affichage et choisissez Actualiser. Le résultat est la suivante

15) dans votre répertoire de travail, créez un fichier TP5.html
Déroulez le menu Affichageà Source et saisissez le code suivant :

<html>
<head>
<title> Insertion d'une image comme arrière-plan </title>
</head>
<body background = "image1.jpg">
<H1> <center>BONJOUR </center></H1>
</BODY>
</HTML>
TIC Bac Sc Info


Déroulez le menu Affichageà Source et saisissez le code suivant
<html> <H4> Lexique</H4>
<head> <DL>
<Title> Les listes </title></head> <DT>A</DT>
<body> <DD>Array Abs Access </DD>
<H4> Les types scalaires </H4> <DT>B</DT>
<UL> <DD>Bit Byte Boolean</DD>
<LI> Entier </LI> <DT>C</DT>
<LI> Caractère </LI> <DD>Com cos chr char </DD>
<LI> Booléen </LI> </DL>
<LI> Le type énuméré </LI> </body>
</UL> </html>
<H4>Les fonctions pour un type énuméré
</H4>
<OL>
<LI> Ord </LI>
<LI> Succ </LI>
<LI> Pred </LI>
</OL>
TIC Bac Sc Info

17) La gestion des tableaux
dans votre répertoire de travail, créez un fichier TP7.html
<html>
<head>
Le résultat est le
<title> tableau 1</title>
</head>
suivant :
<body>
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
</BODY>
</HTML>

<html>
<head> Le résultat est le suivant :
</head>
<body>

<TABLE border="2">
</TABLE>
</BODY>
</HTML>

TIC Bac Sc Info

<html>
<head> Le résultat est le suivant :
</head>
<body>

<TABLE border="2" cellspacing=10 cellpadding=10>
</TABLE>
</BODY>
</HTML>

<html>
<head> Le résultat est le
<title> tableau 4</title> suivant :
</head>

<body>

<TABLE border="2" cellpadding="10" bgcolor="blue">
<TR bgcolor="yellow"><TD bgcolor="red">1</TD><TD>2</TD></TR>
</TABLE>
</BODY>
</HTML>

<html>
<head>
Le résultat est le
</head>
suivant :
<body>

<TABLE width=60% border=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
</BODY>
</HTML>

<html> Le résultat est le
<head> suivant :
</head>
<body>
<TR><TD COLSPAN=3>1</TD></TR>
<TR><TD width=33%> 2</TD><TD width=33%> 3</TD><TD width=34%>4</TD></TR>
</TABLE>
</BODY></HTML>

TIC Bac Sc Info
<html>
<head>
</head>
<body>
<TR>
<TD width=33% ROWSPAN=2 align=center valign=middle>1</TD>
<TD width=33%>2</TD>
</TR> Le résultat est le suivant :
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Liens hypertextes externes
<html>
<head>
<title> Les liens hypertextes </title>
</head>
<body>
<h3> Activer le lien convenable </h3>
<table width="480" border="2">
<tr>
<td> Rechercher avec Google</td>
<td><a href="http://www.google.fr">WWW.Goggle.fr</a></td>
</tr>
<tr>
<td> Accéder à l'annuaire Yahoo</td>
<td><a href="http://www.Yahoo.fr"> WWW.Yahoo.fr</a> </td>
</tr>
<tr>
<td> Envoyer un Email</td>
<td> <a href="mailto://contact@Edunet.tn"> Nous contactez</a></td>
</tr>
<tr>
<td> Ouvrir un fichier HTML</td>
<td> <a href="file://C:/tphtml/tp4.html">Une page Web dans le disuqe dur</a></td>
</tr>
<tr>
<td> Télécharger un fichier</td>
<td> <a href="ftp://ftp.commentcamarche.net/docs/html.zip"> Un fichier HTML
compréssé</a></td>
</tr>
</table>
</body>
</head>
</html>
TIC Bac Sc Info

Liens hypertextes internes
<html>
<head>
<title> Les liens hypertextes internes </title>
</head>
<body>
<h1> <a name="HAUT"> Voilà une page très longue </a> </h1>
<a href="#BAS"> bas de la page</a>
<hr> <img src ="image1.jpg" width ="400" height="800"><hr>
<h2> <a name="BAS"> Bas de la page</a></h2>
<a href="#HAUT"> Remonter</a>
</body>
</html>

.
TIC Bac Sc Info

La création de formulaires HTML
<html>
<head>
<title> Les formulaires </title>
</head>
<body>
<center> <h1> Inscription </h1> </center>
<form action="sauvegarder.html" name="F1" method="get">
<h2>
<p> Votre nom: <input name ="nom" type="text" size="20" maxlength="30"> </p>
<p> Votre prénom:<input name="prenom" type ="text" size="20" maxlength="20"> </p>
<p> Votre adresse: <br> <textarea name="adresse" cols="25" rows="3"></textarea></p>
<p> Votre Bac:<br> <select name="bac" size="6">
<option selected>Sc-Info</option>
<option>Math</option>
<option>Sc-Exp</option>
<option>Sc-Tech</option>
<option>Lettre</option>
<option>Sc-Eco</option>
</select>
</p>
<p> Donnez votre 2ème langue</p>
<p> <input type="radio" name="langue" value ="Français"> Français<br>
<input type="radio" name="langue" value ="Anglais"> Anglais<br>
<input type="radio" name="langue" value ="Allemand"> Allemand<br>
</p>
<p> Vos options: </p>
<p> <input t type="checkbox" name="option" value ="Musique"> Musique <br>
<input t type="checkbox" name="option" value ="Théatre"> Théatre <br>
<input t type="checkbox" name="option" value ="Dessin"> Dessin <br>
</p>
<p> Votre photo jpg, png, bmp,...:<br>
<input name="fichier" type="file" size="35">
</p>
<input type="reset" value ="Annuler">
</h2>
</form>
</body>
</html>
TIC Bac Sc Info

TIC Bac Sc Info

Les cadres
21) Dans votre répertoire de travail, créez trois nouveaux fichiers cadreg.html, cadred.html et
TP11.html
Déroulez le menu Affichageà Source du fichier TP11.html et saisissez le code suivant
<html>
<head><title> Les cadres </title></head>
<Frameset cols ="250,*">
<frame src="cadreg.html" name="G">
<frame src="cadred.html" name="D">
</Frameset>
</html>
Déroulez le menu Affichageà Source du fichier cadred.html et saisissez le code suivant
<html>
<head><title>Accueil</title></head>
<body bgcolor="#FFF0C0" text ="#000000" link="#A00000"
vlink="#600000" alink="#A00000">
<h1> Bienvenue </h1>
<p> Choisissez un lien à gauche! </p>
</body>
</html>
Déroulez le menu Affichageà Source du fichier cadreg.html et saisissez le code suivant
<html>
<head><title> sommaire de liens</title></head>
<body bgcolor="#E0C0FF" text="#000000" link="#804080" vlink="#603060"
alink="#804080">
<h1> Navigation</h1>
<a href="tp4.html" target="D" <B> Les images </B> </a><br>
<a href="tp7.html" target="D" <B> Les Tableaux </B> </a><br>
<a href="tp6.html" target="D" <B> Les listes </B> </a><br>
<a href="tp3.html" target="D" <B> Les titres </B> </a><br>
</body>
</html>
Enregistrez, ouvrez TP11.html, actualisez et testez les liens.

TP HTML

Transféré par

Informations du document

Titre original

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

TP HTML

Transféré par

Droits d'auteur :

Formats disponibles

TIC

Enregistrer et déroulez le menu Affichage et choisissez Actualiser. Le résultat est la suivante

Enregistrer et déroulez le menu Affichage et choisissez Actualiser. Le résultat est la suivante

Vous aimerez peut-être aussi