en regeleinde
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
-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:
De

en

-tag verschillende attributen te plaatsen. Hieronder zie je een voorbeeld:

Hallo allemaal

Dit is alweer mijn tweede pagina.
En deze regel is rood
Tot ziens!

(of een andere grootte) o Tags om de tekst nadruk te geven (<em>, <strong>, …)

Pagina 5

HTML

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

zijn de items niet genummerd. Voorbeeld:
• dit is het eerste item
• dit is het tweede item
• dit is het derde item
Normaal staat er voor elk item een cirkel. Door het attribuut ‘type’ mee te geven is dit te veranderen. In geordende
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
-tag bepaal je de opmaak.
1. dit is het eerste item
2. dit is het tweede item
3. dit is het derde item
Een definitielijst bestaat uit termen en de beschrijving ervan:

Term 1

Beschrijving van term 1

Term 2

Beschrijving van term 2



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:
Hier staat de inhoud van de div
Je ziet dat de volledig opmaak in het attribuut “style” staat.

IFRAME IFRAME

Pagina 6

HTML

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... 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: Klik hier
Zoek op Google

Opdracht 2 Maak voor deze opdracht een aparte map: ‘opdracht2’. Maak onderstaande pagina, en sla deze op als opdracht2a.html.

Pagina 7

HTML

? Op dez pagin sta en tabel met twe rijen en twe kolmen. Op de onderst rij zijn de

celn

samengvod. De celn van de tabel zijn geklurd. ? In de onderst rij sta en iframe van 100% bred en 100% hog. In het iframe verschijnt bij het opstaren opdracht2b.html ? Boveni de tabel stan twe 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 stan drie lijsten. De drie lijsten hebn verschilnd opmak. De pagin heft en achtergondklu

Pagina 8

HTML

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.

Element Het form element bevat alle gegevens die tot het formulier behoren. Tekstvelden, knoppen, keuzevakjes, etc worden tussen de en 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:

Typ uw voornaam in:




Typ uw achternaam in:





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.
...
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.

Pagina 9

HTML

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: 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". 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. Appel
Peer
Banaan
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: Mannelijk
Vrouwelijk Resultaat:

Pagina 10

HTML

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. Dit is een voorbeeld 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.


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. Resultaat:

Pagina 11

HTML

Bij het klikken op de resetknop krijgen alle elementen in het bijhorende formulier terug hun beginwaarde. 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”

Pagina 12

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 CS kun je in hoge mate de wergav van je pagin bepaln en kun je efctn

berikn die met

HTML tags alen niet mogelijk zijn. Zo kun je bijvoreld bepaln dat ale



tags 18 Points

grot moet zijn in de kleur rod en met het letryp Arial. Het is dus

vel flexibr dan HTML

wat de vormgein betrf. CS stel je in sta om ale stijlemn van en websit in en document onder te

breng. Dat

wil zegn dat je mar en document hoeft te verand om ale pagin's

van je site an te pasen.

Wil je bijvoreld de kleur van al je Headings verand of het

letryp dat je in je

pargfen gebruikt? Dan verand je het CS document en ale Met HTML zou je al dez wijzgne in ale pagin's

pagin's nem dez stijl dan over. moetn anbreg, wat vel mer werk is.

De pagin's van je site worden kleinr dorat je vel minder code hoeft te gebruikn.

Hierdo zal

je site snelr laden. CS code is browse-vindljk. Het wordt onderstu dor de mest browse. Lager

browse

negr CS wardo het dar niet vor problemn 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

Pagina 13

HTML

Pagina 14

HTML

Pagina 15

HTML

Pagina 16

HTML

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:

dit is een paragraaf met apart lettertype
en grijze achtergrond.

2. Bij de internal (of embedded) Stylesheet schrijf je de stijlinformatie tussen de en 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: <style type="text/css"> p{ font:Verdana; background-color:#999; }

dit is een paragraaf met apart lettertype
en grijze achtergrond.

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:

dit is een paragraaf met apart lettertype
en grijze achtergrond.

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; HTML }Pagina 17 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

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: <style type="text/css"> .speciaal { color: #FF0000; background-color: #FFFFFF; }

De tekst van deze H3 is rood

De tekst van deze P is ook rood

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: <style type="text/css"> #speciaal{ color: #FF0000; background-color: #FFFFFF; }

De tekst van deze H3 is rood

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; }

Pagina 18

HTML

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.

Pagina 19

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 ‘
’.

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 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; } 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); } 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; } 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

Pagina 20

HTML

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; } 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; }

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; } 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.

Pagina 21

HTML

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:

Pagina 22

HTML

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.

Pagina 23

HTML

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; } 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; }

Hyperlink en Pseudoclass

Pagina 24

HTML

Pagina 25

HTML

Pagina 26

HTML

Pagina 27

HTML

Pagina 28

HTML

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: <style type="text/css"> Bezoek het glr! 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: <style type="text/css"> blauwe link! paarse link!

Pagina 29

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.

• test
• test

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; } 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

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; } 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.

Pagina 30

HTML

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; }

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; }

Het element krijgt dan een class tag in de code meegegeven. In dit geval voor de afbeelding wordt de code dan.: 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

Pagina 31

HTML

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 heft als opmak en Achtergondklu ? Minmal 3 pargfen 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 (opsoming). De lijst is ongeordend (‘unsorted’) en heeft… o Kleine afbeeldingen als opsommingstekens ? Tabel. De tabel heft 4 rijen en 3 kolmen. o De eerste rij van de tabel heeft een andere kleur dan de overige rijen ? Minmal 2 hyperlinks. Bepal zelf war ze nar linke. o De opmaak van de links is aangepast met pseudoclasses.

Pagina 32

HTML

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:

Pagina 33

HTML

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

Pagina 34

HTML

staic Dit is de standrielg. 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

Pagina 35

HTML

Als je een afbeelding () 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:

Pagina 36

HTML

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”

Pagina 37

HTML

Beatles kn.nu/ww.f4c5b8c (zip, maken.wikiwijs.nl)

Pagina 38

HTML

Over dit lesmateriaal Colofon Auteur

Dennis van Wakeren

Laatst gewijzigd

14 December 2015 om 14:59

Licentie

Dit lesmateriaal is gepubliceerd onder de Creative Commons Naamsvermelding 3.0 Nederlands licentie. Dit houdt in dat je onder de voorwaarde van naamsvermelding vrij bent om: het werk te delen - te kopiëren, te verspreiden en door te geven via elk medium of bestandsformaat het werk te bewerken - te remixen, te veranderen en afgeleide werken te maken voor alle doeleinden, inclusief commerciële doeleinden. Meer informatie over de CC Naamsvermelding 3.0 Nederland licentie

Aanvullende informatie over dit lesmateriaal Van dit lesmateriaal is de volgende aanvullende informatie beschikbaar: Leerniveau

MBO, Niveau 3: Vakopleiding; MBO, Niveau 4: Middenkaderopleiding;

Eindgebruiker

leerling/student

Moeilijkheidsgraad gemiddeld

Pagina 39

HTML