Syllabus Zelf een website bouwen. Artheos

Artheos Syllabus ‘Zelf een website bouwen’

Helma de Boer Artheos Webdiensten & Office Support www.artheos.nl © 2012

Syllabus Zelf een website bouwen

Inhoud H1 De techniek van een website.......................................................................... 3

1.1 Browser en website .................................................................................. 3 1.2 De techniek van een webpagina (HTML) ................................................... 6 1.3 Je eerste webpagina maken ...................................................................... 7 1.4 Hoe krijg je een pagina op het internet? ................................................... 8 H2 De opmaak van je website aanpassen ......................................................... 11 2.1 Doel en doelgroep .................................................................................. 11 2.2 De lay-out opgeven via CSS ..................................................................... 11 2.3 Werken met links, afbeeldingen, downloads en filmpjes ......................... 12 2.3.1. Een link maken ................................................................................ 12 2.3.2 Verwijzen naar een PDF ................................................................... 13 2.3.3 Afbeelding uploaden, invoegen en positioneren............................... 14 2.3.4 Een YouTube-filmpje in de site binnenhalen ..................................... 16 2.4 Webtips .................................................................................................. 17

© Artheos – www.artheos.nl

2/17

Hoofdstuk

1


De techniek van een website Je hebt er waarschijnlijk alle dagen mee te maken: het internet. Zodra je het internet opgaat lees je informatie op je beeldscherm. Maar hoe komt die informatie daar eigenlijk? Wil je zelf een website gaan bouwen, dan moet je weten hoe een website is gebouwd. In dit hoofdstuk wordt dat uitgelegd. In hoofdstuk 1 van deze module kom je meer te weten over hoe een website werkt. Je leert de basis van een website kennen: welke ingrediënten heb je nodig om een website te bouwen. Als je dat weet, kun je zelf aan de slag. In dit hoofdstuk komen de volgende onderwerpen aan de orde: 1.1 Website en doel 1.2 De basisopbouw van een webpagina (HTML) 1.3 Je eerste webpagina maken 1.4 Hoe krijg je een HTML-pagina op het internet?

1.1 Browser en website Voor het bekijken van webpagina’s moet je een zogenaamde webbrowser openen. Bekende browsers zijn Internet Explorer, Google Chrome, Firefox en Safari. Dit zijn softwareprogramma’s die speciale code uitlezen en dan begrijpen hoe een website aan jou moet worden getoond. Wat is een website nu precies? Je kunt een website vergelijken met een gebouw. Een gebouw bestaat het uit verschillende onderdelen: een ontwerp (architect)* bouw van het ontwerp (door aannemer), met daarin: - technische onderdelen naar keuze (verwarming, elektra, magnetron, etc.) - inhoud (aankleding, meubels) én een huisnummer. * Belangrijk: de vorm hangt af van de functie van het gebouw (bijvoorbeeld: bioscoop, boerderij, flat)

Oefening 1 Kun jij bedenken wat je nodig hebt om een website te bouwen?


3/17


Bij een website werkt het net zo als bij een gebouw. Je heb nodig: een ontwerp (grafische vormgeving; de lay-out) de opbouw (uit code) met daarin naar keuze: - technische onderdelen naar keuze (fotogalerij, video-ondersteuning, formulier, interactiviteit, zoekmodule, etc.) - inhoud (tekst, film, links, PDF’s). én het heeft een adres: de domeinnaam. De domeinnaam kun je vergelijken met een huisnummer. De afbeelding hieronder geeft je een goede indruk.

Figuur 1

Doel van een website Voordat je een website kunt bouwen moet je een paar vragen beantwoorden. De belangrijkste vraag is: wat is het doel van deze website? Pas als je het doel weet, weet je waar je bij het ontwerpen en bouwen rekening moet houden.

Oefening 2 Bekijk de volgende websites en vertel welk doel ze hebben: www.ics.nl www.capellen.nl www.icscards.nl www.cambiumned.nl


www.youtube.com www.nu.nl

4/17


statisch en dynamisch

Er zijn twee soorten websites: statische en dynamische. Een statische website bestaat uit pagina’s die niet veranderen. Iedere bezoeker krijgt exact dezelfde inhoud te zien. Het zijn zogenaamde platte pagina’s die je kunt vergelijken met een Word-document. Een dynamische website kan meer. Zo’n website is meer geautomatiseerd en kan gegevens uit een database halen. Dat gebeurt niet zomaar, dat regel je als bezoeker, zonder dat je het weet. Denk bijvoorbeeld aan: een zoekopdracht uitvoeren het lezen van een nieuwsbericht het bekijken van een filmpje Een dynamische website is hetzelfde als een database-gestuurde website.

Informatie aanbieden via navigatiemenu

Voordat we met het bouwen van een website van start kunnen gaan, moet je eerst bepalen wat je ermee wilt: het doel. Als je dat weet, dan kun je ook bedenken welke informatie je op de site wilt zetten. Dat is belangrijk, want de manier waarop je die informatie structureert, wordt de basis van je website: je navigatiemenu. De navigatie is de fundering van je website. Via de navigatiebalk kunnen bezoekers de informatie vinden die ze op je site zoeken. Het is belangrijk dat je navigatiestructuur op een logische manier opbouwt.

Oefening 3 Kun je uitleggen waarom je een navigatiebalk met een plattegrond kunt vergelijken?

Opdracht 1 – bepaal het doel en de basisopzet van je website Vorm een duo met een klasgenoot. Samen gaan jullie bedenken wat voor soort website jullie willen gaan maken. Beter gezegd: welk doel jullie website krijgt. Je krijgt ongeveer een kwartier de tijd om een eerste plannetje te maken. Dit plan gebruik je als basis tijdens de rest van deze webtraining. Zorg ervoor dat je minstens vier pagina’s in je site opneemt. Je kunt bijvoorbeeld een humoristische site maken (amuseren) of een site waarin je kennis wilt overdragen (bijvoorbeeld hoe dressuur in de paardensport werkt). Je kunt ook kiezen voor een blog. Stel het doel van de site en bekijk welke onderwerpen je in de site wilt verwerken. Bijvoorbeeld zo:


5/17


1.2 De techniek van een webpagina (HTML) HTML is de taal waarmee je webpagina’s maakt, pagina’s die op het internet kunnen worden bekeken. HTML staat voor Hypertekst Markup Language.

HTML, openen/sluiten code

Een webpagina bestaat uit twee lagen. Eén laag daarvan zie je niet: de HTMLcode. De andere laag toont de pagina zoals een bezoeker deze ziet. Dit gebeurt aan de hand van de HTML-code. Aan de hand van deze code weet de browser hoe de pagina aan de bezoeker moet worden getoond. HTML bestaat uit codes die zich openen en sluiten. Tussen deze codes staat de inhoud van de pagina. Bijvoorbeeld <strong>vette tekst. Je ziet hier dat je kunt aangeven waar vette tekst begint en waar het eindigt. De slash / is een code voor afsluiting. Een HTML-code zelf bestaat ook uit twee onderdelen, namelijk: - het eigenschappendeel: code die de browser een aantal aanwijzingen geeft - het inhoudsgedeelte: de inhoud voor de bezoeker (en beknopte code) Zo’n code ziet ziet er – beknopt – zo uit: Titel tabblad browser
Voorbeeld

Subkopje

Hier komt de paginatekst.

tags


Je ziet dat in HTML veel dingen tussen staan. Die haakjes geven de browser commando's over wat er moet gebeuren. Dit zijn tags. Er is altijd een begintag en een eindtag. De belangrijkste is en . Deze tags geven aan dat wat er tussen de tags staat, in HTML kan worden uitgelezen. De slash / sluit een tag af.

6/17


Let op: sommige tags hebben binnen zichzelf opening en sluiting. Bijvoorbeeld een zachte enter:
of een lijn:
. Je ziet dat de slash dan binnen de tags voor het laatste haakje staat.

De tekst in de tag is het gedeelte dat de browser een aantal aanwijzingen geeft. Bijvoorbeeld de titel: dit is het onderdeel dat bovenin het tabje verschijnt: De tekst in de is het Figuur 2 deel waarin de inhoud voor de bezoeker staat. Ook hierin staan codes, want de browser moet wel onderscheid kunnen maken voor de wijze van presentatie (kopjes, subkopjes, vet, etc.). Je kunt de code van webpagina’s bekijken door links of rechts in de browser op je rechtermuisknop te klikken en te kiezen voor ‘paginabron weergeven’.

Oefening 4

Deze oefening voer je samen met een klasgenoot uit. Ga naar de website www.webdesign-gids.nl/wat_zijn_tags. Klik met je rechtermuisknop aan de linker- of rechterkant in het witte gedeelte van de site. In het menu dat verschijnt kun je kiezen voor paginabron weergeven. Klik die keuze aan. Bekijk de code die in beeld komt. Probeer de drie belangrijkste tags te vinden: ,
en . Zoek zowel de begin- als de eindtag.

1.3 Je eerste webpagina maken Je kent nu de basis van de websiteopbouw. Een site bestaat uit pagina’s die opgebouwd zijn uit twee gedeelten, de head en de body. Aan de hand van de tags in de HTML-code weet de browser wat hij aan de bezoeker moet laten zien. Het wordt tijd dat je je eerste eigen pagina gaat maken. We maken eerst een statische pagina.

Opdracht 2 – maak een webpagina

Ga naar www.artheos.nl/leeromgeving/website-maken.html Op deze pagina vind je een voorbeeld van een statische pagina. Selecteer de code in het blok op deze pagina Plak het in kladblod Sla het bestand op als test.html (allemaal kleine letters in verband met hoofdlettergevoeligheid)


7/17


Als je deze pagina in een website zou bekijken, ziet het er als volgt uit:

Figuur 3

De hamvraag is nu: hoe krijg je die pagina op het internet? Een andere vraag die je misschien hebt is: hoe kan ik ervoor zorgen dat er een ander lettertype, of een andere kleur wordt gebruikt. Dat komt in de volgende paragrafen aan de orde.

1.4 Hoe krijg je een pagina op het internet? Het is mogelijk om online, bijvoorbeeld via Google, een website te maken. Die optie wordt hier niet behandeld: je gaat immers zelf een website bouwen. Dat betekent dat je en andere weg moet bewandelen. Om een pagina op het internet te krijgen, heb je allereerst ruimte nodig op het internet. Dat kun je regelen via een hosting provider. Zo’n provider heeft een server waar jij als het ware een stukje van kunt huren.


8/17


Zodra je een ruimte op het internet hebt, heb je plek om je website te uploaden. Dat gebeurt via je toegangscode en een speciaal programmaatje: een FTPprogramma. FTP staat voor File Transfer Protocol. Je kunt ruimte op het internet krijgen door een domeinnaam vast te leggen en er een hostingpakket bij te kiezen. In deze training lossen we dat natuurlijk anders op: je maakt gebruik van een stukje webruimte van Artheos. Het FTP-programma zorgt ervoor dat je een dubbele bestandenlijst in beeld kunt krijgen: de bestanden die je lokaal hebt staan en de bestanden die op je webruimte staan. Door te schuiven met bestanden kun je bestanden uploaden naar de webruimte (net als in de verkenner of finder van je computer). Dat klinkt eenvoudig, en dat is het ook. Er zijn verschillende programma’s die gratis veilig en gratis zijn.

Opdracht 3 – download een FTP-programma

Ga naar filezilla-project.org/download.php Download en installeer FileZilla (Mac of Windows) Open FileZilla In het linkerscherm zie je je lokale bestanden Vul in de eerste regel de velden Host, Gebruikersnaam en Wachtwoord in en klik op Snelverbinden. Rechts zie je nu de map verschijnen op je webruimte Zoek de pagina test.html en schuif deze van links naar rechts; zo kun je het bestand uploaden (dus: kopiëren) naar het internet Bekijk je pagina online via: www…… nl/test.html

Figuur 4


9/17


Je weet al dat een website uit statische of dynamische pagina’s kan bestaan. Een website met statische pagina’s wordt actueel gehouden door steeds de lokaal bijgewerkte pagina te uploaden en de oude webpagina te overschrijven.

Contentmanagementsysteem: CMS


Met een dynamische site werkt dat anders: dat werkt vrijwel altijd via een contentmanagementsysteem (CMS) waar je online op kunt inloggen. De site wordt dan maar één keer via FTP klaargezet, de rest verloopt via het internet. Dat gebeurt bijvoorbeeld met een website die is gebouwd met de gratis software Wordpress. Dit komt in hoofdstuk 4 aan de orde.

10/17

Syllabus Zelf een website bouwen. Artheos

Recommend Documents

Voorbeeld

Subkopje