Mijn eerste Website bouwen De basis
Uw Lesgever : Guido Willekens Mijn eerste website bouwen Animator bij… Toelichting bij “wat is SNV?” Wat is een animator? Wijzen op onze leuze: senioren leren van en aan senioren. Je kan dat makkelijk uitbreiden tot “volwassen mensen leren van en aan elkaar”. Hier is geen sprake van “de meester of docent” aan de ene kant en “leerlingen” aan de andere. We kunnen onze kennis en kunde met elkaar delen. We proberen ook om aan te sluiten bij de ervaringen van mensen. En wat we tonen en zeggen krijgt u ook mee: zo kan u thuis rustig alles nog eens doornemen, en vooral ook verder toepassen. Voorjaar 2009 Mijn eerste website bouwen
Inhoud van deze cursus Module 1: Browsers en Webservers Hoe gebeurt surfen eigenlijk en wat speelt er zich af achter de schermen? Module 2: HTML en KompoZer De codetaal van de webpagina en een tool om er mee te leren werken en te verstaan. Module 3: Hosting en FTP Waar staat mijn website en hoe breng ik er mijn pagina’s naartoe? Module 4 WebSiteX1 Een website maken met een tool op de PC, gebaseerd op sjablonen (templates). Module 5: Google Sites Een alles in één oplossing. Voorjaar 2009 Mijn eerste website bouwen…
Module 2 HTML en KompoZer
Wat leren we? Wat is HTML? De broncode leren bekijken… Een pagina met KompoZer De broncode bekijken en aanpassen Voorjaar 2009 Mijn eerste website bouwen…
Wat is HTML? HTML (HyperText Markup Language) Het is een (programmeer) taal = Language Voor opmaak (fonts, kleur) en structuur = Markup Ondersteunt Hyperlinks: de ene pagina verwijst naar de andere… = Hypertext Verder uitgebreid met beeld, geluid, video (multi- media) Wordt door de Browser (bv. Internet Explorer) geïnterpreteerd en op het scherm gezet Voorjaar 2009 Mijn eerste website bouwen…
HTML4, is de basis Een HTML-pagina bestaat uit: Gewone tekst Tags: Dit zijn instructies voor de Browser om iets anders te doen dan gewoon de tekst op het scherm te zetten Notatie: <TAG> …….. </TAG> Er zijn tags voor: Opmaak Structuur/opbouw Hyperlinks Multimedia: beelden, geluiden… En veel meer… Attributen (toevoegsels, eigenschappen) <TAG ATTRIBUTE = WAARDE> …….</TAG> Voorjaar 2009 Mijn eerste website bouwen…
Opbouw van elke HTML pagina Hoofding Inhoud Document <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Voorjaar 2009 Mijn eerste website bouwen…
http://users.telenet.be/guido.willekens/ Activiteiten SNVL Bron bekijken http://users.telenet.be/guido.willekens/ Activiteiten SNVL Voorjaar 2009 Mijn eerste Website bouwen
De basis TAGS voor Oefening1 1. Opmaak: <H1…6> een kopregel </H1…6> <FONT SIZE = x> lettergrootte </FONT> <B> vetjes </B> <I> cursief </I> <STRIKE> doorstreept </ STRIKE > 2. Structuur en indeling: <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> 3. Inhoud: Tekst, waar men wil <IMG SRC =“path en bestand” WIDTH=“breedte” HEIGHT=“hoogte” ALT=“alternatieve tekst”> voor een beeld Voorjaar 2009 Mijn eerste website bouwen…
HTML en KompoZer We zullen bij wijze van oefening een webpagina maken door rechtstreeks in HTML te schrijven. We doen de oefening opnieuw met KompoZer: met eenvoudige keuzes en selecties bouwen we de pagina op. We kunnen de HTML die KompoZer voor ons genereert achteraf bekijken en eventueel ook aanpassen. Conclusie: KompoZer maakt iets moeilijks (HTML) voor ons gemakkelijk (slepen en neerzetten) Voorjaar 2009 Mijn eerste website bouwen…
Voorbereiding van de oefening Maak een map “mijnwebsite” en daarin een submap “images” Tijdelijk kan je terecht op http://www.snvl.be/resources/website/ 1. De KompoZer staat in een ZIP-bestand: unzip de map rechtstreeks op de C: en start C:\KompoZer 0.7.10\kompozer.exe ./kompozer.zip 2. Plaats in de map images, de marmer.gif en logo.jpg naartoe surfen en afbeelding opslaan als… ./mijnwebsite/images Voorjaar 2009 Mijn eerste website bouwen…
Oefening1 Typ eerst de tekst Achtergrond kleuren en tekst kleuren Eerste lijn centreren en vergroten Maak de lijst met 3 items Opslaan als oefening1.htm Voorjaar 2009 Mijn eerste website bouwen…
Stap 1: tekst typen Voorjaar 2009 Mijn eerste website bouwen…
Stap 2: achtergrondkleur Voorjaar 2009 Een eerste Website bouwen
Stap 3: lettertype,vergroten, en lijst Voorjaar 2009 Mijn eerste Website bouwen
Resultaat (Stap1-2-3) Lettergrootte Lettertype Lijst Voorjaar 2009 Mijn eerste website bouwen…
Broncode (Stap1-2-3) Voorjaar 2009 Mijn eerste website bouwen…
Oefening 2 Achtergrond prentje Andere tekst kleur, die past bij de nieuwe achtergrond Een logo, gecentreerd na de eerste lijn Opslaan als oefening2.htm Voorjaar 2009 Mijn eerste website bouwen…
Stappen 1-2-3 2. Tekst kleur 1. Achtergrond 3. Prentje Voorjaar 2009 Mijn eerste Website bouwen…
Prentje op achtergrond Resultaat (2) Logo Prentje op achtergrond Andere tekst kleur Voorjaar 2009 Mijn eerste website bouwen…
Broncode (2) Voorjaar 2009 Mijn eerste website bouwen…
Font en kleur voor hele body Oefening3: opgekuist Font en kleur voor hele body Een DIV om te centreren Standaard is Links uitlijnen Voorjaar 2009 Mijn eerste website bouwen…
In Browser FireFox Voorjaar 2009 Mijn eerste website bouwen…
Conclusie: volgorde is belangrijk ! Stel eerst de algemene eigenschappen van de pagina in Achtergrondprentje Kleur van de tekst Dan alle tekst typen Dan de teksten Eventueel vergroten Centreren Lijsten maken Prentjes toevoegen Voorjaar 2009 Mijn eerste website bouwen…
Oefening 4 : Een tabel als structuur element 1. We plaatsen een titel, en maken er een Kop 1 van 2. We plaatsen er een lijn onder (Invoegen Horizontale lijn) 3. We voegen een tabel toe met 3 rijen van 2 kolommen In elk van de rijen schrijven we in de eerste kolom een korte tekst. We halen een paar beelden, bv. van de tuin op mijn website (klikken met rechtermuis knop en opslaan als… in images. 4. In de rechterkolom van de tabel : Invoegen Afbeelding. Eerst bepalen we de locatie van de beelden (map images) 5. Dan vragen we een kleinere versie: 200 pixels breed 6. Tot slot passen we de grootte van de kolommen aan Voorjaar 2009 Mijn eerste website bouwen…
Opdrachten 1 4 2 5 3 Voorjaar 2009 6 Mijn eerste website bouwen…
Linken maken Om van de ene pagina naar een andere te navigeren gebruik je linken. Je selecteert een stuk tekst of een ander object en kies Geef de URL in Bepaal het doel: Nieuwe pagina Zelfde pagina De link krijgt een speciale kleur en wordt zichtbaar met een handje Voorjaar 2009 Mijn eerste website bouwen…
Resultaat Voorjaar 2009 Mijn eerste website bouwen…
Het belang van <DIV> Moderne websites maken de structuur niet meer op basis van tabellen, maar wel op basis van de <div> tags. Ze werken met stylesheets die de verschillende <div> een eigen naam, positie, opmaak en structuur geven. Voorjaar 2009 Mijn eerste website bouwen…
Kijken is leren… Firefox heeft een handige plug-in om een pagina te bekijken: de HTML-code , de CSS, de java-script, van om het even welke pagina op het internet. Kan je hier halen en installeren: https://addons.mozilla.org/nl/firefox/addon/1843 Gebruik gratis templates: vb. http://www.getfreewebdesigns.com/profile/wfiedler/ Voorjaar 2009 Mijn eerste website bouwen…
Herbruiken van anderen In FireFox: Klik op het menu Extra en kies voor pagina-info. Selecteer Media en maak uw keuze en sla op… Voorjaar 2009 Mijn eerste website bouwen…