Html 3 - De eerste elementen

In deze serie artikelen wil ik uitleggen wat HTML is, omdat dit de meest belangrijke programmeertaal is voor het programmeren van websites. Wat je verder ook gebruikt, HTML komt er altijd bij kijken.

Voorkennis?

Ik ga ervan uit bij het schrijven van dit artikel dat je de voorgaande (HTML) artikelen van mij hebt gelezen, of in elk geval zelf de kennis heeft van wat daarin word beschreven.

Een afbeelding een ander formaat geven.

Om een afbeelding een ander formaat te geven hebben wij 2 elementen tot onze beschikking. Deze 2 elementen zijn hight=”” en width=””. Zoals misschien wel logisch word verwacht door jullie (letterlijke vertaling) geef je met hight de (nieuwe) hoogte aan, en met width de (nieuwe) breedte. HTML werkt hiervoor met pixels (Wat een pixel is staat verder naar onderen).

In het vorige artikel gebruikte ik de IMG tag, deze hebben we nu uiteraard weer nodig. In dit artikel gebruikte ik het voorbeeld , hierop ga ik in dit artikel weer verder. Het plaatje dat we hier gebruiken heeft standaard een hoogte van 539 pixels, en een breedte van 528 pixels. Deze waarden worden standaard aangenomen als de elementen hight en width niet zijn opgenomen.

Stel nu dat ik wil dat dit plaatje 50 pixels lager is(dus een hoogte van: 489 pixels), en 45 pixels minder breed (dus een breedte van 483 pixels). Moet ik de elementen hight en width gebruiken. Waar je ze binnen de img-tag zet maakt niet uit, zolang dit maar niet binnen een ander element is (bijvoorbeeld het element src). De bestaande img-tag () word nu dus als volgt ingevuld: . Zoals je ziet heb ik hier de waarden ingevuld welke ik net heb berekent. Op het moment dat je alleen het element hight gebruikt, zal voor de width de standaard worden genomen. Andersom werkt dit natuurlijk net zo.

Wat zijn pixels?

Pixels zijn eigenlijk niets minder dan beeld punten op een computerbeeldscherm. Dus als we zeggen van een plaatje (we nemen weer het plaatje smile030.jpg) dat deze 539 pixels hoog is, betekent dit dat deze dus eigenlijk 539 beeldpuntjes hoog is. Hoe meer beeldpuntjes een plaatje heeft, hoe mooier de kwaliteit. Dit komt doordat elk beeldpuntje een eigen kleur heeft.

Als we het hebben over een afbeelding zeggen we meestal ook dat deze de afmetingen heeft van 528X539 pixels. Dit kun je vergelijken met de omtrek (lengte x breedte). Het aantal pixels berekenen we hetzelfde als de oppervlakte, namelijk de lengte vermenigvuldigen met de hoogte(breedte bij oppervlakte). In het hierboven gebruikte voorbeeld bestaat het plaatje dus uit 284592 pixels.

Kleuren in html

Graag zou ik jullie uitleggen hoe jullie gemakkelijk een achtergrondkleur, tekst kleur, en kleuren voor Jullie links kunnen instellen. Maar daarvoor moet ik eerst uitleggen hoe HTML kleuren leest. Er is wel een simpelere manier als ik jullie nu uitleg, en ik probeer alles zo simpel mogelijk te houden, wil ik het ook leuk houden. Ik neem daarom een manier die net ietsje lastiger (10% ofzo) is, maar daarmee ook gelijk 200 keer zoveel mogelijkheden heeft. Sterker nog, deze manier is eigenlijk ook de standaard voor kleuren binnen html en andere talen.

Genoeg gekletst. De manier van kleurcodes die ik hier wil uitleggen gaat om zo geheten hexa kleuren. Hexa is afkomstig van de term: hexadecimaal, wat staat voor een 16-tallig cijferstelsel (0 t/m f). deze code gaat vooraf met een hekje (#), gevolgd door 2 cijfers voor rood, 2 voor groen en 2 voor blauw. Zo is wit (de meest hoge waarde) #ffffff, en is zwart (de meest lage waarde) #000000, rood wordt: #ff0000. Dit zijn genoeg voorbeelden. 

De elementen voor het (simpel) kleuren van je website.

Net zoals de breedte en hoogte elementen van een plaatje, moet je ook deze elementen binnen een tag zetten. In dit geval geldt voor alle elementen in dit hoofdstuk dat deze in de body-tag komen. Uiteraard plaats je deze elementen niet binnen een ander element. Hieronder bespreek ik steeds een element, overal zet in simpele en overzichtelijke kleuren in, ook deze benoem ik. Hier alvast de body tag met daarin alle elementen en een kleur:.

bgcolor=”#00000” Het element bgcolor word gebruikt om de achtergrond kleur van een website in te stellen. De kleur die ik hier heb gebruikt is zwart.

text=”#ffffff” Het element text word gebruikt om de tekst kleur van een website in te stellen. De kleur die ik hier heb gebruikt is wit.

link=”#ff000” Het element link word gebruikt om de standaard kleur (een website/pagina die nog niet bezocht is) van een link op je website in te stellen. De kleur die ik hier heb gebruikt is rood.

alink=”#00ff00” Het element alink word gebruikt om de actieve kleur (er is op de link geklikt en de pagina word geladen) van een link op je website in te stellen. De kleur die ik hier heb gebruikt is groen. Echter moet ik er wel bij vermelden dat je dit met de huidige snelle internet verbindingen niet meer ziet verkleuren, meestal zie je gelijk de kleur die bij vlink is opgegeven.

vlink=”#0000ff” Het element vlink word gebruikt om de bezochte kleur (als een bezoeker al wel op deze website/pagina is geweest) van een link op je website in te stellen. De kleur die ik hier heb gebruikt is blauw.

Een plaatje als link

Als laatste wil ik in dit artikel behandelen hoe je een plaatje als link kunt maken. Een van de meest gebruikte functies hiervan is een klein plaatje (meestal vierkant) dat als je er op klikt, een link is naar het volledige formaat. In dit voorbeeld gebruik ik wederom het plaatje smile030.jpg.

Eigenlijk is het plaatsten van een plaatje heel eenvoudig. Je zet de beide a-tag’s neer (open en sluit) en op de plaats van de text zet je enkel de img-tag. Een voorbeeld hiervan is: .

in het bovenstaande voorbeeld heb ik een plaatje gemaakt dat klein en vierkant is, en als je erop klikt, ga je naar de volledige versie. Echter zou je als je dit zo laat staan een lelijke rand om je plaatje krijgen. Om deze weg te krijgen hebben we nog een element die binnen de img-tag hoort nodig. Het border=”” element. Dit element kent maar 2 waarden een 1 en een 0. Met 1 staat deze rand aan en is hij zichtbaar (standaard), echter als je de waarde 0 gebruikt word deze rand niet zichtbaar. Hieronder nogmaals het bovenstaande voorbeeld, maar dan zonder rand: .

Nawoord

Dat was het weer voor dit artikel. Op dit moment weet ik nog niet wat ik in het volgende artikel ga behandelen. Maar ik beloof jullie, jullie zullen het interessant vinden en er veel aan hebben. Daar zorg ik voor.