HTML-cursus

12 oktober 2010

Hallo, en welkom bij deze HTML-cursus. Dit is een rubriek van OWN. Echter, hij bleek daar niet heel erg populair te zijn, waarschijnlijk komt dit doordat de lezers van OWN plezier willen hebben, en geen moeilijke codes leren. In de 200e editie van OWN is er besloten om deze rubriek niet meer in de OWN te plaatsen, maar hier. Hier krijgt hij meer bezoekers die er echt iets mee willen doen.

Het heet dan wel HTML-cursus, maar hij loopt al zo lang dat het niet enkel HTML meer is. Ik ben begonnen met HTML, maar inmiddels is CSS ook al behandeld. Op het moment komen er leuke interessante codes van Javascript. Misschien dat jullie binnenkort ook wel weer nieuwe codes te zien krijgen, maar dat is nog niet helemaal zeker.

In de volgende post zie je een handig overzicht, waarin je kan doorlinken naar elke les apart. Veel plezier en succes met alles! Als je vragen hebt, kun je mij altijd een Persoonlijk Bericht sturen.

Kloep

Bewerkt: 20 december 2011 door Kloep

12 oktober 2010

INDEX

Hieronder kun je gemakkelijk doorklikken naar alle lessen!

HTML

[table=header]Les||Link

Les 1|Basisinformatie|Klik!

Les 2|Het Begin|Klik!

Les 3|De eerste code|Klik!

Les 4|Opmaakcodes deel 1|Klik!

Les 5|Opmaakcodes deel 2|Klik!

Les 6|Afbeeldingen deel 1|Klik!

Les 7|Afbeeldingen deel 2|Klik!

Les 8|Links deel 1|Klik!

Les 9|Links deel 2|Klik!

Les 10|Tabellen deel 1|Klik!

Les 11|Tabellen deel 2|Klik!

Les 12|Tabellen deel 3|Klik!

Les 13|Lijsten deel 1|Klik!

Les 14|Lijsten deel 2|Klik!

Les 15|Formulieren|Klik![/table]

CSS

[table=header]Les||Link

Les 16|CSS Regels|Klik!

Les 17|CSS Begin deel 1|Klik!

Les 18|CSS Begin deel 2|Klik!

Les 19|CSS Spatiëring, inspringingen en uitlijnen|Klik!

Les 20|CSS Hoofdletters en decoratie|Klik!

Les 21|CSS Lijsten|Klik!

Les 22|CSS Tabellen|Klik![/table]

Javascript

[table=header]Les||Link

Les 23|Het begin|Klik!

Les 24|Bevestigingsvenster|Klik!

Les 25|Enter uitschakelen en wachtwoord|Klik!

Les 26|If en Else|Klik!

Les 27|Achtergrondkleur wijzigen|Klik!

Les 28|Nieuw venster openen|Klik!

Les 29|Vensters|Klik!

Les 30|Gebeurtenisafhandelingen|Klik!

Les 31|Redirects|Klik!

Les 32|Tekstgrootte aanpassen|Klik!

Les 33|Blokjes maken|Klik!

Les 34|Aantal woorden/tekens tellen|Klik!

Les 35|Omrekentabel|Klik!

Les 36|Huidige datum en tijd|Klik!

Les 37|Huidige tijd|Klik!

Les 38|Berekeningen|Klik!

Les 39|Tekst veranderen|Klik!

Les 40|Kalender|Klik!

Les 41|Styleswitch|Klik![/table]

Bewerkt: 13 oktober 2010 door Kloep

12 oktober 2010

Les 1: Basisinformatie

Hallo, en welkom bij de nieuwste rubriek van OWN. In deze rubriek ga ik de allereerste basis vertellen die handig is 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 maak ik 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!

Elementen, attributen en waarden

Om te beginnen, zal ik jullie de opbouw van een HTML-code uitleggen. Deze bestaat uit maximaal drie delen. Hierbij denken we aan elementen, attributen en waarden. Elementen zijn een soort labels die de verschillende delen van een pagina indentificeren en structureren. Elementen kunnen leeg zijn, maar hebben meestal een tekst. Als het een tekst heeft, bestaat het uit zowel een begin-, als een eindtag. In het voorbeeld hiernaast is en leeg element te zien op regel 10. Voor de "img" staat een "<". Dit betekent dat de tag is geopend. Hij sluit weer bij de "/", die weer wordt gevolgd door een ">". Alle tags staan tussen de "<" en de ">". Een leeg element is te herkennen aan dat er maar één keer een "<" en één keer een ">" in voor komt, wat duidelijk is te zien op regel 10. Op regel 12 is een element te zien met een tekst. Deze kun je herkennen aan dat er twee maal een "<" en twee maal een ">" inzit. Een element kan regelmatig één of meerdere attributen bevatten. In het voorbeeld hiernaast op regel 10 is dit de "src". Dit is echter niet de enige attribuut die "img" kan bevatten. Hierbij kun je nog denken aan bijvoorbeeld "width" en "height", die de breedte en hoogte in pixels aan kunnen geven. Elk attribuut bevat een waarde. De waarde geeft aan waar het over gaat en wat er moet gebeuren. Op regel 10 is de waarde bijvoorbeeld "test.jpg". Op regel 12 is dit dus "test.html". Denk eraan dat een waarde altijd tussen aanhalingstekens geplaatst moet worden.

Ouders en kinderen

HTML moet je eigenlijk als een hele grote familie zien. Je hebt ouders en kinderen. Als een element een ander element bevat, wordt het beschouwd als de ouder van het ingesloten element. In het voorbeeld hiernaast zal het allemaal wat duidelijker worden. Hierin zien wij drie elementen: de "p", de "b" en de "i". De "p"zorgt voor een paragraaf, de "b" zorgt voor een dikgedrukte tekst en de "i" zorgt voor een schuine tekst. Zoals in het voorbeeld te zien is, is het "p" element de hoogste van het stel. Dit maakt "p" de ouder van "b", die daar recht onder staat. Dus met een beetje logisch nadenken, kom je er al achter dat "b" dan het kind is van "p". "i" is in dit geval het kind van "b". Dit maakt "b" dan natuurlijk de ouder van "i". "i" Is echter geen kind van "p", en er bestaat hier niet zoiets als een kleinkind. In dit geval noem je het gewoon een afstammeling.

Tekstinhoud

De tekst zelf is het belangrijkste onderdeel van een hele website. Echter moet je er altijd wel op letten wat je typt, want HTML kan het zomaar omzetten naar een webpagina. Zo moet je natuurlijk niet zomaar tags uit gaan werken, want deze worden per definitie uitgewerkt en omgezet. Zo ook meer dan één spatie of enters worden weggelaten. Er is natuurlijk wel een mogelijkheid om met enters te werken. Hiervor gebruik je dan het element "br". Dit staat voor break, wat er voor zorgt dat je op de volgende regel doorgaat. Als je "br" gebruikt, ga je automatisch op de volgende regel verder. Gebruik je op die volgende regel in het begin nogmaals een "br" element, zorg je ervoor dat je een witregel krijgt.

Dit is echter niet alles waarbij je op moet letten als je een tekst typt. Het "&" teken wordt regelmatig gebruikt in HTML. Om dit teken toch op je scherm te krijgen, moet je "&amp" typen.

Absoluut en relatief

En toen kwamen we alweer aan bij het allerlaatste onderdeel van les 1. We gaan het hierin hebben over absolute en relatieve URL's. De beste manier om dit zo goed mogelijk in kaart te brengen, is denk ik een tabel erbij maken, dus bij deze:

Geen zorgen, ik zal de tabel ook nog even toelichten. In de eerste kolom zie je de naam van het bestand. In de tweede kolom het volledige pad waarin het bestand staat (de absolute URL). In de derder kolom staat welk pad je moet volgen vanuit de homepage, in de geval index.html (de relatieve URL). De relatieve URL moet alles zien vanuit de map waarin de homepage instaat, in dit geval is dat dus de map: "online". Om naar "logo.png" te komen vanuit de map "online", moet je dus eerst naar "images" en dan "logo.png" opzoeken. Bij info.html zit dat anders, hier zit de map "beta" namelijk niet in "online". Vandaar dat de relatieve url eerst moet beginnen met twee puntjes, die er voor zorgen dat je één map omhoog gaat. Hopelijk is het zo allemaal wat duidelijker.

Bewerkt: 12 oktober 2010 door Kloep

12 oktober 2010

Les 2: Het begin

Een site ontwerpen

Voordat je begint met het schrijven van je code, moet je je eerst een aantal dingen goed bedenken:

Welke boodschap heb ik voor mijn bezoekers?

Wat voor publiek wil ik aantrekken?

Hoeveel pagina's heb je nodig?

Deze drie vragen komen naar boven als je een site wilt gaan maken. Er is niks mis met een ouderwets stukje papier en een pen. Pak dus eerst pen en papier, en schrijf op wat je wilt hebben op je site. Wat heb je nodig, hoeveel pagina's, dat soort vragen. Zodra je daar antwoorden op hebt, kun je beginnen met het ontwerpen van je site op papier. Waar moet het menu komen, hoe groot moet de banner worden, welke kleuren wil ik gaan gebruiken? Deze vragen zullen daarbij goed van pas kunnen komen.

Besteed echter niet te veel tijd aan het ontwerpen op papier, want uiteindelijk zul je je toch moeten gaan verdiepen in het schrijven van je website. Mocht je totaal geen idee hebben van hoe je je site eruit wilt laten zien, neem dan een kijkje op andere site's. Kijk hoe die eruit zien, en krijg daar eigen ideeën van. Denk er wel aan, dat je niet moet gaan kopiëren! Dit is namelijk verboden, en natuurlijk ook een stuk minder leuk.

Opslaan

Volgende week gaan we ons bezig houden met het typen van een webpagina. We zullen dan beginnen met een simpele pagina, zodat je de codes leert kennen. Vandaag vertel ik nog even hoe je je pagina moet opslaan, want dat is erg belangrijk en noodzakelijk om je pagina's werkend te krijgen.

Zodra je enkel HTML-teksten in je pagina hebt gezet, kun je gewoon de extensie .html of .htm gebruiken.

Zodra je zowel PHP-teksten als HTML-teksten in je pagina hebt gezet, moet je persé de extensie .php gebruiken! .php kan zowel HTML als PHP lezen en uitvoeren, .html en .htm kunnen enkel HTML lezen en uitvoeren.

Ook is het mogelijk om .php te gebruiken zodra je enkel HTML in je pagina hebt gezet, maar dit is overbodig. Je kunt dan kiezen tussen .html, .htm en .php.

.css is ook een extensie. Deze is enkel te gebruiken bij CSS-teksten. Hierover vertel ik later meer informatie.

12 oktober 2010

Les 3: De eerste code

Basiscodes

Laten we beginnen met een lekkere simpele tekst. In deze tekst komen alle basiscodes aan bod. Bekijk onderstaande tekst even op de linkerafbeelding, en kijk vervolgens naar het resultaat in de rechterafbeelding.

Op de linkerafbeelding is de gehele HTML-tekst te zien. Op de rechterafbeelding is te zien hoe het in je browser word weergegeven.

Met de bovenste regels (DOCTYPE) word aangegeven welke HTML je gebruikt.

Met HTML wordt aangegeven dat hier het HTML-gedeelte begint.

Met HEAD wordt aangegeven dat hier het HEAD-gedeelte begint. Hierin wordt onder andere een titel aan je pagina gegeven (TITLE-tag) en de META-regel. In de META-regel declareer je de codering. 'UTF-8' is hierin de lettertekencodering waarmee je pagina is opgeslagen.

Met BODY wordt aangegeven dat hier het BODY-gedeelte begint. Hierin komt je gehele pagina te staan. Hierin kun je onder andere alinea's neerzetten (hierover later meer in deze les), maar ook bijvoorbeeld tabellen en lijsten (hierover later meer in volgende lessen).

In het voorbeeld wordt dus HTML 4.01 Transitional gebruikt. Het is dus nog wel een saaie tekst, maar op deze manier word het wel duidelijk hoe een HTML-tekst in elkaar hoort te zitten. Natuurlijk kunnen we nog wat andere dingen toevoegen, maar dit komt allemaal later. Voor vandaag houden we het op nog één toepassing. We gaan nog even een achtergrondkleur toevoegen, en daarna gaan we door naar de twee laatste onderdelen van deze les.

Een achtergrondkleur toevoegen is erg gemakkelijk. In de BODY-tag voeg je BGCOLOR toe. Dit komt er dus als volgt uit te zien:

<BODY BGCOLOR="red">

Als je dit toevoegt, krijg je een rode achtergrond. Natuurlijk kun je 'RED' voor allerlei andere kleuren vervangen. Ook kun je een kleurcode gebruiken, alleen moet je dan wel een '#' ervoor zetten. Voor vele kleurcodes kun je hier eens een kijkje nemen.

Identatie

In HTML werk je met verschillende tags, bijvoorbeeld de HTML-tag. Tags hebben vaak een open- en een sluit-tag, maar er zijn een aantal uitzonderingen waar we later nog wel op ingaan. Open-tags zijn gewoon gelijk aan de naam, bij de sluit-tag zal er een slash ( / ) voor staan.

Om het overzicht over je code te behouden en om (vaak onnodige) fouten te voorkomen, is het slim om je code uit te lijnen, ook wel indentatie genoemd. Er wordt niet op gecontroleerd zoals bij andere talen (Pawno, bijvoorbeeld), maar we raden het je zeker aan. Na iedere open-tag dien je een tab in te springen, bij een sluit-tag ga je weer een stukje terug.

Kopteksten en Alinea's

Nu je weet hoe de BODY-tag in elkaar steekt, kun je de pagina zelf gaan maken. We zullen eerst de beginselen van een pagina gaan bespreken, namelijk de kopteksten, alinea's en de BR-tag (een zachte enter in een normale tekstverwerker).

In HTML kun je een kop markeren met de H-tags. Er zijn al 6 koppen voorgeprogrammeerd, dus je hebt H1 tot en met H6. Zoals gezegd zijn ze voorgeprogrammeerd en hebben ze dus standaard groottes en eigenschappen (op het font na, dat verschilt per browser). Je kunt de tags nog wel aanpassen, maar dat komt nu nog niet aan de orde.

Nadat je een kop hebt geplaatst, is het uiteraard de bedoeling dat je ook een alinea plaatst. Alinea's kun je aangeven door middel van de P-tag. Als je meerdere alinea's onder elkaar hebt staan, zullen ze automatisch door een harde enter of witregel worden gescheiden.

Enters tussen of binnen P-tags (of binnen of tussen andere tags, uiteraard) zullen geen effect hebben, je zult ze echter wel zien in de broncode van je webpagina. Om een zachte enter (een enter waarbij de alinea gewoon doorloopt) te plaatsen, kun je de BR-tag gebruiken. De BR-tag is zo'n tag waar we het al eerder over hadden in dit artikel, een tag zonder een echte open- of sluit-tag (het is eigenlijk beide in één). Je schrijft hem daarom als <BR />.

12 oktober 2010

Les 4: Opmaakcodes deel 1

Vet, Cursief, Onderstrepen, Doorhalen

Ditmaal gaan we de opmaak in HTML wat verder uitwerken, we gaan aan de slag de basiscodes. Ze zullen niet veel verschillen met de BBcodes van internetfora, Hyves e.d., dus als je daar al redelijk mee uit de voeten kan, is dat mooi.

Om een stuk tekst in Bold, oftewel vetgedrukt, te schrijven, gebruik je de B-tag (Bold):

<B>Hier je tekst</B>

Om een stuk tekst in Italic, oftewel schuingedrukt, te schrijven, gebruik je de I-tag (Italic):

<I>Hier je tekst</I>

Om een stuk tekst te onderlijnen, gebruik je de U-tag (Underline):

<U>Hier je tekst</U>

Om een stuk door te strepen, gebruik je de S-tag (Striped):

<S>Hier je tekst</S>

Tekengrootte

In HTML kun je eenvoudig je tekst vergroten en verkleinen, door middel van de BIG- en de SMALL-tag. Deze codes zijn niet erg uitgebreid, je kunt namelijk maar uit één grootte kiezen (per tag). Die zal nog wel aan te passen zijn door CSS, maar daar komen we later op terug.

De tags vereisen geen extra waardes, je kunt ze dus net als de andere tags gewoon op de volgende manier gebruiken:

<BIG>Hier je tekst</BIG>

<SMALL>Hier je tekst</SMALL>

Monotype letters

Alle bezoekers hebben in hun browserinstellingen twee lettertypen gespecificeerd. Dit zijn het proportionele en het niet-proportionele. Dat laatste ziet eruit als een typmachine (misschien kennen jullie zo'n ding wel). Meestal zijn dat lettertypen als Times New Roman en Courier. Als jij zelf op je pagina bijvoorbeeld een computercode of een link wil onderscheiden, kun je dit gemakkelijk doen met de volgende codes: <code>, <tt>, <kbd> of <samp>. <code> wordt gebruikt bij computercode. Dit gebeurd vooral in talen zoals C en Perl. <tt> wordt gebruikt voor algemene teksten. <kbd> gebruikt men voor toetsenbordaanwijzingen en <samp> voor de weergave van een voorbeeldtekst. Waarschijnlijk zijn de verschillen nu nog niet echt duidelijk, dit komt doordat er qua uiterlijk geen verschil is. In het voorbeeld hieronder gebruik ik <code>, maar je kan ook een hele andere gebruiken.

Merk wel op dat sommige webpagina's geheel in niet-proportionele lettertypen zijn, dus dan maken deze codes niks uit.

Blockquote

Wil je een tekst wel afzonderen van je webpagina, maar wil je ook een proportioneel lettertype gebruiken? Dat kan natuurlijk! Hiervoor gebruik je geen van bovenstaande codes, maar hiervoor gebruik je <blockquote>. In de meeste gevallen (tegenwoordig zullen waarschijnlijk alle browsers dit wel doen) zal je browser de tekst in stukje laten inspringen. In onderstaan voorbeeld wordt het misschien wat duidelijker:

12 oktober 2010

Les 5: Opmaakcodes deel 2

Super- en Subscript

Het maken van subscript en superscript is erg gemakkelijk in HTML, maar wanneer gebruik je deze opmaak nou eigenlijk? Een superscript houdt in dat de tekst kleiner iets hoger afgebeeld word. Dit kun je gebruiken als je bijvoorbeeld een kwadraatteken wilt afbeelden. Een subscript houdt in dat de tekst kleiner iets lager afgebeeld word. Dit gebruik je onder andere bij wiskundige formules. De teksten zijn erg gemakkelijk:

<sub>1234</sub>

Dit resulteert in: ₁₂₃₄

<sup>1234</sup>

Dit resulteert in: ¹²³⁴

Acronymen + uitleg

Als je niet weet wat een acronym is, raad ik je aan om een kijkje bij Test Jezelf te nemen. Het houd dus in dat er met puntjes onderstreept een andere tekst staat. Als je je muis op de tekst houd, verschijnt er een andere tekst.

<acroynym title="test">1234</acronym>

Dit resulteert in: 1234

Centreren

Als je een tekst wilt centreren, is dat erg gemakkelijk. Als je al ervaring hebt met BB-codes, kun je het al helemaal gemakkelijk leren. Hierbij vervang je de '[]' voor <>. Je krijgt dus:

<center>gecentreerde tekst</center>

Dit resulteert dus in een tekst die gecentreerd is.

Uiteraard werk dit niet enkel bij een tekst, maar ook bij bijvoorbeeld afbeeldingen.

Font

Met font kun je je tekst wat opleuken. Je kunt bijvoorbeeld de kleur, grootte en het lettertype ermee aanpassen. Dit zijn ook de drie die ik nu bespreek in deze les.

Wat betreft de kleur kun je de naam opgeven of de kleurcode.

<font color="red">1234</font>

Dit resulteert in: 1234

Wat betreft de grootte kun je de getallen 1 t/m 7 invullen.

<font size="4">1234</font>

12 oktober 2010

Les 6: Afbeeldingen deel 1

Afbeelding openen

Een afbeelding openen is niet moeilijk. Het lijkt een beetje op de BB-codes die wij hier op het forum gebruiken, alleen komt er nog iets bij. Een zogehete attribuut (meer uitleg hierover in de eerste les) komt er namelijk bij:

<img src="http://i38.tinypic.com/68u8tf.png">

Dit resulteert dus in:

Men gebruikt dus het element IMG (wat ook in de BB-code hiervoor wordt gebruikt) en het attribuut SRC. In dit attribuut gebruik je als waarde de link naar de afbeelding die je wilt weergeven.

Afmetingen opgeven

In sommige gevallen wil je een grote afbeelding kleiner hebben, maar heb je geen fotobewerkingsprogramma tot je beschikking. In dit geval kun je altijd de afbeelding verkleinen met behulp van HTML. Hiervoor gebruikt je de attributen WIDTH en HEIGHT binnen het IMG element. Hieronder een voorbeeld:

<img src="http://i38.tinypic.com/68u8tf.png" width="400" height="120">

De originele afbeelding is 500X150 pixels. Door deze code wordt dit dus verkleint naar 400X120 pixels. Mocht je maar 1 waarde aan willen passen, is dit ook mogelijk.

Deze code:

<img src="http://i38.tinypic.com/68u8tf.png" width="400">

zet hij automatisch om naar

<img src="http://i38.tinypic.com/68u8tf.png" width="400" height="120">

deze code.

Alternatieve tekst

In sommige gevallen kunnen afbeeldingen niet correct worden weergegeven. Dit kan bijvoorbeeld gebeuren bij mobiele apparaten of trage verbindingen. In deze gevallen zou je misschien een alternatieve tekst willen toevoegen, die verschijnt zodra de afbeelding niet wordt weergegeven. Hiervoor hoef je enkel het attribuut ALT toe te voegen na SRC. Een code hiervan komt er dus zo uit te zien:

<img src="http://i38.tinypic.com/68u8tf.png" alt="Hayden Panettiere">

Dit resulteert dus in de afbeelding als die wordt weergegeven, of in de tekst: Hayden Panettiere. Het ALT attribuut heeft ook een toegevoegde waarde indien de afbeelding wel wordt weergegeven. Als je dan namelijk op de afbeelding blijft staan met je muis, verschijnt er een geel balkje met de tekst van de waarde van ALT.

Afbeelding uitlijnen

Een afbeelding uitlijnen is erg gemakkelijk. Wat bereik je ermee? Nou, dat je tekst en afbeelding gemakkelijk naast elkaar kunt zetten. In de BB-codes op dit forum gebruik je IMGLEFT en IMGRIGHT. In HTML gaat het als volgt:

<img src="http://i38.tinypic.com/68u8tf.png" align="left" />

Hierna kun je gewoon je eigen tekst plaatsen, bijvoorbeeld met het P element of het H element.

12 oktober 2010

Les 7: Afbeeldingen deel 2

Ruimte tussen tekst en afbeelding

In sommige situaties, wil je de ruimte tussen je afbeeldingen en je tekst groter of juist kleiner hebben. Door twee simpele attributen toe te voegen aan je IMG tag. Deze attributen zijn HSPACE en VSPACE. HSPACE staat voor de ruimtes aan de linker- en rechterkant. VSPACE staat voor de boven- en de onderkant. Het getal wat je invoert staat voor het aantal pixels. Hieronder vind je een voorbeeldcode:

<img src="http://i38.tinypic.com/68u8tf.png" hspace="10" vspace="10">

Dit houd dus in dat er aan zowel de boven-, de onder-, de linker- en de rechterkant 10 pixels ruimte word gecreërd tussen de tekst en de afbeelding zelf.

Horizontale lijn toevoegen

Een horizontale lijn toevoegen is niet moeilijk, en werkt zo goed als hetzelfde als in de BBcodes. Je gebruikt de HR tag, met SIZE, WIDTH, ALIGN en NOSHADE als attributen. SIZE staat voor de hoogte in pixels. WIDTH staat voor de breedte in pixels of in procenten. ALIGN staat voor de positie en NOSHADE staat voor de schaduw. In de meeste gevallen gebruik je daar als waarde NOSHADE, om ervoor te zorgen dat je geen schaduw krijgt. Hieronder een voorbeeldcode:

<hr size="10" width="70%" align="center" noshade="noshade">

Dit resulteert dus in een lijn van 10 pixels hoog, 70% breed, in het midden en zonder schaduw.

Favicon

De meeste mensen zullen niet weten wat een favicon is. Noujah, eigenlijk zullen de meeste het wel weten, maar de naam niet kennen. In je bladwijzerbalk zie je soms naast de naam van de website, een kleine afbeelding. Dit noem je een favicon. Zo'n favicon is erg gemakkelijk in je website te zetten. Hiervoor moet je een extra regel toevoegen in je HEAD tag. Onderstaan een voorbeeld:

<link rel="favicon" href="favicon.ico" type="image/x-icon">

Bij REL geef je de naam aan van je favicon. Bij HREF geef je de link van je afbeelding aan. Over links krijg je de komende weken meer te horen. Bij TYPE geef je het type aan.

Bewerkt: 12 oktober 2010 door Kloep

12 oktober 2010

Les 8: Links deel 1

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:

[url=http://www.gtaforum.nl/index]GTAForum[/url]

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

<a href="http://www.gtaforum.nl/index">GTAForum</a>

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:

<a href="index.html">

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:

a href=".../site/index.html">

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:

<a name="intro">Intro</a>

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:

<a href="#intro">Intro</a>

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:

<a href="index.html#intro">Intro op de index</a>

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.

Bewerkt: 12 oktober 2010 door Kloep

12 oktober 2010

Les 9: Links deel 2

Nieuw venster

Een link laten openen in een nieuw venster is erg gemakkelijk en snel gedaan. Dit gaat als volgt in onderstaande code:

<a href="http://www.gtaforum.nl/" target="blank">GTAForum</a>

Je gebruikt dus de normale code van een gewone link, alleen je voegt er een attribuut bij. Dit is het attribuut TARGET, die je BLANK als waarde meegeeft. Erg gemakkelijk dus.

Sneltoetsen voor links maken

Het is ook mogelijk om een sneltoets aan te maken met HTML voor je webpagina. Dit gaat wederom met dezelfde code als een gewone link, weer wordt er een attribuut bijgevoegd:

<a href="http://www.gtaforum.nl/" acceskey="g">GTAForum</a> <i>(Alt-G, Ctrl-G)</i>

Het attribuut ACCESKEY voeg je dus toe, met als waarde de letter die je wilt gebruiken voor je sneltoets. Dit kun je dan automatisch toepassen met zowel Ctrl als Alt.

Link in afbeeldingen

Dit werkt ongeveer wel zoals je zou verwachten. In plaats van de tekst in een link, zet je de code neer naar een afbeelding. Kijk hier maar:

<a href="http://www.gtaforum.nl/"><img src="http://www.gtaforum.nl/public/style_images/gtaf/header/voorgrond.png"></a>

Deze code zorgt er dus voor dat je de link in de afbeelding krijgt.

12 oktober 2010

Les 10: Tabellen deel 1

Eenvoudige tabellen maken

Een tabel maken is niet moeilijk. Je begint met het openen met TABLE. Daarna geef je de rijen aan met TR, en de cellen in die rij geef je aan met TD. Hieronder een voorbeeld:

<table>
<tr><td>tekst 1</td><td>tekst 2</td></tr>
<tr><td>tekst 3</td><td>tekst 4</td></tr>
</table>

Dit geeft het volgende resultaat:

[table=simple]tekst1|tekst2

tekst3|tekst4[/table]

Dit is het resultaat, alleen dan zonder de border. Je ziet dus dat TR voor de rij staat, en TD voor de kolom.

Randen toevoegen

In het bovenstaande voorbeeld kreeg je in BB-codes wel een border. In HTML is dit niet het geval, en moet je dit dus nog aangeven. Dit doe je door het BORDER attribuut toe te voegen aan de TABLE-tag. Zie hieronder:

<table border="10">
<tr><td>tekst 1</td><td>tekst 2</td></tr>
<tr><td>tekst 3</td><td>tekst 4</td></tr>
</table>

Dit geeft als resultaat een behoorlijk dikke border. Als je geen border wilt, kun je dit aangeven met de waarde "0".

Breedte instellen

Om de breedte van je tabel aan te geven, voeg je wederom een attribuut toe. Dit keer been je WIDTH. Zie hieronder:

<table width="200">
<tr><td>tekst 1</td><td>tekst 2</td></tr>
<tr><td>tekst 3</td><td>tekst 4</td></tr>
</table>

De 200 in het voorbeeld staat voor 200 pixels. Meestal geef ik zelf geen breedte aan, in dit geval past hij zichzelf aan aan de breedte van je tekst in de tabel.

Tabel centreren

Om je tabel te centreren (of juist links of rechts weer te geven), voeg je weeral een attribuut toe. Nu gebruik je het eerder gebruikte ALIGN. Toch hieronder nog even een voorbeeld:

<table align="center">
<tr><td>tekst 1</td><td>tekst 2</td></tr>
<tr><td>tekst 3</td><td>tekst 4</td></tr>
</table>

Ik gebruik hier CENTER, dus centreert hij mijn tabel. Indien ik RIGHT of LEFT gebruik, zet hij mijn tabel links of rechts neer.

12 oktober 2010

Les 11: Tabellen deel 2

Tekst bij een tabel

Het is soms handig om tekst om een tabel heen te laten gaan. Het is erg gemakkelijk om te doen. Kijk naar de code hieronder:

<table align="left"><tr><td>test1</td>test2</td></tr>
<tr><td>test3</td><td>test4</td></tr></table>

Dit geeft onderstaand resultaat:

[table=simple]test1|test2

test3|test4[/table]

Merk hier op dat de tabel dus links is uitgelijnd. Zodra je dan in het P element tekst direct achter de tabel plaatst, komt deze tekst mooi bij de tabel te staan:

<table align="left"><tr><td>test1</td>test2</td></tr>
<tr><td>test3</td><td>test4</td></tr></table><p>Hier kun je dus die tekst plaatsen.</p>

Tabel in tabel

Ook is het mogelijk om in een cel van je tabel, een andere tabel te plaatsen. Hieronder een voorbeeld hiervan:

<table border ="1"><tr><td>Eerste tabel</td><td><h1>Koptekst</h1>
<table border ="1" align="right"><tr><td><img src="http://www.gtaforum.nl/uploads/profile/photo-81942.jpg" /></td></tr>
<tr><td>Hier kun je tekst plaatsen</td></tr></table></td></tr></table>

Een redelijk lastige code, ook niet uit te voeren in BB-code. Vandaar hieronder een afbeelding hoe hij het weergeeft in Firefox:

Celinhoud uitlijnen

Het uitlijnen van tekst zullen jullie nu inmiddels wel weten. In ieder geval links en rechts, dit gaat met ALIGN. Boven en onder is ook mogelijk, dit gaat met VALIGN. Kijk maar in het voorbeeld hieronder:

<table border="2"><tr><td align="center" valign="center">tekst1</td><td align="left" valign="right">tekst2</td><tr></table>

Dit resulteert dus in een tabel met een mooi uitgelijnde tekst.

Achtergrondkleur van een tabel

De achtergrondkleur van een tabel is erg gemakkelijk. Zie het voorbeeld hieronder:

<table bgcolor="blue"><tr><td>tekst1</td><td>tekst2</td></tr>
<tr><td>tekst3</td><td>tekst4</td></tr></table>

Deze code geeft je dus een blauwe achtergrond. Uiteraard kun je ook andere kleuren gebruiken en kleurcodes.

12 oktober 2010

Les 12: Tabellen deel 3

Ruimte tussen cellen

Het bepalen van de ruimte tussen de cellen doen wij met het element CELLPADDING en CELLSPACING. Hierbij zorgt CELLPADDING voor de ruimte tussen de tekst in een cel en de celrand. CELLSPACING verzorgt de ruimte tussen de celranden. Een voorbeeld van een geldige code vind je hieronder:

<table border="1" cellspacing="3" cellpadding="2">
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 3</td><td>test 3</td></tr></table>

In onderstaande afbeelding zie je het resultaat:

De 3 bij CELLSPACING staat dus voor 3 pixels tussen de cellen. De 2 bij CELLPADDING staat voor 2 pixels tussen de tekst in een cel en de celrand.

Omspannen van kolommen

Eerst zal ik even uitleggen wat het omspannen van een kolom (of een rij in het volgende stukje) inhoud. In sommige gevallen wil je bovenaan je tabel (bijvoorbeeld voor een titel) 1 cel over de hele breedte van je tabel hebben. Soms wil je het ook onderaan hebben (bijvoorbeeld voor een copyright). Misschien wil je het zelfs soms in het midden hebben, alles is mogelijk. Om dit met een kolom te doen, gebruik je COLSPAN. Hieronder een voorbeeldcode:

<table border="1">
<tr><td colspan="2">Titel hier plaatsen</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 3</td><td>test 4</td></tr>
<tr><td colspan="2">Copyright hier plaatsen</td></tr></table>

De 2 die je ziet staan, staat voor het aantal kolommen wat hij moet bezetten. Hieronder de afbeelding waarop te zien is hoe deze code eruit komt:

Omspannen van rijen

Als laatste wat we nu behandelen van de tabellen, lijkt erg veel op bovenstaande. Alleen in plaats van COLSPAN gebruik je ROWSPAN. Je gebruikt het ook andere zaken. Hierbij krijg je namelijk een aantal rijen in één kolom. Dit kun je bijvoorbeeld gebruiken voor een navigatiemenu in je tabel. Hieronder een voorbeeldcode:

<table border="1">
<tr><td rowspan="3">Hier een menu maken</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 3</td><td>test 4</td></tr></table>

In onderstaande afbeelding is hiervan het resultaat te zien:

Je ziet hier dus dat je een mooi menu neer kunt zetten.

12 oktober 2010

Les 13: Lijsten deel 1

Geordende lijst

We beginnen met het maken van een geordende lijst. Dit doen we met OL (Organised List). Zie hieronder een voorbeeldcode:

<ol>
<li>test 1</li>
<li>test 2</li>
</ol>

Dit zal onderstaand resultaat geven:

test 1
test 2

Je gebruikt dus voor een georganiseerde lijst OL, en om een rij aan te geven en af te sluiten LI.

Ongeordende lijst

Dan de ongeorganiseerde lijst. Dit lijkt erg veel op een georganiseerde, alleen in plaats van OL gebruik je UL (Unorganised List). Hieronder is een voorbeeldcode te vinden:

<ul>
<li>test 1</li>
<li>test 2</li>
</ul>

Dit zal onderstaand resultaat geven:

test 1
test 2

Nummering beginnen

Ook is het mogelijk om in je lijst met bijvoorbeeld 3 of 5 te beginnen. Hieronder zie je hoe dat werkt:

<ol start="3">
<li>Hier heb je dus 3 om te beginnen.</li>
</ol>

Hoe dat eruit ziet, zie je hieronder:

Om in je lijst over te springen naar een andere waarde is ook mogelijk, zie hieronder:

<ol start="3">
<li>Hier heb je dus 3 om te beginnen.</li>
<li value="5">Hier springen we naar 5.</li>
</ol>

Hieronder zie je daar het resultaat van:

Inloggen

HTML-cursus

Recommended Posts

Kloep

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Kloep

Kloep

Kloep

Kloep

Kloep

Kloep

Kloep

Kloep

Kloep

Kloep

Kloep

Kloep

Kloep

Kloep

Recent actief 0 leden

Community

WikiGTA