Web building basis: HTML. Karel Nijs 2008/09

Transcriptie

1 Web building basis: HTML Karel Nijs 2008/09

2 Webbuilding basis vorige les HTML intro Browsers HTML elementen HTML basis tags HTML attributen HTML kleuren HTML formattering Extra: HTML entities

3 Webbuilding basis les 2 Herhaling: HTML basis tags HTML lijsten HTML links HTML figuren HTML tabellen

4 Webbuilding basis les 2 Herhaling: HTML basis tags HTML lijsten HTML links HTML figuren HTML tabellen

5 HTML basis tags Herhaling: Start tag: <tag> Eind tag: </tag> Inhoud van elementen omringen met tags Bv. < tag > inhoud </ tag > Uitzonderingen: Sommige elementen hebben geen inhoud Bv. <br />, Sommige elementen hebben geen eindtag Bv. <br />, <img />, <hr />

6 HTML basis tags Herhaling: Goed: <p align= left > </p> Slecht: <p align= left > Goed: <b> </b> Slecht: <b> </b/> Goed: <font size= +1 > </font> Slecht: <font size= +1 > </font size= +1 > Goed: <font face= arial > </font> Slecht: <p face= arial > </p> Goed: <font color= red > </font> Slecht: <font color= red"> </font>

7 Herhaling: HTML formattering Oefening 5 (les 1)

8 Webbuilding basis les 2 Herhaling: HTML basis tags HTML lijsten HTML links HTML figuren HTML tabellen

9 HTML lijsten Nodig voor het maken van opsommingen 3 soorten lijsten: Geordende lijsten <ol> Ongeordende lijsten <ul> Definitie lijsten <dl> 2 soorten tags: Eén voor lijst begin + einde aan te duiden Eén voor lijstitem aan te duiden In elkaar nestbaar

10 HTML lijsten Geordende lijsten: Tag: ol Verschillende types: Geen (leeg): 1, 2, 3, A: A, B, C, a: a, b, c, I: I, II, III, i: i, ii, iii, Startpositie instelbaar via start attribuut Bv. start= 2 Elk list item omringd door <li> tag

11 HTML lijsten Ongeordende lijsten: Tag: ul Verschillende types: Geen (disc) Circle Square Elk list item omringd door <li> tag

12 HTML lijsten Opmerking: types instelbaar per list item Niet ondersteund door Internet Explorer Wél ondersteund door FireFox <ul> </ul> <li type="circle">type CIRCLE</li> <li type="square">type SQUARE</li> <li type="disc">type DISC</li> <li>standaardtype (DISC) </li>

13 HTML lijsten Nestbaar: <ul> <li>coffee</li> <li>tea <ul> <li>black tea</li> <li>green tea</li> </ul> </li> <li>milk</li> </ul>

14 HTML lijsten Oefening 1: opgave

15 Webbuilding basis les 2 Herhaling: HTML basis tags HTML lijsten HTML links HTML figuren HTML tabellen

16 HTML links Linken naar andere bestanden 2 vormen: Klikbare tekst Klikbaar item: figuur, paginadeel, Anchor tag: a Voorbeeld van een standaard link: <a href= page.html target= _blank > naar pagina </a>

17 HTML links Attributen: href: doelpagina of adres Voorbeelden: paginanaam.html..\...\paginanaam.html label: label in pagina (zie volgende slide) target: doel venster: _self huidig venster (standaard) _blank nieuw venster naam naam van frame (zie les 3) _parent ouder frame (zie les 3) href= target=

18 HTML links Attributen: name: definitie van een label in de pagina: name= <a name= onder /> Verwijzen naar positie van definitie: <a href= #onder > naar onder </a>

19 HTML links Oefening 2: opgave

20 Webbuilding basis les 2 Herhaling: HTML basis tags HTML lijsten HTML links HTML figuren HTML tabellen

21 HTML figuren Net zoals links: onmisbaar op webpagina s Tag: img Zonder inhoud: <img /> Geen sluittag Voorbeeld: <img src= figuur.jpeg alt= Mijn figuur title= Mijn figuur border= 0 />

22 HTML figuren Belangrijke opmerking! HTML ondersteunt géén schuine quotes Oplossing: Een geschikte editor gebruiken Ms Word niet gebruiken om HTML te schrijven Je code eventueel even in Kladblok (NotePad) plakken Voorbeeld van hoe het niet moet: <img src= figuur.jpeg alt= Mijn figuur title= Mijn figuur border= 0 /> <a href= page.html target= _blank > </a> naar pagina

23 HTML figuren Attributen: src: alt: title: Bron van de afbeelding Pad naar interne locatie: bv...\..\figuur.jpeg Pad naar externe locatie: bv. Werkt ~ href attribute van hyperlink Alternatieve tekst Wordt weergeven als figuur niet gevonden wordt Tekst voor in tooltip src= alt= title=

24 HTML figuren Voorbeelden: <img <img src="dmkjdfm" alt="alternatieve tekst" title="tooltip tekst in title attribuut" /> src=" alt="alternatieve tekst" title="tooltip tekst in title attribuut" />

25 HTML figuren Speciale manier van ophalen Pagina wordt niet in één keer opgehaald Ontbreken van een figuur blokkeert niet ( alt attribuut) Werking (zonder cache):

26 Oefening 3: HTML figuren

27 Webbuilding basis les 2 Herhaling: HTML basis tags HTML lijsten HTML links HTML figuren HTML tabellen

28 HTML tabellen Gebruikt om figuren, tekst, te positioneren Verdeeld in rijen en kolommen: Table row = <tr> Table data = <td> Table row <tr> kan enkel <td> elementen bevatten Table data <td> kan haast alles bevatten: Tekst Figuren Links (alles behalve: html, head, body, frames)

29 HTML tabellen Voorbeeld: <table border="1"> <tr> <td>rij 1, kolom 1</td> <td>rij 1, kolom 2</td> </tr> <tr> <td>rij 2, kolom 1</td> <td>rij 2, kolom 2</td> </tr> </table>

30 HTML tabellen Voorbeeld: <table border="1"> <tr> <td>rij 1, kolom 1</td> <td>rij 1, kolom 2</td> </tr> <tr> <td>rij 2, kolom 1</td> <td>rij 2, kolom 2</td> </tr> </table> tabel

31 HTML tabellen Voorbeeld: <table border="1"> <tr> <td>rij 1, kolom 1</td> <td>rij 1, kolom 2</td> </tr> <tr> <td>rij 2, kolom 1</td> <td>rij 2, kolom 2</td> </tr> </table> rij 1 rij 2

32 HTML tabellen Voorbeeld: <table border="1"> <tr> <td>rij 1, kolom 1</td> <td>rij 1, kolom 2</td> </tr> <tr> <td>rij 2, kolom 1</td> <td>rij 2, kolom 2</td> </tr> </table> kolom 1 kolom 2 kolom 1 kolom 2

33 HTML tabellen Attribuut border: Specifiëren van een rand Uitgedrukt in pixels Waardes = 0, 1 (standaard), 2, 3, Voorbeeld: <table border= 8"> <tr> <td>rij 1, kolom 1</td> <td>rij 1, kolom 2</td> </tr> <tr> <td>rij 2, kolom 1</td> <td>rij 2, kolom 2</td> </tr> </table>

34 HTML tabellen Headings: Kolomhoofden aanduiden <th> tag <table border="1"> <tr> <th>hoofding</th> <th>andere hoofding</th> </tr> <tr> <td>rij 1, kolom 1</td> <td>rij 1, kolom 2</td> </tr> <tr> <td>rij 2, kolom 1</td> <td>rij 2, kolom 2</td> </tr> </table>

35 HTML tabellen Oefening 4:

36 HTML tabellen HTML entiteit non- Véél gebruikte HTML entiteit breaking space: Stelt een spatie voor die twee woorden bij elkaar houdt Voorbeeld: Koninkrijk Nederland Vooral gebruikt om lege ruimtes op te vullen: Voorbeelden: <p> </p> <td> </td>

37 HTML tabellen Er is nog véél meer: Attributen op table: bgcolor cellpadding cellspacing Attributen op td: colspan bgcolor align Attributen op tr: rowspan align valign background width frame background width valign Hulp nodig?

38 Webbuilding basis les 2 Herhaling: HTML basis tags HTML lijsten HTML links HTML figuren HTML tabellen

39 Huiswerk: profiel pagina