Centraal: HTML

Juli 16, 2009

In dit topic kunnen mensen vragen stellen over HTML en ik ben bezig met een handleiding te maken voor beginnende webdesigners.

HTML handleiding

Inleiding:

Algemene informatie over HTML
Begin
Kopteksten maken
Lettertypes
Lijnen
Kleuren
Tekst aanpassen
Linken maken
Tabel invoeren
Frames maken
Adressen speciferen
Opsommingen maken
Afbeeldingen en video's invoeren

Algemene informatie over HTML

Hyper Tekst Markup Language is een opmaak taal voor website's.

Het vertelt je browser d.m.v. tags hoe je website eruit moet komen te zien.

Je hebt bij ieder element 3 dingen nodig:

De begintag <...>
De inhoud, de tekst die tussen de begin en de eindtag komt.
De eindtag </...>

Een tag die je moet openen en sluiten noem je een container tag.

Begin

Om te beginnen heb je altijd deze tags nodig:

<HTML>...</HTML> Deze code zet je altijd helemaal onder en helemaal boven. Zie voorbeeld 1.1
<HEAD>...</HEAD> Hier zet je altijd de TITLE en de META tag in.
<TITLE>...</TITLE> Tussen deze tags zet je de titel van de site die helemaal linksboven in beeld staat. Zie voorbeeld 1.2
<BODY>...</BODY> Tussen deze twee tags wordt de inhoud van de website geschreven. Zie voorbeeld 1.3

Voorbeeld 1.1

[img width=344 height=24]http://i26.tinypic.com/zw0xew.jpg

Voorbeeld 1.2

[img width=536 height=515]http://i29.tinypic.com/3586nmt.jpg

Voorbeeld 1.3

Kopteksten maken

Je kunt kopteksten maken in 6 verschillende groottes. Grote 1 is het grootst en grote 6 is het kleinst.

Dit zijn de 6 verschillende groottes:

<H1>...</H1>
<H2>...</H2>
<H3>...</H3>
<H4>...</H4>
<H5>...</H5>
<H6>...</H6>
Voorbeeld 2.1 laat zien hoe het er in de praktijk uitziet.

[img width=363 height=243]http://i25.tinypic.com/2evggvl.jpg

Voorbeeld 2.1

Je kunt je koptekst naar 3 kanten uitlijnen je gebruikt daarvoor de code align="..."(ik gebruik als voorbeeld <H1>...</H1>):

<H1 align="left">...</H1> Links uitgelijnd (standaard als je geen uitlijning selecteert).
<H1 align="center">...</H1> In het midden uitgelijnd.
<H1 align="right">...</H1> Rechts uitgelijnd.
Voorbeeld 2.2 laat de verschillen zien.

[img width=600 height=83]http://i29.tinypic.com/iydi7p.jpg

Voorbeeld 2.2

Lettertypes

Je hebt al kunnen zien dat je met de code <H1>...</H1> of <H2>...</H2> enz. de grootte van kopteksten kunt veranderen. Je kan ook de hele tekst of een gedeelte van de tekst groter of kleiner maken en het lettertype veranderen met de code:

<FONT>...</FONT>.

Je zet de begintag voor de tekst die je wilt veranderen en de eindtag achter de tag die je wilt veranderen.

Let op, zet nooit opmaak codes buiten de <BODY>...</BODY>, want dit is waar je de hele inhoud plaatst.

Als je de grote wilt veranderen gebruik je deze code(ik geef meerdere codes zodat je het verschil ziet tussen de groottes):

<FONT size="+2"> Deze tekst wordt vergroot.</FONT>
<FONT size="-2"> Deze tekst wordt verkleind.</FONT>
Zie voorbeeld 3.1 voor de verschillen.

[img width=274 height=67]http://i31.tinypic.com/4idjc3.jpg

Voorbeeld 3.1

Als je het lettertype wilt veranderen kun je deze codes gebruiken:(niet alle lettertypes zijn te gebruiken, hier vind je een lijst met alle beschikbare lettertypes.

<FONT face="Verdana"> Deze regel wordt met het lettertype verdana weergegeven.</FONT>
<FONT face="Times New Roman"> Deze regel wordt met het lettertype Times New Roman weergegeven, dit is het standaard lettertype als je niets selecteert.</FONT>
Voorbeeld 3.2 laat de verschillen zien.

[img width=600 height=53]http://i25.tinypic.com/vpvudt.jpg

Voorbeeld 3.2

Je kunt de <FONT>...</FONT> code ook voor allebei de dingen tegelijk gebruiken dan krijg je dit:

<FONT face="Arial" size ="+1"> Groter lettertype Arial</FONT>
<FONT size="-1" face="Comic Sans MS"> Kleiner lettertype Comic Sans MS</FONT>
Voorbeeld 3.3 geeft de verschillen weer.

[img width=223 height=66]http://i32.tinypic.com/n3b093.jpg

Voorbeeld 3.3

Lijnen

Je zou midden in je website of waar dan ook een horizontale lijn kunnen neerzetten. Je gebruikt hiervoor de code:

<HR>

Zoals je ziet hoef je deze tag niet af te sluiten, dit wordt dus ook wel een empty tag genoemd. De <HR> code wordt vaak onder een koptekst of onder een heel verhaal gezet.

Je kunt ook de width (breedte) van de tag veranderen, dit kun je doen door het aantal pixels te veranderen of te selecteren hoeveel procent de tag moet lijnen:

<HR width="200">
<HR width="50%">
Voorbeeld 4.1 geeft de verschillen weer.

[img width=600 height=48]http://i30.tinypic.com/359ajy1.jpg

Voorbeeld 4.1

Ik heb de foto verkleind maar in feite zouden beide lijnen niet aan de randen komen.

De <HR> tag wordt standaard in he midden uitgelijnd maar ook deze kan op dezelfde manier als bij kopteksten d.m.v. de tag align links, rechts of in het midden (standaard) worden uitgelijnd:

<HR align="left" width="20%">
<HR align="center" width="150">
Voorbeeld 4.2 geeft de verschillen weer.

[img width=600 height=40]http://i28.tinypic.com/2uzqusj.jpg

Voorbeeld 4.2

En we eindigen ook dit deel met een lijn.

Kleuren

Zoals altijd bij opmaak programma's in dit geval opmaak taal kun je kleuren invoegen voor bijvoorbeeld de achtergrond de tekst de links en ga zo maar door.

Je kunt heel makkelijk in de body tag de kleur van de hele website aanpassen, maar je kun ook de kleur van de lijnen aanpassen of van een gedeelte van de tekst. Je hebt hiervoor verschillende kleurcodes/kleurnamen nodig. Je vind hier een uitgebreide lijst van zeer veel kleuren.

Voor de body tag zijn de volgende kleur tags er:

text, met deze tag kun je de kleur van de tekst van de hele pagina aanpassen.
bgcolor, met deze tag kun je de achtergrond kleur van je website aanpassen.
link, met deze tag kun je de kleur van ongebruikte links van bezoekers aanpassen.
vlink, met deze tag kun je de kleur van gebruikte links van bezoekers aanpassen.
alink, met deze tag kun je de kleur van een actieve link aanpassen, een link is actief zodra erop wordt geklikt.

Je kunt deze tags allemaal in willekeurige volgorde achterelkaar zetten. Zie voorbeeld 5.1

[img width=600 height=46]http://i29.tinypic.com/2evg55l.jpg

Voorbeeld 5.1 (je hoeft natuurlijk maar een keer de body tag te gebruiken of met de kleurnamen of met de kleurcodes).

Je kunt ook weer gedeeltes van een tekst een bepaalde kleur geven d.m.v. de tag:

<FONT face="Verdana" color="#0000FF">Deze tekst wordt in een andere kleur als de rest weergegeven.</FONT>
Zie voorbeelden 5.2 en 5.3 voor meer duidelijkheid.

[img width=600 height=151]http://i30.tinypic.com/2hrjolv.jpg

Voorbeeld 5.2 (de <BR> code die jullie kunnen zien wordt in het volgende deel van de handleiding uitgelegd).

[img width=533 height=76]http://i25.tinypic.com/vcrsdi.jpg

Voorbeeld 5.3

Een standaard lijn kleur is een beetje saai dus ook de kleur van de lijnen is natuurlijk aan te passen. Je kunt dit doen door gewoon de volgende tag te volgen, de kleur kan je altijd zelf kiezen.

<HR color="FF00FF">
<HR color="red">
Zie voorbeeld 5.4 voor de kleurverschillen.

[img width=427 height=54]http://i31.tinypic.com/dq3qww.jpg

Voorbeeld 5.4

Tekst aanpassen

Het is een beetje saai als je site telkens helemaal links staat en dat je moet doorschrijven totdat je eindelijk een regel verder kunt. Hier hebben ze ook weer een paar codes op bedacht.

We beginnen met de tag die ervoor zorgt dat je altijd een regel over kan slaan of je regel eindigt en op een nieuwe regel begint:

<BR>

dat is alles zet dit achter je zin en je kunt meteen doortypen op de volgende regel, zie voorbeeld 6.1 en 6.2

[img width=600 height=126]http://i28.tinypic.com/2j3302o.jpg

Voorbeeld 6.1

[img width=355 height=57]http://i27.tinypic.com/2i1h0s7.jpg

Voorbeeld 6.2

Het is natuurlijk ook mogelijk om netjes alinea's te maken en die kun je dan weer op de 3 bekende plekken uitlijnen:

<P align="left"> Hier typ je je alinea en die wordt links uitgelijnd.</P>
<P align="center"> Hier typ je je alinea en die wordt in het midden uitgelijnd.</P>
<P align="right"> Hier typ je je alinea en die wordt rechts uitgelijnd.</P>
Voorbeeld 6.3 geeft de verschillen weer.

[img width=600 height=124]http://i27.tinypic.com/1yolde.jpg

Voorbeeld 6.3

Je hoeft natuurlijk niet je alinea over de hele breedte te hebben ik je kunt deze verkorten door de width aan te geven.

martijn1 · Juli 17, 2009

ziet er goed uit O0

Maar een vraag, kunnen we hier ook vragen stellen, over problemen in HTML?

Juli 17, 2009

natuurlijk zal ik meteen ff aanpassen. O0

Robin · Juli 17, 2009

Dit ziet er goed uit zeg! Misschien ga ik 't ook eens proberen als je handleiding of is (of is 'ie al af)?

Juli 17, 2009

Nee het is nog lang niet af, het zal nog wel ff duren maar bedankt voor het compliment

En welterusten :s

Robin · Juli 17, 2009

Oke ik ben benieuwd! Zie graag een vervolg komen, kan misschien ook wel als content op de mainpage worden opgenomen?

marco1 · Juli 17, 2009

Ja, ziet er al goed uit! Succes

ActionWaction · Juli 18, 2009

Dit ga ik dus wel interessant vinden en ga het ook volgen, ziet er lekker duidelijk uit nu

martijn1 · Juli 18, 2009

Kun je misschien de tabbelen in HTML uitleggen, of is dit te uitgebreid?

MVG

Martijn1

CÃ©dric. · Juli 18, 2009

Hier hou ik van.

Dit volg ik zeker ook !

Je bent al goed bezig.

Juli 18, 2009

De tabellen kom ik later op terug, want als ik daar nu aan begin snapt niemand er meer wat van.

Hier hou ik van.

Dit volg ik zeker ook !

Je bent al goed bezig.

bedankt voor compliment

Robin · Juli 18, 2009

Top man, hele moeilijke taal leg je heel makkelijk uit, als 'ie af is ga ik 't proberen.

Misschien is een klein handleidinkje handig over hoe je het naar de FTP server upload?

Juli 18, 2009

Misschien is een klein handleidinkje handig over hoe je het naar de FTP server upload?

Dat is iets dat ik op het einde van de handleiding zeker zal gaan uitleggen, bedankt voor de tip!! O0

Post Merge: juli 18, 2009, 07:52:40 pm

Iedereen mag hier trouwens ook zijn/haar eigen html creaties plaatsen of een link naar je site die gemaakt is met html.

martijn1 · Juli 27, 2009

Ga je ook javascript hier uitleggen?

Juli 31, 2009

Waarschijnlijk niet ik be het namelijk zelf nu pas aan het leren.

P.S. OVER EEN HALF UUR GA IK OP VAKANTIE EN PAS OVER 2 WEKEN KAN IK WEER AAN HET TOPIC WERKEN!

Vergeten jullie alsjeblieft de VPN verbinding niet? Je internet provider zoals Ziggo of KPN kan door gebruik van de VPN niet zien wat er gebeurd op je internet verbinding en ben je volledig anoniem voor iedereen. Een vereiste tegenwoordig.... We een uitgebreide handleiding geschreven met informatie. :goed:

Deze vindt je hier: https://www.duken.nl/forums/handleidingen/downloaden/vpn-verbinding-en-anoniem-downloaden-r35/

Aanmelden

Centraal: HTML

Aanbevolen reactie

Gast skinny242

Link naar opmerking

Deel via andere websites

Top Posters In Dit Topic

Populaire dagen

Top Posters In Dit Topic

Populaire dagen

Link naar opmerking

Deel via andere websites

Gast skinny242

Link naar opmerking

Deel via andere websites

Link naar opmerking

Deel via andere websites

Gast skinny242

Link naar opmerking

Deel via andere websites

Link naar opmerking

Deel via andere websites

Link naar opmerking

Deel via andere websites

Link naar opmerking

Deel via andere websites

Link naar opmerking

Deel via andere websites

Link naar opmerking

Deel via andere websites

Gast skinny242

Link naar opmerking

Deel via andere websites

Link naar opmerking

Deel via andere websites

Gast skinny242

Link naar opmerking

Deel via andere websites

Link naar opmerking

Deel via andere websites

Gast skinny242

Link naar opmerking

Deel via andere websites

Wie zijn er online? 2 leden zijn actief

Mededelingen

Recent nieuwsbericht

Willekeurig topic

Nu op het forum

Recente prestatie

Recente actieve topics

Populaire bijdragers

Willekeurige films

Willekeurige link