Hfst 3: Les 2 starten met html

1 / 23

Slide 1: Tekstslide

MediawijsheidMiddelbare schoolmavo, havo, vwoLeerjaar 2

In deze les zitten 23 slides, met tekstslides.

Lesduur is: 50 min

Onderdelen in deze les

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Les 2: je eigen site

Leerdoelen:

kennis opbouwen om een eigen internetpagina te maken

Slide 2 - Tekstslide

Bordtekening maken met netwerken

Als intro de box of the internet meenemen.

Een website bestaat uit verschillende dingen

Slide 3 - Tekstslide

Deze slide heeft geen instructies

Opbouw van HTML

Slide 4 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

3 hoofdelementen

Slide 6 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Aan de slag

Aan de slag met scrimba & html

Slide 8 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Noem het les 2 test

Slide 12 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Pas even aan: EEN CORRECT HTML-BESTAND

Slide 14 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Stap 3: voeg op de allereerste regel

<!Doctype html> toe.

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

Slide 16 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Slide 21 - Tekstslide

Deze slide heeft geen instructies

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

Slide 22 - Tekstslide

Deze slide heeft geen instructies

tada! Je hebt nu een basis site!

Volgende week gaan we nog meer zaken toevoegen qua code!

Slide 23 - Tekstslide

Deze slide heeft geen instructies

Hfst 3: Les 2 starten met html

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Slide 11 - Tekstslide

Slide 12 - Tekstslide

Slide 13 - Tekstslide

Slide 14 - Tekstslide

Slide 15 - Tekstslide

Slide 16 - Tekstslide

Slide 17 - Tekstslide

Slide 18 - Tekstslide

Slide 19 - Tekstslide

Slide 20 - Tekstslide

Slide 21 - Tekstslide

Slide 22 - Tekstslide

Slide 23 - Tekstslide

Meer lessen zoals deze

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