Beginnen met HTML

HTML is de programmeertaal (of opmaaktaal) voor het maken van websites en word bij zo goed als elke website gebruikt. Zelfs deze website maakt er gebruik van.

HTML is eenvoudig om te leren en te gebruiken, maar is tegelijkertijd ook heel uitgebreid. Dus waarom neem je neit eventjes de tijd om het te leren.

Wat is HTML

HTML is een eenvoudige opmaaktaal die meestal gebruikt wordt voor het weergeven van website's. HTML bestaat al sinds 1991. Maar natuurlijk ga ik je niet lastig vallen met historische gegevens van HTML of andere onnutige feiten. Het gaat erom om hoe je het gebruikt :)

De basis van HTML

HTML is eenvoudig gemaakt, om te beginnen laat ik een voorbeeld zien van hoe een pagina opgebouwd is...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paginatitel</title>
</head>
<body>
bodytekst hier
</body>
</html>

Als je wilt zien wat deze code al doet dan raad ik je aan om deze over te typen of te kopieeëren in kladblok of in een andere editor. Doe dit niet in een tekstverwerker zoals Microsoft Office Word of Openoffice.org writer. Ik geburik meestal notepad++.

Eventjes een uitleg over wat alles nu eigenlijk is.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Deze code is om aan de webbrowser (bijvoorbeeld Google Chrome of Mozilla Firefox) te zeggen met welke versie van HTML er gebruikt wordt. In dit voorbeeld is het XHTML1 Transitional. Deze is minder strict dan de strict-versie dus ideaal voor beginners en zelfs voor gevorderden.

Deze code zegt dat we html gaan gebruiken: alles tussen dit stukje tot </html> zegt dit is HTML.

<head>

Hetgene dat tussen deze tekst en zijn sluitende tag (</head> staat is bedoeld voor informatie over de pagina. Niet de pagina zelf (meestal niet).

Deze code zorgt ervoor dat utf-8 gebruikt wordt als tekenset. utf-8 en ISO-8859-1 worden regelmatig gebruikt bij website's.

<title>Paginatitel</title>

De titel-gegevens (of titel-tag) wordt gebruikt tussen de HEAD om de titel van de pagina te melden, deze is zichtbaar in de titelbalk van de webbrowser.

</head>

Als je een beetje gevolgd hebt weet je wat deze code doet. Hij sluit het HEAD-gedeelte af.

<body>

Dit stukje zegt dat we de BODY gaan starten. Hetgene wat tussen de body-tags vermeld wordt is zichtbaar op het scherm. In dit voorbeeld is bodytekst hier zichtbaar op het scherm. De paginainhoud moeten tussen deze en de volgende tag staan!

</body>

Sluit het BODY-gedeelte.

</html>

Sluit de HTML. Na deze tag mag er niets meer gezgd worden over de pagina om een juist opgebouwde pagina te krijgen.

Pagina opmaken

In deze tutorial ga ik je niet laten zien hoe je een site maakt zoals mijn site, maar als je de basis kunt over kleuren en nog meer tekstopmaak kan je al een leuke website maken.

BR-tag

Als je evntjes met HTML had gespeeld voor je deze tutorial had gelezen, dan had je gemerkt dan een doodgewone ENTER helemaal niets uitvoert.
Voor deze reden heeft men de uitgevonden.
Voorbeeld:
Hallo
mijn
naam
is
Bjarno.

Hallo 
mijn 
naam 
is 
Bjarno.

B-tag

De B-tag is bedoeld voor het vet zetten van tekst.
Voorbeeld:

De B-tag is bedoeld voor het vet zetten van de tekst.

De I-tag

De I-tag is bedoeld voor het cursief of schuin zetten van tekst.
Voorbeeld:

De I-tag is bedoeld voor het cursief of schuin zetten van de tekst.

De U-tag

De U-tag is bedoeld voor het onderlijnen van tekst.
Voorbeeld:

De U-tag is bedoeld voor het onderlijnen van tekst.

Hyperlink

Links (of hyperlinks) zijn gedeeltes van de pagina waarop je kunt op klikken voor naar een andere pagina te gaan.
Voorbeeld:

Ga naar mijn homepagina
Ga naar google in een nieuw tabblad of venster

<a href="http://www.bjarno.be/">Ga naar mijn homepagina</a> 
<a href="http://www.google.com/" target="_blank">Ga naar google in een nieuw tabblad of venster</a>

De target vermelden (men noemt dit een attribuut) en deze naar _blank zetten zorgt ervoor dat links naar een nieuw venster of tabblad geleid worden.

Afbeeldingen

Afbeeldingen zijn grafische gegevens in de vorm van png, jpg, gif, bmp,...
Voorbeeld:

Het is belangrijk om bij afbeeldingen ook een alt-attribuut mee te geven. Dit is ten eerste verplicht (gelukkig mag je hem leeg hebben) en ten tweede is het handig voor als de afbeelding niet geladen kan worden.

Reactie's op Beginnen met HTML

nlck1597		25/08/2010 21:30.36
ziet er goed voor beginners, inmiddels doe ik nu ook aan html (een jaartje) ik vind het niet echt een intressante language, maar wel handig om sites te maken (:
thoot-je		28/09/2010 21:02.40
super goeie site en ook nog eens mooie tut. ik leer nu een beetje over html erg bedankt

Naam*
E-mail
Website:
Reactie*	Maximum 4000 tekens
Captcha*
	* = verplicht

Bjarno.be