On-line / Off-line Homepage Gids

HTML Gids voor diegene die de GeoCities Advanced Editor gebruiken, en voor het Off-line maken van pages
(Voor offline gebruik kun je het best Notepad, wordpad, of een andere tekst editor gebruiken, of zelfs de Editor in Netscape)

1) Starten met je page

2) Achtergrondkleuren

3) Je eerste tekst invoeren

4) Veranderen van de tekstkleur

5) Italic and bold Tekst

6) Lettergrootte veranderen

7) Het maken van (hyper)links

8) Het instellen van de kleur van de gelinkte tekst

9) Het invoegen van plaatjes

10) Een plaatje als achtergrond gebruiken

11) Het toevoegen van je Email adres

12) De link naar GeoCities

Mocht jij, de beginnende homepagemaker, suggesties of ideeën hebben om deze gids te verbeteren, vul dan a.u.b. dit Online Formulier in.

Deze gids zal alleen de volgende 'tags' behandelen.
,,,,

,

,
,,,,

De volgende zijn alleen te gebruiken in de 'body tag' : bgcolor, background, link, vlink, alink, text
Deze zijn te gebruiken in de 'anchor tag' : name, href
Deze zijn te gebruiken in de 'image tag' : src

Begin van de page


1) Het beginnen en eindigen met je page
In dit gedeelte zullen de volgende zaken behandeld worden: , , , , , , ,
Het mag best veel lijken, maar dit zijn de belangrijkste dingen voor een HTML document

Laten we maar beginnen.

Allereerst moet je je browser laten weten dat het een HTML document gaat lezen. Dat doe je met de volgende tag;

Iedere page heeft ook een 'header' nodig;

en een titel binnen de header tag. (Deze titel verschijnt in de bookmark en moet dus zinvol en duidelijk zijn).
</strong><em>DeTitelVanJePage</em><strong>
(De sluit het titel gedeelte)
Hiermee eindigt ook de header:

De volgende stap is om te beginnen met de body van je page.

Je hebt eerst aangegeven dat je browser een HTML document leest. Met de volgende tags sluit je dit weer.

Om te beginnen met een simpele page kun je de codering hier beneden kopiëren, het plakken in een tekst editor, en dan de titel veranderen in iets wat jou zinvol lijkt.


</strong><em>DeTitelVanJePage</em><strong>


Nu moet je het document opslaan als een HTML document (dit is iets anders als een titel).
Als het je tweede page is en de titel ervan is bijvoorbeeld Joe'N'Jane, dan kan het document worden opgeslagen als jnj.html of ook wel als jnj.htm, LET OP, als de page waar je aan gewerkt hebt je eerste is moet je het opslaan als index.html

Let op: windows 3.1 gebruikers moeten hun page na het uploaden naar GeoCities hernoemen, en alle links naar index page aanpasen. Je kunt wel de *.htm extensie gebruiken voor de andere pages.
Wat je ook kunt doen is een page maken met bv de GeoCities editor, het hernoemen naar index.html, en deze dan linken naar de page die je als échte 'entry page' wilt hebben. Die jun je elke naam geven die je wilt, en dan hoef je niet terug te linken naar de index.html!

De rest van deze gids zal zaken behandelen die je voegt in de tag, of tussen de en tags.

Begin van de page


2) Achtergrondkleuren
In dit gedeelte zal behandeld worden welke tags je kunt gebruiken in de tag: bgcolor

De code die wordt gebruikt om de achtergrondkleur te veranderen is bgcolor, en wordt in de tag geplaatst. De code hieronder laat zien hoe de achtergrondkleur voor deze page is gedaan.
bgcolor="#C7FEDC">
Het #C7FEDC gedeelte is technotalk voor deze vreemde blauw-groenige kleur (Eigenlijk is de code in hexadecimalen, maar daar hoef je je geen zorgen over te maken).
De bgcolor vertelt de browser welke kleur de achtergrond moet hebben. Let wel op dat een een psatie is tussen de body en de bgcolor.
Hieronder staat een tabel met voorbeelden van kleuren, en de hexadecimale codes ervoor.

#004000#49BF11#008000#FFF1E3#008080#ECD0F4#004080#FFB38E#8080C0#BE7D05
#000000#26CDFD#808080#D6D6AD#FFFFFF#FFFFEC#E2E2E2#B8C9BE#800080#CF9E9E
#800000#B08968#FF8080#E3F2F4#F7F2D0#B0A473#FFC4C4#8E8E00#FFFFB5#AC1313

Je kunt nu hetgeen hieronder staat kopiëren en plakken in de tag zoals boven staat aangegeven.
bgcolor="JeAchterGrondKleur"
Verander het gedeelte in de tag met de kleur van je keuze.

Nadat je dit gedaan hebt, bewaar dan je page, en gebruik een browser om het te bekijken. Mocht je de achtergrondkleur niet leuk vinden, dan kun je hem gewoon met je editor veranderen.
Als je dit allemaal online doet kun je ook een niew veld openen en de page opvragen door de plaats aan te geven waar het zich bevindt in het lokatie-veld, en dan enter in te drukken

Begin van de page


3) Je eerste tekst invoeren
In dit gedeelte zal worden ingegaan op de volgende tags:

,

,

Dus je hebt nog iets te melden ook, he?
Eigenlijk heeft iedereen dat wel, dus je kunt net zo goed meedoen, maar voor je begint met je levensverhaal in te tikken moet je toch nog even opletten.

Het eerste dat je moet doen is het openen van een paragraaf. Dit doe je door middel van

. Als je dit gedaan hebt kun je de eerste woorden intikken. Als je daar mee klaar bent moet je de paragraaf weer sluiten door middel van

.(Ik neem aan dat je wel begrijpt wat dit betekent)

Laten we je eerste internet-page maar eens maken.

Hey look everyone, my very first words on the net


zal eruit zien als
Hey look everyone, my very first words on the net

Zoals je ziet stoppen sommige regels, om dan te beginnen op een volgende, en bij andere zit er een lege regel tussen.Dit doe je door middel van het 'line break command'
, binnen in een paragraaf. De stukken tekst hierboven laten dat mooi zien.

Hey look everyone,
my very first words on the net


zal eruit zien als
Hey look everyone,
my very first words on the net

Goed, tik nu je tekst maar in, bewaar het en open dan een browser, (je 2nd browser scherm als je online bent), en klik dan op verversen om de veranderingen te bekijken.

Begin van de page


4) De tekst kleur
In dit gedeelte zal zaal deze tag: tag: text in de body tag worden toegevoegd

Als de achtergrond van deze page zwart was geweest had niemand dit kunnen lezen , behalve als ik de tekstkleur had veranderd. Als je achtergrond donker is zal dit gedeelte je wel interesseren. Als je wilt dat alle standaard tekst goed leesbaar is, moet je iets toevoegen in de tag.

Dus zoek even de juiste tag en voeg er het volgende aan to:.
text="
JeTekstKleur" - Dat zegt genoeg. Als je wilt kun je een kleur kiezen uit de tabel hierboven.

Je body tag zal er als volgt uit zien.
text="Je TekstKleur">

Dat was simpel, toch? Goed, ga dan maar verder met het volgende onderwerp om te zien of dat ook zo kort is.

 Begin van de page


5) Italic en Bold tekst
Deze zullen behandeld worden:,

en Als deze voor en na een tekst staan, wordt deze bold

en Als deze voor en na een tekst staan, wordt deze italic

Weer moet je niet vergeten de tags te sluiten, om te voorkomen dat normale tekst of bold of italic wordt. 
Probeer nu zo wat tekst op je page te gebuiken: Jou Tekst or Jou Tekst, of zelfs Jou Tekst in je code, en zie wat het doet.

En ja, dit is net iets korter als het vorige onderdeel!!

Begin van de page


6) Lettergrootte veranderen Size
Deze zullen behandeld worden: waar # een nummer is tussen 1 en 7
Dit gedeelte zal niet het aanpassen van standaard tekst behandelen. Om dat te leren moet je bij de links kijken op de RainForest help page.

Om de grootte van je koptekst te veranderen worden tags gebruikt die daar speciaal voor gemaakt zijn. Als je een header tag gebruikt, vergeet dan niet deze ook weer te sluiten.

Je koptekst

Je koptekst

Je koptekst

Je koptekst

Je koptekst
Je koptekst

Zo, nu dat je de grootte van je koptekst kunt zien, ga naar de regel die je als koptekst ziet en verander de

naar de koptekst grootte die je wenst, en verander de

in de sluit-tag die bij de open-tag hoort van de gewenste grootte, of tik het gewoon zelf in, na de body-tag.
LET OP: je moet de tag sluiten met dezelfde grootte, anders blijft alle tekst groot!

Begin van de page


7) Het maken van (hyper)links
Dit gedeelte zal de volgende tags introduceren, alsmede de volgende tag add-ins: ,name, href

Je hebt vast al enkele keren de links op deze page gebruikt, en misschien wil je dat jou page ook wel een beetje op en neer springt.
Daarom worden hier twee dingen behandeld:
1) Iets waar je op klikt
2) Onderdeel waar de link naar verwijst

Ok, hier gaan we:

Links binnen één page
Kijk om te beginnen hier eens naar,
Het maken van (hyper)links
zal eruitzien als Het maken van (hyper)links
Met die code is het eerste stuk behandeld.
De opent de link (a staat voor anchor), en de sluit het weer, in deze situatie, waardoor een klikbare link ontstaat
De href="#gadaarheen"> is het adres waar het heen verwijst, terwijl de # de browser verteld op deze page te blijven, en te verplaatsen naar het doel met de naam "gadaarheen".
Het maken van (hyper)links is gewoon de tekst die je te zien krijgt.

het volgende stukje code lijkt hetzelfde, maar deze benoemt het doel. In dit geval is de tekst hetzelfde als het doel, en is geplaats van de gelinkte tekst vandaan.

name="gadaarheen">Het maken van (hyper)links
name="gadaarheen" geeft het doel de volgende naam: gadaarheen. Het valt op dat er geen # teken is. Dit teken wordt namelijk alleen gebruikt bij de linkm en niet bij het doel ervan. Je kunt voor het doel elke naam gebruiken, maar je moet er bij de link wel naar verwijzen, anders zal het niet gevonden worden.
Het maken van (hyper)links -Dit is het doel van je link, en als je op de link klikt zal erheen worden gegaan.
Ik had ook aleen de eerste letter kunnen gebruiken als link, maar dan moet wel de rest van de tekst achter de , komen te staan. Zoals dit dus:;
Het maken van (hyper)links

Links binnen je eigen site (of: hoe kom je van de eerste page af?)
Dit kan wat ingewikkeld worden aangezien hier twee mogelijkheden zijn.
Allereerst kun je simpelweg van page veranderen.
Ten tweede kun je ook naar een bepaald punt op een andere page linken (a named point).

De code Home zou je verplaaten naar het begin van mijn eerste page, waarbij "Home" klikbare tekst is.
Het verschil met dit type link en hetgeen hierboven staat, is de directe referentie naar een html file (index.html). Best simpel allemaal toch?

Goed, een kleine uitbreiding van dit geheel is het gebruiken van een doel op een andere page. Hieronder staat de code die hiervoor gebruikt zou kunnen worden, bv het doel genaamd "zoek" dat op een andere page bestaat als de page waarop de link staat.

Home

index.html is hier eerste page, waarbij # aan de browser opdracht geeft voor het doel te kijken op de page die zoek heet.
Dus, mocht je op een page een link hebben naar iets halverwege een andere page, maak daar dan een (doel) target en link daarheen op de page waar je vandaan komt.

Links naar een ander zijn page
Vergeleken met alles hierboven is dit betrekkelijk simpel.
Als we dit stukje code nemen: Home,
en "index.html" vervangen met "http://....de rest van het adres waar je heen linkt", en ook de tekst "Home" vervangt met "GaNaarMijnVriendZijnPage", heb je een link gemaakt die mensen naar je vriend zijn page stuurt als zij op de tekst "GaNaarMijnVriendZijnPage" klikken.
GaNaarMijnVriendZijnPage

Begin van de page


8) Het instellen van de kleur van de gelinkte tekst
In dit gedeelte zullen de volgende zaken aan de body tag worden toegevoegd: link, vlink, alink

Ok. De instellingen van de kleuren gebeuren in de body tag, net als de meeste andere belangrijke instellingen.

zijn de instellingen voor de links op deze page, en naast deze instellingen is ook de achtergrondkleur hierin opgenomen. Maar dat staat wat naar boven vermeldt. Er is geen tekstkleur instelling, aangezien ik ervoor gekozen heb die niet te gebruikten. Het resultaat is een zwarte tekst (als tenminste de standaardkleur van je browser zwart is)

LINK= "JouKleur" stelt de kleur invan de link voordat deze wordt gebruikt.
VLINK= "JouKleur" stelt de kleur in van links nadat zij gebruikt zijn, zodat je gemakkelijk kunt zien wat je wel en wat je niet gezien hebt..
ALINK= "JouKleur"
stelt de kleur in van een actieve link.

Goed, kopieer en plak het volgende maar, en vergeet niet je eigen kleuren in te vullen.

link="LinkKleur" vlink="VLinkKleur" alink="ALinkKleur"

Vergeet niet dat als je kleuren gebruikt die dicht in de buurt komen van je achtergrondkleur alles erg slecht leesbaar is, wat het bezoeken van je page niet tot een hoogtepunt maakt.

Begin van de page


9) Het plaatsen van een plaatje
Dit gedeelte zal uitleggen hoe je plaatjes aan je tekst toevoegd, dmv het gebruik van de volgende tags: , src


Ok. Hier is de code die dit plaatje op deze page heeft laten verschijnen.

Leg uit aub! Ok, ik zal het proberen.
De img laat de browser weten dat er een plaatje zit aan te komen. Dit heet de image tag .
De src="sample.gif" laat de browser weten dat de bron van het plaatje de file is die "sample.gif" heet.

Om een plaatje te laden moet de naam in de tag en degene van het plaatje in je directory precies hetzelfde zijn. - sample.gif verschilt van SaMpLe.gif

.

Als je dit icoontje krijgt "" in plaats van het bedoelde plaatje, kijk dan eerst of je het wel hebt geupload.
Als je dat hebt gedaan, vergelijk dan de naam van het plaatje in je directory met de naam die je gebruikt in het HTML document (Die MOETEN identiek zijn). Als er hier geen problemen zijn, probeer dan weer het plaatje te uploaden. Soms werkt het upload-programma niet zoals het moet.

Goed, om je geweldige paspoortfoto op het net te zetten gebruik je deze tag: . En dat is alles!

Links using Images

Ok. Het plaatje links is gelinkt naar een andere page en dar gebeurt met de volgende code in plaats van het gebruiken van een tekst.

Als je artistiek bent aangelegd en over de juiste programma's beschikt, kun je een aantal "Buttons" maken , en ze dan linken naar waar dan ook.

Je kunt meer met plaatjes doen, maar er zijn zal plaatsen waar je meer kunt lezen daarover. Die staan in de RainForest help page uitgelegd.

Begin van de page


10) Een plaatje als achtergrond gebruiken
Nu kun je dit in je body-tag plakken: BACKGROUND

Om een achtergrond plaatje te gebruiken in plaats van een saai kleurtje moet je weer iets in je body-tag plakken , zoals hieronder staat aangegeven
BACKGROUND="JouAchtergrondPlaatje" - plaatst een plaatje op de achtergrond dat 'tiled'.

background="JouAchtergrondPlaatje" link="LinkKleur" vlink="VLinkKleur" alink="ALinkKleur">

Begin van de page


11) Het toevoegen van je Email adres
Goed, hieronder staat de code voor een nep geocities email adres.
nep@oocities.com
en zo ziet het eruit
nep@oocities.com Maar je kunt, net als bij alle andere links, elke tekst gebruiken die je wilt-Mail me - Comments. Je zou er zelfs een plaatje van kunnen maken, zoals hierbover beschreven staat. Dan gebruik je

Het enige wat je hoeft te doen is de volgende code te kopieëren,

JouwMailTekstOfPlaatsje

Zo, weer een kort stukje.....je bent er bijna!

Begin van de page


12) De link naar GeoCities
Om tot slot volgens de regels van GeoCities te werken moet je de de volgende code aan al je pages toevoegen. Je kunt het knippen om het vervolgens te plakken in je page net voor het sluiten van de tag


This page hosted by

Get your own Free Home Page

Begin van de page


En dan ben je echt klaar.Joepie!

Of nee, wacht even...

BEWAAR HET
en bekijk het goed, probeer alle links, bekijk all plaatjes. Dat is belangrijk, want als het bij jou niet werkt, werkt het nergens

Terwijl jij je vakmanschap bewonderd zouden wij graag je aandacht vestigen op dit online formulier. Wij horen namelijk graag of je dit gebruikt hebt en wat je ervan vond.


Met behulp van deze gids, en de bronnen die staan op deRainForest help page zou je makkelijk een eind moeten kunnen vorderen.
Als je iets op deze page niet begrijpt, vul dan alsjeblieft het formuliertje in, zodat wij je kunnen helpen. Vergeet daarbij niet je email-adres bij te voegen!
Als je problemen hebt met pages van de bronnen die op de vorige page stonden, neem dan contact op met diegenen die dat gemaakt hebben, en niet met ons.


Deze page is voor jou, het groentje, gemaakt, en is vrij te gebruiken zonder kosten.

Veel plezier ermee!
pjmisme CL Rainforest & Vines
Translated by:
CloudChaser

This page hosted by

Get your own Free Home Page

© The Geocities RainForest & RainForest/Vines Community Leaders, and residents of all Geocities Communities 1997