Hoofdstuk 1
Wat is HTML
HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een "opmaak taal",
d.w.z. het vertelt je browser d.m.v. HTML tags hoe de pagina weergegeven moet worden op het scherm.
HTML is geen programmeertaal zoals vaak gedacht wordt. De tags kun je vergelijken met bouwstenen uit
een lego-set. Er is een bepaald aantal stenen met een vooraf bepaalde vorm die je naar eigen smaak
samen kunt voegen om zo een bouwwerk - in dit geval je webpagina - te creëren. Net als lego is ook
HTML eenvoudig te leren, terwijl je er ook hele ingewikkelde dingen mee kunt doen, maar met het leren
van de basisfuncties kun je al snel fraaie pagina’s bouwen.
HTML5
HTML5 (HyperText Markup Language 5) is de nieuwste versie van de HTML-standaard. Deze nieuwe taal
bevat de functionaliteit van zowel html en xhtml. Verder verbetert HTML5 ook de kleine foutjes van zijn
voorganger en levert hij betere ondersteuning voor webapplicaties. Hoewel HTML5 standaard is, worden
sommige functies niet even goed ondersteund in sommige browsers. De basisfunctionaliteiten zoals die
hier worden uitgelegd, werken echter in alle browsers even goed. Als je tenminste geen typfouten
maakt…
Elementen, attributen, waarden en tags
Even een uitleg van deze vier belangrijke termen die je tegenkomt in deze reader. Iedere pagina bevat
gegevens. Deze gegevens hebben de vorm van elementen. Zo heb je elementen voor tekst, plaatjes,
formulieren, tabellen, etc. Ieder element bestaat uit drie delen: een begintag, de inhoud en een eindtag.
Verder heeft een element verschillende attributen. Zo heeft het element "tekst" bijvoorbeeld als attributen
"lettertype" en "lettergrootte". Tenslotte hebben de attributen weer verschillende waarden. Zo heeft de
tekst een bepaald lettertype, bijvoorbeeld Arial of Courier. Als je geen waarde opgeeft, dan wordt de
standaardwaarde voor het betreffende attribuut gebruikt. Zoals gezegd bestaat een element uit een
begintag, de inhoud en een eindtag. Wat zijn nu tags? Een tag is een HTML code die tussen twee haken:
< en > staat. Een voorbeeld van een tag is en ook
is een tag. Het eerste voorbeeld is een begintag het tweede een eindtag. Een eindtag maak je hetzelfde
als de begintag, maar dan met een /. LET OP: Er zijn een paar elementen die geen inhoud hebben. Deze
hebben daarom wel een begintag, maar geen eindtag.
De opbouw van een pagina
Een HTML pagina heeft, net als jij, een hoofd (het gedeelte) en een romp (het
gedeelte). In de head staan de intelligente dingen van de pagina, bijvoorbeeld informatie voor een
zoekmachine, de titel, eventuele extra scripts (JavaScripts bijvoorbeeld). De body doet het werk. De
basisopbouw van een HTML pagina ziet er zo uit:
<!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>
<body>
…
</body>
</html>
Op de plekken van de stippeltjes kan nog extra code of tekst komen. Tussen de en de komt allerlei
intelligente informatie (scriptjes, informatie voor de zoekmachine).Als je de pagina een titel wilt geven,
plaats je deze ook in de head-tag. Tussen de <body> en de </body> komt de zichtbare pagina zoals
deze in de browser te zien is. Tags worden binnen tags geplaatst. Dit heet nesten. Binnen de HTMLtag
staan een head-tag en een body-tag. In de head-tag staat vervolgens weer een title-tag. Ieder element
heeft zo z’n plek. Een <title> tag in de body plaatsen heeft geen nut. Waar je goed op moet letten is dat
de volgorde van het openen en sluiten van de tags goed is.
Oefening 1
Neem de onderstaande code over (zet onderaan jouw eigen naam):
<!DOCTYPE html>
<html>
<head>
<title>Mijn eerste oefening</title>
</head>
<body>
<p>Hallo allemaal</p>
<p>Dit is mijn eerste HTML pagina<br/>
<font color=”red”>En deze regel is rood</font<br/>
Tot ziens!</p>
Kees de Graaf
</body>
</html>
Sla het bestand op als “oefening1.html”. LET OP: Als je in Notepad typt, moet je zelf de extensie
aangeven.
Open de html-pagina door er op te dubbelklikken. Als het goed is zie je nu de tekst in de browser
verschijnen. Één regel is rood, en hier en daar zitten lege regels tussen. Daarnaast heeft de pagina ook
een titel. Experimenteer met de code. Probeer de kleur (en de grootte) van de tekst veranderen, maak
meer lege regels, …. Elke verandering moet éérst opgeslagen worden voordat je deze kan testen in de
browser!!
Paragraaf en linebreaks
Met de tags voor paragraaf <p> en regeleinde <br> maken we een indeling van de tekst.
Waarschijnlijk heb je al gemerkt dat het niet werkt om alleen maar een ‘enter’ toe te voegen in
notepad. Elke regeleinde moet met een tag worden aangegeven.
De <br>-tag gebruik je alleen maar om naar de volgende regel te gaan. LET OP: deze heeft
geen eindtag. Daarom wordt deze tag meestal als volgt geschreven: <br/>
De <p> en </p> staan aan het begin en eind van een paragraaf en zorgen voor een extra lege
regel. De opmaak van een paragraaf kan je aanpassen door in de <p>-tag verschillende
attributen te plaatsen.
Hieronder zie je een voorbeeld:
<!DOCTYPE html>
<html>
<head>
<title>Mijn tweede pagina</title>
</head>
<body bgcolor="grey" text="#009900">
<p align="center">Hallo allemaal</p>
<p style="color:blue">Dit is alweer mijn tweede pagina.<br/>
<font color="red">En deze regel is rood</font><br/>
Tot ziens!</p>
</body>
</html>
Je ziet dat ook in de body attributen geplaatst kunnen worden. In de tweede paragraaf wordt de “style”-
attribuut gebruikt. Hier komen we later op terug.
Opdracht 1
Maak een eigen webpagina waarin bovenstaande onderwerpen worden gebruikt. Sla deze pagina op als
“opdracht1.html”. De webpagina …
… is gemaakt met kladblok of notepad
… heeft een titel
… bestaat uit code die netjes en correct is opgemaakt
… bestaat uit verschillende paragrafen en regels. De verschillende paragrafen hebben verschillende
opmaak.
… bevat verder de volgende tags:
o met de attributen ‘size’, ‘face’ en ‘color’ o
o <H1>(of een andere grootte)
o Tags om de tekst nadruk te geven (<em>, <strong>, …)
Hoofdstuk 2
HOOFDSTUK 2: PAGINA-INDELING
Met behulp van de pagina- en break-tag kan je de pagina redelijk indelen. Maar het blijft
beperkt. In dit hoofdstuk worden verschillende manieren van pagina-indeling bekeken.
Lijsten
Een lijst is een gestructureerde opsomming van items. We kennen drie soorten lijsten:
In ongeordende lijsten <UL> zijn de items niet genummerd.
Voorbeeld:
<ul>
<li>dit is het eerste item</li>
<li>dit is het tweede item</li>
<li type="square">dit is het derde item</li>
</ul>
Normaal staat er voor elk item een cirkel. Door het attribuut ‘type’ mee te geven is dit te
veranderen.
In geordende <OL> lijsten zijn de items genummerd met behulp van een nummer (decimaal of
Romeins) of een letter. Door het attribuut ‘type’ toe te voegen aan de <OL>-tag bepaal je de
opmaak.
<ol type="a">
<li>dit is het eerste item</li>
<li>dit is het tweede item</li>
<li>dit is het derde item</li>
</ol>
Een definitielijst bestaat uit termen en de beschrijving ervan:
<DL>
<DT>Term 1</DT>
<DD>Beschrijving van term 1</DD>
<DT>Term 2</DT>
<DD>Beschrijving van term 2</DD>
</DL>
DIVs
DIVS
Met een tabel kan je de verschillende onderdelen van een pagina redelijk positioneren. Helaas
heeft een tabel een aantal beperkingen. Als je bijvoorbeeld een onderdeel helaal links op jouw
pagina wilt plaatsen, zal je een tabel ter breedte van de hele pagina moeten maken.
Daarnaast wordt een tabel groter als de inhoud niet in de tabel past. De inhoud bepaalt dus de
grootte, niet de tabel.
Deze, en andere, problemen zijn op te lossen door het gebruik van div’s. ‘Div’ staat voor
division. Je deelt hiermee je pagina op in verschillende delen die een vaste grootte en plaats
(kunnen) hebben, wel of geen scrollbalk, aparte lettertypen, ….
De opmaak (stijl) van een div gebeurt bijna altijd met css.
Omdat er meestal meerdere div’s op één pagina staan, krijgen ze allemaal een aparte naam
(‘id’ of ‘class’).
Voorbeeld:
<div id="div1" style="position:absolute; left:100px; top:200px;
width:300px; height:300px; background-color:#ffff00; overflow:auto;">
Hier staat de inhoud van de div
</div>
Je ziet dat de volledig opmaak in het attribuut “style” staat.
IFRAME
IFRAME
Met een iFrame creëer je een ruimte op jouw pagina waarin je een volledig nieuwe webpagina
kan openen. Dit heeft (o.a.) als groot voordeel dat je maar één keer een menupagina hoeft te
maken. Door een klik op één van de links verschijnt de pagina in het iFrame. De menupagina,
met daarop de knoppen, blijft staan.
Een iFrame wordt meestal geplaatst in een tabel of div.
De code van een iFrame is redelijk simpel:
<iframe src="bestanden/iframe.htm" width="100%" height="150"
name=”eifreem”>
Sorry, je browser ondersteunt geen iframes...
</iframe>
Zorg dat je bovenstaande attributen ook in jouw iframe staan.
src: Hiermee geef je aan welke pagina in het iframe verschijnt zo gauw deze geopend
wordt. Deze pagina is dus direct zichtbaar.
width en height: bepalen de grootte van het iframe
name: Als je het iframe geen naam geeft, kan je de nieuwe pagina niet hier laten openen.
Je moet namelijk een ‘target’ aangeven bij de link.
De hyperlinks zien er als volgt uit:
<A HREF="bestanden/geklikt.htm" TARGET="eifreem"> Klik hier </A><BR />
<A HREF="http://www.google.be" TARGET="eifreem"> Zoek op Google </A>
Opdracht 2
Maak voor deze opdracht een aparte map: ‘opdracht2’. Maak onderstaande pagina, en sla deze op als
opdracht2a.html.
Op deze pagina staat een tabel met twee rijen en twee kolommen. Op de onderste rij zijn de cellen samengevoegd. De cellen van de tabel zijn gekleurd.
In de onderste rij staat een iframe van 100% breed en 100% hoog. In het iframe verschijnt bij het opstarten opdracht2b.html
Bovenin de tabel staan twee hyperlinks:
o De eerste linkt naar opdracht2b.html
o De tweede linkt naar een externe, zelfgekozen, webpagina.
De pagina’s verschijnen in het iframe
Op opdracht2b.html staan drie lijsten. De drie lijsten hebben verschillende opmaak. De pagina heeft een achtergrondkleur
Hoofdstuk 3
Formulieren zijn onmisbaar voor een website, op bijna elke website vind je wel formulieren. Er
zijn verschillende toepassingen die je kan maken met formulieren:
- Formulieren kunnen dienen om de webmaster te contacteren van de website.
- Formulieren worden gebruikt om een bericht op een pagina te plaatsen (denk aan een forum, gastenboek, ...).
- Formulieren kunnen gebruikt wordt om een zoekopdracht uit te voeren, en iets terug te krijgen van een databank.
- Formulieren kunnen informatie van de bezoeker vragen (bijv. naam) en deze met een JavaScript achteraf tonen op de pagina.
In dit hoofdstuk richten we ons vooral op hoe formulieren samen gesteld worden. De verwerking
van zo'n formulier gebeurt meestal in een scripttaal zoals PHP, ASP.NET, JSP, ... In HTML
wordt enkel de opmaak van het formulier verwezenlijkt.
<FORM> Element
Het form element bevat alle gegevens die tot het formulier behoren. Tekstvelden, knoppen,
keuzevakjes, etc worden tussen de <form> en </form> tags geplaatst. Het form element kent
één verplicht attribuut: action. Dit attribuut bepaalt naar waar de data wordt gestuurd wanneer
de submit knop wordt uitgevoerd.
Het attribuut method specificeert welke HTTP-methode gebruikt wordt bij het versturen van de
data. Dit kan of te wel get zijn of post.
get
De data uit het formulier worden via de URI verstuurd naar de URI welke via het action attribuut
is gespecificeerd. De URI ziet er als volgt uit: URI?naam=waarde&naam=waarde. Telkens de
naam van het element gevolgt door zijn waarde.
post
de data uit het formulier wordt opgenomen in de body van een bericht en wordt verzonden naar
de URI welke via het action attribuut is gespecificeerd.
De standaardwaarde, welke wordt aangehouden als het method attribuut niet is gespecificeerd,
is get.
Wanneer de verwerking van het formulier op een nieuwe pagina moet gebeuren, moet je het
target attribuut de waarde _blank geven.
Hieronder een voorbeeld van een formulier waar de data wordt meegegeven via post naar een
PHP pagina:
<form method="post" action="verwerk.php" target="_blank">
<p>Typ uw voornaam in:</p>
<input type="text" name="voornaam" /><br />
<p>Typ uw achternaam in:</p>
<input type="text" name="achternaam" /><br />
<input type="submit" name="verzenden" value="verzenden" />
</form>
Verzenden via E-mail
Om de data van het formulier rechtstreeks door te sturen naar een e-mailadres, zonder gebruik
te maken van een script, plaats je een mail-URL in het action attribuut.
<form method="post" action="mailto:naam@provider.be">
...
</form>
Het bericht van de e-mail van het voorbeeld onder deze paragraaf ziet er als volgt uit wanneer
je "Joel" en "Verheyen" intypt als waarden. Resultaat:
voornaam=Joel&achternaam=Verheyen&verzenden=verzenden
Zoals je opmerkt is dit niet zo duidelijk en gebruiksvriendelijk. Tegenwoordig wordt er dan ook
bijna geen gebruik meer gemaakt van deze techniek, maar wordt er gebruik maakt van een
serverside script (PHP, JSP, ASP.NET, ...) die de e-mail verstuurd via de server. De opmaak
van het bericht kan op die manier naar eigen wens opgesteld worden.
INPUT element
Het input element wordt gebruikt om tekstvelden, knoppen, selectievakjes (checkboxes) en
keuzerondjes (radio buttons) te plaatsen in een formulier. Het attribuut type bepaalt welk type
van input element er gebruikt wordt. Elk input element heeft een naam (attribuut name), om zo
later de waarde te kunnen opvragen. Let wel op dat de naam van elk formulier element uniek
moet zijn. Met het attribuut value wordt de beginwaarde bepaalt van het input element.
Hieronder een overzicht van de meest gebruikte input-elementen.
Kijk voor meer voorbeelden en uitleg op internet.
Tekstveld:
<input type="text" name="tekstveld" size="50" />
Resultaat:
Wachtwoordveld.
Een wachtwoord moeten sterretjes worden zodat mensen in de buurt het niet kunnen lezen. Hiervoor
verander je de waarde van het attribuut type naar "password".
<input type="password" name="wachtwoordveld" />
Resultaat:
Selectievakje (checkbox)
Selectievakjes (checkboxen) in een formulier worden gebruikt wanneer de gebruiker meerdere
opties tegelijk kan kiezen. Door de naam van de checkboxen gelijk te houden geef je aan dat
deze bij elkaar horen.
<input type="checkbox" name="fruit" value="appel" />Appel<br />
<input type="checkbox" name="fruit" value="peer" />Peer<br />
<input type="checkbox" name="fruit" value="banaan" />Banaan<br />
Resultaat:
Keuzerondje (radio button)
Keuzerondjes (radio buttons) in een formulier worden gebruikt wanneer de gebruiker een keuze moet
maken. Bij keuzerondjes kan er maar één tegelijk aangevinkt worden. Een voorbeeld waar keuzerondjes
kunnen gebruikt worden is bij het vragen van het geslacht:
<input type="radio" name="geslacht" value="man" />Mannelijk<br />
<input type="radio" name="geslacht" value="vrouw" />Vrouwelijk
Resultaat:
Tekstvak
Het textarea element is een tekstveld met het verschil dat bij een textarea meerdere lijnen kunnen
ingetypt worden. Het attribuut name is verplicht te definiëren. Het attribuut cols bepaalt de breedte van het
veld terwijl het attribuut rows het aantal rijen bepaalt. De inhoud tussen de start- en de eind tag bepaalt de
beginwaarde van het veld.
<textarea name="textarea" cols="50" rows="10">Dit is een
voorbeeld</textarea>
Resultaat:
Bestand verzenden:
In een formulier kun je de gebruiker de mogelijkheid bieden één of meerdere bestanden naar de
server te sturen. Deze informatie kan enkel verwerkt worden wanneer er een script of een
programma op de server aanwezig is die weet wat er met de bestanden moet gebeuren. Als er
zich geen script of programma bevindt op de server heeft het geen zin om bestanden door te
sturen naar de server.
In het form element moet het enctype attribuut de waarde multipart/form-data krijgen. Op deze
manier weet de server dat er ook een bestand mogelijk wordt doorgestuurd via het formulier
waardoor de server dit op de correcte manier kan verwerken.
<form method="post" enctype="multipart/form-data"
action="verwerking.php">
<input type="file" name="bestand" /><br />
<input type="submit" value="Verzenden" />
</form>
Resultaat:
Button
De buttons in een formulier zijn dat gene die een formulier inwerking laat treden. Er zijn verschillende
soorten buttons die je kunt gebruiken in een formulier. Al de buttons beginnen met de input tag maar
hebben een verschillend type (button, submit, reset of image). De submitknop zorgt ervoor dat het
formulier over gaat tot verwerking en de locatie volgt die is gespecificeerd in het action attribuut van het
bijhorende form element.
<input type="submit" name="verzendknop" value="Verzenden" />
Resultaat:
Bij het klikken op de resetknop krijgen alle elementen in het bijhorende formulier terug hun beginwaarde.
<input type="reset" name="r_knop" value="Terug naar beginwaarden" />
Resultaat:
Opdracht 3
Maak een formulier dat via een “mailto”-actie wordt verstuurd.
Bedenk zelf de vragen, maar zorg dat deze vragen bij elkaar passen.
In het formulier komen minimaal vijf verschillende soorten inputelementen te staan.
Onderaan staat een verzendknop en een resetknop.
Zorg voor een overzichtelijk formulier
Sla deze pagina op als “opdracht3.html”
Hoofdstuk 4
In de vorige hoofdstukken wordt uitgelegd hoe je met HTML een redelijke website maken. Maar
de opmaak hebben we nog niet bekeken. In de volgende hoofdstukken wordt verteld hoe je met
CSS jouw pagina’s de juiste opmaak kan geven
Wat is CSS?
CSS is de afkorting van Cascading Style Sheets en wordt gebruikt om de opmaak te bepalen
van websites. Zo wordt bijvoorbeeld met behulp van CSS bepaald welk lettertype er wordt
gebruikt, kleuren, etc. maar ook bijvoorbeeld de positionering van div's.
Een paar belangrijke redenen om CSS te gebruiken:
- Met CSS kun je in hoge mate de weergave van je pagina bepalen en kun je effecten bereiken die met HTML tags alleen niet mogelijk zijn. Zo kun je bijvoorbeeld bepalen dat alle <h3> tags 18 Points groot moet zijn in de kleur rood en met het lettertype Arial. Het is dus veel flexibeler dan HTML wat de vormgeving betreft.
- CSS stelt je in staat om alle stijlelementen van een website in een document onder te brengen. Dat wil zeggen dat je maar een document hoeft te veranderen om alle pagina's van je site aan te passen. Wil je bijvoorbeeld de kleur van al je Headings veranderen of het lettertype dat je in je paragrafen gebruikt? Dan verander je het CSS document en alle pagina's nemen deze stijl dan over. Met HTML zou je al deze wijzigingen in alle pagina's moeten aanbrengen, wat veel meer werk is.
- De pagina's van je site worden kleiner doordat je veel minder code hoeft te gebruiken. Hierdoor zal je site sneller laden.
- CSS code is browser-vriendelijk. Het wordt ondersteund door de meeste browsers. Lager browsers negeren CSS waardoor het daar niet voor problemen zorgt.
INLINE, INTERN en EXTERN
Als je stijlregels wilt opstellen voor je pagina's dan zullen deze pagina's moeten verwijzen,
oftewel linken, naar de betreffende Style Sheet. Dit wordt ook wel aangeduid als de
implementatie van Style Sheets in HTML.
Dit verwijzen naar de Style Sheets in een HTML pagina kan op drie manieren:
1. Inline Style Sheet
2. Internal (of "Embedded") Style Sheet
3. External Style Sheet
1. In een inline stylesheet worden de stijlelementen direct toegevoegd aan de HTML tag.
Deze manier is niet erg handig, omdat je de stijlelementen bij iedere tag opnieuw moet
intypen. Gebruik de inline Style Sheet alleen als je een unieke stijl aan een enkele tag wilt
geven, niet als je de stijl op meerdere pagina's wilt gebruiken. Gebruik dan één van de
andere twee methodes.
Voorbeeld van een inline Style Sheet:
<html>
<head>
<title>Inline stylesheet.</title>
</head>
<body>
<p style= "font:Verdana; background-color:#999" >
dit is een paragraaf met apart lettertype <br/>
en grijze achtergrond.
</p>
</body>
</html>
2. Bij de internal (of embedded) Stylesheet schrijf je de stijlinformatie tussen de <head> en
</head> tags.
De stijlinformatie in deze Style Sheet wordt dan alleen toegepast op dit ene document.
De internal Style Sheet is daarmee ideaal voor sites die maar een paar pagina's groot zijn of
voor individuele pagina's die een aparte stijl moeten hebben ten opzichte van de rest van de
site.
Voorbeeld van een internal (embedded) Style Sheet:
<html>
<head>
<style type="text/css">
p{
font:Verdana;
background-color:#999;
}
</style>
<title>Interne stylesheet</title>
</head>
<body>
<p>
dit is een paragraaf met apart lettertype <br/>
en grijze achtergrond.
</P>
</body>
</html>
3. Een external Style Sheet staat in een apart document met de extensie .css. Er wordt gelinkt naar dit
.css document met de link tag, zie het voorbeeld hieronder. External Style Sheets zijn ideaal voor grote
sites met veel pagina's, omdat de stijlinformatie van alle pagina's in een document gezet kan worden. Wil
je de stijl van je pagina's veranderen, dan hoef je slechts een document te veranderen om alle pagina's
aan te passen! Dit scheelt erg veel tijd.
Onderstaande html-pagina verwijst naar een externe stylesheet:
<html>
<head>
<link href="stijl.css" rel="stylesheet" type="text/css" />
<title>Externe stylesheet</title>
</head>
<body>
<p>
dit is een paragraaf met apart lettertype <br/>
en grijze achtergrond.
</P>
</body>
</html>
Het externe stylesheet ziet er (bijvoorbeeld) zo uit:
body{
background-image:url(media/palmboom.jpg);
font:Arial, Helvetica, sans-serif;
}
p{
font:Verdana;
background-color:#999;
}
Deze pagina heeft geen begin en einde. Je geeft alleen de opmaak aan. LET OP: Als je een external
Style Sheet gebruikt moet je zorgen dat dit externe bestand een .css extensie heeft, dus bijvoorbeeld
"stijl.css". Hoewel het stylesheet de voorkeur geniet, zullen we in deze reader vaak het insterne stylesheet
gebruiken. Dit, omdat de meeste opdrachten uit één pagina bestaan. Dan is het makkelijker om de
opmaak in de pagina zelf te zetten.
Oefening 2
Neem de vorige voorbeelden over en test ze uit. Probeer de opmaak te veranderen en uit te breiden,
en kijk wat het effect is.
De Syntax
In een stijlblok in de head van een document en in een extern stijlblad worden de stijlen
vastgelegd met stijlregels. Een stijlregel bestaat uit twee delen: een selector en een blok met
één of meer stijldeclaraties, dat wordt begrensd door accolades (gekrulde haken):
selector { stijldeclaratie }
De selector selecteert de elementen waarvoor de gedeclareerde stijl geldt. Er zijn verschillende soorten
selectors, bijvoorbeeld element-selectors, attribuut-selectors en CLASS- en IDselectors.
Een stijlregel waarbij het H3 element de element-selector is, ziet er bijvoorbeeld als volgt uit:
H3 { font-family: sans-serif; font-size: 16px; }
Een stijlregel waarbij een CLASS-selector is gebruikt is bijvoorbeeld:
<html>
<head>
<style type="text/css">
.speciaal {
color: #FF0000;
background-color: #FFFFFF;
}
</style>
<title>Interne stylesheet</title>
</head>
<body>
<H3 CLASS="speciaal">De tekst van deze H3 is rood</H3>
<P CLASS="speciaal">De tekst van deze P is ook rood</P>
</body>
</html>
Zoals je ziet, kan je deze selector aan één of meer HTML-elementen koppelen via het CLASS attribuut. In
het stylesheet geef je met een punt (.) aan dat het om een CLASS gaat.
Een stijlregel waarbij een ID-selector is gebruikt is bijvoorbeeld:
<html>
<head>
<style type="text/css">
#speciaal{
color: #FF0000;
background-color: #FFFFFF;
}
</style>
<title>Interne stylesheet</title>
</head>
<body>
<h3 id="speciaal">De tekst van deze H3 is rood</h3>
</body>
</html>
In de stylesheet geef je met een hekje (#) aan dat het om een ID gaat.
Het verschil tussen een CLASS en een ID is dat je een ID gebruikt voor één element, terwijl je
een CLASS vaker per pagina gebruikt.
Bij grote stylesheets is het handig om opmerkingen te plaatsen, zodat de code overzichtelijker
blijft. Opmerking worden geplaatst tussen “/*…..*/”.
Bijvoorbeeld:
/* De opmaak voor de paragraaf */
p{
font:Verdana;
background-color:#999;
}
/* de opmaak voor de 'rood'-class */
.rood{
color:#F00;
}
Opdracht 4
Maak een HTML-pagina met een interne stylesheet.
In de opmaak van de pagina maak je gebruik van de drie verschillende selectors:
Element, ID én CLASS.
Pas ook de stijl van de body aan.
Sla de pagina op als opdracht4.html.
Hoofdstuk 5
Met behulp van css kan je het uiterlijk van een webpagina op vele manieren verfraaien. In dit hoofdstuk
wordt uitgelegd hoe je dat kan doen. Om specifieke elementen te kunnen veranderen maken we gebruik
van de attributen ‘div’ en ‘id’, en van het element ‘<div>’.
Achtergrond
Met behulp van CSS is uiteraard ook mogelijk om een achtergrondkleur of een achtergrondafbeelding toe
te voegen aan je website. Ook is het mogelijk om een achtergrondkleur of afbeelding te plaatsen in
bijvoorbeeld een tabelcel, of een div etc. In onderstaande voorbeelden wordt steeds de achtergrond van
de <body> aangepast.
Achtergrondkleur
Als eerste de achtergrondkleur, om deze in te stellen voor je website gebruik je de
onderstaande "background-color" in je CSS code. Achteraan de code staat de kleur
aangegeven wat in het onderstaande geval rood is (#FF0000).
Om de kleur om de gehele pagina toe te passen stel je het in voor de body zoals hieronder.
<style type="text/css">
body {
background-color:#FF0000;
}
</style>
De achtergrondkleur is nu toegepast op de gehele website maar je kunt uiteraard het ook alleen instellen
op bijvoorbeeld een div. In de CSS geef je dan de classnaam aan die je aan de div in je HTML code hebt
meegegeven. In de CSS vermeld je het hetzelfde als hierboven met op de plek van de body de
.classnaam.
Achtergrondafbeelding
Een achtergrondafbeelding is ook in te stellen, bijvoorbeeld een patroon of een foto. In de CSS gebruik je
dan de onderstaande code waarin achter "url" de plek van de afbeelding staat die je gebruikt.
<style type="text/css">
body {
background-image: url(jouwplaatje.gif);
}
</style>
Als je een afbeelding toevoegt als achtergrond voor je website wordt deze standaard
horizontaal en verticaal herhaald schermvullend. Met een aanvullende code in de CSS kun je
bepalen dat een afbeelding of alleen horizontaal of alleen verticaal wordt herhaald.
De opties hiervoor zijn als volgt:
- repeat - Herhaal de achtergrond zowel horizontaal als verticaal
- repeat-x - Herhaal de achtergrond horizontaal
- repeat-y - Herhaal de achtergrond verticaal
- no-repeat - Achtergrond wordt niet herhaald
In de CSS code voeg je dat als volgt toe, hieronder is aangegeven dat de afbeelding alleen
horizontaal herhaald.
<style type="text/css">
body {
background-image: url(jouwplaatje.gif);
background-repeat:repeat-x;
}
</style>
Op de bovenstaande manier kun je een afbeelding toevoegen aan je website of bijvoorbeeld aan een
tabelcel of een div. In sommige gevallen is het ook handig om de positie van de achtergrond te bepalen,
bijvoorbeeld voor een achtergrond van een pagina waar de afbeelding in het midden of onderaan de
pagina moet komen of bijvoorbeeld een bepaald aantal pixels vanaf de zijkant.
Daarvoor gebruik je "background-position:" gevolgd door 1 van de onderstaande waardes.
(Sommige kunnen ook gecombineerd worden!).
- bottom - Achtergrond aan de onderkant van de pagina
- center - Achtergrond in het midden van de pagina
- left - Achtergrond aan de linkerkant van de pagina
- right - Achtergrond aan de rechterkant van de pagina
- top - Achtergrond aan de bovenkant van de pagina
Als laatste is er nog "background-position:10px 30px;", de achtergrond wordt dan geplaatst door een
eigen ingegeven aantal pixels, het eerste getal (10px) is het aantal pixels vanaf de linkerkant, het tweede
getal (30px) is het aantal pixels vanaf de bovenkant, dit is aan te passen naar wens.
In de code ziet dit er als volgt uit:
<style type="text/css">
body {
background-image: url(jouwplaatje.gif);
background-repeat:repeat-x;
background-position:10px 30px;
}
</style>
Als laatste kun je voor een achtergrondafbeelding van bijvoorbeeld de website bepalen of deze
stil moet blijven staan of herhaald moet meebewegen als je gaat scrollen op de pagina.
Meebewegen geef je aan met, background-attachement: scroll; en stil blijven staan krijg je met,
background-attachement: fixed;
In de CSS zelf ziet het er bijvoorbeeld als totaal dan zo uit.
<style type="text/css">
body {
background-image: url(jouwplaatje.gif);
background-repeat: no-repeat;
background-attachement: fixed;
}
</style>
Tekst
Met behulp van CSS kun je de gehele opmaak van je website bepalen, 1 van de belangrijke onderdelen
die je dan opmaakt met CSS is de tekst op de pagina's. Eigenschappen als lettertype, kleur, grootte etc.
kun je eenvoudig allemaal aangeven. Deze stijlen kun je dan toepassen op alle tekst (p) op een website
maar uiteraard ook per element zoals per div of tabel. Een voorbeeld van opmaak voor alle tekst die
omringd is met P (paragraph) tags hieronder met daaronder uitleg over de verscheidende tekstopmaak
eigenschappen.
<style type="text/css">
p {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 18px;
color: #FF0000;
}
</style>
De eerste paar eigenschappen die je zult gebruiken voor tekst zijn de onderstaande:
font-family
Voor je website kun je middels CSS een specifiek lettertype instellen voor je tekst. Het is
belangrijk om hiervoor een web-safe lettertype in te stellen. Een web-safe lettertype is een
lettertype die over het algemeen is geïnstalleerd op vrijwel alle computers waardoor alle
bezoekers je website goed kunnen bekijken in het aangegeven lettertype zoals Arial. Op deze
manier voorkom je dat je website er plots anders uitziet voor een bezoeker. In de code definieer
je een aantal lettertypes, als een bezoeker het eerst vermelde lettertype niet heeft wordt er
automatisch gekeken of het tweede lettertype aanwezig is, enzovoort. Een overzicht van
webveilige lettertypes staat hier onder.
Het is wel mogelijk om andere lettertypes voor bijvoorbeeld kopjes te gebruiken met behulp van de
techniek sIFR, een combinatie van Javascript en Flash.
font-size
Hiermee geef je de grootte van het lettertype aan. De grootte kun je aangeven op diverse
manieren, pt, px, cm, em en %. Door het lettertype eventueel te definieren middels em of %
maak je het de gebruiker mogelijk om via de browserinstellingen de tekstgrootte te wijzigen. Het
overzicht van verschillende waardes hieronder:
font-style
Hiermee kun je de tekst bijvoorbeeld cursief zetten, dan vervang je normal voor italic.
font-weight
Tekst kun je natuurlijk ook vet / bold / strong maken, dit geef je aan met font-weight. Door
normal door bold te vervangen maak je de tekst vet. Je kunt de mate van dikte ook verder
instellen naar wens door de waarders bolder, lighter of 100, 200 en 800 te gebruiken.
text-decoration
Met text-decoration kun je bijvoorbeeld links of andere teksten voorzien van een onderlijning,
doorlijnen of een lijn erboven. Waardes hiervan zijn, underline, overline, line-through. Een
voorbeeld van de drie waardes hieronder:
text-align
De tekst kun je ook uitlijnen, links rechts en in het midden. De waardes om dit te bepalen binnen
een element zijn: center, left en right. Justify is ook een optie, hiermee wordt de tekst uitevuld
binnen het element wat je hieronder kunt zien:
Color
De kleur geef je aan met kleurcodes, #00000 staat voor zwart, #FFFFFF is wit. Meer codes van
kleuren vind je onder de webtools : Kleurcode pallet. Voor een aantal standaard webkleuren is
het ook mogelijk om de naam van de kleur op te geven, bijvoorbeeld red voor rood, black voor
zwart en white voor wit.
line-height: 18px;
Met line-height bepaal je de regel afstand, als je deze eigenschap weglaat uit je css is de regelafstand
normaal, door deze wel in te stellen kun je de regelafstand dus vergroten/verkleinen zoals dat
bijvoorbeeld ook kan met tekst in Word. Vooral met grote stukken tekst is het vaak leesbaarder als de
regelafstand enigszins ietsjes groter is.
letter-spacing: 5pt
Word-spacing en letter-spacing zijn nog twee andere opties. Word-spacing geeft de mogelijkheid om de
ruimte tussen woorden te vergroten. Letter-spacing zorgt ervoor dat de ruimte tussen de letters zelf wordt
vergroot:
text-transform:uppercase;
Met de eigenschap text-transform heb je een aantal opties om standaard de tekst in hoofdletters
of juist kleine letters te plaatsen. Deze eigenschap overruled dan de manier waarop je tekst
getypt hebt. Als je tekst in hoofdletters type maar met text-transform zegt dat tekst in kleine
letters weergegeven moeten worden dan is dit laatste het geval. Waardes hiervoor
zijn UPPERCASE lowercase en Capitalize. Met deze laatste wordt altijd de eerste letter van een
woord voorzien van een hoofdletter.
text-shadow:1px 1px 1px #cccccc;
De eigenschap text-shadow is een manier om schaduw toe te voegen aan tekst. Dit kan
bijvoorbeeld mooi staan bij een H1, etc. Je geeft in de code de dikte van de schaduw aan
evenals de kleur. Een voorbeeld van een grijze schaduw zie je hieronder.
text-indent:30px;
Met de eigenschap tekst-indent kun je bepalen dat de eerste regel van een paragraaf inspringt.
Een voorbeeld hieronder waarin text-indent is ingesteld op 30px.
In een interne stylesheet ziet de code van de p (paragraph) tekst er dan zo uit. In een extern stylesheet
komen dan de CSS tags te vervallen.
<style type="text/css">
p {
font-size: 12 pt;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 18px;
color: #FF0000;
}
</style>
Nu is het natuurlijk niet zo dat je al je tekst dezelfde opmaak hoeft te geven, met name voor kopjes van
teksten is het mooi als je deze een iets andere opmaak geeft als je normale tekst door bijvoorbeeld een
andere kleur of lettertype.
Net als in HTML geef je kopjes ook aan met H1 t/m H6. Je gebruikt hiervoor ook weer de font
eigenschappen zoals hierboven, een voorbeeld van zo'n kopje ziet er dan als volgt uit in combinatie met
het P (paragraph opmaak).
<style type="text/css">
p {
font-size: 12 pt;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 18px;
color: #FF0000;
}
H1 {
font-size: 16 pt;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: normal;
color: #FF5700;
}
</style>
Hyperlink en Pseudoclass
Met Pseudo-Classes kun je de linkkleur instellen. Ook kun je verschillende linkkleuren instellen
voor een pagina, dus bijvoorbeeld groene en blauwe links.
Er zijn vier verschillende Pseudo-Classes voor links:
a:link (normale link)
a:visited (bezochte link)
a:hover (de muis staat op de link)
a:active (als je op de link klikt)
Voorbeeld:
<html>
<head>
<title>Voorbeeld van classes</title>
<style type="text/css">
<!--
a:link { color: red }
a:visited { color: yellow }
a:hover { color: purple }
a:active { color: green }
-->
</style>
</head>
<body>
<a href="http://www.glr.nl/">Bezoek het glr!</a>
</body>
</html>
Let op dat de volgorde van belang kan zijn. In een verkeerde volgorde kan het voorkomen dat
de opmaak niet werkt!
Neem de code over en test het resultaat.
Link zonder streep eronder
Wil je de links zonder streep eronder? Dan moet je een eigenschap gebruiken die we al eerder
gezien hebben: text-decoration, met als waarde: none.
Voorbeeld:
a:link { color: red; text-decoration: none }
a:visited { color: yellow; text-decoration: none }
a:hover { color: purple; text-decoration: none }
a:active { color: green; text-decoration: none }
Achtergrond voor links
Ook kun je een achtergrondkleur instellen voor je links, met: background-color.
Voorbeeld:
a:link { color: red; background-color: black }
a:visited { color: yellow; background-color: black }
a:hover { color: purple; background-color: black }
a:active { color: green; background-color: black }
Twee kleuren links
Soms kan het handig zijn om meerdere kleuren links op een pagina te hebben, bijvoorbeeld
voor interne en externe links. Ook dat kan. Stel je wilt blauwe en paarse links op je pagina.
Dat doe je dan als volgt:
<html>
<head>
<title>Twee kleuren links</title>
<style type="text/css">
<!--
a.blauw:link { color: blue }
a.blauw:visited { color: yellow }
a.blauw:hover { color: lime }
a.blauw:active { color: green }
a.paars:link { color: purple }
a.paars:visited { color: yellow }
a.paars:hover { color: lime }
a.paars:active { color: green }
-->
</style>
</head>
<body>
<a class="blauw" href="http://www.glr.nl/">blauwe link!</a>
<a class="paars" href="http://www.glr.nl/">paarse link!</a>
</body>
</html>
Lijsten
Lijsten voor opsommingen kunnen worden geplaatst op 2 manieren, de unordered list stijl (ul)
en de ordered list stijl (ol).
Als eerst de unordered list stijl. De unorderd stijl is voorzien van een punt/cirkel of een
afbeelding voor de opsomming en zit er geen volgorde in.
Op de ordered manier maak je je lijstje/opsomming met een nummering bijvoorbeeld 1 t/m 5.
Unordered list
Als eerste dan de unordered list stijl, de HTML code voor een unordered lijstje is.
<ul>
<li>test</li>
<li>test</li>
</ul>
List-style is de optie voor de CSS waarmee je opsommingen kunt voorzien van een punt ervoor of een
afbeelding ervoor etc. Je kunt diverse opsommingstekens gebruiken, waardes voor de List-style zijn disc,
circle en square.
In de CSS geef je dit aan als volgt aan:
<style type="text/css">
ul li {
list-style-type: square;
}
</style>
Hieronder voorbeelden van disc, circle en square.
Het is ook mogelijk de eigenschappen disc, circle en square van een eigen kleur te voorzien. Normaal
gesproken zijn deze bullets zwart maar door in de CSS de regel "color:#FF0000;" toe te voegen kun je
een eigen kleur aan de bullet meegeven zoals hierboven als voorbeeld bij Disc. Echter, de tekst binnen
de LI krijgt dan ook deze kleur, als alternatief kun je hiervoor <P> tags plaatsen om de tekst en
vervolgens middels CSS de P een andere kleur meegeven. Een andere optie om de opsomming op te
maken is om een eigen afbeelding als bullet te gebruiken in plaats van de netgenoemde opties hierboven.
Dit bereik je door in de CSS de volgende code in te voegen:
ul {
list-style-image: url('afbeelding.gif');
}
Dit is handig om toe te passen bij bijvoorbeeld een menu dat je opbouwt middels een UL.
Ordererd list
Dit gaat ongeveer op dezelfde manier voor een ordererd list. Standaard is het genummerd met
nummers maar ook hieraan kun je verschillende soorten nummering aangeven:
{list-style-type: lower-roman} //Kleine Romeinse cijfers
{list-style-type: upper-roman} //Romeinse cijfers
{list-style-type: lower-alpha} //Kleine letters
{list-style-type: upper-alpha} //Hoofdletters
De CSS code wordt dan:
<style type="text/css">
ol {
list-style-type:upper-roman;
}
</style>
Positie
Als laatste kun je ook de positie bepalen van je lijstje, De code hiervoor is:
ul { list-style-position: outside }
waarbij je outside kunt vervangen voor inside. Dit geld dus ook voor de OL, ordered list.
Als CSS code totaal ziet het er dan als volgt uit bij bijvoorbeeld een unordererd list.
<style type="text/css">
ul {
list-style-type: square;
list-style-position: outside;
}
</style>
CLASS en ID
Een Class en een ID beschrijven beiden de opmaak van een bepaald element in de CSS. De
schrijfwijze is voor een Class met een punt voor de naam en voor een ID is dat een hekje #. Het
verschil zit hem erin dat je een Class meerdere keren kunt gebruiken in de pagina en een ID
uniek is en dus 1 keer gebruikt mag worden in een pagina.
Met Classes kun je 1 of meerdere elementen een stijl geven zoals een achtergrondkleur of
lettertype eigenschappen, randen etc. De code ziet er bijvoorbeeld uit als hieronder. De naam
van de Class is hier "afbeeldingen". Direct eronder staat een ID met de naam Logo. De namen
mag je dus zelf verzinnen.
<style type="text/css">
.afbeeldingen {
border:5px solid #000000;
margin-left:50px;
}
#logo {
border:5px solid #000000;
margin-left:50px;
}
</style>
Het element krijgt dan een class tag in de code meegegeven. In dit geval voor de afbeelding wordt de
code dan.:
<img "src="images/css.gif" class="afbeeldingen" />
Op deze manier kun je dus meerdere elementen dezelfde opmaak geven maar ook natuurlijk 1
element. Heb je vijf tekstblokken in je tekst staan die dezelfde opmaak moeten hebben dan
refereer je die allemaal terug naar de class die daarvoor is gemaakt.
En verder...
Zoals je ziet, is er veel mogelijk om de opmaak van een pagina te veranderen.
Op een soortgelijke manier kan je ook de opmaak van bijvoorbeeld een tabel aanpassen. Voor
de css van deze en andere elementen verwijs ik je naar internet.
Opdracht 5
Maak een HTML-pagina die gelinkt is aan een externe stylesheet.
Noem de pagina “opdracht6.html” en de css “opdracht6.css”.
In de html-pagina staat GEEN opmaak. De volledige opmaak van de pagina staat in de css.
De html-pagina bestaat uit de volgende onderdelen en hun opmaak:
Body
De body heeft als opmaak een Achtergondkleur
Minimaal 3 paragrafen
Elke paragraaf heeft een aparte…
o Lettertype
o Letterkleur
o Lettergrootte
o Uitlijning
De eerste regel van elke paragraaf springt in (dus: begint verder op de pagina).
Lijst (opsomming).
De lijst is ongeordend (‘unsorted’) en heeft…
o Kleine afbeeldingen als opsommingstekens
Tabel.
De tabel heeft 4 rijen en 3 kolommen.
o De eerste rij van de tabel heeft een andere kleur dan de overige rijen
Minimaal 2 hyperlinks.
Bepaal zelf waar ze naar linken.
o De opmaak van de links is aangepast met pseudoclasses.
Hoofdstuk 6
Wat betreft van de vormgeving van een element wordt er bij Cascading Style Sheets van uitgegaan dat elk element wordt vormgegeven door een rechthoekige gebied, de box. Van binnen naar buiten bestaat de box uit de inhoud van het element, de padding, de border en de margin. Visueel ziet het er als volgt uit:
De margin is de afstand van de rand van een element tot de rand van het parent element of de rand van
een aangrenzend element. De margin is transparent en neemt dus de achtergrondkleur aan van het
parent element.
De border is de rand van een element.
De padding is de afstand tussen de rand van een element en de inhoud. Indien een achtergrondkleur
gebruikt wordt voor het element, dan heeft de padding dezelfde kleur.
De grootte van de box wordt bepaald door de som van de afmetingen van het element en de breedte van
de margin, de border en de padding.
Bijvoorbeeld: de totale breedte van de div hieronder is 300px (250 + 2x10 + 2x5 + 2x10):
div {
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
}
Als je de margin aan de linkerkant anders wilt instellen dan aan de rechterkant dan kan je gebruik maken
van ‘margin-left’ en ‘margin-right’. Op een soortgelijke manier kan je de bovenen onderkant apart
instellen. Dit kan ook met de padding en border van een box.
Let op: verschillende browsers kunnen verschillend reageren op de instellingen!
Shorthand property
Een verkorte schrijfwijze bij afwijkende margins of paddings noem je de ‘shorthand-property.
Bijvoorbeeld:
margin:25px 50px 75px 100px;
Begin bovenaan, en met de klok mee. Dus margin-top: 25px, margin-right: 50px, margin-bottom:
75 px, margin-left: 100px.
De breedte van de margin, de border en de padding worden vastgelegd met de eigenschappen voor de
margin, de rand en de padding. De afmetingen van de inhoud van het element kunnen worden vastgelegd
met de eigenschappen width en height. Bij elementen op blokniveau is sprake van één rechthoekige box.
Elementen op blokniveau zijn elementen die vooraf gegaan en gevolgd worden door de overgang naar
een nieuwe regel. Voorbeelden zijn P, PRE, BLOCKQUOTE, ADDRESS, DIV, CENTER, Hx, BR, HR, UL,
OL, LI, DL, DT, DD, TABLE en FORM.
Inline elementen zijn elementen die dezelfde regel kunnen delen met andere elementen en
niet vooraf gegaan en gevolgd worden door de overgang naar een nieuwe regel. Voorbeelden
zijn A, IMG, FONT, B, I, U, TT en SPAN.
Display
Het is mogelijk om van een element op blokniveau (‘boxelement’) een inline element te maken, en
andersom. Dit gebeurt met de eigenschap ‘display’. In onderstaand voorbeeld wordt van een list item een
inline element gemaakt:
li {display:inline;}
En hieronder wordt van een span een block-element gemaakt:
span {display:block;}
Position
Met CSS-positionering kan je de positie van een boxelement op het scherm zelf bepalen. In onderstaande
voorbeelden maken we meestal gebruik van een div, maar in principe(!) kan je elk element op blokniveau
gebruiken.
Er zijn vier manieren waarop je een boxelement kan positioneren:
- Static
- Fixed
- Relative
- Absolute
static
Dit is de standaardinstelling.
Het element wordt geplaatst afhankelijk van de andere elementen en is niet aan te passen met ‘top’, ‘left’,
‘right’ of ‘bottom’, zoals bij de volgende methode.
fixed
Het element wordt geplaatst ten opzichte van het browservenster. Zelfs wanneer je scrollt zal het element
op zijn plek blijven. Andere elementen trekken zich niets aan van dit element. Fixed elementen kunnen
andere elementen overlappen.
Voorbeeld:
div.vasteplek
{
position:fixed;
top:30px;
right:5px;
}
relative
Bij een relatieve positionering wordt een element verplaatst ten opzichte van zijn originele
positie. Dus als de eigenschap “left” op “-20px” staat, wordt het element 20 pixels naar links
verschoven.
Voorbeeld:
p.pos_links
{
position:relative;
top: 5 px;
left:-20px;
}
absolute
Een absoluut gepositioneerd element krijgt zijn positie ten opzichte van het element waar hij in staat (= de
‘parent’). Als deze parent tenminste niet static is. Een absoluut gepositioneerd element kan een ander
element overlappen. Andere elementen trekken zich niks aan van het element.
Voorbeeld:
h2
{
position:absolute;
left:100px;
top:150px;
}
Z-index
Wanneer verschillende elementen elkaar overlappen kan je de volgorde (‘diepte’) van deze elementen
bepalen met de z-index. Als v erscillende elementen een z-index hebben, zal het element met de hoogste
z-index boven liggen. Een z-index kan ook negatief zijn. Voorbeeld:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
Float
Als je een afbeelding (<img>) gebruikt in combinatie met tekst, dan zal de afbeelding in één regel (inline)
staan. Met float kan je de afbeelding kan je de afbeelding naar links of rechts verplaatsen, waarbij de tekst
er omheen geplaatst zal worden. In principe kan je float voor diverse boxelementen gebruiken, maar
meestal wordt deze methode voor afbeeldingen gebruikt.
Wanneer je verschillende elementen achter elkaar zet met eenzelfde float, zullen ze naast elkaar
geplaatst worden over de breedte van het scherm. Zo kan je een hele pagina vullen met thumbnails:
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
Centreren
Zoals je al eerder hebt kunnen lezen is een boxelement een element dat een ‘automatische break’ heeft
ingebouwd. In deze paragraaf leer je hoe je een boxelement kan centreren.
Centreren met margin
Een boxelement kan je centreren op de pagina door de linker en rechter margin op ‘auto’ te zetten.
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
text-align:left;
}
Als de ‘width’ op 1005 staat zal het element de hele breedte innemen en heeft de margin geen effect.
Let op: als de gebruiker een oudere versie van Internet Explorer gebruikt is de kans aanwezig dat deze
manier niet goed werkt. Dan zal er bovenaan de pagina een !DOCTYPE gedeclareerd moeten worden.
Centreren met absolute
Ook als je de absolute positionering gebruikt kan je het element centreren. Niet alleen horizontaal, maar
ook vertikaal is, bijvoorbeeld, een div op het midden van een pagina te plaatsen. Door eerst de margin-top
en margin-height op 50% te zetten, en daarna de div helft van de grootte terug te plaatsen, zal de div in
het midden blijven:
RESET.CSS
Elke browser heeft eigen instellingen en standaard waarden voor het weergeven van elementen die nog
niet met CSS zijn gestyled. Een bekend voorbeeld hiervan is dat elke browser bijvoorbeeld automatisch
een marge heeft waardoor de website die gemaakt wordt altijd een stukje van de rand af komt te staan.
Webbouwers zetten daarom vaak als eerste in hun CSS de marges van de browser handmatig op 0
pixels, waardoor alles netjes tegen de rand kan staan, of juist iets verder er vanaf, mocht dat nodig zijn.
Verder hebben alinea’s en koppen altijd een ruimte tussen de regels die niet in elke browser gelijk is.
Terwijl we dat wel het liefst zouden willen.
Daarom hebben een aantal webbouwers onder leiding van Eric Meyer een CSS-bestand gemaakt waarin
zoveel mogelijk waarden op 0 worden gezet. De browsers worden als het ware ‘gereset’. Dit CSS-bestand
kan je natuurlijk noemen zoals je wilt, maar standaard wordt het ‘reset.css’ genoemd.
Opdracht 6
Maak voor deze opdracht gebruik van de sources in de zip-file ‘beatles.zip’
Maak van de pagina ‘beatles.html’ twee nieuwe versies:
1. Een pagina waarbij de elementen met float op hun plaats worden neergezet. Noem deze pagina
“opdracht6a.html”
2. Een pagina waarbij de elementen met position op hun plaats worden neergezet. Noem deze
pagina “opdracht6b.html”
Beatles
