Programmeren in MyShop Wat leer je in dit hoofdstuk: - Wat HTML en CSS is - (Een heel klein beetje) HTML - (Een heel klein beetje) CSS - Een aangepaste footer maken ( deurmat ) Eindresultaat Je gaat je eigen Footer toevoegen aan je pagina Voorbereiding - Download 3 social media buttons. 1. Download het bestand social.zip van www.webshopheld.nl/oefenbestanden 2. Upload het zipbestand naar MyShop via Producten/Plaatjes en andere bestanden/ Overige plaatjes en bestanden - Download één HTML bestand en twee CSS bestanden 1. Klik in het linker menu op Pagina s en daarna op Homepagina 2. Klik in het midden op Skin 3. Klik op Eigen lay-out 4. Klik op Download Er worden nu drie bestanden in een zip-bestand naar je e-mail gestuurd 5. Maak op je USB stick een map aan met de naam HTML 6. Open het zipbestand 7. Pak de bestanden uit (Extract to of Unzip) en zet ze in de map HTML Als het goed is staan in de map HTML de volgende bestanden: theme.css skin.html base.css - De 2 hulpdocumenten skin en theme gebruik je later in de cursus. Hierin staat eem stukkje html en css die je gaat kopieren in theme.css en skin.html
Inleiding Met MyShop kun je zonder enige kennis van programmeren en HTML een hele mooie en professionele Webshop maken. Toch is niet alles mogelijk met de standaardkeuzes. Je kunt binnen MyShop nog een flinke stap verder gaan en zelf een gedeelte van je pagina opmaken door te programmeren. Zo kun je een compleet eigen look maken die los staat van een eerder gekozen SKIN. Dit is best lastig en vereist wel enige kennis van HTML en CSS. HTML: CSS: Hyper Tekst Markup Language Cascading Style Sheets HTML en CSS zijn (opmaak)talen die je browser (Explorer, Firefox, Chrome, etc.) kan lezen. HTML kent slechts beperkte opmaakmogelijkheden. Daarom gebruik je het meestal om de structuur van een pagina te maken, niet om de opmaak te verzorgen. CSS is ontworpen om je website op een efficiënte manier een mooie opmaak te geven. Je gaat in deze cursus kennis maken met HTML en CSS. Je licht daarbij slechts een tipje van de sluier op. Ben je geïnspireerd geraakt? Op het internet staan een flink aantal gratis cursussen waar je je kennis verder kunt ontwikkelen. 1 1. Open je Webwinkel door in een browser te klikken op Bekijk winkel 2. Klik op de rechtermuisknop en kies voor Paginabron bekijken (dit is indien je Firefox gebruikt, gebruik je Chrome dan kies je voor Paginabron weergeven
HTML De bovenstaande tekst is code in de taal HTML. Deze platte tekst geeft aan hoe je pagina eruit komt te zien. Een aantal onderdelen zullen we kort bespreken. Later in de cursus gaan we een aantal andere onderdelen bespreken. N.b. De code zal niet exact hetzelfde zijn als bovenstaande code. Het is code die van een andere webwinkel is overgenomen. Er springen een aantal onderdelen (codes) in het oog: <!DOCTYPE html > Geeft aan dat het een document met html geschreven is <head> Hier staat algemene info waar de pagina en zoekmachines (Google, Bing) rekening mee houden, maar niet leesbaar is op de webpagina <meta.> Hier haalt een zoekmachine de informatie over o.a. de auteur <title> De titel van de webpagina <link.> Verwijzingen naar o.a. de skins en CSS <script > Verwijzingen naar hulpscrips die je webshop gebruikt <div > Hiermee maak je een paragraaf van een bepaald gedeelte. Je kunt aan dat gedeelte aan een CSS koppelen. <body > Hier begint de daadwerkelijke pagina inhoud <ul > Lijst niet genummerd <li > Lijst genummerd <h1> Opmaak <img > Een plaatje Dat alles nieuw voor je is en dat je niet alle termen snapt is niet erg! Voor nu is het belangrijk dat je snapt dat bovenstaande platte tekst hetzelfde is als je mooie pagina van je webwinkel. Je gaat tekst toevoegen aan deze platte tekst en een deel van deze platte tekst ga je in de cursus aanpassen. 2 1. Open het bestand skin.html in een HTML-editor. Bijv. Dreamweaver van Adobe of Frontpage Heb je geen HTML-editor op je computer, dan kun je het bestand ook openen met Kladblok. Dit maakt het programmeren echter wel lastiger, want je mist nu de hulp van een programma zoals Dreamweaver. Voorbeeld van hulp: als je een typefout maakt zal Dreamweaver je daar in veel gevallen op wijzen.
Als je het bestand hebt geopend, zie je dezelfde platte tekst die we eerder al zagen toen we naar de paginabron keken. Dreamweaver zorgt er wel voor dat de code netjes staat. Tevens kijkt het programma of er nog andere bestanden zijn die gekoppeld zijn aan het bestand skin.html. In dit geval zie je inderdaad een aantal gekoppelde bestanden zoals base.css en theme.css. 2. Zoek in de code de tekst: <!--! end of.container --> Tip: dit kan net als in Word met Bewerken/ Zoeken en vervangen
3. Open via webshopheld.nl het hulpbestand skin. Deze bevat onderstaande code. Kopieer deze code en plak deze vervolgens na de tekst <!--! end of.container --> (s.v.p. niet kopiëren en plakken vanuit dit dit pdf-bestand, dan gaat het fout!) <div id="outer-footer"> <div id="inner-footer"> <div id="inner-footer-links"> <ul> <a href="http://4127400.mijnwinkel.nl/voorwaarden/"><li><h1>algemene voorwaarden</h1></li></a> <a href="#"><li><h1>service</h1></li></a> <a href="#"><li><h1>levering</h1></li></a> <a href="#"><li><h1>contact</h1></li></a> </ul> <div id="inner-footer-social"> <img src="http://myshop.s3-external-3.amazonaws.com/shop4127400.images.facebook.png" alt="facebook"/> <img src="http://myshop.s3-external-3.amazonaws.com/shop4127400.images.twitter.png" alt="twitter"/> <img src="http://myshop.s3-external-3.amazonaws.com/shop4127400.images.youtube.png" alt="youtube"/> 4. Sla het bestandonder de nieuwe naam skin2.html op en upload het in het systeem. CSS Om aan je webpagina's een opmaak te geven, maak je gebruik van CSS. Hiermee kun je zelf bepalen hoe elk onderdeel van je website zal worden weergegeven. Je maakt als het ware alle onderdelen van de website op d.m.v. je CSS bestand. Je gaat nu eerst een paar handelingen verrichten. Je zult in eerste instantie niet snappen wat je aan het doen bent. Geen paniek! Na de handelingen volgt de uitleg. Daarna volgen een aantal oefeningen on het geleerde in de praktijk te brengen. 5. Open het bestand theme.css in Dreamweaver of een ander andere HTML-editor.
6. Open via webshopheld.nl het hulpbestand theme. Deze bevat onderstaande code. Kopieer de code in het bestand en plak vervolgens helemaal onderaan het bestand theme.css #outer-footer { width: auto; background-color:#e99b09; height:150px; #inner-footer { margin: auto auto; width: 960px; #inner-footer-social { width:180px; float:right; margin-top:20px; #inner-footer-links { float:left; margin-top:20px; color:#fff; #inner-footer-links h1 { color:#fff; 7. Sla het bestand onder de nieuwe naam theme2.css op en upload het in het systeem. 8. Bekijk vervolgens het resultaat.
Wat heb je nu eigenlijk gedaan? Je hebt een stuk code gekopieerd in skin.html Je hebt hiermee elementen benoemd die op je pagina voorkomen. In dit geval heb je onderdelen van de voettekst benoemd. Later heb een stuk code gekopieerd in theme.css Je hebt hiermee aangegeven hoe je de elementen in skin.html wil gaan opmaken. Dit klinkt omslachtig, maar je kunt deze CSS-opmaak op meerdere elementen laten toepassen. HTML Je hebt eerst in de skin.html zaken toegevoegd. We gaan nu een tipje van de sluier oplichten hoe deze HTML-code werkt. <div id="outer-footer"> <div id="inner-footer"> <div id="inner-footer-links"> <ul> <a href="http://4127400.mijnwinkel.nl/voorwaarden/"><li><h1>algemene voorwaarden</h1></li></a> <a href="#"><li><h1>service</h1></li></a> <a href="#"><li><h1>levering</h1></li></a> <a href="#"><li><h1>contact</h1></li></a> </ul> <div id="inner-footer-social"> <img src="http://myshop.s3-external- 3.amazonaws.com/shop4127400.images.facebook.png" alt="facebook"/> <img src="http://myshop.s3-external-3.amazonaws.com/shop4127400.images.twitter.png" alt="twitter"/> <img src="http://myshop.s3-external-3.amazonaws.com/shop4127400.images.youtube.png" alt="youtube"/> Je ziet dat er vier verschillende div s (=divisies) zijn gemaakt. Door een div te maken en weer te sluiten wordt een gedeelte van de webpagina ingesloten. Je maakt er een soort alinea van. Je opent een div door het woord tussen haakjes te zetten: <div> Je sluit een div door na het openingshaakje een slash te plaatsen:. We noemen de code tussen haakjes ook wel een tag. <div id="outer-footer"> hier wordt de div geopend met als naam (id): outer-footer de div wordt hier gesloten
Als je goed kijkt zitten er in bovenstaande code vier verschillende div s met de volgende namen: 1. outer-footer (geel) 2. inner-footer (rood) 3. inner-footer-links (groen) 4. inner-footer-social (blauw) In de div inner-footer-links zie je nieuwe tags staan: <ul>, <a>, <li> en <h1>: <ul> <a href="http://4127400.mijnwinkel.nl/voorwaarden/"><li><h1>algemene voorwaarden</h1></li></a> <a href="#"><li><h1>service</h1></li></a> <a href="#"><li><h1>levering</h1></li></a> <a href="#"><li><h1>contact</h1></li></a> </ul> Je ziet dat elke tag wordt geopend en daarna weer gesloten. Maar wat betekenen die tags nu eigenlijk? 1. ul = unordered list (een ongeordende lijst). Een opsomming, waarbij de delen niet genummerd zijn. 2. li= list item (één van de onderdelen uit de lijst) 3. a= anker. Wanneer de a-tag gebruikt wordt met het HREF attribuut, vormt het een hyperlink naar een andere bestemming. Kijk maar eens in de code: <a href="http://4127400.mijnwinkel.nl/voorwaarden/"> (de a-tag linkt dus naar de Voorwaarden-pagina) 4. h1= heading 1 (Kop 1). Net zoals je in Word een Kop1 hebt heb je dat ook in HTML. Dit is dus een belangrijk element op de pagina. In de div inner-footer-social zie je ook weer een nieuwe tag: <img> <div id="inner-footer-social"> <img src="http://myshop.s3-external- 3.amazonaws.com/shop4127400.images.facebook.png" alt="facebook"/> <img src="http://myshop.s3-external-3.amazonaws.com/shop4127400.images.twitter.png" alt="twitter"/> <img src="http://myshop.s3-external-3.amazonaws.com/shop4127400.images.youtube.png" alt="youtube"/> Met de img-tag plaats je een afbeelding op de webpagina. Aan de img-tag moeten minimaal de attributen SRC en ALT worden toegevoegd. Daarnaast is het verstandig ook altijd de attributen WIDTH en HEIGHT te gebruiken. De div inner-footer-links met daarin een ongeordende lijst <ul> met vier elementen <li>. De div inner-footer-social met daarin drie afbeeldingen <img>
CSS Je maakt nu met behulp van een CSS-bestand de verschillende elementen van de HTML-pagina op. In het CSS-bestand verwijs je dus naar de elementen in het HTML bestand. De onderstaande CSS code heb je toegevoegd aan het bestand theme.css #outer-footer { width: auto; background-color:#e99b09; height:150px; #inner-footer { margin: auto auto; width: 960px; #inner-footer-social { width:180px; float:right; margin-top:20px; #inner-footer-links { float:left; margin-top:20px; color:#fff; #inner-footer-links h1 { color:#fff; In deze code kun je dezelfde div s herkennen die je gemaakt hebt in het HTML bestand skin.html 1. outer-footer (geel) 2. inner-footer (rood) 3. inner-footer-links (groen) 4. inner-footer-social (blauw) Wat is belangrijk om te weten - Deze div s kun je verschillende eigenschappen geven. - De div outer-footer wordt eerst aangehaald door het #-teken - Vervolgens zetten we de eigenschappen van de div tussen accolades: { en. - Elke eigenschap moet worden afgesloten met een puntkomma (;)
Aanpassen outer-footer #outer-footer { width: auto; De breedte van de div past zich aan aan het beeldscherm. background-color:#e99b09; De achtergrondkleur van de div is oranje. height:150px; De hoogte van de div is 150 pixels. 2 1. Open indien nodig het bestand theme2.css 2. Verander in de code van de outer footer : - de achtergrondkleur in #BDAD7B - de hoogte in 250 pixels 3. Sla het bestand onder de nieuwe naam theme3.css op en upload het. 4. Bekijk het resultaat Voor: Na:
Bekijken inner-footer #inner-footer { margin: auto auto; width: 960px; De div inner-footer heeft een breedte van 960 pixels (omdat onze pagina ook 960 pixels breed is) en daarnaast zorgen we er voor dat de marges links en rechts automatisch evenveel zijn. Zodoende wordt de div dus in het midden van de pagina geplaatst. De div outer-footer met volledige breedte. Figuur 1, vier div's De div inner-footer met breedte 960 pixels.
Aanpassen inner-footer-social #inner-footer-social { width:180px; De breedte van de div is 180 pixels. float:right; De div staat rechts uitgelijnd. margin-top:20px; De div staat 20 pixels naar beneden vanaf de top van de div. De div inner-footer-social bevat drie afbeeldingen van social media. Deze staan rechts uitgelijnd in de inner-footer. Daarom staan ze niet helemaal rechts op je pagina. 1. Open het bestand theme3.css 2. Verander de code van de inner-footer-social : - de topmarge naar 50 pixels - geef de rechterkant van de div een marge van 50 pixels 3. Sla het bestand op als theme4.css en upload het bestand. Bekijk het resultaat Voor: Na: De social media buttons hebben nog geen links. Let op: de code wijzig je in het HTML-bestand. Dus niet in het CSS-bestand, deze is alleen om op te maken! 4. Open het bestand skin2.html 5. Zorg dat er een aantal links gaan werken: - Laat het woord Contact in de lijst linken naar de contactpagina op jouw website. - Laat de afbeelding facebook.png linken naar jouw eigen Facebook-pagina - Laat een nieuwe browser openen als je op de link klikt Tip: zoek op hoe je het attribuut target= _blank kunt toevoegen aan een a-tag
6. Open het bestand theme4.css 7. Verander het opmaak van de h1 : - Lettertype: Arial - Lettergrootte: 30 pixels - Font-weight: 100 Tip: zoek op font-family, font-size en font-weight 8. Sla beide bestanden op onder een nieuwe naam: theme5 en skin3 9. Upload beide bestanden en bekijk het resultaat. 10. Controleer of alle links op de juiste manier werken Er zijn veel manieren om de verschillende elementen van de HTML code te kunnen stijlen. De belangrijkste zijn: 1. Lettertype 2. Letterstijl 3. Lettergrootte 4. Kleur 5. Uitlijning 6. Afmetingen 7. Achtergrond 8. Randen 9. Witruimte 10. Regelhoogte 11. Elementen laten zweven 12. Opsommingsstijlen Gratis online HTML- en CSS-cursussen Er zijn nog veel meer elementen. Typ het woord CSS maar eens in Google. Je krijgt allerlei cursussen en tips die je kunnen helpen bij het stijlen van jouw eigen pagina. Hetzelfde geldt als je als zoekopdracht HTML intypt.