Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

TIC Bac Sc Info TP HTML 1) Créer un nouveau répertoire sous C : avec le nom vot

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 : 6) déroulez le menu Affichage et choisissez Actualiser. Le résultat est la suivante : <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> 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 : 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 <html> <head> <title> Textes et paragraphes </title> </head> <body> <P align= center> <Font color="blue" size=7 face="arial"> <B> Développement Web </B> </Font> </P> <HR color="#884412" width="400" size="5"> <center> <font size="6"> les images pour le web </font> </center> <HR color ="#000000" width="500"> <BR> <B> Langage HTML </B> <BR> <I> Langagae Javascript </I> <BR> <U> Langage PHP </U> <BR> <P> <Font size ="5"> Autre </Font> </P> Merci </Body> </html> TIC Bac Sc Info 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 <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> TIC Bac Sc Info 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> 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> <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 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 TP6.html Déroulez le menu Affichageà Source et saisissez le code suivant <html> <head> <Title> Les listes </title></head> <body> <H4> Les types scalaires </H4> <UL> <LI> Entier </LI> <LI> Caractère </LI> <LI> Booléen </LI> <LI> Le type énuméré </LI> </UL> <H4>Les fonctions pour un type énuméré </H4> <OL> <LI> Ord </LI> <LI> Succ </LI> <LI> Pred </LI> </OL> <H4> Lexique</H4> <DL> <DT>A</DT> <DD>Array Abs Access </DD> <DT>B</DT> <DD>Bit Byte Boolean</DD> <DT>C</DT> <DD>Com cos chr char </DD> </DL> </body> </html> 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 TP7.html Déroulez le menu Affichageà Source et saisissez le code suivant <html> <head> <title> tableau 1</title> </head> <body> <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> </BODY> </HTML> <html> <head> <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> Le résultat est le suivant : Le résultat est le suivant : TIC Bac Sc Info <html> <head> <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> <title> tableau 4</title> </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> <title> tableau 5</title> </head> <body> <TABLE width=60% border=1> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> </TABLE> </BODY> </HTML> <html> <head> <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> Le résultat est le suivant : Le résultat est le suivant : Le résultat est le suivant : Le résultat est le suivant : 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> <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 TP8.html 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="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> Le résultat est le suivant : 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 TP9.html 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 ="image1.jpg" 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 TP10.html 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="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 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 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. uploads/S4/ tp-html.pdf