‹Terug naar zoeken

2. Lists en CSS Basics

Week 2 // WEB
Lists en CSS Basics

September 2020
1 / 22
volgende
Slide 1: Tekstslide
ICTMBOStudiejaar 1

In deze les zitten 22 slides, met interactieve quizzen en tekstslides.

Onderdelen in deze les

Week 2 // WEB
Lists en CSS Basics

September 2020

Slide 1 - Tekstslide

Wat heb je vorige week geleerd?

Slide 2 - Woordweb

Hoe zijn de meeste elementen in HTML opgebouwd?
A
<open tag></sluit tag>Informatie
B
<open tag> Informatie <sluit tag>
C
<open tag><Informatie>
D
<open tag>Informatie </sluit tag>

Slide 3 - Quizvraag

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

Slide 4 - Open vraag

Hoe voeg ik een interne link toe aan mijn pagina?

Slide 5 - Open vraag

Slide 6 - Tekstslide

Lists
Lists
Ordered lists


Unordered lists

Slide 7 - Tekstslide

List-items toevoegen aan onze index.html

Slide 8 - Tekstslide

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 - Tekstslide

CSS
selector {
  attribuut: waarde;
}

Slide 10 - Tekstslide

Wat is CSS en waar gebruiken we het voor?

Slide 11 - Open vraag

Voorbeelden van CSS-code
Het h1-element wordt aangesproken.

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

Slide 12 - Tekstslide

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

Slide 13 - Woordweb

Interne style

Slide 14 - Tekstslide

Interne style

Slide 15 - Tekstslide

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 - Tekstslide

Externe stylesheet

Slide 17 - Tekstslide

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

Slide 18 - Open vraag

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 - Tekstslide

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 - Tekstslide

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

                        :
}
p
text-align
center
;
<p>
midden
:

Slide 21 - Sleepvraag

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 - Tekstslide

Meer lessen zoals deze

2. Lists en CSS Basics

- Les met 30 slides
Software Developer [WEB_A]MBOStudiejaar 1

2 HTML: CSS

- Les met 17 slides

ICT Website: eerst HTML en CSS

- Les met 13 slides
InformaticaMiddelbare schoolvwoLeerjaar 4

Html en Css - les 1

- Les met 16 slides
InformaticaMiddelbare schoolvwoLeerjaar 4

Html en Css - les 2

- Les met 23 slides
InformaticaMiddelbare schoolvwoLeerjaar 4

WEEK 4 - INFORMATICA

- Les met 30 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

Webdesign - Les 2 (22/23)

- Les met 30 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

HTML & CSS: Blokkendoos

- Les met 23 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4