Snelcursus HTML (c) Mat
De HTML file
Een HTML file, is zuiver ASCI. Je maakt die dus best met Notepad.
Kladblok, voor de vrienden. Maar, er is een maar, je saved je bestand onder
de extentie .HTML of .HTM. Een HTML file is een doodgewoon tekstfile'tje
met een HTML extentie. Got it?
Merk op dat HTML niet case sensitive is. Dat betekent dat hij
geen onderscheid maakt in hoofd of kleine letters. Je tekst blijft natuurlijk
zoals hij is, maar de codes mogen gelijk hoe geschreven worden.
De HTML codes
Een HTML file bestaat uit codes, die de browser (je internet surf programma) leest, en omzet naar wat mooie dingetjes op je scherm. Als je bijvoorbeeld
<center> Dit staat gecentreerd </center>
typt, dan komt de zin 'Dit staat gecentreerd', gecentreerd te staan. <center> en </center> kom je niet te zien. Dat zijn die codes. Een code maak je met kleiner-groter-dan tekens, en sluit je af met een schuin streepje. Zo weet de computer (haha) wanneer de code begint, en die eindigt. Deze codes wordt dan toegepast op hetgeen tussen hen in staat. In ons geval de tekst 'Dit staat gecentreerd'.
Het HTML geraamte
Een HTML file bestaat telkens uit een vast gedeelte. Een geraamte dat je steeds nodig hebt.
<html>
<head>
<title> Typ hier je titel die bovenaan in je venster zal verschijnen
</titel>
</head>
<body>
Hier komt de eigenlijke pagina, alles wat in de onderstaande puntjes aan
bod komt, moet hier komen te staan.
</body>
</html>
Zoals je ziet wordt iedere code afgesloten met een / (slash).
Headers, Line Breaks, Horizontal Lines enz.
Titels wil je in een grotere letter. Een nota in een kleinere letter. Daarvoor gebruik je de code <H1> tot <H6>. Header 1 is de grootste, Header 6 de kleinste.
<H3> Hallo wereld </H3>
Hallo wereld staat dus in titelgrote 3. Iedere header wordt afgesloten
met zijn respectievelijke header.
Een webbrowser negeert iedere harde return, spatie, of wat dan ook qua
pagina layout. Lag het aan hem, dan schreef hij alles na elkaar. Daarom
kan je <BR> toevoegen. Een BReak zorgt voor een harde return. Break
hoeft niet afgesloten te worden door een /.
Wanneer je een onderverdeling wat sterker wilt accentueren, gebruik je
best een <HR>, een Horizontal Line. Die staat steeds op de volgende
lijn, en is gevolgd door een harde return. Ook hier is er geen / nodig.
<center> centreert een paragraaf, tot die afgesloten wordt met de
sluitcode </center>. Handig voor je begintitel.
Met <B> zet je alles Bold (vetjes) en met <I> zet je het Italic
(cursief ). Een voorbeeldje?
<B>Dit staat vet</B>Dit niet meer
<I>Dit staat dan weer cursief</I>En blablabla
<B><I>Dit staat vet EN cursief. Toch leuk he?</I></B>En
we zetten vet en cursief weer af.
Okido?
Fotootjes!
Het leukste aan HTML is zeker wel de foto's! Een foto moet gedefinieerd worden. Op een bepaalde plaats in je tekst moet je zeggen aan de browser: 'Hier wil ik een foto'. Images (afbeeldingen, oftewel foto's) zijn makkelijk in te voegen.
<IMG SRC="foto.jpg">
IMG staat uiteraard voor Image, en SRC voor Source, wat 'bron'
betekent. Tussen de aanhaalingstekens plaats je de naam van de image. JPG
en GIF zijn het populairst, en worden door iedere browser ondersteunt. Weet
je niet wat die zijn, dan is dat niet erg, want als je niet weet wat images
zijn, dan zal je die zeker niet gebruiken in je web pagina :-)
Je kan ook een directory pad meegeven tussen de aanhalingstekens. Bijvoorbeeld:
<IMG SRC="C:\MAT\FOTO.JPG">
Maar dat is af te raden. Beter doe je er aan de foto te copieren naar de huidige directory, zodat je enkel de bestandsnaam moet opgeven. Pas hier WEL op met de schrijfwijze van wat tussen de aanhalingstekens staat. FOTO is hier NIET hetzelfde als foto!!!
En dan nu: links!
Dit is absoluut het allerbelangrijkste. Links zijn de basis van HTML. Met een link spring je naar een ander HTML document. Metteen een voorbeeld:
<A HREF="software.html">Ga naar mijn Software pagina</A>
Dit voorbeeld zou duidelijk moeten zijn. A staat voor Anchor, HREF
voor Hyper Reference. Na A HREF komt de bestandsnaam van de toekomstige
HTML file. Deze wordt afgesloten met een >. Daarna volgt
de omschrijving, die door de browser getoond zal worden, en op dewelke
de surfer kan klikken. Een link (hier: 'Ga naar mijn Software pagina')
is onderstreept in de browser. Klik erop, en je springt naar de betreffende
pagina (hier: 'software.html').
Wanneer je naar een bestand wilt springen, die niet in je directory staat,
maar op een andere web pagina typ je zijn adres in:
<A HREF="https://members.tripod.com/~matdeny">
Surf naar mijn homepage!
</A>
In bovenstaand voorbeeld vind je geen HTML file terug (het eindigt met '~matdeny'). Wanneer dit het geval is, neemt de brower de 'eerste' HTML file die hij vindt, en dat is steeds INDEX.HTML. Dus wanneer je straks aan je pagina gaat timmeren, begin dan met een pagina die index.html heet!
Enfin, E-mail...
Je kan makkelijk E-mail verzenden bij een HTML pagina. Je
kan natuurlijk ook gewoon je E-mail adres typen, en het als gewone tekst
laten displayen, maar dan moet de surfer dit adres onthouden, zijn mailprogramma
opstarten, je adres overtypen, enzovoort. Veel te omslachtig, en daarom
zal niemand je ooit mailen. Gelukkig kan het anders.
Net als een link kan je een email aanduiden. Een email is in feite
niets anders dan een link. Je linkt een bepaald woord aan een mail. Zo
eenvoudig is het. Let vooral goed op het speciale 'mailto:' voorzetsel
in onderstaand voorbeeld.
<A HREF="mailto:matdeny@hotmail.com>Heeft u vragen? E-mail me gewoon!</A>
Na de HREF komt het email-adres, voorgegaan door 'mailto:', om de browser er op te wijzen dat het om een link naar een email gaat. Nadat je voor de eerste keer afgesloten hebt, typ je de tekst die als link zal verschijnen. Daarna sluit je de hele boel af met </A>.
Men neme 1 Header, 1 HREF, en men menge goed!
Zowat al het bovenstaande mag onderling gemengeld worden. Wat zeg is nu? Kijk gewoon naar het voorbeeldje, waar ik een Header definieer in een HREF! Waw!
<a href="boem.html"><H1>Als je hier op klikt omploft alles</H1></a>
De tekst over die ontploffing staat dus in het groot. Dat bedoel ik met mengen. Proberen maar!
That's it!
Voila, en dat is zowat alles. 'Alles' wat je 'nu' moet weten. Te
veel informatie komt toch te verwarrend over. De rest zul je ooit
wel tegenkomen, en dan wel metteen snappen. Want alles is toch hetzelfde. Als
je de principes van de links begrepen hebt, zul je alles begrijpen. Andere
dingen zijn bijvoorbeeld achtergronden, tabellen, frames, JavaScript. Maar
die heb je nu niet nodig. Vooruit, probeer een een test pagina in
elkaar te steken. Je zult zien dat het verbazend snel gaat.
Terwijl ik dit schrijf, ben ik nog maar net 5 (vijf!!!) dagen vertrouwd
met HTML. Daarvoor had ik me er nog nooit mee bezig gehouden. En
nu, enkele dagen later, stoot ik al door tot JavaScript. Dit alles,
niet om te zeggen hoe fantastisch ik wel ben :-), maar om te bewijzen hoe
snel je HTML leert,
wanneer je er geïnterreseerd in bent.
Ik ben zeer benieuwd wat je van mijn cursusje vond, email me a.u.b. wanneer
je deze cursus gebruikt hebt (of gaat gebruiken). Ik heb er werk en
energie in gestoken, en zou het apprecieren moesten jullie me een mail
sturen - gewoon benieuwd.
Veel succes!
Keer terug naar
de vorige pagina,
nadat je me een vriendelijke mail
hebt gestuurd!
Laatste wijziging:
Gemaakt door
Mat Deny, URL: https://members.tripod.com/~matdeny,
E-mail: matdeny@hotmail.com