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 [Link] 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 [Link]
5) Ouvrez le fichier [Link], 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="[Link]" 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 [Link] 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 [Link]
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>
<H2> titre de taille 2 </H2>
<H3> titre de taille 3 </H3>
<H4> titre de taille 4 </H4>
<H5> titre de taille 5 </H5>
<H6> titre de taille 6 </H6>
</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 [Link] 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= "[Link]" width="200" height="150">
<HR color ="#123456" width="400" size="2">
<img src= "[Link]" 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 [Link]
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 = "[Link]">
<H1> <center>BONJOUR </center></H1>
</BODY>
</HTML>
TIC Bac Sc Info
Enregistrer et déroulez le menu Affichage et choisissez Actualiser. Le résultat est la suivante
16) dans votre répertoire de travail, créez un fichier [Link]
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>
Enregistrer et déroulez le menu Affichage et choisissez Actualiser. Le résultat est la suivante
TIC Bac Sc Info
17) La gestion des tableaux
dans votre répertoire de travail, créez un fichier [Link]
Déroulez le menu Affichageà Source et saisissez le code suivant
<html>
<head>
Le résultat est le
<title> tableau 1</title>
</head>
suivant :
<body>
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
</BODY>
</HTML>
<html>
<head> Le résultat est le suivant :
<title> tableau 2</title>
</head>
<body>
<TABLE border="2">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
</BODY>
</HTML>
TIC Bac Sc Info
<html>
<head> Le résultat est le suivant :
<title> tableau 3</title>
</head>
<body>
<TABLE border="2" cellspacing=10 cellpadding=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</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>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
</BODY>
</HTML>
<html>
<head>
Le résultat est le
<title> tableau 5</title>
</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 :
<title> tableau 6</title>
</head>
<body>
<TABLE width=60% border=1>
<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>
<title> tableau 7</title>
</head>
<body>
<TABLE width=60% border=1>
<TR>
<TD width=33% ROWSPAN=2 align=center valign=middle>1</TD>
<TD width=33%>2</TD>
<TD width=33%>3</TD>
</TR> Le résultat est le suivant :
<TR>
<TD width=33%>4</TD>
<TD width=34%>5</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Liens hypertextes externes
18) dans votre répertoire de travail, créez un fichier [Link]
Déroulez le menu Affichageà Source et saisissez le code suivant
<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="[Link]
</tr>
<tr>
<td> Accéder à l'annuaire Yahoo</td>
<td><a href="[Link] [Link]</a> </td>
</tr>
<tr>
<td> Envoyer un Email</td>
<td> <a href="[Link] Nous contactez</a></td>
</tr>
<tr>
<td> Ouvrir un fichier HTML</td>
<td> <a href="[Link] page Web dans le disuqe dur</a></td>
</tr>
<tr>
<td> Télécharger un fichier</td>
<td> <a href="[Link] Un fichier HTML
compréssé</a></td>
</tr>
</table>
</body>
</head>
</html>
TIC Bac Sc Info
Enregistrer et déroulez le menu Affichage et choisissez Actualiser. Le résultat est la suivante
Liens hypertextes internes
19) dans votre répertoire de travail, créez un fichier [Link]
Déroulez le menu Affichageà Source et saisissez le code suivant
<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 ="[Link]" width ="400" height="800"><hr>
<h2> <a name="BAS"> Bas de la page</a></h2>
<a href="#HAUT"> Remonter</a>
</body>
</html>
Enregistrer et déroulez le menu Affichage et choisissez Actualiser. Le résultat est la suivante
.
TIC Bac Sc Info
La création de formulaires HTML
20) dans votre répertoire de travail, créez un fichier [Link]
Déroulez le menu Affichageà Source et saisissez le code suivant
<html>
<head>
<title> Les formulaires </title>
</head>
<body>
<center> <h1> Inscription </h1> </center>
<form action="[Link]" 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
Enregistrer et déroulez le menu Affichage et choisissez Actualiser. Le résultat est la suivante
TIC Bac Sc Info
Les cadres
21) Dans votre répertoire de travail, créez trois nouveaux fichiers [Link], [Link] et
[Link]
Déroulez le menu Affichageà Source du fichier [Link] et saisissez le code suivant
<html>
<head><title> Les cadres </title></head>
<Frameset cols ="250,*">
<frame src="[Link]" name="G">
<frame src="[Link]" name="D">
</Frameset>
</html>
Déroulez le menu Affichageà Source du fichier [Link] 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 [Link] 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="[Link]" target="D" <B> Les images </B> </a><br>
<a href="[Link]" target="D" <B> Les Tableaux </B> </a><br>
<a href="[Link]" target="D" <B> Les listes </B> </a><br>
<a href="[Link]" target="D" <B> Les titres </B> </a><br>
</body>
</html>
Enregistrez, ouvrez [Link], actualisez et testez les liens.