1

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 2: tekst, links en imagesLes 2: tekst, links en images

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

2

9 vraagjes

Waarvoor staat de term 'xHTML'?Wat is het verschil tussen xHTML &

HTML?Wat zijn de 4 hoofdregels van xHTML?Wat is <br />?Wat is hypertext?Wie is de 'uitvinder' van HTML?Welke 3 DOCTYPES bestaan er in xHTML?Hoe schrijf je commentaar in xHTML?Wat is een attribuut?

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

3

Kleuren

kleuren worden in html benoemd met kleurnamen of hexadecimale kleurcodesvb: red, green, gray, yellow, ...vb: #00FF00, #000000, #336699, ...aqua (#00FFFF)

black (#000000) blue (#0000FF) fuchsia (#FF00FF) gray (#808080) green (#008000) lime (#00FF00) maroon (#800000)

navy (#000080) olive (#808000) purple (#800080) red (#FF0000) silver (#C0C0C0) teal (#008080) yellow (#FFFF00) white (#FFFFFF)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

4

Kleuren weergegeven als RGB-waarden (red-green-blue) zie ook MM1

rood: waarde 0 255groen: waarde 0 255blauw: waarde 0 255

Kleuren

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

5

Waarden tussen 0 en 255 worden hexadecimaal weergegeven zie ook PS1: grondtal 16 karakters: 0-9, a-f (= 10 tot 15) vb: 58 (dec) = 3a (hex)

58 = 3 * 161 + 10 * 160

Je kan ook de windows calculator gebruiken (wetenschappelijke weergave)

Kleuren

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

6

Kleuren: via inline CSS

Kleuren koppelen aan elementen doen met het style-attribuut:

<h1 style="color: red">Hoofdtitel</h1><h6 style="color: blue">Kleinste titel</h6>

<p style="color: #336699">Dit is een gekleurde paragraaf</p>

OPGELET: om kleuren te gebruiken in een volledige website,

zijn er veel efficiëntere manieren! Dit leren we volgende

week in de les over CSS

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

7

A-oefening 1 : kleuren

Gebruik A-oefening9.htm van vorige week en werk daarin

Verder. Verander het tekstkleur van de 3 paragrafen in

een kleur naar keuze.

Vergeet niet te

Valideren!

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

8

Tekst structureren

Opsplitsen van tekst gebeurt met de tags <div> en <span>.

<div> = BLOK element: wil lijn voor zich alleen

<span> = INLINE element : identificeren van tekst binnen een

<div>

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

9

Dit is een span voorbeeld. Deze code kleurt het woord code blauw

<div style="color: red“ id=“hoofdstuk”>

</div >

Dit is een span voorbeeld. <br />Deze <span style="color: blue"> code </span> kleurt het woord code blauw.

Tekst structureren

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

10

A-oefening 2 Sla A-oefening1.htm op als A-oefening2.htm en Sla A-oefening1.htm op als A-oefening2.htm en

werk daarin verder. Probeer het volgende effect werk daarin verder. Probeer het volgende effect te bereiken:te bereiken:

Tip: Tip: Om een stukje tekst op een lijn te "selecteren", Om een stukje tekst op een lijn te "selecteren",

gebruik de <span> tag en hang het attribuut daaraangebruik de <span> tag en hang het attribuut daaraan

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

11

Lijsten: Opsommingstekens veranderen

De browser herkent verschillende niveaus in geneste ongenummerde lijsten (ul)

Voor genummerde lijsten (ol) geven sommige browsers toch hetzelfde opsommingsteken (oudere browsers maakten een verschil)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

12

Je kan die opsommingstekens zelf veranderen met CSS: voor de ganse lijst:

<ul style="list-style-type: disc"><li>item 1</li><li>item 2</li>

</ul> per item:

<ol><li>item 1</li><li style="list-style-type: lower-

roman">item 2</li></ol>

Lijsten: Opsommingstekens veranderen

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

13

mogelijke waarden:

list-style-type: none

list-style-type: disc list-style-type: circle list-style-type: square

list-style-type: decimal list-style-type: lower-roman list-style-type: upper-roman list-style-type: lower-alpha list-style-type: upper-alpha

Lijsten: Opsommingstekens veranderen

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

14

A-oefening 3 : opsommingstekens

Maak volgende lijsten

Valideer!

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

15

B-oefening 1

Sla A-oefening3.htm op als B-Sla A-oefening3.htm op als B-oefening1.htm en los daarin de oefening1.htm en los daarin de volgende vragen op:volgende vragen op: Hoe kan je de tekstkleur van de ganse Hoe kan je de tekstkleur van de ganse

pagina aanpassen op een valid xHTML pagina aanpassen op een valid xHTML 1.0 stricte manier ?1.0 stricte manier ?

Maak een 'ol' naar keuze en test of de Maak een 'ol' naar keuze en test of de volgende list-item-styles al werken in volgende list-item-styles al werken in je browserje browser

lower-greek, lower-latin, upper-latin, lower-greek, lower-latin, upper-latin, decimal-leading-zerodecimal-leading-zero

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

16

Hyperlinks Met behulp van anker <a href=" ">

kan men vanuit xhtml-document linken naar:

- een ander (x)html-document - een uniek id binnen hetzelfde document - een uniek id binnen ander document - een pagina of id op andere website - een email-adres - een ftp-site - files van andere types (vb. .zip, .exe)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

17

link gebruikt <a> element met href attribuut:<a>hier komt de link</a>

HyperText Transfer Protocol

opgelet! protocol aanduiden !

<a href=“http://www.yahoo.com”> Yahoo website </a>

anchor

Hyperlinks: naar andere sites

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

18

FTP: protocol aangeven:

<a href=“ftp://ftp.microsoft.com”>MS-ftp-site</a>

E-mail: mailto:

<a href=“mailto:test@hotmail.com”> mail test!</a>

mailto:

Hyperlinks: naar FTP / E-mail

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

19

Vul op A-oefening4.htm de lijn aan bij: <a>. Bij klikken van link opent volgende webpagina: http://www.w3schools.com/tags/tag_a.asp

Maak onderaan pagina, onder een horizontale lijn een extra divisie aan met volgende inhoud:“mail de webmaster”, waarbij het woord “webmaster” een email-link is naar jouw emailadres

A-oefening 4

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

20

A-oefening 4

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

21

Hyperlinks: naar ander (x)html-doc.

Belangrijk is de structurering van je files in directories:

verwijzen naar html-pagina’s in dezelfde directory vb hyperlink vanuit web\index.htm naarde aboutpagina

<a href=“about.htm”>aboutpagina</a>

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

22

Hyperlinks: naar ander (x)html-doc

directory lager (vb. kleuren)vb hyperlink vanuit web\index.htm naar

de kleurenpagina

<a href=“kleursite/kleuren.htm”> … </a>

vb hyperlink vanuit web\index.htm naarde blauwpagina

<a href=“kleursite/kleuren/blauw.htm”> … </a>

Deze verwijzing noemen we relatieve padverwijzing

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

23

Hyperlinks naar ander (x)html-doc

directory hoger vb hyperlink vanuit de vormpagina naar

de indexpagina

<a href=“../index.htm”> … </a>

vb hyperlink vanuit de vierkantpagina naarde indexpagina

<a href=“../../index.htm”> … </a>

Deze verwijzing noemen we relatieve padverwijzing

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

24

Hyperlinks naar ander (x)html-doc

!!! relatieve padverwijzing ../<>absolute paden! C:\

vb hyperlink vanuit de blauwpagina naarvorm.htm

<a href=“../../vormsite/vorm.htm”> … </a>

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

25

A-oefening 5

Werk verder op de bronbestanden onder A-oefening5:Vanuit de indexpagina moeten alle

pagina’s bereikbaar zijnAlle pagina’s hebben een ‘home’ die

de surfer terugstuurt naar de index.htm

Maak vanuit rood.htm een hyperlink naar vorm.htm

Maak vanuit vierkant.htm en rond.htm een hyperlink naar kleur.htm

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

26

Weergave van hyperlinks

standaardweergave:link: blauw, onderstreeptactieve link: rood, onderstreept

bezochte link: paars, onderstreept

=> kan veranderd worden via het attribuut style

of stylesheets (cf css: later)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

27

Hyperlinks: binnen eenzelfde doc

je kan ook linken naar een markering binnen eenzelfde (x)html-document=‘bookmarks’

2 stappen: Bookmarkering maken via id attribuut

<a id =“markering”>gemarkeerde punt</a>

linken naar bookmarkering via het href attribuut met als waarde #+id

<a href=“#markering”>link</a>

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

28

A-oefening 6

Maak een pagina met een lijst met jouw 10 favoriete websites Elk van die namen moet aanklikbaar zijn

en doorverwijzen naar de website in kwestie

Maak een onderverdeling: school/hobby Zorg dat er binnen de pagina een interne

navigatie mogelijk is, die je van bovenaan de pagina onmiddellijk naar een bepaalde rubriek laat springen en terug.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

29

A-oefening 6

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

30

Je kan ook linken naar markeringen in andere documenten:vb: zet in blauw.htm een div

<div id=“titel”>blauw</div>

Vanuit rood.htm verwijst een hyperlink naar die markering:

<a href=“blauw.htm#titel”>blauw</a>

Markeringen in andere documenten

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

31

ImageAchtergrondAnimated gifsBannersCursorsFoto’sHyperlinksKnoppenLijststijlen

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

32

Images invoegen

images worden ingevoegd met de unaire <img />-tag

<img /> heeft minimaal het attribuut src nodig:SouRCe maw de bron

<img src= "../foto.jpg"  /> 

Relatief adresseren

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

33

Alternatieve tekst

xHTML verwacht een label voor de image via het alt attribuut:<img src="park.jpg" alt="National Park“ />

Noot:Het attribuut title ="National Park“ heeft hetzelfde resultaat.Alt is beter: alt-tekst blijft zichtbaar wanneer image niet kan worden weergegeven.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

34

Images: Opmaak

Ofwel via attributen van <img />voor éénmalige beeldenvoor niet terugkerende opmaakalleen niet-deprecated xhtml attributen

Ofwel via CSS properties van img(mogelijks met extra classes) voor catalogus voor folders …voor herhaaldelijk terugkerende

opmaak

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

35

Images: attributenGeef bij een image best de hoogte

en breedte weer: in (liefst) pixelwaarde of percentage

<img src=“foto.jpg" height=“300px” width=“450px”

alt=“beer” />

Attributen img

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

36

Images: attributen Opgelet : niet (te sterk) afwijken

- van originele grootte - van originele hoogte – breedte verhouding => kwaliteitsverlies

Optimaliseer je images!

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

37

A-oefening 7

Maak deze paginaFig 1=eos.jpgFig 2=picplant.gif

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

38

Images: Markering in lijsten Unordered en ordered lists laten toe de

lijnmarkers te definiëren op basis van CSS properties.

Deze lijnmarkers zijn:- ofwel browser-voorgedefinieerde figuren (cf vorige les!)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

39

Deze lijnmarkers zijn:-ofwel zelf aangemaakte figuren van

de juiste grootte (icon)

Via definitielijsten kunnen willekeurige figuren als marker worden gebruikt door ze inline te plaatsen met aangepaste width en height.

Images: Markering in lijsten

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

40

Maak gebruik van definitie lijsten: <dl> De image <img /> komt inline in: <dd> of

<dt> De figuur eigenschappen kunnen worden

aangepast. Voorbeeld:

<dl><dd><img src=“beer.gif“ alt=“” width=“12” height=“9” /> beer </dd>

<dd><img src=“leeuw.gif“ alt=“” width=“12” height=“9” /> leeuw </dd></dl>

Images: Markering in lijsten

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

41

A-oefening 8

In de map: pics zitten enkele icoontjesopgelet: nog nood aan resizen naar 25 op 15

Maak volgende pagina na:

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

42

• Plaats een anker rond tekst of images om een hyperlink te maken:

<a href=“ ”>tekst</a><a href=“ ”> <img src=“ ” alt=“” /> </a>

• Pas hyperlinks opmaak later aan via css pseudo selectoren:• a:link • a:visited • a:hover • a:active

Images: Hyperlinks

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

43

<dl class="birds">

<dd>

<a href=“parkvogel.htm”>

<img src="bird.gif" alt="" height="40" width="40" /> </a>

</dd>

<dd>

<a href=“parkvogel.htm”>

<img src="bird.gif" alt="" height="40" width="40" /> </a>

</dd>

</dl>

Images: Hyperlinks

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

44

A-oefening 9: herhalingsoefening

Images invoegen Open het bestand indexoef6.htm &open

het html document “JS_platen” Voeg de afbeelding “banner.gif” toe. Plaats onder de banner een horizontale lijn

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

45

A-oefening 9 (Lijsten met images)

Plaats onder de horizontale lijn een lijst met images. De items zijn: ”Bitches Brew”, “The Black saint and the sinner Lady”, “Kind of Blue”, “Time out”, “Giant Steps”

De images bij de items zijn:“1.gif”, “2.gif”, “3.gif”, “4.gif”, “5.gif”(De beelden vind je in de map “graphics”)

De images zijn 15 x 15 pixels groot

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

46

A-oefening 9 (Images invoegen )

Plaats de volgende platenhoezen onder de imageslist en onder elkaar:

“bitches.gif”, “blacksaint.gif”, “kindblue.gif”, “time_out.gif”, “giant_steps.gif”

De platenhoezen zijn 100 x100 pixels groot

(De beelden vind je in de map “graphics”)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

47

A-oefening 9 (Images invoegen )

Plaats onder iedere platenhoes een “terug.gif”.

Plaats onder iedere “terug.gif” een horizontale lijn.

(De beelden vind je in de map “graphics”)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

48

A-oefening 9 (aligneren t.o.v. images)

Plaats bij iedere platenhoes de bijhorende gegevens.

Dit zijn de gegevens:Title: Bitches Brew, Artist:Miles Davis, Stijl: Fusion Jazz, Meer info bij Jazzonline, Te koop bij AmazonTitle: The black saint and the sinner lady, Artist:Charles Mingus, Stijl: Bebop, Meer info bij Jazzonline, Te koop bij AmazonTitle: Kind of Blue, Artist:Miles Davis, Stijl: Cool Jazz, Meer info bij Jazzonline, Te koop bij AmazonTitle: Time Out, Artist:Dave Brubeck, Stijl: Cool Jazz, Meer info bij Jazzonline, Te koop bij AmazonTitle: Giant steps, Artist:John Coltraine, Stijl: Free Jazz, Meer info bij Jazzonline, Te koop bij Amazon

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

49

A-oefening 9 (toevoegen van hyperlinks)

Maak vanuit ieder item binnen de lijst een hyperlink naar de corresponderende plaat.

Maak vanuit iedere terug knop een hyperlink naar de images lijst.

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

50

A-oefening 9 (toevoegen van hyperlinks)

Maak vanuit elk voorkomen van “Jazzonline” een hyperlink naar de volgende URL:

http://www.jazzonln.com/jazz101.asp

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

51

A-oefening 9 (toevoegen van hyperlinks)

Maak elke keer vanuit het woord “amazon.com” een hyperlink naar de volgende URL’s:

(Bitches Brew)http://www.amazon.com/exec/obidos/ASIN/B00000J7SS/jazzonline/102-4692739-2099343

(The black saint and the sinner lady)http://www.amazon.com/exec/obidos/ASIN/B000007NAA/qid=1001578336/sr=2-3/ref=sr_8_3_3/102-4692739-2099343

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

52

A-oefening 9 (toevoegen van hyperlinks)

(Kind of Blue)

http://www.amazon.com/exec/obidos/ASIN/B000002ADT/qid=1001578534/sr=2-1/ref=sr_8_7_1/102-4692739-2099343

(Time Out)

http://www.amazon.com/exec/obidos/ASIN/B000002AGN/ref=pd_sim_music/102-4692739-2099343

(Giant Steps)

http://www.amazon.com/exec/obidos/ASIN/B000003489/qid=1001578866/sr=5-1/ref=lm_lb_1/102-4692739-2099343

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

53

A-oefening 9

Werk deze pagina verder af tegen volgende week!

De pagina over de muzikanten is een facultatieve oefening (maak ook de crossreferences)

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

54

B-oefening 3

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

55

B-oefening 3