Doelen: Als je deze opdracht hebt uitgevoerd, heb je de volgende doelen bereikt: Je kunt een eenvoudige webpagina maken met behulp van HTML.

Transcriptie

1 OPDRACHTKAART MM HTML Voorkennis: Geen. Intro: De opmaaktaal voor het WWW heet HTML (Hyper Text Markup Language). Met HTML kan een webpagina worden gemaakt, inclusief hyperlinks. Tijdens deze opdracht wordt dieper ingegaan op de basis-opbouw van webpagina s met behulp van HTML. Doelen: Als je deze opdracht hebt uitgevoerd, heb je de volgende doelen bereikt: Je kunt een eenvoudige webpagina maken met behulp van HTML. Activiteiten: Lees de theorie HTML Reserveer een computer. Voer de bijgeleverde praktijkopdracht uit. Vul de checklist in. Vul het evaluatieformulier in. Tijd: Voor deze opdracht krijg je 6 lesuren: Theorie bestuderen: 1 lesuur Maken van de praktijkopdracht, invullen van de checklist en het evaluatieformulier: 5 lesuren Materiaal: Computer met tekstverwerker en webbrowser zoals Microsoft Internet Explorer, Netscape Navigator of iets vergelijkbaars. Beoordeling: Je wordt beoordeeld op zelfstandigheid, volledigheid en zorgvuldigheid, met betrekking tot: De uitwerking van de praktijkopdracht De presentatie van de uitwerking

2 MM HTML Het is niet moeilijk om HTML onder de knie te krijgen. Het is wel erg belangrijk dat je nauwkeurig typt. Een eenvoudige HTML-pagina heb je in een paar minuten gemaakt. In dit theoriedeel wordt, aan de hand van enkele voorbeelden, de basis van HTML behandeld. Tags Iedere HTML-pagina bevat gegevens in de vorm van elementen. Deze elementen heb je nodig om tekst, plaatjes, tabellen, enzovoort op een webpagina te plaatsen. Een element wordt opgebouwd uit drie delen: een begincommando de inhoud het afsluitend commando Het begincommando geeft aan wat er met de inhoud moet gebeuren. Het afsluitend commando geeft aan wanneer de uitvoering van het commando moet eindigen. De begin- en afsluitende commando s worden tags genoemd: begintags en eindtags. HTML bestaat dus uit tags. Tags zijn de bouwstenen voor een HTML-document. Een tag staat altijd tussen twee haakjes: < en >. Deze tags geven aan wat er moet gebeuren met de inhoud van het element. In de eindtag staat een / (slash) vóór het commando. Bijna alle elementen bestaan uit een begintag en een eindtag. Soms is een eindtag niet nodig. In onderstaand voorbeeld wordt de tekst tussen de begintag en de eindtag vet (bold) gezet: Een HTML-tekstbestand heeft altijd een vaste lay-out, ook wel container genoemd. Het document moet altijd beginnen met. Nu weet de browser dat het hier om een HTML-document gaat. Het document wordt aan het eind ook weer afgesloten met de eindtag:. Vervolgens komt er de tag te staan. Hier staan zaken zoals de titel van de pagina die boven in het browservenster wordt getoond: <title>. Ook kunnen hier de copyright-gegevens worden vermeld. De titelen de headtag worden afgesloten met de eindtags </title> en. Daarna volgt de inhoud van de webpagina. Dit zijn de gegevens die de bezoeker daadwerkelijk in zijn browser te zien krijgt. Dit gebeurt met de tag <body>. Ook deze tag wordt weer afgesloten met de eindtag. Bijvoorbeeld: <title>mijn webpagina</title> <body> dit is mijn internetpagina Zoals je ziet wordt hierboven ingesprongen met tabs. Dit maakt het geheel beter leesbaar. Bovenstaande HTML-code wordt de bron of source van de webpagina genoemd. In de browser ziet het er dan als volgt uit: tekst Tekst schuin zetten doe je met de tag. staat voor Italic: deze tekst wordt vet afgebeeld deze tekst wordt schuin afgebeeld

3 MM Attributen Elementen kunnen verschillende attributen hebben. Het element tekst kent diverse attributen, zoals bijvoorbeeld lettertype en lettergrootte. Als je als maker wilt bepalen welk font er gebruikt moet worden, dan geef je dat op door middel van de tag: . Bijvoorbeeld: . Als je niet precies weet welke fonts de gebruiker op zijn pc heeft geïnstalleerd, kies dan voor standaard fonts zoals: Arial, Times, Geneva, Courier, Verdana of Georgia. <title>lettertypes</title> <body> Deze tekst wordt getoond in Arial Deze tekst wordt getoond in Times Deze tekst wordt getoond in Geneva Deze tekst wordt getoond in Courier Deze tekst wordt getoond in Verdana Deze tekst wordt getoond in Georgia Als je het venster van de browser breder maakt, krijg je het volgende te zien: Dit doorlopen van de tekst kun je voorkomen door de regels handmatig af te breken. Dit doe je met de tag: . De tag staat voor line break. De tag heeft geen eindtag nodig: <title>lettertypes</title> <body> Deze tekst wordt getoond in Arial Deze tekst wordt getoond in Times Deze tekst wordt getoond in Geneva Deze tekst wordt getoond in Courier Deze tekst wordt getoond in Verdana Deze tekst wordt getoond in Georgia

4 MM Waarden Attributen kunnen verschillende waarden hebben. Als je gekozen hebt voor een bepaald lettertype, dan kun je bijvoorbeeld ook de grootte bepalen. Dit kun je doen met het attribuut size. De grootte van een letter kun je niet instellen in punten, zoals je dat gewend bent, maar in waarden. HTML kent 7 tekst-waarden: 1 t/m 7. Als je geen formaat aangeeft, dan kiest de browser zelf voor de standaardwaarde 3. Het instellen van het lettergrootte doe je met de tag: . X is dan een getal van 1 t/m 7. De tag inclusief alle attributen sluit je in één keer af met de eindtag . <title>tekst-grootte</title> <body> Deze tekst wordt getoond in Arial, grootte 1 Deze tekst wordt getoond in Times, grootte 3 Deze tekst wordt getoond in Geneva, grootte 6 Deze tekst wordt getoond in Courier, grootte 2 Deze tekst wordt getoond in Verdana, grootte 4 Deze tekst wordt getoond in Georgia, grootte 7 Resultaat bovenaan volgende kolom: Kleur Kleuren geef je aan door het toevoegen van het attribuut color. Je kunt gebruik maken van kleurnamen als yellow, green of blue. Maar het is beter om RGBwaarden te gebruiken. Webkleuren kun je uitdrukken in RGB-waarden. Je geeft een # met daarachter de waarden voor rood, groen en blauw. Voordat je deze waarden kunt gebruiken, dien je iets van talstelsels te weten. Wij zijn gewend om met het decimale talstelsel te werken. Dat wil zeggen dat wij cijfers gebruiken van 0 t/m 9. Decimaal betekent 10-tallig (0 t/m 9 zijn 10 cijfers). Er bestaan ook andere talstelsels, zoals het binaire (2-tallig) en het hexadecimale (16-tallig). Dit zijn talstelsels die veel door computers en computerprogramma s worden gebruikt. Bij het hexadecimale talstelsel kun je gebruik maken van de 0 tot en met de F, op de volgende manier: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. De A staat voor waarde 10, de B staat voor waarde 11 en de F staat voor waarde 15. Je kunt dus met 1 positie 16 verschillende waardes krijgen, dus met minder posities dan bij het decimale talstelsel hogere waardes. RGB-waarden worden uitgedrukt met behulp van het hexadecimale talstelsel. Webkleuren worden uitgedrukt door een # met daarachter 2 posities voor rood, 2 posities voor groen en 2 posities voor blauw. Voor ieder kleurenkanaal kun je kiezen voor waardes tussen 00 en FF. Dit wordt zo weergegeven: #rrggbb. Bijvoorbeeld:

5 MM # geeft de kleur zwart. #FFFFFF geeft de kleur wit. #FF0000 geeft de kleur rood. #00FF00 geeft de kleur groen. #0000FF geeft de kleur blauw. Hieronder vind je een kleurentabel met veel gebruikte webkleuren: <title>kleuren</title> <body bgcolor= #0D9BC4 > Deze tekst wordt getoond in allerlei verschillende kleuren. Je kunt de achtergrondkleur van de webpagina veranderen met de tag: <body bgcolor= #rrggbb >. De tag bg staat voor background, wat achtergrond betekent. Als je geen achtergrondkleur instelt, dan is de standaard achtergrondkleur wit. De kleur van de tekst kun je ook bepalen. Dit gebeurt met de tag: . Als je geen fontkleur instelt, dan wordt de tekst in het zwart getoond. In onderstaand voorbeeld is de bgcolor ingesteld op een blauwe kleur met waarde 0D9BC4. De tekst heeft diverse kleuren.

6 MM Uitlijnen Je kunt op diverse manieren uitlijnen. Je kunt tekst, of delen van de tekst, centreren met de tag: <center>. HTML-code: <title>kopje centreren</title> <body bgcolor= #0D9BC4 > <center>kopje</center> Deze tekst wordt getoond in allerlei verschillende kleuren. Deze tekst wordt getoond in allerlei verschillende kleuren. Deze tekst wordt getoond in allerlei verschillende kleuren. Je kunt ook alles op een webpagina, zoals afbeeldingen, lijnen, video s en tekst, met één tag uitlijnen. Dit kan met de tag <div align= uitlijning >. De waarden voor de uitlijning zijn top, bottom of center. Als je geen uitlijning kiest, dan zal alles links-gelijnd worden. Als voorbeeld wordt hieronder een extra horizontale streep geplaatst onder de koptekst. De tag voor het plaatsen van een streep, is <hr>. De tag hr staat voor horizontal ruler. De tag <hr> heeft geen eindtag nodig. <title>alles centreren</title> <body bgcolor= #0D9BC4 ><div align= center > alles op deze pagina is gecentreerd <hr> Deze tekst wordt getoond in allerlei verschillende kleuren. </div>

7 MM Plaatsen van afbeeldingen Je kunt natuurlijk ook afbeeldingen plaatsen op een webpagina. Een afbeelding moet een GIF of JPEG bestand zijn. Voor foto s en afbeeldingen met meer dan 256 kleuren kun je het beste JPEG gebruiken. Voor afbeeldingen met minder dan 256 kleuren, of met grote vlakken van dezelfde kleur, kun je het beste GIF gebruiken. Zorg ervoor dat je de afbeeldingen met de juiste extensie bewaart (.GIF of.jpg). Zorg er ook voor dat de afbeeldingen in dezelfde map staan als de HTML-bestanden. Met de tag: <img src= afbeelding.jpg > kun je een afbeelding plaatsen. img staat voor image, wat afbeelding betekent. src staat voor source, wat bron-bestand betekent. De tag <img> heeft geen eindtag nodig. HTML-code: <title>het World Wide Web</title> <body bgcolor= #FFFFFF ><div align= center >Tim Berners-Lee de uitvinder van het WWW <hr> Het World Wide Web is door de Britse geleerde, Tim Berners-Lee, uitgevonden. Tim Berners-Lee is in 1976 afgestudeerd aan de Universiteit van Oxford. Nu werkt hij nauw samen met een van de belangrijkste universiteiten op het gebied van computertechnieken en netwerken; het MIT in Amerika. Ook is hij de voorzitter van het World Wide Web Consortium (W3C). Het W3C bestaat uit 500 bedrijven die de ontwikkeling van het WWW in goede banen moet leiden. <hr> <img src= bernerslee.jpg ></div> Omdat de <div align= center > is gebruikt, zal ook de foto gecentreerd worden afgebeeld. Creëren van hyperlinks Door het toevoegen van hyperlinks is het mogelijk om via je webpagina te verwijzen naar andere webpagina s. Het creëren van een hyperlink gebeurt met de tag: <a href= url >tekst</a>. url is de hyperlink (het adres van de webpagina). tekst is het hypertext woord (de tekst met de hyperlink waarop je kunt klikken). Deze tag wordt afgesloten met de eindtag </a>. Je kunt een link leggen met: webpagina s op het WWW webpagina s op je eigen site of computer Hyperlinks naar webpagina s op het WWW Stel dat je een webpagina hebt waar de volgende zin in voorkomt: Harley-Davidson motoren bestaat trouwens al 100 jaar. Aan het woord Harley-Davidson wil je een hyperlink koppelen. Als de bezoeker hierop klikt, dan moet de webpagina worden geopend. Dit doe je als volgt: <a href= >Harley- Davidson</a>. href staat voor hypertekst referentie.

8 MM HTML-code: <title>harley rijden is mijn hobby</title> <body bgcolor= #FFFFFF > Mijn hobby <hr> In het weekend ga ik met mijn vrienden touren op mijn Harley. <a href= >Harley- Davidson</a> bestaat trouwens al 100 jaar. <hr> <img src= harley.jpg > Hyperlinks naar webpagina s op je eigen site of computer Je kunt ook verwijzen naar een ander HTML-bestand dat op je eigen computer staat. Dit doe je met de tag: <a href= bestandsnaam >tekst</a>. bestandsnaam is het HTML-bestand waar je naar toe springt, tekst is het hypertext-woord. Zorg ervoor dat alle HTML-bestanden in dezelfde map staan. Zoals je ziet, zijn de woorden Harley en Davidson onderstreept en verkleurd. Hieraan kun je zien dat je hierop kunt klikken en dat je doorverwezen wordt naar een andere webpagina.

9 PRAKTIJKOPDRACHT MM Wat ga je doen: Je gaat een eenvoudige website maken over jezelf in HTML-code met behulp van een willekeurige tekstverwerker. De site moet minimaal uit een homepage en 3 subpagina s bestaan. Op de homepage geef je een algemene introductie van jezelf. Op de subpagina s vertel je bijvoorbeeld iets over je hobby s, school of familie. Op iedere pagina hoort toepasselijke tekst te staan. Op iedere pagina hoort minimaal 1 toepasselijke afbeelding te staan. Je moet, via de homepage, door middel van hyperlinks naar de subpagina s kunnen gaan. Bewaar ieder document als platte tekst (ascii / text only). Op de subpagina moet je ook weer via een hyperlink terug kunnen naar de homepage. Geef de homepage de naam: index.html Geef de subpagina s duidelijke namen van maximaal 8 letters, met daarachter.html Zorg ervoor dat alle benodigde bestanden in dezelfde map of directory staan. Maak regelmatig een back-up (een reserve-kopie). Presenteer het eindresultaat aan je docent en eventueel aan je klas. Aantekeningen

10 Checklist MM Leerling Docent Heb je een homepage met 3 subpagina s gemaakt? O O Staat alles in dezelfde map? O O Heb je een back-up gemaakt? O O

11 Evaluatie MM Theorie en toets: 1. Vond je het theorie-gedeelte duidelijk? Ja,omdat: Nee, omdat: 2. Hoeveel tijd had je nodig om de theorie te leren? Praktijkopdracht: 3. Wat vond je leuk aan de opdracht? 4. Wat vond je moeilijk aan de opdracht? 5. Wat zou je de volgende keer anders doen? 6. Had je voldoende tijd voor de opdracht? 7. Geef jezelf een beoordeling voor de opdracht. OZeer onvoldoende, omdat: OOnvoldoende, omdat: OMatig, omdat: OVoldoende, omdat: OGoed, omdat: OZeer goed, omdat: 8 Heb je nog andere op-/ of aanmerkingen?