Inleiding HTML voor absolute beginners

In deze inleiding zal begonnen worden met een stukje geschiedenis over HTML, waar voor het staat en wat het is. Daarna zal uitgelegd worden hoe het kan dat een HTML document of webpagina weergegeven kan worden in de browser. Verder zal verteld worden welke programma's je kan gebruiken om een HTML document te maken en onder welke extensie een document dient te worden opgeslagen. Hierna zal er een begin gemaakt worden met de basis beginselen die uiteindelijk zullen resulteren in een eigen basis gemaakt HTML bestand.

Geschiedenis met betrekking tot het ontstaan van HTML

Hyper text markup language (HTML) werd in 1991 bedacht en ontwikkeld door de Brit Tim Berners-Lee om wetenschappelijke documenten van het CERN in Genève gemakkelijker toegankelijk te maken. Tevens ontwikkelde Tim Berners-Lee de eerste webbrowser namelijk het WorldWidWeb (WWW). Hierop volgend ontwikkelde in 1993 de NCSA een webbrowser Mosaic. Een jaar later in 1994 werd op basis van de webbrowser van de NCSA een browser ontwikkeld door Netscape. Vervolgens kwam ook Microsoft met een webbrowser.

De bovenstaande browsers zorgden ervoor dat er vele elementen toegevoegd werden aan de webtaal HTML. Hierdoor brak er een ware oorlog uit met betrekking tot de ontwikkeling van HTML en de wel en niet geaccepteerde elementen door de verschillende browsers. Dit zorgde er tevens voor dat het maken van een website moeilijker werd aangezien de ene browser de elementen van de andere niet accepteerde of omgekeerd.

In september 1995 werd de eerste officiële versie van HTML goed gekeurd door het World Wide Web Concern (W3C). Het gaat hier dan om versie twee. Een eerste versie van de webtaal heeft nooit officieel bestaan. Vervolgens ontwikkelde het concern nog een aantal versies tot dat in 1999 de HTML versie 4.01 definitief wordt geaccepteerd. Deze versie is tot vandaag nog steeds de officiële standaard. Op dit moment (2014) wordt de HTML standaard voortgezet en ontwikkeld in HTML versie vijf. De eerste opzet van deze versie kreeg publiciteit in 2007, waarnaar er in 2008 een eerste opzet van HTML versie vijf werd geïntroduceerd. Nu in 2014 wordt versie vijf nog steeds ontwikkeld en worden de nieuwe HTML elementen binnen deze versie, steeds meer geaccepteerd door de verschillende browsers.

HTML

Waar staat HTML voor

De afkorting HTML staat voor Hyper Text Markup Language. Hieronder zal in het kort geprobeerd worden te beschrijven waarvoor de verschillende woorden van de afkorting staan.

• Hypertext staat voor de techniek waarmee een verbinding (link)wordt gelegd naar een foto, video, stukje muziek of een ander document.
• Markup is het gebruik van de html om de browser te vertellen hoe de inhoud van het document weergegeven moet worden en naar welke bestemming de hyperlinks moeten leiden.
• Language staat gewoon voor taal.

Wat is HTML

HTML is een statische opmaak taal. Statisch wil zeggen dat de HTML pagina die bezocht wordt steeds het zelfde is en niet kan worden veranderd door de bezoeker van de pagina.

Hoe werkt het opvragen van een html pagina

1. Je vraagt een webpagina op via je Internet provider door een internet adres in te tikken in je browser bijvoorbeeld www.mijneigenpagina.nl.
2. Je computer maakt contact met het netwerk via de browser dat World Wide Web heet. Binnen dit netwerk gaat hij dan opzoek naar een pagina met bijvoorbeeld de naam www.mijneigenpagina.nl en met een uniek adres dat gekoppeld is aan deze pagina. Dit adres wordt dan ook wel het IP-adres genoemd.
3. Op het moment dat de pagina met het juiste IP-adres is gevonden wordt deze terug gezonden naar de computer die hem opvraagd. Vervolgens wordt de opgevraagde pagina weergegeven in de browser.

Welke programma's worden gebruikt om een html pagina te creëren

Er zijn verschillende programma's op de markt om webpagina's in HTML te maken zowel betaald als onbetaald. Een bekend voorbeeld van een betaald programma is Adobe Dreamweaver. Anderzijds zijn er zoals reeds eerder opgemerkt ook onbetaalde programma's. Een goed voorbeeld hiervan is Notepad dat standaard binnen windows te vinden is of Notepad++ wat gratis te downloaden is via Internet. In deze introductie tot HTML zal gebruik gemaakt worden van Notepad.

Met welke extensie worden HTML pagina's opgeslagen

HTML pagina's worden met de extensie ".html" opgeslagen. Om dit te verduidelijken staat hieronder een voorbeeld weergegeven.

index.html
De naam "index" wordt vaak gebruikt voor de eerste HTML pagina op de server afhankelijk van de Internet provider waarbij men is aangesloten.

Wat is een server

Een server is een computer met enorm veel opslagcapaciteit waaraan meerdere computers zijn verbonden. Bij het kopen van een domeinnaam bij een internetprovider, koopt men de naam inclusief een deeltje van het server geheugen waarop de webpagina's gezet kunnen worden.

Wat is een domeinnaam

Een domeinnaam is het adres dat je gebruikt om een webpagina te bezoeken. Een voorbeeld staat hieronder beschreven.
www.mijneigenpagina.nl is een domeinnaam.

De doctype declaration

Helemaal aan het begin van een HTML document wordt de doctype declaratie opgenomen. Ook wel het document type genoemd (DTD). Deze is ervoor bedoeld weer te geven aan welke HTML versie het document voldoet, om wat voor type document het gaat en om de HTML pagina correct weer te geven in de browser. Men maakt onderscheid tussen drie doctype declaraties. Wel te verstaan:

1. Strict. Dit wil zeggen dat alleen de HTML elementen binnen HTML versie 4.01 vallen worden goed gekeurd bij validatie.
2. Transitional. Dit wil zeggen dat alle HTML elementen zowel binnen HTML versie 4.01 en oudere versie worden goedgekeurd bij validatie.
3. Frameset. Dit wel zeggen dat alle HTML elementen binnen HTML versie 4.01, alle oudere HTML versies en framsets worden goedgekeurd bij validatie.

Hieronder staan de verschillende doctype declaraties weergegeven.

Doctype declaratie "strict".

Doctype declaratie "Transitional".

Doctype declaratie "Frameset".

Doctype declaratie voor HTML 5.

Het HTML document valideren

Om te controleren of de webpagina in de juiste HTML codes is geschreven kan de webpagina gevalideerd worden.
Dit kan door programmatuur of verschillende validators die te vinden zijn op het Internet. Een bekende validator is die van het WC3. Hier kan men op drie verschillende wijzen de HTML code van de webpagina controleren.
Dit kan op de volgende wijzen:

1. Valideren door middel van het internet adres.
2. Valideren door middel van het uploaden van het HTML bestand.
3. Valideren door middel van knippen en plakken van de HTML code.

Wat bedoelen ze met tags binnen HTML

Een elementnaam tussen haken noemt men een tag. Er wordt onderscheid gemaakt tussen begin tag en een eind tag ook wel een sluitingstag genoemd. Een eind tag wordt bijna altijd voorzien van een slash met een paar uitzondering nagelaten.Tussen de begin en de eind tag komt de benodigde informatie. Een voorbeeld van een begin en een eind tag met elementnaam en informatie is hieronder weergegeven.


Nu gaan we de bovenstaande code ontleden.

• <h1> is de begin tag met het element. h1.
• Daarna krijgen we gewenste informatie.
• </h1> is de eind tag aangegeven door middel van een slash.

Wat bedoelen ze met elementen binnen HTML

Met het element binnen HTML bedoelen ze zoals hier boven beschreven staat de code tussen de haken. In het bovenstaande geval is dat het element "h1".

Wat bedoelen ze met een attribuut binnen HTML

Met een attribuut binnen HTML bedoelen ze een nadere specificatie van een element. Hieronder zijn "src" en "alt" attributen van de image tag.

De HTML tag

De HTML tag is de begin tag. Deze geeft aan dat het om een HTML document gaat en begint na de doctype declaration.
Verder wordt vaak in de html tag de taal aangegeven waarin het document is geschreven maar dit is niet verplicht. Binnenin de HTML tag bevinden zich alle andere tags waaronder de head tag en de body tag. Hieronder zal een voorbeeld geven worden van de HTML tag.

De head tag

Binnenin de head tag worden een aantal specifieke tags aangegeven. De title tag, meta tags en eventuele scripts.
Ook verwijzingen naar externe cascading style sheets (opmaak bladen voor html), de style tag en verwijzingen naar externe scripts worden hierin aangegeven. Hieronder zal een voorbeeld geven worden van de head tag.

De title tag

De title tag bevindt zich in de head tag en geeft de titel van het HTML document weer in de browser. Verder is de title tag belangrijk omdat deze verschijnt in de browser tabbladen, favorieten en de titel is wanneer iemand een document uitprint. Dan is er nog een aspect meer waarom de title tag zeer belangrijk is. Dit is omdat zoekmachines zoals een Google hier op indexeren. Dit wil zeggen dat ze hier mede op zoeken bij een zoekopdracht. Hieronder zal een voorbeeld geven worden van de title tag.

De body tag

De body tag is vrij vertaald het lijf van de pagina. Hier binnenin wordt de structuur en de eventuele opmaak in vastgelegd. Hieronder zal een voorbeeld geven worden van de body tag.

Wat bedoelen ze met meta tags binnen HTML

Dit zijn tags binnen de head tag die het HTML document zelf beschrijven. Deze tags geven dus niets weer. Zij kunnen alleen informatie geven aan een zoekmachine wanneer deze dat nodig acht bij het indexeren. Dit indexeren door zoekmachines gebeurt door zogenaamde programma's die robots worden genoemd. Deze robots herkennen de rijen woorden als rijen letters daarom is het zeer belangrijk om aandacht te schenken aan de structuur van het HTML document. Robots van zoekmachines herkennen namelijk wel structuren. Door een betere structuur in je HTML document aan te brengen heb je een betere kans om gevonden te worden in deze zoekmachines. We onderscheiden drie belangrijke meta tags die hieronder beschreven zullen worden.

De eerste meta tag is die voor tekenverzameling die gehanteerd wordt.


De tweede meta tag is een korte beschrijving van de HTML pagina. Deze wordt door sommige zoekmachines getoond in de browser onder de titlel. Google doet dit over het algemeen niet en laat deeltje van de tekst van de des betreffende HTML pagina zien wat overeenkomt met de gezocht tekst of woorden. Vindt Google de zoekwoorden niet in de des betreffende pagina dan kijkt Google naar de korte beschrijving in de meta tag. Komen gezochte woorden overeen met die in de meta tag dan geeft Google de korte beschrijving weer in deze tweede meta tag.


De derde meta tag is die van de kernwoorden. In deze derde tag worden kernwoorden opgenomen voor het indexeren van de zoekmachines. Het beste kunnen belangrijke woorden gebruikt worden die ook in de teksten van de HTML pagina staan. Hiermee vergroot men de kans om in de zoekmachines zoals een Google gevonden te worden. De kernwoorden of ook wel "keywords" genoemd dienen gescheiden te worden met een komma.

Hoe ziet de opbouw van een HTML pagina eruit

Nu we alle benodigde informatie hierboven behandeld hebben gaan we een HTML document vervaardigen.
We gaan dit doet aan de hand van een stappenplan waarbinnen de bovengenoemde onderwerpen worden samengesteld.

Stap een

Open het kladblok in Windows en sla het kladblok op als "index.html".

Stap twee

Begin met het toevoegen van een doctype declaration.

Stap drie

Voeg een HTML begin en eind tag toe.

Stap vier

Voeg een head begin en en tag toe.

Stap vijf

Voeg binnen de bovenstaande head tag, een title tag, meta tags en de eventuele verwijzingen toe.

Stap zes

Voeg de body begin en eind tag toe. Binnen in deze tag kunnen dan naar wens meerdere tags worden toegevoegd om dan uiteindelijk te komen tot een HTML pagina voor het web.

Hieronder zijn de bovenstaande stappen samengevoegd tot een basis HTML code. Dat wil zeggen dat elk HTML document tenminste deze tags moet bezitten.

De basis HTML code

Tot slot

Wanneer je bovenstaande code in een kladblok bestand voegt en dit kladblok bestand opslaat als "index.html", dan heb je een HTML document gemaakt. Nu een dubbel klik op het HTML bestand en het opent zich vanzelf in de standaard browser. Succes.