HomeKennisbankHTML leren – de basis
verkeersstromen in google analytics

HTML leren – de basis

Waarom zou ik HTML leren? Hoor ik je denken. Het antwoordt is simpel. Door de basis van HTML te leren hoef je niet meer voor elk klein websiteprobleempje naar de expert, maar kun je deze eenvoudig zelf oplossen. Dit scheelt weer tijd en geld! Maakt dit jou nieuwsgierig? Lees dan snel verder!

 Vrijblijvend advies? Klik hier

Wat is HTML?

HTML is de taal waarmee homepagina’s en andere webpagina’s gemaakt worden. HTML staat voor HyperTekst Markup Language. Het is geen programmeertaal zoals vaak gedacht wordt. Zoals de term als zegt is het een opmaak taal. Het vertelt je browser door middel van HTML tags hoe de pagina weergegeven moet worden op het scherm.

HyperText staat voor de technologie waarmee een link wordt gelegd naar bijvoorbeeld een ander document, een afbeelding of een geluidsopname.

Markup is het gebruik van code om de browser, een programma waarmee HTML-documenten bekeken kunnen worden, te vertellen hoe de inhoud van het document weergegeven moet worden en naar welke bestemming de hyperlinks moeten leiden.

HTML 5 afbeelding

HTML5

HTML5 is de meeste recente versie van HTML. Deze afgewerkte versie werd in oktober 2014 geïntroduceerd.

Hoe werkt HTML5?

Elk html-bestand begint met een zogenaamde doctype declaration. Deze is bedoeld voor browsers, zodat ze weten in welke html- versie de pagina is geschreven. De doctype declaration voor pagina’s geschreven in HTML5 ziet er zo uit:

 

<!DOCTYPE html>

 

Direct onder de doctype declaration komt de openingstag van HTML. Een tag is een soort label waarmee je de verschillende onderdelen of elementen van een webpagina kan onderscheiden. Alle onderdelen van een webpagina zijn gelabeld met zo’n tag. Een openingstag kan bijvoorbeeld zijn <html> en een sluitingstag </html>. Het enige verschil is de forward-slash. De meeste onderdelen hebben een openings- en een sluittag.

De html-openingstag is dus, na de doctype declaration de eerste tag die je tegenkomt op een webpagina. De bijbehorende sluittag staat helemaal onderaan. Dat is altijd de laatste tag van een webpagina. Binnen de html-openings- en -sluittag komen alle andere onderdelen van je pagina te staan.

Aan de html begin-tag kun je nog wat extra informatie toevoegen als dat nodig is. Omdat je waarschijnlijk in het Nederlands gaat schrijven, kan de code lang=”nl” toegevoegd worden aan de html-openingstag.

<html lang=”nl”>

De Head

Alle webpagina’s hebben een head en een body. De head komt altijd vóór de body te staan. Tussen de beide head-tags staat informatie die voor de zoekmachines en de browsers is bestemd. Voor het grootste gedeelte is deze informatie niet zichtbaar voor je bezoekers. In de head staat vaak de titel en een aantal meta-tags, zoals voor de gebruikte karakterset. Verder staat er meestal een link naar een stylesheet (met daarin regels voor de lay-out van je pagina), en soms nog een of meer links naar javascript-bestanden.

De Body

Na de head komt de body. Tussen de twee body-tags staat het gedeelte van je webpagina dat je bezoekers te zien krijgen. HTML5 heeft speciale tags voor de verschillende onderdelen van een website, zoals die van de header (de ruimte bovenaan een webpagina, met daarin vaak de naam van het bedrijf en een logo), de footer (de ruimte onderaan een website, waarin meestal een copyright-regel staat en een paar links die niet in het hoofdmenu thuishoren) en nav(navigation: het menu).

Hieronder staat de voorbeeldcode voor een webpagina met een header, nav (navigatiebalk of menu), een article (tekstvak), een aside (extra vak) en een footer. Het article en de aside zijn gegroepeerd in een div (division) met de naam artaside en de navigatiebalk is samengevoegd met de artaside in een div met de naam nav-aa.

 

<header></header>

<div class=”nav-aa”>

<nav></nav>

<div class=”artaside”>

<article></article>

<aside></aside>

</div>

</div>

<footer></footer>

Omdat er meerdere div’s zijn, heeft elke div zijn eigen ‘class’ gekregen, dit is om ze later van elkaar te kunnen onderscheiden. Want elk onderdeel moet straks natuurlijk zijn eigen lay-out krijgen. Met behulp van een ‘class’ kunnen ze later gemakkelijk geïdentificeerd worden.

Binnen de verschillende elementen die je nu hebt, kun je allerlei andere onderdelen neerzetten. Koppen of subkoppen bijvoorbeeld (<h1></h1>, <h2></h2>, (de h staat voor heading,)), alinea’s (die komen tussen de tags <p> en </p>), afbeeldingen (<img> – een image is een van de weinige elementen zonder sluittag!), tabellen (<table></table>), formulieren (<form></form>), en audio- of videofragmenten.

HTML5 en CSS3

Terwijl HTML5 de structuur weergeeft, bepaald CSS3 de opmaak van een website. CSS staat voor Cascading Style Sheets. In deze sheets geef je aan hoe je HTML-tags weergeven mogen worden. Zo kan je met CSS3 makkelijk je HTML5 tags bewerken, door bijvoorbeeld de grootte en kleur van teksten te veranderen of door de plaats van elementen op de website te veranderen.

HTML en SEO

Zoals ik eerder al vermelde kan het veel tijd schelen als je zelf je eigen website kan aanpassen en optimaliseren. Zo kun je ook je eigen SEO optimaliseren. Het maken van kleine aanpassingen in bijvoorbeeld de title tag of andere meta-tags kunnen jouw SEO-ranking al beter maken. Veel voordelen dus!

Wil je meer willen weten over HTML? kijk dan op handleidinghtml.nl, of neem geheel vrijblijvend contact op met een van onze specialisten. Zij helpen je graag!

Vrijblijvend adviesgesprek

Laat hier je gegevens achter en er wordt binnen één uur contact met je opgenomen.