HTML en CSS voor beginners, de definitieve versie

website voor beginner
Het is zover, je gaat je eerste website maken en deze online zetten zodat de hele wereld
kennis kan nemen van jouw informatie. Het is handig dat je al een onderwerp hebt, want
een website die gaat over ‘van alles’, gaat eigenlijk nergens over. Maak een keuze van
iets wat jij leuk vind, wat jouw interesseert en waar je ook wat vanaf weet.

Bepaal je onderwerp

“;
//Print vervolgens wat is ingevoerd in parameter ‘user’ van het formulier
print $_POST[‘onderwerp’];
print “!
Voor dit onderwerp zul je een hoop informatie moeten verzamelen. “;
print ““;
print $_POST[‘onderwerp’];
print “.startpagina.nl
.”;
}
else {
// Anders eerst het formulier
print <<<_HTML_

Vul hieronder in wat het onderwerp wordt van jouw website:


_HTML_;
}
?>

Kladblok als html-editor

Nu je een onderwerp hebt bepaald moet je de website gaan maken. De eerste stappen gaan we met je doornemen.
We gaan werken met het programma ‘Kladblok’ in Windows. Dit is een zeer eenvoudige tekstverwerker.
Meer heb je niet nodig. Maak in ieder geval niet de fout door in een programma als Word 2003 te
gaan werken.

Klik onderaan op start, dan op ‘alle programma’s’, vervolgens op bureau-accessoires en daar klik
je op ‘Kladblok’.
start kladblok op
Kladblok wordt geopend en ziet er ongeveer zo uit.
leeg venster kladblok

HTML tags

We gaan nu code toevoegen. HTML bestaat uit zogenaamde tags. Dit zijn codes die de browser
vertellen wat deze moet laten zien. Zo is er een tag <img> die ervoor zorgt dat er een
plaatje komt te staan in de website. De belangrijkste tag is <html>, deze tag vertelt de
browser dat het document in HyperText Markup Language is geschreven. De meeste tags worden ook weer
afgesloten, dat doe je door er een / voor te zetten, vetgedrukte tekst wordt geopend met een <b>
en afgesloten met een </b>. Eenvoudig toch?

De html code van je eerste webpagina

Hier komt de hele code voor je eerste pagina, deze zullen we daarna uitleggen. Deze code kun je
eenvoudig kopieren en plakken naar je eigen geopende ‘kladblok’pagina.

<html>
  <head>
    <title>Mijn eerste webpagina</title>
  </head>

  <body>
    De inhoud van mijn eerste webpagina.
  </body>
</html>

de code <html> opent het hele bestand, vervolgens krijg je <head>, dit is een deel
waarin extra informatie komt te staan die niet zichtbaar is in het document, daarover later meer,
in onze eerste pagina zetten we er in ieder geval titelinformatie neer met behulp van <title>.
Met de tag <body> open je het eigenlijke deel van de website wat zichtbaar wordt. Hierin
komen de teksten, plaatjes en alle andere zaken die nodig zijn voor je website. Alle tags worden
natuurlijk afgesloten.

Opslaan en bekijken van je eerste webpagina

Je krijgt dan de volgende pagina te zien;
website in kladblok in html geschreven
Nu de pagina nog opslaan. Klik op bestand en dan op ‘opslaan’ of ‘opslaan als…’ Hier
verschijnt dan het volgende venster, waarin je je bestand een naam moet geven.
bestand opslaan als...
Hier maak je bijvoorbeeld van ‘mijn_eerste_website’. Let erop dat je .txt moet vervangen door
.html, zie ook het voorbeeld hieronder. Je maakt namelijk geen tekstbestand, maar een html bestand.
opslaan met extentie .html
Wanneer je nu naar de map gaat, die je daarvoor het beste speciaal kunt aanmaken, dan zie je daar
een internet explorer icoon staan,
html bestand openen
wanneer je daar op klikt wordt je eerste webpagina geopend.
de website is te zien
In de blauwe balk bovenaan de browser zie je nu datgene staan, wat je hebt geplaatst tussen de
tags <title> en </title>. In ons geval is dat ‘Mijn eerste webpagina’.
titelbalk van je eerste website

Hoe verder?

Zo nu heb je je eerste webpagina gemaakt, maar dat stelt allemaal nog niet zoveel voor. Het
belangrijkste onderdeel van een webpagina is tekst. Wanneer je tektst hebt is het handig om deze tekst
onder te verdelen in blokken. Net als een tekst in een krant ofzo wordt tekst verdeeld in
paragrafen. Elke paragraaf begint met een tag en eindigt met een tag, de <p>.
Meestal heeft een paragraaf een titel en heeft een tekst een titel. Ook voor deze onderdelen
bestaat een tag. De grootste kop krijgt over het algemeen <h1> mee, de kleinste kop
binnen een tekst <h6>. Een
voorbeeld, we nemen een tekst met daarin een titel en wat tussenkopjes. De code ziet er dan als
volgt uit:

<h1>De titel van het artikel</h1>
<h2>Eerste tussenkopje</h2>
<p>Het artikel zelf, dat kun je doen met dummytekst,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer non nisl et metus ultrices lobortis.</p>
<h2>Tweede tussenkopje</h2>
<p>Phasellus placerat feugiat dui. Donec a leo. Vestibulum non diam.
Curabitur ipsum. Cras sed mauris. Integer faucibus. Maecenas sodales.
Maecenas hendrerit. Aenean dapibus odio placerat justo. Aliquam ac urna at mi cursus
bibendum. Nullam sem. </p>

Semantische code

Deze teksten tussen <h1> en <h2> zijn belangrijk omdat ze aan zoekmachines vertellen dat het hier
om belangrijke teksten gaat. Dit is ook het basisprincipe van goed geschreven HTML code, namelijk dat het semantisch is.
Semantisch betekent dat er een logische opbouw in de tekst zit. Dat hebben we hierboven gedaan door de titel van de
pagina <h1> mee te geven, en een subtitel, iets minder belangrijk dus, <h2>.

Opmaak met CSS

Vroeger zouden we nu overgestapt zijn naar manieren om teksten wat meer uiterlijk te kunnen veranderen met behulp van
html codes. Zo zou een website vier of vijf jaar geleden allerlei codes hebben gekregen zoals <font color=”red”>,
hiermee kon je een stuk tekst rood maken. Maar nu gebeurt dat op een andere manier, namelijk met CSS. Dit zijn Cascading
Style Sheets. Een CSS document is een apart document naast het html document, die aan het html document gaat vertellen
hoe bepaalde stukken er uit moeten zien. Het gaat bij CSS over de opmaak van het HTML document. Je mag een CSS document
ook gewoon maken met kladblok, alleen moet je het dan niet opslaan als .htm , maar als .css .

Hoe ziet CSS er uit?

CSS ziet er iets anders uit dan HTML. Bij CSS wordt er wel verwezen naar HTML codes. Stel dat we even de code gebruiken
van de code die we even hiervoor hebben gemaakt. Het eerste en tweede tussenkopje moet niet zwart blijven, maar moet rood
worden. Eerst schrijf je dan de verwijzing op naar de HTML code, h2. Daarna ga je vertellen wat er met deze code moet gaan
gebeuren. Dit wordt niet gedaan met < en >, maar met { en }. Een voorbeeld:

h2 {
color: red;
font-size: 13px;
}

Met h2 schrijf je op dat je iets gaat veranderen aan de html code h2. Dan open je het deel waar je dat daadwerkelijk gaat
vertellen met {. Vervolgens schrijven we dat de kleur van de tekst (color) rood moet worden. Eerst wat je gaat veranderen,
namelijk de kleur. Dan een dubbele punt (:) dan de kleur zelf, en afsluiten met een punt-komma (;). Je mag dan op dezelfde regel
verder gaan, maar het is duidelijker om op een volgende regel verder te gaan, we willen namelijk ook de lettergrootte aanpassen.
dat doe je met font-size, weer een dubbele punt, het formaat, en dan weer een punt-komma. Als dat alles is wat we veranderen
willen, dan kun je alles sluiten met }.

CSS koppelen aan je HTML document

Je mag CSS in een html document gebruiken, maar wij maken er voor het gemak een apart document voor. Maar het html document
moet wel op een of andere manier weten waar dat CSS document te vinden is. Dat gaat vrij eenvoudig. Je neemt weer even de code
van een basisdocument en zoekt het gedeelte met <head>. Hier komt de volgende code
te staan:

<head>
  <title>Mijn eerste webpagina</title>
  <link rel="stylesheet" type="text/css" href="jouw_stijl_blad.css">
</head>

Wanneer je nu een CSS document hebt gemaakt met de naam jouw_stijl_blad.css, dan zoekt het HTML document hierin de aanpassingen
voor html codes op. Wanneer we daar ons voorbeeld in plaatsen zoals we deden met h2, dan zou je uiteindelijk een pagina
krijgen met de volgende html code:

<html>
  <head>
    <title>Mijn eerste webpagina</title>
	  <link rel="stylesheet" type="text/css" href="mijn_stijlblad.css">
  </head>

  <body>
    <h1>De titel van het artikel</h1>
	    <h2>Eerste tussenkopje</h2>
	     <p>Het artikel zelf, dat kun je doen met dummytekst,
	     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	     Integer non nisl et metus ultrices lobortis.</p>
	    <h2>Tweede tussenkopje</h2>
	     <p>Phasellus placerat feugiat dui. Donec a leo. Vestibulum non diam.
	     Curabitur ipsum. Cras sed mauris. Integer faucibus. Maecenas sodales.
	     Maecenas hendrerit. Aenean dapibus odio placerat justo. Aliquam ac urna at mi cursus
	     bibendum. Nullam sem. </p>
  </body>
</html>

Het CSS bestand heet ‘mijn_stijblad.css’ en bevat de volgende code:

h2 {
 color: red;
 font-size: 13px;
}

Het resultaat van dit hele proces ziet er zo uit:

de eerste website met een css bestand

Hierbij is het dus zaak dat het CSS document en het HTML document in dezelfde map staan.

Class in CSS en HTML

We gaan nu het CSS bestand eens wat uitbreiden. Zo kunnen we de kop met h1 aanpassen en we doen
wat aanpassingen aan de paragrafen, die worden met <p> aangegeven. Alleen we willen de tweede
paragraaf niet hetzelfde hebben als de eerste paragraaf. In de tweede paragraaf komt de tekst
namelijk schuin (italic) te staan. Dit kan ook weer eenvoudig worden toegepast in CSS. Je moet
daarvoor het volgende doen. In de html code zoek je de <p> van de tweede paragraaf op. Deze
<p> geef je een klasse mee, met de naam ‘schuin’. De code wordt dan <p class=”schuin”>.
Nu kun je het CSS bestand weer openen en die klasse gaan vormgeven. Dat doe je als volgt:

.schuin {
font-style: italic;
}

Je ziet dat er in plaats van een element de klasse wordt genoemd, met daarvoor een punt (.).
Op deze manier krijgt de paragraaf met de klasse ‘schuin’ een ander uiterlijk dan de paragraaf
zonder een klasse. Je kunt deze klasse overigens aan elk element toevoegen, dus als je de eerste
kop (h1) ook schuin wilt maken geef je deze ook de klasse ‘schuin’ mee.

Je website logisch indelen met behulp van id

Er is ook nog een ander type dat je in een CSS bestand kunt gebruiken, namelijk het ‘id’.
Een identificator (id) gebruik je om een stijl te koppelen aan een onderdeel dat maar een keer
voorkomt in een HTML bestand. Meestal wordt een ‘id’ gebruikt om een gedeelte van het document
van stijlen te voorzien. Een voorbeeld, we willen de webpagina verdelen in drie gedeelten, de
kop, het midden en de onderkant. Dit is een onderverdeling die vaak gebruikt wordt. De kop
noemen we ‘header’, het midden noemen we ‘inhoud’ en de onderkant noemen we ‘footer’. De
HTML code wordt nu als volgt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Mijn eerste webpagina</title>
      <link rel="stylesheet" type="text/css" href="mijn_stijlblad.css">
  </head>
 <body>

	<div id="kop">Titel van de website</div>

  <div id="inhoud">
	<h1>De titel van het artikel</h1>
        <h2>Eerste tussenkopje</h2>
         <p>Het artikel zelf, dat kun je doen met dummytekst,
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
         Integer non nisl et metus ultrices lobortis.</p>
        <h2>Tweede tussenkopje</h2>
         <p class="schuin">Phasellus placerat feugiat dui. Donec a leo. Vestibulum non diam.
         Curabitur ipsum. Cras sed mauris. Integer faucibus. Maecenas sodales.
         Maecenas hendrerit. Aenean dapibus odio placerat justo. Aliquam ac urna at mi cursus
         bibendum. Nullam sem. </p>
  </div>

  <div id="footer">&copy; 2007 bladiebla</div>
 </body>
</html>

Om de stijl voor een ‘id’ te bepalen, gebruik je in de css code een hekje (#). Daarna kun je
dezelfde dingen doen die al eerder stonden beschreven. HTML-site heeft een
css referentie, waar je in ieder geval een overzicht van alles
met CSS kunt zien. Nog niet alle onderdelen zijn uitgewerkt, maar het overzicht is wel klaar.

Dan nu ons CSS bestand tot nu toe:

h1 {
 font-size: 18px;
 color: blue;
}
h2 {
 color: red;
 font-size: 13px;
}
p {
 color: #999;
 font-size: 11px;
}
#kop {
 font-size: 21px;
 border: 1px solid black;
 padding: 5px;
}
#inhoud {
 text-align: justify;
}
#footer {
 clear: both;
}
.schuin {
 font-style: italic;
}

Nog wat handige tips

Het voert in dit artikel te ver om alle aspecten toe te lichten, maar bovenstaande geeft je een
idee van hoe je html en css kunt gebruiken. Uiteindelijk is het belangrijk dat je er zoveel
mogelijk mee experimenteert.

Als je naar de HTML code hierboven kijkt dan zie je dat we een doctype hebben toegevoegd. Dit is een beschrijving
van html in een apart document. Meer hierover kun je lezen in een artikel over
Document type definition.

Wat wel belangrijk is, is dat je logische namen bedenkt voor klasses
en ‘id’. En, zoals je hierboven in de code ziet, een logische volgorde aanhoudt. We starten met
h1 (belangrijkste kop) komen dan bij algemene stijlen, daarna de id stijlen en als laatste de
classes stijlen. Op deze manier hou je het overzicht voor jezelf. Je kunt er goed aan doen om
met behulp van commentaarregels,
extra informatie aan je HTML en CSS bestanden toe te voegen.

O ja, nog even het resultaat zoals dat te zien is in Internet Explorer en Firefox.
Pagina in Internet Explorer
Pagina in Firefox
Een goede webdesigner doet er namelijk goed aan om ook Firefox te downloaden als alternatief.
Wil je weten hoe en wat, lees dan het artikel over
Firefox.

Tenslotte

Dit artikel geeft natuurlijk alleen maar de basis weer van het maken van een website. Maar we doorbreken
hiermee wel de traditie om websites te maken met behulp van tabellen en allerlei tags voor het opmaken
van tekst, bijvoorbeeld <font>. We adviseren je om meerdere artikelen te lezen op
deze en andere websites. Probeer zoveel mogelijk uit en laat het resultaat steeds aan anderen zien.
Een website is nooit af, maar wordt wel steeds een beetje beter. Succes.

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *