Forum - Topic

Onderwerp: HTML Guide! LEES LAATSTE POST!

Trabbo
Topposter
Offline
Berichten: 416
Gepost op 09-01-2009 om 11:13u
Deze guide is voor mensen die HTML nog niet zo snappen maar ook voor mensen die HTML wille toevoegen op hun site.
Binnekort ga ik hier complete scripts plaatsen die iedereen mag gebruiken voor
hun site. Dus blijf dit in de gaten houden! (script van complete pagina's
die je kan kopieren en op je site zetten
eventueel ook kopieren)

Binnekort ga ik toevoegen:

-Hoe je een e-mail formulier maakt(Toegevoegt!)

-Selecteer optie (toegevoegt!)

~Inleiding
~Wat is Hyper Text Markup Language?
~De geschiedenis en toekomst van HTML
----------------------------------------------------------------
~De basis van elk HTML bestand...
~Tekst en kleuren op je website zetten
~Plaatjes/foto's/hyperlinks op je website zetten
~Tabellen en frames op je website zetten
----------------------------------------------------------------
~Linken en begrippen
~Afsluiting!
~FAQ

Wat is Hyper Text Markup Language?

Dit is mijn ehm... Naja, eerste echte guide! Deze eerste guide gaat over HTML. Ik leg in het volgende hoofdstukje uit wat dat is. Deze guide is voor beginners en gaat alleen over het maken van een HTML bestand (website). Het gaat dus niet over het op internet zetten van een site. En ehm... nou lees maar gewoon!
(Mocht je even iets niet meer begrijpen door de rare woorden ofzo, of wil je alvast verder gaan terwijl ik stop? Onder aan de guide staan linken en begrippen!)

Wat is Hyper Text Markup Language?
Hyper Text Markup Language (afgekort HTML) is een computertaaltje. Of specifieker gezegd, een opmaak taal. Veel mensen denken dat HTML een programmeertaal is, maar dat is niet zo.

HTML is de basis van elke website, als je een website wil gaan maken kun je niet zonder een beetje kennis over HTML, hoewel de laatste tijd er ook veel andere programmer/opmaak/scriptalen of wat dan ook worden gebruikt. Als je eenmaal een beetje HTML kan, kun je ook andere dingen gaan gebruiken zoals 'hp' om je website mooier te maken.

De geschiedenis en toekomst van HTML.
HTML heeft een korte geschiedenis (en waarschijnlijk een lange toekomst tenzijn de marsmannetjes komen ). HTML bestaat nog niet zolang, omdat het iets voor de pc is, die ze bijvoorbeeld in de middeleeuwen nog niet zoveel gebruikten. Maar in die korte tijd zijn al veel aanpassingen geweest, omdat de computer en de mogelijkheden zich zo snel ontwikkelden.


http://nl.wikipedia.org/wiki/Html schreef:
HTML werd in 1991 bedacht en ontwikkeld door Tim Berners-Lee om wetenschappelijke documenten van het CERN in Genève gemakkelijker toegankelijk te maken.


http://nl.wikipedia.org/wiki/Internet schreef:
Door de uitvinding en introductie van klikbare aan elkaar gelinkte pagina's (HTML/WWW) heeft Tim Berners-Lee het internet in feite klaar gemaakt voor het grote publiek. Hij wordt daarom ook wel gezien als uitvinder / grondlegger van het huidige internet.


Het huidige internet hebben we dus te danken aan onze Tim. Toen HTML was bedacht werd het steeds uitgebreider, kwamen er nieuwe versies en weet ik veel wat er allemaal gebeurde. In elk geval zullen we het waarschijnlijk nog lang gebruiken, tenzij de computers ineens verdwijnen omdat de marsmannetjes komen.

Maar dit even allemaal terzijde, want als je HTML nog niet kent zal je hier nog steeds weinig van begrijpen. Laten we dus over stappen naar het huidige HTML, of liever gezegd, laat ik gaan uitleggen hoe je HTML nou werkelijk gebruikt.

____________________________________________________________________________
De basis van elk HTML bestand...
Naja... bijna elk bestand dan! Je hebt bijvoorbeeld ook frames waarbij je iets anders begint, maar dat komt pas veel later.

HTML heeft een bepaalde opbouw, een hele simpele opbouw trouwens. Start dus maar snel een eenvoudige tekstverwerker op (kladblok). Type daar de volgende dingen in:

[b]
<html>
<head>
<title>"Je titel."</title>
</head>
<body>
</body>
</html>[/b]
Ik zal zometeen uitleggen wat het is. Eerst moet je het bestand even opslaan. Omdat als je wat meer gaat uitproberen met HTML je best veel bestanden kan gaan maken, is het handig om even wat mapjes aan te maken. Bijvoorbeeld:

-Site = een mapje om alles voor je site in op te slaan.
-HTML = een mapje waar je al je HTML bestanden in opslaat.
-Plaatjes = een mapje waar je al je plaatjes voor je HTML bestanden in opslaat.
-Test = een mapje waar je al je uitprobeersels in opslaat.
-Txt = een mapje waar je alle tekst van je HTML bestanden opslaat.
Dit is dus zoals ik het doe, je kunt het op allerlei andere manieren doen.

Oke, weer terug naar het bestand in kladblok. Kies:
Bestand > Opslaan als >
Dan krijg je een scherpje. Zorg dat de instellingen zo staan:

-Linksboven(hoek): je hebt opslaan als gedaan.
-Linksboven: sla je bestand op onder de mapjes die je (mogelijk) hebt gemaakt.
-Opslaan als: kies alle bestanden.
-Bestandsnaam: verzin een naam. De extensie (deel achter de punt) moet HTML zijn.
Sla het bestand nu op.
Doe dit alle nog een keer:
Bestand > Opslaan als >
Je krijgt dat scherpje weer, nu moet je het alleen anders instellen:

-Linksboven(hoek): je hebt opslaan als gedaan.
-Linksboven: sla je bestand op onder de mapjes die je (mogelijk) hebt gemaakt.
-Opslaan als: niks veranderen, laat het gewoon op '.txt' staan.
-Bestandsnaam: verzin een naam. De extensie (deel achter de punt) moet txt zijn.
Sla het bestand weer op. Je kunt nu rustig alle afsluiten zonder dat je ook maar iets verliest. Sluit het bestand maar af. Ga naar:
Windows verkennen > 'het pad naar je documenten van HTML'.
Klik het bestand aan met '.html', en dan krijg je, tadaa, dit:

Het is niet veel, maar je hebt een internet pagina gemaakt, met hele simpele tekentjes.
Je site is nog niet berijkbaar voor andere mensen, maar dat wil je waarschijnlijk toch nog niet. Of vind je de site al mooi genoeg?
In elk geval het je de basis!

Om even terug te komen op alle tekentjes enzo die in dat document staan:
Dit is dus de basis van een HTML bestand:

[b]
<html>
<head>
<title>"Je titel."</title>
</head>
<body>
</body>
</html>[/b]
-Met de HTML tag's (kom ik later op terug) geef je aan dat het om een HTML bestand gaat.
-In de head tag's kun je een aantal belangrijke dingen zetten zoals title tag's en megatag's (hoef je nog lang niet te gebruiken).
-In de title tag's zet je, je raad het al, de titel.
-In de body tag's komt de werkelijke website.

Een '<' met wat tekst erin en een '>' (zoals: '<head>' noem je een tag. Veel tag's hebben een begin en een eind tag. Een eind tag kun je herkennen aan het '/' symbool.

Dit is eigenlijk alle informatie al die je nodig hebt als beginneling.

Ik zal heel kort nog even wat over de extensie's vertellen, en waarom je heb bestand twee keer moet opslaan.

Als je een bestand maakt en je wil het voor de eerste keer opslaan doe je dat waarschijnlijk zo:
Bestand > Opslaan als...
Dan krijg je zo'n soorte schermpje (dit is van onze word versie bijvoorbeeld):

Je kunt er vanalles instellen en zo je document op een bepaalde plaats en manier opslaan.
Zo kun je ook instellen met wat voor een programma, of op wat voor een manier de computer een bestand moet openen. Dat doe je met de extensie. Je hebt dan een titel, met een punt erachter, en daarachter staat de extensie. Als je er 'html' achter hebt staan zal je computer het als html openen. Maar als je er 'doc' van maakt, zal het bestand met word worden geopend en zul je gewoon alle letters en tekens zien die je hebt hebt gemaakt voor je HTML bestand. Ik hoop dat dit het wat duidelijker maakt.

En waarom je het bestand twee keer moet opslaan? Ik weet eigenlijk niet hoe andere mensen dat doen, maar zo doe ik het. Als je het bestand namelijk alleen maar als HTML opslaat, dan kun je er niks meer aan veranderen, alle tags zijn verdwenen. Daarom vind ik het handig om het ook als txt op te slaan, dan kun je het bestand weer wijzigen.

[center]Tekst en kleuren op je website zetten[/center]
Owja... dat is ook wel handig, een beetje tekst.
Als je de basis een beetje snapt en onder de knie hebt, wat wel snel zal gebeuren, zal het eerste waar je aan denkt waarschijnlijk teksten zijn. Daarom zal ik daar het een en ander over uitleggen.

De tekst zet je tussen de body tag's.

Hier staan een aantal simpele tag's met uitleg:

<b> </b> - Maakt de tekst dik.
<u> </u> - Onderstreept de tekst.
<i> </i> - Maakt de tekst cursief.
<h?> </h?> - Geeft de grote van tekst aan. Je kun er koppen mee maken. Op de plek van het '?' teken moet een cijfer van 1 t/m 6 staan. 1 is het grootst, 6 het kleinst.
<> - Geef je een nieuwe alinea mee aan. Hoef je niet te sluiten, het is vanzelfsprekend dat als je een nieuwe alinia aangeeft dat de andere eindigt, dat snapt zelfs de computer.
< align=?> < align=?> Hiermee kun je de tekst uitlijnen. Bijvoorbeeld centeren of naar rechts uitlijnen. Op de plek van het '?' teken zet je 'center', 'left' of 'right' neer. Left hoef je niet per se aan te geven, dat doet de computer als de tekst niet uitgelijnt is automatisch.

De Tags in een code:

[b]
<b> </b>
<u> </u>
<i> </i>
<h?> </h?>
<>
< align=?> < align=?>[/b]


Probeer ze maar eens even uit!
Type bijvoorbeeld dit in:

[b]<html>
<head>
<title>'Je titel'</title>
</head>
<body>
<b>trabbo is cool!</b>
<u>trabbo is cool!</u>
<i>trabbo is cool!</i>
<h1>trabbo is cool!</h1>
<h6>trabbo is cool!</h6>
Hier type ik even gewone tekst! BlaBlaBlablablabla
<> Trabbo is cool!
< align=center>trabbo is cool< align=center>
</body>
</html>[/b]




Probeer het allemaal maar even uit. Maak alvast een leuk stukje tekst, zie maar wat je doet. Als je het een beetje onder de knie hebt of verder wil gaan, dan ga je verder.

Op deze manier kun je tekst netjes uitgelijnd en in kopjes op je site zetten!
En tot zover dan ook de tekst op je site zetten! Nu de kleuren nog...

Bij HTML kun je ook kleuren gebruiken, iets dat wel erg handig is als het om opmaak gaat.

Als je een kleur aangeeft, gebruik je altijd een hekje: '#'. Achter dat hekje, dat aangeeft dat het om een kleur gaat, zet je een hex code, bijvoorbeeld:
000000 = zwart
ffffff = wit
ff0000 = rood
Je hebt bepaalde site's waarop de hex codes staan aangegeven, zo kun je ze altijd terug vinden. Ik heb een aantal hoofdstukjes verder een aantal links staan voor die codes. Ik weet niet welke site je het beste kunt gebruiken, maar die site's werken goed.

Die kleuren moet je natuurlijk wel ergens bij gebruiken, want als je alleen <#000000> gebruikt komt er niks bijzonders. Je gebruikt de codes in tags. Zo'n extra stuk informatie in een tag noem je trouwens een atribuut. Maar dat terzijde.

Als je gewoon de basis van een HTML document hebt, heb je dit:

[b]
<html>
<head>
<title>"Je titel."</title>
</head>
<body>
</body>
</html>[/b]

Je kunt er dan wat tekst bij zetten zoals in het vorige hoofdstukje, dan heb je dit:

[b]<html>
<head>
<title>'Je titel'</title>
</head>
<body>
<b>trabbo is cool!</b>
<u>trabbo is cool!</u>
<i>trabbo is cool!</i>
<h1>trabbo is cool!</h1>
<h6>trabbo is cool!</h6>
Hier type ik even gewone tekst! BlaBlaBlabla
<> Trabbo is cool!
< align=center>Ltf is cool< align=center>
</body>
</html>[/b]


Je kent het resultaat van allebei. Je zult het waarschijnlijk een beetje erg wit vinden. Daarom is het handig om een achtergrond kleur en een tekstkleur in te stellen. Dat doe je in de body tag:

[b]<html>
<head>
<title>"Je titel."</title>
</head>
<body bgcolor=#oooooo text=#ffffff>
<h1>< align=center><u>Dit is mijn eerste website.</u></p></h1>
"Tekst", bijvoorbeeld:
<i>Ltf is cool!</i>
</body>
</html>[/b]

Wat je nu hebt gedaan is:
-Je hebt de basis gebruikt.
-Wat tekst in je HTML document gezet.
-De tekst opgemaakt.
-En...
het geen waar het om ging. Je hebt bij de body tag 'bgcolor=#oooooo' en 'text=ffffff' neer gezet. Daarmee heb je de achtergrond kleur en de tekst kleur aangegeven. Je hoeft dat natuurlijk niet te doen, maar het is wel handig. Zorg trouwens ook dat als je bijvoorbeeld de achtergrond kleur zwart hebt gemaakt, dat je ook de text kleur aanpast, want zwart op zwart leest zo moeilijk.
Resultaat:

Tevreden? je kunt de kleuren natuurlijk aanpassen door een andere hex code te gebruiken!

Als je bepaalde stukken tekst een andere kleur dan de standaard ingestelde kleur wil geven doe je dat zo:

[b]
<html>
<head>
<title>"Je titel."</title>
</head>
<body bgcolor=#?????? text=#??????>
Hier wil ik de standaard kleur gebruiken, die ik hierboven kan instellen ('text=#??????'.
<font color=#??????>Hier wil ik een ander kleurtje, die ik hier voor kan instellen (met 'color=#??????'</font>
</body>
</html>[/b]

Dat is eigenlijk alle kleuren informatie voorlopig wel!

[center]Plaatjes/foto's/hyperlinks op je website zetten
Allemaal leuk en aardig die kleurtjes, maar waarschijnlijk wil je ook wel plaatjes op je website hebben, net zoals hyperlinks. Vandaar dit hoofdstukje.

Oke, je wil dus een plaatje op je website hebben. center]


-Je zet het plaatje in paint. Je weet wel, kopieëren, plakken. Je kunt het bewerken ofzo. Doe er in elk geval iets mee, tot dat je tevreden bent.
-Opslaan als. Het is handig om het plaatje hier op te slaan:

Onder 'laatjes'. Het hoeft natuurlijk niet per se hier, maar zo iets is wel handig. Waarom? Daar kom ik zo op terug.

Nu het plaatje is opgeslagen kun je het in een document zetten. Neem bijvoorbeeld even dit voor je:

[b]
<html>
<head>
<title>Donald Duck</title>
</head>
<body bgcolor=#000000 text=#ffffff>
<h1><u>< align=center>Donald Duck</p></u></h1>
<i>Donald Duck</i> ziet er zo uit:
'Hier moet je plaatje komen.'
</body>
</html>[/b]


Nu zet je op de plek van: "Hier moet een plaatje komen.", een image tag: '<img>'.
Alleen daar aan heb je niks, dus zet je er dit in: <img src="">. Src staat voor source. Daar komt het zogenaamde pad te staan. Als ik het plaatje onder D:acc"een naam"afbeeldingensite"laatje donald duck".jpg staat, is dat het hele pad. Maar als het goed is heb je het onder plaatjes (ofzo) opgeslagen:

Nu kun je het pad veel korter opschrijven. Je hoeft alleen maar plaatjes"laatje donald duck" op te schrijven. Doe dit dus:

[b]
<html>
<head>
<title>Donald Duck</title>
</head>
<body bgcolor=#000000 text=#ffffff>
<h1><u>< align=center>Donald Duck</p></u></h1>
<i>Donald Duck</i> ziet er zo uit:
<img src=plaatjes"bestandsnaam van plaatje.jpg">
</body>
</html>[/b]


Pas op! Als je je HTML bestanden onder dezelfde mapjes als ik opsla, die ik je al eerder heb laten zien, de mapjes die ik handig vond, moet je het niet onder het mapje 'test' opslaan, want dan klopt het pad niet meer!

Als je alles goed doet, zie je een plaatje:


Nog niet echt mooi hè? Althans, ik zou het mooier vinden als de tekst er netjes rechts van staat. Daarom voegen we nog wat toe aan de tag:

[b]
<img src=plaatjes"bestandsnaam.jpg" alt=? align=?>[/b]

Align, is, net zoals bij de tekst het atribuut dat er voor zorgt dat de tekst, of in dit geval het plaatje, wordt uitgelijnd. Zet er bijvoorbeeld left bij, dan wordt het plaatje links op de pagina uitgelijnd.
Alt, is de omschrijving van de afbeelding als bezoekers van je website de afbeelding niet kunnen zien. Met Internet Explorer zie je die tekst ook als je wat langer je cursor op de afbeelding laat staan.

Maak er nu bijvoorbeeld dit van:

[b]
<html>
<head>
<title>Donald Duck</title>
</head>
<body bgcolor=#000000 text=#ffffff>
<h1><u>< align=center>Donald Duck</p></u></h1>
<i>Donald Duck</i> ziet er zo uit:
<img src=plaatjes"bestandsnaam van plaatje.jpg" alt=DonaldDuck align=left>
</body>
</html>[/b]





Gefeliciteerd, je kan een plaatje op je website zetten! Wil je meer met je afbeeldingen doen? Dan zul je het voorlopig met deze link moeten doen. Hier vind je waarschijnlijk alles wat je wil weten.

Je hebt een website, met tekst, kleuren en plaatjes, en alles netjes ingedeeld. Toch mist er natuurlijk nog iets, hetgeen dat het internet maakt tot wat het is! Je wil wel linken op je website hebben! Ik neem aan dat iedereen wel weet wat een link is.

Om een link te maken begin je met deze tag: '<a>'. Daar kun je natuurlijk nog niks mee, daarom voegen we dit toe: '<a href="agina naam".html>'. Je moet dus zoals je al zien (vanzelfsprekend) nog een pagina hebben om naar toe te linken. En (ik hoop dat je dat snapt) het is ook wel handig om een pagina te hebben om de link op te zetten. Laten we dus maar eerst even twee pagina's maken:
-Homepage (ofzo)

[b]
<html>
<head>
<title>"Je titel."</title>
</head>
<body bgcolor=#oooooo text=#ffffff>
<h1>< align=center><u>Dit is mijn eerste website.</u></p></h1>
"Tekst", bijvoorbeeld:
<i>Dit is mijn eerste pagina, de homepage.</i>
<>Deze site gaat over donald duck. Klik <'link'>hier</'link'> om te kijken hoe donald er uit ziet.
</body>
</html>[/b]


Op de plek van '<"link">' en '</"link">' komen de tags van de link. Er tussen komt de tekst die de link zal worden. Nu ga je de pagina met het plaatje van Donald maken:
-Pagina 1 - Donald (ofzo)

[b]
<html>
<head>
<title>"Je titel."</title>
</head>
<body bgcolor=#oooooo text=#ffffff>
<h2>< align=center><u>Hoe ziet Donald Duck eruit?</u></p></h2>
"Tekst", bijvoorbeeld:
<i>Zo ziet Donald Duck eruit:</i>
<img src=plaatjes"bestandsnaam van plaatje.jpg" alt=DonaldDuck align=left>
</body>
</html>[/b]



Nu je twee pagina's hebt moet je ze eerst opslaan. Sla de eerste pagina bijvoorbeeld als 'agina1' op, en de tweede als 'agina2'. Nu gaan we pagina 1 even bewerken:

[b]
<html>
<head>
<title>"Je titel."</title>
</head>
<body bgcolor=#oooooo text=#ffffff>
<h1>< align=center><u>Dit is mijn eerste website.</u></p></h1>
"Tekst", bijvoorbeeld:
<i>Dit is mijn eerste pagina, de homepage.</i>
<>Deze site gaat over donald duck. Klik <a href='titel pagina 2'.html>hier</a> om te kijken hoe donald er uit ziet.
</body>
</html>[/b]


Sla weer beide pagina's op. Als je alles goed doet werkt de link.

Dit is alleen nog maar een link binnen je eigen site. Je linkt naar een ander bestand dat je op je computer hebt staan. Je kunt ook naar een heel andere site linken dan schrijf je niet (gedeeltelijk) het pad op, maar doe je dit:

[b]
<a href=http://www.yourcrime.nl</a>[/b]

Je neemt het hele adres en zet het achter het atribuut href.

Je kunt ook een link naar een email gebruiken:

[b]
<a href='mailto:mijnadres@mijnprovider.nl'>Stuur mij
een e-mail!</a>[/b]

Nu kun je linken op je pagina zetten!

Tabellen en frame's op je website zetten
Misschien denk je dat tabellen saai zijn, maar ze zijn onvervangbaar op je website!

Het begin van een tabel geef je aan met '<table>', het eind met '</table>'. Nog niet zo spannend he?

Je moet aangeven hoeveel rijen en kolommen erin komen. Een rij geef je aan met '<tr>' en sluit je natuurlij met '</tr>'.

Een kolom geef je aan met '<td>' en sluit je met '</td>'. Probeer het maar eens uit. Type bijvoorbeeld dit in:

[b]
<html>
<head>
<title>'Je titel'</title>
</head>
<body>
<table>
<tr>
<td>
'tekst'
</td>
<td>
'meer tekst'
</td>
</tr>
<tr>
<td>
'nog meer tekst'
</td>
<td>
'de laatste tekst'
</td>
</tr>
</table>
</body>
</html>[/b]

Kijk er even goed naar, zodat je begrijpt wat wat doet. Bekijk dan het resultaat.

Snap je? Het is misschien nog een beetje ingewikkeld, dus probeer het een paar keer uit!

Hier heb je alleen nog een beetje weinig aan, het is nog niet echt een mooie tabel. De tekst staat nog erg dicht op elkaar en er zitten nog geen lijnen tussen. Toch heb je al wel de basis. We gaan het nog wat verder uitdiepen dus...

Om de tabel mooier te maken zet je er lijnen tussen. Als je dat niet aangeeft in de <table> tag, komt er automatisch geen rand. Waarschijnlijk wil je dat wel. Dan geef je dat aan met border. Ook wil je de grootte van de tabel kunnen aangeven. Je geeft de breedte die de tabel in het venster inneemt met width aan, en de hoogte met height. Je kunt dat het beste met procenten aangeven. Bij border zet je er gewoon een cijfer achter, kijk maar eens wat het doet. Je doet het zo:

[b]
<table width=90% height=60% border=3>
</table>[/b]


Je hebt nu aangegeven dat de tabel qua breedte 90% van het scherm bedekt, en qua hooghte 60%. En dat er een rand (border) is van 3. Probeer wat je net hebt gedaan maar eens uit in een HTML bestand, bijvoorbeeld zo:

[b]
<html>
<head>
<title>'Je titel'</title>
</head>
<body>
<table width=90% height=60% border=3>
<tr>
<td>
'tekst'
</td>
<td>
'meer tekst'
</td>
</tr>
<tr>
<td>
'nog meer tekst'
</td>
<td>
'de laatste tekst'
</td>
</tr>
</table>
</body>
</html>[/b]

Nu ziet het er al een stuk mooier uit he?


Met de deze informatie over tabellen kun je opzich al aardig complexe tabellen maken. Omdat ik zelf nog helemaal niet zo ver ben met HTML wil ik dit even laten liggen, en eerst verder gaan met andere dingen, om het later misschien nog uit te diepen. Als je nu al meer wil weten kun je hier terecht.

En nu dan de frames. Frames zijn erg handig op je website, maar wat is een frame eigenlijk?

Dat is een beetje moeilijk uit te leggen, maar ik zal het proberen. Neem dit plaatje bijvoorbeeld eens:

Dit tavereel kent iedereen!
En hier zit ook een frame in verwerkt, zoals de meeste site's een frame hebben. Een frame is namelijk een scherm dat is verdeelt in stukken. Zo heb je op het plaatje links alle links, boven de titel en het logo en link-onder de werkelijke website. Het handige hier aan is dat je het (als je een kleine site hebt) maar één keer hoeft te maken. Ook maakt het je site overzichtelijker. Kun je voorstellen het het is om geen frame te hebben? Ik hoop dat je nu een beetje snapt wat een frame is, wat het doet en waarom je het hebt.

Een frame maken is best lastig. Aller eerst heb je verschillende pagina's nodig. Laten we even kijken wat een beetje een standaard frame nodig heeft.

De meeste site's hebben in elk geval een titel, een inhoudsopgave en een vlak waar de werkelijke website in komt. Daar voor moet je allemaal een HTML bestand maken.
Ik zal je even op weg helpen, met een paar hééél simpele voorbeelden:
-Titel

[b]
<html>
<head>
<title>
'je titel'
</title>
</head>
<body bgcolor=#00FF00 text=#3300FF>
<h1>< align=center><u>'je titel'</u></p></h1>
< align=center><i>Dit gaat je titel worden.</i></p>
</body>[/b]




-Home-page

[b]
<html>
<head>
<title>
'je titel'
</title>
<body bgcolor=#CCCCCC txt=#000000>
<h1>< align=center><u>'je kop en/of titel'</u></p></h1>
< align=center><i>Dit gaat je home-page worden.</i></p>
</body>
</html>[/b]



-Extra pagina:

[b]
<html>
<head>
<title>"Je titel."</title>
</head>
<body>
Deze pagina kun je maken, omdat je anders niks hebt om een link voor te maken.
</body>
</html>[/b]




-Inhoud:

[b]
<html>
<head>
<title>
"Je titel."
</title>
</head>
<body bgcolor=#000000 text=#ffffff>
Hier komen de linken van deze website:
<><a href='naam bestand'.html>Home-page</a>
<><a href='naam bestand'.html>Extra pagina</a>
</body>
</html>
[/b]





Hehe... Je hebt vier pagina's gemaakt (of liever gezegd ik ). Maar je bent nog niet klaar. Je moet het frame nog maken! (Wat een werk he... ) Een frame is een beetje een vreemd (woordspeling? ) HTML bestand. Het heeft namelijk geen setje body tag's, maar wel een setje frameset tag's...

Oke, je wil je scherm in verschillende delen splitsen. Je wil (bijv.) dat je boven aan de titel hebt, die qua breedte het hele scherm bedekt en qua hoogte ongeveer 20% ofzo. Dat gaan we in een bestand zetten:

[b]
<html>
<head>
<titel>
'je titel'
</title>
</head>
<frameset rows=20%,80%>
<frame src='bestands naam van titel'.html>[/b]




Wat heb je nu gedaan? Je hebt aan gegeven dat je het scherm wil opsplitsen. Je hebt met rows aangegeven dat je het scherm wil opdelen in een aantal stukken, boven en onder. De 20% staat voor boven, de 80% voor onder. Zo je er bijvoorbeeld dit van maken: '<frameset rows=20%,10%,70%>', dan zou 20% het bovenste vlak zijn, 10% het middelste en 70% het onderste.

Je hebt met '<frame src="bestands naam van titel".html>' aangegeven dat je heb bovenste scherm (de 20%) de titel wordt. Je hebt het onderste scherm (80%) nog niet aan gegeven omdat je dat scherm nog een keer wil opdelen, want je wil ook je inhoud er in.
Je deelt het scherm dus nog een keer op en deelt het nog een keer in:

[b]
<html>
<head>
<title>
'je titel'
</title>
</head>
<frameset rows=20%,80%>
<frame src='bestands naam van titel'.html>
<frameset cols=20%,80%>
<frame src='bestands naam van inhoud'.html>
<frame src='bestandsnaam van home-page'.html>
</frameset>
</frameset>[/b]




Je hebt het scherm dat nog over was (de onderste 80%) nu opgedeeld, weer in 20% en 80%. Je hebt nu dus boven een scherm, links een scherm en rechtsonder een scherm. Het bovenste scherm heb je al aangegeven, dat is de titel. Nu geef je ook het linker scherm aan (20%): "<frame src='bestands naam van inhoud'.html>", en het rechts-onder-scherm: "<frame src='bestandsnaam van home-page'.html>". En, omdat je twee framesets hebt geopent, sluit je er ook weer twee. Sla alles maar eens op en kijk wat er gebeurd.

Dat was me veel werk... Maar nu heb je wel een mooi uitziende website gekregen als het goed is:

(Misschien kun je de linken in de inhoud niet goed zien omdat ik ze al een keer heb aan geklikt en paars zijn geworden. Ze zitten er wel!)

Je hebt je titel, je inhoud en je homepage... Hehe... Maar nog niet alles klopt als je verder kijkt.

Je kunt de vensters verschuiven als je je muis op zo'n strook er tussen zet, dat wil je vast niet. En de randen tussen de vensters, misschien wil je die wel weg hebben, of juist breder hebben. En als je ook de linken hebt uitgeprobeert, heb je gemerkt dat als je op zo'n link klikt het venster bij de inhoud verschijnt wat je waarschijnlijk ook niet wilt. Maar daar is natuurlijk weer vanalles op bedacht!

Je wilt dus niet dat je de vensters kunt verschuiven. Wil je dat voorkomen, dan zet je 'noresize' in de 'frameset cols' en 'frameset rows' als extra atribuut. Wat makkelijk.

Als je die rand tussen de vensters weg wil hebben of juist breder wil hebben gebruik je de atributen 'border="?"' en 'frameborder="?"', in de frameset rows en frameset cols tags. Als je later je website echt wil uploaden zodat iedereen hem kan zien zal de ene browser het atribuut border herkennen en de ander frameborder. Daarom moet je ze allebei gebruiken. Op de plaats van het '?' teken moet een getal komen, probeer maar uit. (Als je geen rand wil zet je hem op 0.)

Je wil waarschijnlijk dat als je een link in de inhoud (linkerscherm) aanklikt dat die pagina in een ander venster verschijnt, anders heb je nog niks aan de inhoud. Dat kun je dan ook aangeven. Je begin ermee dat je de vensters een naam geeft. (Scroll iets naar beneden om te kijken met welk atribuut je dat doet.)

Dan moet je ook aangeven waar de pagina van de link verschijnt. Dat doe je in de hyperlink tag, je moet er zoiets tussen zetten: 'target="main"', als je wil dat die link in het venster dat je main hebt genoemd wordt geopend.

Als je erg veel hyperlinks hebt wordt het vervelend om het elke keer zo aan te geven. Daarom kun je als je wil dat alle hyperlinks in hetzelfde venster worden geopend dit tussen de head tag's zetten: '<base target="main">'. Let op: die tag moet tussen de head tag's van de inhoud pagina komen!

Er zijn nog een paar dingen die je kunt gebruiken bij frame's, maar die heb je voorlopig nog niet nodig. Laten we dus de dingen hierboven even onder elkaar zetten. Open je oude frame-bestand dus weer en bewerk het even. Maak er bijvoorbeeld dit van:

[b]


<html>
<head>
<title>
'je titel'
</title>
</head>
<frameset rows=20%,80% noresize border=0 frameborder=0>
<frame src='bestands naam van titel'.html name=title>
<frameset cols=20%,80% noresize border=0 frameborder=0>
<frame src='bestands naam van inhoud'.html name=inhoud>
<frame src='bestandsnaam van home-page'.html name=main>
</frameset>
</frameset>[/b]



Even kijken of het werkt...

Als het goed is werkt alles! Je kunt alles aanpassen totdat jij het fijn vind. En dit is tot nu toe ook alles over frames!

____________________________________________________________________________

Linken en begrippen
Begrippen:
HTML= Hyper Text Markup Language (voor meer info, zie het hoofdstukje 'wat is Hyper Text Markup Language'.
PHP= Ook zo'n soort computertaaltje.
Tag('s)= Een '<' en een '>' met een soort code ertussen.
Atribuut= Extra informatie in een tag. Bijvoorbeeld in plaats van alleen '<img>', '<img src=>'.
Ik geloof dat dat het wel is.

Linken:
Voor alle informatie die er zo ongeveer is over website's maken klik hier. Om hex codes op te zoeken kun je bijvoorbeeld deze link van wikipedia gebruiken of deze link van een andere site. Als je meer informatie wat betreft HTML wil kun je natuurlijk altijd op google of wikipedia terecht.

[size=6]Update's[/size]

[size=6]Mijn email formulier werkte niet, deze die er nu staat moet alsgoedis werken[/size]

Een e-mail formulier maken is heel simpel. Dit doe je met deze HTML code

[b]<form method="ost" action="mailto: JOUW E-MAIL"></td></tr><tr>
<td width="100%" class="maintxt"><>
<form method="POST"><br /><tr>
<td width="28%">Naam: </td>
<td width="72%"><input type="text" name="naam" size="36"></td></tr><br /><tr>
<td width="28%">E-mail: </td>
<td width="72%"><input type="text" name="email" size="36"></td></tr><br /><tr>
<td width="28%">onderwerp: </td>
<td width="72%"><input type="text" name"onderwerp" size="36"></td></tr><br /><tr>
<td width="28%" valign="top">Bericht: </td>
<td width="72%" height="77" ><textarea rows="8" name="opmerking" cols="60"></textarea></td></tr><tr>
<td width="100%" colspan="2">
< align="center"><input type="submit" value="Verzenden" name="verzenden"></td></tr></form></td></tr>
[/b]

Hier moet je uiteraard een paar dingen veranderen naar wens.

[b]form method="ost" action="mailto: JOUW E-MAIL"></td></tr><tr>
[/b]

Bij JOUWEMAIL zet je de e-mail waarnaar
het bericht moet.

Bedankt makuxx voor je e-mail script die wel werkt waarschijnelijk!




____________________________________________________________________________

Hoe maak je nou zo'n selectie? wat ik wel is zie bij site's, bijvoorbeeld selecteer u land,

Nou dit is heel makkelijk.
Dit doe je met de volgende HTML code:

[b]<select name="land">
<option value="">(selecteer land)</option>
<option value="NL">Nederland</option>
<option value="BE">België</option>
</select>
[/b]

Probeer maar is.

Ook dit kan je allemaal veranderen,
selecteer land kan je veranderen naar
het gene wat je dan wil.
En de landen kan je natuurlijk nog dingen bij toevoegen of veranderen. Om er één bij toetevoegen voeg je gewoon dit toe:

[b]<option value="Afkorting hier">Naam</option>[/b]

nou hopen dat je hier ook weer wat van heb geleerd.
Dat was het.

Afsluiting!

Mochten er in deze guide nog fouten in zitten ofzo, meld dat a.u.b.!

Ik geloof dat dat het wel was. Het was veel werk, maar ook leuk en ik hoop dat jullie er iets aan hebben voor jullie crimegame!

[color=red]Trabbo HTML guide copyright@trabbo[/color]

Gelieve deze guide niet kopieren voor eigen gebruik!
Reacties