- Een pc - Kladblok - Een map waar je bestanden op kunt slaan - Toegang tot internet
Aanpak:
- In de les krijg je een aantal opdrachten. Iedere menukeuze met een cijfertje ervoor is een opdracht - Begin steeds met je basis website. Dat scheelt werk - Maak een aparte map aan waar je alle opdrachten in opslaat. - Sla iedere opdracht in een apart bestand in je map op. Geef het bestandje steeds het nummer van je opdracht, dan kun je gemakkelijk terugzoeken waar je bent gebleven
Gesproken tekst:
Wil je liever de tekst laten voorlezen? Bij de onderdelen B en C vind je onderaan de bladzijde een knopje waarmee je gesproken tekst kunt starten.
Inleveren: Een zelfgemaakte website volgens de eisen van je docent.
B. Je eerste webpagina maken
Wat is html?
Html bestaat uit een serie afspraken voor opmaakcodes. Deze codes noemen we tags. Overal ter wereld is bekend wat deze tags betekenen en je kunt ze dus overal ter wereld gebruiken. De codes zijn gestandaardiseerd.
Door html-codes te gebruiken kan informatie grafisch worden weergegeven op html-pagina's. Zo'n html-pagina kan tekst bevatten, maar nog veel meer. Denk daarbij bijvoorbeeld aan plaatjes, geluid of film.
Hoe is html ontstaan?
Html betekent eigenlijk Hypertext Markup Language. Hypertext wil zeggen 'klikbare tekst'. Als je op hypertext klikt gebeurt er iets: je gaat bijvoorbeeld naar een ander stuk van de website. Html is in 1991 ontwikkeld door Tim Berners-Lee. Deze man werkte toen aan een project om een systeem te bedenken waarmee mensen zouden kunnen samenwerken aan dezelfde documenten. Dat project heette "World Wide Web".
Hoe kun je een html-pagina bekijken?
Als je html-pagina wilt bekijken heb je een browser nodig. De browser kan html-pagina's inlezen en op een beeldscherm laten zien. De browser vertaalt de html-codes in de juiste opmaak. Als de browser bijvoorbeeld de tag voor 'vetgedrukt' tegenkomt "", dan zal hij de tekst na de tag vetgedrukt op het beeldscherm laten zien. De browser maakt dus verschil tussen een tag en tekst, plaatjes of films die moeten worden
Gesproken tekst: wat is html:
Wat is een URL
Als je een html-pagina hebt gemaakt moet de browser die pagina wel kunnen vinden. Daarom moet iedere pagina op internet een unieke naam krijgen. Zo'n naam noemen we een URL. Dat betekent Uniform Resource Location.
Een voorbeeld van zo'n naam is "http://shetland.xs4all.nl"
Gesproken tekst: wat is een url:
Hoe gebruik je een tag?
Een html-pagina is alleen maar een bestand met tekst erin. Sommige stukjes tekst beginnen met "<" en eindigen met ">". Alle tekst die tussen die twee tekens staat vormt samen een tag.
Als de browser en html-pagina gaat inlezen vertellen de tags wat er moet gebeuren. Bijvoorbeeld waneer er een plaatje moet worden getoond, wanneer een tabel of wanneer er een muziekje moet gaan spelen.
De browser moet niet alleen weten wanneer hij moet beginnen, maar ook wanneer hij moet stoppen. Als je de tag voor "vetgedrukt" gebruikt zal alle tekst daarna vetgedrukt op het scherm komen. Logisch dat je de browser ook moet kunnen vertellen dat je wilt stoppen met vetgedrukt.
Daarom bestaan er begin tags en eind tags. Je kunt ze altijd van elkaar onderscheiden: bij een eind tag (closing tag) staat er na het "<"teken altijd een "/".
Bijvoorbeeld: begin tag schuingedrukt = "<i>", eindtag = "</i>".
Gesproken tekst: hoe gebruik je een tag:
Hoe bouw je een webpagina op?
Sommige tags heb je altijd nodig, voor iedere html-pagina die je bouwt.
Iedere pagina begint en eindigt met de html-tag "<html>" en "</html>"
Iedere pagina moet een begin en einde head-tag hebben: "<head> en </head> "
Iedere pagina moet een begin en einde title-tag hebben: "<title> en </title> " Hiertussen kun je de titel van de html-pagina kwijt die in de blauwe balk te zien is.
Iedere pagina moet een begin en einde body-tag hebben: "<body> en </body>". Tussen deze tags zet je de inhoud van je pagina.
Kijk naar het voorbeeld. Je ziet hier een basis html-pagina.
Je ziet ook dat de tekst steeds een stukje inspringt. Je ziet dat de begintag en de eindtag die bij elkaar horen steeds even ver zijn ingesprongen. Het is belangrijk dat je dat straks zelf ook gaat doen. Het is heel gemakkelijk om bij het schrijven van html-code iets te vergeten, bijvoorbeeld een eind-tag. Je webpagina zal dan niet gaan werken. Je moet dan zelf uitzoeken waarom het niet lukt en dat is veel gemakkelijker als je netjes inspringen hebt gebruikt. Dan moet je namelijk altijd recht onder het begin van een tag ook een eindtag vinden.
Gesproken tekst: opbouw webpagina:
eerste.JPG
0. En nu zelf
Je gaat nu zelf een html-pagina bouwen. Je voert je html-code in Kladblok in.
Opdracht
Start Kladblok op. Verklein de pagina met Kladblok en de pagina met deze les, zodat je tegelijkertijd de instructies kunt lezen en kunt typen.
Typ de tekst uit het voobeeld in. De tekst tussen de title tags en de body tags mag je zelf kiezen. Denk wel aan het inspringen
Sla de tekst op. Dit gaat als volgt: - Kies voor 'opslaan as' - Kies nu onderaan bij 'opslaan als' voor 'alle bestanden' - typ als naam basis.html - klik op 'opslaan'.
Tip
Bewaar dit bestand goed. Het komt bij iedere volgende opdracht van pas. Als je iedere oefening begint met het oproepen van basis.html hoef je niet iedere keer de vaste tags opnieuw in te typen.
Gesproken tekst: en nu zelf:
Je webpagina bekijken
Als je html-pagina is opgeslagen wil je het resultaat natuurlijk bekijken.
Start de verkenner op.
Zoek het bestand basis.html
Dubbelklik op het bestand
Je ziet nu je eerste webpagina. Is het gelukt?
Gesproken tekst: webpagina bekijken:
Tips
Lukt het niet? Bekijk dan eerst onderstaande tips
Heb je het bestand wel als .html opgeslagen?
Kijk goed na of je bestand wel xxxx.html heet. Wanneer je je bestand per ongeluk als tekst (.txt) of in een ander formaat hebt opgeslagen, kun je het niet als webpagina oproepen. Heb je het fout gedaan?
Roep het bestand dan op in kladblok Kies voor 'opslaan als' Kies nu onderin bij 'opslaan als' voor 'alle bestanden' Geef het bestand een naam die eindigt op .html Kies voor opslaan
Heb je het bestand wel met een browser geopend?
Het kan zijn dat je het bestand niet met een browser hebt geopend maar bijvoorbeeld met kladblok. Klik met de rechtermuisknop op het bestand. Kies voor 'openen met' en selecteer een browser (bijvoorbeeld Internet Explorer, Mozilla Firefox of Safari).
Klopt de code wel?
Kijk nog eens goed naar de code die je hebt ingevoerd en vergelijk die met het voorbeeld. Klopt alles wel?
Heb je voor de begintags ook wel een eindtag gebruikt? Heb je misschien ergens een typfout gemaakt? Ben je misschien een regel vergerten?
Lukt het nog niet? Roep dan je leerkracht
Gesproken tekst: tips:
C. Meer tags en trucs
Op de volgende pagina's leer je de basis om een eenvoudige website te maken.
Tips
In de les krijg je een aantal opdrachten. Iedere menukeuze met een cijfertje ervoor is een opdracht
Begin steeds met je basis website die je in deel B gemaakt hebt. Dat scheelt werk
Maak een aparte map aan waar je alle opdrachten in opslaat.
Sla iedere opdracht in een apart bestand in je map op. Geef het bestandje steeds het nummer van je opdracht, dan kun je gemakkelijk terugzoeken waar je bent gebleven.
1. Grotere tekst met de h-tag
Je kunt met html-codes tekst op verschillende manieren groter en kleiner maken. Een gemakkelijke manier om tekst groter te maken is de h-tag.
De h-tag
Met de h-tag (de h komt van Head) kun je koppen maken. Een kop is een tekst die je boven een verhaaltje zet. Vaak wil je zo'n tekst wat groter maken zodat hij goed opvalt.
Binnen html kun je 6 koppen kiezen: h1 t/m h6. Kop h1 is het grootst en kop h6 het kleinst.
Opdracht 1.
Maak het voorbeeld na in kladblok, maar kies je eigen teksten.
Probeer ook H2 t/m H5 uit.
Sla je bestand op als html-pagina.
Ga naar de verkenner, dubbelklik op je bestand en bekijk het resultaat.
Is het gelukt?
Gesproken tekst: h-tag:
2. Tekstterugloop (return) met de br-tag
Misschien heb je het al gemerkt, maar als je tekst intypt in je html-bestand komt al je tekst achter elkaar te staan. Dat is natuurlijk niet mooi.: je wilt zelf kunnen kiezen waar je op de volgende regel begint. Dat kan met de "<br>" tag. (break). Op dezelfde manier kun je deze tag gebruiken om lege regels tussen je tekst te krijgen.
Een "<br>"tag heeft geen eindtag.
Opdracht
Maak een voorbeeld html pagina waarbij je tussen de "<body>" tags twee keer dezelfde tekst zet. Kies zelf je tekst, zolang hij maar minstens 100 woorden lang is.
De eerste keer zet je de tekst neer zonder gebruik te maken van de br-tag, en de tweede keer gebruik je wél de br-tag.
Bekijk je webpagina en let op het verschil. Laat je pagina ook zien aan je docent.
terugloop2.JPG
Gesproken tekst: tekstterugloop:
3. Vet (b-tag), onderstreept (u-tag), schuin (i-tag)
i by lee robertson.JPG
Iedereen gebruikt in zijn teksten weleens:
Vet (bold)
Schuin (italics)
of onderstreept
Dit kun je regelen met verschillende tags:
Vet (bold) met "<b>" en "</b>"
Schuin (italics) met "<i>" en "</i>"
Onderstreep met "<u>" en "</u>"
Opdracht 3
Maak een voorbeeldpagina met een zin die schuingdrukt is, een zin die vetgedrukt is en een zin die onderstreept is.
Gesproken tekst: vet, schuin, onderstreept:
4. Tekst centreren met de center-tag
Maak een voorbeeldpagina waarbij je een stukje tekst gecentreerd op het scherm laat zien.
Soms wil je niet dat je tekst aan de linkerkant van je pagina begint, maar dat hij vanuit het midden van de pagina staat. Dat heet centreren. Dat kan met behulp van de center-tag.
Opdracht 4
Maak een voorbeeldpagina waarbij je een stukje tekst gecentreerd op het scherm laat zien.
Gesproken tekst: centreren:
5. Commentaar toevoegen
Het is belangrijk dat je zelf nog begrijpt hoe je html-pagina in elkaar zit. Wat daarbij kan helpen is het toevoegen van commentaar. Dat commentaar kun je alleen maar zien wanneer je de html-code van je pagina bekijkt. Je ziet het dus niet via de browser op je webpagina staan.
Je moet de browser dan natuurlijk wel laten weten dat je tekst bedoeld is als commentaar. Dat doe je op de volgende manier:
Begin commentaar: "<!--"
Einde commentaar: "-->"
Opdracht 5
Roep één van de voorbeeldpagina's op die je eerder hebt gemaakt en zet er een commentaarregel bij.
Bekijk het resultaat.
Gesproken tekst: commentaar:
6. Werken met lettertypes (font-tag), attributen
De werking van sommige tags kun je uitbreiden door gebruik te maken van attributen. Attributen zijn een aanvulling op de werking van de begintag. Je schrijft ze daarom ook binnen de begintag. De eindtag verandert niet.
Voorbeeld
Als voorbeeld kijken we naar de font-tag. Met de font-tag kun je veel dingen regelen rondom het lettertype, bijvoorbeeld de kleur van de letters, de grootte, maar ook het type zelf. Dit laatste doe je met het attribuut face.
Je kent waarschijnlijk zelf al wel een aantal lettertypes zoals Arial, Courier, Verdana of Wingdings. Stel dat je website-pagina Verdana moet laten zien, dan noteer je dat als volgt:
Als je een website maakt moet je er natuurlijk altijd goed over nadenken hoe mensen straks jouw pagina gaan bekijken. Misschien zijn er wel mensen die op hun pc helemaal geen Verdana hebben. Je kunt dan besluiten om meerdere lettertypes op te geven: wordt geen Verdana gevonden, dan zal de browser op zoek gaan naar het volgende lettertype.
Meer attributen bij font
Bij de font-tag kunnen nog veel meer attributen worden opgegeven, zoals size waarmee de grootte van de letter kan worden opgegeven. Je kunt kiezen voor een size van 1 t/m 7, waarbij 1 het kleinst is en 7 het grootst.
Opdracht 6
Maak een voorbeeldpagina waarin je teksten in verschillende lettertypes en groottes opneemt. Laat het resultaat zien aan je docent.
Gesproken tekst: lettertypes:
7. Werken met kleur (color en bgcolor attribuut)
Het is natuurlijk leuk als je letters of achtergronden op je website een andere kleur kunt geven. Maar je moet de browser dan wel kunnen vertellen welke kleur je bedoelt. Dat kan, want iedere kleur heeft een unieke code. Dat noemen we de RGB-waarde. De RGB-waarde van helderrood is bijvoorbeeld FF0000 en die van wit is FFFFFF.
Letters in kleur
Om de tekst op je webpagina een kleur te geven kun je gebruik maken van het attribuut color bij de font-tag.
Achtergrond in kleur
Je kunt de achtergrond van je webpagina een kleur geven met het bgcolor attribuut. Wanneer de achtergrond van je webpagina rood moet zijn, kun je dit regelen door aan de body tag het bgcolor attribuut mee te geven.
Opdracht 7 a
Neem één van de voorbeeldpagina's die je eerder hebt gemaakt en zorg dat de achtergrond van je pagina rood wordt en de letters wit. Bekijk het resultaat.
Hoe kun je nu de RGB-waardes voor andere kleuren te weten komen? Er zijn diverse sites die je daarbij helpen. Hier vind je er twee, maar er zijn er veel meer.
Ook zijn er diverse hulpmiddelen gratis te downloaden zoals Contrast Analyzer en ColorCop.
Er zjn ook hulpmiddelen om van een bestaande kleur de RGB-waarde te achterhalen.
Maak nu de achtergrond van je webpagina geel en de letters paars. Wat vind je van het resultaat?
Gesproken tekst: kleur:
8. Lijn op de pagina zetten (hr-tag)
Met de hr-tag kun je een lijn op een pagina zetten. Bij deze tag horen een aantal attributen die je kunt gebruiken:
Dikte van de lijn: size-attribuut. Size=20 betekent dat de lijn 20 pixels (puntjes op het scherm) dik wordt. Breedte van de lijn: width-attribuut. Gebruik je dit attribuut niet, dan wordt de lijn over de hele breedte van het scherm getoond. Je kunt het width-attribuut op twee manieren aangeven:
in procenten: "<hr width = 75%?>" betekent dat de lijn over driekwart van het beeldscherm loopt.
in pixels: "<hr width = 75?>" betekent dat de lijn 75 pixels breed is.
Uitlijning van de lijn. Als de lijn over de hele breedte van het scherm loopt hoef je je niet druk te maken om de uitlijning. Maar bij een lijn met een width van bijvoorbeeld 50% zul je willen aangeven waar de lijn moet staan: links (left), rechts (right) of in het midden (center) van de pagina. Dat kun je doen met het align-attribuut: "<hr width = 50% align = left>?"
Normaal gesproken wordt een lijn getoond met een schaduw. Hoe dikker de lijn, hoe duidelijker de schaduw zal zijn. Wil je geen schaduw, gebruik dan het attribuut noshade (geen schaduw). De kleur van de lijn kun je instellen met het color-attribuut.
Opdracht 8
Maak een voorbeeld webpagina (of gebruik er één die je al gemaakt heb) en zet daar vier lijnen onder elkaar:
Een lijn met dikte 10 over de hele breedte van het scherm
Gecentreerd met dikte 50 over 30% van het scherm
Rechtslijnend met dikte 25 over 75% van het scherm
Linkslijnend met dikte 40 over 25% van het scherm
Geef de lijnen verschillende kleuren
Gesproken tekst: lijn op je pagina:
9. Plaatje toevoegen met de img-tag
Een plaatje op je pagina met de img-tag
Klik hier voor gesproken tekst
Een website wordt wel héél saai als er geen plaatjes op voorkomen. Je kunt twee types plaatjes opnemen: GIF of JPEG (JPG).
Het opnemen van een plaatje gaat met de img -tag. (er is geen eindtag). Daarbij zul je natuurlijk de naam van het plaatje moeten opgeven. Let op: het plaatje moet in dezelfde map staan als waar je je html-code hebt opgeslagen anders zul je het op je webpagina niet kunnen zien.
Stel je voor dat een plaatje hebt van een schaap dat schaap.gif heet. Je hebt het plaatje netjes in dezelfde map opgeslagen als je html-pagina. Je kunt het plaatje nu op je pagina laten zien door de volgende html-code.
Bij de img-tag kun je ook weer attributen gebruiken. Je wilt kunnen kiezen of je plaatje links of rechts komt te staan en ook hoe de tekst rondom de afbeelding loopt.
- Plaatje links: align = left - Plaatje rechts: align = right
Je kunt het plaatje ook een tekst meegeven die wordt getoond als de browser niet met afbeeldingen kan omgaan. Ook zie je deze tekst kort als je met de muis over de afbeelding gaat.
Het attribuut om dit te doen is het alt-attribuut (alternative)
Je kunt aan het plaatje ook de breedte en hoogte meegeven (in pixels)
Dit doe je met de attributen width en height (bijv. width = 300 height = 348)
Kijk naar het voorbeeld.
Opdracht 9
Maak een voorbeeldpagina met een links- en een rechtslijnend plaatje. Neem een plaatje van je keuze. Controleer of de alternatieve tekst verschijnt. Let op: soms is er verschil tussen de verschillende browsers.
Gesproken tekst: afbeeldingen:
10. Een opsomming maken (ul of ol en li)
Een opsomming is een manier om een duidelijke lijst te maken. Dit kan op verschillende manieren:
dit is een
ongeordende lijst
Gebruik de ul-tag (unordened list) en de li-tag
Hier zie je geen 'bullets'
maar nummertjes
Er zit een volgorde in de lijst: de lijst is geordend
Gebruik de ol-tag (ordened list) en de li-tag
Opdracht
Kijk naar de voorbeelden en maak op een voorbeeldpagina een geordende en een ongeordende lijst.
Gesproken tekst: opsomming:
11. Een hyperlink maken
Wanneer je een website bouwt zijn links heel belangrijk. Een link maakt het mogelijk om:
Verschillende html-pagina's met elkaar te verbinden
Naar een ander stuk tekst van dezelfde html-pagina te springen
Naar een stuk tekst binnen een ander html-pagina te springen
Je gebruik hiervoor de a-tag (anchor). Je kunt een a-tag niet gebruiken zonder attribuut. In dit geval hebben we het href-attribuut nodig. Met het href-attribuut kun je namelijk aangeven wat er moet gebeuren als er op de hyperlink geklikt wordt. Als je een stukje tekst 'klikbaar' maakt wordt die tekst door de browser blauw en onderstreept getoond.
Verbinden van verschillende html-pagina's
Stel je voor dat je vanaf je html-pagina naar een andere html-pagina wilt springen. Die andere html-pagina heb je ook gemaakt. De pagina heet tweede.html en je hebt hem neergezet in dezelfde map als de eerste pagina.
Je kunt nu van de eerste naar de tweede pagina springen op de volgende manier:
Je hebt nu een stukje tekst 'klikbaar' gemaakt, maar datzelfde kun je ook met een plaatje doen. Op je webpagina zie je dat het plaatje klikbaar is, doordat je muis verandert in een handje wanneer je er overheen gaat.
Springen naar een ander stuk van de pagina
Je kunt ook aangeven dat je naar een ander stuk van dezelfde pagina wilt springen. Dit is vooral handig bij lange pagina's. Je gebruikt weer de a-tag. Maar je hebt nu nog iets extra's nodig. Je moet de browser namelijk laten weten wáár je naar toe wilt springen. Op de plekt in html-code waar je terecht wilt komen moet ook een anchor staan.
"<a href="#onder"> Ga naar het onderste stuk </a> " Hier geef je aan dat je naar een plek in je pagina wilt springen met de naam 'onder'. Let vooral op het hekje!
"<a name="onder" Hier geef je de plek aan waar naartoe gesprongen moet worden. Deze code moet je dus neerzetten op de plek in de html-code waar je heen wilt springen.
Springen naar een stuk tekst van een andere pagina
Hier combineer je allebei de mogelijkheden.
"<a href="tweede.html#onder"> ga naar onderen op de tweede blz </a>"
Opdracht 11
Waarschijnlijk heb je inmiddels een aardig aantal voorbeeldpagina's. Link drie van deze pagina's aan elkaar. Zorg dat je ook terug kunt naar de vorige pagina.
Maak een link naar een specifiek stuk tekst op een andere pagina.
Laat het resultaat zien aan je docent.
Gesproken tekst: hyperlink:
12. Een tabel maken
Om informatie op een overzichtelijke manier op een webpagina te kunnen laten zien, kan het heel handig zijn om een tabel te gebruiken. Met een tabel kun je de plek op de pagina van bepaalde stukken tekst, plaatjes en dergelijke nauwkeurig bepalen.
Een tabel is opgebouwd uit rijen en kolommen.
Het kruispunt van een specifieke rij en een specifieke kolom noemen we een cel (denk aan Excel, dat gaat precies zo).
Table-tag
Als je begint zul je de browser eerst moeten vertellen dat je een tabel wilt maken. Dat gaat met de table tag en aan het eind van je tabel met het einde table-tag. De table tag heeft het attribuut border. Met border regel je of er lijntjes om je tabel zichtbaar zijn en hoe dik die moeten worden. Gebruik je het border attribuut niet of gebruik je border = 0 dan zie je geen lijntjes.
Tr- en td-tag
Nadat je je browser hebt verteld dat je een tabel wilt maken moet je ook nog zeggen hoe het zit met de rijen en kolommen van je tabel, en wat er in de cellen moet komen te staan.
Iedere nieuwe rij in je tabel begint met een tr-tag "<tr>". (tr komt van table row). De rij eindigt met een einde tr-tag "</tr>". Iedere nieuwe cel in je rij begint met een td-tag "<td>" ( td komt van table data) en eindigt met een einde td-tag "</td>".
Als je het in een tabel zou zetten ziet het er dus zo uit:
Opdracht 12
Maak nu zelf een tabel met twee rijen en twee kolommen. Zet in alle cellen tekst. Zorg dat er een smal lijntje om je tabel wordt weergegeven.
Tip: teken eerst voor jezelf de tabel en schrijf "<tr>,</tr>, <td> en </td>" op de juiste plaatsen. Dat helpt om je code goed op te schrijven. Kijk naar het voorbeeld.
Laat het eindresultaat zien aan je docent.
Gesproken tekst: tabel:
13. Opzoeken meer mogelijkheden
Je zult begrijpen dat er nog veel meer tags bestaan. Die tags gaan we niet allemaal in de les behandelen terwijl je ze soms wel nodig hebt als je een webpagina gaat maken.
Gelukkig zijn er genoeg sites waar je zaken kunt opzoeken, bijvoorbeeld op handleidinghtml.nl. Hieronder vind je de link naar deze site.
Opdracht 13
Zoek op deze site hoe je een lichtkrant maakt en maak hiermee een voorbeeldpagina. Laat de pagina aan je docent zien.
Het arrangement Werken in html is gemaakt met
Wikiwijs van
Kennisnet. Wikiwijs is hét onderwijsplatform waar je leermiddelen zoekt,
maakt en deelt.
Auteur
Linda le Grand
Je moet eerst inloggen om feedback aan de auteur te kunnen geven.
Laatst gewijzigd
2013-08-05 21:25:34
Licentie
Dit lesmateriaal is gepubliceerd onder de Creative Commons Naamsvermelding-GelijkDelen 3.0 Nederland licentie. Dit houdt in dat je onder de voorwaarde van naamsvermelding en publicatie onder dezelfde licentie vrij bent om:
het werk te delen - te kopiëren, te verspreiden en door te geven via elk medium of bestandsformaat
het werk te bewerken - te remixen, te veranderen en afgeleide werken te maken
voor alle doeleinden, inclusief commerciële doeleinden.
