Les 2: tekst, links en images

Presentatie over: "Les 2: tekst, links en images"— Transcript van de presentatie:

1 Les 2: tekst, links en images

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?

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 Kleuren Kleuren weergegeven als RGB-waarden (red-green-blue) zie ook MM1 rood: waarde 0  255 groen: waarde 0  255 blauw: waarde 0  255

5 Kleuren 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)

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

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

9 Tekst structureren <div style="color: red“ id=“hoofdstuk”>
Dit is een span voorbeeld. <br /> Deze <span style="color: blue"> code </span> kleurt het woord code blauw. </div > Dit is een span voorbeeld. Deze code kleurt het woord code blauw

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

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 Lijsten: Opsommingstekens veranderen
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 style="list-style-type: lower-roman">item 2</li> </ol>

13 Lijsten: Opsommingstekens veranderen
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

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

15 B-oefening 1 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 ? 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

16 SLIDES WEBTECHNOLOGIE 1 LABO
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 -adres - een ftp-site - files van andere types (vb. .zip, .exe) Hyperlinks (c) Hogeschool West-Vlaanderen Dept. PIH, Vakgroep Webtechnologie

17 Hyperlinks: naar andere sites
link gebruikt <a> element met href attribuut: <a>hier komt de link</a> opgelet! protocol aanduiden ! <a href=“ Yahoo website </a> anchor HyperText Transfer Protocol

18 Hyperlinks: naar FTP / E-mail
FTP: protocol aangeven: <a href=“ftp://ftp.microsoft.com”>MS-ftp-site</a> mailto: <a mail test!</a> mailto:

19 A-oefening 4 Vul op A-oefening4.htm de lijn aan bij: <a>.
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

20 SLIDES WEBTECHNOLOGIE 1 LABO
A-oefening 4 The title attribute of the DIV tag is not supported. Netscape Navigator 6.0 (c) Hogeschool West-Vlaanderen Dept. PIH, Vakgroep Webtechnologie

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 <a href=“about.htm”>aboutpagina</a>

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 naar de blauwpagina <a href=“kleursite/kleuren/blauw.htm”> … </a> Deze verwijzing noemen we relatieve padverwijzing

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 naar de indexpagina <a href=“../../index.htm”> … </a> Deze verwijzing noemen we relatieve padverwijzing

24 Hyperlinks naar ander (x)html-doc
!!! relatieve padverwijzing ../ <>absolute paden! C:\ vb hyperlink vanuit de blauwpagina naar vorm.htm <a href=“../../vormsite/vorm.htm”> … </a>

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 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 Hyperlinks: binnen eenzelfde doc
SLIDES WEBTECHNOLOGIE 1 LABO 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> Daar het id een basisattribuut is, kan bijna naar alle elementen een link gelegd worden. Name: Names an anchor. Use this attribute to create a bookmark in a document.In future versions of XHTML the name attribute will be replaced by the id attribute!! (c) Hogeschool West-Vlaanderen Dept. PIH, Vakgroep Webtechnologie

28 SLIDES WEBTECHNOLOGIE 1 LABO
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. #top werkt niet in firefox Je plaatst bovenaan je pagina de tekst: Code:<a name="boven"></a> Ergens in je tekst (waar de link moet staan), plaats je dan: Code:<a href="#boven">naar boven</a> (c) Hogeschool West-Vlaanderen Dept. PIH, Vakgroep Webtechnologie

29 A-oefening 6

30 Markeringen in andere documenten
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>

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

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

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.

34 Images: Opmaak Ofwel via attributen van <img />
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 Images: attributen Geef 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

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

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

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 Images: Markering in lijsten
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.

40 Images: Markering in lijsten
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>

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 SLIDES WEBTECHNOLOGIE 1 LABO
Images: Hyperlinks 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 The user action pseudo-classes :hover, :active, and :focus Interactive user agents sometimes change the rendering in response to user actions. Selectors provides three pseudo-classes for the selection of an element the user is acting on. The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device). The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input). There may be document language or implementation specific limits on which elements can become :active or acquire :focus. (c) Hogeschool West-Vlaanderen Dept. PIH, Vakgroep Webtechnologie

43 Images: Hyperlinks <dl class="birds"> <dd>
<a href=“parkvogel.htm”> <img src="bird.gif" alt="" height="40" width="40" /> </a> </dd> <img src="bird.gif" alt="" height="40" width="40" /> </a> </dl>

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 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 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”)

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 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 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 A-oefening 9 (toevoegen van hyperlinks)
Maak vanuit elk voorkomen van “Jazzonline” een hyperlink naar de volgende URL:

51 A-oefening 9 (toevoegen van hyperlinks)
Maak elke keer vanuit het woord “amazon.com” een hyperlink naar de volgende URL’s: (Bitches Brew) (The black saint and the sinner lady)

52 A-oefening 9 (toevoegen van hyperlinks)
(Kind of Blue) (Time Out) (Giant Steps)

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 B-oefening 3

55 B-oefening 3