Html 2 - De basis van de indeling

In deze serie artikelen wil ik uitleggen wat HTML is, omdat dit de meest belangrijke programmeertaal is voor het programmeren van websites. Wat je verder ook gebruikt, HTML komt er altijd bij kijken.

Notepad++

Ik heb de keuze en de reden voor notepad++ in deel 1 al uitgelegd en zal dat daarom hier niet weer opnieuw behandelen.

Ik benoem het programma hier enkel en allen omdat ik denk dat den mensen die het nog niet gebruikten het beter vanaf nu wel kunnen gaan doen, omdat het toch echt overzichtelijker werkt.

Zoals uit de tekst van hierboven blijkt, ga ik ervan uit dat je de inhoud van het voorgaande artikel kent, en herhaal ik de uitleg daaruit niet (of nauwelijks) opnieuw.

Adres van je bestand

Voor je een link of een plaatje kunt toevoegen moet je eerst weten wat het adres naar je bestand is.

In dit voorbeeld staat mijn test pagina op de volgende locatie op mijn harde schijf: C:/mijntestwebsite/. Dit kan natuurlijk ook zijn: D:/documenten/xiotin/testspul/html/. Als we er van uitgaan dat je het bestand hebt opgeslagen als: test5.html. Dan zal het pad in dit voorbeeld zijn: C:/mijntestwebsite/test5.html, dit zie je dan ook staan in de adresbalk van je browser.

Wat goed is om te onthouden is dat de browser het verschil ziet tussen enkel een bestand, of een adres (naar bestanden op je pc moet hier meestal nog file: voor) . Ook weet de browser dat we ons nu bevinden in C:/mijntestwebsite/. Dus als ik een link (of plaatje) heb, neem de pagina test6.html, hoef ik alleen deze naam op te geven (mits het bestand in dezelfde map staat).

Stel test6.html staat niet in dezelfde map, maar op het lokale adres: C:/mijntestwebsite/weereentest/. Dan volstaat het om alleen “weereentest/test6.html”te gebruiken.

In sommige gevallen staat je bestand een mapje terug. Dus als we in het laatste geval een link terug willen maken, van test6.html naar test5.html, moeten we of weer het hele adres gebruiken, of we nemen de verkorte manier hiervoor.

Uiteraard nemen wij de verkorte (en universele) manier hiervoor. Wij maken een link naar “../test5.html”. Hierbij ../ staat voor een map omhoog.

Waarom is dit handig? Stel, je maakt je hele website op je harde schijf. En je wilt hem daarna online zetten, dan is het adres niet meer C:/mijntestwebsite/. Echter hoef je nu niet alles aan te gaan passen, in je nieuwe adres, want je mappen structuur, en je bestands benaming blijft hetzelfde. De browser weet op deze verkorte manier je bestanden ook te vinden.

Naast het voor deel online, hoef je ook niet steeds het hele adres te typen, wat bij locaties als “D:/documenten/xiotin/testspul/html/” toch wel een fijne luxe is.

Alinea’s maken

Hier op de site gebruikt iedereen ze. Maar hoe maak je nu een goede (en handig te gebruiken) alinea. In het vorige artikel komt < br> (zonder de spatie) naar voren. Dit is echter niet handig te gebruiken als je veel tekst heb.

Als je elk blok tekst tussen < p> en de sluit tag(zonder de spatie er in) dan word dit vanzelf een alinea, mat erboven en onder een witregel. Echter plaats je 2 keer een blok onder elkaar, is de browser slim genoeg om maar 1 witregel te laten zien.

Links maken

Om een link te maken moet je rekening houden met 2 dingen: is het een onderdeel van jouw website, of is het een andere website?

De tags Zoals jullie wel verwachten heeft een link ook een opende en afsluitende tag. In dit geval zijn dat: < a> en. waarbij tussen deze tags de te weergeven tekst komt te staan. Nu zul je zeggen: Waar laat ik nu het adres waar naartoe gelikt moet worden? Dat komt in een element te staan.

Elementen zijn extra gegevens die je aan een tag kunt meegeven in dit geval maken we gebruikt van het element href. De volledige link zal dan worden: < a href="”doel">tekst die de bezoeker ziet< /a>. Elementen heb je in allerlei soorten en vormen, maar hierover behandelen we later mee.

Een link naar een ander bestand van je site Een link naar (de eerder gebruikte pagina) test5.html, vanaf de pagina test6.html zal dus de code krijgen: < a href="”../test5.html”">terug naar test5.html(Dit was voor een map omhoog).

Staat het bestand in dezelfde map, dan word het: < a href="”test4.html”">testpagina 4< /a>. En als we van test5 naar test6 (nog altijd in een map lager) willen linken word het: < a href="”weereentest/test6.html”">testpagina 4< /a>.

Plaatjes toevoegen

Oke, nu alweer het laatste onderdeel van dit artikel, voor ik dit artikel afrond, en jullie weer lekker laat oefenen. We gaan het hebben over het invoegen van plaatjes. Daar voor is het handig als jullie eerst wat (kleinere) plaatjes verzamelen. Dit kun je doen met de zoekfunctie van google. Ik gebruik het plaatje dat je hiernaast ziet. Deze heeft de naam smile030.jpg.

Wat is nu de tag die je nodig hebt voor een plaatje? Is de vraag die ik jullie allemaal kan horen denken. Ik zal jullie niet langer in spanning houden, de tag die je nodig hebt is de tag. Deze wordt net zoals de tag niet afgesloten.

Om een plaatje (in dezelfde map) te kiezen moet je natuurlijk wel meer opgeven als alleen de < img alt="" / > tag, want hoe weet de computer anders wat hij moet tonen, daarvoor hebben we weer een attribuut. In dit geval is deze attribuut stc=””. Je ontkomt er bij een plaatje niet aan (net als bij een link) om dit attribuut te gebruiken. De gehele tag zal er dan zo uitzien: < img src="””" alt="" / >.

Omdat we net de links hebben behandeld, denk ik dat jullie wel verwachten dat je het adres van het plaatje op geeft tussen de “” van het scr attribuut. Dit is ook helemaal correct. In mijn geval (het plaatje staat in dezelfde map) zal de tag er zo uit zien:

< img src="”smile030.jpg”" alt="" / >

Door de bovenstaande voorbeelden (bij links en daarboven) verwacht ik wel dat jullie zelf kunnen uitvogelen hoe en wat als het plaatje in en andere map staat.

Nawoord

Zo dit was dan weer het tweede deel. Ik denk dat we de volgende keer meerdere attributen gaan behandelen, voor de tags die we nu al kennen. En misschien gaan we ook met kleurtjes spelen, maar daarvan moet ik eerst kijken hoe dat uitpakt, en hoeveel dat is. Want ik probeer elk deel redelijk compact te houden zodat ik jullie niet overspoel met informatie.