Html cursus


Ik had niets te doen, dus nu ga ik maar ff een html cursusje voor beginners in elkaar zetten. Nou moet je niet denken dat je aan het einde een website kan maken zoals die van msn ofzo, maar je moet meer denken aan een simpele pagina waarin je dingen over jezelf kan zetten. Maar laat ik maar met het begin beginnen. Allereerst moet je je html ergens mee opschrijven, hiervoor kan je bijvoorbeeld word gebruiken, of een speciale html editor, maar meestal wordt gewoon notepad gebruikt, want dat werkt snel, simpel en vrij overzichtelijk. Ik zelf typ het meestal meteen in het venster van geocities, maar dat komt later nog wel, als ik ga bespreken hoe je je site online moet zetten.

Maarja, nadat hebt besloten welk programmaatje je gebruikt, ga je met de html beginnen. Als je een nieuwe pagina maakt, moet je altijd hiermee beginnen:

<html>
<head>
<title>Hier je titel</title>
</head>
<body>

</body>
</html>


Je ziet dat je alle codes tussen < en > zet, dit betekend van "Hey! Daar begint en eindigt een code!", ook zie je dat ik een heleboel enters heb getypt, die je later niet terug zal zien, dit komt doordat als je op je pagina een enter wil laten zien, je <br> moet typen (break line). Dit lijkt misschien wel lastig in het begin, maar later is dat erg handig, want dan kan je je document een beetje overzichtelijk houden (moet je maar eens met je rechtermuisknop ergens op een internetpagina klikken en dan view source/bekijk bron kiezen, dan zal je zien wat ik bedoel;-)). Maar ok, nu zal ik even uitleggen wat ik daarnet getypt heb. Om te beginnen zie je <html>, dit betekend "Hier begin ik met html". Maar helemaal onderaan zie je dan weer </html>, dit betekend "Hier stop ik met html". Je ziet dat dit teken: "/" wordt gebruikt om een code weer af te sluiten. Verder zie je <head> en </head>. Hiertussen kan je wat informatie zetten die niet rechtstreeks op je pagina komt maar wel nodig is, bijvoorbeeld zoals je nu ook ziet, <title></title>, Hiertussen zet je namelijk wat er helemaal bovenaan je scherm in die blauwe balk moet komen te staan. Hierna komt <body></body>. Hierin zet je wat er voor tekst etc. op je pagina moet komen, dus de eigenlijke inhoud. Ook kan je in de body tag (code) nog wat extra info zetten die nodig is, bijvoorbeeld de kleur van de links, van de links die al bezocht zijn en waar je mee bezig bent, de achtergrondkleur/plaatje en tekstkleur. Als je die er allemaal in wilt zetten zou je een code zoals dit krijgen:

<body bgcolor="#333333" text="#ffffff" link="#0000ff" vlink="#0000ff" alink="#00ff00">


Je ziet dat bijvoorbeeld bij bgcolor (achtergrondkleur) eerst een = en dan een raar getal tussen aanhalingstekens staat. Dat zegt dus dat de bgcolor, 333333 (is een code voor de kleur, komt nog meer over;)) is. Verder betekend text natuurlijk de tekstkleur, link de kleur van de links, vlink de kleur van de bezochte links (visited link) en alink de kleur van de link waar je nu mee bezig bent (active link). Maar ok, dat was dus het begin, is het al erg ingewikkeld? Ik hoop van niet;) Ik ga in ieder geval verder met hoe je links maakt naar andere pagina’s.

Nou links zien er ongeveer zo uit:

<a href="">Tekst</a>


<a></a> is de gewone link tag, maar ik heb er maar meteen het href="" gedeelte bijgezet. Met dat gedeelte maak je een link naar een andere pagina op internet. Let er wel op dat je bij de hele URL typt (dus ook http://) en dat je je aanhalingstekens altijd afsluit, want anders gaat je pagina helemaal raar doen omdat je 1 klein dingetje vergeten bent. Als je geen "http://", maar "mailto:" typt, en dan erachter een mailadres, stuur je automatisch een mailtje naar dat email-adres. Ook word er vaak gebruik gemaakt van target="". Dit heb je nodig als je met frames werkt (komt nog), Hiermee laat je je link ergens anders op de pagina openen. Ook kan je hiermee je link in een nieuw scherm laten openen, dan moet je dit typen:

<a href="http://www.boterbram.tk" target="_blank">Klik hier om naar Bram zijn site te gaan</a>


Als je er nu dus op zou klikken zou je naar mijn website gaan wat dan in een nieuw venster word geopend. Maar nou zeg ik dat wel, maar zo kan je er natuurlijk niet op klikken. Als je dat wilt doen moet je je html codes in je notepad document (werkt ook zo met word) even op gaan slaan, dus dit:

<html>
<head>
<title>Hier je titel</title>
</head>
<body bgcolor="#333333" text="#ffffff"
link="#0000ff" vlink="#0000ff" alink="#00ff00">
<a href="http://www.boterbram.tk" target="_blank">Klik hier om naar Bram zijn site te gaan</a>

</body>
</html>


Opslaan gaat zo: File/Bestand, dan Save as../Opslaan als.. en dan even een naam geven, maar STOP! Niet op enter drukken! Eerst moet je dan (bij notepad) en onder niet opslaan als textfile/text document, maar als all files/alle bestanden en dan achter de naam van je document .html typen. Bij word moet je hem opslaan als webpage/webpagina ipv wordfile/wordbestand. Als je nu dat bestand opent zal hij hem openen als internetpagina en zal je zien dat er in het blauw "lik hier om naar Bram zijn site te gaan" staan. Het lijkt niet veel, maar het is wel de basis van html.

Nu ga ik het even over frames hebben. Dmv frames kan je op 1 pagina meerdere pagina’s openen, om bijvoorbeeld een menu te maken ofzoiets. De codes van frames moet je in de head van je bestand zetten. Frames kan je maken in kolommen en rijen/colloms en rows. Kolommen zijn verticaal, rijen horizontaal, maar dat zal je wel weten waarschijnlijk. Maar ik zal wel weer even een voorbeeldje geven:

<frameset cols="20%">

<frame src="" name="">
<frame src="" name="">

</frameset>


Als je dit in je head zet, krijg je links in beeld een balk waarvan de breedte 20% van de totale breedte is. In beide gedeeltes zal je zien dat hij de pagina niet kan vinden (komt nog). Je ziet ook dat er na de frameset "cols" staat, dit geeft aan dat je kolommen wilt en daarachter staat dus de breedte. Hierna staat wat voor frame je daar wilt. Tussen de aanhalingstekens van src moet je de pagina zetten die je daar wilt laten zien, dus bijvoorbeeld menu.html (je hoeft niet persé de hele URL te typen als de pagina in dezelfde map staat). Vergeet niet dit frame ook een naam te geven! Dit heb je namelijk nodig voor je target="" gebeuren, want nu kan je dus de naam van je frame daar inzetten en dan word je pagina dus daar geopend. Ik zal ze nu even invullen enzo:

<html>
<head>

<frameset cols="20%">

<frame src="menu.html" name="menu">
<frame src="home.html" name="index">

</frameset>

<title>Hier je titel</title>
</head>
<body>

</body>
</html>


Als je nu dus een pagina met de naam menu.html en home.html maakt en die in dezelfde map opslaat dan zie je links in beeld de menu pagina en rechts in beeld de home pagina. Ik zal ff snel een menu.html maken om te laten zien wat je kan doen eventueel:

<html>
<head>
<title>Menu</title>
</head>
<body bgcolor="#333333" text="#ffffff"
link="#0000ff" vlink="#0000ff" alink="#00ff00">
<font size="2" face="arial" color="ffffff">
<center>
<font size="3" color="ffffff" face="arial black"><br><br>MENU</font><br><br>
</center>

<a href="home.html" target="index">Home</a><br>
<a href="fotos.html" target="index">Foto’s</a><br>
<a href="moppen.html" target="index">Moppen</a><br>
<a href="downloads.html" target="index">Downloads</a><br>
<a href="mailto:email@adres.nl">Mail me!</a>

</font>
</body>
</html>


Je ziet dat ik er een paar pagina’s heb bijverzonnen, maar daar moet je maar niet op letten, was gewoon om het een beetje op een menuutje te laten lijken. Ook heb ik er een paar nieuwe codes bijgezet, zoals <font></font> en <center></center>. Ik zal eerst ff <center> uitleggen. Het is eigenlijk gewoon de code om de tekst te centreren, heel voorspelbaar. Ik had ook <right> kunnen typen, das was het rechts uitgelijnd, heel voorspelbaar. Nu de <font> tag maar.In het engels is lettertype "font", dus rara, waar zou deze tag voor zijn?:P nouja, hiermee kan je dus het lettertype instellen, dit doe je door er face="" in te zetten en dan tussen de aanhalingstekens een lettertype in te voeren. Je ziet dat ik ook color="" gebruikt heb, daarmee kan je uiteraard de kleur aanpassen en als laatste staat er ook nog size="", waarmee je uiteraard de grootte kan veranderen. Je kan bij het veranderen van de grootte een getal invoeren van 1 t/m 7. even kijken… neej dat was het, de <br> code had ik al gehad, dat was een enter… Als je trouwens 2 enters achter elkaar wilt, kan je ook <p> invoeren, maar dat gebruik ik zelf meestal niet. Verder heb ik nu alles wel uitgelegd denk ik, dus probeer het maar even uit, als het goed is moet als je op Home klikt rechts in beeld de pagina home.html geopend worden. Ga ik ondertussen bedenken wat het volgende onderwerp word…

Ik weet het! We gaan een tabelletje maken! Dat is wel gezellig. Nouja, een tabel begint met een <table> tag en eindigd met </table>, dat is nog logisch. Dan kan je rijen en kolommen maken dmv <tr></tr> en <td></td>. Je moet altijd beginnen met <tr> en dan <td> en dan </td> en </tr>, zo heb je 1 rij en 1 kolom, dus 1 blokje (<tr> is een rij), dus dan krijg je dit:

<table>
<tr>
<td>
Hier je tekst
</td>
</tr>
</table>


Als je nu een blokje van 2 bij 2 wilt hebben doe je dat zo:

<table>
<tr>
<td>
Hier je tekst
</td>
<td>
Hier je tekst
</td>
</tr>

<tr>
<td>
Hier je tekst
</td>
<td>
Hier je tekst
</td>
</tr>
</table>


Lijkt een heleboel werk, maar daarvoor heb je ctrl+c en ctrl+v toch?:P en ik heb er nu ook allemaal enters tussendoor gezet maar dat hoef ook niet natuurlijk, maar is wel overzichtelijker. Nu kan je in de <table> tag ook nog width="" en heigth="" zetten, hiermee bepaal je uiteraard de hoogte en breedte van je tabel. Ook kan je nog border="" erin zetten, waarmee je de dikte van de rand om je tabel kan bepalen, dan kan je met bordercolor="" nog de kleur daarvan bepalen. Ok dat was de tabel denk ik. Maar wat nu?

Ow wacht! Afbeeldingen! Ok dat doe je met:

<img src="">


Nu moet je bij de src="" nog een URL van een afbeelding zetten, dus bijvoorbeeld afbeelding.jpg (let op! Hoofdlettergevoelig!). Verder kan je nog alt="tekst" erin zetten, dan kan je zeggen wat er op het gele blokje moet komen als je lang op het plaatje blijft staan. Ook kan je hier width="" heigth="" gebruiken. Hoogte en breedte kan je trouwens weergeven in pixels en procenten, bij pixels moet je gewoon een getal typen, bij procenten er % achter zetten. Dat was het wel denk ik. Owja, als je het online wilt zetten, moet je gewoon de instructies volgen op websites zoals www.geocities.com.

Nu heb ik je een beetje de basis html uitgelegd, maar er is nog veel more to explore!:P Kijk maar op bijvoorbeeld www.handleidinghtml.nl, waar ze vrijwel alle codes hebben samengevoegd. Als je al wat beter bent met html, kan je ook wat javascripts op je website zetten om hem wat leuker te maken, dat kan je vinden op bijvoorbeeld www.leejoo.nl. Ik hoop dat je nu je eigen website in elkaar kan zetten!