HTML leren: Hoe doe je dat en wat heb je eraan?

Je zal de term HTML vast weleens tegen zijn gekomen. Velen denken dat het een programmeertaal is, maar dit is niet het geval. HTML programmeren is dus niet correct verwoord, maar dit wordt wel vaak gezegd. HTML leren is eigenlijk bijna noodzakelijk om een website te maken. In dit artikel gaat duidelijker worden wat HTML precies is. Ook zal je merken aan de hand van de voorbeelden dat het heel eenvoudig is om met HTML je eigen website te maken. HTML leren is simpel. Met alleen HTML zal je website er wel kaal uitzien, maar het is een begin!

Ja, ik wil een professionele cursus webdesign + een gratis tablet!

Wat is HTML?

HTML staat voor “Hyper Text Markup Language”. HTML is een opmaak taal. Met opmaak taal kan je al een beetje raden wat ermee bedoeld wordt. HTML beschrijft de opmaak/structuur van een webpagina. Een mooi voorbeeld is deze website. Op de homepage van ProgrammeerPlaats zie je al duidelijk de verschillende elementen binnen de pagina. Deze elementen zijn opgezet met HTML.

Laten we eerst even gaan kijken naar een eenvoudig voorbeeld van een HTML document, daarna gaan we de homepage van ProgrammeerPlaats analyseren.

<!DOCTYPE html>
<html>

<head>
    <title>Titel van de pagina</title>
</head>

<body>
    <h1>Hoofdstuk 1</h1>
    <p>Paragraaf 1.</p>
    <p>Paragraaf 2.</p>
  
    <h1>Hoofdstuk 2</h1>
    <p>Paragraaf 1.</p>
    <p>Paragraaf 2.</p>
</body>

</html>

Hierboven zie je een eenvoudig HTML document. Zoals je misschien al kan zien aan het HTML document, bestaat de webpagina, die opgebouwd is uit dit HTML document, uit twee hoofdstukken en in totaal vier paragrafen. Laten we gaan kijken wat alle elementen betekenen:

<!DOCTYPE html> = Betekent dat het een HTML5 document is.

<html> = Is het kernelement van het document.

<head>= Bevat meta informatie over het document, zoals een beschrijving, de auteur, de titel enz.

<title> = Bevat de titel van het document.

<body> = Hierin zit de zichtbare content op de website.

<h1> = Bevat een grote titel.

<p> = Bevat een paragraaf.

De bovenstaande elementen worden ook wel HTML tags genoemd. Tijdens het HTML leren zal je steeds meer HTML tags gaan kennen. De meeste HTML tags bestaan uit twee gedeeltes, namelijk een opening en sluiting gedeelte. Bijvoorbeeld <p> is het opening gedeelte van een paragraaf tag en </p> is het sluiting gedeelte van een paragraaf tag. Hier is een lijstje van alle HTML tags.

Homepage ProgrammeerPlaats

In het bovenstaande voorbeeld zie je een gedeelte van de homepage van ProgrammeerPlaats. Voorbeelden van elementen in de homepage die we al hebben besproken zijn pijl 1 en pijl 2. Pijl 1 is een <h1> tag en pijl 2 is een <p> tag in het HTML document van deze webpagina.

Je kan zelf ook op een handige manier zien welke elementen een website pagina heeft, oftewel uit welke HTML tags een website pagina bestaat. Je zal daardoor HTML beter leren begrijpen. Dit kan je als volgt doen:

  • Klik met je rechtermuisknop op de desbetreffende pagina of gebruik de shortcut Ctrl + Shift + I.
  • Als je de shortcut gebruikt, kom je als het goed is gelijk bij de ‘Elements’ terecht. Zo niet, dan klik je op ‘Elements’. Als je rechtermuisknop gebruikt, dan verschijnt er een venstertje en klik je onderaan dat venstertje op ‘Inspecteren’. Daarna kan je ook de ‘Elements zien’.
  • Klik daarna op dit Select element icoontje icoontje in het venster waarin ook de ‘Elements’ staan.
  • Nu kan je met je muis over bepaalde elementen op de website bewegen en zie je welke HTML tags daarbij horen en hoe het HTML document van de website pagina is opgebouwd.

Bekijk ook de video:

HTML attributen

Je weet nu wat HTML tags zijn, maar HTML tags kunnen ook HTML attributen hebben. HTML attributen kunnen extra informatie bevatten over een element. De HTML attributen moeten altijd staan in het opening gedeelte van een HTML tag. Een mooi voorbeeld zie je hieronder:

<img src="Boot.jpg">

Dit is gelijk een speciaal geval. De <img> tag heeft namelijk geen sluiting gedeelte nodig. Deze HTML tag kan namelijk geen content bevatten en daarom is voor het gemak alleen gekozen voor een opening gedeelte. Dit ziet er grammaticaal ook netter uit. src is het attribuut en haalt een foto op, in dit geval een foto van een boot. Hier is een lijst te zien van alle HTML attributen.

Ja, ik wil een professionele cursus webdesign + een gratis tablet!

Wat is HTML5?

We hebben het tot nu toe alleen maar over HTML gehad, maar heel veel websites tegenwoordig zijn opgemaakt met HTML5. HTML heeft verschillende versies en momenteel is HTML5 de nieuwste versie. HTML5 heeft enkele foutjes verbeterd van vorige versies. Enkele veranderingen van HTML5 tegenover HTML4:

  • Heeft nieuwe elementen ontwikkeld, zoals <header>, <nav>en <article>.
  • Verbeteringen aangebracht aan Document Object Model, waardoor webpagina’s sneller laden.
  • Webapplicaties zijn ook offline te bereiken.

Waarom is HTML eigenlijk ontstaan?

Voor de liefhebbers is het misschien interessant om nog even de geschiedenis in te duiken van HTML. Als je geen interesse hebt, kan je dit stukje gerust overslaan.

HTML is in 1991 ontwikkeld door Tim-Berners Lee. Hij ontwikkelde HTML, omdat hij wetenschappelijke documenten beter bereikbaar wilde maken. De eerste webbrowser, WorldWideWeb, is ook door Tim-Berners-Lee ontwikkeld. Deze webbrowser kon HTML begrijpen en omzetten in een visuele webpagina. Nu is dat een vereiste voor elke webbrowser.

Er was een standaard nodig waardoor iedereen op een gemakkelijke manier documenten op het web met elkaar kon delen. Daarom is HTML makkelijk om te leren, omdat het eenvoudig is opgezet. HTML is uitgegroeid tot een standaard opmaak taal voor websites.

HTML programmeren: Wat kan je ermee?

Oeps.. Er staat HTML programmeren, maar HTML is toch geen programmeertaal? Hopelijk zag je dit en had je door dat het niet klopte ;). De meeste mensen denken dat je met HTML alleen (statische) websites kan maken, maar tegenwoordig kan je meer doen met HTML! Dit zijn ook mogelijkheden met HTML:

  • Met PhoneGap kan je eenvoudige apps maken met HTML. Handig is daarbij om ook CSS en JavaScript te gebruiken.
  • Tegenwoordig bestaan er verschillende libraries waarmee je met HTML games kan ontwikkelen. Deze games werken dan in verschillende browsers. Echter is het hierbij ook wel noodzakelijk om CSS en JavaScript erbij te gebruiken, anders wordt het een saaie statische game.

HTML zorgt voor de structuur. CSS zorgt voor de opmaak, zoals de achtergrondkleur of bijvoorbeeld het lettertype. JavaScript zorgt voor interactie, bijvoorbeeld als de gebruiker op een knop drukt dat het dan de datum kan zien.

HTML leren: Wat zijn de beste leermethodes?

HTML leren is niet moeilijk. Het beste is vooral om eenvoudig te beginnen met het opzetten van een website met behulp van een HTML document. Deze website kan je steeds verder uitbreiden. Hierdoor kom je er ook achter wat alle HTML tags en attributen betekenen. Door het voorbeeld hieronder te volgen kan je al een beginnetje maken.

Een goede leermethode is ook om de professionele cursus “Webdesign” van NHA te volgen. Later lees je daar meer over.

Voorbeeld van hoe je een website maakt met HTML5

We gaan een eenvoudige website maken. De website heeft één hoofdstuk, twee paragrafen en een afbeelding. In dit voorbeeld schrijf ik in twee paragrafen een klein stukje over ProgrammeerPlaats en het logo van ProgrammeerPlaats komt ook in de website te staan. Als je het leuk vindt, kan je ook je eigen teksten maken, in plaats van de teksten die ik maak.

Dit standaard HTML document gaan we gebruiken en verder aanvullen met onze eigen teksten en afbeeldingen:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body> 
</body>

</html>

Je kan “Kladblok” gebruiken of een code editor, zoals Notepad++. Notepad++ gebruik ik ook in de video onderaan dit artikel, waarin ik laat zien hoe je deze eenvoudige website kan maken. Je kan het bovenstaande letterlijk kopiëren en plakken en in je eigen bestand zetten. Het is ook wel handig om even een nieuwe map aan te maken. Hierin kan je het HTML bestand zetten en de afbeelding die je gaat gebruiken op je website. Het HTML document waarin ik kort wat schrijf over ProgrammeerPlaats en een afbeelding plaats, komt er als volgt uit te zien:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ProgrammeerPlaats website</title>
</head>

<body>
    <h1>Korte beschrijving over ProgrammeerPlaats</h1>
    <p>ProgrammeerPlaats is een leuke website waarop je kan leren programmeren.</p>
    <p>Er zijn educatieve artikelen en video's voor de liefhebbers.</p> 
  
    <img src="Logo ProgrammeerPlaats.png"> 
</body>

</html>

Als je wilt kan je dit letterlijk overnemen, of je kan zelf HTML tags en attributen plaatsen in het standaard HTML document, wat je al had gekopieerd en geplakt. Het is belangrijk om het bestand op te slaan als een HTML bestand. De afbeelding moet in dezelfde map staan als het HTML bestand, of je moet de src tag aanpassen. Sowieso moet je de naam van je eigen afbeelding in de src tag zetten, gevolgd door het bestandstype van de afbeelding. In mijn geval is dat “.png”.

Wanneer je klaar bent kan je het HTML bestand wat je gemaakt hebt openen in een browser. Als het goed is zie je dan de tekst die je hebt geschreven met de afbeelding erbij. Gaaf hè! Je eigen website maken!

Misschien is het niet helemaal gelukt en is de tekst onduidelijk voor je. Bekijk dan de onderstaande video waarin je alles goed mee kan volgen en het zelf kan toepassen:

Hoe nu verder?

HTML leren is eenvoudig en leuk, zoals je gezien hebt! Lees het artikel “CSS leren” om meer te weten te komen over CSS. Ook staat daar uitgelegd hoe je CSS toevoegt aan de website. Wil je echt nog meer leren over webdesign, dan is de professionele cursus “Webdesign” van NHA een echte aanrader! Je begint hier bij de basis en leert ontzettend veel. Het leuke is ook dat je zelf kan bepalen waar en wanneer je studeert. Zowel voor hobbyisten als professionals is de cursus uitermate geschikt. Na de cursus kan je een eigen website maken, anderen adviseren of misschien wel een eigen webbureau beginnen? Het is allemaal aan jou. Mis deze kans niet.

Als je vragen hebt kan je hieronder een bericht plaatsen.

Ja, ik wil een professionele cursus webdesign + een gratis tablet!

Beoordeel hier het artikel (Alleen voor leden)

1 vote, average: 5,00 out of 51 vote, average: 5,00 out of 51 vote, average: 5,00 out of 51 vote, average: 5,00 out of 51 vote, average: 5,00 out of 5 (1 votes, average: 5,00 out of 5)
You need to be a registered member to rate this.
Loading...

Plaats een reactie