‹Terug naar zoeken

HTML_les1

HTML
..en een beetje css 
1 / 37
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolvwoLeerjaar 4

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

Onderdelen in deze les

HTML
..en een beetje css 

Slide 1 - Tekstslide

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

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

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

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

Slide 7 - Quizvraag

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

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

Basis van een website
<HTML>
  tekst
</HTML>
.CSS {
  opmaak
}
Javascript(){
 gedrag;
}

Slide 10 - Tekstslide

Slide 11 - Tekstslide

Slide 12 - Tekstslide

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

Slide 13 - Tekstslide

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

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

Wat is de begintag en wat is de eindtag?

Slide 16 - Open vraag

Wat is het geneste gedeelte?

Slide 17 - Open vraag

Keuzeopties
Hedy
Hedy.org

Scrimba.com

Slide 18 - Tekstslide

Hedy
HEDY

Slide 19 - Tekstslide

Slide 20 - Tekstslide

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

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

Slide 23 - Tekstslide

Klik vervolgens rechtboven op het blauwe icoontje.

Kies voor: 'new scrim'
Selecteer daarna Learn HTML and Css

Slide 24 - Tekstslide

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


Slide 25 - Tekstslide

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

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

Voeg op de allereerste regel
<!Doctype html>  toe.
Hiermee geef je voor de webbrowser aan dat je HTML 5 gebruikt

Slide 28 - Tekstslide

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

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

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

<meta charset="utf-8" > 

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


Slide 31 - Tekstslide

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

Ga aan de slag om tekst te verzamelen voor je website

Slide 33 - Tekstslide

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

Opdracht Hedy
- Level 1 - 3 programmeren.
Alle verhalen (tabs) en quiz doorlopen

Slide 35 - Tekstslide

Hedy
HEDY

Slide 36 - Tekstslide

Wat kon er beter aan deze les?

Slide 37 - Open vraag

Meer lessen zoals deze

Programmeren - HTML Les 1

- Les met 23 slides

HTML - Tags

- Les met 30 slides
Communication & multimedia designHBOStudiejaar 1

HTML les 1

- Les met 23 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Project Materialen - Les 1

- Les met 21 slides
InformaticaMiddelbare schoolmavoLeerjaar 3

HTML les 1

- Les met 25 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

bkup 03-HTML-document

- Les met 37 slides
Communication & multimedia designHBOStudiejaar 2

HTML Basics

- Les met 38 slides
Communication & multimedia designHBOStudiejaar 2

HWUD04-sj2122-03-HTML-document

- Les met 31 slides
Communication & multimedia designHBOStudiejaar 2