Html en CSS Programmeren in MyShop - Webshopheld · - Download 3 social media buttons. 1. ... Je...

Html en CSS

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”

http://www.webshopheld.nl/oefenbestanden

Html en CSS

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: Hyper Tekst Markup Language

CSS: 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. 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”

1

Html en CSS

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.

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.

2

Html en CSS

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: “  “

Tip: dit kan net als in Word met “Bewerken/ Zoeken en vervangen”

Html en CSS

3. Open via webshopheld.nl het hulpbestand “skin”. Deze bevat onderstaande code.

Kopieer deze code en plak deze vervolgens na de tekst “  “

(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> <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"/> </div> </div> </div>

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.

Html en CSS

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.

Html en CSS

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> <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"/>

</div> </div> </div>

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: </div>.

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 </div> de div wordt hier gesloten

Html en CSS

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"/> </div> 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>

Html en CSS

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 (;)

Html en CSS

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. }

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:

2

Html en CSS

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.

Figuur 1, vier div's

De div “inner-footer”

met breedte 960 pixels.

De div “outer-footer”

met volledige breedte.

Html en CSS

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

Html en CSS

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.

Html en CSS Programmeren in MyShop - Webshopheld · - Download 3 social media buttons. 1. ... Je...

Documents

Transcript of Html en CSS Programmeren in MyShop - Webshopheld · - Download 3 social media buttons. 1. ... Je...