Heb jij nog een computervraag?

Bartje · #1 (**permalink**) 21 mei 2009

Cursus HTML

HTML of volledig gezegd hypertext markup language is de structuur van iedere website. HTML beschrijft eigenlijk hoe je pagina er komt uit te zien. Dit doe je dus door op een juiste manier gebruik te maken van HTML en dit leg ik je in het kort even uit.

HTML Editor

Voor we gaan beginnen met de officiële taal te leren van het internet is het belangrijk over een goede editor te beschikken zodat we straks iedere code goed kunnen ingeven. Ik kies als editor Nvu omdat dit een gratis en Nederlandstalige webeditor is.

Beginselen HTML

HTML kent een logische structuur. Je begint dus ook met een logische volgorde. Ik toon je dit even aan via een voorbeeld:

<html>
<head>
</head>
<body>
</body>
</html>

HTML zet je tussen de haakjes om aan te tonen aan je browser dat het om een webpagina gaat. De haakjes waar een code instaat en die vaak later word afgesloten door een forward slash noemen we een tag.

De head tag wordt voornamelijk gebruikt voor een titel, deze is niet zichtbaar op je webpagina maar staat in de tabbalk van je browser. De head tag word ook nog gebruikt voor enkele andere zaken bijvoorbeeld voor de meta tags. Een meta tag is een kernwoord dat je aan je website meegeeft. Op deze manier maak je de webpagina gebruiksvriendelijker.

In de body tag zet je alles wat je op je webpagina wil zien. Hiervoor zijn er vrij veel tags inclusief attributen die we later in dit artikel grondig bovenhalen. Een attribuut is een extra deeltje dat je in een tag vermeld.

De title tag

Nu we de structuur van HTML kennen is het misschien belangrijk even kennis te maken met de title tag die je tussen de head tag zet. Deze title tag verklaar ik even aan de hand van een voorbeeld:

<html>
<head>
<title> Hier schrijf ik een titel </title>
</head>
<body>
</body>
</html>

Deze title tag staat tussen de head tag en zal dus niet weergegeven worden op je pagina zoals ik eerder al zei. Deze titel die ik net ingegeven heb zal je dus zien in het tabblad van de browser.

De anchor tag

De anchor of anker tag gebruiken we bij het leggen van een hyperlink op de webpagina en zetten we dus tussen de body tags. U gebruikt hiervoor <a> en </a>. Aan de begintag word een attribuut meegegeven namelijk href (hyperlink reference). Ik zal dit ook even verduidelijken aan de hand van een voorbeeld:

<html>
<head>
<title> Hyperlinks </title>
</head>
<body>
<a href=”www.pckapot.be”> verwijzing website </a>
<a href=”index.html”> verwijzing webpagina </a>
</body>
</html>

De paragraph tag

De paragraph tag gebruiken we bij het leggen van een alinea in een webpagina en plaats we tussen de body tag. U gebruikt hiervoor <p> en </p>. Ik zal de werking van deze tag even uitleggen aan de hand van een voorbeeld:

<html>
<head>
<title> Alinea </title>
</head>
<body>
<p> Wat is HTML </p>
<p> HTML of volledig gezegd hypertext markup language is de structuur van iedere website. HTML beschrijft eigenlijk hoe je pagina er komt uit te zien in je browser.</p>
</body>
</html>

De break tag

De break tag gebruiken we om lang zinnen korter te maken. De zin word dan letterlijk gebroken en spring automatisch naar de volgende regel. U gebruik hiervoor <br>. Ik beschrijf de werking van deze tag even met een voorbeeld:

<html>
<head>
<title> Break </title>
</head>
<body>
<p> Wat is HTML </p>
<p> HTML of volledig gezegd hypertext markup language is de structuur van iedere website. <br> HTML beschrijft eigenlijk hoe je pagina er komt uit te zien in je browser.</p>
</body>
</html>

De heading tag

De heading tag gebruiken we bij het maken van titelkoppen op de webpagina. Deze zijn er in 6 formaten namelijk kop 1, 2, 3, 4, 5 en 6. De eerste is de grootste en de laatste de kleinste. U gebruikt hiervoor <h1></h1> of eventuele andere koppen, dit hangt af van de grootte die u gewenst had.. Ik beschrijf de werking van de heading tag even met een voorbeeld:

<html>
<head>
<title> Koppen </title>
</head>
<body>
<h1> Dit is een kop 1 </h1>
<h2> Dit is een kop 2 </h2>
<h3> Dit is een kop 3 </h3>
<h4> Dit is een kop 4 </h4>
<h5> Dit is een kop 5 </h5>
<h6> Dit is een kop 6 </h6>
</body>
</html>

De align tag

De align tag gebruiken we om tekst op de webpagina uit te lijnen. Uitlijnen bepaalt hoe de tekst geplaatst wordt op de regel. U kan kiezen uit rechts, links, uitvullen of centreren. U gebruikt hiervoor <p align=”…”></p>. Ik beschrijf de werking van de align tag even met een voorbeeld:

<html>
<head>
<title> Uitlijnen </title>
</head>
<body>
<p align=”left”> Deze tekst wordt links uitgelijnd </p>
<p align=”right”> Deze tekst wordt rechts uitgelijnd </p>
<p align=”justify”> Deze tekst wordt uitgevuld </p>
<p align=”center”> Deze tekst wordt gecentreerd </p>
</body>
</html>

De image tag

De image tag gebruiken we om een afbeelding in te voegen op een webpagina. Hiervoor gebruikt u <img src=”..”>. Hieronder maak ik u ook alles duidelijk aan de hand van een voorbeeld:

Attributen

Src: Dit is de attribuut die u verplicht moet ingeven achter de letters img. Hier staat de aanduiding in naar de foto die u wilt tonen.

Height: Deze tag is niet verplicht en kan u gebruiken voor de hoogte van de afbeelding.

Width: Deze tag is niet verplicht en kan u gebruiken voor de breedte van de afbeelding.

<html>
<head>
<title> Afbeeldingen </title>
</head>
<body>
<image src=”pckapot.jpg” width=”200” height=”200” >
</body>
</html>

Nog enkele Mark up tags

We hebben al vele body tags gezien. Nu maken we kennis met nog een hele hoop mark up tags. Hieronder ziet u een lijstje met een zeer duidelijke verklaring bij:

<b> deze tekst is vet geschreven </b>
<u> Deze tekst is onderstreept </u>
<big> Deze tekst word groot weergegeven</big>
<small> Deze tekst word klein weergegeven </small>
<c> Deze tekst is cursief geschreven </c>
<sup> Deze tekst staat in superscript </sub>
<sub> Deze tekst staat in subscript </sub>[
<s> Deze tekst is doorstreept </s>
<tt> Deze tekst bevat een vaste letterafstand </tt>

De Basefont tag

De basefont tag gebruiken we om de webpagina een basislettertype mee te geven. Hiervoor gebruikt u <basefont face=”..” size=”..”>. Hieronder maak ik je alles duidelijk aan de hand van een voorbeeld:

Attributen

Size: Dit gebruiken we voor de grootte van het basislettertype mee te geven. De value (waarde) ligt tussen de 1 en 7.

Face: Dit is familienaam van het lettertype dat je via deze attribuut meegeeft.

Color: Dit is de kleur van het basislettertype dat je via deze attribuut meegeeft.

<html>
<head>
<title> Basislettertype </title>
</head>
<body>
<basefont face=”verdana” size=”5”>
</body>
</html>

Unsorted list en list item tags

Deze tags worden gebruikt bij het maken van opsommingtekens op je webpagina. Hiervoor gebruikt u <ul> </ul> en <li> </li>. Hieronder maak ik je alles duidelijk aan de hand van een voorbeeld:

<html>
<head>
<title> Opsommingtekens </title>
</head>
<body>
<ul>
<li> Hardware</li>
<li> Webdesign </li>
<li> Windows </li>
<li> Netwerk </li>
</ul>
</body>
</html>

De Background tag

De background tag gebruiken we om onze webpagina een achtergrond meet e geven. Hiervoor gebruiken we <body bgcolor=”..”>. Waar de puntjes staan vult u de gewenste kleurencode in. Hieronder maak ik u alles duidelijk aan de hand van een voorbeeld:

<html>
<head>
<title> Achtergrond </title>
</head>
<body bgcolor=”#00FFFF”>
</body>
</html>

maxstar · #2 (**permalink**) 22 mei 2009

Het gebruik van frames is wel iets wat achterhaald, en niet zoekmachine vriendelijk.

Misschien het gebruik van <DIV> en <SPAN> hieraan toevoegen.

Fisoes · #3 (**permalink**) 22 mei 2009

Het is een mooie basis voor elke beginner

Maar laat inderdaad de frames en tabellen achterwege want dat is niets meer

maxstar · #4 (**permalink**) 22 mei 2009

Tabellen is op zich nog niet eens zo heel erg, als ze maar op de juiste manier gebuikt worden en niet als basis voor de lay-out bijvoorbeeld.

Wim · #5 (**permalink**) 23 mei 2009

Tabellen is inderdaad niets mis mee, zolang je ze maar gebruikt om inhoud te tonen en dergelijken, maar niet om je layout op te bouwen zoals maxstar al zei.

Ik heb deze tutorial ook even verplaatst naar de handleidingen.

Fisoes · #6 (**permalink**) 24 mei 2009

ik had mijn reactie vooral bedoelt op de mensen die met tabellen hun hele site maken en dat is niets

tabellen om ze goed te gebruiken is helemaal niets mis mee

Discussietools
Printversie tonen Deze pagina e-mailen
Weergave
Lineaire weergave Switchen naar hybride weergave Switchen naar vertakte weergave

Gebruikersnaam		Mij onthouden?
Wachtwoord