Een inleiding naar HTML

Bouweenpc 25 augustus 2008 0 Bron:
HTML, dat wordt door velen gezien als dé programmeertaal voor websites. Als je HTML kan, dan kan je ook je eigen website maken, wordt er gedacht. Dit klopt wel deels, want als je een beetje HTML onder de knie hebt, is het mogelijk om een eigen website te maken. Een website als BouweenPC, is dan echter nog niet te maken. Hier komt veel meer bij kijken, wat niet te leren is in een paar dagen. Maar bijna iedere webdeveloper is begonnen met HTML, daarom willen wij jullie een begincursus HTML geven. Met als eerste wat achtergrondinformatie over HTML en zijn “concurrenten”.

HTML, wat is dat?

HyperTextMarkupLanguage, of kortweg HTML, is een computertaal die onder andere voor de opmaak van een document zorgt. Wanneer er geen markeringstekens, Markup, worden gebruikt is alles wat in een HTML-document getypt wordt eigenlijk gewoon platte, standaard, tekst. Als er gebruik gemaakt gaat worden van markeringstekens wordt de opmaak van het document bepaald en krijgen we iets anders dan de normale platte tekst te zien. Door het groeien van de eisen van de gebruiker, is ook het aantal markeringstekens gegroeid. Inmiddels zijn we aanbeland bij versie 4 en versie 5 is al in ontwikkeling. Ook bij versie 5 zijn weer nieuwe dingen toegevoegd en veel veranderingen. Maar we zijn hier niet om alle versies van HTML uitvoerig te bespreken, maar om wat achtergrond informatie over HTML en een begincursus HTML te geven.
HTML is al jarenlang de taal waaraan gedacht wordt, wanneer men aan websites denkt. Toch zien we langzaamaan dat dit gaat veranderen. Zo zien we een nieuwe speler op de markt, genaamd XHTML. Voorheen is er zelfs over gedacht om HTML te laten vallen en alleen met XHTML door te gaan. Dit is echter toch niet doorgegaan, omdat veel ontwikkelaars niet bereid waren om over te stappen op XHTML. XHTML is weer wat uitgebreider en anders dan HTML, maar veel wat je bij HTML leert kan je bij XHTML ook weer gebruiken. Ook is er een onderdeel in XHTML toegevoegd, wat bij HTML apart was. Namelijk stylesheets, deze stijlbladen waren vooral voor de uitgebreidere opmaak. Er was ook een mogelijkheid om deze stijlbladen in het HTML-document te integreren, maar veelal word dit apart gedaan. In XHTML wordt nu ook gebruik gemaakt van stijlbladen. Het verschil met HTML is dat, XHTML een veel striktere syntaxis heeft. Dit houdt in dat het minder flexibel is en alles duidelijker aangegeven is. Als voordeel brengt dit met zich mee dat de parser die nodig is om het document te “ontcijferen”, minder zwaar werk hoeft te doen. Zo kunnen ook mobiele telefoons dit makkelijk ontcijferen en is internet op de telefoon ook sneller bereikbaar geworden voor de consument.
Wat heb je nodig?

Misschien vraag je je nu al langzamerhand af, waar blijft dat HTML nou. Voordat we daar aan kunnen beginnen moeten we nog één laatste punt bespreken. Namelijk de benodigdheden om een HTML-document te schrijven. Hier kunnen we heel kort over zijn. HTML kan geschreven worden met Kladblok en Word, maar je kunt hier ook een editor voor gebruiken als Notepad++ en PHPDesigner. Het voordeel van Notepad++ en PHPDesigner is, dat de verschillende stukken van de code met kleurtjes aangegeven worden. Wat bij elkaar hoort krijgt één kleur. Verder heb je eigenlijk vrij weinig nodig, eventueel nog een webserver om alles te testen. Maar wij gaan nog niet zover, dus hebben we dat niet nodig.

Opmaak

Dit lijkt misschien een rare titel, want wat moet je nou weer opmaken aan de code? Nou eigenlijk hoef je ook helemaal niets speciaals te doen aan de HTML-code. Maar zelf vind ik het makkelijker wanneer er bij iedere nieuwe tag, voor de uitleg van een tag kijk in de volgende alinea, in een andere tag een keer op tab wordt gedrukt zodat hij een stuk verder staat. Voorbeeld:




Ik vind dit een stuk overzichtelijker en helemaal als je veel met in elkaar gebreide tags gaat werken is dit makkelijker. Ook om eventuele fouten eruit te halen, wat bij PHP een stuk vaker voorkomt dan bij HTML. Sommige mensen programmeren gewoon zonder gebruik van tabs. Voorbeeld:




Nu valt er nog wel te zien wat er gebeurt, maar als je uitgebreide scripts gaat schrijven wordt het al een stuk lastiger. Met het eerste voorbeeld kan je dan makkelijker verschillende tags uit elkaar houden en zo sneller eventuele fouten eruit halen.
Let’s get started

Het is eindelijk zo ver we gaan beginnen met de HTML-cursus. Aan het begin van elk document staan altijd een aantal dingen. Deze dingen zijn om wat eigenschappen van het bestand aan te geven. Dit wordt aangegeven tussen de -tags. Tags zijn markeringstekens, bij HEAD is dat bijvoorbeeld: en . Je ziet dat bij de laatste tag een forward slash, dit is om aan te geven dat het gedeelte dat als HEAD beschouwd moet worden afgelopen is. Dit heb je bij alle tags. Zo geven een flink stuk code achter elkaar, wat we daarna gaan “ontleden”.







We beginnen bij het begin, de HTML-tags. Deze zijn natuurlijk om aan te geven dat alles binnen deze tags HTML zijn. Dan komen bij de HEAD-tags, tussen deze tags staat alle header informatie. Wat voor dingen daar worden bepaald komen we nu op, met de TITLE-tags. De TITLE-tags zijn zoals de naam al aangeeft, om de titel aan te geven. Deze titel zie je in je internet browser, bijvoorbeeld helemaal bovenaan:

We zien meteen iets wat niet klopt bij Internet Explorer, je ziet namelijk, in tegenstelling tot hierboven, geen witte pagina. Bij Internet Explorer staan de meta-tags er, waarom dit zo is is niet duidelijk voor ons.

Nu halen we even een stukje erbij wat niet in de code staat, maar om de code uit te leggen is dat wel makkelijker. Om plaatjes aan te geven gebruik je de IMG-tags. Dan plaats je in die tags de volledige link van het plaatje. Als je bij de BASE-tag de “basis”, het eerste gedeelte van de link wat altijd hetzelfde is, aangeeft hoef je niet iedere keer dat standaard gedeelte uit te typen. Dat scheelt weer een hoop getyp. En als laatste hebben we de META-tags, in deze tags staat alle informatie voor de zoekmachine om de website te indexeren. Zo zie je hier de keywords van de site, deze zijn dus: “Computers, HTML en PC”. Alvast even één tip, gebruik altijd keywords die ook echt bij de site passen. Als je dat niet doet dan kan Google bijvoorbeeld je site blokkeren en uit de zoekresultaten halen.

Body en text

Misschien klinkt de titel een beetje vaag, maar deze twee dingen horen toch echt bij elkaar. De text zet je namelijk tussen de BODY-tags. In het Body-gedeelte staat eigenlijk alle opmaak voor de hele site. Als je tussen de HEAD-tags iets zou typen, zou dat niet op de site komen. In het BODY-gedeelte wel, dit is dus het belangrijkste en meest uitgebreide deel van deze HTML-cursus. Het volgende stuk tekst zou alleen maar uit code bestaan, met een stuk commentaar erbij.

Dit is een paragraaf, voor een paragraaf komt automatisch één wit lijn en ook één erachter.

Deze tag zorgt er voor dat er een wit lijn achter dit teken komt, dus gewoon een enter.


Dit is een grote kop


Ook dit is een grote kop, maar iets kleiner


Deze is weer iets kleiner


Deze is al erg klein aan het worden

We zijn al bijna bij de kleinste
En dit is de kleinste


Deze tekst is dik gedrukt
Deze tekst is cursief
Deze tekst in onderstreept
\"Dit

Centreer de text, met deze tags

Deze link leidt naar www.bouweenpc.nl

Zo zijn er nog veel meer tags, maar dit zijn de meest gebruikten. Volgens mij is er niet veel uitleg meer nodig over deze tags.

Tabellen, opsommingen en attributen

Nu we de meeste basistags wel kennen, gaan we een stukje verder. We gaan tabellen en opsommingen maken en het gebruik van attributen uitleggen. Laten we beginnen met de tabellen. Tabellen zijn eigenlijk helemaal niet zo lastig om te maken, je moet alleen goed nadenken wat je doet. Er zijn namelijk tags voor rijen en tags voor cellen. Hoe dit allemaal precies in elkaar zit wordt hopelijk zo duidelijk, wanneer ik een voorbeeld geef.

Dit is cel 1 Dit is cel 2 Dit is cel 3
Dit is cel 1 Dit is cel 2


Nu kan je als het goed is zelf wel bedenken hoe het er komt uit te zien. Je hebt namelijk 5 TD-tags verdeeld over 2 TR-tags. Dat betekend dus dat je 2 rijen en 5 cellen hebt, ik heb express 5 gedaan in plaats van 6 of 4. Zo zie je meteen wat er gebeurt als je niet alle cellen gebruikt die je in de rij er boven hebt aangemaakt. De bovenste rij heeft dus 3 cellen en de onderste 2, maar dit had ook andersom gekund. Bij het maken van de printscreens voor het voorbeeld, stuitte ik weer op één van de dingen waarom programmeurs niet echt van Internet Explorer houden. Deze webbrowser volgt de regeltjes namelijk niet echt goed op. Zo krijg je heel andere resultaten in FireFox dan in Internet Explorer. Links zie je de tabel in Internet Explorer en rechts in FireFox, zoals hij hoort te zijn.

Bij het stukje code hierboven heb ik nog één ding niet behandeld, dit stukje code behandel ik later in dit artikel. Maar het komt er in ieder geval op neer dat er door die tag een rand om de tabel heen komt. Het heeft namelijk met attributen te maken. Er zijn nog een paar tags bij tabellen mogelijk, bijvoorbeeld om de titel aan te geven. Dit doe je doormiddel van de TH-tag, en

.

Opsommingen, iets wat eigenlijk heel simpel is. Er zijn twee mogelijke opsommingen, met hele verschillende eigenschappen. Zo heb je een UL-tag en een OL-tag, de eerste is een unordered list-tag en de tweede is een ordered list-tag. Dit houdt in dat de één wel genummerd is en de ander niet, zometeen met een voorbeeld wordt het wel duidelijker. Om daarna de verschillende onderdelen aan te geven, gebruik je de LI-tag.

  1. Dit is het eerste onderdeel van deze ordered list
  2. Nummer 2 alweer
  3. Wat komt er na 2, oh ja 3 natuurlijk!
  4. Nummer 4? Ja, ook nummer 4 is er bij
  • Dit is het eerste onderdeel van de unordered list
  • De vorige opsomming had hier nummer 2, deze ook?
  • Nee, deze heeft geen nummering namelijk
  • Dat komt omdat het een unordered list is
  1. Alweer een ordered list?
  2. Ja, maar hier ga ik iets speciaals meedoen
    • Huh, een unordered list in een ordered list?
    • Ja, dat kan ook
  3. Maar een ordered list in een ordered list of unordered in een unordered kan ook


Volgens mij is het bovenstaande stukje niet zo heel moeilijk en hoeft er maar weinig uitgelegd te worden. De basis is gewoon een opsomming met of zonder cijfers (OL of UL) en dan zet je daarin de onderdelen met LI-tags.

Als laatste hebben we dan de attributen. Attributen zijn eigenlijk de eigenschappen van een onderdeel. Bijvoorbeeld bij de tabel die wie eerder gebruikten, stond er “border=1”. Dit houdt in dat er een rand van 1 pixel omheen komt. Als je er “border=0” van maakt of het helemaal weglaat, zou je geen rand eromheen hebben. Er zijn nog meer attributen zoals, alt; src; align; width; height; size; face en color. Dit zijn ze natuurlijk niet allemaal, maar we kunnen niet alles hier bespreken.

\'Dit


Dit is een tekst

Zo hebben we een paar handige attributen snel uitgelegd. Deze attributen zal je vaak gebruiken als je intensief gebruik gaat maken van de hier opgedane kennis.
Zoals al eerder in dit artikel vermeld, was HTML op sterven na dood. Tot dat de W3C-directeur Tim Berners-Lee een nieuws koers uitstippelde, waar HTML nog wel bestond. Die koers bestond uit een parallel lopende ontwikkeling van HTML en XHTML. Als gevolg van deze koerswijziging stelde de W3C-groep in maart 2007 een nieuwe HTML Working Group in, die in juni 2007 al een eerste zogenaamde “Working Draft” diende te presenteren. Om dit allemaal mogelijk te maken, moest de HTML Working Group samen werken met de WHATWG-groep. Dit is een groep die uit ongenoegen over de koers van de W3C-groep aan een nieuwe HTML-versie begon, HTML 5. Volgens de planning moet in 2010 de nieuwe HTML-versie klaar zijn.
De nieuwe versie van HTML moet onder andere voorzien zijn van een mogelijkheid om: uitgebreidere formulieren te maken, menu’s te maken en voortgangsindicators te maken. Ook moet de nieuwe versie een makkelijker leesbare code opleveren en worden veel dingen uit HTML verwijderd, omdat dit beter in CSS geschreven kunnen worden. Er zijn naast het verwijderen van tags, ook dingen bij gekomen. Zo zijn er veel attributen toegevoegd en ook nieuwe elementen kunnen worden teruggevonden in HTML 5. Tevens zijn er api’s (Application Programming Interface’s) toegevoegd voor het afspelen van audio en video, wat tot nu toe veelal in javascript werd geprogrammeerd. Overigens is het nog niet zeker of deze optie doorgaat, aangezien er verhalen de ronde doen over het verwijderen van deze optie, onder druk van Apple en Nokia. Verder zou het mogelijk zijn om alle HTML 4-pagina’s nog gewoon te bekijken, HTML 5 moet namelijk backwards-compatible zijn volgens de W3C-groep. Hier wordt zoals je gelezen hebt, weer over XHTML gepraat. Dit komt, doordat XHTML de opvolger van HTML is en daar willen ze eigenlijk zo snel mogelijk op overstappen. Het enige probleem is, de bedrijven willen niet overstappen op XHTML.

XHTML, de toekomst van HTML?

De toekomst van HTML, wat is toekomst? Spreken we dan over 1 a 2 jaar of over 5 tot 10 jaar? Wanneer we over de nabije toekomst (1 a 2 jaar) spreken, dan hebben we HTML zeker nog in beeld. Maar wanneer we over de minder nabije toekomst (5 tot 10 jaar) spreken, is het nog niet duidelijk of HTML dan nog bestaat. Wellicht is er dan nog een lichte doorontwikkeling van HTML, maar XHTML is dan al zeker in beeld. Dus bij deze is de vraag uit de titel beantwoord. Echter is het nog helemaal niet duidelijk wanneer deze verschuiving gaat plaats vinden, dit is helemaal in de handen van de bedrijven. Veel bedrijven willen nog niet overstappen, omdat dit te duur is of te veel problemen met zich meebrengt. Hier is wat voor te zeggen, maar er zitten ook grote voordelen aan XHTML. Zo is er minder rekenkracht voor XHTML nodig en kan dit dus ook makkelijker op mobiele telefoons en PDA’s geïmplanteerd worden. Ook is XHTML makkelijker uit te breiden met nieuwe elementen en attributen, door zijn modularisatie, of makkelijker gezegd het gebruik van modules. Comptabiliteitproblemen die bij HTML ontstonden door onofficiële uitbreidingen van deze programmeertaal, worden zo in één klap opgelost en buitenspel gezet.

Naast het gebruik van XHTML in de toekomst, voor zien wij ook dat het gebruik van CSS steeds hoger wordt. Niet alleen doordat in HTML 5 en XHTML veel opmaak-tags niet meer werken, maar ook omdat het gewoon makkelijker werkt. Misschien denk je nu waarom is CSS dan niet ook uitgelegd in dit artikel, daar is een makkelijke verklaring voor. Als je CSS ook in dit artikel ging bespreken, werd het een enorm artikel of werd alles maar voor de helft besproken. Daarom hebben we er voor gekozen om alleen HTML hier te bespreken en CSS eventueel in een later artikel te bespreken.
Het einde van het bestaan van HTML is voorlopig nog niet in zicht dus, het einde van dit artikel daarentegen komt steeds dichterbij. Er is veel besproken in dit artikel en misschien is het ook wel handig om het nog een tweede of misschien wel een derde keer te lezen. Zo onthoud je alles beter, voor vragen is er natuurlijk altijd plek op het forum van onze site Bouweenpc. Verder is dit alleen maar het begin van HTML en is er nog veel meer over HTML te zeggen. Dit is deel 1 van een reeks van artikelen over HTML.

Geef een reactie