Inhoudsopgave

HTML en CSS: de basis

Je website is gemaakt met HTML en CSS. Meestal merk je daar niets van: de editor maakt de HTML voor je. Toch is het handig om de basis te kennen, bijvoorbeeld als je met Broncode... naar de code van een tekst kijkt.

HTML: de opbouw van een tekst

HTML geeft aan wat elk stuk tekst is: een kopje, een alinea, een opsomming, een link. Dat doe je met tags tussen < en >. Meestal is er een begintag en een eindtag met een /:

<b>Deze tekst is vet</b>

Een tag kan extra informatie hebben, een attribuut. Bij een link staat in het attribuut href het adres:

<a href="/contact">Neem contact op</a>

Veelgebruikte tags

Je ziet HTML In de editor
Kopje <h2>Kopje</h2> keuzelijst: Heading 2
Alinea <p>Tekst</p> Enter
vet, cursief <strong>vet</strong>, <em>cursief</em> B, I
Link <a href="/contact">Contact</a> ketting (Link)
E-maillink <a href="mailto:info@example.nl">info@example.nl</a> ketting, adres met mailto: ervoor
Afbeelding <img src="/files/logo.png" alt="Logo"> Image
Opsomming <ul><li>punt</li></ul> Bullet list
Genummerde lijst <ol><li>punt</li></ol> Numbered list
Lijn <hr> Horizontal rule

Tekens zoals €, é of ö typ je in de editor gewoon. In HTML kun je ze ook als code schrijven, zoals &euro; of &eacute;.

Broncode bekijken

Klik onder de editor op Broncode... om de HTML van de tekst te zien en aan te passen. Met Editor... ga je terug naar de editor.

De editor kent niet alle HTML. Code die hij niet kent, zoals een ingesloten video (iframe) of een formulier, verdwijnt als je de tekst in de editor opent en opslaat. Bevat een tekst zulke code? Kies dan in de keuzelijst onder het tekstveld Behandelen als HTML, pas de tekst alleen aan via Broncode... en open de editor niet.

Tekst uit Word geplakt met veel overbodige code? Kies onder het tekstveld Omzetten > Opschonen.

CSS: de vormgeving

Het stylesheet (CSS) bepaalt hoe je website eruitziet: lettertype, kleuren, marges, hoe kopjes en knoppen eruitzien. Het stylesheet geldt voor alle pagina's tegelijk. Een kleur in het stylesheet aanpassen verandert dus elke pagina. Zo'n regel ziet er zo uit:

h2 { color: #003366; }

Het stylesheet van je website wordt beheerd door Telartis. Wil je iets in de vormgeving veranderen, neem dan contact met ons op.

  • Geef tekst in de editor geen eigen lettertype, grootte of kleur. Gebruik kopjes; het stylesheet zorgt voor de rest.
  • In de broncode kan een stuk tekst een class krijgen, zoals <p class="...">. Een class is een naam uit het stylesheet met een vaste opmaak. Welke classes je website heeft, verschilt per website; vraag het ons als je er een wilt gebruiken.

Responsive: elk scherm

Je website past zich aan het scherm aan: computer, tablet of telefoon. Dat heet responsive webdesign (RWD). Op een smal scherm komen kolommen onder elkaar en worden afbeeldingen kleiner. Bezoekers hoeven niet in te zoomen of opzij te scrollen.

Daar help je zelf aan mee:

  • Geef afbeeldingen geen vaste breedte. Een afbeelding die je met de editor invoegt, past zich vanzelf aan.
  • Gebruik een tabel alleen voor gegevens, niet om tekst naast elkaar te zetten. Daarvoor is de Layout.
  • Zet in een layout de belangrijkste tekst in de eerste kolom: op een telefoon staat die bovenaan.
  • Bekijk een nieuwe pagina ook op je telefoon, of maak het venster van je browser smal.

Zie ook

  • Tekst opmaken in de editor
  • Een layout met kolommen maken
  • Goede webteksten en linkteksten schrijven

Gecontroleerd: november 2026