Hier komt alle informatie over je webpagina, welke niet zichtbaar is op de webpagina zelf.

Maat: px

Weergave met pagina beginnen:

Download "Hier komt alle informatie over je webpagina, welke niet zichtbaar is op de webpagina zelf."

Leen van Loon
7 jaren geleden
Aantal bezoeken:

2 Elke website begint met een basisstructuur. Deze basisstructuur is opgebouwd uit drie tags. Je gebruikt eerst de <html> - tag welke aangeeft wat voor type document het is. Dan de <head> - tag. Hier komt de informatie over je webpagina welke niet zichtbaar is op de webpagina zelf. Dan de - tag, het belangrijkste gedeelte van je webpagina. Hierin komt de informatie die wel weergegeven is op je webpagina. Als je onderstaande code overneemt in je eigen bestand, dan heb jij je eerste basisstructuur gemaakt! Sla het bestand vervolgens op als.html. bestand. <html> <head> </head> Hier komt alle informatie over je webpagina, welke niet zichtbaar is op de webpagina zelf. </html> Hier komt alle informatie die wel zichtbaar is op je webpagina. Denk bijvoorbeeld aan interessante tekst of leuke plaatjes. Sla dit bestand apart op zodat je het kunt gebruiken als je later nog meer webpagina s gaat maken. Dan hoef je dit niet opnieuw te typen.

3 We beginnen met het invullen van de informatie die tussen de <head> - tags komt te staan. Dit is de informatie die iets zegt over je webpagina, maar die niet zichtbaar is op de pagina zelf. Het eerste dat we toevoegen is de titel van je webpagina. Deze titel is niet zichtbaar op de webpagina zelf, maar in het tabblad van de browser. Als je goed naar de code kijkt zie je dat alle tags die we hebben gebruikt uit twee delen bestaan. De eerste tag, de openingstag geeft aan vanaf welk punt de tag van toepassing is. De tweede tag, de afsluitingstag, geeft aan wanneer de tag niet meer van toepassing is. <head> </head> <title> Hier komt de titel van je pagina. </title> De tweede tag wijkt iets af van de eerste tag. Wanneer je goed kijkt zie je dat er in de tweede tag een slash (een / teken) staat. Dit teken geeft aan dat het een afsluitingstag is. Elke tag die je gebruikt moet worden geopend en worden afgesloten. Je kunt nu een titel maken op je eigen webpagina!

We kunnen nu een begin maken met het invullen van je webpagina. Alles wat zichtbaar is op je webpagina plaats je tussen de - tags. Het eerste wat we gaan toevoegen is de <h> - tag.

4 We kunnen nu een begin maken met het invullen van je webpagina. Alles wat zichtbaar is op je webpagina plaats je tussen de - tags. Het eerste wat we gaan toevoegen is de <h> - tag. Deze tags zorgen ervoor dat de tekst ertussen groot wordt weergegeven. Dit kun je gebruiken voor titels, subtitels, kopjes etc. op je webpagina. Er zijn zes verschillende <h> - tags van <h1> tot en met <h6>. De <h1> - tag geeft de grootste tekst weer en <h6> de kleinste tekst. Probeer ze allemaal uit! <h1> Allergrootste tekst! </h1> <h2> Megagrote tekst </h2> <h3> Supergrote tekst </h3> <h4> Hele grote tekst. </h4> <h5> Grotere tekst. </h5> <h6> Grote tekst </h6> Het is belangrijk dat je bij alle tags die je gebruikt de laatst geopende tag als eerste afsluit. Bekijk het voorbeeld hieronder goed. <h1> Allergrootste tekst! <h6> Grote tekst </h6> </h1> <h1> Allergrootste tekst! <h6> </h1> Grote tekst </h6>

Je webpagina zal niet alleen uit grote tekst bestaan. Daarom kijken we in deze stap naar de <p> - tag. Alles tussen de openings- en afsluitingstag van <p> wordt weergegeven als één paragraaf tekst.

5 Je webpagina zal niet alleen uit grote tekst bestaan. Daarom kijken we in deze stap naar de <p> - tag. Alles tussen de openings- en afsluitingstag van <p> wordt weergegeven als één paragraaf tekst. Bekijk de code en schrijf je eerste paragraaf! <p> Hier komt een hele paragraaf aan tekst. </p> Wanneer je de eerste paragraaf op je webpagina hebt staan zal het je opvallen dat alle zinnen over de gehele breedte van de pagina lopen. Het kan natuurlijk zo zijn dat je een bepaalde zin op een nieuwe regel wil laten beginnen, zoals bij een rijmpje of liedje. Hiervoor kun je gebruik maken van de <br /> - tag. Dit is een bijzondere tag omdat je hier niets tussen kan plaatsen. De tag geeft het afsluiten van een regel en het begin van een nieuwe aan. <p> Hier komt een hele paragraaf aan tekst. </p> <p> Olleke, bolleke <br /> Rebusolleke, <br /> Olleke, bolleke <br /> Knol </p> Omdat je er niets tussen kan plaatsen sluiten we de openingstag direct weer af. Dit doen we door de slash (het / teken) toe te voegen aan de openingstag. Let er wel op dat je deze nu aan het einde toevoegt, en een spatie gebruikt.

6 We weten nu hoe we tekst kunnen weergeven op je webpagina. Soms zijn er woorden die net iets belangrijk zijn dan de rest of is er een woord waar je de nadruk op wil leggen. Dit kun je doen door een woord dikgedrukt of schuingedrukt weer te geven. Je gebruikt de <b> - tag voor dikgedrukte tekst en de <i> - tag voor schuingedrukte tekst. <p> Hier komt een hele paragraaf aan tekst. Waarin sommige woorden <b> dikgedrukt </b> zijn en sommige worden <i> schuingedrukt </i> zijn. </p> Zoek op het internet naar meer tags die je kunt gebruiken voor tekstopmaak, zoals het onderlijnen van woorden.

Je kunt op je webpagina ook een opsomming maken. Dit kan bijvoorbeeld een opsomming zijn van dingen die je niet moet vergeten, of een opsomming van de beste voetbalspelers uit je favoriete elftal.

7 Je kunt op je webpagina ook een opsomming maken. Dit kan bijvoorbeeld een opsomming zijn van dingen die je niet moet vergeten, of een opsomming van de beste voetbalspelers uit je favoriete elftal. Het eerste wat je doet is aangeven wat voor soort lijstje je wil maken. Je hebt hierbij de keuze uit een ongeordende lijst (een lijst met bolletjes) of een geordende lijst (een lijst met cijfers). Boodschappen Kattenbak verschonen 1. Arjan Robben 2. Robin van Persie Een ongeordende lijst begin je met de <ul> - tag wat staat voor unordend list. Om een geordende lijst te maken begin je met de <ol> - tag wat staat voor ordend list. Je hele lijst komt tussen een van deze twee tags te staan. <ol> <li> Het eerste item. </li> <li> Het tweede item. </li> <li> Het derde item. </li> </ol> Je zet elk item in je lijst tussen de <li> - tags wat list item betekend. Bekijk de code hierboven. Succes met het maken van je eerste lijstje! Het maken van lijstjes helemaal onder de knie? Probeer eens een tabel te maken, zoek een goede handleiding op het internet of vraag de mentor/instructeur/ docent om uitleg.

8 We kunnen in onze webpagina ook verwijzen naar andere webpagina s op het internet. Je kan een link maken naar je eigen facebook, naar een leuk filmpje op YouTube of de coderdojo website. Het linken van website doe je met een <a> - tag. Ook moet je de url (het webadres) van de website waar je naar linked toevoegen aan deze tag. De tekst tussen deze tags is de tekst waarop geklikt kan worden om naar de website te gaan. Bekijk de code hieronder goed en voeg een link toe aan je webpagina. <p> Klik <a href= > hier </a> voor schattige kattenfilmpjes </p> Probeer in plaats van het linken naar een url eens te linken naar een bestand in dezelfde map als waar je webpagina is opgeslagen. Zo kun je meerdere webpagina s aan elkaar linken.

9 Een van de leukere dingen van een eigen webpagina is dat we plaatjes kunnen toevoegen. Het toevoegen van een plaatje doen we met een <img> - tag. Hierna moet ook de bestandsnaam van de afbeelding worden toegevoegd. Dit bestand moet in dezelfde map staan als waar je webpagina is opgeslagen. <img src= bestandsnaam.jpg /> We zien dat we bij het toevoegen van een hyperlink of plaatje naast de tag zelf nog meer toe hebben gevoegd tussen de haakjes. Dit zijn de zogenaamde attributen van de tag (of het element). Deze attributen worden alleen toegevoegd aan de openingstag en bevatten extra informatie. We kunnen zo bijvoorbeeld aangeven wat de breedte van de afbeelding moet zijn door het attribuut width toe te voegen Of we geven de hoogte van de afbeelding aan met height. Ook kunnen we vertellen wat voor plaatje het is voor wanneer het plaatje niet zichtbaar is of mensen blind/slechtziend zijn. Dit doen we met het attribuut alt, wat staat voor alternatief. <img src= bestandsnaam.jpg width= 600 height= 450 alt= Beschrijving van het plaatje />

10 Je hebt nu een goed begin gemaakt met je eerste webpagina. Er staat inmiddels al behoorlijk wat code in het document. Het maken van een website kan soms lang duren of het kan nodig zijn dat je de webpagina later aan moet passen. Om er zeker van te zijn dat je dan ook nog begrijpt waarom je bepaalde dingen gedaan hebt, of om als je samenwerkt er voor te zorgen dat je partner het ook begrijp, voegen we opmerkingen toe. Je kunt in de opmerkingen zo veel tekst als je wilt zetten zolang het maar tussen een  staat.  Zorg ervoor dat je voldoende opmerkingen in je code zet, dan ben je klaar om verder te gaan met CSS.

Vergelijkbare documenten

HTML 5 en CSS 3. Truus de Bont. CC Naamsvermelding 3.0 Nederland licentie. https://maken.wikiwijs.nl/65505

HTML 5 en CSS 3. Truus de Bont. CC Naamsvermelding 3.0 Nederland licentie. https://maken.wikiwijs.nl/65505 HTML 5 en CSS 3 Auteur Laatst gewijzigd Licentie Webadres Truus de Bont 14 september 2015 CC Naamsvermelding 3.0 Nederland licentie https://maken.wikiwijs.nl/65505 Dit lesmateriaal is gemaakt met Wikiwijs