Welkom bij mijn website tutorial (Deel 2) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista. Als Editor gebruik ik Notepad++, dit word behandelt in Deel 1. Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Oke we gaan verder. Als eerste gaan we nu een color picker functie in Notepad++ toevoegen, anders kunnen we niet gemakkelijk kleuren invoegen. U download color_picker.dll op www.richad3332.nl/downloads, hierna slaan we het bestand op en kopiëren we het. We plakken dit bestand in C:\Program Files\Notepad++\plugins (als u een andere schijf heeft gebruikt om Notepad te installeren dan moet u de C vervangen door de betreffende letter van die schijf). Als u het in de goede map hebt gekopieerd zult u het volgende beeld zien: 1
CSS Stylesheet In een CSS stylesheet bevind zich de opmaak code voor een webpagina, hier geef je dus bijvoorbeeld aan wat de achtergrondkleur kan zijn of de grote van een bepaald plaatje. Maar ook hoe een menu uitklapt. We maken allereerst een map aan met de naam CSS op de locatie waar index.html zich bevindt. We openen nu Notepad++ en klikken linksbovenin op Bestand -> Nieuw. Dan slaat u het op (CTRL + s) in de map CSS als stylesheet.css U zet nu in de Editor de volgende code: /* Stylesheet CSS */ Toelichting: /* de tekst hiertussen is commentaar en word niet meegenomen als code */ We moeten nu gaan zorgen dat index.html ervan af weet dat Stylesheet.css bestaat en daar zijn opmaak code vandaan moet halen. Dit doen we met de volgende code tussen <head> </head>: <link href="css/stylesheet.css" rel="stylesheet" type="text/css" /> Toelichting: href="css/stylesheet.css", geeft een link naar de bestandlocatie. rel= stylesheet, geeft aan dat het om een stylesheet gaat. type= text/css, geeft aan dat het om een.css bestand gaat. 2
Het resultaat: Tussen <body></body> komt alle xhtml code, hier kunnen we dus mooi een achtergrond klaar aan meegeven omdat het toch over de hele website gaat. Nu heeft een CSS Stylesheet automatisch al een paar standaard functies. Zoals: BODY, H1 t/m H6 en nog een paar nu nog onbelangrijke. Wanneer we een class aanmaken in het css-bestand dan doen we dat in blokken. Bijvoorbeeld: BODY { } Toelichting: BODY, geeft aan dat alles wat in de <body></body>(index.html) staat zich houd aan deze class{}. 3
We gaan nu een achtergrond kleur toevoegen aan de webpagina. We zetten de volgende code in het css-bestand: BODY { background-color: ; } Resultaat: U laat de cursor tussen de : en ; staan. U klikt nu in Notepad++ op Plugins en dan Color Picker, dan Show Color Picker. U krijgt een extra venster met een kleurenschema. Dit wijst voorzich lijkt me. Als achtergrond kleur gaan we niet te druk doen dus ik maak hem iets donkerder dan wit. 4
Voorbeeld: Wanneer u op oke klikt: 5
We slaan het Stylesheet-document op met CTRL+s. Wanneer we nu index.html openen zal er een background kleur verschijnen. U krijg het volgende resultaat: (Dit kan bij u anders zijn dan bij mij als u een ander kleur kiest) Font kleur, grootte en family Aangezien de tekst die op de webpagina gepubliceerd gaat worden ook in <body></body> staat kunnen we in de class BODY wat code neergaan zetten voor de font. Code color: ; font-size: ; font-family: ; Toelichting color: ; geeft de kleur van de tekst op de website weer. font-size: ; geeft de grootte van de tekst weer. In pixels (px). font-family: ; geeft het lettertype weer. Meerdere lettertype kunnen gedefinieerd worden, dit geeft een combinatie op het scherm van verschillende lettertype. In mijn voorbeeld webpagina ga ik de volgende code gebruiken: color: #ae0004; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; 6
Dit levert op: 7
Bedankt voor het volgen van Website Tutorial (Deel 2) door Richard3332 Ik wil graag mijn website hoger gerankt hebben in Google. Jullie kunnen dit mogelijk maken door mijn website aan zoveel mogelijk mensen te vertellen, zo helpen jullie mij weer! Het is natuurlijk niet verplicht! En de tutorials van mij blijven altijd gratis. Bedankt voor jullie waardering! Mail: Richard3332@gmail.com msn: richard3332@richard3332.nl website: www.richard3332.nl 8