WMCommunity.nl > HTML cursus

Pagina:

HTML cursus

Gepost op maandag 5 mei 2008, om 16:56

Wouter

Member
141 posts

Les 1

Ok, omdat sommige kinders willen beginnen met hun eigen webpagina maak ik hier een simpele tutorial over HTML.
Als je nog helemaal niks van HTML afweet dan kan ik beginnen met deze tutorial goed en aandachtig door te lezen.
Pak een glas cola en een zak chips en een goede stoel.

Eigenlijk is een simpel HTML-bestand makkelijk te maken je hoeft er alleen maar een text editor voor te hebben (like kladblok of frontpage).
HTML behandeld kleine letters en hoofdletters hetzelfde. Dus bijvoorbeeld:

C o d e


<head> en <HEAD>

betekent hetzelfde. Ook spaties worden niet gelezen, maar daar volgt straks meer over in het kopje "tags"

Zoals je net al las heten de commando's tussen de < en de > tags
Hieronder zie je een basismodel van de opstelling in HTML.

C o d e


<HTML>

<HEAD>

<TITLE>Hier vul je de titel van de pagina in die boven in je browser wordt weergeven</TITLE>

</HEAD>

<BODY>

Hier komt al je inhoud die je op je pagina wilt weergeven.

</BODY>

</HTML>

Iedere pagina heeft dus minimaal dit^^.
Maar, waar staan al die tags nu eigenlijk voor?

De <html> tag staat ervoor om aan te geven in welke taal je script. In dit geval dus HTML.
De <head> tag wordt gebruikt om balangrijke informatie op je pagina weer te geven. Dit is meestal altijd onzichtbaar voor bezoekers.
Hier vindt je bijv. de title.

De <title> tag staat voor de titel die boven in je browser komt, daarmee kan je aangeven hoe je website heet en misschien nog andere informatie.

De <body> tag gebruik je om alles op je webpagina te weergeven, dus bijvoorbeeld kleuren in je webpagina, achtergrond instellen, maar daar meer ove in de overige lessen.

Elke tag sluit je af met een '</ bijvoorbeeld: </title> of </body>.

Dit was mijn tutorial over HTML over kinders die niet weten wat HTML is en ermee willen beginnen.
Dit was ook Les 1, later deze vakantie komen er meer tutorials waar o.a behandelt wordt: meer tags, kleur codes, CSS en werken met Div's.

Daarover meer in mijn volgende tutorial hopelijk heb je het er wat van opgestoken. En ik hoef geen huilies die gillen: "MAMMIIE DAT WIST IK AL".
Dit is juist voor de beginnende "scripters" die willen beginnen met hun eigen webpagina.

Ik hoop niet dat er al zo'n tutorial was anders heb ik alles voor niks gedaan.

Alles is copyrighted enzo.

[Laatst bewerkt door Wouter op maandag 5 mei 2008, om 21:48]

Error: Ongeldige afbeelding

Re: HTML cursus: Les 1

Gepost op maandag 5 mei 2008, om 19:21

	Rik Actieve Member 313 posts		Mooi geschreven Ik kijk uit naar les 2.

Re: HTML cursus: Les 1

Gepost op maandag 5 mei 2008, om 21:47

Wouter

Member
141 posts

Les 2

In de vorige les hebben we kunnen lezen wat HTML is en hoe je een simpel HTML document maakt.
In deze les beschrijf ik hoe je je site mooi op kan maken.

Al dit plaats je in de <body> tag.

Zeer belangrijke attributen in de body tag:

bgcolor
Belangrijk attribuut, om de achtergrondkleur van je pagina te wijzigen.

Voorbeeld:

C o d e


<body bgcolor="red">

Nu hebben we dus een pagina met een rode achtergrond.

text
Met dit attribuut kun je de standaard tekstkleur op je pagina instellen.

Voorbeeld:

C o d e


<body text="blue">

Nu hebben we dus een pagina met een blauw lettertype.

link
Hiermee kun je de kleur van de links op je pagina instellen.

Voorbeeld:

C o d e


<body link ="purple">

Nu heb je dus een link op je pagina die paars is.

alink
Bepaalt de kleur van de actieve links. De links zijn actief als je er op klikt.

Voorbeeld:

C o d e


<body alink="pink">

Nu heb je dus een actieve link die roze is.

vlink
Attribuut waarmee je de kleur van de geklikte links aangeeft. Als een bezoeker terugkeert op je pagina, dan zijn de links waarop hij al geklikt heeft in deze kleur weergegeven.

Voorbeeld:

C o d e


<body vlink="brown">

Nu heb je dus een link die bruin is als je er op geklikt hebt.

Als we nu alles even in mekaar zetten en er een HTML bestandje van maken krijgen we dus dit:

C o d e


<html>

<head>

<title>Voorbeeld</title>

</head>

<body>

<BODY bgcolor="yellow" text="red" link="pink" alink="purple" vlink="brown">

</body>

</html>

Als je daar je text dus in zet krijg je dus een rode tekst met een gele achtergrond, een roze link, een actieve paarse link en een bekeken bruine link.

Genoeg over dat we gaan verder met de tags.

Je hebt veel tags in HTML, ik zal jullie de belangrijkste geven en die nog een beetje makkelijk zijn.

<b>
Zet dit om een tekst en de tekst wordt dikgedrukt (bold)

<i>
Zet dit om een tekst en de tekst wordt schuin (italic)

<u>
Zet dit om de tekst en het wordt onderstreept (underlined)

<s>
Zet dit om een tekst en het wordt door getreept (striked)

<tt>
Gebruik deze tag en je tekst komt in "typmachine tekst"

Ik zei eerder al dat enters in HTML niet gelden als het einde van een regel. Als je het einde van een regel wilt markeren, moet je deze tag gebruiken: <BR>. Deze tag zorgt ervoor dat de tekst die volgt, op de volgende regel geplaatst wordt. Er is geen sluitingstag.

En het laatste waar ik aandacht aan besteedt in deze Les nummeró 2: Afbeeldingen en linken maken.

Een link maak je door deze simpele (nou simpele

) code:

C o d e

1 
2 
3


<a href="http://www.jouwpagina.nl"</a>

Nu komt er een link op jouw pagina te staan naar jouw website.

Wil je een tekst-link maken? Dus eigenlijk een woord of een zin die jou doorverbind naar die webpagina.
Dit doe je zo:

C o d e

1 
2 
3


<a href="http://www.jouwpagina.nl>Tekst</a>

Als je dit online zet komt er op je pagina te staan: Text en als je er op klikt wordt je doorverbonden naar (in dit geval) jouwpagina.nl

Oké, genoeg hierover.

Een afbeelding op je website is niet zo heel moeilijk je hoeft alleen maar de code te weten en voilá.

Afbeeldingen neem je op met de <IMG> tag. Het heeft geen eindtag.
Je moet altijd het attribuut src (=source) erbij gebruiken, dit attribuut vertelt de browser waar de afbeelding staat.

Voorbeeld:

C o d e

1 
2 
3


<img src="http://www.jouwpagina.nl/afbeelding.gif">

Nog twee attributen die belangrijk zijn voor een plaatje op je website zijn de "heigt" en "width". Deze vertellen de browser hoeveel ruimte het plaatje in beslag neemt en houdt dit vrij.

Dus nu alles bij elkaar:

C o d e

1 
2 
3


<img src="http://www.jouwpagina.nl/afbeelding.gif" height="100" width="50">

De height en width kun je zien met grafische software, zoals Photoshop.

En hierbij zijn we aan het einde gekomen van Les 2.
Ik hoop dat je dit weer helpt om een leuke webpagina te maken.

Veel succes.

Alles is copyrighted enzo.

[Laatst bewerkt door Wouter op maandag 5 mei 2008, om 21:48]

Error: Ongeldige afbeelding

Re: HTML cursus

Gepost op maandag 5 mei 2008, om 22:43

	Supermonkey Actieve Member 270 posts		Netjes Kan je hier niet beter een weblog van maken?
			BOE!

Re: HTML cursus

Gepost op dinsdag 6 mei 2008, om 08:28

	Wouter Member 141 posts		Quote: Supermonkey Netjes Kan je hier niet beter een weblog van maken? Kan ook nog ja, maar wat is er mis met een topic?
			Error: Ongeldige afbeelding

Re: HTML cursus

Gepost op dinsdag 6 mei 2008, om 10:32

	Minimumloon Member 106 posts		nu moet je eerst weer verder scrollen naar beneden kan je beter een blog en die de hele tijt editen
			Let op: Je onderschrift mag maximaal 100px hoog en 400px breed zijn. Klik op "Voorbeeld onderschrift" om te kijken of je aan de maten voldoet.

Re: HTML cursus

Gepost op dinsdag 6 mei 2008, om 10:54

	Rik Actieve Member 313 posts		Handige uitleg in les 2 over url plaatsen in HTML (dat wist ik nooit precies ) Misschien inderdaad wat handig om zo'n les in een Blog te zetten. Maar goed. Wouter is de TS dus hij mag het zeggen [Laatst bewerkt door Rik* op dinsdag 6 mei 2008, om 11:10*]

Re: HTML cursus

Gepost op dinsdag 6 mei 2008, om 15:00

	Wouter Member 141 posts		Oké, topic in een blog gedumpt. Topic kan je locken en opmerkingen e.d doen in het blog.
			Error: Ongeldige afbeelding

Pagina: