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
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolvwoLeerjaar 4

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

time-iconLesduur is: 45 min

Onderdelen in deze les

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

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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

Slide 2 - Quizvraag

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Elke website bestaat uit html.. 
..en css

Slide 4 - Tekstslide

Deze slide heeft geen instructies

HTML
Alléén html

Slide 5 - Tekstslide

Deze slide heeft geen instructies

HTML
Html én css

Slide 6 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Slide 11 - Tekstslide

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Slide 14 - Tekstslide

Deze slide heeft geen instructies

Hoe vond je deze les?
😒🙁😐🙂😃

Slide 15 - Poll

Deze slide heeft geen instructies

Wat kon er beter aan deze les?

Slide 16 - Open vraag

Deze slide heeft geen instructies