Coderen zonder dat het complex wordt: begrijp HTML en CSS in 15 minuutjes

We zijn helemaal gek op WordPress en coderen zelf zo weinig mogelijk, maar soms is het wel handig. Of in elk geval: het is handig om te weten wat het is en waarvoor je het kunt gebruiken. Zo kun je veel sneller inzien of iets gemakkelijk in te stellen is via het thema of dat je custom codes aan moet maken.

Daarom geven we je vandaag een crash course HTML en CSS als programmeertaal, zonder dat het super complex of nerdy wordt. Gewoon even de basics zodat je weet hoe het ongeveer werkt. En even een dikke shout-out naar onze awesome VA Mirjam, die alle input hiervoor heeft gegeven! All right, let’s dive right in.

HTML: voor het bouwen van webpagina’s

HTML staat voor Hypertext Markup Language. Het is een programmeertaal voor het ontwerpen van websites. Wat belangrijker is om te weten is de functie. HTML wordt in eerste instantie gebruikt voor het bouwen van webpagina’s, daarnaast ook voor de algemene layout. Het is in principe de basis voor de grafische opmaak. Het zorgt voor alle inhoud die je te zien krijgt, zoals teksten, links, afbeeldingen, etc. HTML code begint altijd met een <element > en eindigt ook weer met een </element> Waarbij het “element” kan verschillen, zoals bijvoorbeeld body, h1, h2, h3, p, li, ol, ul.

Waarom weten wat HTML is en hoe het werkt nuttig is

“Ja leuk maar hoef ik helemaal niet te weten”, denk je misschien. Inderdaad, er zijn ontzettend veel kant-en-klare webbuilders waarmee je prachtige websites kunt bouwen. Denk aan WordPress waarin wij bouwen of misschien Webflow of Wix. Maar toch is het handig om te weten wat HTML is. Waarom? Voor het geval je wijzigingen wilt aanbrengen op je website, die niet mogelijk zijn met behulp van de webbuilder, maar ook voor iets simpels als de opbouw van je teksten (koppen of paragrafen, h1/h2 of p respectievelijk).

Voorbeeld van HTML code

We gaan niet alles stap voor stap uitleggen. Dan wordt het te complex. Er zijn wel een aantal dingen die opvallen en aandachtspuntjes die we graag willen toelichten.

  • Je ziet dat het op bepaalde stukjes inspringt, bijvoorbeeld bij <ol> en dan <li> en <ol> vanaf rij 20. Dit betekent dat het ‘eronder valt’. In dit geval zijn het onderdelen van een lijstje met bullet points, met daaronder nog sub-bullet points. Eigenlijk kan je het visueel zien als elementjes in elementjes. In dit geval is het dus een lijst in een lijst, maar het kan ook een titel op een foto zijn of een afbeelding in een overlappend vlak waar bijvoorbeeld ook stukjes tekst staan
  • Het document begint eigenlijk altijd met wat standaard stukjes zoals <html lang=”en”> en dan <head> en <body> en meestal nog <footer> helemaal op het einde. <head> is het onzichtbare stukje waar je bijvoorbeeld je Google Analytics code of Facebook Pixel plakt; <body> is het content stukje; en <footer> is de footer waar je bijvoorbeeld je social media iconen en juridische voorwaarden hebt staan.
  • Elke code die je begint, moet je ook afsluiten – en dan ook in de juiste volgorde. Zo zie je bijvoorbeeld dat er op rij 10 een kop begint (namelijk <h1>) en dat daarbinnen een link valt (<a href=”…..>). Maar de link wordt eerst weer afgesloten, voordat de kop wordt afgesloten. Dat heeft weer te maken met wat we net zeiden over elementjes in elementjes.
  • <p> staat voor paragraaf. Dit is veruit het meeste gebruikt voor tekst. Soms wordt er ook <span> gebruikt maar <p> is gebruikelijker.

HTML fun facts

  • Belangrijk om te weten is dat de code precies moet kloppen. 1 typfout en je hele design kan overhoop liggen. Zo kan zelfs het missen van een ; voor een hoop frustratie volgen. Maar dus ook vrij simpel opgelost.
  • Je kunt met je browser altijd de code van een website bekijken. Zo kan je de HTML code zien (en de CSS). Super interessant om te kijken hoe mensen hun website hebben gebouwd!
  • Als een website met WordPress is gebouwd, kun je bij de Sources ook het thema zien wat is gebruikt. Dit staat bij wp-content > wp-themes. Super handig!
  • Vaak kun je bij de HTML ook zien welke plug-ins zijn gebruikt, omdat je dat uit de klasses op kunt maken. Denk aan de naam van een slider of een foto plug-in.
  • Je kunt met HTML ook ‘notities’ toevoegen. Dit wordt dan niet getoond op de website, maar staat wel in de code. Dit kan bijvoorbeeld handig zijn als je een element wel alvast in je code wilt maar nog niet getoond wil hebben, zoals bij een nieuw teamlid of een aankondiging die ‘geschedulet’ staat. Onder developers wordt het gebruikt om met elkaar te communiceren zonder dat de gebruiker er last van heeft, bijvoorbeeld om te vertellen wanneer een bepaalde sectie begint of dat een stukje code niet aangepast mag worden.

CSS: voor het designen van de webpagina’s

CSS, een afkorting voor Cascading Style Sheet (dat mag je vergeten) is ook een programmeertaal, maar dan bedoeld voor het opmaken van de HTML. Waar je met HTML als het ware een naakte site ontwerpt, zorg je er met CSS voor dat alles er mooi uit komt te zien. Je kunt met 1 CSS bestand meteen het gehele design voor je website vastleggen (style sheet). Maar door gebruik te maken van Classes en ID’s kan je op bepaalde pagina’s specifieke elementen anders vormgeven. Belangrijk om te weten dat een ID uniek is en een Class voor meerdere elementen gebruikt kan worden.

Waarom zou je aandacht besteden aan CSS?

Als je de code voor de vormgeving van een website in een CSS style sheet onderbrengt, maakt dit de HTML code van de site beter leesbaar en begrijpbaar – niet alleen voor de gebruiker maar ook voor zoekmachines. Zoekmachines waarderen namelijk ook overzichtelijke codes en dit leidt tot betere resultaten in zoekmachines (onderdeel van SEO).

Opbouw van een CSS bestand

  • HTML elementen zoals body, h1, h2, a enz kan je gewoon zo typen.
  • CSS Classes begin je altijd met een . (een punt) Deze klasses kan je dus meerdere keren gebruiken.
  • CSS ID’s begin je altijd met een # maar deze kan je dus niet meerdere keren gebruiken.

Voorbeeld:

Wat staat hier nou precies?

  • Kop 1 is 25 pixels groot, zwart, super dikgedrukt en is onderlijnd (heeft een streepje onder het tekstje)
  • H2 is 40 pixels groot, roze en gecentreerd
  • Een banner met de klassenaam “banner” heeft een padding van 25 pixels en staat gecentreerd

Welke andere aandachtspuntjes zijn er?

  • Met CSS probeer je herhaling te voorkomen. Zijn bijvoorbeeld alle koppen roze? Dan vul je dat één keer in voor h1, h2, h3 etc. en ga je daar niet allemaal losse tekstjes voor aanmaken. Less is more! Zo kan je ook makkelijker wijzigingen maken
  • De mogelijkheden zijn echt eindeloos. Zo zie je in het screenshot hierboven dat headings geel zijn, maar je kan ook een HEX code invullen of zelfs een kleurencode met transparantie (bijvoorbeeld voor een vlakje wat dan half doorschijnend wit is).
  • Je moet alle stukjes ook echt afsluiten, dus alle ; en { en } zijn echt noodzakelijk! Anders klopt je hele code niet meer
  • Je kunt ook weer comments toevoegen, namelijk met /* en */
  • Je verzint de variabelen niet zelf, hier zijn regels voor. Je kunt dus niet zomaar “text-align: centered” typen want er is besloten dat het “center” is als je de tekst gecentreerd wilt. Gelukkig hebben codeerapps mogelijkheden om deze suggesties te geven, zodat je niet alles uit je hoofd hoeft te leren

Voila, dat was ‘m dan, de HTML & CSS crash course. Meer leren? Over HTML en CSS is ontzettend veel te vinden online en met een beetje Googlen kom je al een heel eind. Maar hier alvast een aantal handige links:

Laat ons vooral weten als dit jou heeft geholpen!

Ninarosa
Ninarosa
Founder, marketeer, copywriter // Met specialisaties in tekstschrijven, ondernemerschap, design, front-end development, marketing en branding weet Ninarosa de juiste basis te leggen voor bedrijven en websites.

Share this

Laat een reactie achter

rinske en ninarosa

Aangenaam!

Ben jij een wereldverbeteraar en heb jij copywriting, design, marketing en/of een website nodig? Dan ben je bij ons aan het juiste adres. Wij focussenons op bijvoorbeeld sustainablebedrijven, coaches of bedrijven in de richting van educatie.

Categorieën