Inleiding – Stap voor Stap HTML Cursus

Met deze Stap voor Stap HTML Cursus ga ik je op makkelijke wijze leren een webpagina te maken. Hiervoor beginnen we met wat basiskennis.

Laatste update: 1 maart 2019

Wat doet HTML? Waar staat HTML voor?

De afkorting HTML staat voor Hyper Text Markup Language. Met HTML bepaal je de locaties van foto’s en teksten (de oude manier van HTML gebruiken) of de locaties van pagina elementen (de huidige manier van HTML gebruik in combinatie met CSS). De codes, die HTM vormen, zijn allemaal afkortingen afgeleid vanuit het Engels.

Oh, en laat ik je meteen behoeden voor een beginnersfout -> HTML is geen programmeertaal. Noem het ook niet zo onder programmeurs. Scheelt je wat boze blikken! Officieel is het een markup language (layout taal).

Hoe herken je HTML?

HTML codes worden ‘tags’ of ‘elements’ genoemd. Je herkent ze aan de kleiner- en groter dan tekens. Surf maar naar een willekeurige website. Klik met de rechtermuisknop op de site en ga naar “Bron weergeven”. Alles dat <op deze manier> staat geschreven is HTML.

HTML tags kunnen zowel in hoofdletters als in kleine letters geschreven worden.

HTM of HTML?

OK, dit is echt een throwback, want de extensie .htm wordt eigenlijk niet meer gebruikt. Heel vroeger was dat wel anders, omdat men met Windows 3.x alleen dit bestandstype kon lezen. Nu schrijven we dus vooral .html.

Zijn er verschillende versies HTML?

Ja, over de jaren heen is HTML flink doorontwikkeld. Er zijn verschillende versies en verschillende variaties. Deze cursus leert je de basis voor al die talen. De meeste functies in deze cursus hebben zich door de jaren heen bewezen. Hier zul je nog steeds baat bij hebben als je verder gaat met webdesign, webdevelopment en zelfs content creatie.

Er is echter veel heel veranderd met de komst van HTML5, daar heb ik dan ook een aparte cursus voor geschreven (nu alleen nog maar Engelstalig beschikbaar). Echter zou ik die ook pas volgen nadat je deze gehad hebt. Ik ga er nl. vanuit dat je toch wat basiskennis hebt van HTML.

Heb je software nodig om HTML te programmeren?

Er zijn veel programma’s die je kunt gebruiken en die het je echt makkelijker maken bij het werken met HTML. Ze kleuren de HTML codes meteen voor je of sluiten tags automatisch, zodat het je tijd bespaart (en je het niet kunt vergeten). Daarnaast heb je veel software die je de mogelijkheid geeft om in een omgeving als een tekstverwerker een HTML document te maken. Hierin type je de tekst, plaatst een foto en, voila, je kan hem opslaan als .html en publiceren op het Internet. Geen moeilijke codes, geen denkwerk, maar wel een website! Dit kan ook online, in webbased versies, aangeboden worden. Denk maar aan providers als Wix. Zoiets heet een WYSIWYG-editor. Het staat voor What You See Is What You Get. Als beginnende webdesigner zul je automatisch kritisch zijn op de HTML die dit voortbrengt, maar het helpt veel mensen om een website te hebben waar ze blij mee zijn.

Maar, al die dingen heb je in principe niet nodig om HTML pagina’s te maken. Je kunt namelijk gewoon in Windows Kladblok aan de slag:
– Ga naar Start
– Bureau accessoires
– Kladblok

Hoe publiceer je HTML bestanden?

Uhm, je loopt nu wel een paar stappen op de zaken vooruit. We moeten eerst nog bestanden aanmaken, maar goed, je gebruikt FTP programma’s voor het publiceren (Leer hier meer over). Veel hostingbedrijven (zoals ik) bieden ook online file managers, waarmee je bestanden kunt uploaden en zelfs online, via de browser, kunt bewerken.

Structuur aanbrengen in een website

Websites kunnen best groot worden. Er komen al snel foto’s, teksten en bestanden bij kijken. Een goede structuur in de website gaat je helpen als webdesigner / ontwikkelaar. Daarmee bedoel ik niet persé de navigatiestructuur (front end) voor de bezoeker van je site, maar de directory structuur op de server (back end).

Een website bestaat uit verschillende dingen:

    1. Content (tekst, media (foto’s en video))
    2. Design
    3. Functionaliteit

Je maakt voor alles aparte directories aan. Dus je hebt een subdirectory voor images, videos, css, php enz.

Ga door naar de volgende stap

Bookmark the permalink.

Comments are closed.