In HTML zet je de inhoud (tekst en afbeeldingen) en met CSS geef je de inhoud stijl (afmeting, positie, kleur, lettertype).
In de HTML plaats je de inhoud in elementen. Bijvoorbeeld een kop tekst zul je bijvoorbeeld in een h1 element plaatsen:
<h1>dit is een kop tekst</h1>Met CSS kun je het element en die inhoud stijlen. Bijvoorbeeld, onder en boven een marge van 15 pixels, een lettergrote van 24 pixels:
h1 { margin-top: 15px; margin-bottom: 15px; font-size: 24px; }
Opstarten
- In deze opdracht wordt gesproken over het programma Edge Code, dit zit in het Adobe CC pakket. Mocht je geen Adobe CC hebben, kun je ook Brackets gebruiken. Dat is precies hetzelfde en kun je met deze link downloaden.- Deze video geeft een korte intro, in hoe Edge Code werkt (handig voor opdracht A): http://youtu.be/qVrgJVLTwK0
OpdrachtA: Zet de basis van een website op
Een website is een verzameling van bestanden. Deze bestanden moet je onderbrengen in een map.
1) Maak dus een nieuwe map aan voor deze oefening website en noem hem: website_basis.
2) Open deze map in Edge Code.
3) Maak een nieuw bestand en sla hem op als index.html
4) Zet/typ de basis html elementen in het bestand (html, head en body)
5) Plaats het title element en zet hierin de titel van de pagina
6) Maak nog een nieuw bestand en sla deze op als style.css
7) In het html bestand (index.html) link je het zojuist gemaakte stylesheet bestand in. (het link element)
8) Plaats in het stylesheet bestand een simpele "reset":
* { margin: 0; padding: 0; }
9) Plaats ook in het stylesheet bestand een "clearfix":.clearfix { overflow: hidden; }
Je hebt nu eigenlijk de basis van iedere website klaar staan:
- Een html pagina met een gelinkt stylesheet bestand
- Een reset om de standaard margins en paddings op 0 te zetten
- Een clearfix, die je kunt gebruiken
Dit zul je altijd nodig hebben bij het maken van een website, daarom bewaren we deze om als basis te gebruiken voor iedere site die je wilt maken.
Later zullen we hier nog meer handige onderdelen aan toe voegen.
OpdrachtB: Maak een nieuwe website en geef deze een basis inhoud
1. Start
- Maak een kopie van de map: website_basis en noem deze: website_les1
- Open de map in Edge Code en open het bestand index.html
2. Achtergrond
Geef de body een achtergrond kleur anders dan wit.
3. Hoofd div waar de inhoud van de pagina komt te staan
Plaats in de html een div met een class attribuut: class="main"
In de stylesheets stijl je deze als volgt:
- witte achtergrond kleur
- vaste breedte van 700 pixels
- geen vaste hoogte, maar een minimale hoogte van 1200 pixels (min-height)
Hierdoor kan de div in hoogte mee groeien wanneer we er meer inhoud in plaatsen dan past binnen de 1200 pixels
- zorg dat de div in het midden komt te staan (margin ...)
- zorg dat de div in het midden komt te staan (margin ...)
- een "box-shadow":
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
Weet je wat de waarden allemaal betekenen? Zie: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp voor een uitleg.
OpdrachtC: Inhoud geven
1. plaats een afbeelding boven aan als "banner"
- Zoek een liggende afbeelding die niet te hoog is.
- Plaats de afbeelding in de html (img element)
- Stijl in de CSS de afbeelding zo dat de maximale-breedte op 100% en de hoogte op auto
2. plaats een koptekst onder de banner
- Zorg voor een goed lettertype en lettergrote
- zorg dat de koptekst goed gepositioneerd staat (gebruik margins)
3. plaats een paragraaf tekst onder de kopteskst
- Zorg voor een goed lettertype en lettergrote
- zorg dat de paragraaf tekst goed gepositioneerd staat (gebruik margins)
- Plaats de afbeelding in de html (img element)
- Stijl in de CSS de afbeelding zo dat de maximale-breedte op 100% en de hoogte op auto
2. plaats een koptekst onder de banner
- Zorg voor een goed lettertype en lettergrote
- zorg dat de koptekst goed gepositioneerd staat (gebruik margins)
3. plaats een paragraaf tekst onder de kopteskst
- Zorg voor een goed lettertype en lettergrote
- zorg dat de paragraaf tekst goed gepositioneerd staat (gebruik margins)
