09

Web building basis: HTML Karel Nijs 2008/09

Web building basis – eerste les • • • • • • • •

HTML intro Browsers HTML elementen HTML basis tags HTML attributen HTML kleuren HTML formattering Extra: HTML entities

Web building basis – les 2 • • • • •

Herhaling: HTML basis tags HTML lijsten HTML links HTML figuren HTML tabellen

Web building basis – les 3 • • • • • •

Herhaling: HTML basis tags Herhaling: tabellen HTML frames Je eigen website online zetten Web building gevorderden: intro HTML Quiz



HTML basis tags • Herhaling: – Start tag: – Eind tag: – Inhoud van elementen omringen met tags Bv. < tag > inhoud – Uitzonderingen: • Sommige elementen hebben geen inhoud Bv.
, • Sommige elementen hebben geen eindtag Bv.
, ,

HTML basis tags • Herhaling: – Tags moeten afgesloten worden:
…

– Tags op de correct manier afsluiten: …

– Attributen enkel bij de start tag: …

– Attributen bij de correcte tags zetten: …

– Attribuutwaarden tussen aanhalingstekens zetten: …



HTML frames • Weergave van meerdere HTML pagina’s in één browser venster • Elk HTML document wordt “frame” genoemd • Nadelen: – Ontwikkelaar moet hele structuur onderhouden – Website is niet printbaar – Niet ondersteund door alle browsers (voorbij?)

• Voordelen: – Herladen van slechts delen van de site – Hergebruik van pagina’s

HTML frames • Voorbeeld:

HTML frames • Voorbeeld:

HTML frames • Tags: – • Bepaald indeling van het scherm • Elke set is een verzameling van rijen of kolommen • Attributen: – cols=“…” » Bepaald grootte van de kolommen » Bv. cols=“25%,75%”, cols=“100,*,150”, cols="100,*" – rows=“…” » Bepaald grootte van de rijen » Bv. rows=“25%,75%”, rows=“300,*,50”, rows="300,*" – *: gebruikt als wild card voor variabele lengte

• Kan enkel volgende tags bevatten: frameset, frame

HTML frames • Tags: – • Bepaald welk HTML document in het frame geladen wordt • Attributen – name=“…” » Naam van het frame (voor referentie) » Bv. name=“boven” – src="…" » Pad naar het HTML document » Bv. src="bovendeel.html"

HTML frames • Opmerking: – Wanneer een HTML document een "frameset" tag bevat, mag er géén "body" tag voorkomen! – Voorbeeld: ...

HTML frames • Voorbeeld 1:



HTML frames • Oefening 3: – Voorbereiding: • Noem je profiel pagina met je voornaam: bv. karel.html • Kopieer deze naar de map: O:\wissel\#karel\les3\ • boven.html en links.html vind je ook in de map. Pas deze niet aan! • Maak een nieuwe pagina aan: bv. frameset_karel.html • Namen van de frames: – boven – links – rechts

– Zorg dat alle links naar je vrienden werken!

HTML frames • Oefening 3:



Je eigen website online zetten • Nodig om een site te maken: – – – –

Personal Computer editor (bv. UltraEdit) ontwikkelaar inspiratie

• Nodig om een site aan te bieden: – webspace / server – DNS

• Nodig om een site online te zetten: – FTP client

Je eigen website online zetten • Webserver: – Supercomputer die diensten aanbiedt. – Bv. websites, dynamische websites, video streaming, …

• Webspace: – Bestandsruimte op de webserver

• Offline: – Bestanden op je computer thuis

• Online: – Bestanden op een webserver

Je eigen website online zetten • FTP: – File Transfer Protocol – Manier om bestanden van je PC naar de server te kopiëren – Programma's: • • • •

FileZilla (gratis) WS-FTP CuteFTP …

• DNS – – – –

Domain Naming System Mensen onthouden beter namen ipv. IP adressen Bv. http://www.gmail.com Beschikbare opzoeken: http://www.dns.be

Je eigen website online zetten

Je eigen website online zetten •

In vijf stappen: 1. Maak je website offline 2. Registreer je persoonlijke webruimte bij je provider 3. FTP: 1. Installeer een FTP programma. 2. Zet je site online.

4. Test je webpagina's 5. Vraag een DNS aan

•

Meer: zie CD-ROM bij cursus



Web building gevorderden: intro • • • • • • • •

Het "head" element Het "meta" element Formulieren Opmaak & attributen Cascading Style Sheets JavaScript Dynamic HTML XHTML introductie

inschrijven nog mogelijk!



HTML Quiz • W3Schools.com HTML Quiz: – 20 vragen – geen tijdslimiet – geen verplichtingen

• De online HTML quiz: http://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML

Bedankt voor jullie aandacht!

09

Recommend Documents