pptx 863 kbyte - Seniornet Vlaanderen
advertisement
Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Mijn eerste Website bouwen De basis Voorjaar 2009 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Uw Lesgever : Guido Willekens Animator bij… Mijn eerste website bouwen 2 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW 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… 3 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Module 2 HTML en KompoZer Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Wat leren we? Voorjaar 2009 Wat is HTML? De broncode leren bekijken… Een pagina met KompoZer De broncode bekijken en aanpassen Mijn eerste website bouwen… 5 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW 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 (multimedia) Wordt door de Browser (bv. Internet Explorer) geïnterpreteerd en op het scherm gezet Voorjaar 2009 Mijn eerste website bouwen… 6 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW HTML4, is de basis Een HTML-pagina bestaat uit: Voorjaar 2009 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> Mijn eerste website bouwen… 7 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Opbouw van elke HTML pagina <HTML> <HEAD> <TITLE> </TITLE> Hoofding </HEAD> Document <BODY> </BODY> Inhoud </HTML> Voorjaar 2009 Mijn eerste website bouwen… 8 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Bron bekijken http://users.telenet.be/guido.willekens/ Voorjaar 2009 Mijn eerste Website bouwen Activiteiten SNVL 9 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW 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: Voorjaar 2009 Tekst, waar men wil <IMG SRC =“path en bestand” WIDTH=“breedte” HEIGHT=“hoogte” ALT=“alternatieve tekst”> voor een beeld Mijn eerste website bouwen… 10 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW 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… 11 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Voorbereiding van de oefening Maak een map “mijnwebsite” en daarin een submap “images” Tijdelijk kan je terecht op http://www.snvl.be/resources/website/ Voorjaar 2009 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 Mijn eerste website bouwen… 12 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW 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… 13 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Stap 1: tekst typen Voorjaar 2009 Mijn eerste website bouwen… 14 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Stap 2: achtergrondkleur Voorjaar 2009 Een eerste Website bouwen 15 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Stap 3: lettertype,vergroten, en lijst Voorjaar 2009 Mijn eerste Website bouwen 16 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Resultaat (Stap1-2-3) Voorjaar 2009 Lettergrootte Lettertype Lijst Mijn eerste website bouwen… 17 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Broncode (Stap1-2-3) Voorjaar 2009 Mijn eerste website bouwen… 18 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW 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… 19 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Stappen 1-2-3 1. Achtergrond Voorjaar 2009 2. Tekst kleur 3. Prentje Mijn eerste Website bouwen… 20 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Resultaat (2) Voorjaar 2009 Logo Prentje op achtergrond Andere tekst kleur Mijn eerste website bouwen… 21 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Broncode (2) Voorjaar 2009 Mijn eerste website bouwen… 22 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Oefening3: opgekuist Voorjaar 2009 Font en kleur voor hele body Een DIV om te centreren Standaard is Links uitlijnen Mijn eerste website bouwen… 23 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW In Browser FireFox Voorjaar 2009 Mijn eerste website bouwen… 24 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW 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… 25 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW 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… 26 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Opdrachten 1 4 2 Voorjaar 2009 5 3 6 Mijn eerste website bouwen… 27 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW 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… 28 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Resultaat Voorjaar 2009 Mijn eerste website bouwen… 29 Het belang van <DIV> Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW 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… 30 Kijken is leren… Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW 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 Voorjaar 2009 Gebruik gratis templates: vb. http://www.getfreewebdesigns .com/profile/wfiedler/ Mijn eerste website bouwen… 31 Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW 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… 32
