Fiche N° 9 SNT

Texte intégral

(1)Continuons notre historique. HTML et CSS. Fiche N° 9. Tim Berners-Lee développe le premier navigateur web (logiciel permettant de lire des pages contenant des hypertextes), il l’appelle simplement "WorldWideWeb". Il faudra attendre 1993 et l’arrivée du navigateur web "NCSA Mosaic" pour que le web commence à devenir populaire en dehors du petit monde de la recherche. Les navigateurs sont chargés d’interpréter le langage html afin d’organiser et d’afficher les informations. SNT. Un peu d’histoire. Exercice 3 : Toujours facile. Le "World Wide Web", plus communément appelé "Web" a été développé au CERN (Conseil Européen pour la Recherche Nucléaire) par le Britannique Sir Timothy John Berners-Lee et le Belge Robert Cailliau au début des années 1990. A cette époque les principaux centres de recherche mondiaux étaient déjà connectés les uns aux autres sur internet. Mais, les échanges d’informations ne sont pas très efficaces. Un besoin d’organisation de ces informations s’avère nécessaire Pour faciliter les échanges d’information Tim Berners-Lee met au point le principe du lien hypertexte. Le système hypertexte permet, à partir d’un document, de consulter d’autres documents en cliquant sur des mots clés. Ces mots "cliquables" sont appelés hyperliens et sont souvent soulignés et en bleu. Ces hyperliens sont plutôt connus aujourd’hui sous le simple terme de "liens hypertexte". Le langage utilisé pour cet échange d’information organisé par lien hypertexte sera appelé langage HTML . IL utilisera un protocole appelé http dont on reparlera plus tard.. Citer trois navigateurs WEB parmi les plus utilisés actuellement. A la découverte du langage html Exercice 4 :. Exercice 1 :. 1. Consulter, avec votre navigateur, le site suivant : cliquer ici http://hgurgey.free.fr/recette/tarte-citron/tarte_citron.html Attention, il y a d’abord un moins puis un underscore pour tarte citron. 2. Dans votre navigateur, faire un clic-droit et cliquer sur "afficher le code source". 3. On repère toute une série d’instructions entre < et > . On dit qu’il s’agit de balise (markup en anglais). 4. Citer quelques balises que vous pouvez repérer dans ce code source . sans s’occuper pour l’instant de leur signification - ................................................................................. - .................................................................................. Quelle est la traduction (en anglais) du sigle html ? - ...................................................................................... Information. Exercice 2 : Le premier site WEB. Votre navigateur interprète les balises pour organiser l’information. Le premier site WEB conçu par Tim Berners-Lee est encore disponible à cette adresse : Le premier site web http://info.cern.ch/hypertext/WWW/TheProject.html Consultez le ! ! Cet exercice n’était pas très compliqué. 1.

(2) Exercice 7 : Les balises : head - meta - title. Information L’objectif des exercices ci-dessous est de mettre en place sous forme de site internet une recette de tarte au citron puis une recette de pâte sablée. Vous trouverez dans le dossier de votre classe, dans le sous dossier html du dossier SNT les deux fichiers pdf suivants :. 1. Ajouter, à l’intérieur de <html>......< /html> les instructions :. n tarte_citron.pdf n patesablee.pdf Ouvrir ces fichiers. Notre objectif final est de reconstruire ces pages au format html. Dans une première partie, nous nous intéresserons uniquement à la structure de la page à l’aie de balises. Vous serez certainement déçus du rendu mais cet travail viendra plus tard avec l’utilisation de fichier de mise en forme (fichier CS).. On pensera à bien enregistrer le fichier "tarte_citron.html" systématiquement et à actualiser le navigateur afin de visualiser les changements effectués 2. Exercice 5 : Pour bien commencer Créer un dossier mon_site dans votre espace personnel. Tous les fichiers que vous aurez l’occasion d’écrire seront obligatoirement sauvegardés dans ce dossier. C’est tout pour l’instant pour cet exercice ! !. Ouvrir un l’éditeur de texte NotePad s’il est disponible ou wordpad sion. Editer les éléments suivants :. 2. Enregistrer votre fichier en l’appelant "tarte_citron.html". 3. Une fois le fichier créée double-cliquer sur le fichier . Il faudra, bien sur, retourner dans le dossier mon_site pour avoir accès au fichier Quel est, à votre avis, le rôle de < !doctype html > - .................................................................................. 4. a. head - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. b. meta - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. c. title - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. Exercice 8 : Les balises body - hi - p. Exercice 6 : Premier site web 1. Quel est le rôle des balises. 2. 1. Sous la balise head entrer les instructions :. 2. Quel est le rôle des balises.

(3) a. body - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. b. h1 - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. c. h2 - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. d. p - ........................................................................... Exercice 9 : Les balises ul - ol -li 1. En dessous sous ingrédients entrer les instructions :. 2. Quel est le rôle des balises ul et li ? - ................................................................................. - .................................................................................. Exercice 10 : 1. 2. Juste après <h2> préparation < h2 > insérer toutes ces instructions : 3. Quel est le rôle de la balise ol ? - ................................................................................. - ..................................................................................

(4) 2. Taper juste après la balise <body> :. Exercice 11 : <img src="images/citron.png" /> Ajoute en bas de page html dans un paragraphe ceci : Astuce : Selon la consistance que l’on souhaite avoir pour la meringue, on peut cuire la tarte 10 min en mode grill ou jusqu’à deux heures à feu doux. Pour la mise en forme du mot Astuce : on utilisera le niveau de titre <h1> et bien sur les balise <p> et <p> pour délimiter le paragraphe. Exercice 12 : Les balises strong - mark - em Mettre le mot célèbre en contenu d’une balise <strong>.. 2. Mettre "cuire à blanc" en contenu d’une balise <em>. 3. Dans les ingrédients, mettre "sans traitement après récolte" en contenu d’une balise <i>.. 4. Mettre "attention de toujours remuer lorsque les oeufs sont ajoutés, car la crème de citron pourrait brûler" en contenu d’une balise <mark>. 5. Quel est le rôle des balises a. strong - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. b. mark - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. c. em - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. d. i - ........................................................................... Mettre l’autre image juste avant l’image des citrons. 4. Quel est le rôle de la balise img ? - .................................................................................. Exercice 14 : Les liens hypertexte. N’oubliez pas de fermer les balises 1. 3. Tout en bas de votre page web, ( mais avant la balise <body> ) taper :. Actualiser la page web Quel est le rôle de la balise a ? - ...................................................................................... Exercice 15 : Pâte sablée Vous trouverez dans le dossier de votre classe, dans le sous dossier html du dossier SNT les fichiers ci-dessous : n patesablee.txt n patesablee.pdf n patesablee.png n tarteletteframboises.png. Exercice 13 : Inclure une image. Sur le même modèle que la recette de la tarte au citron meringuée, créer une page web de la recette de la pâte sablée. Le texte de la recette se trouve dans le fichier patesablee.txt. Vous trouverez dans le dossier de votre classe, dans le sous dossier html du dossier SNT les deux images ci-dessous : n tartecitronmeringuee.png. Exercice 16 : D’une page vers une autre : lien relatif. n citron.png 1. Créer un sous dossier images dans le dossier Enregistrer les deux images dans ce dossier. mon_site. Créer un lien hypertexte de la recette de la tarte au citron meringuée vers la pâte sablée lors d’un clic sur l’ingrédient "pâte sablée". 4.

(5) Exercice 17 : Pour aller plus loin. Information. Tester ceci :. Lorsque l’on construit un site internet , on crée plusieurs fichiers html qui, en gros, correspondent aux différentes pages de ce site.(par exemple : pageacceuil.html , pagesommaire.html .... etc ..) En général, il faut une unité de présentation dans tout le site, par souci d’esthétisme d’une part mais aussi pour des facilités de navigation des visiteurs. Plutôt que de répéter sur chaque page ces styles de présentation, on crée un fichier unique qui rassemble tous les styles de présentation dont on a besoin dans un seul fichier. Ce fichier devra posséder l’extension .css ( Par exemple : monstyle.css ) Dans l’en-tête des pages html on précisera la feuille de style utilisée avec les instructions. On rajoute une feuille de style Exercice 18 : Préparation 1. Créer dans le dossier "mon_site" un nouveau dossier que vous nommerez styles. 2. Dans le dossier de votre classe vous trouverez les fichiers n style1.css n style2.css Copier puis coller ces deux fichiers dans le dossier style. <head> <link rel="stylesheet" type="text/css" href="monstyle.css"> </head>. Exercice 19 : C’est parti pour le style 1. Rajouter juste en dessous de la balise title :. Exercice 21 : Utilisation d’un fichier css <link rel="stylesheet" type="text/css" href="./styles/style1.css"> 2. Afficher de nouveau la page de la recette de la tarte au citron dans un navigateur.. 3. Observer la nouvelle page obtenue, puis ouvrir le fichier style1.css avec NotePad (ou wordpad) Examiner les instructions et analyser leur effet sur la page html. 1. Créer un nouveau fichier dans NotePad ( ou wordpad éventuellement). 2. Taper le texte ci-dessous : p {color: red;} #style1 {color: green;} .style2 {color: blue;}. 4. Changer quelques couleurs à votre goût . Vous trouverez le nom des couleurs ici : https: // htmlcolorcodes. com/ fr/ noms-de-couleur/. 5. Modifier style1.css par style2.css. Rafraîchir la page. 3. Créer un sous-dossier mon_site2 dans votre dossier SNT. 6. Quelle est l’utilité d’un fichier css ?. 4. Sauvegarder le fichier précédent dans le dossier. mon_site2. monstyle.css Remarquez que la terminaison du fichier n’est plus .html mais .css. Exercice 20 : Dans le fichier html et dans la balise < link > précédente , changer style1.css par style2.css. Rafraîchir la page html afin de l’effet des différents styles css définis dans le fichier style2.css. ouvrir le fichier style2.css avec NotePad ( ou wordpad) pour analyser les instructions 5. sous le nom :.

(6) Information Vous avez ici utilisé les trois méthodes de définition de style : n Directement dans la balise html : ici le sélecteur de paragraphe p n Un nom de style p Précédé d’un dièse : Ne peut être utilisé qu’une seule fois dans votre page On dit qu’il s’agit d’une div div veut dire division c’est à dire zone. p Précédé d’un point : peut être utilisé plusieurs fois . On dit qu’il s’agit d’une classe. 5. Créer, sous NotePad (ou wordpad) un nouveau fichier exemple1.html Taper le texte ci-dessous : <html> <head> <title> page avec feuille de style </title> <link rel="stylesheet" type="text/css" href="monstyle.css"> </head> <body> <h1>Un essai</h1> <h1 class="style2"> Avec la classe style 2</h1> <p>bli bli bli bli bli</p> <p id="style1"> avec la div style 1</p> <h2 class="style2"> On peut réutiliser cette classe</h2> </body> </html>. 6. sauvegarder puis effectuer un double-clic sur ce fichier. 7. Observer la page obtenue. 6.

(7)