• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

XHTML The Basics

Heb je wat aan deze tutorial gehad ?

  • Jup, was duidelijk.

    Stemmen: 9 81,8%
  • Nop, ik begreep er niet veel van.

    Stemmen: 2 18,2%

  • Totaal aantal stemmers
    11
Status
Niet open voor verdere reacties.

Purplesparks

Vaak hier
Lid geworden
6 apr 2005
Berichten
795
Waarderingsscore
4
[hand]
Basis Cursus XHTML 1.0

Inleiding


Er zijn duidelijk genoeg cursussen html op het internet. Maar om zelf nog even een speciale XHTML basiscursus te maken voor onze eigen community. :)

In deze tut gaan we XHTML 1.0 leren.

Met XHTML (de opvolger van HTML 4.1) kan je je eigen websites maken.
Het is een opmaak-taal die (als ze in browsers geopend worden) ge-renderd worden tot een zichtbaar document.
Het is niet nodig om eerst HTML te leren om daarna op XHTML over te gaan. Dat zou een beetje onzin zijn.
Beetje het zelfde als eerst alles van windows-98 leren en dan pas windows-XP.


XHTML werkt kwa structuur het zelfde als HTML. Er zijn wel een paar kleine verschillen tussen HTML 4.1 en XHTML 1.0
Het grootse verschil is dat het stuk strenger is dan de oude HTML 4.1.


In HTML 4.1 maakte het niet echt uit of je tags met hoofd letters of kleine letters schreef. XHTML is hier wel gevoelig voor.
Met XHTML moeten alle tags en attributen (zie plaatje) in kleine letters geschreven worden. Ook moeten de waardes van de atributen altijd tussen quotes staan.


Bij de waardes van de atributen maakt het echter niet uit of ze in kleine letters of hoofdletters geschreven worden.

attribute3lb.gif



Let er wel op dat de namen de bestanden op sommige linux servers hoofdletter gevoelig zijn.
Ik raad je dan ook ten strengste aan om jezlef aan te leren al je bestands namen ed met kleine letters te schrijven.


Het zal je mischien al opgevallen zijn dat de img tag hierboven met een /> word afgesloten.
Dit is waar XHTML ook in verschild ten opzichte HTML. Alle alleen staande tags zoals de br, hr en img tags moeten ook afgesloten worden.
Er zijn in XHTML 1.0 geen </img> en </br> tags erbij gekomen, en om toch backwards compatable met oudere versies van HTML te zijn hebben de makers van XHTML er iets slims op bedacht.
De sluiting vind plaats aan het eind van de tag. Dit doe je door de / net voor de laatste > te plaaten.


Voorbeeld hoe alleenstaande tags netjes afgesloten worden in xhtml:
HTML:
<br />
<hr />
<img src="" alt="" width="" height="" />




De opbouw van een XHTML document


Dit is het basis principe hoe een XHTML document is opgebouwd.
Zoals je kan zien, niet heel veel anders dan de html 4.1 documenten




De eerste tag die we tegen komen is de !DOCTYPE, deze geeft aan de browser aan om wat voor soort document het gaat.
Er zijn namelijk meerdere soorten documenten die je als webpagina kan maken. De doctype zorgt ervoor dat de pagina op de juiste manier door de browser ge-renderd word.


Dit kan, met name in Internet Explorer, een wereld van verschil uitmaken hoe de pagina die je geschreven hebt eruit komt te zien. Klik hier voor mee info over Doctypes


De volgende tag is de HTML tag. Je hele document (de "doctype" uitgezonderd) staat tussen deze tags.
In HTML tags vinden we 2 blokken, de HEAD en de BODY tags blokken.


In het blok van de HEAD tag vinden we de TITLE tag. De TITLE tag geeft aan je browser aan hoe het document dat je gemaakt hebt heet. De title kan je ook zien links bovenin van je broser venster.
(De title word als link weer gegeven bij google als je naar je pagina zoekt)

Tussen de BODY tags komt je werkelijk zichtbare opmaak van je website te staan. Hier kan je text, plaatjes, links, enz.. in zetten :)




Het echte werk, mijn eerste WebSite


Oke, now let's write some XHTML code :D
We maken hierbij gebruik van kladblok om een site te maken.


Wow, kladblok?!?
Kan dat dan?!?

Ja zeker kan dat, persoonlijk mijn meest favoriete programma.
Omdat je niks van de functie's van een programma zoals frontpage/dreamweaver en dergelijken hoeft te leren.
Daarbij is het goed om zo zelf de code tags te typen zodat je goed leerd en begrijpt wat er staat.


1: Maak een mapje aan waarin je alle html bestanden gaat opslaan.
2: Open kladblok (notepad).
3: Zorg ervoor dat "hide extentions for known filetypes" uitstaat, dit kan je vinden in de folderoptions (mapopties)


folder9ic.gif





Okay, om maar alvast los te gaan met wat codes en je eerste pagina te maken.

HTML:
<!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=iso-8859-1" />
<title>XHTML Test Page</title>
</head>
<body>

Hallo Wereld !

</body>
</html>
Sla dit bestand op als index.html in het mapje die je hier speciaal voor aangemaakt hebt.
Let hier vooral op de extensie (.html). Hiermee geef je aan dat het een HyperText Markup Language is.
Open het mapje en dubbelklik op het bestand index.html.
Als het goed is word nu in je browser de zwarte tekst "Hallo wereld!" op een witte achtergrond weergeven.

Gefeliciteerd, je heb je eerste website gemaakt.
Misschien nog niet erg indrukwekkend, maar het begin is er.
Laten we snel nog wat andere tags erin gooien om wat mooie resultaten te krijgen.

HTML:
<!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=iso-8859-1" />
<title>Test XHTML Page</title>
</head>
<body>

<strong>Hallo wereld !</strong>

<em>Hallo wereld !</em>

<strong><em>Hallo wereld !</em></strong>

</body>
</html>
Sla dit nogmaals op in met de zelfde bestands naam, Bij het bekijken van je gemaakte website zullen je gelijk al een paar dingen opvallen.

De text tussen de <strong> tags word dik weergegeven.
(in HTML 4.1 was dit nog de <b> tag, maar die is vervangen voor <strong> in XHTML 1.0)

De text tussen de <em> tags wordt de tekst schuin weergeven.
(in HTML 4.1 was dit nog de <i> tag, maar die is vervangen voor <em> in XHTML 1.0)

In de laatste zin worden de 2 hierboven genoemde code's samengenomen, dit is dus ook mogelijk.
Let er wel op dat je alle tags in de goeie volgorde sluit


Dit is fout (N)
HTML:
<strong><em>Hallo Wereld !</strong></em>

Dit goed
(Y)
HTML:
<strong><em>Hallo Wereld !</em></strong>


Het laatste wat hier op zal vallen is dat alle zinnen op 1 lijn staan al je um in je browser bekijkt. Een enter in je kladblok bestand geeft niet hetzelfde resultaat als wanneer je het in je browser bekijkt.

Ook dit is met een simpele tag te doen, namelijk de <br /> tag.
De <br /> wordt geinterpreteerd door de browser als een harde enter.

HTML:
<!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=iso-8859-1" />
<title>Test XHTML Page</title>
</head>
<body>

<strong>Hallo wereld !</strong><br />
<br />
<em>Hallo wereld !</em><br />
<br />
<strong><em>Hallo wereld !</em></strong>

</body>
</html>
<br /> waar je hem ook neerzet of gewoon achter elkaar: <br /><br />
of onder elkaar:
<br />
<br />

Het resulaat blijft altijd hetzelfde zoals je zal zien.

laten we nu wat andere interessantere tags gebruiken.



Plaatjes in webpagina's
Om plaatjes op je site te krijgen gebruiken we de <img> tag. De tag zit vrij simpel in elkaar.

HTML:
<!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=iso-8859-1" />
<title>Test XHTML Page</title>
/head>
<body>

<img src="http://www.google.nl/intl/nl_nl/images/logo.gif" alt="google logo" width="285" height="110" />


</body>
</html>

Sla dit op en bekijk het resultaat. Tadaa, het logo van google op je eigen site :)

img
geef een aan dat het om een plaatje gaat.
src="" (source) is het path of url waar ie het plaatje kan vinden
alt="" is de text die weergegeven word als het plaatje niet gevonden kan worden
width="" de breete van het plaatje
height="" de hoogte van het plaatje

Allemaal niet zo heel erg moeilijk lijkt me zo toch :anglenot:

Je kan (in je webroot) op 2 manieren naar een plaatje linken met de img tag.
De eerste manier, die we ook hier gebruikt hebbe, is door de hele url in de src="" te gebruiken.
Een andere manier heef een relative path. Dit betekend dat je niet de http:// gebruikt om naar het plaatje te linken maar alleen naar de folder waar het plaatje instaat

Voorbeeld:
Plaatje staat in de zelfde directory als de html file
HTML:
<img src="plaatje.gif" alt="mijn plaatje" width="200" height="120" />

Plaatje in de directory images
HTML:
<img src="images/plaatje.gif" alt="mijn plaatje" width="200" height="120" />

Plaatje staat een directory hoger als de html file
HTML:
<img src="../plaatje.gif" alt="mijn plaatje" width="200" height="120" />



Hyperlinks

Okay, dit is allemaal mooi maar wat heb je aan 1 pagina die niet vastgelinkt zit aan een andere pagina.

Maak een nieuw bestanden aan met de naam test.html

Tiep in de index.html de volgende code

index.html :
HTML:
<!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=iso-8859-1" />
<title>Test XHTML Page</title>
</head>
<body>

Dit is index page<br />
<br />
<a href="test.html" title="Ga naar de Test page">Klik om naar de andere page te gaan</a>

</body>
</html>

test.html :
HTML:
<html>
<body>

Dit is test page<br />
<br />
<a href="index.html" title="Klik hier om weer terug naar de index te gaan">Ga terug naar index</a>

</body>
</html>


Sla deze bestanden op, let erop dat ze in de zelfde map staan, anders kan ie ze niet vinden als je op de links klikt.

Open index.html en klik op de link.. Tadaa, true magic :D


In de volgende tut gaan we stylen met css, en gaan we het hebben over de span en div tags en hoe je je site moet opmaken met alleen div tags met behulp van css


Enjoy, :)

-----------------------------[/hand]
 
Laatst bewerkt door een moderator:
Re: XHTML Basiscursus (ruwe versie)

Zéér mooie en goede tutorial!
Ik heb nu het begin ervan even doorgelezen en het ziet er (op een paar typfouten na :p) super uit!
Ik ga meteen verder met lezen :D toppie!

edit: wanneer komt er een update van XHTML 1.1 ? die is nu ook al uit zag ik op die !doctype website :p
 
Laatst bewerkt door een moderator:
Re: XHTML Basiscursus (ruwe versie)

XHTML 1.1 is ook uit idd.. maar nog niet af, het word aangeraden deze nog niet te gebruiken :)

PS: sorry van de typ fouten.. zal um binnenkort nog even nakijken ;)
 
Laatst bewerkt:
Re: XHTML Basiscursus (ruwe versie)

Dank u, al moet er uiteraard vermeldt worden dat Nano en ik hem samen hebben gemaakt.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan