2. Lists en CSS Basics

Week 2 // WEB

Lists en CSS Basics

September 2020

1 / 22

Slide 1: Slide

ICTMBOStudiejaar 1

This lesson contains 22 slides, with interactive quizzes and text slides.

Items in this lesson

Week 2 // WEB

Lists en CSS Basics

September 2020

Slide 1 - Slide

Wat heb je vorige week geleerd?

Slide 2 - Mind map

Hoe zijn de meeste elementen in HTML opgebouwd?

<open tag></sluit tag>Informatie

<open tag> Informatie <sluit tag>

<open tag>Informatie </sluit tag>

Slide 3 - Quiz

Op welke manier kan ik aangeven dat mijn document een HTML-document is?

Slide 4 - Open question

Hoe voeg ik een interne link toe aan mijn pagina?

Slide 5 - Open question

Slide 6 - Slide

Lists

Ordered lists

Unordered lists

Slide 7 - Slide

List-items toevoegen aan onze index.html

Slide 8 - Slide

Opdr. 2.1: list-items toevoegen

Open je editor en het bestand playlist.html in de map ‘radiogaga’ (deze heb je vorige week gemaakt bij opdracht 1.9). Heb je deze niet gemaakt, kijk dan even terug naar deze opdracht.

Begin met het opzetten van de basis-html-structuur.

We gaan nu op deze pagina een unordered list maken.

- We beginnen binnen de <body>-tags.

- Start door een <h2> te maken waarin je ‘Mijn favoriete 5 liedjes’ als tekst zet.

- Open een unordered list

- Maak vijf list-items aan met behulp van de <li> tags en zet tussen de tags steeds 1 van jouw favoriete nummers

- Sluit tot slot je unordered list af.

- Sla je bestanden op en kijk in de browser of je lijst met liedjes mooi te zien is. Is het niet te zien, controleer dan goed je code of je alles goed gedaan hebt.

Slide 9 - Slide

CSS

selector {

attribuut: waarde;

}

Slide 10 - Slide

Wat is CSS en waar gebruiken we het voor?

Slide 11 - Open question

Voorbeelden van CSS-code

Het h1-element wordt aangesproken.

Specifieker: alleen de list-items in de ordered list worden aangesproken

Slide 12 - Slide

Noem zoveel mogelijk voorbeelden wat voor property's je kunt aanpassen met CSS:

Slide 13 - Mind map

Interne style

Slide 14 - Slide

Interne style

Slide 15 - Slide

Opdracht 2.2: interne CSS schrijven

Open het bestand playlist.html’

Open binnen je <head>-tags <style>-tags. Hierbinnen gaan we onze interne CSS schrijven.

Neem de volgende HTML-code over (deels heb je deze al van de vorige opdracht):

- Voeg in de list-items jouw favoriete liedjes toe en zet de <li> items de <a>-tags heen met een link naar de bijbehorende videoclip op Youtube. Dit doe je door waar doorgaans de tekst van het <a>-element komt, nu het listitem te plaatsen, zoals bij het eerste voorbeeld hierboven.

Nu gaan we elementen uit HTML aanspreken om vervolgens de stijl te veranderen. Gebruik ook W3SCHOOLS om te kijken hoe je sommige property’s kunt wijzigen. Kijk steeds hoe het er uit ziet in de browser (CTRL + SHIFT + R) om te zien of je code er anders uit ziet.

- Open een style element in de head van je webpagina.

- Schrijf hierin een CSS regel die ieder <a> element op de pagina selecteert en de underline verwijdert door gebruik te maken van de ‘text-decoration’ property. De waarde van deze property wordt ‘none’.

- Schrijf een CSS regel die ieder <p> element op de pagina selecteert en de kleur ervan wijzigt in dimgray.

- Schrijf een CSS regel die alleen de <li> tags selecteert van items van een unordered list. En maak de lettergrootte hiervan 20px.

- Schrijf een CSS regel die de <h1> elementen selecteert en zet hiervan de lettergrootte op 28px.

- Schrijf een CSS regel die de <h2> elementen selecteert en zet de lettergrootte op 26px en de kleur op darkblue.

Slide 16 - Slide

Externe stylesheet

Slide 17 - Slide

Hoe kan ik een externe stylesheet koppelen aan mijn index.html?

Slide 18 - Open question

Opdracht 2.3: een externe stylesheet linken

Maak in je project ‘radiogaga’ in de map ‘css’ een bestand aan met de naam ‘style.css’ en sla het op. Je hoeft er nog even niets in te zetten.

Zoek op internet hoe je deze externe stylesheet kunt linken (koppelen) aan jouw html-bestand en kijk of het je lukt om jouw gemaakte ‘style.css’ te koppelen aan je ‘playlist.html’.

Goede bron: W3SCHOOLS,

Slide 19 - Slide

Opdracht 2.4: externe CSS schrijven en in de browser terugzien

Verplaats de styling die je bij de eerdere opdracht hebt gemaakt in playlist.html van de <head> naar het aparte ‘style.css’-bestand.

Neem NIET de <style>-tags mee. Die hoeven we alleen in ons HTML-bestand te zetten, om aan te duiden dat we CSS gaan schrijven. Ons style.css bestand is al een .css-bestand en dus weet onze browser al dat hier CSS geschreven gaat worden.

Kijk of je styling werkt en je je stylesheet goed gekoppeld hebt.

Slide 20 - Slide

Ik wil alle <p>-elementen uitlijnen in het midden

{

}

text-align

center

;

<p>

midden

Slide 21 - Drag question

Inleveropdracht week 2: Uitbreiden van je HTML-document

- Maak een project met de naam ‘portfolio' in de map htdocs.

- Plaats twee mappen in deze map met de naam ‘img’ en ‘css’

- Bouw een basis-html-document op in een nieuw bestand genaamd ‘index.html’.

- Maak een bestand ‘style.css’ in de map ‘css’

- Zet in de <head> van index.html een link naar de externe stylesheet genaamd ‘style.css’ in de map css.

- Maak nu in je index.html de volgende links naar de volgende nieuwe pagina’s:

o aboutme.html: beschrijf wat over jezelf en vertel hier waarom je voor deze opleiding hebt gekozen

o hobbies.html: beschrijf je hobby’s en zet eventueel wat foto's van deze hobby’s op je pagina

o work.html: beschrijf je huidige baan en wat je ideale toekomst baan zou zijn

o friends.html: schrijf hier iets over je vrienden op, maak hier een lijst voor

o family.html: schrijf hier iets over je familie op, gebruik verschillende headings

Slide 22 - Slide

2. Lists en CSS Basics

Items in this lesson

Slide 1 - Slide

Slide 2 - Mind map

Slide 3 - Quiz

Slide 4 - Open question

Slide 5 - Open question

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Open question

Slide 12 - Slide

Slide 13 - Mind map

Slide 14 - Slide

Slide 15 - Slide

Slide 16 - Slide

Slide 17 - Slide

Slide 18 - Open question

Slide 19 - Slide

Slide 20 - Slide

Slide 21 - Drag question

Slide 22 - Slide

More lessons like this

2. Lists en CSS Basics

2 HTML: CSS

ICT Website: eerst HTML en CSS

Html en Css - les 1

Webdesign - Les 2 (22/23)

WEEK 4 - INFORMATICA

CSS - Introductie

01 - CSS - wat is