Websites met stijl

1. Kennismaken met HTML, CSS, browser, editor

In dit hoofdstuk

Kennismaken met:

HTML

HTML is de taal waarin webpagina's worden geschreven.
HTML ontstond omstreeks 1991. Inmiddels zijn we aan versie 5 toe, HTML5.

De afkorting HTML betekent HyperText Markup Language oftewel hypertekst markeertaal.

Het voorbeeld van figuur 1 geeft je een idee hoe html eruit ziet:

figuur 1 <h2>Berlijn</h2>
<p>Al enkele jaren na de val van de muur werd Berlijn de bruisende stad in centraal Europa die het nu nog steeds is.<p>

In figuur 1 geven de tags <h2> en </h2> aan dat de tekst ertussen een kop is van niveau 2. (Er zijn zes niveaus: <h1> is de grootste kop, <h6> de kleinste.)
<p> en </p> geven het begin en het einde van een alinea aan.

Zou je dit voorbeeld in een webbrowser bekijken, dan ziet het er ongeveer uit als figuur 2:

figuur 2

Berlijn

Al enkele jaren na de val van de muur werd Berlijn de bruisende stad in centraal Europa die het nu nog steeds is.

In de cursus worden de belangrijkste tags uitgebreid besproken.

CSS stijlblad

CSS staat voor Cascading Style Sheets = gestapelde stijlbladen.
Een CSS stijlblad is een bestand met opmaakregels. Daarin staat precies aangegeven hoe alinea's, koppen, kolommen enz. worden opgemaakt.

In een html-webpagina kan worden aangegeven van welk stijlblad gebruik gemaakt wordt.
Op elke HTML-webpagina met een verwijzing naar een stijlblad, toont de browser de webpagina met de opmaak die in dat stijlblad staat aangegeven.

Dat is eigenlijk een buitengewoon elegante methode. Zet je in het stijlblad: h2 {color: red;}
dan zijn alle koppen van niveau 2 op alle pagina's van je website rood.

figuur 3

Berlijn

Al enkele jaren na de val van de muur werd Berlijn de bruisende stad in centraal Europa die het nu nog steeds is.

Wil je ze later groen maken? Dan hoef je in het stijlblad alleen maar het woord red door green te vervangen: h2 {color: green;} en klaar ben je. Alle koppen van niveau 2 op al je webpagina's zijn nu groen.

figuur 4

Berlijn

Al enkele jaren na de val van de muur werd Berlijn de bruisende stad in centraal Europa die het nu nog steeds is.

Vóór de komst van de stijlbladen kon je met html-tags de kleur van een kop instellen, maar dat moest je dan voor elke kop apart doen.

En wilde je later de opmaak van de koppen wijzigen, dan moest je elke kop op elke webpagina wijzigen, een heel werk op een website van bv. 50 pagina's!

De invoering van stijlbladen betekent wel dat je nu twee talen moet leren:

Ze zullen beiden uitgebreid aan de orde komen in deze cursus.

Webbrowser

Webbrowsers, meestal kortweg browsers genoemd, zijn programma's waarmee je websites kan bekijken. In de afbeelding staan de bekendste opgesomd. Waarschijnlijk staat de browser die jij gebruikt er bij.

In principe moeten alle browsers een website precies hetzelfde tonen. Maar dat is niet altijd het geval. Met name oude versies van Internet Explorer (versies 6-8) stonden erom bekend dat ze websites afwijkend tonen.

Daarnaast is niet elke browser even snel met het ondersteunen van nieuwe mogelijkheden van html en css.
Dat is een reden dat professionele website-designers hun websites altijd controleren op verschillende browsers. Het is niet handig als sommige klanten een website anders zien dan je bedoeld hebt, omdat ze een andere browser(versie) gebruiken dan jij.

Ik raad aan om gebruikt te maken van Firefox of Chrome. Het is niet nodig om verschillende browsers te installeren, zolang je geen websites maakt die breed bekeken gaan worden.

Editor

Voor het maken van documenten in html of css is een editor nodig, dat is een tekstverwerker voor platte tekst, tekst zonder opmaak. De meeste editors herkennen html-tags en css-codes en voorzien die van een kleurtje. Zo is duidelijk te zien, wat de tekst van de webpagina is, en wat de tags zijn. Ook heb je minder kans op tikfouten, want een vergeten punthaak of aanhalingsteken geeft meestal afwijkende kleuren. En die vallen veel eerder op dan de vergeten > of ".

In het volgende hoofdstuk wordt een gratis editor aangeraden.

Opmerkingen:

Klik hieronder op of in de menubalk rechts op .