Inleiding

Tijdens deze module ga je aan de slag met het bouwen van je eigen website. Je gebruikt hiervoor de speciale computertaal HTML. Ook ga je een eigen logo ontwerpen, die je natuurlijk op je website kunt zetten. Om je website nog aantrekkelijker te maken, ga je ook een eigen video maken.

Let op! Het is erg belangrijk om te beseffen dat alles wat je op jouw website plaatst, op het world wide web terecht komt. En als iets eenmaal op het internet staat, is het heel lastig en soms zelfs onmogelijk om dit weer van het internet af te halen. Je moet dus sowieso geen strafbare zaken op je website zetten, maar ook meningen over gevoelige en ingewikkelde kwesties kun je beter niet op je website zetten.

Website, webpagina en homepage?

Leerdoel:

Na deze uitleg ken je de begrippen website, webpagina en homepage, en weet je wat de verschillen hiertussen zijn.

De begrippen website, webpagina en homepage worden vaak door elkaar heen gebruikt wanneer het over het internet gaat. Deze begrippen hebben veel met elkaar te maken, maar ze hebben wel ieder hun eigen betekenis.

Een webpagina is een pagina op het world wide web en heeft in principe een uniek adres in de vorm van een url. Een voorbeeld van zo’n adres is http://noordikslaan.noordik.nl/agenda/.

Een website is een verzameling samenhangende webpagina’s; een website bestaat dus uit meerdere webpagina’s. Ook een website heeft een uniek adres, bijvoorbeeld http://noordikslaan.noordik.nl.

De belangrijkste webpagina van een website noem je de homepage of thuispagina. Dit is ook altijd de eerste webpagina die je ziet als je een website opent. De homepage is de toegangspoort naar de hele website; via de homepage zijn de andere webpagina’s van de website makkelijk te vinden. Een homepage heet meestal index.html. Waarom dat zo is, leer je later in deze module.

Wat is HTML?

Leerdoel:

Na deze uitleg weet je waar HTML voor staat, waar het voor gebruikt wordt en wat je ermee kunt doen.

HTML is een afkorting voor HyperText Markup Language. HTML is een taal die gebruikt wordt voor het maken van webpagina’s. HTML-documenten kunnen geopend en gelezen worden door webbrowsers (Internet Explorer, Google Chrome, Safari, etc.); het HTML-document wordt door de webbrowser als webpagina weergegeven. HTML-documenten worden altijd opgeslagen met de extensie .html, bijvoorbeeld index.html.

HTML heeft een aantal belangrijke eigenschappen. Met HTML kun je hypertekst maken, d.w.z. dat je in de tekst direct aanklikbare verwijzingen kunt opnemen. We noemen dat ook wel hyperlinks of gewoon links. Daarnaast kun je met HTML tekst opmaken. Je kunt tekst bijvoorbeeld in een kop (heading) of in een paragraaf (paragraph) zetten. Ook kun je tekst bijvoorbeeld vet of cursief maken. Je kunt tabellen maken, of (genummerde) lijsten. De mogelijkheden voor het opmaken van tekst kun je vergelijken met de mogelijkheden hiervoor van Microsoft Word of een andere tekstverwerker. Verder kun je de layout van de webpagina aanpassen. Zo kun je de (achtergrond)kleuren veranderen en afbeeldingen of filmpjes invoegen. Tenslotte kun je met HTML ook formulieren aanmaken, waarmee mensen gegevens kunnen invullen op een webpagina.

Repl.it account

Leerdoel:

Na deze uitleg weet je wat een Integrated Development Environment is en waarvoor deze gebruikt wordt.

Integrated Development Environment

Een integrated development environment, afgekort IDE, is computersoftware die je helpt bij het programmeren. In een IDE zit altijd een editor. Dit is een soort tekstverwerker, net als Microsoft Word, maar dan speciaal ontwikkeld om programmeertaal mee te schrijven. De editor kent bijvoorbeeld al heel veel programmeercodes en vult deze vaak al automatisch voor je in. Ook werkt een editor met veel verschillende kleuren, waarmee je verschillende onderdelen in jouw programmeercode makkelijk van elkaar kunt onderscheiden.

In een IDE zitten ook altijd een compiler en een debugger. Een compiler zorgt ervoor dat jouw programma door de computer kan worden uitgevoerd en een debugger kan je helpen om fouten in jouw programma op te sporen. Vaak kun je met een IDE ook verbinding maken met de FTP-server waarop jouw website is opgeslagen. Tegenwoordig zijn er ook IDE's waar je jouw website ook meteen opslaat.

Je kunt een IDE als software op je eigen computer installeren, maar tegenwoordig zijn er ook webbased IDE’s. Webbased IDE’s benader je online via je webbrowser (Internet explorer, Google chrome, Safari, etc.) en hoef je dus niet zelf op je computer te installeren. Voor deze module maken wij gebruik van de webbased IDE repl.it. Dit is een IDE waar je ook direct jouw website opslaat.

Repl.it account aanmaken

Je gaat nu een repl.it account aanmaken. Je wordt hiervoor lid van het team "IT College - Noordik". Gebruik onderstaande uitnodigingslink om je aan te melden. Kies zelf een geschikte gebruikersnaam en wachtwoord. Schrijf deze direct op en geef deze ook door aan je docent. Gebruik geen wachtwoord die je ook voor andere toepassingen gebruikt. Heb je al een repl.it account? Geef dit dan door aan je docent zodat jouw account gekoppeld kan worden aan het team.

https://repl.it/teams/join/jkvqbddpbkzuumlfkirwpaohlntmgafn-ITcollege2

Je eerste repl.it project opstarten

Je gaat nu je eerste repl.it project opstarten. Ga naar de Team pagina van "IT College - Noordik". Je ziet nu onder Team Projects het project Website_van staan. Klik op start project. Er opent zich nu een HTML-bestand waarin je de komende weken jouw website gaat bouwen. We maken een heel klein begin.

Typ in het linkerscherm (index.html) een klein stukje onder <body>. Voeg daartoe een witregel in met 'enter'.
Klik op 'run' bovenin het beeld.
In het rechterscherm zie je nu hoe jouw website eruit ziet.
Kopieer de link bovenin het rechterscherm en 'bezoek' deze link in een nieuw tabblad van jouw internetbrowser.
Via deze link kan nu iedereen jouw website bekijken.
Repl.it slaat al jouw wijzigingen direct op. Je hoeft dus zelf niets handmatig op te slaan.

Ontwerp van een webpagina

Leerdoel:

Na deze uitleg kun je zelf een eenvoudig ontwerp maken voor een website en/of webpagina.

Je weet dat een webpagina een pagina op het world wide web is; een webpagina kan dus in principe in de hele wereld door iedereen met internet bekeken worden. Met een webpagina kun je mensen iets vertellen. Je kunt ze informeren over bepaalde onderwerpen, bijvoorbeeld over een school, over een goed doel, over een museum, over juist medicijngebruik of over een nieuw model auto. Je kunt mensen via een webpagina ook entertainment bieden, bijvoorbeeld met games, videoclips, reisverhalen of spectaculaire foto’s. Tenslotte kun je met een webpagina ook informatie verzamelen, bijvoorbeeld wanneer iemand zich online abonneert voor een tijdschrift, een reis boekt via internet, online een gezondheidsverklaring invult of een klacht indient over een vertraagde trein.

Voordat je zelf een webpagina of website over een bepaald onderwerp gaat bouwen is het belangrijk om eerst te bepalen wat je met je website wilt bereiken. Wil je mensen informeren, wil je ze entertainen, wil je informatie verzamelen of een combinatie hiervan? En als je dit voor jezelf hebt bepaald, is het belangrijk om na te denken over hoe je dit wilt gaan doen. Hoe moet jouw website eruitzien om jouw doel te bereiken? Daarom ga je altijd eerst een webpagina ontwerpen voordat je deze gaat bouwen. Het is eigenlijk hetzelfde als het bouwen van een auto of een huis; hiervoor moet je ook eerst weten hoe het huis of de auto eruit gaat zien, voordat je begint met bouwen.

In een ontwerp van een webpagina maak je een schets van hoe jij wilt dat je webpagina er straks uit komt te zien. De exacte inhoud van je webpagina hoef je nog niet te weten, maar je moet al wel een globaal idee hebben over welke informatie je straks wilt laten zien op je website. In je ontwerp leg je vast welke kleuren je gaat gebruiken voor de achtergrond, voor bepaalde informatieblokken en voor de tekst. Je legt ook vast welk lettertype je wilt gaan gebruiken. Tenslotte maak je een globale indeling van je website waarmee je aangeeft op welke plaatsen je de informatie wilt laten zien. Een voorbeeld van een ontwerp zie je in figuur 1.

Je kunt een ontwerp zo gek maken als je zelf wilt. Bedenk daarbij wel dat je website functioneel moet blijven. Mensen moeten de informatie snel kunnen vinden; je webpagina moet dus overzichtelijk zijn. De tekst moet natuurlijk goed leesbaar zijn, lichtblauwe tekst op een witte achtergrond kun je bijvoorbeeld niet goed lezen.

Ontwerp van een website

Figuur 1: Voorbeeld van een ontwerp van een website over historische schepen

Opdracht 1:

Kies een onderwerp voor je website. Hiervoor zijn twee mogelijkheden:

Een persoonlijke website. Op deze website kun je vertellen wie je bent, waar je vandaan komt, wat je achtergrond is, naar welke school je gaat, wat je hobby’s zijn en nog veel meer.
Een specifiek onderwerp wat jouw interesse heeft en waarover je wat wilt vertellen.

Zorg ervoor dat je een onderwerp kiest waarbij je voldoende informatie hebt om op jouw website te zetten. Daarbij is het ook belangrijk dat je foto’s en verwijzingen (links) naar andere websites kunt gebruiken.

Bedenk ook wat je met jouw website wilt bereiken en schrijf dit op. Wat bied je de bezoekers van jouw site?

Opdracht 2:

Maak een ontwerp voor je webpagina. Gebruik daarvoor een blanco A4. Maak in ieder geval een globale indeling van jouw webpagina en geef aan waarvoor je welke kleuren gaat gebruiken. Kies ook een lettertype. Gebruik figuur 1 als voorbeeld. Je maakt nu een eerste globale opzet voor jouw website. Het is altijd mogelijk om tijdens de bouw je ontwerp nog aan te passen.

Aan de slag met HTML

Basisstructuur HTML

Leerdoel:

Na deze uitleg ken je de basisstructuur van HTML, kun je deze herkennen in een HTML-bestand en kun je de titel aanpassen van een webpagina.

HTML werkt volgens een bepaalde basisstructuur. Bij het schrijven van HTML-code maak je gebruik van elementen. Elementen worden altijd weergegeven tussen schuine haken: < >. Bijna alle elementen bestaan uit een openingselement en een sluitelement. Een openingselement is bijvoorbeeld <h1> en het bijbehorende sluitelement is dan </h1>. Het sluitelement bevat altijd als eerste teken een slash (/). Informatie over het element, bijvoorbeeld kleur of grootte, worden altijd opgenomen in het openingselement, bijvoorbeeld <h1 style=”color:red;”>. In deze module ga je kennismaken met een groot aantal elementen. Voor een goede werking van je website is het erg belangrijk om elementen altijd zorgvuldig te openen én te sluiten. Wanneer je een element vergeet af te sluiten, kan het zomaar zijn dat je website er anders gaat uitzien dan jij bedoeld had.

In figuur 2 zie je de hoofd-basisstructuur van een HTML-file. In de eerste regel van een HTML-file geef je aan welke versie van HTML je gebruikt. De laatste versie is versie 5; deze versie gebruiken wij ook. Je geeft aan dat je versie 5 gebruikt door <!DOCTYPE html>. Hier zie je direct een element wat alleen maar een openingselement kent; dit element hoef je dus niet af te sluiten.

De volgende stap is om het HTML-document te openen. Dit doe je met het element <html>. Dit element moet wel afgesloten worden. Je kunt jezelf het beste aanwennen om direct na het openen van een element, het element ook weer af te sluiten. In dit geval doe je dat met </html> helemaal aan het einde van het document.

Direct na het openen van het HTML-document, maak je het head-gedeelte aan. Dit doe je met de elementen <head> en </head>. In het head-gedeelte komt informatie te staan die van toepassing is op het HTML document, maar die niet wordt weergegeven op de webpagina zelf. Denk bijvoorbeeld aan de titel van een webpagina (zie figuur 3) of bepaalde stijlvoorschriften die voor de hele webpagina van toepassing zijn (bijvoorbeeld kleur van de tekst).

Na het head-gedeelte maak je het body-gedeelte aan. Dit doe je met de elementen <body> en </body>. Ook hier is het verstandig om direct na het openen van het element, het element weer af te sluiten. In het body-gedeelte komt de inhoud van de webpagina te staan, oftewel alles wat je op je webpagina ziet.

Het is in HTML een goed gebruik om structuren weer te geven door gebruik te maken van witregels en het inspringen van tekst. Door deze structuren blijft je code overzichtelijk en kun je makkelijker fouten opsporen en eventueel later de code aanpassen. Om bijvoorbeeld twee tekstblokken van elkaar te scheiden, kun je gebruik maken van witregels. Als iets ergens een onderdeel van is, maak je gebruik van het inspringen van tekst. In figuur 2 zie je dat de head en body onderdeel zijn van html. Voor de uiteindelijke weergave in de webbrowser maakt het gebruik van witregels en het inspringen van tekst geen verschil.

basisstructuur HTML

Figuur 2: Hoofd-basisstructuur van een HTML-file

titel webpagina

Figuur 3: Weergave van de titel van een webpagina

Opdracht 3:

Bekijk in jouw project de file index.html en kijk of je alle elementen van de hoofdstructuur van HTML terug kunt vinden.

Titel toevoegen aan webpagina

Met HTML kun je een titel toevoegen aan je webpagina, zie figuur 3. Een titel voeg je toe in de head van het HTML-document; de titel geldt voor de hele webpagina maar wordt niet weergegeven op de webpagina zelf. Je gebruikt voor de titel het element <title>. Het is belangrijk om het element af te sluiten; hiervoor gebruik je </title>.

Opdracht 4:

Pas de titel van jouw webpagina aan door de tekst in het head-gedeelte tussen <title> en </title> aan te passen. Laad jouw website in een nieuw tabblad en kijk of de titel is aangepast.

Je ziet dat je voor het opvragen van jouw homepage alleen maar het adres van jouw website hoeft in te typen. Je hoeft niet de filename index.html toe te voegen. Als je het adres van een website intypt, zal de browser altijd op zoek gaan naar een file met als naam index. Daarom is jouw homepage / webpagina opgeslagen met de naam index.html.

Tekst toevoegen aan website

Leerdoelen:

Na deze uitleg:

Weet je wat headings, paragraphs, breaks en horizontal lines zijn en kun je deze in een HTML-bestand toepassen;
Kun je tekst opmaken: vet, cursief, onderstreept, gemarkeerd, ^superscript,_subscript.

Headings, paragraphs, breaks en horizontal lines

Wanneer je tekst op je webpagina wilt zetten, doe je dit door gebruik te maken van headings en paragraphs. Met headings kun je koppen maken en met paragraphs kun je ‘normale’ stukken tekst maken. Binnen HTML zijn er 6 verschillende soorten headings, die alleen verschillen in grootte van de letters. De belangrijkste heading kun je aanmaken met h1 en de minst belangrijke heading met h6. Een heading plaats je tussen een openings- en sluitelement, bijvoorbeeld <h2> en </h2>. Voor paragraphs is er geen keuze; deze teksten worden altijd op dezelfde wijze weergegeven. Een paragraph plaats je ook tussen een openings- en sluitelement, <p> en </p>. Een voorbeeld van het gebruik van headings en paragraphs is weergegeven in figuur 4 en 5. In figuur 4 zie je de HTML-code en in figuur 5 hoe deze code wordt weergegeven in een webbrowser.

headings en paragraphs HTML

Figuur 4: HTML-code met headings en paragraphs

headings en paragraphs website

Figuur 5: Weergave van de HTML-code uit figuur 4 in een webbrowser

Als je goed naar figuur 4 en figuur 5 kijkt, zie je dat het geen verschil maakt of je wel of geen witregel gebruikt in de HTML code. Bij de laatste heading en paragraph wordt geen witregel gebruikt, terwijl het resultaat in de webbrowser hetzelfde is. Je ziet ook dat als je gebruik maakt van headings en paragraphs er automatisch voldoende ruimte om de tekst heen wordt gecreëerd.

Soms wil je ergens op je website een extra witregel toevoegen, bijvoorbeeld om meer ruimte te creëren tussen twee blokken tekst. Daarvoor kun je gebruik maken van het element break. Dit element heeft alleen een openingselement, <br>. Je gebruikt <br> ook om naar een volgende regel te gaan. Je kunt <br> vergelijken met enter in een tekstverwerkingsprogramma.

Om bepaalde onderdelen op je webpagina van elkaar te onderscheiden zou je ook gebruik kunnen maken van een horizontal line. Hiervoor gebruik je het element <hr>. Ook hierbij gebruik je alleen maar een openingselement. In figuur 6 en figuur 7 zie je voorbeelden van het gebruik van een break en een horizontal line.

br en hr HTML

Figuur 6: Gebruik van <br> en <hr> in HTML-code

br en hr website

Figuur 7: Weergave van de HTML-code uit figuur 6 in een webbrowser

Opdracht 5:

Je gaat nu de eerste inhoud voor je webpagina maken. Je weet nog dat jouw homepage opgeslagen is als index.html. Deze moet je nu eerst openen in repl.it, de IDE (weet je nog wat dat is?) die we in deze module gebruiken.

Ga naar de website repl.it.
Log in met je eigen gegevens en open je project (in team IT College - Noordik).
Als de file index.html nog niet geopend is, kun je deze openen door de file aan de linkerkant aan te klikken.

Zoals je eerde geleerd hebt, moet je alles wat je wilt laten zien op je webpagina in je HTML-file plaatsen in de body, dus tussen <body> en </body>.

Maak in je index.html file een heading aan en schrijf hierin een kop. Je mag zelf kiezen welke heading je gebruikt. De grootste heading is h1 en de kleinste heading is h6.
Maak onder je eerste heading nu een paragraph aan en schrijf hierin een stukje tekst.

Je kunt je webpagina nu bekijken door deze te openen in een nieuw tabblad van je webbrowser.

Open een nieuw tabblad in je webbrowser.
Typ in de adresbalk het www-adres van jouw website.

Opmaken van tekst

Door het gebruik van headings en paragraphs kun je tekst al een beetje opmaken. Met HTML kun je tekst op nog meer manieren opmaken, ook binnen headings en paragraphs. In figuur 8 en figuur 9 zie je op welke manieren je tekst nog meer kunt opmaken. Voor alle elementen die je hierbij gebruikt, geldt dat je deze moet openen en sluiten.

opmaak tekst HTML

Figuur 8: Diverse mogelijkheden om met HTML tekst op te maken

opmaak tekst website

Figuur 9: Weergave van de HTML-code uit figuur 8 in een webbrowser

Opdracht 6:

Je gaat nu de eerste versie van jouw webpagina maken. Bedenk dat je jouw webpagina later altijd weer aan kunt passen.

Vul je webpagina met de tekst die hoort bij jouw onderwerp. Maak hierbij gebruik van headings en paragraphs. Maak waar nodig en mogelijk ook gebruik van breaks en horizontal lines, en maak waar nodig de tekst op. Let er wel op dat jouw webpagina functioneel blijft. Spectaculaire opmaak-elementen moeten de aandacht voor de tekst niet te veel afleiden.

Afbeeldingen toevoegen

Leerdoel:

Na deze uitleg:

Kun je een afbeelding toevoegen aan je website;
Kun je de juiste grootte instellen voor een afbeelding op je website;
Kun je de juiste positie instellen voor een afbeelding op je website.

Je hebt in de vorige les jouw website voorzien van tekst. Met HTML kun je naast tekst ook afbeeldingen op je website plaatsen. Je kunt hiervoor eigen plaatjes of foto’s gebruiken, maar je kunt ook plaatjes of foto’s van het internet halen. Denk hierbij wel aan een juiste bronvermelding. Om afbeeldingen makkelijk toe te kunnen voegen aan je website, moet je de afbeeldingen opslaan in dezelfde map/folder als de webpagina. Dit kun je ook weer via repl.it doen. Je kunt voor de afbeelding ook verwijzen naar een externe webpagina, maar hiermee wordt je wel afhankelijk van deze externe webpagina. In deze module zullen we van deze mogelijkheid dan ook geen gebruik maken.

Om een afbeelding in te voegen, gebruik je het <img> element. Dit element wordt alleen geopend en kent dus geen sluitingselement. In het openingselement neem je alle informatie op die van belang is voor het toevoegen van de afbeelding. Een <img> element ziet er als volgt uit:

Bij src geef je de naam van de afbeelding aan; de afbeelding moet dan wel in dezelfde map staan als de webpagina. Je kunt er ook voor kiezen om een aparte folder op de internet-server aan te maken voor alle plaatjes; dit is wel overzichtelijker. Je kunt deze folder dan bijvoorbeeld images noemen. In dat geval gebruik je bij src “/images/plaatje.jpg”.

Bij alt geef je een omschrijving van de afbeelding weer. Dit wordt gebruikt als de afbeelding door de browser niet kan worden gevonden. Daarnaast zijn er programma’s die deze omschrijving gebruiken wanneer zij de tekst van de webpagina voorlezen voor blinden of slechtzienden. Als je webpagina goed functioneert, zul je deze omschrijving niet echt tegenkomen. Voor een goede werking van je webpagina is het wel noodzakelijk dat je deze alt opneemt in je code.

Met style=”width:128px;height:128px” geef je de gewenste grootte van de afbeelding weer in pixels. Let op dat je hierbij dezelfde verhouding gebruikt als de originele afbeelding. Doe je dit niet, zal de afbeelding vervormd worden. Het originele formaat van een afbeelding (in pixels) kun je vinden bij de details van de afbeelding, bijvoorbeeld in OneDrive. Je hoeft niet hetzelfde aantal pixels aan te houden, maar de verhouding tussen de breedte en de hoogte moet wel hetzelfde blijven.

Je kunt verschillende soorten afbeeldingen gebruiken, zoals jpg, gif en png-bestanden. Door met gif-bestanden te werken, kun je ook bewegende plaatjes toevoegen aan je website.

Opdracht 7:

Je gaat nu een afbeelding toevoegen aan je webpagina.

Zoek een passende afbeelding uit voor je webpagina. Dit mag een jpg, gif of png-bestand van internet of een eigen foto zijn. Sla deze afbeelding op jouw computer of iPad (in OneDrive) op.
Ga naar de website repl.it.
Log in met je eigen gegevens en open je project (in team IT College - Noordik).
Klik in het linkerscherm (Files) op de drie puntjes en kies voor 'Upload file'.
Zoek jouw afbeelding op en klik hierop. De afbeelding wordt nu ge-upload en is zichtbaar bij de files (je kunt eventueel een extra map 'images' aanmaken en daar je afbeeldingen in plaatsen).
Kies een plek op jouw webpagina (bij index.html) waar je de afbeelding wilt invoegen. Voeg de afbeelding op deze plek in door gebruik te maken van het <img> element. <img src=”plaatje.jpg” alt=”Mooi plaatje” style=”width:128px; height:128px”> Gebruik hierbij de naam van jouw eigen afbeelding, kies een eigen omschrijving en kies een passende breedte (width) en hoogte (height).
Bekijk het resultaat via een webbrowser.

Opdracht 8

Je kunt nog veel meer instellen bij het toevoegen van een afbeelding. Probeer maar eens uit!

Kopieer de regel die je bij stap 6 van opdracht 7 hebt gebruikt nog een keer in je file.
Type achter “style=” de volgende tekst: "width:…px; height:…px; float:left; margin-right:20px; margin-left:100px; border:1px solid black; padding:15px"
Bekijk het resultaat via een webbrowser.
Verander nu zelf waardes achter “style=”.
Kijk in de webbrowser wat er met de afbeelding gebeurt en schrijf dit op.
We bespreken klassikaal wat je met deze waardes nu precies kunt instellen.

Opdracht 9

Voorzie je website van meerdere afbeeldingen. Pas jouw afbeeldingen aan op een manier die je zelf het mooiste vindt.

YouTube-video toevoegen

Leerdoel:

Na deze uitleg kun je een YouTube video toevoegen aan je website.

Je kunt met HTML ook heel makkelijk een YouTube video toevoegen aan je website. Om een eigen video op je website te kunnen laten zien, is het vaak het meest eenvoudig om je video op YouTube te zetten en deze via een iframe-element op te nemen op je website.

Als je een (eigen) video op YouTube wilt laten zien op je website, krijg je de code die je hiervoor in HTML moet schrijven al ‘kado’ van YouTube zelf.

Opdracht 10:

Neem in jouw webpagina een YouTube video op. Zorg ervoor dat de inhoud van de video aansluit bij het onderwerp van jouw website. Bedenk zelf een goede plek op je website waar je de video wilt laten zien.

Ga naar de website repl.it.
Log in met je eigen gegevens en open je project (in team IT College - Noordik).
Zoek de video op YouTube op. Gebruik hiervoor de desktop versie van YouTube.
Klik onder de video op ‘Delen’. Zie onderstaand figuur.
Klik daarna op ‘Insluiten’. Zie bovenstaand figuur.
Kopieer de hele opgegeven tekst. Zie bovenstaand figuur.
Plak deze tekst op de plaats in je html-file waar je de video wilt laten zien.
Bekijk het resultaat via een webbrowser.

Links toevoegen

Leerdoel:

Na deze uitleg kun je een verwijzing (link) naar een externe website toevoegen aan je website.

Je hebt in de vorige lessen jouw website voorzien van tekst en afbeeldingen. Met HTML kun je verwijzingen naar andere, externe websites toevoegen aan een stukje tekst of aan een afbeelding. Als je dan op zo’n stukje tekst of afbeelding klikt, wordt de externe website automatisch geopend. Zo’n verwijzing wordt vaak een link genoemd. In de tekst wordt een link vaak blauw en onderstreept weergegeven. Als je met de muisaanwijzer op een link gaat staan, verandert het pijltje van de muisaanwijzer in een handje.

Om een verwijzing of link toe te voegen aan je website maak je gebruik van het <a> element. Dit element moet je altijd openen én sluiten. De informatie over de externe website neem je op binnen het openingselement <a> en de tekst of afbeelding waarop geklikt moet worden voor het openen van de andere website, plaats je tussen het openings- en sluitelement, dus tussen <a> en </a>.

Een voorbeeld van een link gekoppeld aan één woordje ziet er dan zo uit:

Links 1

Op de website ziet het er dan zo uit:

Links 2

De url (het www-adres) van de externe website neem je dus op binnen het openingselement <a> na het commando href=. Belangrijk hierbij is dat je de volledige url gebruikt, dus ook http(s)://.

Een voorbeeld van een link gekoppeld aan één paragraaf ziet er zo uit:

Links 3

Op de website ziet het er dan zo uit:

Links 4

Je ziet dat nu de hele tekst een link geworden is. Let goed op de plaats van de verschillende openings- en sluitelementen. Verder zie je dat de kleur van de link nu paars is geworden. Dat komt omdat de link al een keer is aangeklikt. Een link die nog niet is aangeklikt is blauw, en een link die al een keer is aangeklikt is paars.

Op dezelfde manier als je een link koppelt aan een paragraaf, kun je ook een link koppelen aan een afbeelding. Tussen het openings- en sluitelement neem je dan het <img>-element op. Bij een afbeelding kun je niet zien dat het een link is; daarom is het belangrijk om dit ergens aan te geven. Bijvoorbeeld met: “Voor meer informatie klik op de foto van de zeesleepboot Holland”.

Je kunt binnen het openingselement van een link aangeven dat je de externe website in een nieuw tabblad van de browser wilt laten openen; jouw eigen website blijft dan dus ook geopend. Daarvoor gebruik je het commando target, zoals in onderstaand voorbeeld.

Links 5

Als je nu de link aanklikt, wordt de andere website in een nieuw tabblad geopend.

Links 6

Opdracht 11:

Je gaat nu een verwijzing naar een externe, andere website toevoegen aan je webpagina.

Zoek de website op waarvoor je een verwijzing (link) wilt toevoegen aan je website.
Kopieer uit de adresbalk het volledige internetadres (url).
Selecteer eerst het hele adres, klik dan met de rechtermuisknop op het adres en kies voor ‘kopiëren’. Of selecteer eerst het hele adres en gebruik dan ‘Ctrl-C’.
Log in met je eigen gegevens op repl.it en open je project (in team IT College - Noordik).
Als de file index.html nog niet geopend is, kun je deze openen door de file aan de rechterkant aan te klikken.
Zoek in je eigen website op, welk gedeelte (woord(en), paragraaf, kop, afbeelding) je wilt gebruiken voor de verwijzing.
Plaats dit gedeelte tussen het openingselement <a> en het sluitelement </a>.
Vul het openingselement aan met href. Het openingselement ziet er dan zo uit: <a href=””>
Plak tussen de dubbele aanhalingstekens het internetadres van de website waarnaar je wilt verwijzen. Klik tussen de dubbele aanhalingstekens met de rechtermuisknop en kies voor ‘plakken’. Of klik tussen de dubbele aanhalingstekens met de linkermuisknop en gebruik dan ‘Ctrl-V’.
Bekijk het resultaat via een webbrowser en probeer de verwijzing (link) uit.
OPTIONEEL: Kijk of je de andere website in een nieuw tabblad kunt laten openen.

Layout aanpassen

Leerdoel:

Na deze uitleg kun je een aantal stijlelementen toepassen op (gedeeltes van) je website.

Stijlelementen

Tot nu toe is je website opgebouwd uit standaard stijlelementen van HTML. Zo is de achtergrond van de website wit, is de kleur van de letters zwart en is het lettertype het standaard lettertype van de browser. Met HTML kun je heel veel stijlelementen naar eigen keuze aanpassen. In deze les beperken we ons tot de volgende stijlelementen:

Achtergrondkleur : background-color
Kleur van de letters : color
Lettertype : font-family
Plaats van de tekst : text-align

Een stijlelement pas je toe door in een openingselement, later zien we bij welke elementen dit kan, de gewenste stijlelementen op te nemen. We nemen nu als voorbeeld een paragraaf:

stijlelementen 1

Op de website ziet het er dan zo uit:

stijlelementen 2

Voor background-color (achtergrondkleur) en color (kleur letters) kun je een groot aantal kleuren kiezen. Op https://nl.wikipedia.org/wiki/Lijst_van_HTML-kleuren (of googelen op ‘lijst van HTML kleuren’) kun je de (Engelse) namen vinden van de kleuren.

Voor lettertype kun je kiezen uit de volgende lettertypes:

Times new Roman (font-family:’times new roman’)
Georgia (font-family: georgia)
Arial (font-family: arial)
Verdana (font-family: verdana)
Courier New (font-family: ‘courier new’)
Lucida Console (font-family: ‘lucida console’)

Let dus op dat je bij lettertypes die bestaan uit meerdere woorden ‘enkele aanhalingstekens’ gebruikt.

Voor text-align kun je kiezen uit de volgende opties:

Left : de tekst wordt dan links uitgelijnd;
Right : de tekst wordt dan rechts uitgelijnd;
Center : de tekst wordt dan gecentreerd.

Stijlelementen kun je toepassen op de gehele website of op delen van de website:

<body> : gehele website
<h…> : betreffende kop
<p> : betreffende paragraaf

Maar soms wil je ook stijlelementen toepassen op een gedeelte van een paragraaf of een gedeelte van een kop. Daarvoor kun je het <span> element gebruiken, zoals in onderstaand voorbeeld:

stijlelementen 3

Op de website ziet het er dan zo uit:

stijlelementen 4

Je kunt ook stijlelementen toepassen op meerdere onderdelen tegelijk, bijvoorbeeld op een kop en de bijbehorende paragraaf. Daarvoor gebruik je het <div> element, zoals in onderstaand voorbeeld:

stijlelementen 5

Op de website ziet het er dan zo uit:

stijlelementen 6

Opdracht 12:

Log in met je eigen gegevens op repl.it en open je project (in team IT College - Noordik).
Als de file index.html nog niet geopend is, kun je deze openen door de file aan de rechterkant aan te klikken.
Kies een gedeelte van je website waar je een stijlelement wilt toevoegen (achtergrondkleur, kleur letters, lettertype en/of plaats van de tekst).
Voeg het gewenste stijlelement toe.
Herhaal dit tot je voor 3 verschillende onderdelen van je website tenminste 2 stijlelementen hebt toegepast.
Sla de file op.
Bekijk het resultaat via een webbrowser.

Logo ontwerpen

Je leert bij dit onderdeel waaraan een goed logo moet voldoen. Ook krijg je uitleg over de functie van een logo en weet je waar logo's voor kunnen worden gebruikt. Vervolgens ontwerp je een eigen logo voor je website, en presenteer je jouw logo aan de klas.

Bekende logo's

Leerdoelen:

Na deze uitleg:

Weet je wat de functie is van een logo;
Weet je waar logo's voor kunnen worden gebruikt.

Een sterk logo kan je website goed op de kaart zetten. Maar hoe maak je een sterk logo? En hoe pak je dat aan? Voordat je jouw eigen logo gaat maken, gaan we eerst aan het werk met een aantal bekende logo's. Zo doe je alvast inspiratie op voor jouw eigen logo.

Hieronder zie je een aantal bekende logo's.

diverse bekende logo's.

Bron: https://dwork.nl/bekende-logos-met-een-verborgen-boodschap

Opdracht 1
In bovenstaande afbeelding zie je veel bekende logo's. Verder zul je vast nog wel meer logo's kennen, bijvoorbeeld van jouw school of sportvereniging, of van bedrijven in de buurt.

a. Kies de twee logo's die jou het meeste aanspreken. Geef aan waarom deze logo's jou zo aanspreken.
b. Vergelijk jouw logo's met de logo's van je buurman of je buurvrouw. Vertel aan elkaar waarom je voor deze logo's gekozen hebt.

Onderstaand zie je de logo's van Coca Cola door de jaren heen.

Bron: logoz.nl

Opdracht 2
Bekijk bovenstaande logo's van Coca Cola. Bespreek samen met je buurman of buurvrouw welke overeenkomsten en welke verschillen jullie zien. Kunnen jullie de overeenkomsten en verschillen verklaren?

Opdracht 3
Bekijk de volgende website: ''logo's met een verborgen boodschap''.

Lees het artikel en bekijk de logo's met verborgen boodschappen. Van hoeveel logo's kende je de verborgen boodschap al? En van welke logo's was dat?

Kenmerken van een goed logo

Leerdoelen:

Na deze uitleg weet je waar een goed logo aan moet voldoen.

Waaraan moet een goed logo voldoen? Let op deze 7 punten

Of het nu gaat om pre-historische grottekeningen, het spijkerschrift, mythologische figuren op Grieks aardewerk, verkeersborden of de pictogrammen op je smartphone… De mens heeft altijd al de behoefte gehad om zich in symbolen te uiten. Dat is niet zo vreemd, want één simpel plaatje zegt soms meer dan honderd woorden.

Een goed logo alleen zorgt natuurlijk niet voor een rinkelende kassa, maar het kan wel de uitstraling van je website versterken. Het geeft direct een indruk van je website en zorgt voor naamsbekendheid en herkenbaarheid.

Omgekeerd kan een slecht logo ''potentiële klanten'' afschrikken. Kies je bijvoorbeeld als advocatenkantoor voor een speels beeldmerk met een frivool lettertype en vrolijke kleuren, dan loop je het risico dat mensen je website niet serieus nemen.

Belangrijke eerste indruk

Door het internettijdperk heeft het logo aan belang gewonnen. “Wie je website bezoekt, beslist al binnen een paar seconden of hij een goed gevoel heeft bij jouw website en jou vertrouwt’’, zegt Rob Vogels, eigenaar van reclamestudio GO! in Helmond. Het ontwerp van een goed logo verdient dus aandacht. Maar waar moet je zoal op letten?

1. Laat het logo aansluiten bij je website

Wie googelt op ‘hovenierswebsite’ en ‘logo’ ziet geen enkel beeldmerk waarop de kleur groen ontbreekt. Dat is logisch: een logo moet aansluiten bij je website. “Een goed logo zorgt ervoor dat ook iemand die je onderneming niet kent meteen ziet wat het website doet, als hij het logo op de gevel ziet staan”, zegt Vogels.

Een mooi voorbeeld vindt hij het logo van de NS. “Dat is een spoor met een pijl naar links en naar rechts. Eigenlijk zit daar alles in verpakt.” Ook het logo van de NPO spreekt hem aan. “Het schuin oranje ruitje met afgeronde hoekjes wekt bij mij de associatie met een televisie.”

Behalve de vorm zijn ook de kleur en het lettertype van belang, want deze brengen elk een eigen sfeer en uitstraling met zich mee, meent Vogels. “Heb je een coaching praktijk, dan staan warmte en menselijk contact voorop. Dat moet in het logo terug te vinden zijn, door bijvoorbeeld te kiezen voor warme tinten en wat meer rondingen in het lettertype. Harde hoeken en spitse punten zou dan ik mijden.”

Voor een accountantskantoor daarentegen geeft Vogels de voorkeur aan grijze en blauwe tinten. “Dat wekt vertrouwen.”

Vogels heeft in het logo van zijn eigen website een vogeltje verwerkt. Daar is goed over nagedacht. “Dat verwijst niet alleen naar mijn achternaam, maar geeft ook aan dat ik graag met beide voeten op de grond sta en benaderbaar ben.”

Als hij een logo moet ontwerpen, gaat Vogels altijd uitgebreid met klanten in gesprek, zodat hij een goed beeld krijgt van het website en zijn geschiedenis. “Ik ga het liefst naar het website toe. Moet ik bijvoorbeeld een logo van een deurenfabrikant ontwerpen, dan wil ik de geur van hout ruiken. Als ik na anderhalf uur vertrek, heb ik meestal al in mijn achterhoofd welke kant het op moet, qua sfeer, kleur en lettertype.”

2. …en wat je wil zijn

Een logo kan ook het imago van je website bijsturen, geeft Vogels als tip. “Een eenpitter die de uitstraling wil hebben van een gerenommeerd administratiekantoor, kan het best kiezen voor grijs en blauw en schreefletters. Maar ben je een groot administratiekantoor en wil je juist persoonlijk en kleinschalig overkomen, dan zou ik de schreefletter achterwege laten en kiezen voor warme kleuren en een foto van de eigenaar.”

Voor een geloofwaardige uitstraling, moet er uiteraard geen grote mismatch zijn tussen het logo en de identiteit van het website. McDonald’s veranderde negen jaar geleden voor Europese vestigingen de achtergrondkleur van rood naar groen, om een duurzamer en natuurlijker imago te creëren. Vogels vraagt zich echter af of dat werkt. “Bij mij niet. Het logo moet goed aansluiten bij het website.”

3. Een logo staat niet op zichzelf

Een logo staat nooit op zichzelf, maar is onderdeel van een huisstijl, benadrukt Vogels. “Alles moet kloppen en bij elkaar passen: de kleuren, lay-out, sfeer en het beeldgebruik.”

Een mooi voorbeeld vindt hij KPN, die de groene kleur in alle uitingen consequent doorvoert. “Die kleur is heel herkenbaar. Het loopt bijvoorbeeld ook door in foto’s in advertenties en op de website.” Ook het lettertype van Philips is herkenbaar. “Als er een typefout in zou staan, zou dat niemand opvallen.”

4. Maak je logo flexibel

Een logo wordt vaak in verschillende uitingen gebruikt: visitekaartjes, de website, briefpapier, relatiegeschenken en social media. Houd hier rekening mee bij de vorm, de kleur en het lettertype.

Vogels adviseert daarom om een zo compact mogelijk logo te laten ontwerpen, zodat het overal bruikbaar is. “Het is bijvoorbeeld mooi als het logo in het vierkante icoontje op de Facebookpagina van je website past.”

5. …en tijdloos

Om de twee jaar je logo veranderen is niet alleen kostbaar, maar gaat ook ten koste van de herkenbaarheid van je website. Zorg er daarom voor dat je logo tijdloos is, adviseert Vogels.

Misschien wel het meest tijdloze logo is dat van Stella Artois; volgens het Amerikaanse Time Magazine het oudste logo ter wereld. De bekende hoorn dateert al uit 1366 en verwijst naar de herberg-brouwerij Den Hoorn, die toen in de stad Leuven stond.

6. Beter goed gejat

Voor een goed ontwerp kun je ook inspiratie putten bij grote bedrijven. Een van de meest iconische logo’s is de gele M van McDonalds tegen een – van oorsprong – rode achtergrond. Het kleurgebruik is een bewuste keuze. Geel staat voor snelheid, blijdschap en dynamiek, terwijl rood een warm gevoel en eetlust opwekt. Beide kleuren zijn bovendien van grote afstand zichtbaar en trekken de aandacht.

Dezelfde kleuren vind je terug in de schelp van Shell. Dit plaatje herinnert aan de oorsprong van het website: een handelshuis dat handelde in Japanse sierschelpen. Het eerste logo was een mosselschelp, maar na enkele jaren veranderde dat in de bekende sint-jakobsschelp.

De gele en rode kleuren ontstonden toen het concern zijn eerste tankstation bouwde, in Californië en van veraf zichtbaar wilde zijn. Rood en geel zijn bovendien de kleuren van de Spaanse vlag; een verwijzing naar de sterke banden van Californië met Spanje.

En wat te denken van de Playboy-bunny? Dit logo is een eigen leven gaan leiden. Ook als de naam wordt weggelaten, weet het publiek meteen om welk merk het gaat.
Dit logo is ontworpen door Art Paul, die onlangs is overleden. Hij zei ooit dat de keuze destijds viel op een konijn vanwege de humoristische seksuele associatie: iedereen weet immers waar konijntjes om bekend staan. Het moest ook onderscheidend zijn, omdat andere mannentijdschriften een man als symbool gebruikten.

7. …dan zelf verzonnen

Voor het ontwerp van een logo hoef je niet per se naar een professional. Er zijn websites waar je er al voor twee tientjes een kunt maken. Je selecteert een kleur en lettertype en maakt een keuze uit een serie ontwerpen. Ook kun je via sommige opmaakprogramma’s zelf een logo in elkaar fröbelen.

Bedenk wel dat het geen persoonlijk en uniek ontwerp is en dat de kans groot is dat het logo niet bij het website past. “Soms is duidelijk te zien dat het logo door een leek is ontworpen. Het logo mist een balans en er is gekozen voor een niet-zakelijk lettertype, zoals Comic Sans”, zegt Vogels. “Hierdoor kun je onprofessioneel overkomen. Dat is precies wat je als ondernemer níet wil.”

Bron: https://www.businessinsider.nl/waaraan-moet-een-goed-logo-voldoen-let-op-deze-7-punten/

Opdracht 4
Ontwerp je eigen logo voor je website. Hoe je dit doet is aan jou, op papier of via Paint of via een ander (teken)programma.
Eisen aan het ontwerp van je logo:

zorg dat het voldoet aan tenminste 3 kenmerken van een goed logo
zorg dat het logo leesbaar en duidelijk is
zorg dat je logo origineel is

Opdracht 5

Schrijf in een aantal zinnen op waarom je dit logo hebt ontworpen, waarom dit logo zo goed bij jou past of bij jouw website?

Opdracht 6

Presenteer jouw logo aan jouw klasgenoten. Maak een pitch van maximaal 1 minuut. Tips? Zie onderstaande video.

Video maken

Je leert bij dit onderdeel een video maken met behulp van Microsoft Foto's. Dit is een programma om video's mee te maken en te bewerken. Je leert o.a. hoe je door middel van afbeeldingen en (korte) video's een nieuwe video kan maken met Microsoft Foto's. Ook ga je zelf aan de slag met het programma en maak je een eigen video over jezelf voor jouw website!

Microsoft Foto's

Leerdoelen:

Na deze uitleg:

Weet je hoe je door middel van afbeeldingen en (korte) video's een nieuwe video kan maken met Microsoft Foto's;
Weet je hoe je muziek kan toevoegen aan je video.

Je kan op verschillende manieren en met verschillende app's video's maken. Vandaag gaan we aan de slag met Microsoft Foto's. Met dit programma is het mogelijk video's te maken. Om te werken met dit programma moet je een aantal stappen doorlopen:

Download het programma Microsoft Foto's via de volgende link https://www.microsoft.com/nl-nl/p/microsoft-photos/9wzdncrfjbh4?rtc=1&activetab=pivot:overviewtab
Bekijk de informatie van de link ''Werken met Microsoft Foto's"
Bekijk onderstaande video "Taalstaal 9: Een video maken met Windows Foto's".

Werken met Microsoft Foto's

Video maken met Microsoft Foto's

Maak je eigen video

Een nieuwe video maken met Microsoft Foto's

Als je een nieuwe video wilt maken die je van begin tot einde kunt bewerken, klik je op Nieuwe video en kies je voor Nieuw videoproject. Geef je video een passende naam.

Video maken met Microsoft foto's.

Vervolgens kom je op onderstaande pagina uit. Op deze pagina kan je foto's en video's toevoegen vanaf je computer, maar ook vanuit de cloud. Je doet dit via de knop Toevoegen in het onderdeel projectbibliotheek. Hieronder volgt nog meer informatie over de speciale effecten die je kan toevoegen aan je video.

Uiterlijk van foto of video aanpassen

Je kan het uiterlijk van elke foto of videoclip die je hebt geselecteerd wijzigen door deze onderaan (in het storyboard) te selecteren en vervolgens een knop te kiezen zoals Filters, Tekst of Beweging. Als je een thema wilt toepassen waarmee filters, muziek, tekststijl en beweging voor de hele video tegelijk worden gewijzigd, selecteer je Thema's (via de drie bolletjes rechtsboven).

Muziek toevoegen
Als je de muziek voor de hele video wilt toevoegen of wijzigen, selecteer je Achtergrondmuziek boven in het scherm. Als je een van de aanbevolen nummers kiest, wordt de muziek wordt automatisch aangepast aan de lengte van je video. Kies je voor Aangepaste audio, moet je de audio zelf goed laten aansluiten op de video.

3D-effecten toevoegen
Als je een (korte) video hebt opgenomen als onderdeel van je project, kun je hier 3D-effecten aan toevoegen (zoals een bliksemschicht, sterretjes of vlinders die door het tafereel fladderen). Hiertoe selecteer je het videobestand in het storyboard, selecteer je 3D-effecten en selecteer je vervolgens het effect dat je wilt toevoegen. Sleep de randen van het effect om de grootte en positie ervan aan te passen.

Video inkorten

Selecteer de video in het storyboard, selecteer Knippen, sleep de witte rondjes naar waar je de video wilt laten starten en eindigen en klik vervolgens op Gereed.

Je video delen/opslaan
Als je klaar bent met het maken van je video en klaar bent om deze te gaan delen (bijvoorbeeld op je website), selecteer je Video voltooien. Kies een bestandsgrootte en klik op Exporteren. Let er op dat je jouw video opslaat in de cloud (en niet op de laptop van school).

(bron: https://support.microsoft.com/nl-nl/help/17205/windows-10-create-videos)

Opdracht 1:

Zoek 5 afbeeldingen op het internet die iets met elkaar te maken hebben. Maak hiermee een korte video met Microsoft Foto's. Zorg ervoor dat je de afbeeldingen, het videoproject en de video in de cloud opslaat (OneDrive, Google Drive, e.d.).

Opdracht 2:

Bereid het maken van jouw eigen video goed voor.

Bedenk een thema voor jouw eigen video (die uiteindelijk ook weer op jouw website komt).
Ga je alleen afbeeldingen gebruiken of ook korte video's? Of gebruik je één lange video, waarin je zaken gaat aanpassen? Zie ook de video "Taalstaal 9: Een video maken met Windows Foto's".
Zoek alvast afbeeldingen en video's op, of maak zelf alvast foto's of video's. Je hebt voor jouw video minimaal 10 afbeeldingen en/of video's nodig.
Zorg ervoor dat je jouw 'verzamelde' materiaal opslaat in de cloud.

Opdracht 3:
Maak een video voor jouw website. Gebruik minimaal 10 afbeeldingen en/of video's. Voorzie jouw video van achtergrondmuziek. Gebruik in je video minimaal twee bijzondere effecten zoals tekst, filters of beweging. Sla je videoproject en de video op in de cloud.

Verdieping HTML

Verdiepingsopdrachten HTML/CSS

Verdieping Creatieve app's

Je gaat je verdiepen in een creatieve app naar keuze. Wil je je logo verder vorm geven? Kies dan voor de verideping van een logo maken met Adobe Illustrator. Vind je het leuk om je meer te gaan verdiepen in het maken van een video? Kies dan voor de verdieping video maken emt Adobe Premiere.

verdieping logo maken met Adobe Illustrator

- Je leert werken met Adobe Illustrator

- Je kunt de basis van het logo opzetten.

- Je kunt het logo van details voorzien.

Je gaat vandaag kennismaken met Adobe Illustrator. Je krijgt uitleg over Adobe illustrator en gaat vervolgens aan de slag met je eigen ontworpen logo om dit te digitaliseren met behulp van Adobe Illustrator.

Kennismaken met Adobe Illustrator

Basiscursus Adobe illustrator

Een logo ontwerpen

Een simpel logo maken met Adobe Illustrator

Eindopdracht

Je hebt uitleg gehad over een logo maken met Adobe Illustrator. Je hebt geleerd waaraan een goed logo moet voldoen (zie paragraaf ''kenmerken van een goed logo''). Tevens heb je een logo ontworpen. Dit ontworpen logo ga je nu verder vorm geven en je gaat het logo verder digitaliseren. Bij het logo digitaliseren is het belangrijk dat je de volgende zaken gaat toepassen in je logo. Zorg dat je logo aan de volgende eisen voldoet:

Zorg voor belijningen (en diktes daarvan)
Zorg voor verschillend kleurgebruik
Maak gebruik van zowel tekst als vorm
Zorg voor een goede afwerking van je logo (denk aan evt schaduw, spiegeling e.d)

Verdieping iMovie vaardigheden. (Greenscreen, splitscreen, beeld in beeld etc.)

Door deze verrijkingsopdracht te doen, ontwikkel je deze vaardigheden binnen de app iMovie:

- Werken met een greenscreen effects (chrome key)

- Twee schermen tegelijk (split screen)

- Beeld in beeld (picture in picture)

- Audiomanagement (muziek, voice over, muten van video's)

- Basistools (knippen, overgangen, titels toevoegen/bewerken, snelheid aanpassen)

Opdracht 1

Bekijk dit korte introfilmpje van meneer Withaar! Wil jij dit ook kunnen in iMovie? Kies dan deze verrijkingsopdracht.

Opdracht 2

Voordat je start met het maken van een film ga je nadenken over het onderwerp van je filmpje. Je mag zelf een onderwerp kiezen Houd hierbi jin je achterhofod dat de video uiteindelijk op de website wordt geplaatst. Vul je mindmap verder in en laat deze controleren door je docent.
a. Maak op papier een mindmap met in het midden van je mindmap het gekozen onderwerp.

b. Maak een script voor je video en let op de volgende elementen:
- Wat wil je wanneer laten zien?
- Welke overgangen en effeten wil je gebruiken?
- Welke tekst moet in beeld komen?
- Welke audio moet in beeld komen?
- Ga je gesproken tekst gebruiken?

Je script laat je goedkeuren door je docent. Na goedkeuring kun je starten met het produceren van jouw video.

Opdracht 3
Met de app iMovie, die standaard geinstalleerd staat op Apple apparaten, kun je steeds meer. Meneer Withaar neemt je bij deze opdracht mee door wat mogelijkheden die de App biedt. Vervolgens kun je ermee aan de slag en mag je de vrijheid nemen om een eigen filmpje te maken waarbij je de bovenstaande vaardigheden probeert toe te passen in iMovie. Wat het thema en de inhoud van dit filmpje is, mag je helemaal zelf weten! Doorloop voor deze opdracht onderstaande stappen.

Stap 1: Al het materiaal dat je wil gebruiken verzamelen/opnemen

Als je een film gaat bewerken, heb je natuurlijk beeldmateriaal nodig. Je kan op de volgende manieren beeldmateriaal verzamelen op je iPad:

- Afbeeldingen downloaden

- Met de camera foto's/video's maken (Let op: houd je iPad altijd horizontaal!)

- Screen record (scherm opnemen) van je iPad

Als je greenscreeneffecten toe wil passen kun je:

- Foto's of video's maken terwijl je voor een greenscreen (groen vlak) staat (Let op: houd je iPad altijd horizontaal!)

- Screen record van je iPad van greenscreen materiaal (Youtube bijvoorbeeld)

Bekijk hieronder het uitlegfilmpje van de laatste laatste optie:

Vaardigheid 1: Splitscreen

Als je de app gebruikt kun je video's toevoegen. Dit heb je vast al eens gedaan. Het is lastiger om twee beelden tegelijk af te laten spelen naast elkaar. Dit kun je door jezelf de vaardigheid splitscreen aan te leren.

Stap 1: Bekijk het uitlegfilmpje hieronder

Stap 2: Maak met je camera twee even lange video's die je naast elkaar af wil spelen.

Stap 3: Probeer een splitscreenfilmpje te maken

Vaardigheid 2: Beeld in beeld

Bij nieuwsuitzendingen zie je vaak dat er een kleine video in beeld verschijnt. Een video in een video dus, of een beeld in een beeld. Leer deze vaardigheid jezelf weer aan. De uitleg is wel wat korter, aangezien meneer ervan uitgaat dat je al weet hoe je een lege film op moet starten.

Stap 1: Bekijk het uitlegfilmpje hieronder

Stap 2: Maak een filmpje waarbij je een nieuwsbericht aan het voorlezen bent. Screenrecord een filmpje van Youtube wat bij het nieuwsbericht hoort.

Stap 3: Maak een beeld in beeld filmpje.

Vaardigheid 3: Greenscreen, audio en overgangen

Bij deze vaardigheid leer je greenscreeneffecten toe te passen en gaat meneer Withaar iets complexer videobewerken. In het introfilmpje zag je een haai, dino op het schoolplein en meneer Withaar voor een vulkaan wat vertellen, terwijl de vulkaan op de achtergrond aan het uitbarsten was.

Stap 1: Bekijk het workshopfilmpje hieronder.

Stap 2: Neem greenscreenmateriaal op van Youtube of maak je eigen filmpje voor het greenscreen in school.

Stap 3: Probeer de vaardigheden uit het filmpje in de praktijk toe te passen.

Vaardigheid 4: Hoe krijg ik mijn iMovie video verstuurd.

Bij deze vaardigheid leer je hoe je makkelijk het filmpje gedeeld krijgt.

Het is het makkelijkste om filmpjes te uploaden op je eigen Youtube account. Je kan inloggen bij Youtube met een google/gmail account. Heb je al zo'n account? Log daar dan mee in op Youtube. Heb je nog geen Google-account? Maak er dan hier een aan: Google account aanmaken

Youtube heeft drie opties.

1) Privé - Dit betekent dat het filmpje alleen zichtbaar is als je ingelogd bent met jouw account.

2) Verborgen - Dit betekent dat het filmpje niet zoekbaar is, maar alleen met de link te bekijken. Dit is de beste optie om een filmpje in te leveren bij je docent. Je deelt/kopieert de link en stuurt deze op. Hierdoor ben je dus niet zichtbaar op Youtube en krijg je geen privacyproblemen.

3) Openbaar - Dit betekent dat het filmpje voor iedereen te vinden en te bekijken is op Youtube. Dit zorgt ervoor dat de hele wereld je filmpje dus kan bekijken. Denk goed na of je dit wel wil, voordat je je filmpje op openbaar zet!

Stap 1: Bekijk het onderstaande fimpje waarin je uitgelegd krijgt hoe je makkelijk met iMovie je filmpje op Youtube plaatst.

Stap 2: Upload als je een product het gemaakt het filmpje op Youtube.

Vaardigheid 5: Plaat je filmpje op je eigen website.

In de paragraaf HTML heb je een eigen website gebouwd. Het is nu de bedeling dat je je eigen gemaakte filmpje van YouTube op jouw eigen website zet.

Het arrangement Bouw je eigen website is gemaakt met Wikiwijs van Kennisnet. Wikiwijs is hét onderwijsplatform waar je leermiddelen zoekt, maakt en deelt.

Auteur: IT College
Laatst gewijzigd: 25-05-2021 13:41:52
Licentie: Dit lesmateriaal is gepubliceerd onder de Creative Commons Naamsvermelding 4.0 Internationale licentie. Dit houdt in dat je onder de voorwaarde van naamsvermelding vrij bent om:

het werk te delen - te kopiëren, te verspreiden en door te geven via elk medium of bestandsformaat

het werk te bewerken - te remixen, te veranderen en afgeleide werken te maken

voor alle doeleinden, inclusief commerciële doeleinden.

Meer informatie over de CC Naamsvermelding 4.0 Internationale licentie.

Aanvullende informatie over dit lesmateriaal

Van dit lesmateriaal is de volgende aanvullende informatie beschikbaar:

Eindgebruiker: leerling/student
Moeilijkheidsgraad: gemiddeld
Studiebelasting: 4 uur 0 minuten

Bronnen

Bron	Type
Werken met Microsoft Foto's https://www.microsoft.com/nl-nl/windows/photo-movie-editor	Link
Video maken met Microsoft Foto's https://youtu.be/B9K1zYUYjKY	Video
Kennismaken met Adobe Illustrator https://helpx.adobe.com/nl/illustrator/how-to/ai-basics-fundamentals.html	Link
Basiscursus Adobe illustrator https://www.youtube.com/watch?v=YwWBy0eTlDQ	Video
Een logo ontwerpen https://helpx.adobe.com/nl/illustrator/how-to/logo-design.html	Link
Een simpel logo maken met Adobe Illustrator https://www.youtube.com/watch?v=BHyzmAmkC9k&t=219s	Video

Download
Downloaden

Het volledige arrangement is in de onderstaande formaten te downloaden.

pdf

json

IMSCP package

Metadata

Metadata overzicht (Excel)

LTI

Leeromgevingen die gebruik maken van LTI kunnen Wikiwijs arrangementen en toetsen afspelen en resultaten terugkoppelen. Hiervoor moet de leeromgeving wel bij Wikiwijs aangemeld zijn. Wil je gebruik maken van de LTI koppeling? Meld je aan via info@wikiwijs.nl met het verzoek om een LTI koppeling aan te gaan.

Maak je al gebruik van LTI? Gebruik dan de onderstaande Launch URL’s.

Arrangement

IMSCC package

Wil je de Launch URL’s niet los kopiëren, maar in één keer downloaden? Download dan de IMSCC package.

IMSCC package

Voor developers

Wikiwijs lesmateriaal kan worden gebruikt in een externe leeromgeving. Er kunnen koppelingen worden gemaakt en het lesmateriaal kan op verschillende manieren worden geëxporteerd. Meer informatie hierover kun je vinden op onze Developers Wiki.
Sluiten
Wikiwijs is een dienst van

Inleiding

Website, webpagina en homepage?

Wat is HTML?

Repl.it account

Ontwerp van een webpagina

Aan de slag met HTML

Basisstructuur HTML

Tekst toevoegen aan website

Afbeeldingen toevoegen

YouTube-video toevoegen

Links toevoegen

Layout aanpassen

Logo ontwerpen

Bekende logo's

Kenmerken van een goed logo

Video maken

Microsoft Foto's

Maak je eigen video

Verdieping HTML

Verdieping Creatieve app's

verdieping logo maken met Adobe Illustrator

Verdieping iMovie vaardigheden. (Greenscreen, splitscreen, beeld in beeld etc.)

Downloaden

Metadata

LTI

Arrangement

IMSCC package

Voor developers