Html en Css - les 1

HTML
  • Dat ziet er nog niet uit, maar je weet waarom
  • Je kan een html bestand maken met titel, header en paragraaf
1 / 16
next
Slide 1: Slide
InformaticaMiddelbare schoolvwoLeerjaar 4

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

time-iconLesson duration is: 45 min

Items in this lesson

HTML
  • Dat ziet er nog niet uit, maar je weet waarom
  • Je kan een html bestand maken met titel, header en paragraaf

Slide 1 - Slide

This item has no instructions

Wie heeft er al eens geprogrammeerd?
A
Ik!
B
Ik niet!
C
Ik een beetje.. misschien..

Slide 2 - Quiz

This item has no instructions

Komende lessen
Maak een website over een ICT onderwerp.

Daarvoor moet je eerst twee talen leren:

1. Html - voor tekst en afbeeldingen
2. Css - voor opmaak
De afbeeldingen zijn voorbeelden van projecten van leerlingen van vorig jaar

Slide 3 - Slide

This item has no instructions

Elke website bestaat uit html.. 
..en css

Slide 4 - Slide

This item has no instructions

HTML
Alléén html

Slide 5 - Slide

This item has no instructions

HTML
Html én css

Slide 6 - Slide

This item has no instructions

Werkwijze
Zelfstandigheid

Dit wordt jullie eerste project voor informatica en je zal merken dat je veel zelf moet uitzoeken. Dat komt vooral omdat 
  1. er niet één manier is om een website te maken en 
  2. er niet één manier is jouw ontwerp te maken. 

En om het nog ingewikkelder te maken: er zijn vele verschillende manier en ze zijn vaak allemaal goed!

Opdracht

De opdracht staat in classroom. Daarin staat wat je moet doen en hoe het beoordeeld wordt.

Lessen
Elke week zal ik in de les één of twee nieuwe onderwerpen toelichten.

Planning
De planning staat in classroom in de jaarplanner. Selecteer wel even het tabje voor jouw klas/jaar! 

 

Slide 7 - Slide

This item has no instructions

Stap 1. HTML
HTML is de belangrijkste taal van een website. In HTML schrijf je wat er in je website komt te staan. Denk daarbij in eerste instantie aan teksten en plaatjes en linkjes. Maar later gaan we zien dat je ook andere dingen kan toevoegen zoals video, geluid en andere interactieve elementen zoals google maps.

HTML bestanden open je doorgaans in een browser. De browser leest het html bestand en "tekent" deze op een gebruiksvriendelijke(re) manier. Het onderstaande voorbeeld laat zien hoe dat eruit ziet.
Index.html in notepad
Index.html in chrome

Slide 8 - Slide

This item has no instructions

HTML - tags 
HTML bestaat uit elementen. En die elementen bestaan op hun beurt weer uit tags. Een tags is het stukje tussen haakjes. Dus bijvoorbeeld <h1>. Na de tag komt de tekst die je wil schrijven. Vervolgens gebruik je weer een tag om af te sluiten. In dit geval </h1>. Belangrijk hierbij is de extra / die in de sluit tag zit. 

Slide 9 - Slide

This item has no instructions

HTML - elementen
<h1> is een header
<p> is een paragraaf
<img> is een image
<a> is een anchor
<ul> is en unordered list
<li> us een listitem
enz.. enz..
Semantiek
Waarom nou al die verschillende elementen? Dat is vanwege semantiek:

"De semantiek of betekenisleer is een wetenschap die zich bezighoudt met de betekenis van symbolen, waarbij het in het bijzonder de bouwstenen van natuurlijke talen die voor de communicatie dienen ofwel woorden en zinnen betreft."

Eh, wat?
Voor een titel van een artikel gebruik je een header element zodat iedereen weet dat dat de titel is! 

Slide 10 - Slide

This item has no instructions

Slide 11 - Slide

Bij een boek staat er toch ook niet bij een titel, dit is de titel. Waarom doen we dat dan toch in html?

* zoekmachine!
* logische opbouw is belangrijk voor b.v. screenreaders
* ook belangrijk voor styling: alle titels worden rood met een streepje!
Les 1
  • Ga naar Fundament onderdeel A (vaardigheden), onderwerp 2 (HTML en CSS)
  • Bestudeer de uitleg bij paragraaf 1 en 2 (introductie + webpagina maken) 
  • Probeer de uitgelegde code zelf uit in 'Notepad++' (in Informatica map)
  • Lever de opdrachten in paragraaf 2.8 in via Fundament 
     
Klaar? 
  • Werk alvast verder aan onderdeel 3 en 4

Meer oefening nodig?

Opdracht: HTML-basis (Fundament A.2)

Slide 12 - Slide

This item has no instructions

Les 1
  • Getting Started: What you need to do to get going and make your first HTML page.
  • Tags, Attributes and Elements: The stuff that makes up HTML.
  • Page Titles: Titles. For Pages. A difficult concept, we know…
  • Paragraphs: Structuring your content with paragraphs.
  • Headings: The six levels of headings.


Les 2
  • Lists: How to define ordered and unordered lists.
  • Links: How to makes links to other pages, and elsewhere.
  • Images: Adding something a bit more than text…
  • Tables: How to use tabular data.
  • Forms: Text boxes and other user-input thingamajigs.
  • Putting It All Together: Taking all of the above stuff and shoving it together. Sort of in a recap groove

Opdracht

Slide 13 - Slide

This item has no instructions

Huiswerk 5/9
Bestudeer Fundament A.2 onderdeel 1 en 2
Maak opdrachten 2.8

Slide 14 - Slide

This item has no instructions

Hoe vond je deze les?
😒🙁😐🙂😃

Slide 15 - Poll

This item has no instructions

Wat kon er beter aan deze les?

Slide 16 - Open question

This item has no instructions