Hfst 3: Les 2 starten met html

1 / 23

Slide 1: Slide

MediawijsheidMiddelbare schoolmavo, havo, vwoLeerjaar 2

This lesson contains 23 slides, with text slides.

Lesson duration is: 50 min

Items in this lesson

Slide 1 - Slide

This item has no instructions

Les 2: je eigen site

Leerdoelen:

kennis opbouwen om een eigen internetpagina te maken

Slide 2 - Slide

Bordtekening maken met netwerken

Als intro de box of the internet meenemen.

Een website bestaat uit verschillende dingen

Slide 3 - Slide

This item has no instructions

Opbouw van HTML

Slide 4 - Slide

This item has no 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 - Slide

This item has no instructions

3 hoofdelementen

Slide 6 - Slide

This item has no 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 - Slide

This item has no instructions

Aan de slag

Aan de slag met scrimba & html

Slide 8 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no instructions

Pas even aan: EEN CORRECT HTML-BESTAND

Slide 14 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no instructions

Stap 6:

In de head tag komt dus de meta informatie. Onder de title tag gaan we er nog 1 toevoegen.

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

Slide 19 - Slide

This item has no 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 - Slide

This item has no instructions

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

Slide 21 - Slide

This item has no instructions

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

Slide 22 - Slide

This item has no instructions

tada! Je hebt nu een basis site!

Volgende week gaan we nog meer zaken toevoegen qua code!

Slide 23 - Slide

This item has no instructions

Hfst 3: Les 2 starten met html

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

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

Slide 17 - Slide

Slide 18 - Slide

Slide 19 - Slide

Slide 20 - Slide

Slide 21 - Slide

Slide 22 - Slide

Slide 23 - Slide

More lessons like this

HTML_les1

Programmeren - HTML Les 1

Project Materialen - Les 1

04 - HTML - head body

HTML Basics

bkup 03-HTML-document

Chap 3: Lesson 2 start with html

HTML les 1