Inleiding website maken

Transcriptie

1 Inleiding website maken Bert Dingemans DLA Ontwerp & Software DLA Ontwerp & Software, Culemborg 1

2 Titel Docent Veronderstelde voorkennis Samenvatting Aantal bijeenkomsten Studiemateriaal Bijeenkomst 1 Bijeenkomst 2 Bijeenkomst 3 Bijeenkomst 4 Bijeenkomst 5 Bijeenkomst 6 Bijeenkomst 7 Bijeenkomst 8 Inleiding website maken Bert Dingemans Enige kennis van Internet en MS-Windows 95, etc Het internet is niet meer weg te denken uit het dagelijkse leven. Veel mensen hebben ook een persoonlijke homepage. In deze cursus leert u hoe u een eenvoudige homepage maakt. We doen dit door in een achttal bijeenkomsten een eigen homepage te maken welke u eventueel op internet kunt plaatsen. 8 bijeenkomsten van 2 uur Het studiemateriaal kan worden gedownload voor de bijeenkomsten. Dit materiaal is zo opgezet dat men opdrachten zelf kan uitvoeren. Introductie Internet, wat is het internet en wat is een homepage. HTML de basis van internet, onze eerste pagina HTML tags voor het opmaken van een pagina Werken met tabellen om tekst bij elkaar te houden Hyperlinks voor navigatie van pagina naar pagina. Forms, u wilt iets invoeren Frames voor het combineren van pagina s Een homepage op internet plaatsen, HTML Editors. DLA Ontwerp & Software, Culemborg 2

3 Introductie Internet, wat is het internet en wat is een homepage. Inleiding Het internet is niet meer uit het dagelijkse leven weg te denken. Vrijwel iedereen heeft op een of ander manier toegang tot het internet. Als het niet via thuis kan dan is de weg naar een internetcafe of bibliotheek meestal kort. Het internet bestaat uit een aantal elementen, de belangrijkste zijn: (het versturen van berichten naar mailboxen) World Wide Web (WWW) (een veelheid aan pagina s welke via hyperlinks (koppelingen) te bereiken zijn FTP (de mogelijkheid om bestanden van en naar een internet computer te zenden) In deze cursus wordt met name ingegaan op de mogelijkheden die het WWW biedt, een homepage is een eigen pagina op het WWW. In deze cursus worden de basiselementen getoond van de taal die op het WWW gebruikt wordt. Dit is de taal HTML. In de toelichting kom ik hier in op terug. Toelichting Het WWW is gebaseerd op pagina s die in een bepaald formaat staan. Dit formaat is erop gebaseerd dat een browser de pagina kan lezen. De taal van het WWW is HTML. De browser leest de HTML en vertaalt dit bijvoorbeeld in een afbeelding of een tekst op het scherm in de browser. HTML is een vrij eenvoudige taal welke in hoge mate gestructureerd is. Ondanks het feit dat de taal eenvoudig is, is het mogelijk om complexe pagina s te maken. Voor het maken van HTML pagina s kunnen allerlei hulpmiddelen gebruikt worden. In de laatste bijeenkomst kom ik hier kort op terug. Toch biedt het kennen van de HTML taal grote voordelen. Je kunt ook geen engels praten als je de taal niet geleerd hebt. Vandaar dat we in deze cursus ingaan op de HTML syntax. Echter we houden het eenvoudig zodat een beeld wordt gegeven van de mogelijkheden zonder de wens te hebben compleet te zijn. Hiervoor zijn goede bronnen te vinden waarop in de laatste bijeenkomst ingegaan wordt. Bij het maken van een internetpagina is het van belang dat de pagina aansluit bij de persoon die de pagina bezoekt. Hiervoor zijn veel regels opgesteld (het is een speciaal vak voor informatica studenten). Echter Alan Cooper heeft in zijn boek About Face drie regels opgesteld die altijd moeten gelden. In deze eerste bijeenkomst gaan we een aantal web sites op deze regels toetsen. De regels zijn heel eenvoudig. Als iemand achter de computer zit dan heeft hij/zij drie wensen: Een redelijke hoeveelheid werk verzetten (get a reasonal amount of work done) Een beetje plezier hebben (have a bit of fun) DLA Ontwerp & Software, Culemborg 3

4 Niet dom lijken (don t look stupid) Je zult zien dat heel erg veel internet sites of computer programma s heel erg zondigen tegen één of meer van deze regels. Voorbeeld Een voorbeeld van het toepassen van deze regels kan je eens uitproberen. Je wilt informatie over wat er in de tweede kamer gezegd is over dijkverzwaring. Ga naar de site en geef aan hoe deze site scoort op de drie bovengenoemde regels. Opgaven 1. Zoek op internet naar gegevens over de dichter die het gedicht "Denkend aan Holland" heeft geschreven. Gebruik hiervoor twee zoekmachines bijvoorbeeld Yahoo.com en Google.com) Kijk hierbij vanuit het perspectief van Alan Cooper. 2. Zoek informatie over Alan Cooper (welke boeken heeft hij geschreven) kijk hierbij naar de werkwijze die je gebruikt om te zoeken en hoe een zoekmachine hierop aansluit. Maak een score van 1 (slecht) tot 10 (goed) op basis van de drie criteria van Alan Cooper van de volgende sites: (bijvoorbeeld abonnement wijzigen) (wat kun je vinden over dijkverzwaring en landbouw) (zijn er werkzaamheden in het komende weekeinde tussen Utrecht en Culemborg Extra opgaven Je krijgt opdracht om een zoekpagina te maken voor een website die je gebouwd hebt. Geef aan hoe je te werk gaat om hoog te scoren op de drie regels van Cooper. Extra opgaven zijn bedoeld voor de cursisten die al enige kennis hebben op het gebied van internet. Ze zijn niet verplicht maar verrijken de kennis wel. Volgende bijeenkomsten Tijdens de volgende bijeenkomsten gaan we stapsgewijs een website maken met een aantal gedichten van Marsman. Daarom is het gewenst dat je bij de bijeenkomsten een diskette meeneemt met je werk/opgaven. Dit omdat de opgaven op elkaar aansluiten Daarnaast is het mogelijk om alle uitwerkingen via e- mail te ontvangen. Stuur een mailtje naar bert@dla-os.nl. Na de bijeenkomst ontvang je de uitwerkingen per mail. DLA Ontwerp & Software, Culemborg 4

5 HTML de basis van internet, onze eerste pagina Inleiding HTML (HyperText Markup Language) is de basis van iedere website die je bezoekt. HTML bestaat uit een beperkt aantal tags (commando s) waarmee het mogelijk is een pagina op te bouwen. Een browser die een nieuwe pagina opent gaat als volgt te werk. Hij begint te letter voor letter te lezen en als hij een combinatie van letters tegenkomt die hij ziet als een tag. Op basis van de tags veranderd de browser vervolgens de opmaak van de tekst die je op je scherm ziet of hij toont een andere pagina afhankelijk van de tag die door de browser gelezen wordt. Als je dit idee steeds in je achterhoofd houdt dan is de HTML taal niet moeilijk. In deze sessie gaan we onze eerste pagina maken. We doen dit met Notepad (kladblok) de eenvoudigste HTML editor die er bestaat. Toelichting Ieder HTML pagina bestaat zoals gezegd uit tags. Er is al beschreven dat een browser letter voor letter leest en als hij een combinatie tegenkomt die hij kent dan gaat hij op basis daarvan een aanpassing doen. Hierbij kun je, je voorstellen dat er begin en eind tags zijn. Bijvoorbeeld je wilt een woord onderstreept hebben in de tekst. In de HTML kun je dit bereiken door een tag te geven die aangeeft begin nu met onderstrepen en een tag die aangeeft dat het onderstrepen gereed is en dat de volgende letters weer gewoon zijn. HTML tags zijn een combinatie van letters die tussen < en > staan. Een begin tag bestaat uit de combinatie < > en een eind tag bestaat uit </ >. Een titel geef je dus weer met: <TITLE>Dit is een titel</title> Een HTML pagina bestaat uit twee onderdelen een kop (head) waarin informatie staat over de inhoud van de pagina en een lichaam (body) waarin de tekst staat die de browser op je scherm moet tonen. Daarboven staat een soort overkoepelende optie die HTML genoemd wordt. Een pagina heeft altijd de volgende opbouw: <HTML>Begintag dat het een internet document is <HEAD> begin van de kop van het document Hier komt informatie die interessant is voor bijvoorbeeld zoekmachines en HTML editors <TITLE>Dit wordt in de balk van de browser getoond </TITLE> </HEAD> <BODY> In de body toon je de tekst die de gebruiker moet lezen </BODY>Einde van de body </HTML>Einde van het HTML document DLA Ontwerp & Software, Culemborg 5

6 Je kunt zelf kiezen of je de tags met grote of met kleine letters doet en of je inspringt of niet voor voor HTML maakt dit niets uit. Persoonlijk werk ik netjes met hoofdletters voor de tags en spring ik in met Tab als ik een nieuwe tag begin en spring ik uit als ik met een eindtag opgeef. Voor de browser maakt het niets uit. Het maakt het allemaal wel veel leesbaarder, voor degene die de homepage moet onderhouden, als je het wel doet. Tip: Er zijn heel veel tags en we kunnen ze niet allemaal behandelen tijdens de cursus daarom wil ik verwijzen naar een internetpagina waar heel veel info te vinden is, ook een heel handig overzicht van HTML elementen. De URL (hyperlink) is In de komende bijeenkomsten zul je deze pagina regelmatig gebruiken om te kijken hoe je bepaalde zaken gaat oplossen. Voorbeeld Het voorbeeld bestaat uit een eenvoudige pagina waarin een header en een body getoond wordt. In de body staat een H1 (hoofdstukindeling) en een tekst. Tik de volgende tekst over in het kladblok en sla het bestand op met de extensie HTML bijvoorbeeld Eerste.html. Als je nu met de verkenner klikt op dit document dan wordt de pagina in een browser getoond. Dit is de manier waarop je eenvoudig kunt testen of de pagina goed is. <HTML> <HEAD> <TITLE>Mijn eerste Homepage</TITLE> <META NAME="Generator" CONTENT="TextPad 4.4"> <META NAME="Author" CONTENT="?"> <META NAME="Keywords" CONTENT="?"> <META NAME="Description" CONTENT="?"> </HEAD> <BODY> <H1>Mijn eerste internetpagina</h1> Hallo Culemborg </BODY> </HTML> Opgaven Vraag de tekst van het gedicht Herinnering aan Holland en plaats dit in een internet pagina. Voor de titel kun je gebruik maken van de tag H1 (header1). De tekst kan gewoon zonder opmaak ingevoerd worden. Extra opgaven DLA Ontwerp & Software, Culemborg 6

7 Pas de opmaak van het document zodanig aan dat de regels een zelfde opbouw hebben als het gedicht in het tekstbestandje. Centreer de tekst van het gedicht Kies een ander lettertype voor de gehele tekst Hint: gebruik de HTML website DLA Ontwerp & Software, Culemborg 7

8 HTML tags voor het opmaken van een pagina Inleiding In het begin van het internet was de opmaak van tekst niet belangrijk. Het was heel bijzonder dat de tekst in een leesbaar lettertype getoond werd en dat er hyperlinks waren. Op hyperlinks komen we later nog terug. Echter op dit moment is de opmaak van een website heel erg belangrijk. Door een goede opmaak is het mogelijk om de website een professionele en aangename uitstraling te geven. Daarnaast is het met opmaak goed mogelijk om hoog te scoren op de drie regels van Cooper. Toch is het moeilijk om de juiste balans te vinden voor de opmaak. Een website zonder kleuren wordt als saai ervaren. Echter een felgekleurde site met veel bewegende onderdelen wordt als schreeuwerig ervaren. In deze is het belangrijk om te zoeken naar het publiek wat je op je site wilt krijgen en de opmaak hierop aan te passen. Toelichting In het voorbeeld van het scherm van het Marsman gedicht is te zien wat het verschil is tussen een opgemaakte pagina en een onopgemaakte pagina. De pagina scoort trouwens niet geweldig op de regels van Cooper (waarom niet?) DLA Ontwerp & Software, Culemborg 8

9 De pagina toont hoe met een aantal eenvoudige tags. De belangrijkste zijn puntsgewijs: <body bgcolor="#007777" link="red" vlink="maroon" alink="#ff00ff"> Instellen van de body items. In dit voorbeeld wordt de achtergrondkleur ingesteld en worden hyperlink kleuren ingesteld. Kijk op de HTML help website met attributen die voor de body tag instelbaar zijn <img width="116" height="850" src="image001.gif" align="left" hspace="22" alt="herinnering aan Holland"> Het opnemen van een afbeelding in een html pagina zorgt ervoor dat de pagina verlevendigd wordt. De tag bestaat uit alleen een begin tag. Belangrijk is het src attribuut dat de naam van de afbeelding moet bevatten. Dit mag ook een hyperlink naar het internet zijn. <FONT face="arial Black" color="#ffffff">denkend aan Holland Met font is het lettertype voor een deel van de tekst in te stellen. Dit betekent dat de internetpagina een eigen gezicht krijgt. Let op dat je een font gebruikt dat algemeen geldend is. Kijk voor de attributen eventueel op de HTML tag pagina op internet. Voorbeeld Het voorbeeld is kort en bondig. Ga bijvoorbeeld naar de website en druk met de rechtermuisknop op de pagina en klik op bron weergeven (view source) kijk naar de opmaakcodes in het document dat geopend wordt. Probeer te doorgronden wat de code doet en let daarbij vooral op de opmaak Opgaven Neem de gedichtpagina van de vorige bijeenkomst als uitgangspunt en pas de opmaak aan. Neem bijvoorbeeld een afbeelding op (zoek bijvoorbeeld een rivier plaatje op internet Bekijk het resultaat met de browser. Extra opgaven Pas de pagina verder aan. Zorg ervoor dat de body een afbeelding als achtergrond krijgt. Zoek hiervoor een goede afbeelding op het internet (bijvoorbeeld DLA Ontwerp & Software, Culemborg 9

10 Werken met tabellen om tekst bij elkaar te houden Inleiding Als je een internetpagina maakt weet je nooit met welke computer uw bezoeker uw pagina bezoekt. Ook heb je geen idee hoe de browser geopend is. In onderstaande afbeeldingen zie je het verschilt tussen twee mogelijke gebruikers. Je ziet dat de eerste afbeelding de opmaak van de tekst ten goede komt. In de tweede pagina gaat de opmaak van de pagina verloren. Je kunt dit voorkomen door DLA Ontwerp & Software, Culemborg 10

11 tekst te groeperen met behulp van tabellen. Tabellen kunnen je helpen de opmaak te ondersteunen. Toelichting Tabellen worden binnen internet pagina s zoals gesteld vooral gebruikt voor het geven van extra opmaak aan een document. Bijvoorbeeld op het moment dat een gebruiker het formulier met daarin een internet pagina vergroot of verkleind dan wil je dat de tekst leesbaar blijft. Tabellen kunnen je hierbij helpen. Daarnaast kun je tabellen natuurlijk altijd gebruiken voor datgene waar een tabel daadwerkelijk voor bedoeld is namelijk het tonen van gegevens in een tabelopmaak omdat de gegevens een tabelindeling hebben. In het voorbeeld wordt de syntax toegelicht Voorbeeld De syntax van een tabel bestaat uit een aantal begin en eind tag combinaties. De belangrijkste zijn Element Begintag Eindtag Definieer een tabel <TABLE> </TABLE> Definieer een tabelrij <TR> </TR> Definieer een cel <TD> </TD> Definieer een kolomheader <TH> </TH> Hieronder zie je een opmaaktabel met een iets uitgebreidere opmaak. Je kunt de tags duidelijk herkennen in het voorbeeld. Let dat de volgorde van openen en sluiten erg nauw luistert. Vooral als je met een webeditor werkt kan het nesten van tabellen de HTML code moeilijk leesbaar maken. <TABLE ALIGN="left" BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%"> <TR ALIGN="left" VALIGN="middle"> <TH>Dichter</TH> <TH>Gedicht</TH> </TR> <TR ALIGN="left" VALIGN="middle"> <TD>H. Marsman</TD> <TD>Herinnering aan Holland</TD> </TR> <TR ALIGN="left" VALIGN="middle"> <TD>--</TD> <TD>Polderland</TD> </TR> </TABLE> Probeer te voorspellen hoe de pagina eruit gaat zien in een browser. Opgaven DLA Ontwerp & Software, Culemborg 11

12 Zet het opgemaakte gedicht van de vorige bijeenkomst in een tabelvorm. Probeer een opmaak te maken met een extra afbeelding in een cel. Extra opgaven De extra opgave bestaat uit het werken met colspan en rowspan. Zie de website met de tags. Maak de volgende tabellen met de tags voor tabellen en de colspan property. Probeer ook eens de achtergrondkleur van een cel aan te passen DLA Ontwerp & Software, Culemborg 12

13 Hyperlinks voor navigatie van pagina naar pagina Inleiding In het allereerste begin van internet was het navigeren door een tekst met behulp van hyperlinks een echte doorbraak. Ik kan mij nog herinneren dat een collega dat concept toonde in mosaic (een van de eerste browsers) en dat iedereen onder de indruk was van het potentieel van deze technologie. Vermeldenswaardig is dat ik die demo kreeg in Het concept van hyperlinks heeft een grote vlucht genomen en ik denk dat internet niet zo n vlucht had genomen als er geen hyperlinks waren geweest. Toelichting Een hyperlink is een verwijzing naar een ander internet document of een positie in een document of een combinatie van die twee. Een hyperlink wordt gebruikt om snel van de ene plek naar de andere te navigeren. Omdat we met internet adressen werken (de zogenaamde URL) maakt het niet uit waar deze internetpagina staat. Dat kan op mijn eigen computer zijn, maar ook aan de andere kant van de wereld. Dat hyperlinks belangrijk zijn blijkt uit het feit dat er zoek machines en startpagina s zijn. Kijk bijvoorbeeld eens op Dit is een pagina die niets anders doet dan een lijst geven van hyperlinks met een hele korte beschrijving. Een hyperlink bestaat uit een begin en eind tag waarbinnen je een willekeurig item kunt opnemen. Let op vaak zie je dat in je body attributen wordt opgenomen wat de kleur is van een hyperlink, een actieve hyperlink en een reeds bezochte hyperlink. Voorbeeld In dit voorbeeld toon ik de syntax van een hyperlink met een drietal opties <A HREF= >Naar Microsoft</A> <A HREF= test.html >Naar een pagina op mijn eigen homepage</a> <A HREF= /hoofdstuk1/test.html#eerst>een document in een subdirectory waarbij je in het document naar het anker Eerst gaat</a> In het bovenstaande voorbeeld kun je zien dat de syntax bestaat uit een begintag met <A waarin je een HREF een verwijzing opneemt. Tussen de begin en eind tag kun je een willekeurig iets opnemen zoals een tekst, maart bijvoorbeeld ook een plaatje. Opgaven Maak een mini website met de drie gedichten van Marsman (teksten even vragen) plaats deze teksten in een directory en maak vervolgens een pagina met hyperlinks naar deze drie pagina s. Zorg voor een lay out volgens de regels van Cooper DLA Ontwerp & Software, Culemborg 13

14 Extra opgaven Maak een pagina waarbij je de hyperlinks op basis van echte knoppen uitvoert. Zoek hiervoor naar afbeeldingen op internet die als knop gebruikt kunnen worden. Bedenk ook een standaard om te navigeren door de gedichten met zodat je ze allemaal op eenvoudige wijze kunt lezen (denk aan Cooper). DLA Ontwerp & Software, Culemborg 14

15 Forms, u wilt iets invoeren Inleiding In veel internet pagina s wordt een bezoeker de mogelijkheid geboden om iets in te voeren wat verstuurd kan worden naar de beheerder van de pagina. Dat kan een gastenboek zijn waarin iemand een opmerking kwijt kan. Het kan ook een systeem zijn waarbij je als bezoeker via het internet met een database communiceert. Denk hierbij aan en In deze sessie zullen we ingaan op het maken van pagina s met invoer. Toelichting Het maken van een pagina met invoervelden bestaat uit het maken van een form. Binnen deze form kun je meerdere controls plaatsen. Een control is een invoerelement. Hiervan zijn er verschillende te vinden. De balangrijkste controls zijn: Naam Omschrijving TEXT TEXTAREA SELECT CHECKBOX RADIONBUTTON BUTTON SUBMIT Voor het invoeren van standaardtekst in een regel Voor het invoeren van tekst in een aantal regels. Daarbij is het altijd mogelijk om als er meer regels zijn dan dat je kwijt kunt door te tikken, er verschijnt dan automatisch een schuifbalk. Voor het bieden van een keuzelijstje. De gebruiker moet dan iets kiezen uit een lijst van waarden Een aankruisvinkje wat twee waarden kan aannemen waar of niet waar Vergelijkbaar met een checkbox, maar meestal getoond in een groep met keuzemogelijkheden Een opdrachtknop waarmee men op de pagina iets kan veranderen. Werkt meestal in combinatie met javascript Een button die ervoor zorgt dat het formulier naar de webserver gestuurd wordt. Bij een formulier moet je eraan denken dat alle items binnen de tags <FORM> en </FORM> moeten staan, anders weet de browser niet dat er een formulier actief is. Bij een form moet je altijd de name en het id opgeven en een method (vrijwel altijd POST) en een action. Zodat het formulier weet wat er met de gegevens moet gebeuren. De controls hebben ook altijd een name en een id. Deze moeten binnen het formulier een unieke naam hebben. Er zijn nog veel meer attributen voor de forms en controls, maar het voert te ver om deze in deze cursus te behandelen. Details zijn te vinden op de genoemde HTML help pagina Voorbeeld DLA Ontwerp & Software, Culemborg 15

16 In de schermafdruk zie je een voorbeeld van een invulformulier. Hiervoor zijn een aantal controls gebruikt en een formulier. In de HTML code onder de afbeelding zie je de belangrijkste items weergegeven. <FORM method="post" <table border=4 celpadding=4 celspacing =15 bgcolor=#bbaabb > <tr> <td align=right>naam:</td> <td align=left><input type="text" size=20 name="naam" id= Naam value=""> </td> </tr> <tr> <td align=right>adres:</td> <td align=left><input type="text" size=25 name="adres" id= Adres value=""></td> </tr> <tr> <td align=right>postcode en Woonplaats:</td> <td align=left><input type="text" size=30 name="postcodewoonplaats" id="postcodewoonplaats" value=""></td> </tr> <tr> <td align=right>telefoon:</td> <td align=left><input type="text" size=10 name="telefoon" id= Telefoon value=""></td> DLA Ontwerp & Software, Culemborg 16

17 </tr> <tr> </tr> <tr> </tr> </table> </FORM> <td align=right valign=top>meer informatie over:</td> <td align=left> <SELECT size=3 name="gedicht" id= gedicht > <OPTION SELECTED>Herinnering aan Holland </OPTION> <OPTION>Polderland </OPTION> <OPTION>Landschap </OPTION> </SELECT> <td align=right><input type="submit" value="verzenden"> </td> <td align=left><input type="reset" value="opnieuw"></td> Je ziet dat zowel de form als de controls uit begin en eindtags bestaan als dit nodig is. Bijvoorbeeld een input control heeft geen eindtag nodig en deze ontbreekt dan ook. Verder zie je dat er binnen een form een tabel opgenomen wordt. Dat lijkt vreemd, maar dit zorgt ervoor dat de controls van het formulier netjes uitgelijnd worden. Het toont ook waarom eindtags en de juist volgorde van afsluiten zo belangrijk zijn Opgaven Op de gedichtensite van Marsman besluiten we een gedichtenwedstrijd uit te schrijven. De wedstrijd is de mooiste variatie op een van de Marsman gedichten. Je wilt daarom van mensen de volgende gegevens hebben: Naam adres Het gedicht wat als uitgangspunt dient De variatietekst. Neem opdracht knoppen op die relevant zijn Extra opgaven Je besluit om gedichtenbundels te gaan verkopen van Marsman en bezoekers kunnen deze via internet bestellen. Maak een pagina met een formulier welke dit afhandelt. Neem de regels van Cooper in acht. DLA Ontwerp & Software, Culemborg 17

18 Frames voor het combineren van pagina s Inleiding Op veel internet pagina s zie je een vorm van een menubalk waarbij je wanneer je op deze menubalk klikt een verandering ziet op een andere plaats van de pagina. Dit zijn pagina s die goed scoren op de punten van Cooper. Het maakt het mogelijk om snel te navigeren door de pagina s en het biedt de bezoeker een duidelijke structuur en houvast. In veel gevallen is zo n pagina opgebouwd uit een frames. Frames zijn internetpagina s die niets anders doen dan het combineren van pagina s en de inhoud van deze gekoppelde pagina s tonen. Toelichting Frames zijn in html tags die het mogelijk maken een pagina in vlakken op te delen. Met frames is het mogelijk om zowel horizontaal als verticaal een pagina in vlakken op te delen. Daarnaast heb je de mogelijkheid om de pagina in meer dan twee vlakken op te delen. Je kunt zelfs een pagina in zowel horizontale als verticale vlakken indelen. Hiervoor is een handigheidje nodig. Zie de extra opgaven. Ook een frame bestaat weer uit een aantal HTML tags die genest kunnen worden, de belangrijkste zijn: Naam <FRAMESET> <FRAME> <NOFRAME> Voorbeeld Omschrijving Met het commando frameset geef je aan dat een frame begint. De attributen die je bij een frameset opgeeft zijn erg belangrijk. Enkele opties zijn cols en rows. Hiermee kun je horizontaal en verticaal aangeven. Je geeft daarbij aan wat de grote van de pagina is Binnen een frameset geef je aan welke frames er zijn. Je geeft een frame een naam en een pagina (src) Oudere browsers kunnen niet omgaan met frames. Het is netter om te melden aan de bezoeker dat de pagina alleen bezocht kan worden met een goede browser. In onderstaande afbeelding is een opzet van een framepagina te zien. Daaronder staat de HTML code die erbij hoort. DLA Ontwerp & Software, Culemborg 18

19 <HTML> <HEAD> <TITLE>Marsman gedichten</title> </HEAD> <frameset framespacing="0" border="0" frameborder="0" cols="200,*"> <frame name="tabs" scrolling="no" noresize src="index.html"> <frame name="list" src="gedicht1.html"> </frameset> <noframes> <BODY> Your browser does not support frames! Please upgrade your browser. </BODY> </noframes> </HTML> De opzet is duidelijk denk ik. Er wordt een frameset gedefinieerd waarbinnen een aantal frames opgenomen zijn. Belangrijk is de cols met het aantal en het *. Met het aantal geef je de breedte aan van de eerste kolom. Met het * geef je aan dat de andere pagina de rest mag gebruiken van je scherm afhankelijk van de grootte van je beeldscherm. DLA Ontwerp & Software, Culemborg 19

20 Opgaven Maak een pagina waarbij je bovenaan het scherm een menu hebt met de drie gedichten. En onderaan met als je op een gedichtnaam klikt de tekst van het gedicht. Maak gebruik van frames Extra opgaven Maak een framepagina met de volgende indeling. Info homepage Gedicht 1 Gedicht 2 Gedicht 3 DLA Ontwerp & Software, Culemborg 20

21 Een homepage op internet plaatsen, HTML Editors Inleiding In de laatste bijeenkomst komen we toe aan de laatste stap van een homepage maken. Het op internet plaatsen van de pagina. Daarover is niet zoveel te vertellen, maar ik heb nog wel een paar tips. Ten tweede wil ik ingaan op HTML editors. We hebben in de afgelopen bijeenkomsten gewerkt met een eenvoudige editor. Dat is belangrijk want hierdoor leer je de taal van het HTML beter te begrijpen. Een nadeel is dat je erg veel zelf moet doen. Er zijn veel hulpmiddelen aanwezig die je het leven als HTML bouwer kunnen veraangenamen. Je krijgt een lijst van hyperlinks waar je hulpmiddelen kunt vinden en uitproberen. Toelichting Bij het op internet plaatsen van een internet pagina moet je rekening houden met de eisen die de provider (de organisatie van wie de computer is waarop je je pagina zet) stelt aan je pagina. Zo zijn veel providers bang om scripts en toepassingen op hun webserver op te nemen. Je wordt dan gedwongen om alleen met statische pagina s te werken. Verder heb je soms dat een webserver gevoelig is voor grote en kleine letters. Je moet daar rekening mee houden in je hyperlinks. Het kan zo zijn dat het op je eigen computer goed werkt, maar op de webserver niet. Test dit dus uit. Een ander punt is dat je er rekening mee moet houden dat het communiceren met een webserver voor veel gebruikers traag is. Neem dus geen afbeeldingen op die groot zijn. Het internet is vluchtig. Hiermee bedoel ik dat als een bezoeker te lang moet wachten op een pagina hij/zij vertrokken is voordat de hele tekst er staat. Advies is test de homepage uit bij de provider en kijk of het aan je eigen eisen voldoet. Voor wat betreft de html editors er zijn er velen, in alle prijscategorieën. Van heel duur tot gratis. In het voorbeeld noem ik een aantal editors Voorbeeld Op internet zijn enorm veel editors te vinden. Van heel eenvoudig tot heel complex. Ze maken het mogelijk om snel een pagina te maken. Wel hebben ze allemaal een nadeel. Je wordt gedwongen op de manier te werken die deze tool ondersteunt. Dat is een groter nadeel dan je op het eerste gezicht denkt. Verder staan er al een aantal html editors op je PC zonder dat je het weet. Zo kun je vanuit veel toepassingen (zoals MS-Word) opslaan als HTML bestand. Enkele tools zijn: Textpad een editor die gebruikt wordt door programmeurs. Deze editor kan naast programmacode ook HTML verwerken ( Frontpage is van microsoft en staat mogelijk al op je computer. Anders kan die vanaf de MS-Office CD geïnstalleerd worden. FirstPage van evrsoft een gratis editor met heel veel aardige mogelijkhedente vinden op DLA Ontwerp & Software, Culemborg 21

22 Andere editors zijn te vinden op en op Opgaven Kies een van bovenstaande editors en download eventueel een evaluatieversie van internet. Neem de bestaande website met frames en pas de opmaak aan (bijvoorbeeld ander lettertype en een afbeelding als achtergrond. Extra opgaven Als je een provider hebt voor bijvoorbeeld je kijk dan of je de pagina op internet kunt plaatsen. DLA Ontwerp & Software, Culemborg 22

23 Boeken en verder Een aantal boeken voor vervolg HTML voor Dummies, Ed Tittel, 1997 HTML 4.0 in de praktijk, Rinie Hooijer, 2001 Basiscursus HTML 4.01, Peter Kassenaar, 2002 Website met cursus en templates: DLA Ontwerp & Software, Culemborg 23