HTML / XML voor gevorderden XHTML

Een XHTML document bestaat uit onderdelen.

Die staan sinds 1998 gespecificeerd in het Document-Object-Model (DOM)

http://nl.wikipedia.org/wiki/Document_Object_Model

Het stuk tussen de <html></html> is de pagina

die is onder te verdelen in twee delen <head></head> en <body></body>

In de <head> sectie worden dingen geregeld die in de browser,maar buiten het venster (of over het hele venster gaan)

de <title> staat in de bovenbalk van de browser.

Hier kun je leuke en informatieve dingen mee doen.

Ook het favicon en het icoon en de tekst bij een bookmark worden hier ingesteld.

De taal wordt gedeclareerd (google gebruikt dat bijvoorbeeld)

De karakterset (unicode, ascii of een vreemde set chinees, hebreeuws) of wiskundige karakters)

Verder is het zo dat de <head> moet zijn geladen voordat de <body> aan de beurt komt:

allerlei scripts en stylesheets moeten hierin geladen worden.

verder is het de plek voor <meta> tags en documentdefinities

die documentdefinities moeten al voor of in de <html> geregeld worden.

DTD's zijn document type definities, de meeste browsers hebben die aan boord, maar als dat niet het geval is worden die opgehaald bij w3.org.

Een <!DOCTYPE> definitie is verplicht in XHTML.

Waarom zou je XHTML-compatible willen zijn?

In de eerste plaats omdat in XHTML vorm, inhoud en betekenis alle drie aanwezig zijn en dit in de toekomst steeds belangrijker gaat worden.

Het is makkelijker gelijk in XHTML te werken dan achteraf alles over te moeten maken.

Het maakt een meer professionele indruk en het dwingt je om beter te coderen.

Mensen kijken naar je webpagina met allerlei media, niet alleen computers maar ook telefoons etc. Je wilt niet voor elk medium een nieuwe pagina maken.

Er zijn drie verschillende Doctypes die je kunt gebruiken in XHTML.

Strict

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//NL' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>

De bovenstaande code kun je zoals gezegd op de eerste regel van het bestand plaatsen. Deze Strict Doctype is vooral geschikt om te gebruiken wanneer je een hele schone code wilt hebben en je geen speciale mark-up tags gaat gebruiken. Deze Doctype wordt meestal gebruikt in combinatie met Cascading Style Sheets (CSS).

Transitional

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//NL' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

De Transitional Doctype kun je gebruiken wanneer je gebruik wilt maken van tags waarmee je de presentatie van de pagina kunt regelen en wanneer je de pagina geschikt wilt maken voor browsers die geen style sheets ondersteunen.

Frameset

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//NL' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd'>

De Frameset Doctype moet je gebruiken als je een pagina met frames hebt.

Frames zijn eigenlijk uit de tijd geraakt omdat de opmaak helemaal en veel flexibeler met stylesheets geregeld kan worden. De doodsteek is geweest dat zoekmachines niet met framesets konden omgaan en dus ge-frame-de pagina's niet kon indexeren.

Op http://www.w3schools.com/tags/default.asp staan alle tags en is aangegeven bij welk doctype ze horen.

JavaScripten zijn geen geldige code in een XHTML-document, het is immers geen markup, ze moeten in een extern .js bestand worden opgeslagen en met een <script type = 'text/javascript' src = 'javascriptbestand.js'></script> worden opgehaald.

In noodgevallen kan het als <![CDATA[Hier de tekstregels]]> worden geisoleerd van de markup.

De vorm (de opmaak) wordt vooral door stylesheets geregeld, de inhoud in de HTML, de betekenis in XML.

(zie http://www.csszengarden.com/)

Zeker als je je HTML door PHP laat maken is het goed om hoge / duidelijke standaarden na te streven.

Je kunt ook al in de <head> sectie plaatjes laden die bij een mouseover onmiddellijk beschikbaar moeten zijn.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<head>

<title>Titel van de pagina</title>

</head>

<body>

</body>

</html>

Volgens de XML standaard moeten tags met kleine letters worden geschreven en alle tags moeten worden afgesloten, ook enkele tags zoals <br />, <meta..., <hr />, <img..., <link...

Verder moeten binnen de tags bepaalde parameters aanwezig zijn (zoals een alt in een img)

Alle attributen moeten tussen quotes staan.

Documenten moeten altijd worden gevalideerd, voor ze worden afgeleverd (ook als ze door PHP gemaakt zijn)

Merk op dat ik standaard spaties rond een = teken heb en enkele quotes gebruik, dit is een gewoonte die tekst leesbaarder maakt en makkelijker te integreren is met PHP, maar het hoeft niet zo. Elke programmeur ontwikkelt een handschrift dat het beste bij hem/haar past.

De karakterset wordt gedefinieerd door:

andere moglijkheden op http://www.w3schools.com/tags/ref_charactersets.asp

Tot zo ver de <head> sectie

XML en betekenis:

Een woord is voor een computer een rijtje tekens tussen 2 spaties, het heeft geen betekenis of communicatiefunctie zoals voor mensen.

Een postcode, prijs, woonplaats, telefoonnummer of een geboortedatum zijn gewoon woorden voor de computer. Om betekenis te geven aan een woord of zin kunnen we dit binnen XML-tags plaatsen.

Als er <prijs>bedrag</prijs> staat weet de computer dat het om een prijs gaat

dus kun je binnen de pagina gaan zoeken naar prijzen.

Er zijn al enorme voorgedefinieerde lijsten van tags die de uitwisselbaarheid van data bevorderen.

In XML zijn tags case sensitive, en moeten alle attributen binnen quotes staan en moeten alle tags worden afgesloten.

Tagnamen kunnnen kunnen letters, cijfers en leestekens bevatten.

Tagnamen mogen niet met een cijfer of leesteken beginnen.

Tagnamen mogen geen spaties bevatten

net als variabelenamen

Tagnamen mogen niet beginnen met de combinatie xml (of XML, of Xml, etc)

Theoretisch kun je ook HTML tags opnieuw definieren, maar dat is niet verstandig.

De volgende tekens: <>&'”

Hebben betekenis en kunnen in XML dus niet los gebruikt worden.

Ze kunnen wel vervangen worden door de &...; karaktercodes.

< < less than

> > greater than

& & ampersand

' ' apostrophe

" " quotation mark

Spaties hebben in XML (binnen de tags) betekenis (in HTML niet, meerdere spaties en tabs worden genegeerd)

Ook binnnen XML kun je alle tags vormgeven met een stylesheet.

<?xml-stylesheet type = 'text/css' href = 'stylesheet.css' ?>

TAGNAAM

{

color: #FF0000;

font-size: 20pt;

}

HTML markup:

<p></p> en <div></div> zijn de tags waarmee je stukken tekst bij elkaar houdt en van elkaar scheidt.

Gebruik tags waarvoor ze zijn, dus niet <table> als opmaak gebruiken om een plaatje op zijn plaats te krijgen!

Symetrie

Tags moeten symetrisch worden geopend en afgesloten

<b><i>tekst</b></i> is slecht programmeerwerk en valideert niet

hinderlijk is het dat <b>hallo<sup>2</sup></b> ook wordt afgekeurd

Andere slechte gewoontes

de <center></center> tags moeten worden vervangen door

<div align = 'center'></div> moet je ook maar niet meer gebruiken.

<u>, <s>, <strike> en <font> gaan eruit, en moeten als style worden verwerkt

text-decoration:

none

underline

overline

line-through

maar <b> en <i> blijven voorlopig nog.

eigenlijk zou je de HTML alleen moeten gebruiken om blokjes gegevens als objecten bij elkaar te houden die een eenheid vormen en de rest aan een stylesheet overlaten.

Als je een div een name of een id geeft is die ook nog addresseerbaar voor AJAX-opdrachten zoals:

getElementById('ID').innerHTML = 'boodschap'

getElementsByName('NAME') (let even op de s)

met getElementsByTagName kun je bijvoorbeeld een losse cel in een tabel wijzigen

Gouden tips:
Gebruik http://validator.w3.org/
Om oude bestanden te upgraden gebruik je http://www.it.uc3m.es/jaf/html2xhtml/

Bureaublad
Mijn documenten
Deze computer
		Goudappel.org
		Bombast
		Burp™
		Onderwijs
		OOOR
		Uitgeverij
		Xiao-Ting
		Prive
		Usquert
		Dvd(E:)
Mijn netwerk
Prullenbak
Contact
Search in site