HTML&CSS OEFENBOEKJE. van:

Maat: px

Weergave met pagina beginnen:

Download "HTML&CSS OEFENBOEKJE. van:"

Carla Hermans
7 jaren geleden
Aantal bezoeken:

1 HTML&CSS OEFENBOEKJE van:

HTML SYNTAX De meeste HTML tags zien eruit zoals hierboven. Een tag om te openen <p>, en een tag om te sluiten </p>. De letters die tussen de <haakjes> staan, geven aan wat voor soort tag het is.

2 HTML SYNTAX De meeste HTML tags zien eruit zoals hierboven. Een tag om te openen <p>, en een tag om te sluiten </p>. De letters die tussen de <haakjes> staan, geven aan wat voor soort tag het is. Een paar soorten HTML tags heeft geen sluit-tag. Een HTML-bestand bestaat uit twee delen: <head></head>, hiertussen staat extra informatie voor de website zoals de paginanaam en gegevens voor een zoekmachine zoas Google. <body></body>, hiertussen staat alles wat je op de website wil laten zien.

3 #1: TAGS VOOR TEKST Om HTML te leren moet je weten welke tags er zijn en wat ze doen. Hieronder zie je een lijstje met HTML tags die je in een tekst op een website kan tegenkomen. Noteer er bij waarvoor je de tags precies gebruikt. <h1></h1> <h6></h6> <p></p> <b></b> <i></i> <br> <hr> <blockquote></blockquote> <em></em> <strong></strong> <ol> </ol> <ul> </ul> <li>voorbeeld</li> <li>voorbeeld</li> <li>voorbeeld</li> <li>voorbeeld</li>

4 HTML SYNTAX 2 Je kunt nog iets toevoegen aan een HTML tag. Dat heet een "attribute". Er zijn verschillende soorten, maar ze zien er allemaal hetzelfde uit: naam="ietstussenhaakjes" Een paar voorbeelden: <img src="plaatje" /> Een src (source) geeft aan waar de website het plaatje vandaan moet halen. <h1 id="logo">... </p> een id is een unieke naam die je aan een stukje website geeft. Hiermee kun je dat stukje later apart stylen. <a href=" target="_blank" >klik hier</a> Een href geeft aan waar het linkje naar toe gaat. En target zorgt dat je link in een nieuw tabblad opent. Je kunt dus ook meer dan 1 attribuut hebben.

De meeste afbeeldingen bestaan uit pixels: de vierkante blokjes die je ziet als je ver inzoomt op een afbeelding.

5 #2: HTML AFBEELDINGEN Hieronder zie je een aantal afbeeldingen met een vraag. Schrijf het antwoord op de vraag op. 1. Schrijf bij het plaatje hieronder wat de verschillende onderdelen betekenen. 2. De meeste afbeeldingen bestaan uit pixels: de vierkante blokjes die je ziet als je ver inzoomt op een afbeelding. Als je die pixels niet in beeld wil hebben, moet je letten op de resolutie van een plaatje. Resolutie is het aantal pixels per inch. Zoek eens op: Een computerbeeldscherm heeft een resolutie van...ppi, en een iphone 6 laat plaatjes zien met... ppi. 3. Hieronder staan de 3 meest gebruikte soorten afbeeldingen. Voor wat voor soort plaatje kun je ze het best gebruiken?

6 CSS SYNTAX Een css regel ziet er altijd hetzelfde uit: een selector, de { haakjes}, en de eigenschappen die je in wilt veranderen. De selector is heel belangrijk: hiermee zeg je welk stukje van de HTML je wilt veranderen. Er zijn een paar verschillende. Let op dat je de goede kiest! een gewone HTML tag ID class Samengesteld HTML <h1></h1> <p></p> <div id="voorbeeld"> </div> <div class="voorbeeld"> </div> <ul> <li>home<li> <ul> CSS h1 { } p { } #voorbeeld { }.voorbeeld { } ul li { }

7 #3: CSS SELECTOR Links zie je steeds een stukje HTML. Hoe wordt dat in de CSS? Schrijf de goede selector er bij! (uitleg op vorige pagina) <h1></h1> <div id="container"></div> <p></p> <header></header> <div class="blokje"></div> <h3></h3> <img src="logo.png" /> <div id="menu"></div> <a href=" <li></li> <p class="speciaal"></p> <img src="plaatje.jpg" id="logo"/> <article></article> <div class="blokje"></div> <ol id="lijstje"></ol> <strong></strong>

8 CSS LINKEN & VOORRANG Voorrangsregels CSS heeft een aantal voorrangsregels. Die zie je hieronder. De volgorde is belangrijk, hoe specifiek je selector is en of je een joker gebruikt. CSS reset Hoe een internet pagina er uit ziet, verschilt een beetje per browser. Vergeet niet de CSS reset bovenaan je stylesheet te zetten. De meest uitgebreide versie is van Erik Myer: Van boven naar beneden lezen Als je per ongeluk 2 dezelfde regels CSS hebt, krijgt de laatst gelezen voorrang. Specifiek Hoe precies is je CSS selector? Voorbeeld: #header (iets met het ID header) is een stuk specifieker dan div (alle divjes op de pagina).!important Er is ook een joker: als je dit extra stukje code erbij zet, krijgt dit altijd voorrang. div { color:red!important; }

9 #4: CSS EIGENSCHAPPEN Aan de linkerkant zie je een veelgebruikte CSS eigenschap. Waar gebruik je deze eigenschap voor? Zoek het op in je boek of op w3schools.com en schrijf het erbij. height:500px; margin:30px; color:#ffffff; font-size:16px; background-color:powderblue; font-family: "Helvetica", Arial, sans-serif; padding-top:20px; text-align:center; border: solid 3px blue; float:right; background-color:rgba(0,0,0,0.5); opacity:0.75; box-shadow:-5px -5px #000000; border-radius:10px; text-transform:uppercase; list-style-type:square;

Straks moeten ze allemaal gestyled worden, en daarom moeten ze nog een eigen "naam" krijgen met het attribuut ID.

10 HTML BOUWBLOKKEN Er zijn twee manieren om bouwblokken voor een site te maken. De oude manier is met het bouwblokje <div> </div>. Hieronder zie je die manier. Straks moeten ze allemaal gestyled worden, en daarom moeten ze nog een eigen "naam" krijgen met het attribuut ID. In de nieuwste versie van HTML hebben ze die naam al verwerkt in de tag zelf. <div id="header"> </div> is afgekort naar <header> </header. Ook de andere blokjes hebben zo een naam gekregen. Heb je andere blokkken nodig? Je mag ook de <div> in combinatie met deze HTML5 blokken gebruiken!

11 #5: HERKEN DE HTML TAG Aan de linkerkant zie je een HTML tag. Waar gebruik je deze tag voor? Zoek het op in je boek of op w3schools.com en schrijf het erbij. <h4></h4> <div></div> <body></body> <nav></nav> <ul><li>test</li></ul> <p></p> <a href="p2.html"></a> <img src="logo.png" /> <header></header> <br /> <title></title> <footer></footer> <aside></aside> <html><html/> <table></table>

12 #6: BOX MODEL OPDRACHT De box model: dat is hoe een html-blokje er uit ziet. Hieronder zie je een voorbeeld van een div. De stippellijn is de rand van de div. Teken waar je de volgende CSS eigenschappen zitten: border, margin, padding, width, height, background-color, inhoud. Am quat. Nobissed et, earchit et occaepudam que cusaperiae eos de accus il ipsam solorum earit hitatec uscimostem. Itae. Nequi ipsandion rerumquiberi voles raeptaquam fugitatia quos et veliqui consequam, sitam, ium dem que. Blokken naast elkaar zetten doe je door beide blokken een eigenschap te geven. Je hebt de keuze uit: display:inline-block; of float:left; Zorg dat je ze niet door elkaar gebruikt, ze moeten dezelfde eigenschap hebben. Blokken in het midden zetten doe je door het blok een breedte te geven in pixels, en dan de margin links en rechts op automatisch te zetten. width:500px; margin-left:auto; margin-right:auto;

LAY-OUT BOUWEN TIPS De site in het midden zetten doe je door het blok een breedte te geven in pixels, en dan de margin links en rechts op

Je kunt ook kleur instellen met een hexcode (zoals hierboven) of in RGBa of HSLa. Dreamweaver helpt je hierbij tijdens het typen.

Een flexibele site Je hoeft niet per se in pixels te bouwen. Bouwen met procenten (in de breedte) zorgt dat de site meerekt met de browser.

Zorg dat het totaal weer 100% is! Minimale hoogte en breedte Het is niet altijd goed om een blok een vaste hoogte te geven (een maat in pixels).

13 LAY-OUT BOUWEN TIPS De site in het midden zetten doe je door het blok een breedte te geven in pixels, en dan de margin links en rechts op automatisch te zetten. Een achtergrondkleur Een achtergrondkleur voor de hele site stel je met CSS in voor de <body> </body> tag. Je kunt ook kleur instellen met een hexcode (zoals hierboven) of in RGBa of HSLa. Dreamweaver helpt je hierbij tijdens het typen. Je kunt hier ook alvast een standaard lettertype voor de hele site instellen. De hele site "erft" de eigenschap. Een flexibele site Je hoeft niet per se in pixels te bouwen. Bouwen met procenten (in de breedte) zorgt dat de site meerekt met de browser. Hieronder zie je een site die 90% breed is, en om 'm in het midden te houden, links en rechts een beetje margin heeft. Zorg dat het totaal weer 100% is! Minimale hoogte en breedte Het is niet altijd goed om een blok een vaste hoogte te geven (een maat in pixels). Als er dan meer tekst of foto's in komen te staan, dan rekt het niet mee. Een alternatief is min-height. Dan wordt ie minimaal die grootte, en als er meer inhoud is, wordt ie langer. Het tegenovergestelde (max-height) bestaat ook.

14 #7: CSS EIGENSCHAPPEN Aan de linkerkant zie je een CSS eigenschap. Waar gebruik je deze eigenschap voor? Zoek het op in je boek of op w3schools.com en schrijf het erbij. display:block; display:inline-block; display:none; position:fixed; position:absolute; position:relative; screen and (min-with:960px){ header { width:80% } }

15 #8: SPOT DE FOUT Hier zie je steeds een stukje HTML of CSS met een typfout. Verbeter de code!

16 HTML DOM De DocumentObjectMarkup van een website is een schema van hoe het in elkaar zit. Het kan je helpen om de goede selector te kiezen voor de CSS. Dit is vooral zo als je een "samengestelde' css selector gaat gebruiken. Soms wil je bijvoorbeeld alleen de linkjes in de header aanpassen, en niet alle linkjes op de site. Hier zie je een schema van een HTML pagina hiernaast: <body> <div id="page"> <header> <div id="inhoud"> <div id="sidebar"> <footer> <ul> <h1> <p> <p> <a> <li> <li> <li> <a> <a>

17 OPDRACHT Z.O.Z.

18 #9: SAMENGESTELD Kijk goed naar de HTML code op de vorige twee pagina's. Je krijgt steeds de opdracht om een CSS regel te schrijven voor een deel van de HTML. Hoe zou die CSS regel er uit zien? Schijf de hele CSS regel op. Dit is soms nog best lastig, denk goed na! Zet de site in het midden van de browser. Maak de links in de inhoud rood. Geef de tekst in de sidebar een gele achtergrondkleur. Geef het linkje in de footer een beetje margin. Zet de blokjes in het menu naast elkaar. (de li's) Geef het kopje in de inhoud een groene achtergrondkleur.

19 NOTITIES

20 NOTITIES

Vergelijkbare documenten

Interactief blok 2 code opdracht 6 - wireframe

Interactief blok 2 code opdracht 6 - wireframe 1. Klaarzetten bestanden Dit is een best practice voorbeeld. Maak een map aan voor je site. Hier komen alle bestanden in te staan (HTML, CSS en al je afbeeldingen).