Websites maken voor beginners: HTML

Websites maken voor beginners: HTML

Vrijwel alle websites zijn grotendeels in HTML geschreven. Maar wat is HTML precies en hoe kun je er een website mee maken? In dit artikel zal de basis van HTML worden uitgelegd en kun je zelf een simpele website maken. Er is totaal geen voorkennis vereist en je hoeft ook geen speciale programma's te gebruiken om een website te kunnen maken met HTML.

Inhoud


Wat is HTML?

HTML staat voor Hyper Text Markup Language. Het is geen programmeertaal, maar een zogenaamde opmaaktaal. HTML bestaat uit platte tekst waarin met markeringstekens is aangegeven hoe de tekst moet worden geïnterpreteerd, bijvoorbeeld of een woord/zin dik gedrukt of schuin moet worden weergegeven. Zo'n markering heet een tag en is te herkennen aan het feit dat tags altijd tussen deze twee tekentjes staan: <tag> (het woord "tag" kan van alles zijn, en bepaald wat voor tag het is).

Hoe maak je een HTML bestand?

Zoals eerder al is vermeld, zijn er geen speciale progamma's nodig om een HTML bestand te maken. Een veel gebruikt programma voor het schrijven van HTML is simpelweg Kladblok (of Notepad in het Engels), dit staat in Windows onder accesoires. Open Kladblok om te beginnen met het schrijven van je eerste HTML bestand.

Je eerste webpagina
Als je Kladblok hebt geopend kun je de volgende regels intypen:

<html>
<body>

<i>Mijn eerste webpagina</i>
<br/>
<b>Mijn eerste webpagina</b>

</body>
</html>

Dit geeft het volgende resultaat:

Mijn eerste webpagina
Mijn eerste webpagina

Het opslaan van de webpagina
Door deze tekst (de tekst uit het bovenste blok) in Kladblok te typen, en vervolgens op te slaan als naam.html (je kunt de naam natuurlijk zelf kiezen) heb je je eerste webpagina gemaakt. Je kunt dit doen door te gaan naar: "bestand" - "opslaan als..." en daar bij het bestandstype "alle bestanden" te kiezen. Je kunt het bestand dan opslaan als naam.html. Als je dit niet doet zal Kladblok namelijk automatisch een tekstbestand maken, en heet je bestand naam.html.txt.

Het openen van de webpagina
Als je dit bestandje vervolgens opend met een webbrowser (het programma waarmee je op internet gaat, voor de meeste mensen is dit Internet Explorer) zie je de webpagina zoals is weergegeven in het onderste blok. Je kunt dit doen door met de rechter muisknop op het bestand te klikken, naar "Openen met..." te gaan en "Internet Explorer" (of een andere browser) te kiezen.

De structuur van HTML

Een HTML bestand bestaat uit allemaal tags. Er zijn twee typen tags; een begin- en een eindtag. Een tag staat altijd tussen een "<" en een ">" , en heeft een bepaalde naam: <naam> is dus een tag. Bovendien is <naam> een begintag. Bij elke begintag hoort ook een eindtag, deze ziet er als volgt uit: </naam>. De "/" geeft aan dat het een eindtag is.

Een tag zegt iets over de tekst die tussen de begin- en de eindtag staat. Een voorbeeld is de <b> tag. Deze wordt gebruikt om tekst dikgedrukt te maken:

Deze tekst is <b>dikgedrukt</b>

Ziet eruit als:

Deze tekst is dikgedrukt

Alleen het woord "dikgedrukt" wordt dikgedrukt weergegeven, omdat deze tussen de <b> en de </b> tags staat.

Opbouw van een webpagina

Laten we nog eens naar het eerste voorbeeld kijken.

<html>
<body>

<i>Mijn eerste webpagina</i>
<br/>
<b>Mijn eerste webpagina</b>

</body>
</html>

Er zijn hier verschillende tags te zien (de woorden die tussen een "<" en een ">" staan):

De <html> tag
Als eerste is er een <html> tag, deze geeft het begin aan van de webpagina. De </html> tag geeft het eind aan van de webpagina en hoort altijd onderaan het HTML bestand.

De <body> tag
De <body> tag geeft het begin aan van het zichtbare gedeelte van de website, deze wordt afgesloten met een </body> tag. Eigenlijk hoort bijna alles tussen de <body> tags. Er bestaat namelijk ook een <head> tag, waar je bijvoorbeeld de titel van je webpagina kunt neerzetten, maar hier gaan we verder niet op in.

De <i> tag
Alles wat tussen een <i> en een </i> tag staat wordt schuingedrukt weergegeven. Je kunt verschillende tags ook combineren:
Deze tekst is <i>schuin</i>
<br/>
<b>Deze tekst is dikgedrukt</b>
<br/>
<b>Deze dikgedrukte tekst is <i>schuin</i></b>

Deze tekst is schuin
Deze tekst is dikgedrukt
Deze dikgedrukte tekst is schuin

De <br/> tag
Tot slot is er nog de <br/> tag. Dit is een losse tag, zonder begin of eind. Een <br/> tag zorgt dat de eropvolgdende tekst op de volgende regel terecht komt. De volgende HTML code:

1
2
3

komt eruit te zien als:

123

maar deze code:

1
<br/>
2
<br/>
3

komt eruit te zien als:

1
2
3

Goed worden in HTML

Als het goed is begrijp je nu ongeveer de basis van HTML. Als je je in de toekomst meer wilt verdiepen in HTML dan is het aan te raden om simpelweg veel te experimenteren. HTML is een taal die in principe vrij makkelijk te leren is, maar het duurt even voordat men gevoel krijgt voor de logica ervan.

Zodra je eenmaal bekend bent met de structuur en logica van HTML, ben je al enorm op weg. Het is dan alleen nog een kwestie van nieuwe tags leren kennen, en voor je het weet heb je een proffessionele website gemaakt.
© 2010 - 2012 Machans, gepubliceerd in Tutorials (Pc en Internet) op . Het auteursrecht van dit artikel ligt bij de infoteur. Zonder toestemming van Machans is vermenigvuldiging van dit artikel verboden. Meer informatie…

Gerelateerde artikelen
Een Favicon voor je website Favicon is het icoontje dat naast de naam van de website staat als je deze in een bladwijzer…
Websites blokkeren in Internet Explorer Tijdens het surfen op internet kun je websites tegenkomen die je niet wilt bezoek…
HTML de basisbeginselen Voor het maken van een website heb je enige kennis van HTML nodig. HTML is de basis van een websi…
Tutorials: Wat houdt het in? Een artikel waar het begrip "tutorial" in wordt uitglegd. Ook wat de beste manier is om de j…
Gratis websites bouwen Iedereen kan websites bouwen met Nvu, een zogenaamde webbuilder. Het is een nederlandstalig open-s…

Reageer op het artikel "Websites maken voor beginners: HTML"

Er zijn nog geen reacties geplaatst op dit artikel.
Bronnen en referenties
  • http://www.w3schools.com/html/html_intro.asp
Infoteur: Machans
Rubriek: Pc en Internet / Tutorials
Bronnen en referenties: 1
Schrijf mee!