HTML_les1

HTML

..en een beetje css

1 / 37

Slide 1: Slide

InformaticaMiddelbare schoolvwoLeerjaar 4

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

Items in this lesson

HTML

..en een beetje css

Slide 1 - Slide

Vandaag

Start met leren van een (basis) kennis van HTML programmeren.
Optie voor basis / geen ervaring in NL: HEDY
Optie voor als je al wat ervaring hebt in het Engels: Scrimba

Digiplein: Deelopdracht 1.03 (blz 119) Interactieve uitnodiging.

Vragen: Eindopdracht 2.09 (interactieve Pdf - review)

Slide 2 - Slide

Deelopdracht 1.03

Download het bestand bij de opdracht
Lees de stappen (steeds minder instructie / geen foto's)
Als je iets niet meer weet, blader terug naar de vorige opdracht daar staat het uitgelegd.

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Wie heeft er al eens iets geprogrammeerd?

Ik!

Ik niet!

Ik een beetje!

Slide 7 - Quiz

Wat is HTML

HTML staat voor:

Hyper Text Markup Language

Het is een opmaak taal
Hiermee bouwen wij de structuur van de website / alles wat online is.
Het werkt met html tags
Er zijn heel veel html tags

Zo zijn er nog heel veel meer, Je hoeft ze niet allemaal uit jouw hoofd te kennen!

Slide 8 - Slide

CSS

CSS staat voor cascading style sheet

Met css kunnen wij de website mooi maken

Denk aan welke

Lettertype
Kleur letters
Grootte van letters
Achtergrond
Vorm van een foto
enz.

Zonder HTML kan je geen CSS gebruiken. Je hebt dus altijd eerst HTML code nodig voor dat je CSS kan gebruiken

Slide 9 - Slide

Basis van een website

<HTML>

tekst

</HTML>

.CSS {

opmaak

}

Javascript(){

gedrag;

}

Slide 10 - Slide

Slide 11 - Slide

Slide 12 - Slide

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

HTML 5 Cheatsheet

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

Slide 13 - Slide

HTML Element

Een HTML element heeft

een begin-tag
0 of meer sub-elementen, ook wel geneste elementen genoemd.
vaak een eind-tag.

Elk HTML element heeft een bepaalde betekenis.

Slide 14 - Slide

Voorbeeld HTML-tag

<h1>Dit is een titel</h1>

De <h1> geeft aan dat de tekst die volgt als kop1 moet worden weergeven

Slide 15 - Slide

Wat is de begintag en wat is de eindtag?

Slide 16 - Open question

Wat is het geneste gedeelte?

Slide 17 - Open question

Keuzeopties

Hedy

Hedy.org

Scrimba.com

Slide 18 - Slide

Hedy

HEDY

Slide 19 - Slide

Slide 20 - Slide

Aan de slag!

Maak een account aan op https://scrimba.com/

Gebruik het emailadres van school

Verzin een wachtwoord dat je ZEKER niet vergeet

Scrimba

Slide 21 - Slide

Opdracht Scrimba

Probeer de eerste "cursus":
Build and Deploy your first website te maken.

Bekijk de video's (met koptelefoon)

Bekijk ook de slides hieronder als stappenplan.

Slide 22 - Slide

Slide 23 - Slide

Klik vervolgens rechtboven op het blauwe icoontje.

Kies voor: 'new scrim'

Selecteer daarna Learn HTML and Css

Slide 24 - Slide

Als het goed is krijg je nu dit te zien. Dit is de HTML code.

Slide 25 - Slide

Klik op untitled scrim links boven in en daar kun je de naam van dit project veranderen.

Geef je project een duidelijke naam.

Slide 26 - Slide

Wanneer je rechts op preview drukt, zie je hoe jouw code er tot dan toe uit ziet.
Is het veranderd, druk dan eerst op 'run' om het door te voeren

Slide 27 - Slide

Voeg op de allereerste regel

<!Doctype html> toe.

Hiermee geef je voor de webbrowser aan dat je HTML 5 gebruikt

Slide 28 - Slide

Onder de eerste regel nog een regel toe. Zet hier de code <html lang="nl">. Dit vertelt de zoekmachine dat alles in het Nederlands gaat.

Let op dit zijn dubbele aanhalingstekens

Slide 29 - Slide

Voeg ruimte tussen de head tags toe voor de title tag

<title> jouw titel </title>

Wat tussen de head tags staat komt niet op je website, maar is voor de zoekmachine enz.

Slide 30 - Slide

Onder de title tag gaan we er nog één toevoegen.

Deze zorgt ervoor dat je site alle cijfers en letters aan kan.

Slide 31 - Slide

Tussen de tags van body komt de inhoud van je website.

Zet eens de tekst 'dit is een test' tussen de twee body tags en bekijk je website.

Zie je dat deze tekst zichtbaar wordt?

Slide 32 - Slide

Ga aan de slag om tekst te verzamelen voor je website

Slide 33 - Slide

Tags

Ga aan de slag om je tekst op te maken:

<h1> grote titel </h1>
<h2> kleinere titel </h2>
h gaat t/m h6!

<p> paragraaf </p>

<br> is een enter
<b> dikgedrukt </b>

Slide 34 - Slide

Opdracht Hedy

- Level 1 - 3 programmeren.

Alle verhalen (tabs) en quiz doorlopen

Slide 35 - Slide

Hedy

HEDY

Slide 36 - Slide

Wat kon er beter aan deze les?

Slide 37 - Open question

HTML_les1

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Quiz

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Slide

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Slide

Slide 16 - Open question

Slide 17 - Open question

Slide 18 - Slide

Slide 19 - Slide

Slide 20 - Slide

Slide 21 - Slide

Slide 22 - Slide

Slide 23 - Slide

Slide 24 - Slide

Slide 25 - Slide

Slide 26 - Slide

Slide 27 - Slide

Slide 28 - Slide

Slide 29 - Slide

Slide 30 - Slide

Slide 31 - Slide

Slide 32 - Slide

Slide 33 - Slide

Slide 34 - Slide

Slide 35 - Slide

Slide 36 - Slide

Slide 37 - Open question

More lessons like this

Programmeren - HTML Les 1

HTML - Tags

HTML les 1

Project Materialen - Les 1

HTML les 1

bkup 03-HTML-document

HTML Basics

HWUD04-sj2122-03-HTML-document