ICT Website: eerst HTML en CSS

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

Cette leçon contient 13 diapositives, avec quiz interactifs et diapositives de texte.

Éléments de cette leçon

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

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 2 - Quiz

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

Elke website bestaat uit html.. 
..en css

Slide 4 - Diapositive

Cet élément n'a pas d'instructions

HTML
Alléén html

Slide 5 - Diapositive

Cet élément n'a pas d'instructions

HTML
Html én css

Slide 6 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

Slide 11 - Diapositive

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
  • 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 12 - Diapositive

Cet élément n'a pas d'instructions

Wat kon er beter aan deze les?

Slide 13 - Question ouverte

Cet élément n'a pas d'instructions