‹Revenir à la recherche

Hfst 3: Les 2 starten met html

1 / 23
suivant
Slide 1: Diapositive
MediawijsheidMiddelbare schoolmavo, havo, vwoLeerjaar 2

Cette leçon contient 23 diapositives, avec diapositives de texte.

time-iconLa durée de la leçon est: 50 min

Éléments de cette leçon

Slide 1 - Diapositive

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

Les 2: je eigen site
Leerdoelen:
  1. kennis opbouwen om een eigen internetpagina te maken

Slide 2 - Diapositive

Bordtekening maken met netwerken
Als intro de box of the internet meenemen. 
Een website bestaat uit verschillende dingen

Slide 3 - Diapositive

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

Opbouw van HTML

Slide 4 - Diapositive

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

Voorbeeld HTML-tag
<h1>Dit is een titel</h1>

De <h1> geeft aan dat de tekst die volgt als kop1 moet worden weergeveven. Het is net Word...

Slide 5 - Diapositive

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

3 hoofdelementen

Slide 6 - Diapositive

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

Afkijken bij de pro's?
ALs je een bepaalde site mooi vind en verder wilt begrijpen dan kan je de snelcode ctrl+u gebruiken of rechtmuisknop en dan paginabron /inspecteren.

Slide 7 - Diapositive

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

Aan de slag
  • Aan de slag met scrimba & html

Slide 8 - Diapositive

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

Stap 1
Je hebt nodig: een laptop/computer. Telefoon doet is hier niet voor geschikt.
Ga naar scrimba.com
meld je aan door op sign up te klikken (rechtsboven in)
leerlingnummer@marnixcollege.nl
jouw naam
eigen wachtwoord

Slide 9 - Diapositive

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

Stap 2: Nieuw scrim(document) starten 
1.klik op een symbool (bij jou ziet hij er anders uit_ rechtsboven in naast all courses
2.Klik op new scrim
3. Selecteer HTML en dan klik je op submit

Slide 10 - Diapositive

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

Klik je op preview zie het venster ernaast verschijnen. Dit is hoe je site er uit komt te zien. 
Wil je wijzigingen doorvoeren klik dan eerst op run voordat je ze in de mini browser ziet.

Slide 11 - Diapositive

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

Klik op untitled scrim links boven in en daar kan je de naam van dit project veranderen.
Noem het les 2 test

Slide 12 - Diapositive

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

Op dit moment kun je alleen regels 1 tot 6 gebruiken. Om er in te werken klik er tussen of gebruik je de pijltjes toetsen om te komen waar je moet zijn

Slide 13 - Diapositive

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

Pas even aan: EEN CORRECT HTML-BESTAND

Slide 14 - Diapositive

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

Let op hier ga je een site  maken over jouw hobby/ favoriete onderwerp. De rest van de lessen ga je daarmee werken dus kies iets waar je wat mee kan.

Slide 15 - Diapositive

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

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

Slide 16 - Diapositive

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

Stap 4: 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
Let op dit zijn dubbele aanhalingstekens

Slide 17 - Diapositive

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

Stap 5 : 
Voeg ruimte tussen de head tags toe. Hier zet je de dan title tag tussen.
<title> jouw titel </title>
Alles wat in de head tag staat vertelt de browser informatie die vaak niet ziet. Meestal heeft de zoekmachine die wel nodig. 

Slide 18 - Diapositive

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

Stap 6: 
In de head tag komt dus de meta informatie. Onder de title tag gaan we er nog 1 toevoegen.
<meta charset="utf-8" > 
Deze zorgt ervoor dat je site alle cijfers en letters aan kan.  


Slide 19 - Diapositive

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

HTML Elementen voor in de body
  • <h1> is een header
  • <p> is een paragraaf geeft een enter voor en na de stuk tekst. Maakt er dus een alinea van. 
  • <br/> is een enter voor in de tekst wanneer jij het wilt. 

Gebruik deze codes maar eens tussen de body tags en zie wat er gebeurd. 
Om te zien wat er gebeurd druk je op preview en run. Iedere keer dat je de codes verandert, druk je ook weer run. Dan zie je de verandering. 

Slide 20 - Diapositive

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

stap 7:Gebruik van de codes in mijn tekst. Vergelijk maar met wat jij hebt.

Slide 21 - Diapositive

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

stap 8: Beeld nadat je op preview en run hebt gedrukt. 

Slide 22 - Diapositive

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

tada! Je hebt nu een basis site!
Volgende week gaan we nog meer zaken toevoegen qua code!

Slide 23 - Diapositive

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

Plus de leçons comme celle-ci

HTML_les1

- Leçon avec 37 diapositives
InformaticaMiddelbare schoolvwoLeerjaar 4

Programmeren - HTML Les 1

- Leçon avec 23 diapositives

Project Materialen - Les 1

- Leçon avec 21 diapositives
InformaticaMiddelbare schoolmavoLeerjaar 3

04 - HTML - head body

- Leçon avec 13 diapositives
ICTMBOStudiejaar 1-4

HTML Basics

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

bkup 03-HTML-document

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

Chap 3: Lesson 2 start with html

- Leçon avec 24 diapositives
MediawijsheidMiddelbare schoolmavo, havo, vwoLeerjaar 2

HTML les 1

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