HTML les 1 – Inleiding in HTML

HyperText Markup Language is een programmeertaal om bijvoorbeeld een internetbrowser
jouw documenten taken te laten uitvoeren. Het begon allemaal met HTML 1.0, die uit een
tiental codes bestond. Dat ging verder met de versies 2.0, 3.0, 3.2, 4 en 4.01.
Tegenwoordig werkt men al met XHTML, een combinatie van HTML en XML. Hier komen we later
op terug.

Lees verder »

Lijsten op je website

In XHTML kun je gebruik maken van een drietal lijsten. Met behulp van stylesheets zijn de mogelijkheden voor
deze lijsten zeer groot. In dit artikel gaan we in op het gebruik van lijsten in je website. Aan de hand van de
voorbeelden kun je keuzes maken voor de lijst die je zelf wilt gebruiken in je website. Zo kennen we de geordende
lijst (<ol>) de ongeordende lijst (<ul>) en de definitielijst. (<dl>).

Lees verder »

CSS properties

Naar aanleiding van een eerder artikel waarin ik schreef over de basis van css, ga ik nu in op de verschillende properties van CSS. Wat kun je nu in de praktijk met CSS. Hoe pas je het toe? De belangrijkste properties op een rij gezet.

Lettertypes

Voor het lettertype te veranderen hebben we verschillende properties, denk maar eens aan grote, type, kleur, … Hieronder vind je een lijst van de belangrijkste properties.

font-family
Font-family is het attribuut om je lettertype van een een stijl te bepalen. Het is niet enkel mogelijk om 1 lettertype te kiezen maar ook om een voorkeurslijst te maken. Dit wil zeggen dat je meerdere lettertypes opgeeft in een bepaalde volgorde. In het geval dat hij het 1ste lettertype niet kan terug vinden, neemt hij het volgende op de voorkeurslijst.

CSS syntax:

.voorbeeld {font-family:"Times New Roman", Times, serif;}

Resultaat:

Times New Roman met alternatieven.

font-style
Font-style geeft een stijl aan je lettertype. Een stijl zoals cursief of de tekst schuin trekken.
Opgelet vet en onderlijnde tekst horen hier niet bij! Hiervoor gebruiken we een ander attribuut.

CSS syntax:

.voorbeeld{font-style:italic}

Resultaat:

Italic tekst.

CSS syntax:

.voorbeeld{font-style:oblique}

Resultaat:

Oblique tekst.

font-size
Font-size bepaalt de grote van je lettertype. Dit is heel nuttig om bijvoorbeeld titels aan te duiden en ze te laten opvallen. De waarde voor dit attribuut kan ook ingegeven worden onder verschillende types. Percentage tegenover het standaard lettertype, puntgrootte of een standaard waarde zoals small.
Alle waarden kan je terugvinden in de propertylijst.
We illustreren hier 2 voorbeelden.

CSS syntax:

.voorbeeld{font-size:x-large}

Resultaat:

x-large

CSS syntax:

.voorbeeld{font-size:15pt}

Resultaat:

Puntgrootte 15

font-variant
Je kunt ook kiezen tussen normale hoofdletters en kleine hoofdletters, voor minder opvallende tekst.

CSS syntax:

.voorbeeld{ font-variant:normal}

Resultaat:

normale tekst

CSS syntax:

.voorbeeld{ font-variant:small-caps}

Resultaat:

kleine hoofdletters

font-weight
Dit geeft letterlijk aan hoe ‘vet’ de letters moeten zijn. Het is mogelijk om 2 soorten waarden hieraan toe te kennen, een getalwaarde of een vooraf ingestelde standaardwaarde.

CSS syntax:

.voorbeeld{ font-weight:bold;}

Resultaat:

tekst in bold

CSS syntax:

.voorbeeld{ font-weight:900;}

Resultaat:

font weight van 900

Tekst opmaak

We kunnen nu al het lettertype aanpassen in een bepaalde tekst maar we mogen ook niet te vergeten de tekst zelf op te maken.
Zaken zoals uitlijning, regelhoogte, ze zijn even belangrijk in de opmaak van een stuk tekst.

letter-spacing
Je kunt de afstand tussen de verschillende letters aanpassen om zo de aandacht te trekken. Dit kan een alternatief zijn om tekst in het vet te plaatsen.

CSS syntax:

.voorbeeld{ letter-spacing: 4px;}

resultaat:

spacing 4, meer ruimte tussen de letters onderling

text-decoration
Text-decoration geef je de mogelijkheid om je tekst te onderlijnen of te doorhalen. Ook een lijntje
boven je tekst is hier mogelijk.

CSS syntax:

.voorbeeld{text-decoration: underline}

resultaat:

onderlijnen
.voorbeeld{text-decoration: overline}

resultaat:

lijn boven de tekst
.voorbeeld{text-decoration: line-trough}

resultaat:

doorstreepte tekst

vertical-align
Vertical-align geef je de mogelijkheid om Subscript en Superscript te plaatsen.
Dit is zwevende tekst of tekst onderaan een woord. Opgelet dit kan enkel gebruikt worden in
een in-line opmaak. Opmaak die in een lijn geldig is voor 1 of meerdere woorden of letters, niet voor een volledige body.

CSS syntax:

.voorbeeld{vertical-align: sub}

resultaat:
Subscriptsub

CSS syntax:

.voorbeeld{vertical-align: super}

resultaat:
Subscriptsuper

text-transform
Tekst kun je met css ook zo bewerken dat hij automatisch een volledige tekst of deel van een tekst zelf in hoofdletters plaats.
ook net anders om, in kleine letters.

CSS syntax:

.voorbeeld{text-transform: uppercase}

Lees verder »

Plaatjes voor je website

stockxpert
Om je website een beetje aantrekkelijk te maken kun je kleuren gebruiken en veel tekst, maar
het belangrijkste onderdeel zijn natuurlijk plaatjes. Met een foto maak je een website veel aantrekkelijker
en wordt de aandacht ook nog eens extra getrokken. Wij hebben een paar handige links op een rij gezet
waar je goedkoop of gratis plaatjes en foto’s kunt vinden voor jouw website.

Lees verder »

Lay-out beeldvullend maken

screen
Vraag op het forum:
Ik krijg het “trucje” in CSS niet door om mijn layout verticaal beeldvullend te krijgen, ongeacht de monitor grote en/of resolutie.

Ik zal het (proberen) uitleggen aan de hand van een simpele layout:
De layout bestaat uit een “header” met daaronder een “tekstvlak” en daaronder een “footer”. Tot nu toe geen enkel probleem.
Maar nu wil ik de “header” helemaal bovenin beeld (in vaste maat) en de “footer” helemaal onder in beeld (in vaste maat),
met daartussen het “tekstvlak” wat de ruimte opvult ongeacht de hoeveel tekst wat daarin staat.
Wordt de tekst te veel voor de ruimte in het “tekstvlak” dan wil ik dat oplossen met de “overflow” functie in CSS.

Lees verder »

Tekst en plaatjes in willekeurige volgorde tonen


Wanneer je een stuk tekst, een plaatje of een ander soort content wilt tonen in willekeurige volgorde, en iedere keer
iets anders wilt laten zien als een bezoeker op je site komt, kun je gebruik maken van een handig stukje javascript.
We maken hierbij gebruik van javascript’s Math.round() en Math.random(), deze selecteren en laten een willekeurig stuk
content zien van een serie.

Lees verder »