‹Terug naar zoeken

2. Lists en CSS Basics

WEB
Webdevelopment-I (WDV-I)
Les 2 / Week 2
Lists en CSS Basics
1 / 30
volgende
Slide 1: Tekstslide
Software Developer [WEB_A]MBOStudiejaar 1

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

time-iconLesduur is: 180 min

Onderdelen in deze les

WEB
Webdevelopment-I (WDV-I)
Les 2 / Week 2
Lists en CSS Basics

Slide 1 - Tekstslide

Week 2 // WEB
Lists en CSS Basics

Slide 2 - Tekstslide

Wat heb je vorige week geleerd?

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

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

Slide 5 - Open vraag

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

Slide 6 - Open vraag

Ordered lists

Slide 7 - Tekstslide

Lists
Lists
Ordered lists


Unordered lists

Slide 8 - Tekstslide

List-items toevoegen aan onze index.html

Slide 9 - Tekstslide

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

Interne style

Slide 11 - Tekstslide

Wat is CSS en waar gebruiken we het voor?

Slide 12 - Open vraag

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

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

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

Slide 14 - Tekstslide

Hoe voeg ik een interne link toe aan mijn pagina?

Slide 15 - Open vraag

Interne style

Slide 16 - Tekstslide

Hoe open ik een intern style-element in mijn html-file?
A
<css>hier de css</css>
B
<style>hier de css</style>
C
h1{style;}
D
<istyle></css>

Slide 17 - Quizvraag

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

Slide 18 - Open vraag

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

Slide 19 - Woordweb

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

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

Externe stylesheet

Slide 22 - Tekstslide

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

Slide 23 - Open vraag

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

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

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

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

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

Slide 28 - Sleepvraag

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

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

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

Slide 30 - Sleepvraag

Meer lessen zoals deze

2. Lists en CSS Basics

- Les met 22 slides
ICTMBOStudiejaar 1

03 - CSS Toevoegen: de integratie met HTML

- Les met 11 slides
ICTMBOStudiejaar 1,2

03 - CSS - css toevoegen

- Les met 11 slides
ICTMBOStudiejaar 1,2

2 HTML: CSS

- Les met 17 slides

Webdesign - Les 2 (22/23)

- Les met 30 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

CSS - Introductie

- Les met 10 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

01 - CSS - wat is

- Les met 10 slides
ICTMBOStudiejaar 1-4

CSS_ALA_webdesign 1

- Les met 10 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 1