X

Sinterklaasgedichten maak je simpel, snel en origineel!

  • Ontvang 5 originele gedichten
  • Volledig gepersonaliseerd
  • In 2 minuten klaar!
Ga naar sinterklaasgedichten.net
Infoyo
Vragen en antwoorden
Zoek artikelen:

Enquete iPhone 4

Ontvang het laatste nieuws over "Computers en internet" en maak kans op 1000 euro cash.
Laat nu je e-mailadres achter. Speel gratis mee.


Basiscursus HTML (websites)

Venster sluiten

Maak een melding van dit artikel
Selecteer de motivatie van je melding:
Spam / reclame Misleidende of onduidelijke inhoud
Lage inhoudelijke kwaliteit Niet Nederlands
Erotische inhoud Artikel bestaat reeds op internet
Gokken / Illegale promotie Andere reden...

Omschrijf de motivatie van je melding:
Venster sluiten

Stuur dit artikel door
Je naam:
Je e-mailadres:
E-mailadres ontvanger:
Artikelscore
0
  Goed artikel ( +1 )
  Slecht artikel ( -1 )
RSS van Kees Kees Auteur op infoyo sinds
18 Augustus 2008


Bekijk het profiel van Kees
Datum: 19-08-2008
Auteur: Kees
HTML? Wat is dat nou eigenlijk? HTML staat voor HyperText Markup Language en wordt gebruikt voor het maken van websites. Met HTML kun je, zoals de naam al doet vermoeden, teksten opmaken (Markup = opmaken). Maar met HTML kun je nog veel meer: Van hyperlinks tot afbeeldingen, van vette teksten tot bewegende. De basiszaken van HTML worden in dit artikel uitgelegd. HTML is een opmaaktaal voor het maken van websites.

Tags

HTML werkt met zogenaamde tags. Dit zijn bepaalde tekentjes die iets aangeven. We maken onderscheid tussen begintags en eindtags. Deze zien er zo uit: <tag> (begintag) en </tag> (eindtag). De tekst tussen de begintag en eindtag krijgt een bepaalde opmaak, bijvoorbeeld <b>tekst</b> geeft vette tekst (zie verderop). Daarnaast zijn er ook tags die geen begin of eindtag hebben, en die zien er zo uit: <tag />. Soms worden ze ook geschreven als <tag>, maar dat is eigenlijk foutief. Om het nog wat ingewikkelder te maken zijn er ook nog tags die zowel met een begin- en eindtag, als zonder zo'n eindtag gebruikt kunnen worden. Daarom is het gebruik van <tag /> voor een losse tag aanbevolen.

HTML documenten werken met zogenaamde tags, waarmee de tekst opgemaakt kan worden.

Een simpel begin

Een simpel begin

Open kladblok (of een ander tekstbewerkingsprogramma dat GEEN speciale opmaak heeft, dus geen Word ofzo!) en typ het volgende in:

<html>
<head>
<title>Mijn eerste HTML document!</title>
</head>
<body>
Dit is normale tekst, en <b>deze is vet</b>.
</body>
</html>

Sla het bestand op als eerstebegin.html (kies alle bestanden bij opslaan als type!) op het bureaublad. Dubbelklik het nieuwe bestand en uw internetbrowser opent het bestand (zie afbeelding).
Zoals je ziet wordt de volgende tekst weergegeven: Dit is normale tekst, en deze is vet.
In de blauwe titelbalk bovenaan wordt de tekst Mijn eerste HTML document! weergegeven.

Uitleg:
Een HTML bestand begint altijd met de tags <html> en </html>. Daartussen komen alle andere tags. Vervolgens zien we <head> en </head>. Hiertussen komt allerlei informatie over het HTML document. In je zojuist gemaakte document is de titel (tussen de <title> en </title> tags) het enige voorbeeld van dergelijke informatie. In uitgebreidere documenten staat er veel meer informatie tussen. Ná de <head> tags komen de <body> tags. Hiertussen staat de tekst zelf, die we willen weergeven. Daartussen komen zo'n beetje alle opmaak tags, zoals <b> (die hier ook gebruikt is).

Een HTML bestand bevat altijd de tags <html>, <head> en <body>.

Meer tags: Schuin, onderstreept e.d.

Vanaf nu zullen we er in de voorbeelden er vanuit gaan dat u de <html>, <head> en <body> tags kent en gebruikt, en zullen we enkel de tekst tussen de <body> tags weergeven.

HTML is niet beperkt tot enkel vette teksten. Er kunnen ook andere, soortgelijke tags gebruikt worden. De belangrijkste tags zijn:

  • <i>Schuine tekst</i>
  • <u>Onderstreepte tekst</u>
  • <s>Doorgestreepte tekst</s>
  • <br /> (Hé! Dat is zo'n losse tag!) voor een nieuwe regel. Enters tussen de <body> tags worden niet gezien als nieuwe regels in het document zelf. Gebruik <br /> voor een nieuwe regel!
  • <p>Een alinea</p><p>Volgende alinea</p> Tussen verschillende alinea's wordt automatisch een regel overgeslagen. Dit is ook te bereiken door de <p> tag als losse tag te gebruiken, maar gebruik dan <p />! <p /> geeft hetzelfde resultaat als <br /><br /> (dus 2x een <br /> tag).
HTML heeft vele verschillende tags voor verschillende doeleinden.

Lettertypen en lettergroottes

Voor lettertypen en lettergrootten bestaat een speciale tag, de <font> tag, die door middel van het opgeven van attributen ingesteld kan worden. Het gebruik van deze tag wordt echter afgeraden, en de te gebruiken groottes zijn beperkt. We zullen hier dus gebruik maken van een andere tag. Dit is de <span> tag.
De <span> tag wordt als volgt gebruikt:

<span style="font-family: Arial; font-size: 14pt; color: red;">Tekst in een ander lettertype.</span>

Deze <span> tag maakt gebruik van een attribuut. Attributen zijn waarden die meegegeven worden aan de tekst. In dit geval is style de attribuut. Tussen dubbele aanhalingstekens staat de waarde van het attribuut, in dit geval een opsomming van een aantal waarden. In het voorbeeld zal, zoals waarschijnlijk vanzelfsprekend is, het lettertype Arial met een lettergrootte van 14 (pt!) en de kleur rood (red) gebruikt worden. Bij het gebruiken van een ander lettertype waarin spaties staan (bijvoorbeeld Comic Sans MS) moet de naam van het lettertype tussen enkele aanhalingstekens staan. Achter de lettergrootte moet de tekst pt NIET vergeten worden! Daarnaast is de kleur in te stellen door de engelse naam ervan (red, blue, green, yellow...), of de speciale Hexadecimale kleurcode (bijvoorbeeld #0000FF voor blauw). Hebt u daar geen verstand van, dan volstaat de (engelse) kleurnaam.

In het volgende voorbeeld gebruiken we het lettertype Comic Sans MS, de lettergrootte 72 en de kleur #0000FF (blauw dus).

<span style="font-family: 'Comic Sans MS'; font-size: 72pt; color: #0000FF;">Tekst in weer een ander lettertype.</span>

Voor de kleurcode is ook de zogenaamde 'korte notatie' toegestaan (#0000FF is in de korte notatie #00F).

Bij lettertypes kan het zo zijn dat op de computer van de gebruiker (die uw website bekijkt) het lettertype dat u gebruikt niet geïnstalleerd staat. Dan wordt vaak het standaardlettertype (meestal Times New Roman) gebruikt. Wilt u dat niet, dan kunt u een tweede lettertype opgeven (gescheiden door een komma), bijvoorbeeld:

<span style="font-family: Calibri, 'Trebuchet MS'; font-size: 11pt; color: black;">Tekst in alwéér een ander lettertype.</span>

In dit geval wordt het lettertype Trebuchet MS alleen gebruikt als het lettertype Calibri niet geïnstalleerd staat op de computer van de gebruiker.

Tot slot is het om een hele alinea makkelijk van een bepaald lettertype te voorzien mogelijk om het attribuut style in de <p> tag te gebruiken. Dit wordt dan:

<p style="......">Uw alinea</p>

Uiteraard werkt dit niet met <p /> als losse tag.

Het gebruik van verschillende lettertypes en lettergroottes geschiedt bij voorkeur door middel van het attribuut style in een <span> tag. Het gebruik van het attribuut style is ook mogelijk binnen één bepaalde alinea, dus in een <p> tag.

Tabellen

Tabellen

Een tabel staat in HTML altijd tussen <table> tags. Daartussen is het mogelijk een style attribuut toe te passen (<table style="...">), zoals ook mogelijk is bij <p> tags (zie boven).

Stel we willen ze volgende tabel:

Rij 1, kolom 1Rij 1, kolom 2
Rij 2, kolom 1Rij 2, kolom 2

De code voor de bovenstaande tabel is de volgende:

<table border="1">
<tr>
<td>Rij 1, kolom 1</td>
<td>Rij 1, kolom 2</td>
</tr>
<tr>
<td>Rij 2, kolom 1</td>
<td>Rij 2, kolom 2</td>
</tr>
</table>

Tussen de <table> tags komen de <tr> tags, die de rijen aanduiden. Daartussen komen weer <td> tags, die de afzonderlijke cellen aanduiden. Bij de <table> tag zien we het attribuut border, met waarde "1". Dit is om de rand van de tabel weer te geven, want standaard is deze 0 (nul), dus géén rand. Overigens is zowel in de <tr> (voor de hele rij) als in de <td> (voor één enkele cel) het gebruik van het style attribuut toegestaan.

Nu kunnen we ook cellen samenvoegen met tabellen, en wel zo:

<table border="1">
<tr>
<td>Rij 1, kolom 1</td>
<td rowspan="2">Rij 1+2, kolom 2</td>
<td>Rij 1, kolom 3</td>
<td>Rij 1, kolom 4</td>
</tr>
<tr>
<td>Rij 2, kolom 1</td>
<td colspan="2">Rij 2, kolom 3+4</td>
</tr>
</table>

Hierin krijgen we het resultaat zoals getoond op de afbeelding. Het attribuut colspan is dus voor de verdeling over meerdere kolommen, en rowspan voor verdeling over meerdere rijen. De andere cellen schuiven automatisch door.

Uiteraard is binnen alle <td> tags het gebruik van tags als <b>, <i>, <u> en <span> toegestaan. Voor het maken van een <td> tag met twee (of meer) attributen, bijvoorbeeld een rowspan én een style attribuut, gebruik het volgende: <td style="..." rowspan="...">. Voor het verdelen over meerdere rijen of kolommen, typ achter rowspan of colspan een andere waarde dan 2 in (bijvoorbeeld 3).

Dan is er ook nog de <th> tag, welke gebruikt kan worden in plaats van de <td> tag, en is bedoeld voor kopteksten in de tabel. Het gebruik is hetzelfde, en de weergave ook, behalve dat de kopteksten vet worden weergegeven.

HTML bevat een uitgebreide ondersteuning van tabellen doormiddel van de <table>, <tr>, <td> en <th> tags.

Kopteksten

Eerder hebben we al kennis gemaakt met kopteksten van tabellen. Dit stukje gaat over kopteksten in gewone tekst.

HTML ondersteunt de volgende kopteksten:
  • <h1>Kop 1</h1>
  • <h2>Kop 2</h2>
  • <h3>Kop 3</h3>
  • En zo door tot <h7>, alhoewel die zó klein is dat het nauwelijks een koptekst genoemd kan worden.
Voor een koptekst wordt automatisch een regel overgeslagen, erna volgt automatisch een nieuwe regel.

In een tekst die ingedeeld is in alinea's worden kopteksten als volgt gebruikt:

<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h1>
<p>
Suspendisse blandit, ante eget congue varius, turpis quam venenatis lacus, pretium viverra augue mi vel nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vel elit eu nibh luctus facilisis. Aenean congue. Duis porttitor metus malesuada pede convallis fringilla. Proin eu nisl. Nunc ut nunc in velit venenatis tempus. Aenean diam ante, vulputate sit amet, sodales non, porttitor vel, dui. In nec libero. Vivamus dictum placerat elit.
</p>
<h2>Cras nulla lorem, ultricies in, convallis a, volutpat quis, lectus.</h2>
<p>
Pellentesque suscipit, quam sit amet condimentum egestas, libero arcu porta magna, a volutpat mauris nunc id ligula. Curabitur quis metus. Phasellus rhoncus ligula vitae erat. Aenean rhoncus venenatis neque. Nunc id mauris. Donec facilisis urna non erat. Aliquam tortor sapien, pharetra ut, feugiat nec, faucibus vel, ligula. Integer dignissim molestie odio. Vivamus sed felis id pede tincidunt dapibus. Sed ornare rhoncus est. Curabitur gravida diam ut neque. Nunc quis lacus. Duis ut nunc. Pellentesque luctus. Phasellus auctor leo ac sem. Aenean velit lorem, rhoncus at, faucibus eu, mattis in, nisl. Suspendisse leo diam, porttitor eu, congue a, pharetra vitae, tellus. Suspendisse potenti. Quisque luctus neque eu metus.
</p>
<p>
Nunc sed elit. Maecenas in lacus vel mauris hendrerit lobortis. Nam aliquet scelerisque est. Duis tincidunt metus a purus. Sed sed metus eu sapien pretium dapibus. Morbi sed lectus ut ligula iaculis gravida. Aliquam in magna. Sed purus odio, malesuada vel, tristique vel, mattis ut, dui. Donec non sem ut quam vehicula luctus. In hac habitasse platea dictumst. Maecenas sit amet urna eu nibh consectetuer pharetra. Nulla venenatis. Praesent turpis nunc, dapibus in, tristique quis, faucibus sed, ante. Morbi aliquam sem gravida justo. Nullam sagittis est. Aliquam erat volutpat. Nunc leo nibh, consequat a, consectetuer et, convallis quis, sapien. Cras viverra, lacus non dictum consectetuer, lorem turpis sodales mauris, vel sagittis ipsum velit non massa. Proin interdum. Sed eros nulla, semper consequat, molestie a, fermentum vitae, lacus.
</p>
<h2>Suspendisse sagittis volutpat libero.</h2>
<p>
Vivamus rhoncus. Quisque sed lorem. Etiam tempus, enim eget mattis viverra, nisi pede dignissim quam, eu sollicitudin urna eros ut eros. Maecenas a erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec lectus eros, venenatis et, rhoncus ac, adipiscing eget, mauris. Mauris turpis lectus, elementum quis, sodales a, condimentum eu, turpis. Vivamus sem. Morbi sed enim sit amet nibh suscipit malesuada. Sed nisi purus, dapibus non, congue sit amet, tristique vel, ipsum. Aenean rhoncus. Maecenas varius iaculis odio. Praesent dui tortor, aliquet sit amet, cursus porttitor, pulvinar et, justo.
</p>

HTML ondersteunt zeven kopteksten: <h1> tot en met <h7>.

Hyperlinks

En we sluiten af met zo'n beetje de belangrijkste functie van HTML, de hyperlinks (ook wel gewoon links genoemd). Je weet wel, van die blauwe, onderstreepte teksten waar je op kan klikken, en via welke je vervolgens naar een andere webpagina gaat. Die maken we met de tag <a>:

<a href="http://www.google.nl/">Klik hier om naar Google te gaan!</a>

Vergeet http:// niet neer te zetten!

Het is ook mogelijk hyperlinks naar een pagina op uw computer/server te verwijzen (dus naar dezelfde locatie als waar het HTML bestand met de hyperlink staat). Dit gaat zo:

<a href="pagina2.html">Klik hier en ga naar pagina 2!</a>

Hier is http:// niet nodig. U kunt ook verwijzen naar een pagina in een submap, en dat gaat zo:

<a href="submap/bestand.html">Klik hier en ga naar de pagina in de submap!</a>

Daarnaast kunt u ook links in een nieuw venster laten openen, en wel zo:

<a href="http://www.google.nl/" target="_BLANK">Klik hier om naar Google te gaan in een nieuw venster!</a>

Ook hier weer is het gebruik van het style attribuut toegestaan.

HTML biedt natuurlijk ook ondersteuning voor links, en wel door middel van de <a> tag.

Tot slot

U weet nu de basisdingen van HTML, en kunt uw eigen (simpele) websites maken.

Wij hopen dat u veel plezier heeft gehad aan het lezen van dit artikel!

Reacties op dit artikel
Torre, 2008-10-05
( 0 )

Ik vind het wel een goede uitleg... maar veel mensen willen liever geen website die helemaal wit is met wat plaatjes etc.
vaak willen ze wel een mooie layout.
daarvoor moeten ze toch ergens anders zijn...
Kees, 2008-10-05
( 0 )

Daarom noem ik het ook BASIScursus
Markcool, 2008-10-14
( 0 )

Vet leuk en ook erg leerzaam!
S, 2008-12-15
( 0 )

*kuch* tables :X ftw

Maar heb je dit helemaal 100% geschreven of copy paste. Wel erg leerzaam voor mensen die er nog niets vanaf weten (hoewel ik denk dat er genoeg sites te vinden zijn).
Puik werk jongen!
Kees, 2008-12-16
( 0 )

Dit is 100% zelf geschreven, niks copy paste...
Plaats een reactie
Naam:
E-mailadres:

Reactie:




      Home   -   Aanmelden   -   Top artikelen   -   Nieuwe artikelen   -   Sitemap   -   Help   -   Links   -   Privacy policy   -   Contact
Copyright © 2017 - Infoyo.nl