Html en Css - les 1

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

HTML

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

Wie heeft er al eens geprogrammeerd?

1. Ik!
2. Ik niet!
3. Ik een beetje.. misschien..

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

Elke website bestaat uit html.. 

..en css

HTML

Alléén html

HTML

Html én css

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! 

 

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

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. 

En nog veel meer elementen!

https://websitesetup.org/wp-content/uploads/2014/09/html5-cheat-sheet.png

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! 

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?

• http://htmldog.com/guides/html/beginner/ 
• Bestudeer onderdeel  'Getting Started' t/m 'Headings'
  

Opdracht: HTML-basis (Fundament A.2)

https://fundament-online.nl/student/content.php?id=49032

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

http://htmldog.com/guides/html/beginner/

Huiswerk 5/9

Bestudeer Fundament A.2 onderdeel 1 en 2

Maak opdrachten 2.8

Hoe vond je deze les?

😒🙁😐🙂😃

Wat kon er beter aan deze les?