Basis
pv2_paars.gif 204*37
mail me
 
 
 
  index
  home
  basis
  linken
  lijsten
  plaatje
  varia
 
Basis HTML codes.


Met de basis Tags een Pagina maken.

Hier is de complete tag opzet voor een Basis HomePage met daarin ALLE Tags die we reeds hebben doorgenomen:

<HTML>
<HEAD>
<TITLE>Type hier de title van je pagina</TITLE>
</HEAD>

<BODY BACKGROUND="picture.gif" BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080" ALINK="#FF0000">

En alleen in dit gebied zet je dus de informatie waarmee je de wereld wilt verblijen V
Dus TUSSEN de BODY tags.

</BODY>
</HTML>

Als je de basisopzet van je pagina klaar hebt, dan kun je de content gaan toevoegen. Laten we beginnen met de basis tekst:

Maken en Vormgeven aan Tekst

Het is zeer belangrijk dat je je tekst kunt weergeven zoals je in gedachten hebt. Hierbij dient op grootte, kleur en layout gelet worden. Er zijn diverse tags die voor een bepaalde weergave van je tekst zorgen:

De <FONT> Tag

De <FONT> Tag is er speciaal om je tekst uiterlijk aan te passen. Er zijn diverse opties, dus kijk even welke <FONT> Tag attributenje nodig hebt. Hier heb je enige vaak voorkomende attributen voor deze tag:

SIZE="1-7"
Met dit attribuut laat je tekst sizes (afmetingen) van 1 tot 7 weergeven. Als je geen specifieke waarde ingeeft zal de default (standaard) size 3 zijn. 1 is de kleinste tekst size, en 7 is de grootste.

<FONT SIZE="2">testen van de font size</FONT>

Verander nu de 2 in een nummer tussen 1 en 7. Zie je het verschil?

FACE="Font naam hier"
En dit attribuut laat je het font (lettertype) van je tekst instellen. Als je aangeeft, dat je je tekst in bv Arial wilt weergeven, en degene die je pagina bezoekt niet over dit lettertype beschikt dan zal de tekst verschijnen in het font wat de bezoeker als zijn default (standaard) font voor de browser heeft ingesteld.

Hier is de correcte weergave van het FACE= attribute:

<FONT FACE="Arial">test face attribuut</FONT>

Nu kun je natuurlijk als tekst wel Arial weer willen geven, maar niet iedereen heeft Arial, dus kun je een tweede font instellen. Dit is eenvoudig te doen...... type gewoon nog een font naam en gebruik een komma als scheidingsteken, zo dus:

<FONT FACE="Arial,Verdana">test face attribuut</FONT>

In het voorbeeld zal de browser Verdana laten zien indien ik niet Arial heb. Heb ik geen van beiden, dan wordt het default (standaard) font weergegeven..

COLOR="Kleur Code of Naam hier"
En met dit attribuut stel je de kleur van je tekst in. Je kunt met 6 karakters een kleur aangeven (Hexadecimal Color Code) of de Naam van de kleur (Engelse Naam).

Even een voorbeeld:

<FONT COLOR="black">test van de kleur attribuut</FONT>

En dan krijg je zwarte tekst. Evenwel, en dit is meer gebruikelijk, kun je de 6 karakters voor een Hexadecimale Kleuren Code gebruiken. En een voorbeeld:

<FONT COLOR="#000000">test kleur attribuut</FONT>

Dit geeft ook zwarte tekst.

Tekst Vormgeving Tags

Heb je de size, (formaat) kleur en het font gekozen wat je wenst te gebruiken, dan kun je je tekst nog verder aanpassen voor het uiterlijk, dan wel vormgeving.

Tekst Uiterlijk Vormgeving Tags:

Tags verschijnt:

<B> Vette tekst </B>

Vette tekst

<I> Schuine (italic) tekst </I>

Schuine (italic) tekst

<U> Onderstreept </U>

Onderstreept

<TT> typemachine </TT>

typemachine

<SUB> subscript </SUB>

subscript (H2O)

<SUP> superscript </SUP>

superscript (ESSOTM)

Speciale Karakters

Sommige karakters zullen niet te zien zijn, tenzij je de browser vertelt om ze weer te geven, en sommige karakters zijn niet op je keyboard, en dan moet je een "speciaal karakter" gebruiken om de browser te laten weten wat er weergegeven moet worden. Het karakter zal met een ampersand (&) beginnen en met een puntkomma (semicolon) (;) eindigen. En ze zijn "case" gevoelig, dus gebruik geen hoofdletters.

©

&copy;

 

Dit zijn een paar veel voorkomende speciale karakters, er zijn er nog veel meer.

®

&reg;

&#153;

<

&lt;

>

&gt;

«

&#171;

»

&#187;

½

&#189;

é

&eacute;

Het meest gebruikte speciale karakter is een "blank space", dit een een spatie die in HTML gebruikt wordt.

Als je de spatiebalk gebruikt tussen woorden, dan krijg je dus één spatie. Indien je nu meerdere spaties tussen woorden wenst moet je het 'non-breaking space' speciale karakter gebruiken: &nbsp;

Dus wil ik deze woorden verder uit elkaar zeten, dan moet ik dit typen:

Hello &nbsp; &nbsp; &nbsp; Homepagebouwer

en dit is het resultaat: Hello       Homepagebouwer

En nu je de basis kent om je tekst aan te passen wordt het tijd om er een kleurtje tegenaan te gooien:

Het gebruik van Kleur op je Pagina

In HTML gebruiken we Hexadecimale Kleuren Codes [gebaseerd op RGB waarden] of Kleur Namen om kleur in HTML documenten te gebruiken.

Hexadecimale Kleur Codes

De Hexadecimale Kleur Code bestaat uit 6 cijfers en/of letters, en dat levert in totaal maar liefst meer dan 14 miljoen mogelijke kleuren, schaduwen, verlopen en tinten op.

De 6 cijfers en/of letters combinaties zijn in werkelijkheid 3 paar waardes waarbij RR, GG, BB de hexadecimale aanduiding specificeren van Red (Rood), Green (Groen), en Blue (Blauw) voorkomend in de kleur. Deze waarde wordt geschreven als #RRGGBB. De cijfer waarde loopt van 0 - 9; de letter waarde van A to F. Dus in feite 16-tallig.

Hier is een voorbeeld van een Hexadecimale Kleur Code:

<FONT COLOR="#0000FF">Hier is een voorbeeld van gekleurde tekst</FONT>

Bovenstaande regel zal dan de voorbeeld tekst in blauw weeregeven, zo dus:

Hier is een voorbeeld van gekleurde tekst

Kleur Namen

Kleuren kunnen ook aangeduid worden met hun officiele Kleur Naam. Origineel waren er 16 Kleur Namen, zijnde de standaard 16 kleuren, ondersteund door het Windows VGA palette. Maar nu zijn er honderden standaard kleuren met officiele kleuren namen.

Een Kleuren Naam is hieronder gebruikt:

<FONT COLOR="blue">Deze tekst is gekleurd</FONT>

En dan ziet het er zo uit:

Deze tekst is gekleurd

Beide methodes zijn zonder meer toegestaan om HTML kleuren aan te duiden, maar het Hexadecimale Kleur Code systeem zal je een grotere hoeveelheid kleuren geven.

Hexadecimale Codes Gebruiken

Als je een HTML Editor gebruikt, kun je de kleur eenvoudig in een ingebouwde Kleurenkaart aanklikken, en de editor vertaalt de kleur naar de Hexadecimale Kleur Code.

Werk je met een eenvoudige tekst editor als Notepad (Kladblok) kun je een referentie lijst gebruiken om je kleur te kiezen.

Maar ook makkelijk om een geschikte kleur te zoeken, die ergens bij moet passen.

Om een kleur te kiezen: WebSafe-kleurenkaart     colorpicker



Verder met de Linken