Een wireframe voor de opzet van je website

HTML? CSS? WordPress? Wat moet ik nu leren?

Een website leren maken, een website bouwen. Als je op Google gaat zoeken dan gaat er een wereld met afkortingen open waar je eng van wordt.
Misschien ben je op die manier wel op deze site terecht gekomen. Je kreeg in de gaten dat je iets moest weten van HTML,
dat je iets moest leren over CSS. Dat je een website maakt met WordPress, dat iedereen een blog kan beginnen, een website kan maken zonder technische kennis.

In dit artikel probeer ik je kort uit te leggen wat HTML is, wat CSS is en wat dit allemaal te maken heeft met websites maken.

Omdat een groot deel van de websites tegenwoordig draait op WordPress, vertel ik je daar ook wat over zodat het plaatje compleet is.

Vervolgens kun je zelf de afweging maken op welke manier je verder wilt en kunt gaan.
Lees verder

WordPress theme aanpassen met CSS

Wanneer je een eigen website hebt met WordPress en je wilt wat aanpassingen gaan doen aan het uiterlijk van de website dan is enige kennis van CSS wel handig. Je kunt namelijk op een redelijk eenvoudige manier aanpassingen doen in het CSS bestand wat het uiterlijk van je WordPress Theme regelt.

Overigens noemen we een theme ook wel een template. Beide termen gaan over hetzelfde. Het theme bepaalt hoe WordPress er uit ziet. In dit artikel heb ik het dus over het WordPress theme.

WordPress theme aanpassen via het dashboard

De meest eenvoudige manier om wat aan te passen aan je CSS bestand is door in het menu van je WordPress dashboard naar Weergave te gaan en dan op Editor te klikken.

wp-editor

De eerste pagina die dan opent is het belangrijkste CSS bestand van het theme dat je gebruikt. Nu kun je aan de slag met het aanpassen van CSS door regels te veranderen, weg te halen en bij te voegen. Natuurlijk moet je dan wel enige kennis van CSS hebben, waarover later meer.

Regelmatig updaten

Maar dit is echter geen verstandige keuze omdat je hier te maken hebt met een theme dat misschien wel verandert. Veel themes die je vindt worden met enige regelmaat ge├╝pdatet. Bijvoorbeeld als er een nieuwe versie van WordPress uit is of als er een fout in het theme gevonden wordt.

Sommige updates zijn zelfs noodzakelijk omdat er in de code zulke fouten staan dat kwaadwillenden via een achteringang vervelende zaken kunnen doen in je website.

Gebruik altijd de laatste versie!

Tip van de dag is dat je altijd de nieuwste versies van een WordPress theme moet gebruiken (en als je upgrade ook een backup maken!). Dus ook als je vindt dat het theme er nu prima uitziet moet je de update die klaar staat wel doorvoeren.

Het grote probleem op dat moment is dat je al je aanpassingen in het CSS bestand kwijt bent! Je kunt weer opnieuw beginnen. En het is geen oplossing om enkel dit CSS bestand te bewaren omdat het zomaar kan zijn dat bepaalde onderdelen een andere naam hebben gekregen.

WordPress plugin Simple Custom CSS

WordPress zou WordPress niet zijn als hier geen plugin voor bedacht zou zijn. Simple Custom CSS genaamd. Deze plugin overschrijft en overruled de CSS bestanden van het theme (en ook van plugins trouwens).

screenshot Simple Custom CSS

Het voordeel van CSS is dat je niet alle code moet gaan herschrijven met deze plugin, je hoeft alleen maar de zaken aan te pakken die je aangepast wilt hebben. De CSS code die je in deze plugin plaatst gaat voor alle andere CSS codes. Maar als een bepaald onderdeel de aanpassing niet in deze plugin kan vinden dan wordt het normale stijlblad gebruikt.

Kortom een plugin die veel van de zaken waar je tegenaan loopt kan oplossen.

Een WordPress child theme

De echte WordPress puristen zullen hier overigens nooit genoegen mee nemen en zij zullen kiezen voor de derde optie, namelijk het maken van een child theme.

Een child theme is als het ware een ‘kindje’ van het oorspronkelijke theme en zal dus de meeste eigenschappen van het oorspronkelijke theme overnemen, behalve de eigenschappen die je in het child theme plaatst.

Komt er een update van je theme dan kun je deze gewoon doorvoeren en hoef je niet bang te zijn dat al je aanpassingen weg zijn.

Voordeel van een childtheme is dat je niet alleen je CSS bestanden kunt wijzigen, je kunt ook allerlei andere bestanden, zoals de header, de page, de index en dergelijke voorzien van een andere look als je dat wilt.

Het childtheme is een niet heel ingewikkelde manier om een WordPress theme helemaal naar eigen wens te maken.

Hoe je dat doet lees je in een volgend artikel. Als je updates wilt ontvangen van artikelen die verschijnen, meld je dan aan voor de nieuwsbrief. Dat kan hieronder. Je krijgt dan ook het gratis Eboek waarin je de basis leert van HTML en CSS.

Hoe maak ik een website met HTML en CSS?

Een eenvoudige website in HTML en CSS, hoe maak ik dat? Een vraag die je met een site als deze regelmatig langs ziet komen. In dit artikel laat ik je zien hoe je dat doet.

Hiervoor maak ik gebruik van HTML5 en CSS3. Maar let wel, ik heb het hier enkel over de basis. Niet over ingewikkelde mogelijkheden die er zijn, niet over allerlei toevoegingen zoals webwinkels of content management systemen.

Daar heb je namelijk veel meer voor nodig dan een beetje HTML en CSS.

Een HTML document

Maar goed, we gaan dus weer even terug naar de basis. Hoe zat het ook alweer?

Ten eerste moet je de browser vertellen dat je een HTML document hebt. Dat doe je in de eerste plaats door het document op te slaan als een .htm document. Dat doe je niet in een programma als Word, maar dat doe je in een tekstverwerkingsprogramma die tekst kaal opslaat.

Kladblok op je Windowscomputer bijvoorbeeld, of teksteditor op de Mac.
Even opletten bij het opslaan dat je als extentie dus .htm meegeeft.

Een doctype

Ten tweede geef je een html document een Doctype mee. Vroeger, in de tijd van HTML4.01 was dat ingewikkeld. Je had verschillende versies, voor strikt gebruik of voor meer los gebruik.

Nu is dat eenvoudig, de Doctype is een regel en makkelijk te onthouden:

1
<!DOCTYPE html>

Vervolgens krijg je de daadwerkelijke HTML code.
Dit start je met de volgende regel:

2
<html lang="nl">

De toevoeging lang=”nl” is bedoeld om aan te geven in welke taal de website is geschreven. Niet noodzakelijke, maar wel nuttige informatie dus altijd gewoon toevoegen aan je document.

Een eenvoudige pagina in HTML

We beginnen maar eens met een eenvoudige pagina waarin een koptekst kom te staan en een paragraaf. Verder nog even niets.

Voordat je deze koptekst en de paragraaf invoegt heb je eerst nog wat andere code nodig. Namelijk de code voor de ‘head’.

In de head staat nog wat meer informatie voor de browser waar je mee werkt. Bijvoorbeeld de titel van de pagina en eventueel een link naar een CSS document, waarover later meer.

3
4
5
6
<head>
<title>Mijn eerste website</title>
<meta charset="UTF-8" />
</head>

Dan gaan we nu naar de inhoud.

7
8
9
10
<body>
<h1>Koptekst niveau 1</h1>
<p>Dit is een paragraaf en hier kun je dus gewoon je tekst in zetten. De paragraaf heeft vanzelf al een spatie. Wanneer je een nieuwe paragraaf start dan begint deze weer op een nieuwe regel.</p>
</body>

Je ziet dat elke html code geopend wordt en weer wordt afgesloten met een schuin streepje. Elke pagina wordt dus geopend met <body> en afgesloten met </body>.

<h1>…</h1> is dus een regel waarin de koptekst komt te staan. Je hebt zes niveaus kopteksten. De grootste (en de belangrijkste) is h1. De kleinste en minst belangrijke is h6.

Hier heb ik dus heel even semantiek aangestipt.

Aan het einde wordt de pagina afgesloten met

13
14
...
</html>

Een stijlblad met CSS

Nu willen we daar al een klein beetje stijl aan toevoegen. Daarvoor moeten we een tweede document gaan aanmaken. Geen .htm document, maar een .css document. In dat document komt alles te staan wat met het uiterlijk van de website te maken heeft. Denk aan kleuren, hoe plaatjes komen te staan en welk lettertype je bijvoorbeeld gebruikt.

Je moet het stijlblad (het CSS document) nog wel gaan koppelen aan het html document. Als je het stijlblad bijvoorbeeld de naam stijl1.css geeft dan roep je dit stijlblad op in je html document met de volgende code (die je plaatst tussen de head codes):

1
<link rel="stylesheet" type="text/css" media="all" href="stijl1.css" />

Zorg ervoor dat beide documenten in dezelfde map staan.

CSS schrijf je als volgt. Je geeft eerst aan voor welke html code er wat moet gebeuren. Als je bijvoorbeeld een paragraaf wilt aanpassen qua uiterlijk dan plaats je de regel

1
p { }

Tussen de accolades komt dan de regel te staan waarin je aangeeft wat er moet veranderen. Bijvoorbeeld dat alle tekst schuingedrukt komt te staan…

1
p {font-style: italic;}

Merk op dat je na font-style een dubbele punt plaatst en na italic een punt komma. Met de punt komma sluit je af dat je met dat stukje aanpassing bezig bent.

Dit was een heel simpel voorbeeld. Volgende keer ga ik een uitgebreider artikel schrijven over het gebruik van CSS. We gaan dan met behulp van bovenstaand html document aan de slag met een aantal aanpassingen.

Voor nu wil ik je aanraden om eens een webpagina en een stijlblad te maken.

CSS Pseudo selectors :before, :after, :focus en :first-child

In de serie over CSS selectors ga ik het vandaag hebben over enkele bijzondere selectors. Ten eerste twee selectors om extra tekst te genereren, :before en :after. Daarnaast de pseudo selector :first-child en :focus.

:before

Het pseudo element kan iets wat met geen andere selector kan, namelijk het vooraf laten komen van content bij een element.

Een voorbeeld. Stel je hebt een lijst met links, maar enkele links zijn extra waardevol. Als het ware een supertip.

Deze links kun je vooraf laten gaan met de tekst ‘Supertip’. Dit kun je natuurlijk doen door in je HTML code deze tekst toe te voegen, maar met de :before selector kun je het jezelf makkelijker maken.

Dit kan namelijk wel eens van pas komen als je de opzet van je site aanpast zonder aan de HTML code te komen. Makkelijke uiterlijke aanpassingen doe je dan met je CSS.

Eenvoudig toevoegen

Een :before selector is eenvoudig in te voegen. Maak eerst een class aan die we de naam ‘tip’ geven (.tip dus). Voeg deze class toe aan de paragraaf of link die de extra toevoeging krijgt. Bijvoorbeeld

Linktekst

Aan je CSS stijlblad voeg je dan de volgende code toe:

a.tip:before {content: "Super Tip!" }

Het resultaat ziet er dan zo uit:

Voorbeeld :before, met HTML code
Lees verder

Hoe maak je een flexibele layout met meerdere kolommen in HTML en CSS

Een website bestaat vaak uit meerdere kolommen. In deze tutorial wil ik je laten zien hoe je een webpagina maakt die bestaat uit 4 kolommen. Deze kolommen hebben een flexibele breedte, afhankelijk van de breedte van het beeldscherm. Let op, ik heb de webpagina niet responsive gemaakt.

Foto portfolio of kranten ‘look’

De 4 kolommen website zie je vaak terug bij websites die het uiterlijk van een krant weergeven of bij een website waar je een foto portfolio in wilt maken. Dat laatste gaan we dan ook oppakken.

Om dit te bewerkstelligen zul je ten eerste een webpagina moeten opzetten die bestaat uit een header en vier divs om de kolommen mee te gaan maken. Ook moeten we een achttal afbeeldingen hebben die we er in gaan plaatsen.
Lees verder

CSS selectors, de familie

In het eerste artikel over CSS selectors heb ik je vertelt dat CSS is opgebouwd uit verschillende onderdelen. In dit tweede artikel wil ik het hebben over de familieboom die je kunt gebruiken om de verschillende namen te kunnen plaatsen.

We gebruiken hiervoor een simpele html opzet.

uitleg-css-familie

Ancestor

Ancestor – (stamvader): Een HTML tag die geplaatst is rondom een andere tag is de stamvader van die tag. In bovenstaand voorbeeld is de tag <html>, de stamvader van alle andere genoemde tags. De tag <body> is de stamvader van <h1>, <p> en <em>.

Descendent

Descendent – (afstammeling): Een tag in een tag is een afstammeling. In de afbeelding is <body> de afstammeling van <html>.

Tegelijkertijd is <p> een afstammeling van en <body> en <html>.

Parent

Parent – (ouder (in de vorm van vader of moeder)): Een parent is de meest directe stamvader (ancestor). In ons voorbeeld is de <html> tag dus Parent van <body> en <head>, maar niet van alle andere tags.

De <p> tag is de parent van de <em> tag.

Child

Child – (kind): Logischerwijs is dit de benaming voor de tag die direct gerelateerd is aan de voorgaande tag. <h1> en <p> zijn children van <body>. <em> is geen kind van <body> omdat deze onder de <p> valt.

Sibling

Sibling – (broer/zus): Tenslotte heb je de sibling. Deze kun je zien als broer of zus van een andere tag. In ons voorbeeld zijn <h1> en <p> siblings. Evenals <body> en <head>.

Pseudo classes voor links

De meest bekende en gebruikte pseudo classes zijn die voor links. Er zijn vier varianten om een link vorm te geven.

a:link – hiermee wordt de link geselecteerd die nog niet bezocht is en de muis gaat niet over de link heen.

a:visited – Dit is een link waar al eerder een bezoek aan is gebracht. Je kunt een bezochte link dus al informatie meegeven.

a:hover – Hiermee kun je de link voorzien van een mouseover effect. Bijvoorbeeld door een tabblad te voorzien van een andere kleur als je er met de muis over gaat.

Dit effect mag je overigens ook gebruiken voor andere elementen dan een link. Je kunt bijvoorbeeld een paragraaf laten oplichten, zoals ik hieronder laat zien.

Dit is een testparagraaf, ga er eens over met je muis…
Dit is gedaan met de volgende stijl:
p.over {border: 1px solid black;}
p.over:hover {background-color: #333; color: #FFF;}

a:active – Op het moment dat een bezoeker daadwerkelijk klikt kun je ook nog activiteit laten plaats vinden. Bijvoorbeeld het veranderen van kleur.

:first-letter en :first-line

Vervolgens zijn er de twee pseudo elementen :first-letter en :first-line. Je kunt al wel raden waar deze voor bedoeld zijn. Wanneer je de eerste letter van een paragraaf anders wilt vormgeven dan normaal, gebruik dan :first-letter. Wil je de hele eerste regel bijvoorbeeld vetgedrukt hebben in een paragraaf, dan gebruik je :first-line. Dit pas je op dezelfde manier toe als het voorbeeld hierboven met de :hover functie.

In het volgende artikel ga ik het hebben over een volgende rij met pseudo selectors zoals :before en :after.

Dit is het tweede deel van vier artikelen over CSS selectors

Artikel 1 – CSS selectors voor beginners
Artikel 2 – CSS selectors, de familie
Artikel 3 – Pseudo selectors :before, :after, :first-child en :focus.
artikel 4 – komt nog

CSS selectors voor beginners

Oei, dat klinkt spannend, het lijkt bijna taal voor de echter computer geeks.

Echter CSS selectors voor beginners heeft als bedoeling om je te vertellen hoe het precies zit met het schrijven van CSS en welke basisprincipes je in acht moet houden wil je op een goede manier met CSS omgaan.

CSS, selector en declaraties

Het is belangrijk om de Selectors goed te gebruiken want daarmee doe je veel voordeel. Je kunt bijvoorbeeld de eerste paragraaf in een div voorzien van vetgedrukte letters zonder deze meteen een class mee te moeten geven.

Heb je geen idee waar ik het in het vorige stukje over heb dan raad ik je aan enkele beginners artikelen te lezen over CSS.

Lees verder