Ja, het is niet zo moeilijk, als je deze cursus hebt gelezen, en zelf een pagina hebt gemaakt.
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>
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 ..
| § |
|
|
|
|
|
|
|
<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>:
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. |
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:
Als je spaties gebruikt in een tag, zoals hier FACE=:, dien je " " te gebruiken.
Als de FONT buiten de LinkTag terecht komt, geeft de browser de kleuren aan uit de BODY tag.
<FONT
COLOR=FUCHSIA
SIZE=+2
FACE="ARIAL, VERDANA, COMIC SANS MS">
OK</FONT>
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.
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.
Dit is dus voor een inspringende text.
</BLOCKQUOTE>
Bijvoorbeeld als je iets wil uitleggen.
Dit is de eerste keer dat ik dit gebruik.
Het gaat ook met TABLE's.
<BLOCKQUOTE></BLOCKQUOTE>
Om het eerste te laden, voor de rest.
Wat ik vaker gebruik is:
<UL>
<LI>
</UL>
Met LIsts erin.</LI>
Je kan het ook combineren.
</BLOCKQUOTE>
<UL>
<LI>
</UL>
Conslusie: (bijvoorbeeld)
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:
ALIGN=CENTER>
</DIV>
ALIGN=LEFT>
</DIV>
ALIGN=RIGHT>
</DIV>
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.
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.
| TABLE's |