2. Lists en CSS Basics

WEB

Webdevelopment-I (WDV-I)

Les 2 / Week 2

Lists en CSS Basics

1 / 30

Slide 1: Slide

Software Developer [WEB_A]MBOStudiejaar 1

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

Lesson duration is: 180 min

Items in this lesson

WEB

Webdevelopment-I (WDV-I)

Les 2 / Week 2

Lists en CSS Basics

Slide 1 - Slide

Week 2 // WEB

Lists en CSS Basics

Slide 2 - Slide

Wat heb je vorige week geleerd?

Slide 3 - 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 4 - Quiz

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

Slide 5 - Open question

Stuur één van je screenshots van de inleveropdracht H1 van week 1

Slide 6 - Open question

Ordered lists

Slide 7 - Slide

Lists

Ordered lists

Unordered lists

Slide 8 - Slide

List-items toevoegen aan onze index.html

Slide 9 - Slide

Opdr. 2.1: list-items toevoegen

Open je editor en het bestand playlist.html in de map ‘myportfolio’ (deze heb je vorige week gemaakt bij opdracht 1.9). Heb je deze niet gemaakt, maak dit bestand dan aan door rechts te klikken op ‘myportfolio’ in Sublime en met ‘New File’ het bestand te openen. Sla het op als ‘playlist.html’.

Zet de basisstructuur op. Kopieer uit je index.html de informatie uit de header naar de header van playlist.html.

1. Navigeer naar de main van playlist.html. Maak een h2 met ‘Mijn favoriete 5 liedjes’

2. Zet onder je h2 een p-element met de tekst: ‘dit zijn mijn 5 favoriete liedjes’.

3. Open onder de h2 een unordered list

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

5. Sluit tot slot je unordered list af.

6. Maak een link terug naar de homepagina door onderaan je playlist een a-element toe te voegen naar ‘index.html’ met tussen de a-tags ‘Terug’.

7. Sla je bestand op!

8. 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.

7. Sla je bestand op!

8. 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 10 - Slide

Interne style

Slide 11 - Slide

Wat is CSS en waar gebruiken we het voor?

Slide 12 - Open question

Patroon 2.3: CSS syntaxis

- Selector is de naam van het HTML-element dat we willen selecteren.

- Het paar ‘attribuut: waarde’ beschrijft het attribuut (datgene dat we gaan doen) en de waarde hoe we dat gaan doen.

- We eindigen een CSS-commando met een puntkomma. Vergeet deze dus niet, want zonder werkt je CSS niet.

Slide 13 - Slide

Voorbeelden van CSS-code

Het h1-element wordt aangesproken.

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

Slide 14 - Slide

Hoe voeg ik een interne link toe aan mijn pagina?

Slide 15 - Open question

Interne style

Slide 16 - Slide

Hoe open ik een intern style-element in mijn html-file?

h1{style;}

Slide 17 - Quiz

Zoek op W3Schools 3 attributen die je kunt aanpassen en beschrijf wat je hiermee kunt aanpassen

Slide 18 - Open question

Noem zoveel mogelijk voorbeelden wat voor attributen je kunt aanpassen met CSS:

Slide 19 - Mind map

Even aan de slag in onze portfolio-site'

We gaan wat interne CSS toevoegen aan ons project en deze CSS vervolgens extern linken.

Slide 20 - Slide

Opdracht 2.2: interne CSS schrijven

1. Open het bestand playlist.html’.

2. Zoek op Youtube de videoclip op van jouw eerste favoriet

e liedje en kopieer de link.

3. Zet IN je list-items a-elementen. In de href zet je de gekopieerde link. Tussen de twee a-tags zet je de tekst die eerst in het list-item stond. Nu is je list-item een link geworden.

Let op: je sluit het a-element af vóór je het list-item afsluit.

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

5. 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’.

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

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

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

9. Kies een achtergrondkleur voor je header en footer via http://coolors.co. Kies een bijpassende kleur voor je main in hetzelfde kleurpallet.

10. Bekijk het effect in je browser.

Slide 21 - Slide

Externe stylesheet

Slide 22 - Slide

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

Slide 23 - Open question

Van intern naar extern.

We gaan de gemaakte CSS in ons 'myportfolio' nu op de juiste manier koppelen aan een extern CSS-bestand.

Slide 24 - Slide

Opdracht 2.3: een externe stylesheet linken

1. Maak in je project ‘myportfolio 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.

2. Zoek samen met je buurman 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 25 - Slide

Patroon 2.4: een stylesheet koppelen

1. Maak in de map css een bestand aan met de naam ‘style.css’

2. Zet in de head van het document waar je style op wilt toepassen een link-element met drie attributen

- rel = relatie. De relatie tot het linkelement is dat het een stylesheet betreft.

- href = hyperlinkreference. Waar staat de stylesheet die gelinkt wordt opgeslagen

- type = type format. Het document bestaat uit tekst in het format ‘css’.

3. Voeg in je style.css een regel code toe om te kijken of je code werkt. Bijvoorbeeld: Worden de achtergrond van de body niet geel, dan is je sheet niet goed gekoppeld

4. Nu we de stylesheet gekoppeld hebben aan onze index.html kunnen we externe stijl gaan toevoegen

5. Dit doen we op dezelfde manier als wanneer we interne stijl binnen onze HTML-pagina zetten

6. We spreken eerst het element, class (.class) of het id (#id) aan waar we CSS aan toe willen voegen, vervolgens curly brackets en daartussen zetten we de attributen en waardes die we willen toekennen.

body {

background-color: yellow;

font-size: 16px;

}

Slide 26 - 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 27 - Slide

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

{

}

text-align

center

;

<p>

midden

Slide 28 - Drag question

Inleveropdracht H2: menukaart van Smartcafé

In Itslearning --> WDV-I --> Opdrachten --> Inleveropdracht H1 vind je de opdracht voor deze week.

Lever een screenshot in van:

de browser-look van je unordered list in drinks.nl
de CSS-code van één van je gestylede a-elementen.

Slide 29 - Slide

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

{

}

text-align

center

;

<p>

midden

Slide 30 - Drag question

2. Lists en CSS Basics

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Mind map

Slide 4 - Quiz

Slide 5 - Open question

Slide 6 - Open question

Slide 7 - Slide

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Slide

Slide 12 - Open question

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Open question

Slide 16 - Slide

Slide 17 - Quiz

Slide 18 - Open question

Slide 19 - Mind map

Slide 20 - Slide

Slide 21 - Slide

Slide 22 - Slide

Slide 23 - Open question

Slide 24 - Slide

Slide 25 - Slide

Slide 26 - Slide

Slide 27 - Slide

Slide 28 - Drag question

Slide 29 - Slide

Slide 30 - Drag question

More lessons like this

2. Lists en CSS Basics

03 - CSS - Toevoegen: de integratie met HTML

03 - CSS - css toevoegen

2 HTML: CSS

HTML & CSS: Blokkendoos

01 - CSS - wat is

CSS_ALA_webdesign 1

Les4 - CSS Selectoren: HTML Elementen Aanspreken