Mijn eerste Website. Basis kennis en praktijk oefeningen. Handleiding-syllabus. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 1

Transcriptie

1 Mijn eerste Website Basis kennis en praktijk oefeningen Handleiding-syllabus. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 1

2 MODULE 1: BROWSERS EN WEBSERVERS Dit is een theoretisch onderdeel. [Max 30 minuten] Hoe werkt het internet? Het internet is een netwerk opgebouwd uit Routers die met elkaar verbonden zijn. Elke router is een beetje te vergelijken met een postkantoor: er komen briefen en pakjes binnen, we lezen de bestemming, en steken de brief of pakje op een transport in de richting van de bestemming. Ons bestand met de postcodes is de Routing Tabel. De router praat regelmatig met al zijn buren: als ze antwoorden blijven ze in de routing tabel: als ze niet meer antwoorden worden ze een tijdje uit de lijst genomen. Als dus ergens een router uitvalt, zijn er nog voldoende alternatieve wegen om de bestemming te bereiken: het is een zeer robuust netwerk. Elke netwerk component, een router of een aansluiting zoals een PC, krijgt een IP Adres dat wordt gebruikt om te routeren. Het bestaat uit 4 blokjes: bv Omdat zo een adres voor de mens moeilijk te onthouden is wordt het vertaald: men vertrekt van een Domein Naam, in het internet staan speciale Routers die de vertaling doen (de DNS of Domain Name Service). Hoe werkt het surfen? Als twee PC s over het internet met elkaar willen praten, dan moeten ze bepaalde spelregels volgen, en de uitgewisselde boodschappen moeten aan een zekere syntax voldoen. Dit ligt vast in een Protocol, specifiek voor elke toepassing. Om te surfen zullen we gebruik maken van het HTTP protocol:het Hyper Text Transfer Protocol. Aan de ene kant bevindt zich een PC, met daarop een WebBrowser, of bladerprogramma. Aan de andere kant bevindt zich een Host, met daarop een WebServer. De Browser stuurt een vraag voor een pagina naar de WebServer. Deze zoekt in zijn mappen naar de juiste pagina en de bestanden die erop zijn vermeld (de prentjes, stijldocumenten etc ). Als de Browser het antwoord ontvangt schrijft hij de inhoud van de pagina met de bijhorende prentjes, netjes op het scherm. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 2

3 Wat is een URL? Een Universal Resource Locator of URL is een notatie, een soort adres (Location) geeft om om het even welk (Universal) bestand (Resource) op te halen. We ontleden even een voorbeeld: We onderscheiden: http: dit is het protocol dat we willen gebruiken. // is het adres van de host die nodig hebben: de domein naam zal uiteindelijk door DNS worden vertaald naar het IP Adres van de Host. /info is een stuk van de mappen structuur van de WebServer die we aanspreken. ligging.html is de pagina die we opvragen. Ingekort: de browsers gebruiken altijd http: dus moet de gebruiker dit niet typen. heel wat, maar niet alle domeinnamen beginnen met www : dit mag je dus ook weglaten. Een goedgemaakte website heeft altijd een startpagina van het type index.html: dus mag je ook dat vaak weglaten. Probeer dus maar eens volgende URL: seniornetvl.be en je komt op onze home pagina. Speciaal geval : je moet niet altijd pagina s op een WebServer gaan halen: je kan ook gewoon een pagina in een map op je PC bekijken: dan gebruik je geen http: maar file:. Bijvoorbeeld: file:///c:/map/index.htm De extra / staat voor Deze Computer, de root. Wat doet de web designer? Natuurlijk moet iemand de webpagina maken: de web ontwikkelaar. Hij doet dat op zijn PC met een ontwikkelings omgeving, en als zijn werk klaar is plaatst hij de pagina s op de WebServer. Hiervoor wordt een ander protocol gebruikt : het FTP of File Transfer Protocol. Gratis programma s zijn KompoZer om te maken, en FileZilla om over te zetten. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 3

4 Eenvoudige (statische) webpagina s. Zoals we verder zullen zien schrijft men pagina s als tekst, met speciale blokjes: de TAGS. Dit is de HTML taal: Hypertext Markup Language: naast gewone tekst, kan men deze ook mooi opmaken, men kan prentjes, lijsten en tabellen toevoegen, en verwijzingen (Links) naar andere pagina s om zo een virtueel boek samen te stellen. Maar dit alles is er stilstaand (statisch). Dynamische webpagina s. We willen meer: dingen die bewegen, of reageren op onze muis clicks. Daartoe moet er ergens een stukje programma worden uitgevoerd: men heeft hier in de loop van de jaren verschillende oplossingen voor gezocht en gevonden. Men heeft eigenlijk 2 opties: a) Het programma loopt op de PC: een paar voorbeelden: JavaScript en Visual Basic Script Applets (kleine applicaties in Java) en ActiveXControls ( typisch voor Microsoft) Flash (van Macromedia of Adobe) Als de browser deze programma s in de ontvangen pagina ziet staan, geeft hij even de controle door aan een interpreter, of een plug-in die ermee overweg kan. Het resultaat zal de browser dan op het venster plaatsen. b) Het programma loopt op de Host: een paar voorbeelden: Servlets (kleine applicaties in Java) en JavaServerPages(JSP: grote programma s) Active Server Pages(ASP en de dot.net variant ASPX van Microsoft) Als de WebServer speciale Tags opmerkt in de net opgehaalde pagina, zal hij dit stuk eerst doorgeven aan een andere Server, die hiermee overweg kan. Deze server doet zijn werk en levert terug HTML af aan de WebServer, die het dan tussenvoegt. 3 Tier systemen. Nog wat zwaarder: veel websites gebruiken een achterliggende database die interessante gegevens bevat. We krijgen nu een systeem in 3 trappen: Trap1: de WebServer die de pagina krijgt en merkt dat er een programma nodig is. Hij laat dit uitvoeren, en plaatst het resultaat in de HTML webpagina. Trap2: de Programma Server stelt een SQL vraag samen, om de gegevens aan de database te vragen en het resultaat dan weer in het juiste formaat in te pakken. Hier vind je de programmeer omgevingen zoals CGI-script, Java, C#, PHP, Coldfusion e.a. Wat mag je tonen en wie mag wat krijgen: dit bepaalt het programma: men zegt dus vaak dat hier de Business Rules worden geprogrammeerd. Trap3: de Database Server: dit kan een eenvoudige Microsoft Access database zijn, of een gratis MySQL, of een zware Oracle database. Conclusie Voor mijn eerste website, zal ik het houden bij eenvoudige statische pagina s. Dynamische pagina s, programmering en database vallen buiten het bestek van deze korte cursus. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 4

5 Om een website te bouwen hebben we keuze tussen een 3 tal benaderingen: 1. Op de PC, met een algemeen programma en FTP Men maakt de pagina s met een programma en brengt het resultaat met FTP over op de webserver. Het voordeel is de 100% vrijheid, maar het nadeel is dat je zelf echt alles van nul af aan moet maken. Voorbeelden: Voor de beginner: KompoZer Iets meer gevorderd: Frontpage van Microsoft De professional: Dreamweaver 2. Op de PC met een speciaal programma dat een aantal sjabloons aanbiedt, waarbinnen men kan werken. Ze zijn meestal wel mooi, maar je kan bijna niet buiten het harnas van de sjabloon treden. Voorbeelden: Website X5, Xara Webstyle 3. On-line met klaargemaakte Sjabloons, zonder FTP. Voordeel: geen programma nodig op de PC. Nadeel, weer gebonden aan de sjabloons. Content management systeem: alle bouwstenen van de site zitten in een database (meestal MySQL). De gebruiker levert alleen inhoud (content). De programmatuur ( meestal PHP) plaatst de content in de voorzien elementen uit de database Voorbeeld: mijnweb.nl, Google Sites,Joomla, Wordpress, Drupal Wij zullen nu 3 benaderingen illustreren: Eerst werken we met KompoZer: dit zal ons inzicht geven in HTML. Dan maken we een kleine site, met WebSiteX1: dit brengt ons bij hoe we met meerdere pagina s omspringen. Vervolgens proberen we een kleine site op mijnwebsite.nl. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 5

6 MODULE 2 : EEN PAGINA MAKEN MET KOMPOZER In dit gedeelte gaan we de HMTL editor KompoZer leren installeren en een eerste keer gebruiken. Wat is HTML? HTML is HyperText Markup Language, de meta taal (Language) waarmee men een pagina maakt. Gewone tekst is niet voldoende: er is opmaak (fonts, kleur) en structuur(lijsten, tabellen) nodig: dit is de Markup. Het is de bedoeling om van de ene pagina naar de andere te springen als in een virtueel boek : vandaar de Hypertext met Hyperlinks. In latere versies werden Multi Media toegevoegd: prentjes, geluid, video. We zijn intussen al aan versie 5, maar niet alle browsers ondersteunen de nieuwe mogelijkheden. Over Tags en Attributen De HTML is gebaseerd op Tags: dit zijn instructies voor de Browser om iets anders te doen dan gewoon de tekst op het scherm te zetten. Er is meestal een openings- en sluitingstag. Notatie: <TAG> tekst </TAG> Men schrijft meestal hoofdletters, om ze duidelijk van de tekst te onderscheiden, maar het is niet verplicht. Er zijn Tags voor: Opmaak Structuur/opbouw Hyperlinks Multimedia: beelden, geluiden En veel meer Naast Tags zijn er Attributen (toevoegsels, eigenschappen): ze staan binnen de Tags: <TAG ATTRIBUTE = WAARDE>.</TAG> De onderdelen van een pagina Net als bij een brief, of een , bestaat een pagina uit een paar delen: Het document wordt afgelijnd door de HTML tags. Er is een hoofding tussen de HEAD tags waarin titel en verwijzigen komen. De eigenlijke inhoud komt in de BODY. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 6

7 Veel gebruikte Tags 1. Opmaak: <H1 6> een kopregel </H1 6> <FONT SIZE = x> lettergrootte </FONT> <B> vetjes </B> <I> cursief </I> <STRIKE> doorstreept </ STRIKE > 2. Voor structuur en indeling: 3. Inhoud: <P> een paragraaf </P> <BR/> een blanco lijn <HR> een horizontale lijn <..ALIGN=CENTER.> om te centreren <UL> opsomminglijst </UL> <LI> een element van de lijst </LI> <TABLE><TR><TD> Tabel, rij, kolom </TD></TR></TABLE> Tekst, waar men wil. <IMG SRC = path en bestand WIDTH= breedte HEIGHT= hoogte ALT= alternatieve tekst /> voor een beeld: geen afsluitingstag <A HREF= de URL TARGET= _blank > hier de verwijzing </A> We zijn nu klaar voor onze eerste oefening. Voor het installeren van KompoZer verwijzen we naar de bijlage 1 achteraan. Je kan tijdelijk terecht op voor een kompozer.zip. We zetten alles klaar voor onze oefening: Maak een map mijnwebsite en daarin een submap images we halen ook marmer.gif,logo.jpg en header.png op deze locatie, en slaan ze op onder images Onze oefening bestaat uit drie stappen, waarna we het resultaat opslaan. We gaan dan verder met nog eens 3 stappen. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 7

8 Oefening 1 Stap 1: we beginnen een lege pagina Bestand Nieuw Blanco document, en plaatsen er volgende tekst in: voor een nieuwe lijn gebruiken we de enter toets. Stap 2: we kiezen in het menu Opmaak, onderaan voor Paginakleuren en achtergrond. Hier klikken we op Aangepaste kleuren gebruiken en nemen bijvoorbeeld groen voor de achtergrond en lichtblauw voor de tekst. Stap 3: We selecteren alle tekst en kiezen via het menu Opmaak Lettertype voor Comic Sans MS. We selecteren de eerste lijn en vergroten de tekst via de knop met de grote letter A. We selecteren de laatste 3 lijnen en via het menu Opmaak Lijst maken we een opsomming. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 8

9 Het resultaat ziet er nu zo uit: Onderaan zien we 4 weergave mogelijkheden: Normaal: is de weergave wanneer we aan het werken zijn HTML-tags: is nuttig om de opbouw te bekijken: alles tussen een openings- en een sluitingstag wordt als een blokje weergegeven. Bron: de HTML weergave van de pagina Voorbeeld: zoals de browser de pagina op het scherm zal schrijven. Als we op Bron klikken krijgen we dit te zien: SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 9

10 Laten we dit even bestuderen. We herkennen de <html></html> die het document aflijnt. Daarbinnen vinden we de <header></header> en de <body></body>. In de header staan meta gegevens en de titel, zoals die bovenaan in de browser zal verschijnen. In de body staan een paar attributen: de color voor de tekst kleur en de backgroundcolor voor de groen achtergrond. Ook de kleuren voor de verschillende toestanden van de hyperlinks worden ingesteld. Een <div></div> wordt vaak gebruikt om te positioneren: hier centreren. Overal waar we het lettertype hebben ingesteld, door alles te selecteren, werd een <span></span> toegevoegd, met als attribuut, het gevraagde lettertype: de font-family. We herkennen ook de blanco lijn met <br>, die ook hetzelfde lettertype kreeg. Tenslotte is er de <ul></ul>: de unordered list : een niet genummerde lijst. Daartussen de <li></li>: de list items, de onderdelen van de lijst. Door voortdurend te schakelen tussen de normale weergave en de HTML-weergave, kunnen we veel ervaring opdoen. We kunnen in de browser de bron van de actuele pagina opvragen via het menu Beeld. Links, in Firefox 3, rechts in Internet Explorer 7 Alvorens verder te gaan, slaan we dit resultaat op via het menu Bestand Opslaan als en we zoeken naar \mijnwebsite en slaan op als oefening1.html. Als je Firefox gebruikt, kan je beschikken over een zeer interessante plug in: FireBug. Hiermee kan je de HTML code, de stijlkenmerken (CSS), de java-script, van om het even welke pagina op het internet bekijken, en snel fouten localiseren. Je kan het hier halen en installeren: addon/1843 SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 10

11 We gaan verder met de oefening: we vertrekken van oefening1.html. Stap 4: we willen een mooie achtergrond: daarvoor kiezen we in het menu Opmaak, onderaan voor Paginakleuren en achtergrond. We gaan op de achtergrond een afbeelding zetten: klik op het mapje en ga naar..\mijnwebsite\images\marmer.gif. We klikken dan op OK. Stap 5: We selecteren eerst al onze tekst. In het menu Opmaak kiezen we Tekstkleur en we kiezen voor donker bruin, omdat dat goed contrasteert met het roze marmer. We klikken weer op OK. Stap 6: tussen onze eerste en onze tweede regel willen we een logo plaatsen. We plaatsen de cursor net onder de tekst Dit is mijn homepagina en kiezen in het menu Invoegen voor Afbeelding. In het tabblad Locatie klikken we weer in het gele mapje en zoeken naar..\mijnwebsite\images\logo.jpg. De URL is relatief ten opzichte van de paginalocatie : de notatie../ wil zeggen, ga een niveau hoger en zoek daar naar /images. We klikken weer op OK. We slaan deze pagina weer op via het menu Bestand Opslaan als en we zoeken naar \mijnwebsite en slaan op als oefening2.html. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 11

12 We bekijken weer even het resultaat: Stap 7: We proberen het nu eens vanuit de HTML weergave: we zullen de HTML wat vereenvoudigen: Eigenlijk is al onze tekst met dezelfde font-family gemaakt: we kunnen dit attribuut dus aan de <body> toevoegen en in alle andere tags wegnemen. We willen ons logo mooi centreren en plaatsen het dus tussen <DIV> tags met het attribuut style= Text-align: center; Door de <span> tags te verwijderen, komt de rest links uitgelijnd te staan. We slaan deze pagina weer op via het menu Bestand Opslaan als en we zoeken naar \mijnwebsite en slaan op als oefening3.html. Raar maar waar, als we de pagina weer in de Browser bekijken zien we geen verschil met de vorige pagina. Alleen werd de broncode vereenvoudigd. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 12

13 Conclusie na oefening 1: tijdens deze oefening zal je opgemerkt hebben dat de volgorde waarin je dingen doet van groot belang is. Daarom deze tips: Maak eerst op papier een schets van hoe je pagina er moet uitzien: anders moet je achteraf te veel aanpassen. Stel eerst de algemene eigenschappen van de pagina in (komt slechts 1 keer in de <body> te staan, en niet bij elk element ) Achtergrond prentje Kleur van de tekst Dan alle tekst typen, met de nodige blanco lijnen ertussen: let op het verschil: een ENTER toets gebruiken maakt een nieuwe <P>, en een SHIFT + ENTER geeft een <BR>. Pas daarna de teksten opmaken Eventueel vergroten of een andere kleur of schuin Centreren of rechts uitlijnen Lijsten maken, genummerd of niet genummerd Prentjes toevoegen tussenin Wat we niet hebben gezien Er zijn natuurlijk veel meer Tags en Attributen: als je ze eens wil bestuderen kan ik volgende site aanraden: Een paar belangrijke: Als je de pagina wil opdelen in meerdere vakken zijn er 2 opties: a) Werken met tabellen: via het menu Invoegen Tabel kies je voor een tabel met een aantal rijen en kolommen. Je de grootte van de cellen aanpassen door te verslepen. Alles wat we hierboven gezien hebben, kan je nu toepassen op een cel. b) Werken met <DIV> en stylesheets: als je op internet op zoek gaat naar gratis sjabloons, zal je mooie dingen tegenkomen. Maar op de recente websites worden de elementen gepositioneerd met <DIV> en stylesheets. De syntax voor de stylesheets (CSS) is erg verschillend van de HTML syntax, en vraagt veel oefening KompoZer is ook niet echt de juiste tool om hiermee te werken. Voor zelfstudie kan ik volgende site aanbevelen: Formulieren met invulvakjes, keuzevakjes, en opdracht knoppen werken met de tag <FORM>, en zijn een hoofdstuk apart ; je kan ze wel met KompoZer maken. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 13

14 MODULE 3 : WAAR NAARTOE MET ONZE EERSTE PAGINA We hebben nu wel onze eerste pagina gemaakt, maar waar moeten we ermee heen? Er zijn 3 opties: 1. Gewoon op onze PC laten staan: als bestanden in een map. Maar, dan is enkel HTML mogelijk, want er is geen server met code aanwezig. 2. Op een locale WebServer: Windows XP Professional heeft een IIS WebServer : deze kan ASP en ASPX, en heeft links relatief t.o.v. de root. Windows 8 en 10 hebben een IIS WebServer 7 aan boord. Er bestaan ook open source WebServers, zoals Tomcat Apache. 3. Op een publieke Host met Webserver in het internet: dit noemt men Hosting: de site op een Host plaatsen bij een provider. Die zorgt voor de nodige beveiliging en back up. We gaan wat dieper in op de Hosting. Er zijn weer twee opties: Je hebt een internet abonnement bij een Provider die ook Hosting doet: bijvoorbeeld bij Telenet of Skynet: daar heb je als klant 50 Mbyte web ruimte: je krijgt dan een domeinnaam van het type users.telenet.be/voornaam.naam/ of users.skynet.be/voornaam.naam/ Hoe je die kan activeren tonen we kort in Bijlage 3. Bij een Hosting bedrijf: Daar moet je eerst beginnen met de aanvraag van een domeinnaam, zoals of.eu. Je krijgt meteen ook een tiental mailboxen. Verder zal je een bedrag per maand of per jaar moeten betalen, afhankelijk van: de grootte van de webruimte en de trafiek die verwacht wordt de gewenste technologie: programma (PHP,.NET, Coldfusion ) en database Enkel voorbeelden: Vb1. gekend, en goedkoop Vb2. Vb3. ondersteunt asp,aspx en php Om pagina s van uw PC naar de WebServer te brengen moet je gebruik maken van FTP (File Transfer Protocol). KompoZer en Dreamweaver hebben zo een module aan boord. Je kan ook opteren voor een gratis tool voor FTP, die je voor andere toepassingen dan websites kan gebruiken: de FileZilla. Hoe je FileZilla kan downloaden en installeren, kan je vinden in Bijlage 2. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 14

15 We werken in deze cursus even verder met FileZilla. Je moet volgens dit FTP protocol eerst een verbinding met de FTPServer tot stand brengen. Hiervoor moet je volgende gegevens inbrengen: de URL van de Host van de FTPServer de gebruikersnaam die je van de Hosting maatschappij of van de Provider kreeg het wachtwoord dat je van de Hosting maatschappij of van de Provider kreeg Eens deze gegevens ingebracht, kan je hiermee de verbinding tot stand brengen. FileZilla toont je 3 vensters: in het bovenste zie je de opdrachten en antwoorden van de FTP Server. het linkse venster geeft je een overzicht van je eigen PC, net of je met de Verkenner kijkt op Deze Computer. het rechtse venster geeft je een overzicht van de mappen en bestanden op de WebServer, zoals die voor jou zijn gereserveerd. Om bestanden over te zetten, open je links de map waar ze staan, en open je rechts de map waar ze moeten komen. Dan sleep je ze met de linkermuisknop ingedrukt van het linkse naar het rechtse deelvenster. De overdracht (transfer) gebeurt nu vanzelf. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 15

16 Lokale webservers: SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 16

17 SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 17