Jump to content

OWN

  • entries
    5,186
  • comments
    17,587
  • views
    1,586,382

Kersteditie 2009 - HTML-cursus


OWN

570 views

gallery_108553_47_12847.png

Deze rubriek is geschreven door Kloep!

Hallo, en welkom bij de HTML-cursus van OWN. In deze rubriek gaan wij (VWO-er en Kloep) zaken vertellen die handig zijn om te weten als je met HTML aan de slag gaat. Later zullen we HTML verder gaan uitwerken, dit ook onder andere met behulp van CSS. Als we dit allemaal hebben gehad, gaan we over naar PHP in combinatie met MySQL. Later zullen we ook steeds meer Javascript bereiken. In het begin zullen we dus met de basis beginnen, maar zonder deze basis kun je niet verder komen. In deze cursus zul niet alleen lappen tekst te zien krijgen, maar alles zal worden uitgelegd door middel van afbeeldingen. Hierdoor zullen het geen saaie lange verhalen worden, maar zal alles in kleine stappen worden uitgelegd.

In deze rubriek maken we gebruik van het programma Notepad++ en Firefox. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Firefox de codes anders weer als bijvoorbeeld Internet Explorer of Netscape. Veel plezier met deze nieuwe rubriek!

Welkom bij les nummer 8. Deze week houden we ons bezig met Links. Dit onderdeel bestaat uit twee onderdelen. Veel plezier met lezen! :)

Externe link maken

We beginnen met het meest standaard. Het maken van een externe link. Hiermee bedoel ik een link maken naar een webpagina op een ander domein. Vele HTML-codes lijken op de BB-code die daarbij hoort. Links is hierin een duidelijk uitzondering. In BB-codes gebruik je onderstaande link:

In HTML gaat dat op een andere manier, onderstaan zie je hoe:

Zoals je ziet, gebruik je dus het A element, met het bijbehorende HREF attribuut. Hierin gebruik je de link als waarde. Zoals gewoonlijk sluiten we ook weer af met een gewone afsluitende tag.

Interne link maken

Nu komen we bij aan bij het maken van een interne link. Hiermee doel ik op een link die op dezelfde website staat als waar je de link opzet. Hieronder geef ik een voorbeeld van een interne link:

Hij gaat nu zoeken naar een bestand wat heet 'index.html'. Dit bestand gaat hij alleen zoeken in dezelfde map als waar het bestand staat waar de betreffende link inzit. Mocht je eerst een map terugwillen, om vervolgens in een andere map te gaan, moet je gebruik maken van puntjes. Onderstaand een voorbeeldcode:

In dit voorbeeld is dus duidelijk dat er eerst een map terug wordt gegaan, en vervolgens gezocht word naar 'index.html' in de map 'site'.

Ankers

Met een anker bedoelen we in dit geval niet zo'n ijzeren ding wat een boot naar beneden gooit om te stoppen. Nee, hiermee bedoelen we bepaalde links waarmee je door kan linken naar een bepaald gebied op 1 pagina. Een mooi voorbeeld hiervan is Wikipedia. Op de meeste pagina's zie je bovenaan een lijstje met de informatie die op die pagina te vinden is. Als je dan ergens op klikt, gaat je beeld automatisch naar het juiste gedeelte op de pagina. Dit noemt men een anker.

Als je een anker gebruikt, heb je twee codes nodig. De eerste code gebruik je op de plek waar je naartoe wilt linken in je pagina. Hieronder een voorbeeld:

Hierin hebben we dus wederom het A element gebruikt, maar met een ander attribuut. De vorige keer gebruikte we HREF, dit was om een link aan te geven. Nu hadden we het over de naam van het anker, en gebruiken we dus NAME.

Op de plek waar je de link neer wilt zetten, gebruik je onderstaande code:

Hierbij gebruik je dus weer het HREF attribuut, omdat je weer een link erin zet. Voor de naam van een anker komt automatisch een '#' te staan zodra je de naam aangeeft met het NAME attribuut. Deze hoef je niet aan te geven bij het NAME attribuut, maar dit moet wel bij het HREF attribuut.

Het is ook mogelijk vanuit een pagina door te linken naar een anker op een andere pagina. Dit gaat dan als volgt:

Je gebruikt dan dus gewoon de link naar de pagina, met daarachter de naam van je anker (met het '#' teken ervoor).

In sommige situaties weet je misschien niet hoe het anker heet van de pagina van een andere website. Je kunt dan helemaal in de broncode gaan zoeken, maar je kunt dat ook veel handiger doen. Je klikt gewoon op het anker, en je word daar dan dus naartoe gelinkt. Vervolgens kijk je in je adresbalk, en zie je de directe link naar het betreffende anker. Dit scheelt je weer een hoop zoekwerk in de broncode van de ander. Denk er ook wel aan: een anker die onderaan de pagina staat, wordt niet altijd mooi bovenaan de pagina weergegeven. Deze word dan ergens in het midden weergegeven, en dat kan dus soms tot verwarring leiden.

En dat was les nummer 8. Volgende keer komt les 9, hierin gaan we verder met de Links. Hopelijk tot de volgende keer!

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...