HTML

Bij een WYSIWYG programma die de HTML maakt zou het theoretisch niet nodig zijn, maar het is toch handig om de basis van HTML te begrijpen.

Een HTML pagina bestaat uit twee soorten informatie:

• De tekst van de pagina
• De omschrijving van de opmaak van de pagina

In codes wordt omschreven hoe de pagina er uit ziet. De browser (Internet Explorer) leest de HTML codes en bepaald aan de hand van de codes hoe de browser de pagina weer geeft op het scherm.

De HTML codes bestaan uit platte tekst, met platte tekst wordt bedoeld dat de codes van een HTML pagina alleen uit tekst bestaat. Een programma dat alleen tekst aan kan is in Windows Kladblok. Een website kan gemaakt worden door in kladblok alle codes in te typen.

Aan de hand van een voorbeeld zullen basis HTML codes worden uitgelegd.

Resultaat:

Codes:

HTML Codes

Tag

Een HTML code begint met het driehoekige haakje openen < en eindigd met het driehoekige haakje sluiten >. De code die tussen de haakjes staat wordt Tag genoemd.

Een Tag heeft vaak een plaats waar de Tag start en een plaats waar de Tag eindigd. Het einde van een Tag wordt weergegeven door het driehoekige haakje openen < daarna een schuine streep voorwaards / dan de Tag en vervolgens het driehoekige haakje sluiten >.

We zullen de HTML Tags van het voorbeeld document een voor een bespreken.

doctype

De eerste Tag die we tegen komen in het voorbeeld document is doctype. doctype geeft aan welke reeks codes gebruikt worden. Er zijn verschillende versies van HTML, doctype geeft aan welke versie gebruikt wordt. www.w3.org is de organisatie die de codes beheerd. Bij www.w3.org is afgesproken wat de verschillende codes zijn die gebruikt mogen worden en wat de codes betekenen.

html

De volgende Tag in het voorbeeld is html. Om aan te geven dat het om HTML codes gaat wordt de Tag html ingevoegd. De html Tag begint bovenaan in de HTML pagina en eindigd helemaal onder in de HTML pagina met de afsluitende Tag .

head

Bij een HTML pagina is er ruimte gereserveerd voor onzichtbare codes. De teksten en codes in het onzichtbare gedeelte worden niet weer gegeven in de browser, maar kunnen wel informatie bevatten die nodig is voor het goed weergen van de pagina. De Tag om het onzichtbare gedeelte te starten en te sluiten is head.

meta content

In de meta content tag wordt aangegeven welke tekens (taal) het document is. Zijn het Chineese tekens of Nederlandse of Engelse tekens.

title

De Tag title staat in de head en is dus een onzichtbare code, maar de title is wel een belangrijke code. In de title kan een korte omschrijving worden gegeven van de website en de pagina van de website. De title wordt weer gegeven in de bovenste blauwe balk van de browser. De title van deze pagina is Maken Website - HTML Codes.

body

De gegens in de head zijn onzichtbare gevens. Aan het eind van de head begint de body met de zichtbare gegevens.

h1

Een tekst bestaat vaak uit hoofdstuk aanduidingen met daaronder de tekst. Een nette methode om een hoofdstukaanduiding te maken is door gebruik te maken van Kopjes. Er zijn verschillende benamingen om een Kopje aan te geven onder andere: Opmaak profiel, Style en Heading. De h staat voor Heading en de 1 geeft aan dat het een kopje is van het hoogste niveau. De kopjes lopen van h1 tot en met h6 waarbij de letters steeds kleiner worden. Het is niet eenvoudig de opmaak van de Kopjes te veranderen, in HTML kan het niet veranderd worden, in Cascading Style Sheets wel.

p

P staat voor paragraph wat alinea betekend. Elke alinea begint met de p start Tag en eindigd met de p sluit Tag. Na een p sluit tag begint de volgende alinea anderhalve regel lager.

img

In platte tekst is het onmogelijk een foto te beschrijven, daarom worden foto's los in een map opgeslagen en via een HTML code op een bepaalde plaats ingevoegd. Op de plaats waar de Tag img staat wordt de afbeelding in gevoegd. De tekst wordt automatisch opgeschoven om plaats te maken voor de foto. src staat voor source en geeft aan in welke map de foto staat. De map die wordt aangegeven is een relatieve verwijzing. Ten opzichte van de HTML pagina staat de foto onder de sub map afbeeldingen en is de naam van de afbeelding foto_strand.jpg.

b en i

b staat voor bold wat vet gedrukt betekend en i staat voor italic wat cursief betekend. De start Tag en de eind Tag voor b en i kunnen halverwege een regel zijn en zelfs halverwege een woord.

font

In de Tag font kunnen een heleboel eigenschappen van het lettertype ingesteld worden. Een van de mogelijkheden is het instellen van de kleur van het lettertype, color.

a

Met de Tag a kan een hyperlink gemaakt worden. Als op de hyperlink geklikt wordt dan word een andere pagina geopend. In het voorbeeld wordt de pagina voorbeeld.html geopend als op de hyperlink geklikt wordt. De pagina voorbeeld.html staat in dezelfde map als de huidige HTML pagina (relatieve link). Let er op dat de paginanaam hoofdletter gevoelig is. Als er hoofdletters in de bestandsnaam van de pagina staan dan moeten die hoofdletters ook in de bestandsnaam van de hyperlink staan.

table

Een tabel bestaat uit de codes:

• table
• tbody
• tr
• td

Een tabel wordt gestart met de tag table. Bij de tag table kunnen extra opmaak codes worden aangegeven zoals dat de breedte van de tabel 100% van het venster is, width: 100%. Verder is aangegeven dat de dikte van de rand 1 is, border="1".

Na de tag table volgt de tag tbody.

De tag tr geeft aan dat er een rij wordt gestart.

De tag td geeft aan dat er een cel wordt gestart.

Een methode om HTML te leren is door het eerst te leren lezen. Kompozer kan alleen HTML en CSS. Het is mogelijk een website met Kompozer te maken en vervolgens naar de codes kijken om deze te leren lezen. Het is in Kompozer ook mogelijk codes te schrijven.

De codes waarin het woord Style voorkomt zijn CSS codes, de rest zijn HTML codes.