Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik...
-
Upload
bertha-hendrickx -
Category
Documents
-
view
215 -
download
0
Transcript of Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik...
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:[email protected]”> 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
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
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)