Hfst 3: Les 3 veel basisonderdelen

1 / 25

Slide 1: Slide

MediawijsheidMiddelbare schoolmavo, havo, vwoLeerjaar 2

This lesson contains 25 slides, with interactive quizzes and text slides.

Lesson duration is: 50 min

Items in this lesson

Slide 1 - Slide

This item has no instructions

Les 3: je eigen site

De basis

je leert:

- doorzettingsvermogen

- lezen

- creatief zijn

Slide 2 - Slide

Bordtekening maken met netwerken

Als intro de box of the internet meenemen.

Het is heel makkelijk om bij het schrijven van html-code iets te vergeten, bijvoorbeeld een eind-tag. Je webpagina zal dan niet goed gaan werken en je moet dan zelf uitzoeken waarom het niet lukt en dat is veel makkelijker als je netjes inspringen hebt gebruikt. Dit doet je door op Tab te drukken op je toetsenbord.

Slide 3 - Slide

This item has no instructions

Slide 4 - Slide

This item has no instructions

Wat heb je nodig?

Ik heb hulp nodig

Ik kan zelf verder werken

Technisch probleem: help

Slide 5 - Quiz

This item has no instructions

In deze gedeelde les vind je

Voorbeelden om uit te voeren in Scrimba in jouwe voorbereiding.

Ga daar zelfstandig mee aan de slag om je site steeds weer een stapje verder te helpen.

Het is steeds nadoen en toevoegen.

Slide 6 - Slide

This item has no instructions

Theorie:

Iedere pagina bevat gegevens. Deze gegevens hebben de vorm van elementen. Zo heb je elementen voor tekst, plaatjes,

formulieren, tabellen, etc. Ieder element bestaat uit drie delen: een begintag, de inhoud en een eindtag.

Verder heeft een element verschillende attributen. Zo heeft het element "tekst" bijvoorbeeld als attributen "lettertype" en "lettergrootte". Tenslotte hebben de attributen weer verschillende waarden. Zo heeft de

tekst een bepaald lettertype, bijvoorbeeld Arial of Courier. Als je geen waarde opgeeft, dan wordt de standaardwaarde voor het betreffende attribuut gebruikt. Zoals gezegd bestaat een element uit een begintag, de inhoud en een eindtag. < en > staat. Een voorbeeld van een tag is en ook is een tag. Het eerste voorbeeld is een begintag het tweede een eindtag. Een eindtag maak je hetzelfde

als de begintag, maar dan met een /. LET OP: Er zijn een paar elementen die geen inhoud hebben. Deze

hebben daarom wel een begintag, maar geen eindtag.

Slide 7 - Slide

This item has no instructions

Ga naar scrimba.com

- log in

- ga naar je voorbereiding

- neem steeds een nieuw onderdeel door in lessonup en voer die dan uit.

Slide 8 - Slide

This item has no instructions

Tekst die onzichtbaar is

met de code title ="jouw tekst" kan je een extra info toevoegen die zichtbaar wordt wanneer je met je muis er over heen gaat. In deze versie kan je dit alleen doen bij een tag zoals <p> en <h..>.

Bij de volgende les leer je dit nog mooier te maken met CSS

Stap 1

Pas deze stap eerst toe in je eigen site voordat je naar de volgende stap gaat.

Slide 9 - Slide

This item has no instructions

HTML opmaak

We gebruiken hier eigenlijk CSS voor, maar wat als je nu al wat dingen wilt aanpassen?

<b> vette tekst</b>

<i>schuine tekst</i>

<u> onderstreept</u>

<del>doorgehaald</del>

Combinatie kan ook:

<u><i><b>geeft een onderstreepte, dikke, schuine tekst</u></i></b>

Kleurtjes kan ook:

<font color="green">En deze regel is groen</font>

Zolang je maar het engels gebruikt kunnen alle kleuren.

Stap 2

Pas deze stap eerst toe in je eigen site voordat je naar de volgende stap gaat.

Slide 10 - Slide

This item has no instructions

Link toevoegen

Om een link toe toe te voegen in je site moet je een deze code gebruiken: <a href="website">hier zet je de tekst die aan te klikken wordt </a>

Wil je dat de pagina in een nieuw tabblad opent? Dan voeg je "target ="_blank" toe tussen de site en >. Dus:

<a href="website"" target ="_blank">hier zet je de tekst die aan te klikken wordt </a>

Wanneer je een stukje code verkeerd zet zal het niet werken. let hier dus goed op.

Stap 3

Pas deze stap eerst toe in je eigen site voordat je naar de volgende stap gaat.

Slide 11 - Slide

This item has no instructions

The button

Omdat het zo fijn is om een knop te hebben.

Voeg <button> klik hier!!</button> toe aan je site en zie het verschijnen.

Lukt het je om de website link te koppelen aan een knop?

Stap 4

Pas deze stap eerst toe in je eigen site voordat je naar de volgende stap gaat.

Slide 12 - Slide

This item has no instructions

Achtergrondkleur

Je hebt al geleerd wat elementen en attributen zijn.

Het element <BODY> kent verschillende attributen. Eén daarvan is bgcolor.

De achtergrondkleur van je pagina verander je dus door het volgende te typen:

<BODY bgcolor="yellow"> Je kunt natuurlijk ook een andere kleur kiezen.

Let op: Als je de achtergrondkleur van je pagina verandert, moet je er rekening mee houden dat je tekst misschien minder leesbaar wordt. Het is dan ook vaak nodig om de tekstkleur te veranderen. Dat geldt natuurlijk helemaal als je een achtergrondplaatje gaat gebruiken.

Stap 5

Pas deze stap eerst toe in je eigen site voordat je naar de volgende stap gaat.

Slide 13 - Slide

This item has no instructions

Commentaar/uitleg in je code

Goede codeurs leggen altijd even uit wat ze bedoelen met hun code als andere het ook moeten begrijpen. Soms kan een code namelijk zo ingewikkeld zijn dat je dingen hebt gecombineerd of afgekort. Hierdoor is het handig om commentaar toe te voegen. Soms wil je dit juist door omdat je hier iets in wil voegen als geheime boodschap. Netzoals bij de hacking game.

de manier waarop je het doet =

Nu wordt het niet zichtbaar in je website maar wel in je code.

Stap 6

Pas deze stap eerst toe in je eigen site voordat je naar de volgende stap gaat.

Slide 14 - Slide

This item has no instructions

Lijstje maken:

Een lijst is een gestructureerde opsomming van items. We kennen drie soorten lijsten:

In ongeordende lijsten <UL> zijn de items niet genummerd.

Voorbeeld:

<ul>

<li>dit is het eerste item</li>

<li>dit is het tweede item</li>

<li type="square">dit is het derde item</li>

</ul>

Normaal staat er voor elk item een cirkel. Door het attribuut ‘type’ mee te geven is dit te

veranderen.

In geordende <OL> lijsten zijn de items genummerd met behulp van een nummer (decimaal of

Romeins) of een letter. Door het attribuut ‘type’ toe te voegen aan de <OL>-tag bepaal je de

opmaak.

<li>dit is het eerste item</li>

<li>dit is het tweede item</li>

<li>dit is het derde item</li>

</ol>

Een definitielijst bestaat uit termen en de beschrijving ervan:

<DL>

<DD>Beschrijving van term 1</DD>

<DD>Beschrijving van term 2</DD>

</DL>

Op de volgende slide staan voorbeelden

Stap 7

Pas deze stap eerst toe in je eigen site voordat je naar de volgende stap gaat.

Slide 15 - Slide

This item has no instructions

Slide 16 - Slide

This item has no instructions

Tabel in code

Tabellen worden gebruikt om teksten mooi in een kader te zetten en getallen bijvoorbeeld netjes onder elkaar.

Een tabel heeft rijen (horizontaal) en kolommen (verticaal). Daarmee creëer je cellen.

<table style="width:100%"> (dit geeft aan hoe groot de tabel mag zijn.

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

</table>

Stap 8

Pas deze stap eerst toe in je eigen site voordat je naar de volgende stap gaat.

Slide 17 - Slide

This item has no instructions

Plaatje

Dit is de code voor een plaatje.

url staat voor waar je het plaatje vandaan hebt.

Wanneer dit het internet is heb je het precieze adres van het plaatje. Dat adres kun je herkennen aan dat het eindigt op .jpg of een ander foto formaat.

Alternate tex staat voor de tekst die je ziet wanneer het plaatje niet geladen kan worden.

Stap 9

Pas deze stap eerst toe in je eigen site voordat je naar de volgende stap gaat.

Slide 18 - Slide

This item has no instructions

Youtube video toevoegen

youtube helpt je al met de code.

Ga naar een filmpje.

klik op delen

klik op insluiten en kopieer alle code

Stap 10

Pas deze stap eerst toe in je eigen site voordat je naar de volgende stap gaat.

Slide 19 - Slide

This item has no instructions

De button continues

Hierna volgen nog een ander paar onderdelen die je kunt gebruiken van het zogenaamde input element. Hiermee kun je tekst velden en vinklijstjes maken.

Slide 20 - Slide

This item has no instructions

Het standaard input veld

tekstveld:

Stap 11

Pas deze stap eerst toe in je eigen site voordat je naar de volgende stap gaat.

Slide 21 - Slide

This item has no instructions

Het wachtwoordveld

Wachtwoordveld.

Een wachtwoord moeten sterretjes worden zodat mensen in de buurt het niet kunnen lezen. Hiervoor

verander je de waarde van het attribuut type naar "password".

Stap 12

Pas deze stap eerst toe in je eigen site voordat je naar de volgende stap gaat.

Slide 22 - Slide

This item has no instructions

selectievakjes

Selectievakje (checkbox)

Selectievakjes (checkboxen) in een formulier worden gebruikt wanneer de gebruiker meerdere

opties tegelijk kan kiezen. Door de naam van de checkboxen gelijk te houden geef je aan dat

deze bij elkaar horen.

<input type="checkbox" name="fruit" value="appel" />Appel<br />

<input type="checkbox" name="fruit" value="banaan" />Banaan<br />

Ronde rondjes krijg door checkbox te radio

Stap 13

Pas deze stap eerst toe in je eigen site voordat je naar de volgende stap gaat.

Slide 23 - Slide

This item has no instructions

Reflectie: Waar had je moeite mee, moeten we in de les nalopen?

Slide 24 - Open question

This item has no instructions

Lever hier je code in door de code te knippen en plakken of door er een screenshot van te maken

Slide 25 - Open question

This item has no instructions

Hfst 3: Les 3 veel basisonderdelen

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Quiz

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

Slide 24 - Open question

Slide 25 - Open question

More lessons like this

HTML5 - Lijsten en tabellen

Webdesign - Les 2 (23/24): Links

Webdesign - Les 2 (22/23)

HWUD04-sj2122-03-HTML-document

Computer Vaardig Heden CVH

HTML - Tags

HTML & CSS 90 - herhaling

bkup 03-HTML-document