HTML is gemakkelijker dan het lijkt!


Ja, het is niet zo moeilijk, als je deze cursus hebt gelezen, en zelf een pagina hebt gemaakt.

Het begin;

Eigenlijk Lijkt je browser (Explorer of Netscape, of nog een andere) op een robot, die een opdracht leest.
Hij kijkt wat hij moet doen in: De  KLADBLOK(NOTEPAD) !
Ja, daar bedoel ik mee ... hoe zal ik dat uitleggen ...
Ja, ga met je muis naar Beeld»Bron, of View»Source(als je een engelstalige browser hebt).
Bovenaan in de browser zitten die menu's. Als je dat hebt gedaan, zie je dat je eigenlijk in  KLADBLOK(NOTEPAD)  bent.
Het is wel de bedoeling, dat je daar even gaat kijken, in de bron van het document.
Ook met je rechter-muisknop, kan je naar de bron.

¥       #       :

Hiermee kan je door de cursus browsen. INDEX   LINKS   FONT   FRAME   COLOR   TABLE   ASCII   JAVA   

Goed. Het eerste wat je leert, is dat je dingen onzichtbaar in een HTML document kan verbergen, door er
<!-- -->
omheen te zetten.
Ik geef toe, dat het niet echt belangrijk is nu, maar het is wel leuk.
Je kan dit foefje ook gebruiken om dingen tijdelijk weg te halen, en toch te bewaren.

Laten we eens een eerste pagina maken! (Schrik niet)
Het beste (nu) kan je even notepad.exe, de  KLADBLOK(NOTEPAD)  openmaken vanaf start.
In Windows is dat Start»Programma's»Bureau-accesoires»Kladblok.
Als je een Macintosh of Linux hebt, kan je je eenvoudigste textverwerker gebruiken. (Mail me a.u.b.)

Ok, je hebt nu het textverwerkertje open staan.
Als je tenminste serieus iets wil leren, in korte tijd.
Dan komen nu de 4 basis Tags, van elk HTML document.
Merk, dat elke Tag geopend en gesloten wordt. Goed.


<HTML>

<HEAD>

<TITLE>

</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>



Goed. Je had nu je text programma open?
Ik weet niet of het in Linux en Mctosh net zo gemakkelijk gaat, maar je kan nu deze tekens selecteren, door er met je muis, ingedrukt, overheen te gaan. ,`'
De kleuren worden dan anders.
Als dat is gelukt, kopieer je dat.

Dit kan je doen, [1]door je rechtermuisknop in te drukken, als je op de selectie bent, copy, of kopieren.
Ook kan dit door [2]Ctrl-c te gebruiken, of boven in de browser [3]edit-copy of [4]bewerken-kopieren te gebruiken.
Selecteren, kan ook zonder muis, met shift-pijltjes toetsen.
Als je nog meer manieren weet, mail me.

Wat een verhaal zeg.
Ok. Nu is het dan tijd om notepad te gebruiken !!!WACHT!!! Lees dit eerst even!
Goed, als je notepad( KLADBLOK(NOTEPAD) ) hebt opengeklikt, paste, of plakken.
Ja, dat kan ook op een heleboel manieren ja. (Ctrl-v, bewerken, edit)
Ik was dat knopje ervoor in de menubalk nog vergeten.
Gelukt?

Als het goed is, staan er nu 8 woorden met < > en / eromheen.
Nu moet je het gaan opslaan (SAVE).
Maar niet zomaar opslaan!
Je komt, als je het op wil slaan, in een menu, waarin je het een naam moet geven.
DOE DAT NIET, nog niet, althans.
Ga eerst naar het rol-out menutje naast "annuleren" (of "cancel") en zet het op "Alle bestanden" ("All Files").

Het save menu staat op all files. Weet je het zeker?
Dan kan je dit document nu gaan opslaan als index.html
Inderdaad. Een naam met een punt erin. Eindigend op .html (of .htm, dat werkt ook).
Je hoeft het niet per se index te noemen, maar later, op internet, is het bestand dat deze naam heeft, het belangrijkste bestand van de hele site.
Ik waarschuw maar vast.

Waar je het ergens opslaat, dat maakt nu nog niets uit.
Er staan geen plaatjes (.gif of .jpg) in.
Zorg er wel voor, dat je het terug kan vinden.
Misschien is voor nu de desktop (bureaublad) het gemakkelijkste.
Daar kan je komen door helemaal naar boven te gaan, of- in C:\WINDOWS\DESKTOP op te slaan.

Ok. Als je alles zonder fouten hebt gedaan, staat er nu een bestand op het bureaublad (ofzo), dat een icoontje van de browser heeft.
Je mag gerust gaan kijken, maar ik wil wel even waarschuwen, dat er niets te zien is (behalve de source).
Dat komt nu.

Goed, beginnen we met de title.
Type iets tussen <TITLE> en </TITLE>.
Of er enters tussen zitten, dat maakt niets uit.
De browser leest die niet, ja, als 'n spacie of lege letter, een browser begrijpt <BR> als een Enter.
Daarover later meer. In de titel kan je geen Tags gebruiken (zo heten die dingen).

Je hebt de kladblok toch niet afgesloten hoop ik?
Ok. Als je niets kan verzinnen, noem je pagina "Oefening".

Nu valt er wel iets te zien, als je dit gaat opslaan(SAVE).
Ik weet niet of het interessant is, je kan ook later pas gaan kijken.
In ieder geval, staat er nu bovenaan in de menubalk, van je *.htm document je titel.
Hierboven is dat; Waar je snel leert programmeren en hacken.
Als je je document al had geopent, moet je "refresh", "vernieuwen" of "reload" indrukken.
Anders zie je nog niks. Het bestand moet van de schijf, naar je interpreter!

Nu heb je wel een pagina, maar er valt niets te zien.
Alles wat je nu tussen <BODY> en </BODY> tikt (en opslaat) wordt zichtbaar!
Doe dat maar. Vergeet niet te "reloaden", anders zie je nog niks.
Opnieuw openen (dubbelklik etc.) kan ook.
En ik denk, dat je nu wel weer genoeg hebt geleerd vandaag.
Ga morgen verder met de cursus, of later, of ga gewoon door.

¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥

Ok, wat er nu allemaal te leren valt, is ontzettend veel, zonder einde.
Het intikken tussen <BODY> en </BODY> was gelukt?
Als je veel text had ingetikt, zul je gemerkt hebben, dat het gewoon een hele lange regel is.
In plaats van Enter, kan je dus <BR> gebruiken, om een nieuwe regel te beginnen.

Dit is een van de Tags (<BR>), die je niet hoeft te sluiten met een </Tag>.
Een andere Tag, die je niet hoeft te sluiten, is die, waarmee je een plaatje kan invoegen.
Een plaatje invoegen, is eigenlijk zoiets als een "link" naar dat bestand.
Om dit te kunnen doen, moet je vanuit een "directory" of "map" werken.

Dus haal je index.html, van je bureau-blad (desktop), en verplaats het naar een map(folder).
Je kan die map wel weer op je buraublad zetten. Misschien anders in Mijn Documenten, of waar dan ook.
Verplaatsen kan door met je rechter muis knop "knippen" of "cut" te kiezen, op het bestand.
Of lees verder en verzin zelf iets.
In je HTML directory, die je koos, plak(paste) je het bestand.

Goed. Een eigen directory voor je site.
Nu moet je een plaatje kiezen. Eigenlijk *.gif of *.jpg, want die worden gebruikt op internet.

Dit is even wat moeilijk. Misschien is het bij jou niet nodig, meestal wel.
Je kan het overslaan, maar het wordt wel een stuk lastiger, als je de letters na de punt niet kan zien.
?.Ja, ok, als je de "extensie" niet kan zien, ga dan naar je map en open het volgende menu:
Beeld»Map opties(onderste)»De tab Beeld»Een hele lijst. Daar kan je lezen, hoe je de extensies zichtbaar kan maken, en juist niet meer verbergen.
In het engels heet het View»Folder options(onderste)»De tab View»Een hele lijst. Ja, wel even goed lezen.

Als je een *.jpg of *.gif bestand heb gevonden, doe het in dezelfde map als je html bestand, of leg in die directory een nieuwe map aan, waar je het in doet.
Als je een aparte map voor je plaatjes wil maken, noem hem dan "plaatjes".

Ok. Terug naar onze bron. Ik noem het plaatje even foto.jpg.
Je kan de naam van je plaatje wijzigen, of in plaats van "foto.jpg", de naam van jou plaatje zetten in dit voorbeeld.
Pas op; je kan *.jpg niet zomaar in *.gif wijzigen! De extensie moet dezelfde blijven hier.

<IMG SRC="foto.jpg">, of met de dir;<IMG SRC="plaatjes/foto.jpg">.
Ga nu je *.htm bestand openen (na SAVE natuurlijk), en kijk of je het plaatje in je browser ziet.
Als je het niet ziet, heb je ergens een fout gemaakt.

Voorbeelden van mogelijke fouten zijn:

Ja, deze fouten heb ik bijna allemaal al 'ns gemaakt.
Als je dit bent nagelopen, en je ziet het plaatje nog niet in je browser, ga iets anders doen en probeer morgen nog 'ns. Of straks. Of ga gewoon door.

###########################

Wel, het plaatje staat nu helemaal links op de pagina.
Je kan het plaatje in het midden zetten door er

<CENTER><IMG SRC="plaatjes/foto.jpg"></CENTER>

van te maken.
Precies hetzelfde effect, krijg je door;

<DIV ALIGN=CENTER>
<IMG SRC="foto.jpg">
</DIV>

En waar die Enters komen, maakt nu nog niets uit.
Maar als je zinnen te lang worden, zo:

<DIV
ALIGN=CENTER>
<IMG
SRC="foto.jpg">
</DIV>

Het gebruikt van Enters, is ook belangrijk, als je TABLE tags gebruikt.
Maar dit hebben we nog niet geleerd. Dat komt later.
Eerst wil ik even deze <DIV> uitleggen.

Je kan met DIV nl. behalve CENTER ook left(links) en right(rechts) gebruiken.
DIV begint altijd een nieuwe regel.
Als je iets (plaatje of woorden) aan beide kanten wil zetten, heb je toch TABLE's nodig.

Hoofd en kleine letters, maakt overigens voor de Tags niets uit!
Ik gebruik voor de Tags hoofdletters, omdat dat overzichtelijker is.
Het kan erg verwarrend worden, text en scripttaal door elkaar heen.

Er komt nu even een samenvatting.
Daarna wat voorlopige informatie over kleuren en dan links

<HTML> <HEAD> <TITLE>Over hoe deze kennis ontstond ...
</TITLE> </HEAD> <BODY BGCOLOR="BLACK" text="white">
<!-- HaHa, ik ben onzichtbaar -->
<DIV ALIGN="right"> <IMG SRC="plaatjes/foto.jpg"> </DIV>

Dit is een verhaal bouwen, als een programmeur. <BR>
Dit is getikt in ascii, gewoon met kladblok.
</BODY> </HTML>

Ja, dit is gewoon een volledige pagina!
Je kan deze code in kladblok plakken, opslaan als *.htm, en je hebt je kennis getest.
Als je dit in dezelfde directory opslaat als je andere pagina, met het plaatje, is hetzelfde plaatje ook hier zichtbaar.
Doe dat maar, want je hebt twee pagina's nodig, om dadelijk naar elkaar toe te linken!

Ok, je ziet, dat er nu kleuren gebruikt zijn, "black" en "white"
Verder kan de browser "GREEN"(groen), "BLEU"(blauw), "YELLOW"(geel), "PURPLE"(paars), "SILVER"(zilver), "GOLD"(goud), "MAROON"(bruin), "OLIVE"(olijfgroen), "NAVY"(donkerblauw), "TEAL"(blauwgroen), "LIME"(lichtgroen), "FUCHSIA"(soort violet), "GRAY"(grijs), "AQUA"(water), "RED"(rood), "YELLOW"(geel), en nog meer goed lezen.

Natuurlijk kan je veel naukeuriger met kleuren werken, als je getallen gebruikt, zoals in deze pagina.
Maar dat is best moeilijk, daar is een aparte pagina aan besteed.
Doe dat maar niet, later, of ..
§
0 F    G A    D A T    H I E R    L E R E N  »›  ›^¶
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Links:

Als je 2 pagina's hebt, kan je ze aan elkaar verbinden.
Om van de ene naar de andere pagina te komen,
zullen we nu dan een link maken.
<A HREF=pagina.htm>EenPlaatjeOfText</A>, Of:
<A HREF="pagina.htm">EenPlaatjeOfText</A>,
wat eigenlijk hetzelfde is.
Ik bedoel natuurlijk, "     ".

<A HREF="http://www.adres.nl/pagina.htm">EenPlaatjeOfText</A>, voor een pagina op een andere plek op het internet.

Je kan ook naar andere bestanden dan *.html linken. Die worden niet altijd geopend in de browser. Zelfs naar een plek op een pagina.

<A NAME="woord"></A>, om de plek aan te geven, <A HREF="#woord">WOORD\Plaatje</A>, om er heen te linken.
<A HREF="pagina.html#woord">WOORD\Plaatje</A>, om naar een plek op een andere pagina te linken.

<A HREF="http://www.adres.nl/dir/">EenPlaatjeOfText</A>, linkt naar de index.htm van de map "dir" op de url www.adres.nl.

Voor een hogere map gebruik je ". . /bestand.htm". Ook voor . . /*.gif&*.jpg.
. . / . . / is dus twee directories hoger \ terug.

<A HREF="MAILTO:e-mail@adres.nl">EenPlaatjeOfText</A>, om de bezoeker van je site een E-mail naar jou te laten sturen!

De fouten, die je hier nogal 'ns maakt:
De 'l' van .htm of .html.
Die moet hetzelfde zijn, als de naam van het bestand.
Anders zegt de browser gewoon, dat het bestand niet bestaat.
x.htm is een andere bestand als x.html !

Nu een voorbeeld, van twee pagina's naar elkaar gelinkt:

Deze noem ik index.htm Deze noem ik index.html
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<A HREF="index.html">
Klik hier om naar de andere pagina te gaan!
</A>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<A HREF="index.htm">
<IMG SRC="plaatjes/foto.jpg">
</A>
</BODY>
</HTML>

Ja, het wordt toch tijd eens een siteje te bouwen, offline, op je computer.
Anders leer je het nooit.
Je kan vast wel iets beters verzinnen dan deze voorbeelden.
Begin met een directory of map, plaatjes, en een nieuw .htm of .txt document.
Je kan de voorbeelden kopieren, of zelf alles intikken.

De volgende tags kan je dan uitproberen:
<BR>, <P>
<I></I>, <B></B>, <H1></H1>, <H3></H3>, <U></U>, <BIG></BIG>, <SMALL></SMALL>.

<IMG
SRC="tekening.gif"
ALT="De mooiste tekening is deze."
BORDER="0"
WIDTH="300"
HEIGHT="500%">

HO HO HO HO !!!
Ga ik te snel?
Ok, na deze pauze, wat uitleg over deze tags!

:::::::::::::::::::::::::::

<BR>: Afkorting voor "BReak". Nieuwe regel beginnen. Nu dus.
<P>: Page break. Regel overslaan. Zoals hier:

<I></I>: Italic. Betekent cursief. Zo dus.
<B></B>: Bold. Vet. Dikke letters. Dit dan
<H1></H1>:

H1

Heading 1. Grote letters met nieuwe regels (boven en onder).
<H3></H3>: Headings kunnen genummerd worden. Hoe hoger het nummer, de kleiner de letters.

H3

<U></U>: Underline. Ondersteept. Dit dus.
<BIG></BIG>: 1 punt groter. Gaat tot +4! 1234.
<SMALL></SMALL>: Kleiner. Tot -2. 12

Goed. Dan die nieuwe onderdelen van het plaatje:
BORDER= ; De rand om het plaatje. Wordt vooral zichtbaar, als er link in het plaatje zit.
ALT= ; De text die verschijnt, voordat het plaatje er is, en met je muis erover.
HEIGHT= ; De hoogte van het plaatje in pixels of procenten (%).
WIDTH= ; De breedte van het plaatje. Procent of pixel, moet je aangeven.
Ok, die 500%, 5x de hoogte van het window (venster), was wel erg hoog.
Het is ook maar een voorbeeld.
De hoogte en breedte van een pixel: Ja, dat ligt aan de monitor van jezelf of van degene die je site bezoekt.
Standaard banner maten zijn; 468x60, 400x40, 88x31, om een idee te geven.

En dan nu: De <FONT></FONT> Tags.
Bij <FONT>, kan je aangeven, wat voor lettertype je wil, de kleur, hoe groot.
Met </FONT> moet je dat dan afsluiten. Altijd. Als er een andere letter komt, aan het einde van je "BODY". </FONT> Blijft altijd </FONT>, terwijl <FONT> <FONT ...> wordt.
Daarin wordt beschreven, wat er zoal veranderd moet worden aan de FONT.

FACE= Hier komt het lettertype. Er zijn er maar enkele die je kan gebruiken. Want, op de computer van de bezoeker van je site, moeten ze ook geinstalleerd zijn.
Je kan meerdere lettertypen aangeven, door komma's ertussen te zetten, voor als ze niet aanwezig zijn, in de computer van je bezoeker.
De Browser pakt dan het eerste aanwezige lettertype.

SIZE= Hoe groot je lettertype is. Van -4 tot +4, of van 1 tot 7. Goed.

COLOR=         De kleur. Hetzelfde aan te geven, zoals we al behandelden in de <BODY ...> tag.

Bijvoorbeeld:
<FONT COLOR=FUCHSIA  SIZE=+2  FACE
="ARIALVERDANACOMIC SANS MS"> OK</FONT>

Als je spaties gebruikt in een tag, zoals hier FACE=:, dien je       "            "       te gebruiken.
Alleen kleur, face of size aangeven, is ook genoeg.
Het werkt ook, als ze binnen de link tags worden geplaatst. Dus;
<A HREF=x.htm> <FONT ...> Klick </FONT> </A>
Ga hierheen om meer over fontFACE te leren.

Als de FONT buiten de LinkTag terecht komt, geeft de browser de kleuren aan uit de BODY tag.
Er zijn dan default (standaard) kleuren, die tie kiest, of je hebt ze aangegeven met:
LINK=
ALINK=
VLINK=
In <BODY LINK=kleur1 ALINK=kleur2 VLINK=kleur3 TEXT=kleur4 BACKGROUND=jpg.gif>
3 Kleuren dus, voor linkkleur, muis over, reeds bezochte link.
TEXT=: geeft aan wat de kleur is van de gewone text.
Met BACKGROUND=:, kan je een plaatje gebruiken voor de achtergrond.
Een wallpaper is een 4kant, dat netjes aansluit tot een geheel.
In deze body, zat geen BGCOLOR=:, er zat al 'n wallpaper.
Je kan die er wel bijzetten. Die is dan zichtbaar, voordat de *.gif of *.jpg er is.

<BLOCKQUOTE>

Dit is dus voor een inspringende text.
Bijvoorbeeld als je iets wil uitleggen.
Dit is de eerste keer dat ik dit gebruik.
Het gaat ook met TABLE's.
</BLOCKQUOTE>
<BLOCKQUOTE></BLOCKQUOTE> Om het eerste te laden, voor de rest.
Wat ik vaker gebruik is:
<UL>
<LI> </UL>
Kortom
<UL>   <LI>1</LI> <LI>2</LI> <LI>3</LI> <LI>4</LI> <LI>5</LI> <LI>6 </LI>   </UL>
Voor; En dan nu:
<DIV
ALIGN=CENTER>
</DIV>
<DIV
ALIGN=LEFT>
</DIV>
<DIV
ALIGN=RIGHT>
</DIV>
Left is dus de standaard "ALIGNment". Default.
Ja, eigenlijk is HTML gewoon engels.
De meeste programmeertalen overigens.
Ik stel voor een pauze te houden.
Voor mij althans.
En dan verder te gaan met TABLE.HTM.
Deze pagina is eigenlijk al veel te lang.
Weet je dat je ook met je keyboard cursors kan browsen?
En dat de middelste muisknop heel snel kan browsen in Explorer?
Als je het nog niet wist, moet je het zeker eens proberen.
Je kan dan alledrie je muisknoppen gebruiken!
En een lap text lezen, met je toetsenbord.
Handig.
Zelf gebruik ik nu Netscape Communicator als viewer.
En CuteHTML als editor.
Een fijn ding.
Freeware.
Je kan er in een keer 100 woorden in honderd bestanden veranderen als je wil.
Eigenlijk kan je HTML samen met elke editor gebruiken.
Als je de taal eenmaal spreekt, begrijp je alle HTML-editors meteen.
Sommige dingen gaan gewoon makkelijker, in uitgebreidere ASCII programma's.
Wordpad, Word, waar je bijvoorbeeld ook flink met cut and paste, find, search, zoeken, vervangen, replace, etc kan werken, zonder dat je nieuwe software hoeft te kopen of te installeren, want textverwerkers bestaan op alle computers, maar vervangen gaat alsechts op sommigen, helaas, waarme m'n zin nu hopenlijk wel lang genoeg is, om het effect van <DIV ALIGN=RIGHT> </DIV> te laten zien.

<BLINK> Werkt alleen in Netscape  </BLINK>
<MARQUEE WIDTH=100%> Deze tag werkt helaas alleen in Explorer. </MARQUEE>

<CENTER> Je kan hieronder TABLE's leren bouwen. </CENTER>

TABLE's