Doel van deze les:
Eigen webpagina aanmaken
Hoe ?
Via de opmaaktaal HTML
Hulpmiddelen: browser en kladblok
Browser: nodig om je pagina te bekijken
vb netscape, internet explorer
Kladblok (notepad): nodig voor de aanmaak van je pagina
Bestand opslaan met extensie .htm of .html
Opmerking:
Het aanmaken van HTML pagina’s kan op verschillende manieren:
Handmatig (kladblok - word)
Automatisch (Frontpage – dreamweaver - …)
Webbuilding
HTML = Hypertext Markup Language
tekstbestand met specifieke opmaak
De gecodeerde taal waarin een webpagina geschreven is
Opdracht:
Surf naar http://www.gent.be
-> view source
Structuur van een webpagina
Elke webpagina heeft een basisstructuur waaraan je je strikt moet houden:
Pagina 1
Hello world
Oefening1
a/ Open het programma Kladblok, en type vorige html-tekst in. Bewaar het bestand op schijf als oef1.htm.
b/ Bekijk het document nu met de webbrowser.
Start de webbrowser.
Kies File/Open File in Browser... en selecteer het zojuist aangemaakte document.
c/ Met behulp van het kladblok, wijzig je de tekst van de pagina. Zorg ervoor dat je meerdere regels hebt, en bekijk het resultaat opnieuw met de webbrowser.
Besluit: de tekst is leesbaar maar over lettergrootte en andere opmaak heb je geen invloed. Dat bepaalt de browser namelijk zelf.
Om inlichtingen over de tekstopmaak aan de browser te kunnen overmaken, moet je tags gaan invoegen. Zo zijn er tags oa. om:
de weergave te beïnvloeden, zoals vetjes of cursief
het lettertype te kiezen
de grootte van de tekens aan te passen.
HTML tags
Een webpagina bestaat dus uit twee elementen:
tekst: de leesbare inhoud van de pagina
tags: aanduidingen voor de browser hoe deze tekst moet getoond worden. Deze tags worden steeds tussen scherpe haken (<...>) geplaatst.
Open TAG:
Sluit TAG:
Voorbeeld:
via zeg je : 'dit is de start van een HTML document'
via ' zeg je: ‘dit is het einde van een HTML document'
Merk op:
In theorie moeten bijna alle tags gesloten worden
ze moeten in de correcte volgorde geopend en gesloten worden.
vb. webbuilding
hoofdletterongevoelig
Hoofding en karakterformaten
Hoofdingen Dit is een test (1<=x<=6)
Karakterformaten:
Vet webbuilding
Cursief webbuilding
Onderlijnt webbuilding
Hoofding en karakterformaten
voorbeeld1 pagina
Dit is een test
Dit is een test
Dit is een test
Dit is een test
Dit is een test
Dit is een test
webbuilding webbuilding webbuilding
Oefening 2: een eerste HTML-pagina
Maak een pagina met daarop 6x dezelfde zin: “ Dit is een eerste HTML-pagina”. Zorg ervoor dat voor elk van de zinnen een andere hoofding gebruikt wordt (H1 tem H6). Geef deze pagina “onze eerste HTML-pagina” als titel. Bewaar dit bestand als oef2.html.
Lijsten
en
lijsten
Ongenummerde lijsten
Appel
Peer
Genummerde lijsten
Jan
Piet
Oefening 3: aanmaak van lijsten
Maak een pagina voor een groentenwinkel met een genummerde lijst van groenten een ongenummerde lijst van openingsuren. Schrijf bovenaan de pagina “de naam van je groentenwinkel” in het cursief en onderaan “welkom” in het vet. Geef als titel van deze pagina de naam op van je groentenwinkel.
Paragraaf
en nieuwe lijn
Het is een heel korte paragraaf om jullie aan te tonen hoe de tags werken. Hier zien jullie hoe de tag een nieuwe lijn neemt op het scherm.
Dit is een tweede paragraaf
Paragraaf
Vaste hoeveelheid witruimte
voor en na elke paragraaf
Nieuwe lijn
voegt een nieuwe lijn in
binnen een paragraaf
Oefening 4: paragrafen en tags
Typ onderstaande oefening in en bewaar ze als oef4.html:
Oef.4: Paragraaftag
Mijn eerste paragraaf handelt over niets
Mijn tweede paragraaf bevat enige commentaar bij de eerste
Links uitgelijnd
Gecentreerd
Rechts uitgelijnd
Bekijk de oefening met de browser.
Verwijzingen
De voornaamste eigenschap van webpagina’s, de basis van een website
Er zijn 2 soorten verwijzingen:
Absolute verwijzingen = verwijzingen vanuit jouw site naar andere pagina’s
Relatieve verwijzingen = verwijzingen naar pagina’s op dezelfde site
OPDRACHT:
Surf naar http://users.telenet.be/saartje.de.geyter -> view source en bekijk de verwijzingen die erin zitten
Verwijzingen
Absolute verwijzing:
Google
Attributen
href: locatie waarnaar verwezen wordt, dit is hier de externe website http://www.google.be
Relatieve verwijzing:
voorbeeld.html pagina
href: locatie waarnaar verwezen wordt, dit is hier je eigen pagina voorbeeld.html
Oefening 5: gebruik van verwijzingen
a/ Absolute verwijzingen:
Maak een pagina aan waarbij je verwijst naar een aantal andere pagina’s. Hierna vind je een lijst met sites waarnaar “kan” verwezen worden, maar je mag zelf creatief zijn:
* Google (http://www.google.com)
* KA Avelgem (http://schoolweb.argo.be/bs/avelgem/atheneum.htm)
b/ Relatieve verwijzingen:
Voeg enkele relatieve verwijzingen toe naar voorgaande pagina’s die je reeds gemaakt hebt
* eenvoudige webpagina (oef1.html)
* onze eerste html pagina (oef2.html)
* groentenwinkel (oef3.html)
Afbeeldingen
invoegen van een figuur op een webpagina
Attributen
Src: locatie waar de figuur zich bevindt
Border: hiermee kun je dikte van een
boord rond de figuur aangeven
Width: breedte van de figuur
Heigth: hoogte van de figuur
align: hiermee kan je de figuur uitlijnen
- LEFT: links
- CENTER: gecentreerd
- RIGHT: rechts
Oefening 6: gebruik van afbeeldingen
Op heel wat websites vindt men figuren terug. De bedoeling is dat je een figuur van het net haalt en op je eigen webpagina plaatst.
a/ Maak onder de directory temp een map figuren aan. Haal een figuur van het net en sla deze op in deze map.
b/ Maak nu een oef6.html bestand aan waarin je deze figuur plaatst samen met de tekstje dat uitleg geeft over de figuur.
c/Probeer de attributen align, hight, width en border even uit. Wat gebeurt er met de tekst bij het veranderen van het attribuut align?
Gebruik van tabellen
Tabellen worden binnen HTML voor twee doeleinden gebruikt
Voorstellen van gegevens in tabellen (klassiek gebruik)
Opmaak van HTML pagina’s (lay-out, navigatie)
Opmaakcodes
: volledige tabel
: rij binnen een tabel
: cel binnen een rij met tekst vet en gecentreerd (hoofding)
: cel binnen een rij (data cel)
Elk van deze opmaakcodes kan een aantal attributen bevatten (width, height, bgcolor, align, valign, cellpadding, cellspacing…)
Tabellen kunnen binnen een cel van een andere tabel gebruikt worden
Attributen
Src: locatie waar de figuur zich bevindt
Border: hiermee kun je dikte van een
boord rond de figuur aangeven
Width: breedte van de figuur
Heigth: hoogte van de figuur
align: hiermee kan je de figuur uitlijnen
- LEFT: links
- CENTER: gecentreerd
- RIGHT: rechts
Comments