WEBBUILDING 07/03/2005 Saartje De Geyter
Webbuilding Doel van deze les: Hoe ? Opmerking: 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 Opdracht: 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: <HTML> <HEAD> <TITLE> Pagina 1 </TITLE> </HEAD> <BODY> Hello world </BODY> </HTML>
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: <xxxx> Sluit TAG: </xxxx> Voorbeeld: <HTML> </HTML> via <HTML> zeg je : 'dit is de start van een HTML document' via '</HTML> 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. <head><title>webbuilding</title></head> hoofdletterongevoelig
Hoofding <HX> en karakterformaten Hoofdingen <HX> <Hx>Dit is een test</Hx> (1<=x<=6) Karakterformaten: Vet <b> <b>webbuilding</b> Cursief <i> <i>webbuilding</i> Onderlijnt <u> <u>webbuilding</u>
Hoofding <HX> en karakterformaten <html> <head> <title>voorbeeld1 pagina</title> </head> <body> <H1>Dit is een test</H1> <H2>Dit is een test</H2> <H3>Dit is een test</H3> <H4>Dit is een test</H4> <H5>Dit is een test</H5> <H6>Dit is een test</H6> <b>webbuilding</b> <br> <i>webbuilding</i> <br> <u>webbuilding</u> <br> </body> </html>
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 <UL> en <OL> Ongenummerde lijsten <UL> <UL> <LI>Appel <LI>Peer </UL> Genummerde lijsten <OL> <OL> <LI>Jan <LI>Piet </OL>
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 <p> en nieuwe lijn <br> Vaste hoeveelheid witruimte voor en na elke paragraaf Nieuwe lijn <br> voegt een nieuwe lijn in binnen een paragraaf <p>Het is een heel korte paragraaf om jullie aan te tonen hoe de tags werken. Hier zien jullie hoe de tag <BR> een nieuwe lijn neemt op het scherm.</p><p>Dit is een tweede paragraaf</p>
Oefening 4: paragrafen en tags Typ onderstaande oefening in en bewaar ze als oef4.html: <html> <head> <title> Oef.4: Paragraaftag</title> </head> <body> <p>Mijn <b>eerste</b> paragraaf handelt over niets </p> <p>Mijn <u>tweede</u> paragraaf bevat enige commentaar <br>bij de eerste</p> <p align=left>Links uitgelijnd</p> <p align=center>Gecentreerd</p> <p align=right>Rechts uitgelijnd</p> </body> </html> Bekijk de oefening met de browser.
Verwijzingen <a> 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 <a> Absolute verwijzing: <a href="http://www.google.be/">Google</a> Attributen href: locatie waarnaar verwezen wordt, dit is hier de externe website http://www.google.be Relatieve verwijzing: <a href="voorbeeld.html">voorbeeld.html pagina</a> 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 <img> invoegen van een figuur op een webpagina <img src="figuren/berg.jpg" height=100 width=100 align=left > 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 <table> Tabellen worden binnen HTML voor twee doeleinden gebruikt Voorstellen van gegevens in tabellen (klassiek gebruik) Opmaak van HTML pagina’s (lay-out, navigatie) Opmaakcodes <table>: volledige tabel <tr>: rij binnen een tabel <th>: cel binnen een rij met tekst vet en gecentreerd (hoofding) <td>: 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
Gebruik van tabellen: voorbeeld <table border="4"> <tr> <th>Voornaam</th> <th>Naam</th> </tr> <tr bgcolor="yellow"> <td>Joeri</td> <td>Christiaens</td> <tr bgcolor="gray"> <td>Dimitri</td> <td>Van De Ville</td> <table>
Oefening 7: gebruik van tabellen Maak een tabel met het uurrooster van je eigen richting. Kies zelf de opmaak adhv de attributen.
Oefening 8: eigen site Ontwerp, met de opgedane kennis, een mooie webpagina voor je sportclub, vriendenclub, of hobbyclub en bekijk het resultaat met de browser. Wees kreatief.