De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 2: tekst, links en images.

Verwante presentaties


Presentatie over: "Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 2: tekst, links en images."— Transcript van de presentatie:

1 Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 2: tekst, links en images

2 Webtechnologie Labo vraagjes Waarvoor staat de term 'xHTML'? Wat is het verschil tussen xHTML & HTML? Wat zijn de 4 hoofdregels van xHTML? Wat is ? 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?

3 Webtechnologie Labo 1 3 Kleuren kleuren worden in html benoemd met kleurnamen of hexadecimale kleurcodes vb: 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)

4 Webtechnologie Labo 1 4 Kleuren weergegeven als RGB-waarden (red-green-blue) zie ook MM1 rood: waarde 0  255 groen: waarde 0  255 blauw: waarde 0  255 Kleuren

5 Webtechnologie Labo 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 * * 160  Je kan ook de windows calculator gebruiken (wetenschappelijke weergave) Kleuren

6 Webtechnologie Labo 1 6 Kleuren: via inline CSS Kleuren koppelen aan elementen doen met het style-attribuut: Hoofdtitel Kleinste titel Dit is een gekleurde paragraaf 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

7 Webtechnologie Labo 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!

8 Webtechnologie Labo 1 8 Tekst structureren Opsplitsen van tekst gebeurt met de tags en. = BLOK element : wil lijn voor zich alleen = INLINE element : identificeren van tekst binnen een

9 Webtechnologie Labo 1 9 Dit is een span voorbeeld. Deze code kleurt het woord code blauw Dit is een span voorbeeld. Deze code kleurt het woord code blauw. Tekst structureren

10 Webtechnologie Labo 1 10 A-oefening 2 Sla A-oefening1.htm op als A-oefening2.htm en werk daarin verder. Probeer het volgende effect te bereiken: Sla A-oefening1.htm op als A-oefening2.htm en werk daarin verder. Probeer het volgende effect te bereiken: Tip: Tip: Om een stukje tekst op een lijn te "selecteren", gebruik de tag en hang het attribuut daaraan Om een stukje tekst op een lijn te "selecteren", gebruik de tag en hang het attribuut daaraan

11 Webtechnologie Labo 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)

12 Webtechnologie Labo 1 12 Je kan die opsommingstekens zelf veranderen met CSS: voor de ganse lijst: item 1 item 2 per item: item 1 item 2 Lijsten: Opsommingstekens veranderen

13 Webtechnologie Labo 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

14 Webtechnologie Labo 1 14 A-oefening 3 : opsommingstekens Maak volgende lijsten Valideer!

15 Webtechnologie Labo 1 15 B-oefening 1 Sla A-oefening3.htm op als B- oefening1.htm en los daarin de volgende vragen op: Sla A-oefening3.htm op als B- oefening1.htm en los daarin de volgende vragen op: Hoe kan je de tekstkleur van de ganse pagina aanpassen op een valid xHTML 1.0 stricte manier ? Hoe kan je de tekstkleur van de ganse pagina aanpassen op een valid xHTML 1.0 stricte manier ? Maak een 'ol' naar keuze en test of de volgende list-item-styles al werken in je browser Maak een 'ol' naar keuze en test of de volgende list-item-styles al werken in je browser lower-greek, lower-latin, upper-latin, decimal- leading-zero lower-greek, lower-latin, upper-latin, decimal- leading-zero

16 Webtechnologie Labo 1 16 Hyperlinks Met behulp van anker 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 -adres - een ftp-site - files van andere types (vb..zip,.exe)

17 Webtechnologie Labo 1 17 link gebruikt element met href attribuut: hier komt de link HyperText Transfer Protocol opgelet! protocol aanduiden ! Yahoo website anchor Hyperlinks: naar andere sites

18 Webtechnologie Labo 1 18 FTP: protocol aangeven: MS-ftp-site mailto: mail test! mailto: Hyperlinks: naar FTP /

19 Webtechnologie Labo 1 19 Vul op A-oefening4.htm de lijn aan bij:.A-oefening4.htm Bij klikken van link opent volgende webpagina: Maak onderaan pagina, onder een horizontale lijn een extra divisie aan met volgende inhoud: “mail de webmaster”, waarbij het woord “webmaster” een -link is naar jouw adres A-oefening 4

20 Webtechnologie Labo 1 20 A-oefening 4

21 Webtechnologie Labo 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 naar de aboutpagina aboutpagina

22 Webtechnologie Labo 1 22 Hyperlinks : naar ander (x)html-doc directory lager (vb. kleuren) vb hyperlink vanuit web\index.htm naar de kleurenpagina … vb hyperlink vanuit web\index.htm naar de blauwpagina … Deze verwijzing noemen we relatieve padverwijzing

23 Webtechnologie Labo 1 23 Hyperlinks naar ander (x)html-doc directory hoger vb hyperlink vanuit de vormpagina naar de indexpagina … vb hyperlink vanuit de vierkantpagina naar de indexpagina … Deze verwijzing noemen we relatieve padverwijzing

24 Webtechnologie Labo 1 24 Hyperlinks naar ander (x)html-doc !!! relatieve padverwijzing../ <>absolute paden! C:\ vb hyperlink vanuit de blauwpagina naar vorm.htm …

25 Webtechnologie Labo 1 25 A-oefening 5 Werk verder op de bronbestanden onder A-oefening5: Vanuit de indexpagina moeten alle pagina’s bereikbaar zijn Alle 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

26 Webtechnologie Labo 1 26 Weergave van hyperlinks standaardweergave: link: blauw, onderstreept actieve link: rood, onderstreept bezochte link: paars, onderstreept => kan veranderd worden via het attribuut style of stylesheets (cf css: later)

27 Webtechnologie Labo 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 gemarkeerde punt linken naar bookmarkering via het href attribuut met als waarde #+id link

28 Webtechnologie Labo 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.

29 Webtechnologie Labo 1 29 A-oefening 6

30 Webtechnologie Labo 1 30 Je kan ook linken naar markeringen in andere documenten: vb: zet in blauw.htm een div blauw Vanuit rood.htm verwijst een hyperlink naar die markering: blauw Markeringen in andere documenten

31 Webtechnologie Labo 1 31 Image Achtergrond Animated gifs Banners Cursors Foto’s Hyperlinks Knoppen Lijststijlen

32 Webtechnologie Labo 1 32 Images invoegen images worden ingevoegd met de unaire -tag heeft minimaal het attribuut src nodig: SouRCe maw de bron Relatief adresseren

33 Webtechnologie Labo 1 33 Alternatieve tekst xHTML verwacht een label voor de image via het alt attribuut: Noot: Het attribuut title ="National Park“ heeft hetzelfde resultaat. Alt is beter: alt-tekst blijft zichtbaar wanneer image niet kan worden weergegeven.

34 Webtechnologie Labo 1 34 Images: Opmaak Ofwel via attributen van voor éénmalige beelden voor niet terugkerende opmaak alleen niet-deprecated xhtml attributen Ofwel via CSS properties van img (mogelijks met extra classes) voor catalogus voor folders … voor herhaaldelijk terugkerende opmaak

35 Webtechnologie Labo 1 35 Images: attributen Geef bij een image best de hoogte en breedte weer: in (liefst) pixelwaarde of percentage Attributen img

36 Webtechnologie Labo 1 36 Images: attributen Opgelet : niet (te sterk) afwijken - van originele grootte - van originele hoogte – breedte verhouding => kwaliteitsverlies Optimaliseer je images!

37 Webtechnologie Labo 1 37 A-oefening 7 Maak deze pagina Fig 1=eos.jpg Fig 2=picplant.gif

38 Webtechnologie Labo 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!)

39 Webtechnologie Labo 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

40 Webtechnologie Labo 1 40 Maak gebruik van definitie lijsten: De image komt inline in: of De figuur eigenschappen kunnen worden aangepast. Voorbeeld: beer leeuw Images: Markering in lijsten

41 Webtechnologie Labo 1 41 A-oefening 8 In de map: pics zitten enkele icoontjes opgelet: nog nood aan resizen naar 25 op 15 Maak volgende pagina na:

42 Webtechnologie Labo 1 42 Plaats een anker rond tekst of images om een hyperlink te maken: tekst Pas hyperlinks opmaak later aan via css pseudo selectoren: a:link a:visited a:hover a:active Images : Hyperlinks

43 Webtechnologie Labo 1 43 Images : Hyperlinks

44 Webtechnologie Labo 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

45 Webtechnologie Labo 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

46 Webtechnologie Labo 1 46 A-oef e ning 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”)

47 Webtechnologie Labo 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”)

48 Webtechnologie Labo 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 Amazon Title: The black saint and the sinner lady, Artist:Charles Mingus, Stijl: Bebop, Meer info bij Jazzonline, Te koop bij Amazon Title: Kind of Blue, Artist:Miles Davis, Stijl: Cool Jazz, Meer info bij Jazzonline, Te koop bij Amazon Title: Time Out, Artist:Dave Brubeck, Stijl: Cool Jazz, Meer info bij Jazzonline, Te koop bij Amazon Title: Giant steps, Artist:John Coltraine, Stijl: Free Jazz, Meer info bij Jazzonline, Te koop bij Amazon

49 Webtechnologie Labo 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.

50 Webtechnologie Labo 1 50 A-oefening 9 (toevoegen van hyperlinks) Maak vanuit elk voorkomen van “Jazzonline” een hyperlink naar de volgende URL:

51 Webtechnologie Labo 1 51 A-oefeni n g 9 (toevoegen van hyperlinks) Maak elke keer vanuit het woord “amazon.com” een hyperlink naar de volgende URL’s: (Bitches Brew) ne/ (The black saint and the sinner lady) /sr=2-3/ref=sr_8_3_3/

52 Webtechnologie Labo 1 52 A-oefening 9 (toevoegen van hyperlinks) (Kind of Blue) /sr=2-1/ref=sr_8_7_1/ (Time Out) _sim_music/ (Giant Steps) /sr=5-1/ref=lm_lb_1/

53 Webtechnologie Labo 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)

54 Webtechnologie Labo 1 54 B-oefening 3

55 Webtechnologie Labo 1 55 B-oefening 3


Download ppt "Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 2: tekst, links en images."

Verwante presentaties


Ads door Google