Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik...

61
Webtechnologie 1 labo Webtechnologie 1 labo Dieter Roobrouck Dieter Roobrouck Kristel Balcaen Kristel Balcaen Claudia Eeckhout Claudia Eeckhout Koen De Weggheleire Koen De Weggheleire Frederik Duchi Frederik Duchi Les 6: Forms en Frames Les 6: Forms en Frames

Transcript of Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik...

Page 1: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Webtechnologie 1 laboWebtechnologie 1 labo

Dieter RoobrouckDieter Roobrouck

Kristel BalcaenKristel Balcaen

Claudia EeckhoutClaudia Eeckhout

Koen De WeggheleireKoen De Weggheleire

Frederik DuchiFrederik Duchi

An DeraedtAn Deraedt

Les 6: Forms en FramesLes 6: Forms en Frames

Page 2: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Inhoud Forms

Waarvoor?Hoe?

StructuurVerwerking

Page 3: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Waarvoor gebruiken?

Bezoekers van de site de mogelijkheid bieden om informatie in te voeren en te versturen.geven van een reactieaanmelden als abonnee invullen van enquêteplaatsen van bestellingbeantwoorden van vragen

Page 4: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Formulieren: hoe?

2 aspecten: structuur van formulier

gebruik van <form></form> en veldenOok alle andere tags mogenuitz: geen forms nesten!

verwerking van gegevens (form handler):

Hoe wordt formulier verstuurd?Waar moet formulier naartoe?

Page 5: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Formulieren: hoe?

formulieren worden begrensd door <form>

<form method="post"_action="bestemming">

<!-- inhoud van het formulier -->

<!– tags --><!– velden -->

</form>

Attributen bij form: zie verder

Page 6: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Formulieren: structuurelementen

form-element input-element button-element textarea-element select-element

option-element optgrouplabel-element fieldset-element

Page 7: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Soorten velden

tekstvelden

keuzerondjesaankruisvakjes

Page 8: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Soorten velden

knoppentekstvakken

keuzelijsten

Page 9: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

type veld

grootte veld

tekst die in het veld staat

Input type="text"

Tekstvelden<input type="text" name="veldnaam" size="20" maxlength="30“ value="inhoud veld“ />

veldnaam

maximaal aantal

karakters

Enkel bij type="text"

Page 10: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Input type="password"

<input type="password" name="paswoord" size="8" />

ingetypte tekst wordt gemaskeerd weergegeven

Page 11: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Label

<label for="vrnm"> Voornaam</label><input type="text" name="voornaam" id="vrnm" />

label-element (<> label-attribuut van optgroup-element!) = tekst (gebruikelijk enkele woorden) die met een tekstveld, checkbox of radioknop kan worden geassocieerd.

Zoals label in prog1

Page 12: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

A-Oefening1

Maak het volgende eenvoudige formulier, zonder tabel en met labels

Page 13: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

B-oefening 1

Maak het volgende formulier na:Gebruik geen tabellenGebruik labels

Page 14: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Input type="radio" Een lijst opgeven waaruit er 1 keuze kan

gemaakt worden (radio buttons) Voorbeeld:

<input type="radio" name="browser"name="browser" value="NN"/>Netscape Navigator<br /><input type="radio" name="browser"name="browser" value="MSIE” checked=“checked” />Explorer

name-attribuut groepeert samenhorende radio buttons

Page 15: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

A-OEFENING 2

Maak deze kennistest na:

Page 16: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

B-OEFENING 2

Maak deze kwisvraag na:

Page 17: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Input type="submit" & "reset"

<input type="submit" value="Verzend bericht" name="verzend" />

<input type="reset" value="Wis bericht" name="wis" />

Het value-attribuut bepaalt de tekst die op de knoppen te lezen staat

Page 18: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Andere inputvelden

<input type="hidden" name="paswoord" />onzichtbaar veld, inhoud wordt wel mee

verzonden <input type="file" name="bestand"

accept=""/>mogelijkheid om een file mee te sturen. <form enctype="multipart/form-data”>

<input type="image"  src="knop.gif" name="knop" alt="submit" /> image als submit-knop

Page 19: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Button

Ipv input: ook gebruik van button: in container kan je content plaatsen

<button type="submit" value="Verzend bericht">tekst</button>

<button type="reset" value=“Wis bericht">tekst</button>

Push button: geen default actiembv scripting (cf sem2) wordt actie bepaald

<button type="button" value=“actie“ name=“knop”>tekst</button>

Page 20: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

A-Oefening 3

Maak dit voorbeeld naGebruik A-Oefening1.htmZorg dat de waarde Username

standaard is ingesteldDe Vraag knop is een submitknop

Page 21: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Input type="checkbox"

Checkboxes worden gebruikt wanneer de bezoeker meerdere mogelijkheden tegelijk kan kiezen<input type="checkbox" name="fruit" value="appel" />appels<input type="checkbox" name="fruit" value="peer" />peren

Page 22: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Textarea

Onbeperkte hoeveelheid tekst invoeren.<textarea name="commentaar" rows="4" cols="50"> hier komt de tekst </textarea>

Attributen: readonly="readonly"disabled="disabled"

Page 23: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

A-OEFENING 4

Gebruik externe cssGeen tabellen!!giraffe-peek.jpg

Page 24: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Select & Option (dropdownlist)

<select name="browser"><option value="nn">Netscape</option><option value="ie">Explorer</option><option value="op">Opera</option><option value="an">Andere</option>

</select>

Page 25: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Select & Option (keuzelijst)

Extra attributen select:size="4": bepaalt hoeveel keuzes

tegelijk zichtbaar zijnmultiple="multiple": bepaalt aantal

mogelijke keuzes (ctrl-klik voor meerdere keuzes)

Extra attributen option:value="waarde": waarde die naar de

server zal gestuurd wordenselected="selected": keuze die

als standaard zal getoond worden

Page 26: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Optgroup Veel keuzes? Maak gebruik van

<optgroup></optgroup> Het attribuut label groepeert<select>

<optgroup label="Swedish Cars"><option value ="volvo">Volvo</option><option value ="saab">Saab</option>

</optgroup><optgroup label="German Cars">

<option value ="mercedes">Mercedes</option><option value ="audi">Audi</option>

</optgroup></select>

Page 27: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Value, type, size, …

Opgelet: correct gebruiken van attributen! http://www.w3schools.com/tags/tag_input.asp

Input type=“button”: value=tekst op de button.

Checkboxes and radio buttons: wat wordt doorgestuurd naar action URL.Verplicht gebruik bij type="checkbox" and type="radio

Hidden, password, text fields: = default value van het element.

Kan niet worden gebruikt bij type="file"

Page 28: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

A-Oefening 5

Maak de volgende keuzelijst op 2 manieren:

Page 29: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Fieldset

Kan gebruikt worden om een aantal controls van een formulier te groeperen door er een kader om te plaatsen.

<fieldset>Height <input type="text" size="3" />Weight <input type="text" size="3 " />

</fieldset>

Page 30: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Legend

Plaatst een bijschrift bij het fieldset-element

<fieldset><legend>Health information:</legend> Height <input type="text" size="3“ />Weight <input type="text" size="3“ />

</fieldset>

Page 31: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

A-Oefening 6

Enquete

Page 32: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Verwerking van gegevens

Gegevens worden doorgestuurd als 1 lange lijn gegevens met scheidingstekens

Gegevens moeten opgesplitst worden tot leesbaar geheel

Page 33: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Verwerking van gegevens

Doorsturen naar e-mailadres: wordt ondersteund door IE4+, NN2+werkt alleen goed als de surfer naast

de browser ook de bijhorende emailclient gebruikt.

Werkt niet goed, beter is gegevens doorsturen naar een CGI-script

Page 34: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Verwerking van formgegevens

<form> attributen:

methodget post

action (moet altijd worden toegevoegd!)

Page 35: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

form method=“get"

Gegevens worden aan adres gekleefd en in 1 keer doorgestuurd

Alleen ASCII-karakters toegelaten dus geen é of ï

Page 36: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

form method=“post"

Alle info wordt uit het formulier opgenomen en verzonden naar adres bij action-attribuut

Ook non ascii-karakters toegelatenTe gebruiken bij action=mailto:...

Beste methode !!

Page 37: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

form action="..."

MOET altijd worden toegevoegd

mailto: [email protected] kan ook toegevoegd [email protected]?

subject=onderwerp]

http://www.provider.be/cgi-bin/form.cgiverwijzing naar cgi-script

Page 38: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Frames

Inleiding Wat zijn frames? Document type definitions (DTD)

Hoe maak ik frames? Eenvoudige Frames Eigenschappen van frameset Eigenschappen van frames

Extra Hyperlinks en frames Noframes Complexe frames

Page 39: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Wat?

Documentvenster opdelen in meerdere vensters

In elk venster wordt een aparte xhtml-pagina opgeladen

xHTML-pagina’s kunnen onafhankelijk van elkaar vervangen worden

Page 40: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

xHTML frameset (herhaling)

xHTML1.0 Frameset DTD Bevat alle elementen uit transitional +

frames elementen Gebruik deze DTD als je je browser

window wil opdelen in meerdere deelvensters

Page 41: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Hoe?

Benodigde xHTML-pagina’s:1 frameset - pagina die de frames

opdeelt1 inhoud-pagina per venster

Page 42: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Klassikale oefening

Hoeveel xhtml-pagina’s zijn er nodig voor de volgende frame-structuren?

Hoeveel van deze pagina's zijn er normale xhtml-pagina's (= inhoud van een frame) en hoeveel hebben een afwijkende structuur (= frameset-pagina's)?

Page 43: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Frame-inhoud

De pagina's met de frame-inhoud zijn normale xhtml-pagina's

Browser: rechts klikken in een frame / view source (bron weergeven) voor de xhtml-code van de pagina in de frame

Page 44: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Frameset-pagina

Frameset ipv body

<html> <head> </head>

<body> </body>

</html>

<html> <head> </head>

<frameset> </frameset>

</html>

normale xhtml-pagina frameset-pagina

Page 45: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Frameset eigenschappen

<frameset> </frameset>

Basis attributen:aantal rijen (rows)aantal kolommen (cols) id, class, title, style

Page 46: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Frameset: rijen

<frameset rows="... , ... , ...">Aantal waarden = aantal rijenMogelijke waarden:

pixelwaardepercentagewildcard *

vb:<frameset rows="15%, * ,15%"><frameset rows="200, * ">

Page 47: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Frameset: kolommen

<frameset cols="... , ... , ...">Aantal waarden = aantal rijenMogelijke waarden:

pixelwaardepercentagewildcard *

vb:<frameset cols="15%, * ,15%"><frameset cols ="200, * ">

Page 48: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Frameset met frames

Binnen een <frameset> worden de verschillende vensters gedefinieerd met de <frame> tag

<frame>: minstens volgende attribuut:src: bronbestand dat in die frame moet

geladen worden

<frame src="inhouda.htm" /><frame src="inhoudb.htm" />

A B

Page 49: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Frameset: basiscode

<html><head>

<title>titel</title></head><frameset cols="20%,80%">

<frame src="links.htm" /><frame src="rechts.htm" />

</frameset></html>

Page 50: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

A-oefening 7

Experimenteer met A-oefening7.htm Verander de broncode in het tekstveld Experimenteer met afmetingen van

frames, aantal frames vermeerderen en verminderen, onlogische opdrachten (vb: cols="15%, 20%, 25%"), enz.

Gebruik om de frames op te vullen de bestanden frame_a.htm t/m frame_e.htm

Page 51: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

A-oefening 8

Maak de opmaak van volgende pagina na, gebruikmakend van frames en van afbeelding goodprice.gif

Page 52: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

frame: attributen

name="..." id="..." beide samen gebruiken: unieke naam geven aan een frame zodat je die kan addresseren

class="..."style="..."

Page 53: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

frame: attributen

noresize="noresize" balk tussen frames is vast

scrolling="..." schuifbalken "yes" = schuifbalken altijd weergegeven"no"= geen schuifbalken"auto" = browser kiest

longdesc="..." URL waar een samenvatting staat van de inhoud van de frames (voor browsers die geen frames ondersteunen)

Page 54: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Hyperlinks en frames: Een hyperlinkdocument wordt geopend in het

frame waarin de hyperlink staat. Transitional DTD only

Anders: Voeg attribuut target toe aan <a> met als

waarde de naam van een frame Definieer de naam van een frame met het

attribuut name van <frame> of gebruik voorgedefinieerde namen:

"_blank” : nieuwe venster "_parent”: frameset vervangen door link "_top” : volledige venster"_self”: in het frame van de hyperlink zelf

Page 55: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Hyperlinks en frames:<html><head>

<title>Voorbeeld frames</title></head><frameset rows="120,*">

<frame src="frame1.htm” name="inhoudframe“ /><frame src ="frame2.htm" name ="hoofdframe“ />

</frameset ></html>

In frame1.htm zijn de hyperlinks bv als volgt opgenomen:<a href="frame3.htm” target="hoofdframe">voorbeeld

a</a><a href="frame4.htm” target="hoofdframe">voorbeeld

b</a>

Page 56: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Hyperlinks en frames:

Transitional DTD onlyBij gebruik van veel hyperlinks:

Plaats <base target=“waarde” /> in de <head>- sectie van het te laden htm document.

target bepaalt hier het frame waar alle hyperlinksdocumenten geopend moeten worden.

Voor uitzonderingen gebruik je in <a> het target attribuut

<html><head> <title>Voorbeeld frames</title> <base target="onder“ /></head><body>

<body>

</html>

Page 57: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

A-oefening 9 Valid enkel in TRANSITIONAL DTD (voor subpagina’s)

Vul de webpagina van A-oefening 2 aan met de volgende hyperlinks: http://www.delta.com http://www.virginexpress.com http://www.iberia.com

Deze links moeten openen in een volledig nieuw venster!

Page 58: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Noframes

Niet alle browsers ondersteunen frames!Gebruik <noframes> in één van de

framesets. De door <noframes> ingesloten inhoud

is alleen zichtbaar in browsers die geen frames ondersteunen.

Gebruik <body> binnen het noframes-gedeelte om de kleur van achtergrond, de tekst en de hyperlinks van de inhoud van <noframes> te bepalen

Page 59: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Complexe frames

Systematisch te werk gaan! Maak eerst het gehele venster door

deze ofwel verticaal in rijen, ofwel horizontaal in kolommen te verdelen

Page 60: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Framesets maken

Gebruik slechts 1 FrameDefinitionFile

Laadt in 1 pagina ALLE frames in ipv 1 pagina met 2 frames met in elk frame een pagina met 2 frames, …

Page 61: Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt Les 6: Forms en Frames.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

Einde les 6