HWUD04-sj2122-01-Webdev-introductie

Hyper Text Markup Language
de basis van elke website
1 / 30
next
Slide 1: Slide
Communication & multimedia designHBOStudiejaar 2

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

Items in this lesson

Hyper Text Markup Language
de basis van elke website

Slide 1 - Slide

het internet
= het netwerk van kabels en computers waar het web op is opgeslagen en waarover data wereldwijd wordt doorgestuurd en opgevraagd.
Definitie

Slide 2 - Slide

WWW
the World Wide Web
= de pagina's die we bezoeken als we over het internet surfen
Definitie

Slide 3 - Slide

HTML
HTML is de taal waar het internet uit bestaat. Zonder HTML geen internet. Omdat internet nu en in de toekomst heel belangrijk is voor massa-communicatie (media), is het super relevant voor GMD'ers om HTML te kunnen.

Met HTML kun je websites en web-apps bouwen. 

Slide 4 - Slide

website
Deze pagina toont een website met links naar web-apps. 

Een website heeft vooral statische inhoud (content): afbeeldingen, tekst en video's die niet vaak vervangen worden. De bezoeker kan vooral kijken en lezen: https://www.geologievannederland.nl/

Een statische website kun je goed met alleen HTML en CSS maken.
i
web-apps
We spreken van web-applicaties als er interactie met een een web-pagina mogelijk is. Zo kun je in dit voorbeeld zelf kiezen op welke locatie je een dwarsdoorsnede wil laten maken:
https://www.geologievannederland.nl/dwarsdoorsnede

Om web-apps te maken heb je naast HTML minstens ook javascript nodig en soms nog andere talen. 
>
GMD
Van een GMD'er wordt verwacht dat hij/zij websites kan ontwerpen en onderhouden. Je draagt bij aan het ontwerpproces, het kiezen van layouts en het opstellen en onderhouden van de inhoud. Om dit goed te kunnen doen moet je HTML kennen. 

GMD'ers die dit leuk vinden kunnen uiteindelijk ook zelf websites en web-apps bouwen en doen dat bijvoorbeeld voor hun afstuderen in de Geo-ICT of Design specialisaties.

G

Slide 5 - Slide

HTML
HTML is de computertaal waarin de structuur van webpagina's gecodeerd wordt. HTML vertelt de browser ook hoe en welke inhoud getoond moet worden, zoals afbeeldingen, links en tekst.
Met HTML kun je ook tekst opmaken, bijvoorbeeld
dikgedrukte, scheve, of onderstreepte tekst en koppen   

Slide 6 - Slide

Waaruit bestaat een website?
(kies er 2)
HTML is een programmeertaal, maar wel een beperkte, omdat het vooral bedoeld is voor het opmaken van tekst en webpagina's. 
HTML-pagina's zijn dus geschreven in HTML en bestaan dus uit programma-code waarmee je onder andere tekst en afbeeldingen op de juiste plek op de pagina kunt plaatsen.
A
Programma code
B
Bouwstenen
C
Programmeertaal
D
Afbeeldingen en tekst

Slide 7 - Quiz

Dit is het logo van de Code-Editor Visual Studio. Dit kun je dus gebruiken om een website te bouwen. Het is niet het logo van een programmeertaal.
wat zijn de 3 belangrijkste programmeertalen die gebruikt worden bij Web Development?
Javascript wordt gebruikt om interactie en dynamiek aan je website toe te voegen. Het is een programmeertaal waar je heel veel mee kan en het is tegenwoordig essentieel voor de werking van de meeste websites. 
Javascript wordt in de browser uitgevoerd.
Ook PHP is een veelgebruikte programmeertaal voor Webdevelopment, maar het is essentieel. PHP wordt op de Server uitgevoerd. Alleen het resultaat wordt naar de browser gestuurd.
HTML is een programmeertaal die fundamenteel is voor het maken van webpagina's. Hiermee voeg je zowel zichtbare als onzichtbare inhoud toe aan een website. 
Python is een veelgebruikte programmeertaal voor zowel web development als hele andere applicaties. Python wordt op de server uitgevoerd, net als PHP. Je zou het goed kunnen laten samenwerken met Javascript. 
Ook CSS is een programmeertaal die fundamenteel is voor het maken van webpagina's. Hiermee voeg je stijl toe. Je verandert kleurtjes en lettertypes, alsof je een website een ander jasje of een andere skin aantrekt. 
Microsoft Word is een Word-processor, of tekst-editor. Het is niet geschikt om programmacode mee te schrijven.
SQL is een taal waarmee je databases kunt bevragen. Veel websites bewaren hun inhoud in databases, dus het wordt wel veel gebruikt bij het maken van websites, maar eenvoudige websites hebben geen database nodig. Het is dus niet één van de 3 talen die we hier bedoelen.
Plaats de cirkels over 3 logo's

Slide 8 - Drag question

HTML gebruik je om een website structuur en inhoud te geven en een beetje opmaak. 

Met opmaak bedoelen we dat je bijvoorbeeld dikgedrukte tekst kunt maken, scheve tekst, of grote en kleine koppen.

Met inhoud bedoelen we dat je tekst, afbeeldingen en andere inhoud aan de pagina kunt toevoegen.

Met Structuur bedoelen we dat er elementen zijn die helpen om de inhoud op de juiste plek op de pagina te plaatsen. Bijvoorbeeld bovenin, of onderin, of links of rechts op de pagina. 
CSS is de taal waarmee je stijl aan een web-pagina kan toevoegen. Kleuren, lettertypes, marges en nog veel meer kun je definiëren via de CSS. CSS is als een skin. Je kunt dezelfde pagina met CSS een totaal ander uiterlijk geven.
Javascript is de taal die interactie en dynamiek aan websites toevoegt. 
Javascript zorgt ervoor dat een formulier verstuurd wordt, informatie verwerkt, je wachtwoord gecontroleerd, je winkelwagen gevuld, je betaling slaagt etc. Zonder Javascript zouden websites als boeken zijn - je zou ze kunnen lezen, maar verder niks.

Slide 9 - Slide

Met welke taal geef je een website structuur en inhoud?
A
HTML
B
CSS
C
Javascript
D
Python

Slide 10 - Quiz

Met welke taal verander je het uiterlijk van een site (net als een skin)
A
HTML
B
CSS
C
Javascript
D
Python

Slide 11 - Quiz

Met welke taal zorg je dat er een bedankt-bericht verschijnt als je een formulier vestuurt?
A
HTML
B
CSS
C
Javascript
D
Python

Slide 12 - Quiz

Verbind de afbeeldingen met de programmeertalen waarmee je ze associeert
Dit moet een RC-auto voorstellen die daadwerkelijk kan rijden.

Slide 13 - Drag question

Wat betekent de afkorting HTML?
A
Hyper Text Makeup Language
B
Hyper Text Markup Language
C
Hyper Tech Markup Language
D
Hyper Tag Markup Language

Slide 14 - Quiz

HTML-documenten schrijf je in een tekst-editor. Welk programma is een tekst-editor?
A
Notepad
B
Photoshop
C
Indesign
D
Word

Slide 15 - Quiz


een IDE kan veel meer dan een tekst-editor. Het biedt een geïntegreerde omgeving waarin een programmeur zijn apps kan ontwikkelen

Waar staat IDE voor?
A
Independent Development Environment
B
Integrated Development Environment
C
Independent Drawing & Editing
D
Integrated Development & Editing

Slide 16 - Quiz

wat is waar?
mijndocument.html
A
.html is de extensie
B
.html is het bestandstype
C
.html is de intentie
D
.html is het bestandsformaat

Slide 17 - Quiz

Wat is waar over de extensie?
De extensie vertelt de Operating-System (OS) welke software gebruikt moet worden om het bestand correct weer te geven.
De extensie vertelt ons om welk type bestand het gaat.
Waar
Waar

Slide 18 - Slide

Met welke extensie sla je HTML-documenten op?
A
.js
B
.css
C
.html
D
.asp

Slide 19 - Quiz

Met welke extensie sla je css-documenten op?
A
.js
B
.css
C
.html
D
.asp

Slide 20 - Quiz

Met welke extensie sla je javascript-documenten op?
A
.js
B
.css
C
.html
D
.asp

Slide 21 - Quiz

Vul de volgende bestandsnamen aan zodat de documenten worden opgeslagen als HTML-documenten:

index
pagina

Slide 22 - Open question


URLs verwijzen eigenlijk naar een map of bestand op een server. Als naar een map verwezen wordt, wordt automatisch index.html geopend. 

Wat is de bestandsnaam van de meeste HOME-pages?
A
home.html
B
index.html
C
anyname.html (dat wisselt)
D
myurl.html (de home-pagina is vernoemd naar de URL)

Slide 23 - Quiz



Moet je HTML, CSS en javascript in apparte documenten opslaan?
A
Nee
B
Ja

Slide 24 - Quiz

HTML, CSS en Javascript
zijn nauw aan elkaar verwant - ze kunnen samen, vervlochten, in een HTML-document voorkomen, of in snippets Javascript en CSS. Mettertijd leer je wel te herkennen of een stuk code uit HTML, CSS of Javascript bestaat.

Slide 25 - Slide


Mag je HTML, CSS en javascript in apparte documenten opslaan?
A
Nee
B
Ja

Slide 26 - Quiz

Hoe vond jij deze LessonUP?
😒🙁😐🙂😃

Slide 27 - Poll

Hoe zou je meer willen leren over de onderwerpen die je nog niet goed begrijpt?
A
Klassikale uitleg
B
LessonUps
C
Online Documentatie
D
Uitleg in een Reader

Slide 28 - Quiz

Hoe zouden we deze Lesson-UP nog beter kunnen maken?

Slide 29 - Open question

Zijn er nog andere onderwerpen waar je meer uitleg over wil, of andere manieren waarop je meer over een onderwerp zou willen leren?

Slide 30 - Open question