Nationaal Computer Forum
Voor al je problemen met computers, tablets en smartphones

Bekijk resultaten enquête: Heb je wat aan deze tutorial gehad ?

Aantal stemmers
13. Je mag niet stemmen in deze enquête
  • Jup, was duidelijk.

    11 84,62%
  • Nop, ik begreep er niet veel van.

    2 15,38%

XHTML The Basics

Weergegeven resultaten: 1 t/m 4 van 4
  1. #1
    Established Member
    Geregistreerd
    6 april 2005
    Locatie
    Leeuwarden
    Berichten
    265
    Bedankt
    0
    Is bedankt: 0

    Standaard XHTML The Basics

    Handleiding
    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.




    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 en
    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-code:
    <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
    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)







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

    HTML-code:
    <!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-code:
    <!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 tags word dik weergegeven.
    (in HTML 4.1 was dit nog de tag, maar die is vervangen voor in XHTML 1.0)

    De text tussen de tags wordt de tekst schuin weergeven.
    (in HTML 4.1 was dit nog de tag, maar die is vervangen voor 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
    HTML-code:
    <strong><em>Hallo Wereld !</strong></em>

    Dit goed

    HTML-code:
    <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
    tag.
    De
    wordt geinterpreteerd door de browser als een harde enter.

    HTML-code:
    <!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>
    waar je hem ook neerzet of gewoon achter elkaar:


    of onder elkaar:





    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 tag. De tag zit vrij simpel in elkaar.

    HTML-code:
    <!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

    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-code:
    <img src="plaatje.gif" alt="mijn plaatje" width="200" height="120" />
    Plaatje in de directory images
    HTML-code:
    <img src="images/plaatje.gif" alt="mijn plaatje" width="200" height="120" />
    Plaatje staat een directory hoger als de html file
    HTML-code:
    <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-code:
    <!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
    
    <a href="test.html" title="Ga naar de Test page">Klik om naar de andere page te gaan</a>
    
    </body>
    </html> 
    test.html :
    HTML-code:
    <html>
    <body>
    
    Dit is test page
    
    <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


    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,

    -----------------------------

    nationaalcomputerforum.nl © 2010
    Created for Nationaal Computer Forum www.nationaalcomputerforum.nl  (disclaimer)
    Laatst gewijzigd door D Drmmr; 5 maart 2006 om 16:54 Reden: disclaimer toegevoegd

  2. #2
    Enthusiastic Member Janssuh's schermafbeelding
    Geregistreerd
    1 september 2005
    Locatie
    Margraten
    Berichten
    2.225
    Bedankt
    0
    Is bedankt: 0

    Standaard 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 ) super uit!
    Ik ga meteen verder met lezen toppie!

    edit: wanneer komt er een update van XHTML 1.1 ? die is nu ook al uit zag ik op die !doctype website
    Laatst gewijzigd door Janssuh; 21 november 2005 om 18:35

  3. #3
    nano
    Inactief

    Standaard 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 gewijzigd door nano; 22 november 2005 om 12:45

  4. #4
    Established Member
    Geregistreerd
    6 april 2005
    Locatie
    Leeuwarden
    Berichten
    265
    Bedankt
    0
    Is bedankt: 0

    Standaard Re: XHTML Basiscursus (ruwe versie)

    Dank u, al moet er uiteraard vermeldt worden dat Nano en ik hem samen hebben gemaakt.



Regels voor berichten

  • Je mag geen nieuwe discussies starten
  • Je mag niet reageren op berichten
  • Je mag geen bijlagen versturen
  • Je mag niet je berichten bewerken
  •