Maak een HTML pagina
Even wachten! Voor het maken van een webpagina heb je niet meer nodig dan kladblok op je computer maar om de website werkelijk online te zetten, heb je een domeinnaam en een hosting provider nodig.
Natuurlijk zijn er gratis websites maar de website is dan niet van jouw en het is lastiger om goed te ranken in de zoekmachines.
Oke nu we dat gehad hebben, is het tijd om je eerste webpagina te maken.
Wat heb je nodig om een HTML pagina te maken
Geloof het of niet maar het enige wat je nodig hebt is kladblok en een computer.
Op deze pagina ga ik nog niet in op kleuren en vormgeving maar puur op de elementen en de basis van een webpagina. Je zult namelijk eerst de basis moeten weten voordat je andere codes gaat gebruiken.
Indien je geen zin hebt om zelf met HTML aan de slag te gaan kun je ook gebruik maken van de websitemaker van Mijndomein of je website maken met Site Build It!
Inleiding Elementen en HTML tag
Een webpagina is opgebouwd uit elelementen. Als een pagina geladen wordt, kijkt de browser naar herkenningstekens die de elementen markeert.
Die herkenningstekens noemen we Tags. De webpagina is zelf ook een element. Deze begint met de tag en eindigt met de tag . Alle HTML codes staan tussen scherpe haakjes, oftewel "< >"
Als de browser de tag tegenkomt, zal hij het bestand gaan laden in een internetvenster.
< Head > en < body > tag
Een HTML pagina wordt dus voorafgegaan door de tag < html > en afgesloten met .
Op de html pagina kan extra informatie staan die niet in de browser wordt getoond. Bijvoorbeeld kernwoorden waarop een zoekmachine kan reageren. Hiervoor gebruik je de < head > tag. Ook de titel plaats je in de < head > gedeelte. Je eindigt het < head > element met de sluiting .
De tekst van je webpagina plaats je in het hoofdgedeelte van je pagina, tussen de < body > en tags.
Alinea's en de < br > tag
Een grotere hoeveelheid tekst kun je indelen in alinea's door gebruik te maken van de tags < p > en . Deze tag is een afkorting van het woord paragraaf. Aan het begin en einde van je alinea, plaats je respectievelijk de < p > en tag om een alinea te beginnen of te eindigen.
Om in html naar de volgende regel te gaan, gebruik je de tag < br >.
De Enter toets die je in een normaal document gebruikt, word in html niet herkend, vandaar de < br > tag.
Maak je eerste webpagina
Open kladblok op je computer en voer de onderstaande code in.
< html >< head > Zoekmachine titel plaats je hier < title >
< / title >
< / head >
< body >
< p >
Hier komt de tekst van je webpagina
< / p >
< / body >
< / html >
Zodra je dit gedaan hebt, sla je het bestand op als index.html. Let goed op dat je werkelijk .html achter de bestandsnaam zet want dit is de eerste pagina van je website.
Open nu het bestand in je browser en als het goed is zie je een witte pagina met de tekst: "Hier komt de tekst van je webpagina". Ook in de bovenste balk van je venster zie je de titel staan "zoekmachine titel plaats je hier"
Gefeliciteerd, je hebt je eerste webpagina gemaakt!
Het is natuurlijk erg kaal en saai maar je begrijpt dat dit het begin is.
In de code die je net hebt geplaatst in kladblok zie je staan: Zoekmachine titel plaats je hier. Dit is de titel die je in de zoekresultaten zal zien, zodra je website getoond word. Voor de duidelijkheid heb ik de titel rood omlijnd.
Hyperlinks en anchortekst
De grote kracht van het internet is natuurlijk de hyperlink. Door een simpele muisklik kun je van de ene naar de andere webpagina gaan en surfen tussen verschillende websites.
In HTML geef je een hyperlink (vanaf nu gewoon link genoemd) aan met de tags < a > en < / a >.
Open het kladblok bestand dat je eerder hebt gemaakt gemaakt, en haal het woord "webpagina" weg.
Het woord dat je net hebt verwijderd, vervang je door onderstaande html code:
< a href="http://www.Google.nl" > Webpagina < / a >
De HTML code ziet er nu zo uit.
< html >
< head >Zoekmachine titel plaats je hier < title >
< / title >
< / head >
< body >
< p >
Hier komt de tekst van je < a href="http://www.Google.nl" > Webpagina < / a >
< / p >
< / body >
< / html >
Sla de pagina op en als je het index.html bestand opent, zie je als het goed is dat "webpagina" is onderstreept. Zodra je nu op de link klikt, ga je naar de website van Google.
Nu weet je hoe je een blanco webpagina maakt met een hyperlink en de basis elementen je allemaal tegen kunt komen bij het maken van een webpagina.
De volgende stap is om hetzelfde verhaal hierboven opnieuw te proberen met behulp van HTML Kit.