Inleiding website maken
Inleiding website maken
Bert Dingemans DLA Ontwerp & Software http://www.dla-os.nl
[email protected]
DLA Ontwerp & Software, Culemborg
1
Inleiding website maken
Titel Docent Veronderstelde voorkennis Samenvatting
Aantal bijeenkomsten Studiemateriaal
Bijeenkomst 1 Bijeenkomst Bijeenkomst Bijeenkomst Bijeenkomst Bijeenkomst Bijeenkomst Bijeenkomst
2 3 4 5 6 7 8
Inleiding website maken Bert Dingemans Enige kennis van Internet en MS-Windows 95,98 2000 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
Inleiding website maken
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: • E-mail (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
Inleiding website maken
•
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 www.tweedekamer.nl 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: www.kpn.com (bijvoorbeeld abonnement wijzigen) www.minlnv.nl (wat kun je vinden over dijkverzwaring en landbouw) www.ns.nl (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 email te ontvangen. Stuur een mailtje naar
[email protected]. Na de bijeenkomst ontvang je de uitwerkingen per mail.
DLA Ontwerp & Software, Culemborg
4
Inleiding website maken
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 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: Begintag dat het een internet document is 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 In de body toon je de tekst die de gebruiker moet lezen Einde van de body Einde van het HTML document
DLA Ontwerp & Software, Culemborg
5
Inleiding website maken
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 http://www.html.pagina.nl 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. <TITLE>Mijn eerste Homepage <META NAME="Generator" CONTENT="TextPad 4.4"> <META NAME="Author" CONTENT="?"> <META NAME="Keywords" CONTENT="?"> <META NAME="Description" CONTENT="?">
Mijn eerste internetpagina
Hallo Culemborg
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
Inleiding website maken
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
Inleiding website maken
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
Inleiding website maken
De pagina toont hoe met een aantal eenvoudige tags. De belangrijkste zijn puntsgewijs: 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
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.
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 www.microsoft.com 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 www.google.nl). 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 www.freegraphics.com)
DLA Ontwerp & Software, Culemborg
9
Inleiding website maken
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
Inleiding website maken
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 Definieer een tabelrij
Definieer een cel | Definieer een kolomheader
| 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.
Dichter | Gedicht |
H. Marsman | Herinnering aan Holland |
-- | Polderland |
Probeer te voorspellen hoe de pagina eruit gaat zien in een browser.
Opgaven
DLA Ontwerp & Software, Culemborg
11
Inleiding website maken
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
Inleiding website maken
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 1994. 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 www.html.pagina.nl 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
Naar Microsoft Naar een pagina op mijn eigen homepage Een document in een subdirectory waarbij je in het document naar het anker Eerst gaat In het bovenstaande voorbeeld kun je zien dat de syntax bestaat uit een begintag met
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
Inleiding website maken
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
Inleiding website maken
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 www.amazon.com en www.bol.com. 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 Voor het invoeren van standaardtekst in een regel TEXTAREA 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. SELECT Voor het bieden van een keuzelijstje. De gebruiker moet dan iets kiezen uit een lijst van waarden CHECKBOX Een aankruisvinkje wat twee waarden kan aannemen waar of niet waar RADIONBUTTON Vergelijkbaar met een checkbox, maar meestal getoond in een groep met keuzemogelijkheden BUTTON Een opdrachtknop waarmee men op de pagina iets kan veranderen. Werkt meestal in combinatie met javascript SUBMIT 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 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
Inleiding website maken
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.
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 • Email 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
Inleiding website maken
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 Omschrijving