De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

Crashcursus HTML en CSS 2013. Websites en je browser  Als je in je browser een website opvraagt in je adresbalk, krijg je één webpagina te zien.  Die.

Verwante presentaties


Presentatie over: "Crashcursus HTML en CSS 2013. Websites en je browser  Als je in je browser een website opvraagt in je adresbalk, krijg je één webpagina te zien.  Die."— Transcript van de presentatie:

1 Crashcursus HTML en CSS 2013

2 Websites en je browser  Als je in je browser een website opvraagt in je adresbalk, krijg je één webpagina te zien.  Die webpagina kan op allerlei manieren gemaakt zijn, bijv:  Met een speciaal programma  Met alleen kladblok  Met een CMS als WordPress  Met een CMS van tienduizenden euro’s of meer  Uiteindelijk zie je één webpagina in je browser 2

3 Een webpagina  Ongeacht hoe de pagina gemaakt is, of hoe die heet, het resultaat dat je browser geleverd krijgt, is altijd een HTML-pagina  Een HTML-pagina is altijd een puur tekstbestand, met de extensie.htm of.html,  Het is een voor mensen leesbaar bestand!  In elke browser kun je altijd dat tekstbestand zichtbaar maken door de broncode op te vragen (rechtsklikken op de pagina)  Voorbeeld: webcursus.pc-coach.nlwebcursus.pc-coach.nl 3

4 HTML-pagina  Een HTML pagina is geschreven in HTML  HyperText Markup Language  Het gaat om een taal die hypertext mogelijk maakt, d.w.z. dat er via links naar andere pagina’s (op het WWW) gesprongen kan worden  Het gaat om een taal die markup gebruikt om de structuur van de pagina weer te geven: de elementen van de pagina staan tussen ‘labels’, tags in HTML genaamd. 4

5 De onderdelen en de structuur van de echte flaptekst van dit boek: Koptekst Paragraaf (alinea) met twee zachte returns Paragraaf (alinea) (Ongeordende) lijst met 4 lijstitems Paragraaf (alinea) Afbeelding Onderschrift Header Sidebar (zijkolom) Content (Hoofdinhoud) Footer 5

6 De onderdelen van de pagina Pagina Header Kop tekst Sidebar Plaatje AfbeeldingOnderschrift tekst Content Alinea tekst Zachte return tekst Zachte return tekst Alinea tekst Lijst Lijstitem tekst Lijstitem tekst Lijstitem tekst Lijstitem tekst Alinea tekst Footer Afbeelding 6

7 De essentie van HTML (1)  Pagina-elementen staan tussen tags  Bijv. Dit is een kop  De tags zijn instructies voor de browser  Je hebt begin- en eindtags ( en niet)  De tag is bedoeld om elementen samen te ‘bundelen’  Tags kunnen een ‘id’ of een ‘class’ hebben, d.w.z. een naam die aan een CSS stijl gekoppeld is. 7

8 De HTML-onderdelen van de pagina


9 CSS, de essentie (1)  CSS is de afkorting van Cascading Style Sheets  CSS is de taal waarmee HTML-elementen kunnen worden vormgegeven  Dat gaat door vormgevingsregels (rules) te maken.  Elke rule bestaat uit een  Selector, gevolgd door { }  En binnen die 2 accoladehaken : één of meer declaraties, elk eindigend op een ; (puntkomma)  Elke declaratie bestaat uit een property : value paar 9

10 p { color : red; margin-left : 20px; } p { color : red; margin-left : 20px; } Een simpele CSS regel SELECTOR (een paragraaf in dit geval) Twee DECLARATIES PROPERTIES (Eigenschappen) VALUES (Waarden) 10

11 De pagina in HTML gemaakt en met CSS (lelijk) opgemaakt: 11

12 De werkwijze in een webeditor bekijken  Webuilder 2014  Een ‘echte’ code-editor (voor meerdere web-talen)  De demonstratie van de opbouw van de webpagina bekijken  Demonstratie WebuilderWebuilder  (de demonstratie is (niet-dynamisch) te zien in de volgende dia’s) 12

13 Hier zie je het minimale basis stramien van elke HTML(5) pagina Het voorbeeldscherm is uiteraard nog leeg 13

14 Het eerste element wordt toegevoegd: Een met de id “header” Het voorbeeldscherm is nog steeds leeg: er is nog geen inhoud! 14

15 De overige elementen worden toegevoegd: Nog drie div’s met hun eigen id. Het voorbeeldscherm is nog steeds leeg: er is nog geen inhoud! 15

16 Een H1 kop in de div “header”De browser toont de kop 16

17 Losse tekst in de div “content” Er is nog geen structuur: alle regeleinden en eventuele onnodige spaties worden niet weergegeven 17

18 De tekst gestructureerd in 2x In de eerste p zijn 2x Een bolletjeslijst is toegevoegd De browser geeft ruimte tussen ’s aan, en nieuwe regels na een. En de lijst wordt goed weergegeven 18

19 De derde alinea is toegevoegdDe derde alinea wordt weergegeven 19

20 De div “sidebar” is gevuld met en die weer met (afbeelding) en (onderschrift) Hier is niets veranderd: de afbeelding is er nog niet en het bijschrift ook nog niet 20

21 Het element heeft inhoud gekregen, de source van de afbeelding is ingevuld De afbeelding wordt getoond. 21

22 De is gevuldHet onderschrift wordt weergegeven 22

23 De “footer’’ heeft 3 afbeeldingen ( gekregen De footer is gevuld 23

24 De standaard opmaak (1)  De structuur en inhoud is nu klaar, we hebben een HTML-pagina. Die ziet er netjes uit en heeft standaard al een beetje opmaak, zoals:  De kop is groot en vet  Er is witruimte tussen alinea’s  De bolletjes zijn rondjes  E.d.  Dat beetje opmaak wordt geregeld door je browser. 24

25 De standaard opmaak (2)  Browsers verschillen onderling vaak een klein beetje in hun standaard opmaak.  Het is een goede gewoonte om de stijlregels van de browser eerst te ‘resetten’ en dan je eigen stijlen toe te gaan passen.  Het gaat te ver dat bij deze site ook te doen, maar de pagina zou er dan als volgt uitzien: 25

26 Een ‘stijlloze’ pagina 26

27 In de sectie is een linkregel aangemaakt naar een (nog leeg) stylesheet-bestand. Dat heeft nog geen consequenties, want… 27

28 Het CSS-bestand is nog geheel leegDus nog geen opmaak! 28

29 Er is een CSS-regel gemaakt voor de -tag om het tahoma lettertype te gebruiken Het lettertype is veranderd (vergelijk vorige dia) 29

30 De div die header heet, heeft een breedte en een achtergrondkleur gekregen De H1 heeft dezelfde achtergrondkleur als de div “header” 30

31 De div die footer heet, heeft een breedte en een rode achtergrondkleur gekregen en wat extra ruimte (padding) rondom De footer is even breed als de header: 2x 10px voor de padding en een breedte van 630px = 650px 31

32 De div die content heet, heeft een breedte en een achtergrondkleur gekregen en een linker marge De content breedte (400px) + de marge (200px) is precies 650px 32

33 Alle divs hebben een gestippelde zwarte rand gekregen, met 5px grote stippen om de divs tijdelijk goed zichtbaar te maken Hier zijn de divs 33

34 De div “sidebar” heeft een breedte van 170px gekregen, een paarse achtergrond en de ‘float’ eigenschap, die hem links van de content neerzet. Floating is complex, wordt heel veel gebruikt in CSS om elementen die normaal onder elkaar staan, naast elkaar te zetten 34

35 De h1 in de header is aangepast en de stippellijnen voor alle div’s zijn weg- ‘gecommentarieerd’. 35

36 Er is een link (koppeling) aangebracht om naar de site van Peter Doolaard te kunnen gaan 36

37 De gelinkte pagina 37

38 De essentie van HTML (2)  Een HTML pagina bestaat uit een specifieke indeling: 1. Een DOCTYPE (de HTML-versie) 2. Een HTML sectie met daarin a. het gedeelte met daarin administratieve gegevens, met in ieder geval de titel b. het gedeelte waarin de zichtbare inhoud van de pagina staat.  Een pagina kan gekoppeld zijn aan een of meer CSS-bestanden (via de tag) 38

39 HTML (3) Enkele belangrijke tags:  t/m Headings (= koppen)  Paragrafen (= alinea)  Break (= zachte return)  Unordered list (= meestal bolletjes)  Ordered list (= meestal nummers e.d)  List Item (lijst item in een of )  Anchor (Anker = link)  Division (= divisie)  Image (= verwijzing naar afbeelding) 39

40 CSS, de essentie (Herhaling)  CSS is de afkorting van Cascading Style Sheets  CSS is de taal waarmee HTML-elementen kunnen worden vormgegeven  Dat gaat door regels (rules) te schrijven die gekoppeld worden aan relevante HTML-elementen  Elke rule bestaat uit een  Selector  Een of meer declaraties tussen { } (accoladehaken)  Een declaratie bestaat uit een property:value paar 40

41 p { color : red; margin-left : 20px; } p { color : red; margin-left : 20px; } Een simpele CSS regel (Herhaling) SELECTOR (een paragraaf in dit geval) Twee DECLARATIES PROPERTIES VALUES 41

42 Veel voorkomende CSS properties  Letters: font-family, font-size, font-style, font-weight  Kleuren: color, backgroud-color  Alinea’s: line-height, text-align,  Algemeen: height, width, margin (top,left, right, bottom), padding (top,left, right, bottom), border, background-image  Layout: float (left, right) 42

43 Veel voorkomende values  Grootte (dikte, breedte, hoogte): px, %, em  Positie: left, right, center, top, bottom  Letterstijl: italic, normal  Lettergewicht: bold, normal  Lettertype: arial, tahoma, verdana, helvetica etc.  Kleuren: kleurnaam, RGB, hexadecmaal (#F345D2) 43

44 De selector  De selector in een CSS-regel kan een van de volgende vier mogelijkheden zijn: 1. Een HTML-element 2. Een Class 3. Een Identifier 4. Een combinatie van het bovenstaande 44

45 CSS-regels met een HTML-element als selector (1) p { color: red; margin-top: 20px; } h2 { font-size: 24px; font-style: italic; } Regel 1 geldt voor alle alinea’s. Regel 2 geldt voor alle koppen 2. Regel 1 geldt voor alle alinea’s. Regel 2 geldt voor alle koppen 2. 45

46 CSS-regels met een (zelfgemaakte) ‘class’ als selector (2).kader { border: 2px solid navy; padding: 4px; } h2.speciaal { font-size: 32px; color: silver; } Regel 1 geldt voor alle elementen waar.kader aan toegewezen is. Regel 2 geldt alleen voor koppen 2 waar.speciaal aan toegewezen is. Je kunt.speciaal niet aan andere elementen toewijzen! Regel 1 geldt voor alle elementen waar.kader aan toegewezen is. Regel 2 geldt alleen voor koppen 2 waar.speciaal aan toegewezen is. Je kunt.speciaal niet aan andere elementen toewijzen! H2 blijft italic op grond van de regel voor de h2 op de vorige dia! Classes beginnen met een punt! 46

47 CSS-regels met een (zelfgemaakte) ‘identifier’ als selector (3) #subnavigatie { color: white; background-color: black; } div#footer{ font-size: 10px; font-family: verdana; } De eerste regel geldt voor elk HTML-element waar #subnavigatie aan toegewezen is. De tweede regel alleen voor een div waar #footer aan toegewezen is. De eerste regel geldt voor elk HTML-element waar #subnavigatie aan toegewezen is. De tweede regel alleen voor een div waar #footer aan toegewezen is. 1.Identifiers beginnen met een hekje! 2.Een specifieke identifier mag maar 1x per pagina voorkomen! 3.Identifiers worden meestal gebruikt voor ’s Verder zijn ze hetzelfde als classes: Het zijn stijlnamen voor een html- tag 47

48 Een CSS-regel met een complexe gecombineerde selector (4) div#footer h2.speciaal{ color:red; } De regel geldt alleen voor een H2 die de class.speciaal heeft, mits deze zich bevindt in een div die de identifier #footer heeft. Lees dit soort regels van rechts naar links! Het kan (voor specialisten) overigens nog veel ingewikkelder worden… 48

49 Hoe wijs je een class/id toe? Twee mogelijkheden: 1. Je hebt een rule met als selector een HTML- element geschreven: Dat werkt dan automatisch voor dat HTML-element 2. Je hebt een rule voor een class of een identifier geschreven. Hoe koppel je die dan aan een specifiek HTML-element op je pagina? Zie de volgende dia’s 49

50 Een class koppelen aan een HTML element Kop met een kader Zilveren kop 2, 32px groot Standaard H3 kop De regel geldt niet voor een H3 die de class.speciaal heeft, want de class hebben we in dia 46 aan H2 verbonden! Wijs de class toe binnen de haken van de begintag. (en gebruik geen punt bij de naam!) 50

51 Een identifier koppelen aan een HTML element Witte letters, zwarte achtergrond Een div waarin de witte letters op een zwarte achtergrond krijgt, want die regel hebben we voor de omsluitende div in dia 47 eerder gemaakt. Wijs de identifier toe binnen de haken van de begintag. (en gebruik geen hekje bij de naam!) 51

52 Maar er is meer…  CSS-regels kun je schrijven op drie plekken: 1. In een apart bestand, zoals bv ‘style.css’ 2. In een blok in de HEAD van de pagina. 3. In de HTML tag zelf. 52

53 CSS regels in een apart bestand  Het bestand moet dan - in de pagina’s van de website - in de HEAD-sectie gelinkt zijn:   Dit is de meest gebruikelijke methode.  Er kan in de HEAD-sectie meer dan één stylesheet gekoppeld zijn! 53

54 CSS regels in een style blok  Je kunt een style-blok maken in de HEAD-sectie van een pagina. De regels daarin gelden alleen voor die ene pagina! body{ background-color; yellow; } Deze regel overruled eventuele regels in het aparte stylesheet!. DEZE pagina krijgt een gele achtergond, onfhankelijk welke achtergond de andere pagina’s standaard krijgen. 54

55 CSS regels in een HTML-element  Je zet als volgt een styleregel IN de begintag van een HTML- element: tekst  Dit is geen aanbevolen methode, het is quick en dirty, en dus onoverzichtelijk Deze regel overruled eventuele regels in het aparte stylesheet EN eventuele regels in het Style-blok! 55

56 CSS moet, maar kan zeer complex worden  In WordPress zul je het zeker willen gebruiken als je jouw site qua uiterlijk een beetje wilt aanpassen.  Dat gaan we dus wel een beetje oefenen! 56

57 Tot slot: Het werkt nauw  HTML en CSS werken nauw:  De meest wonderlijke dingen gebeuren of gebeuren juist niet als:  Je een ( ) of { } vergeet  Je een ; vergeet  Je een “ vergeet, of een “ ipv een ‘ gebruikt, of andersom  Je een verkeerde spatie zet (20 px ipv 20px)  Je een = gebruikt als je een : moet gebruiken of andersom  Je een - vergeet Dat leer je alleen door ervaring… 57

58 Einde crashcursus Overigens, als je je er echt in wilt verdiepen, dan is dit een uitstekend boek, dat wel wat volharding vereist. 58


Download ppt "Crashcursus HTML en CSS 2013. Websites en je browser  Als je in je browser een website opvraagt in je adresbalk, krijg je één webpagina te zien.  Die."

Verwante presentaties


Ads door Google