Oefeningen op Html
advertisement
Naam : Schooljaar : Klas : Cursus HTML P. Brants Stedelijk Lyceum Antwerpen Paardenmarkt Cursus HTML Pagina 2 / 9 HTML is : de taal waarmee Webpagina’s op het Internet zijn opgebouwd leesbaar door verschillende browsers (Microsoft Explorer, Netscape, …) op verschillende platforms (PC, MacIntosh, Unix, …) de afkorting van Hyper Text Markup Language o Hyper Text : met (hyper)links kan gesprongen worden naar willekeurige ander pagina’s op het Internet o Markup Language : een taal waarmee de Webpagina met eender welke browser kan opgemaakt worden Onderstaande oefeningen zijn gebaseerd op het artikel “Bouw zelf je site : leer HTML in een half uur” bladzijden tot 05 met 09 van het tijdschrift Clickx nr. 194 Oefening 1 : Het absolute minimum open Kladblok met Start / Programma's / Bureauaccessoires / Kladblok typ de HTML-tekst op bladzijde 05 van de cursus tussen de 2 horizontale strepen volledig over bewaar het bestand met Bestand / Opslaan als... op je eigen schijfje als “OEF1.HTML“ (vergeet de aanhalingstekens niet en de extensie .HTML ) . Die extensie is belangrijk omdat de browser anders het bestand niet herkent) open Internet Explorer (zonder hierbij Kladblok af te sluiten) en open in de browser OEF1.HTML met Bestand / Openen / Bladeren... merk hierbij op dat de TITLE-gedeelte van OEF1 terecht is gekomen op de titelbalk van de browser indien je fouten hebt gemaakt bij het intypen van de HTML-tekst, : 1. verbeter deze in Kladblok 2. vergeet niet het bestand op te slaan met Bestand / Opslaan !!! 3. ga terug naar de browser en klik op de knop Vernieuwen; de pagina wordt dan automatisch aangepast beantwoord ook de vragen op het antwoorden blad die horen bij deze oefening aan de hand van het eerste gedeelte van de cursus (dus alles tot aan weg met dat grijs!) je hoeft voor de volgende oefening de browser niet af te sluiten, zodat Internet Explorer en Kladblok zich tegelijk in het geheugen van de computer bevinden, dit blijft ook zo voor de volgende oefening Oefening 2 : Opmaak … ga terug naar Kladblok, open OEF1.HTML en sla het bestand onmiddellijk terug op onder naam “OEF2.HTML” typ nu de tekst tussen de horizontale strepen op de tweede en derde kolom van bladzijde 06 van de cursus over (je hoeft alleen de teksten tussen de al bestaande tags te wijzigen en aan te vullen, dit vermijdt typfouten) sla het bestand op op je eigen schijfje met Bestand / Opslaan open OEF2.HTML in de browser en versmal het venster van de browser met de muis of met de systeemknop VORIG FORMAAT en bekijk nu het juiste effect van de tags <P>, <BR> en <HR> Cursus HTML Pagina 3 / 9 beantwoord ook de vragen op het antwoorden blad die horen bij deze oefening aan de hand van het tweede gedeelte van de cursus (bladzijde 06); de antwoorden op de zoekopdrachten vind je in de URL’s op het einde van de cursus; diezelfde URL’s vind je ook op het einde van het antwoordenblad of op de website voor het invoegen van een hyperlink volg je volgende stappen 1. selecteer de tekst die hyperlink moet worden 2. kies Invoegen / Hyperlink ; de tekst die geselecteerd is verschijnt al in het eerste invulvak 3. typ of plak de URL in het tweede invulvak 4. sluit het dialoogvenster en test de hyperlink door er op te klikken Oefening 3 : … en achtergrond ga terug naar OEF2 in Kladblok en sla onmiddellijk terug op onder “OEF3.HTML” breid de tag <BODY> uit met twee kleur attributen : dit wordt dus <BODY BGCOLOR=’red’ TEXT=’blue’> sla het bestand op in Kladblok ONDER DEZELFDE NAAM, ga naar de browser en klik op de knop Vernieuwen; bekijk het resultaat (??) ga terug naar Kladblok en verander de twee kleuren volgens nevenstaande tabel nu zo dat ze bij elkaar passen het geheel niet schreeuwerig wordt en alles leesbaar blijft als het van de eerste keer niet goed is, telkens de kleuren wijzigen en Opslaan in Kladblok afwisselen met Vernieuwen in de browser indien je meer kleuren wilt om mee te experimenteren, kijk dan eens bij de Zoekopdracht op het einde van deze oefening indien alles goed is, opslaan op je eigen schijfje (“OEF.HTML”) Black #000000 Navy #000080 Blue #0000FF Green #008000 Teal #008080 Lime #00FF00 Aqua #00FFFF Maroon #800000 Purple #800080 1) Olive #808000 2) Gray #808080 3) Silver #C0C0C0 Red #FF0000 Fuchsia #FF00FF Yellow #FFFF00 White #FFFFFF Antique white Coral : Zoekopdracht #5F9EA0 Zoek een kleurenkaart op en vul aan de hand daarvan de 4 laatste rijen van de nevenstaande #006400 tabel in) zet de antwoorden van deze zoekopdracht, samen met de volledige URL op het antwoordenblad Oefening 4 : Lijsten Lees het gedeelte Leuker met lijsten op bladzijden 06 en 07 grondig door Surf naar de website http://users.pandora.be/pbrants/ op het Internet of naar … op je eigen schijfje en kies daar Lijsten Vergelijk de HTML-code in je cursus met het uiteindelijke resultaat in de browser Beantwoord de vragen op het antwoordenblad Cursus HTML Pagina 4 / 9 Oefening 5 : Tabel1 Lees het gedeelte Zeg het met een tabel uit de cursus blz 07 tot en met de HTMLcodes tussen de horizontale strepen grondig door Surf naar de website en kies daar Tabel 1 Kies in de browser nu Beeld / Bron, waarmee je dezelfde code nu in Kladblok verschijnt Je kunt nu de code in Kladblok vergelijken met het resultaat in de browser; doe dit zorgvuldig en beantwoord hiermee de vragen op het antwoordblad Ga zonder iets af te sluiten direct door met de volgende oefening Oefening 6 : Tabel2 Het is nu de bedoeling dat je de code die op dit moment in Kladblok staat aanpast naar de code tussen de horizontale strepen op bladzijde 08 (tweede kolom) van de cursus; doe dit stap voor stap en vul ondertussen de vragen op het antwoordenblad in Voorbeeld : 1. verander eerst in Kladblok TABLE BORDER = 1 naar TABLE BORDER = 10; 2. sla dit eerst op als “Tabel2.HTML” op je eigen schijfje (deze stap nooit vergeten; anders geeft de browser de veranderingen niet weer!!) 3. ga naar de browser en klik nu op de knop Vernieuwen bekijk het verschil en beantwoord nu vraag 23 (je kunt TABLE BORDER nog andere waarden geven, als je de vraag niet direct kan beantwoorden) 4. verander eventueel de waarde terug in de waarde uit de cursus 5. typ nu het volgende attribuut CELLSPACING=5 6. herhaal nu stappen 2,3,4,5 tot je het antwoord op alle volgende vragen hebt gevonden Vergelijk het eindelijke resultaat in de browser met Tabel2 van de website Dit moet identiek zijn aan jouw resultaat! Oefening 7 : Hyperlinks lees het gedeelte Alles hangt aan elkaar op blz 08 van de cursus grondig door en beantwoord de vragen Oefening 8 : Afbeeldingen Lees het gedeelte Plaatje bij praatje op blz 08 en 09 van de cursus grondig door en beantwoord de vragen Examen : Je eigen HTML - pagina’s Aan de hand van de vorige oefeningen moet je in staat zijn om je eigen webpagina(s) te schrijven. Doe dit en hou rekening met de op het antwoordenblad gestelde eisen. Veel succes!
