‹Revenir à la recherche

HTML_les1

HTML
..en een beetje css 
1 / 37
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolvwoLeerjaar 4

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

Éléments de cette leçon

HTML
..en een beetje css 

Slide 1 - Diapositive

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

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

Slide 4 - Diapositive

Slide 5 - Diapositive

Slide 6 - Diapositive

Wie heeft er al eens iets geprogrammeerd?
A
Ik!
B
Ik niet!
C
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 - Diapositive

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

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

Slide 10 - Diapositive

Slide 11 - Diapositive

Slide 12 - Diapositive

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

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

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

Wat is de begintag en wat is de eindtag?

Slide 16 - Question ouverte

Wat is het geneste gedeelte?

Slide 17 - Question ouverte

Keuzeopties
Hedy
Hedy.org

Scrimba.com

Slide 18 - Diapositive

Hedy
HEDY

Slide 19 - Diapositive

Slide 20 - Diapositive

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

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

Slide 23 - Diapositive

Klik vervolgens rechtboven op het blauwe icoontje.

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

Slide 24 - Diapositive

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


Slide 25 - Diapositive

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

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

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

Slide 28 - Diapositive

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

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

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

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

Ga aan de slag om tekst te verzamelen voor je website

Slide 33 - Diapositive

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

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

Slide 35 - Diapositive

Hedy
HEDY

Slide 36 - Diapositive

Wat kon er beter aan deze les?

Slide 37 - Question ouverte

Plus de leçons comme celle-ci

Programmeren - HTML Les 1

- Leçon avec 23 diapositives

HTML - Tags

- Leçon avec 30 diapositives
Communication & multimedia designHBOStudiejaar 1

HTML les 1

- Leçon avec 23 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Project Materialen - Les 1

- Leçon avec 21 diapositives
InformaticaMiddelbare schoolmavoLeerjaar 3

HTML les 1

- Leçon avec 25 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

bkup 03-HTML-document

- Leçon avec 37 diapositives
Communication & multimedia designHBOStudiejaar 2

HTML Basics

- Leçon avec 38 diapositives
Communication & multimedia designHBOStudiejaar 2

HWUD04-sj2122-03-HTML-document

- Leçon avec 31 diapositives
Communication & multimedia designHBOStudiejaar 2