IAI: Les 6

De vervolgpagina’s uitwerken

Rick Hazebroek [email protected]

Pim Leuthoff [email protected]

1

Les 6

In de les 5 heb je de vervolgpagina’s aangemaakt. In totaal hebben we nu 4 pagina’s: 1. index.html 2. ticket-for-two-actie.html

3. bekijk-de-footies.html

4. beluister-de-playlist.html Zorg dat ze allemaal dezelfde structuur hebben als opdracht 1 uit les 3. Elke pagina heeft een html-tag, head-tag, title-tag met de titel van je pagina, link-tag (voor het CSS-bestand) en een body-tag.

Opdracht 1:

Neem het logo over uit index.html

Heb je in index.html al een logo gemaakt, dan kun je die in de andere .html-documenten ook gewoon gebruiken. Omdat we hetzelfde CSS-bestand gebruiken als de andere pagina’s, hoef je nu alleen de HTML ook in deze pagina te plaatsen:

Opdracht 2:

Voeg tekst toe aan je pagina

We voegen op de pagina’s van de Ticket for two actie, Bekijk de footies en Beluister de playlist tekst toe. Denk na over wat voor tekst je op pagina plaatst. Houdt het kort maar krachtig. Tekst werkt als volgt in HTML. Je hebt verschillende kopteksten en je hebt paragrafen.

1.

Kopteksten

Kopteksten (kopjes) gebruik je voor de titel van je pagina en voor verschillende kopjes. Je kunt 6 kopteksten gebruiken (koptekst 1, koptekst 2, koptekst 3…), maar nu zul je er maar 1- 3 gebruiken. Hoe kleiner het getal, hoe belangrijker de koptekst. Laten we eens een koptekst 1 maken. Deze mag je maar 1 keer gebruiken op een pagina. 2

We gebruiken hem om de titel van de pagina weer te geven. Zo weten we waar we zijn op onze website. Een voorbeeld voor een titel voor de pagina

Ticket for two actie:

Maak een footie en win tickets for two

2. Paragrafen

Nadat je jouw pagina een titel hebt gegeven kun je een paragraaf toevoegen. Een paragraaf noemen we ook wel een alinea. Je kunt die direct onder je

h1

beginnen. Hieronder een voorbeeld:

Maak een footie en win tickets for two

Wil jij graag twee tickets naar Hedon winnen?

Maak dan een footie in onze Converse Zwolle store en stuur hem naar ons op! Wie weet…

Het maakt overigens niet uit waar binnen de start- en sluittag van de h1 en de p je tekst staat. Wil je nu een tweede kopje toevoegen? Dan ga je gewoon onder de sluit-tag van p weer verder. Hieronder een voorbeeld:

Maak een footie en win tickets for two

Wil jij graag twee tickets naar Hedon winnen?

Maak dan een footie in onze Converse Zwolle store en stuur hem naar ons op! Wie weet…

Upload je footie

Druk op de onderstaande knop om je footie toe te voegen

3. Een enter toevoegen

Wil je een enter toevoegen in je je paragraaf of koptekst? Dat kan met de

break

. Je typt de break als:

. De break heeft geen start/sluit tag, maar is een tag op zichzelf. Hieronder een voorbeeld met een enter:

Maak dan een footie in onze Converse Zwolle store en stuur hem naar ons op!

Wie weet…

3

Opdracht 3:

Je tekst vormgeven (stijlen) in CSS

1. Het lettertype van alle teksten veranderen

Standaard heeft je website het lettertype Times new roman. Dat is natuurlijk niet bepaald mooi. Je kunt dit gemakkelijk veranderen voor alle tekst in je website met CSS. Dat doe je door de

body-tag

vorm te geven. Het eigenschap voor het lettertype is

font-family.

1. Start met het bewerken van je body 2. Typ de eigenschap

font-family:

3. Kies een font, bijvoorbeeld Helvetica. body { font-family: Helvetica ; }

2.

Kopjes en paragrafen vormgeven

Hoe kun je kopteksten en paragrafen vormgeven in CSS? Dat kan natuurlijk met een class. Maar het kan ook makkelijker. Stel je wilt

alle paragrafen

een bepaalde tekstkleur geven, dan kan dat als volgt in style.css: p { } color: #E82C0C ; Stel dat je dit bij alle kopjes h2 wilt doen: h1 { } color: #E82C0C ; Wil je nog meer aan je tekst veranderen? Bekijk eens het CSS spiekbriefje en het filmpje Tekst stijlen in CSS .

4

3.

Het lettertype van Converse gebruiken in je h1, h2, h3..

Converse gebruikt een ander lettertype voor kopjes. Dit lettertype staat op

Postbus algemeen

onder de map

#Docent Rick Hazebroek

. Wil je toevoegen voor je kopteksten? Bekijk dan dit filmpje . Let op: Gebruik dit lettertype

niet

voor paragrafen!

4.

Vragen?

Voor studenten van P001 t/m P003:

Van 12 december t/m 1 januari is Rick met verlof en is dan niet bereikbaar voor je vragen.

Je kunt dan je vragen stellen aan Pim. Rick Hazebroek: [email protected]

Pim Leuthoff: [email protected]

Ga als je tijd over hebt verder met les 7!

5