Scribd Logo
Importer

Bienvenue sur Scribd !

  • Apprendrelehtml

    Transféré par

    clglonguyon
    19 vues13 pages

    Titre original

    apprendrelehtml

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    19 vues13 pages

    Apprendrelehtml

    Transféré par

    clglonguyon

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 13

    APPRENDRE LE HTML

    ACTIVIT 1 : dcouvrir le langage HTML Ouvrir une page quelconque sur Internet. Affichage Source / Code source de la page <html> balise racine ; indique que le langage utilis dans le document est du HTML <head> <title> = en-tte informations destines aux navigateurs et aux moteurs de </title> recherche (non visibles par linternaute, titre except) </head> <body> < > = balise ouvrante = corps de la page textes, </ > = balise fermante tout ce qui se trouve entre <body> et images Sauf exception (<br />, <img />) </body> est visible par linternaute. chaque balise de dbut </body> daction < > correspond une </html> fin du document balise de fin daction </ >.

    A retenir : Lordre dans lequel senchanent les balises <html> <body> </body> </html> Pour linstant nous ne nous servirons pas des balises <head> et <title>.

    Valrie GUERIN

    ACTIVIT 2 : crire un code source dans Bloc-notes Dmarrer Tous les programmes Accessoires Bloc-notes (= diteur de texte) Taper : <html> <body> phrase 1 </body> </html>

    = code source

    Fichier Enregistrer sous Enregistrer le fichier dans son dossier perso sous le nom page1.html (attention ne pas oublier lextension .html) Fermer la fentre Bloc-notes. Ouvrir son dossier perso ; fichier page1.html pour afficher la page web. Rsultat lcran : phrase 1

    Fermer la page. Conseils : A la maison, sur son PC perso, crer un dossier web ou html pour y ranger ses exercices. Ne jamais mettre de caractres accentus, de majuscules ou despaces dans un nom de fichier destin au Web

    Valrie GUERIN

    ACTIVIT 3 : utiliser la balise <br /> Ouvrir le fichier page1.html dans Bloc-notes afin daccder au code source de la page : D Fichier page1.html Ouvrir avec Blocs-notes Taper une deuxime phrase sous la premire. <html> <body> phrase 1 phrase 2 </body> </html> Enregistrer les modifications ralises ( Fichier Rduire la fentre Blocs-notes. Ouvrir la page web page1.html. Rsultat lcran : phrase 1 phrase 2 Enregistrer).

    Observation : la deuxime phrase est ct de la premire, et non en dessous. On va donc devoir ajouter entre les deux phrases une balise indiquant quil faut passer la ligne, la balise <br />. <html> <body> phrase 1 <br /> phrase 2 </body> </html> Fichier Enregistrer Rduire la fentre Blocs-notes. Actualiser ( Actualiser ou modifications. Rsultat lcran : phrase 1 phrase 2 3 F5) la page web page1.html pour faire apparatre le rsultat des

    Valrie GUERIN

    ACTIVIT 4 : utiliser les balises <b> et <i> Mettre la premire phrase en italique (balise <i>) ; ajouter une troisime phrase en gras (balises <b>) et en italique sous les deux prcdentes. <html> <body> <i> phrase 1 </i> <br /> phrase 2 <br /> <b> <i> phrase 3 </i> </b> </body> </html> Rsultat lcran : phrase 1 phrase 2 phrase 3

    rle des balises = structurer le texte du document HTML (cest--dire indiquer ce qui est titre, paragraphe, tableau, etc.) afin que le navigateur puisse en interprtant ce code afficher les lments de la page web

    Valrie GUERIN

    ACTIVIT 5 : rechercher dautres types de balises HTML Chercher sur Google dautres exemples de balises HTML. <abbr> abrviation <img /> image <p> paragraphe <strong> texte important <h1> </h1> : titre de niveau 1 <h2> </h2> : titre de niveau 2 <h3> </h3> : titre de niveau 3 <h4> </h4> : titre de niveau 4 <h5> </h5> : titre de niveau 5 <h6> </h6> : titre de niveau 6 etc. Sexercer : 1- Recopier dans Bloc-notes le code de lactivit 4. 2- Remplacer les balises <i>, </i>, <b> et </b> par des balises de niveaux de titre. 3- Observer le rsultat lcran. <h1> phrase 1 </h1> <br /> <h3> phrase 2 </h3> <br /> <h5> phrase 3 </h5>

    = niveaux de titre : pour obtenir des titres de diffrentes tailles (h1


    h6)

    Valrie GUERIN

    ACTIVIT 6 : afficher le titre de sa page HTML dans la barre de titre du navigateur Choisir un titre pour sa page, par exemple Premier document. <html> <head> <title> Premier document </title> </head> <body> <i> phrase 1 </i> <br /> phrase 2 <br /> <b> <i> phrase 3 </i> </b> </body> </html> Rsultat lcran :
    Premier document

    Sexercer : 1- Modifier le texte entre <title> et </title>. 2- Actualiser ( Actualiser ou F5) la page web. 3- Observer le rsultat des modifications dans la barre de titre du navigateur. <title> Nouveau titre </title>

    Valrie GUERIN

    ACTIVIT 7 : modifier la couleur du fond dcran <html> <head> <title> Premier document </title> </head> <body bgcolor="yellow"> <i> phrase 1 </i> <br /> phrase 2 <br /> <b> <i> phrase 3 </i> </b> </body> </html> La balise <body> possde de nombreux attributs, par ex. : text : <body text="pink" > texte en rose leftmargin : <body leftmargin="100"> marge gauche de 100 pixels de large topmargin : <body topmargin="50"> marge du haut de 50 pixels de large background : cf. activit 8

    Sexercer : 1- Mettre le fond dcran en rouge, en bleu, en vert, etc. 2- Ecrire un code comportant plusieurs attributs la suite de la balise <body> (les arguments topmargin, rightmargin puis bgcolor par exemple). <body bgcolor="red"> <body bgcolor="blue"> <body bgcolor="green"> <body topmargin="100" rightmargin="70" bgcolor="purple">

    Valrie GUERIN

    ACTIVIT 8 : utiliser une photo JPEG comme fond dcran Commencer par enregistrer dans son dossier perso une photo au format JPEG sous le nom photo1.jpg. <html> <head> <title> Premier document </title> </head> <body background="photo1.jpg"> <i> phrase 1 </i> <br /> phrase 2 <br /> <b> <i> phrase 3 </i> </b> </body> </html> Sexercer : 1- Enregistrer une autre photo (sous le nom photo2.jpg par exemple) dans son dossier perso. 2- Remplacer photo1.jpg par photo2.jpg dans le code prcdent. 3- Actualiser ( Actualiser ou F5) la page web. 4- Observer le rsultat lcran. <body background="photo2.jpg">

    Valrie GUERIN

    ACTIVIT 9 : dfinir les caractristiques dune image Revenir un fond dcran jaune (cf. activit 7). Enregistrer une image sous le nom image1.jpg dans son dossier perso. Ajouter cette image sur la page en en fixant les caractristiques, par exemple une longueur de 204 pixels, une largeur de 152 pixels, et pas de bordure. <html> <head> <title> Premier document </title> </head> <body bgcolor="yellow"> <i> phrase 1 </i> <br /> phrase 2 <br /> <b> <i> phrase 3 </i> </b> <br /> <img src="image1.jpg" width="204" height="152" border="0"> </body> </html> Sexercer : Introduire lattribut title="Mon image" aprs border="0" ; actualiser puis observer ce qui se passe quand le pointeur de la souris survole limage Refaire lexercice prcdent avec une autre image (image2.jpg), en changeant la largeur, la hauteur et en mettant une bordure (border="1"). <img src="image2.jpg" width="102" height="76" border="1" title="Mon image" > NB Lattribut alt (texte alternatif) est rgulirement utilis contre-emploi pour crer une infobulle au survol dun lment. Or cette fonction est assigne lattribut title. La confusion est frquente car Internet Explorer affiche galement une infobulle sur le contenu de lattribut alt.

    Valrie GUERIN

    ACTIVIT 10 : crer un tableau Pour crer un tableau on a besoin des balises : <table> </table> tableau <tr> </tr> ligne de cellules <th> </th> cellule den-tte <td> </td> cellule ordinaire en-tte 1 cellule 1.1 cellule 1.2 cellule 1.3 en-tte 2 cellule 2.1 cellule 2.2 cellule 2.3 en-tte 3 cellule 3.1 cellule 3.2 cellule 3.3

    Partir du code de lactivit 9 et insrer un tableau sous limage ; faire en sorte que ce tableau occupe toute la largeur de la page (width="100%") et quil ait une bordure. <html> <head> <title> Premier document </title> </head> <body bgcolor="yellow"> <i> phrase 1 </i> <br /> phrase 2 <br /> <b> <i> phrase 3 </i> </b> <br /> <img src="image1.jpg" width="204" height="152" border="0" title="Mon image"> <br /> <table width="100%" border="1"> <tr> <th>en-tte 1</th> <th>en-tte 2</th> <th>en-tte 3</th> </tr> <tr> <td>cellule 1.1</td>
    Valrie GUERIN

    10

    <td>cellule <td>cellule </tr> <tr> <td>cellule <td>cellule <td>cellule </tr> <tr> <td>cellule <td>cellule <td>cellule </tr> </table> </body> </html>

    2.1</td> 3.1</td>

    1.2</td> 2.2</td> 3.2</td>

    1.3</td> 2.3</td> 3.3</td>

    Sexercer : Remplacer le tableau prcdent par un tableau noccupant plus que la moiti de la page ; faire en sorte que sa bordure soit de couleur rouge et qu lintrieur des cellules le texte soit centr (style= "border-color : red ; text-align: center"). <table border="1" style="border-color: red; text-align: center" width="50%">

    Valrie GUERIN

    11

    ACTIVIT 11 : insrer des liens hypertextes Crer une deuxime page HTML (page2.html). Insrer un lien interne de la page1.html vers la page2.html et un lien externe de la page1.html vers Google (<a href= " ">). <html> <head> <title> Premier document </title> </head> <body bgcolor="yellow"> <i> phrase 1 </i> <br /> phrase 2 <br /> <b> <i> phrase 3 </i> </b> <br /> <img src="image1.jpg" width="204" height="152" border="0" title="Mon image"> <br /> <table width="100%" border="0"> <tr> <th>en-tte 1</th> <th>en-tte 2</th> <th>en-tte 3</th> </tr> <tr> <td>cellule 1.1</td> <td>cellule 2.1</td> <td>cellule 3.1</td> </tr> <tr> <td>cellule 1.2</td> <td>cellule 2.2</td> <td>cellule 3.2</td> </tr> <tr> <td>cellule 1.3</td>
    Valrie GUERIN

    12

    <td>cellule 2.3</td> <td>cellule 3.3</td> </tr> </table> </body> </html> <br> <a href="page2.html"> Lien vers la page 2 </a> <br> <a href="http://www.google.fr"> Lien vers Google </a> </body> </html> Sexercer : Depuis la page 2, crer un lien interne vers la page 1 et un lien externe vers Yahoo (http://www.yahoo.fr). <a href="page1.html"> <a href="http://www.yahoo.fr">

    Valrie GUERIN

    13

    Vous aimerez peut-être aussi