Hoe maak ik een website met HTML?

een HTML website maken

HTML is in beginsel een set codes oftewel tags waarmee u tekst leesbaar in een webbrowser, zoals bijvoorbeeld Internet Explorer, kunt laten weergegeven.

Maar omdat we in staat wilden zijn dingen op het internet net zo mooi te kunnen vormgeven en op te kunnen maken als in een krant of een tijdschrift, werd CSS oftewel Cascading Style Sheets in de loop ter tijd ontwikkeld. CSS is dan ook puur bedoeld voor het opmaken en vormgeven van websites.

Uw eerste webpagina maken met HTML

Als u zich afvraagt 'Hoe maak ik een website met HTML?', dan had u wellicht verwacht dat een website maken met HTML een stuk lastiger zou zijn dan dat u nu gaat zien.

De basis van HTML en het maken van een webpagina met HTML is eigenlijk echt niet moeilijk. Het enige dat u uzelf eigen moet maken is, welke HTML-code waarvoor dient. En uiteraard moet u weten hoe u de verschillende HTML-tags precies schrijft. Want wanneer u daar een fout in maakt, wordt uw webpagina mogelijk niet goed weergegeven.

Iedere webpagina bevat minimaal de volgende HTML-tags, die ook altijd op dezelfde manier in een webpagina worden opgenomen:

deze html tags komen in elke webpagina voor

Om zelf uw eerste webpagina te maken gaat u als volgt te werk:

  • Start de tekst editor Kladblok op, die standaard op elke Windows computer aanwezig is.
  • Typ vervolgens in Kladblok de HTML-code precies zo in, zoals in de afbeelding hierboven staat weergegeven.
  • Sla het bestand op via het menu Bestand, Opslaan in Kladblok. Geef het bestand de naam: test.html en sla het vervolgens op. Onthoud goed waar u het bestand hebt opgeslagen.
  • Open Windows Verkenner en navigeer naar de locatie waar u het bestand test.html hebt opgeslagen.
  • Dubbelklik op het bestand test.html.

Zodra u op het bestand test.html gedubbelklikt hebt, zal uw eerste webpagina in de standaard browser op uw computer worden weergegeven. In de afbeelding hieronder ziet u dat het bestand test.html wordt weergegeven in Internet Explorer.

html zorgt voor de juiste weergave in een webbrowser, zoals internet explorer

U ziet dat wat zichtbaar moet zijn in de webbrowser, inderdaad ook zichtbaar is in de webbrowser. En de titel 'Mijn eerste webpagina' die u uw eerste webpagina hebt gegeven, wordt netjes weergegeven als titel van het tabblad in Internet Explorer.

De tekst is zoals gezegd zichtbaar en ook duidelijk leesbaar. Maar dat is dan ook alles wat ervan gezegd kan worden. Wat u hier ziet is de standaard opmaak van een webpagina en dat ziet er behoorlijk saai uit.

Uw eerste webpagina opmaken en vormgeven met CSS

Nu begrijpt u wellicht ook waarom knappe koppen zich erover gebogen hebben, hoe webpagina's te verfraaien en een unieke uitstraling te geven. Uiteindelijk was daar dan CSS, Cascading Style Sheets.

Een zeer uitgebreide set codes die we aan de HTML-tags kunnen verbinden. En waarmee we precies kunnen aangeven hoe we zowel tekst als ieder ander onderdeel van een webpagina weergegeven willen zien worden in een webbrowser.

webpagina vormgeven en tekst opmaken met css cascading style sheets

In de bovenstaande afbeelding kunt u zien dat we aan ons bestand test.html twee HTML-tags hebben toegevoegd. Te weten de HTML-tag: div en de HTML-tag: p.

Met de HTML-tag div kunt u onder andere een webpagina indelen in diverse elementen. De HTML-tag p wordt gebruikt om paragrafen in de tekst mee aan te geven.

Aan deze HTML-tags hebben we vervolgens CSS opmaakcodes toegevoegd. Door middel van de CSS opmaakcodes geven we de webbrowser opdracht onze webpagina als volgt weer te geven:

  • Met de opdracht 'margin' vertellen we de browser dat de pagina in het midden van het browservenster moet worden weergegeven.
  • Met de opdracht 'padding' vertellen we vervolgens dat het weergeven van de tekst 10 pixels vanaf de rand van het kader moet beginnen.
  • Met de opdracht 'border' geven we aan dat we een rood kader willen van 1 pixel breed.
  • Vervolgens geven we in de HTML-tag p aan dat de tekst in de kleur blauw moet worden weergegeven, dat we als lettertype Verdana willen gebruiken en dat de lettergrootte 15 pixels moet zijn.

Het resultaat van de opmaakcodes die we aan onze webpagina test.html hebben toegevoegd ziet u in onderstaande afbeelding.

met css kunt u iedere website vormgeving maken

Uiteraard hebben we ons voorbeeld zo simpel mogelijk gehouden, met de bedoeling u een zo duidelijk mogelijke indruk te geven van hoe een website maken met HTML in zijn werk gaat. En u op deze wijze een zo duidelijk mogelijk antwoord te geven op de vraag:"Hoe maak ik een website met HTML".

Uit zult begrijpen dat met HTML en CSS de mogelijkheden voor het maken van websites oneindig zijn. Het enige waar u in beperkt zou kunnen worden is uw eigen creativiteit en uw kennis van HTML en CSS. Echter, met een beetje geduld, tijd en toewijding kunt u HTML en CSS zeker onder de knie krijgen.

Artikelen die je mogelijk ook interesseren

Copyright © 2017 Webwijsheid.nl

over webwijsheid contact sitemap privacy statement disclaimer