HWUD04-sj2122-01-Webdev-introductie

• Communication & multimedia design
• HBO
• Studiejaar 2

Hyper Text Markup Language

de basis van elke website

het internet

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

Definitie

WWW

the World Wide Web

= de pagina's die we bezoeken als we over het internet surfen

Definitie

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. 

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

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   

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.

1. Programma code
2. Bouwstenen
3. Programmeertaal
4. Afbeeldingen en tekst

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

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.

Met welke taal geef je een website structuur en inhoud?

1. HTML
2. CSS
3. Javascript
4. Python

Met welke taal verander je het uiterlijk van een site (net als een skin)

1. HTML
2. CSS
3. Javascript
4. Python

Met welke taal zorg je dat er een bedankt-bericht verschijnt als je een formulier vestuurt?

1. HTML
2. CSS
3. Javascript
4. Python

Verbind de afbeeldingen met de programmeertalen waarmee je ze associeert

Dit moet een RC-auto voorstellen die daadwerkelijk kan rijden.

Wat betekent de afkorting HTML?

1. Hyper Text Makeup Language
2. Hyper Text Markup Language
3. Hyper Tech Markup Language
4. Hyper Tag Markup Language

HTML-documenten schrijf je in een tekst-editor. Welk programma is een tekst-editor?

1. Notepad
2. Photoshop
3. Indesign
4. Word

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?

1. Independent Development Environment
2. Integrated Development Environment
3. Independent Drawing & Editing
4. Integrated Development & Editing

wat is waar?

mijndocument.html

1. .html is de extensie
2. .html is het bestandstype
3. .html is de intentie
4. .html is het bestandsformaat

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

Met welke extensie sla je HTML-documenten op?

1. .js
2. .css
3. .html
4. .asp

Met welke extensie sla je css-documenten op?

1. .js
2. .css
3. .html
4. .asp

Met welke extensie sla je javascript-documenten op?

1. .js
2. .css
3. .html
4. .asp

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

index
pagina

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?

1. home.html
2. index.html
3. anyname.html (dat wisselt)
4. myurl.html (de home-pagina is vernoemd naar de URL)

Moet je HTML, CSS en javascript in apparte documenten opslaan?

1. Nee
2. Ja

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.

Mag je HTML, CSS en javascript in apparte documenten opslaan?

1. Nee
2. Ja

Hoe vond jij deze LessonUP?

😒🙁😐🙂😃

Hoe zou je meer willen leren over de onderwerpen die je nog niet goed begrijpt?

1. Klassikale uitleg
2. LessonUps
3. Online Documentatie
4. Uitleg in een Reader

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

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