Wat is LessonUp
Zoeken
Kanalen
Inloggen
Registreren
‹
Terug naar zoeken
Les1 - HTML101
HTML
1 / 25
volgende
Slide 1:
Tekstslide
Applicatie- en mediaontwikkelaar
MBO
Studiejaar 1
In deze les zitten
25 slides
, met
interactieve quizzen
en
tekstslides
.
Start les
Bewaar
Deel
Printen
Onderdelen in deze les
HTML
Slide 1 - Tekstslide
Hoe staan we ervoor vandaag?
😒
🙁
😐
🙂
😃
Slide 2 - Poll
Leerdoel
Vertrouwd raken met de fundamentele principes van HTML
Slide 3 - Tekstslide
Inhoud
Werkwijze
Tools
Tags
Structuur
Link Tags
Oefening
Slide 4 - Tekstslide
Werkwijze
Map/Directory Html aanmaken
Brackets/Notepad
Documentatie:
www.w3schools.com/
Charset:
عربيّة, Ελληνικά, abcdefg
Bestandsnamen
:
- gebruik extensie: .html
- geen hoofdletters
- index.html
- geen spaties
- over_ons.html
Slide 5 - Tekstslide
Slide 6 - Tekstslide
Tools of the trade
Integrated Development Environment (eigen keuze)
Brackets, Notepad++ (gratis)
Code validator : http://validator.w3.org
Slide 7 - Tekstslide
Code Along!
Slide 8 - Tekstslide
Tags!
De basis van elke website!
Tags: code om de tekst te structureren of vorm te geven
1. Open tags:
<br />
of
<hr />
2. Container tags:
<p>
paragraaf
</p>
<h1>
titeltje
</h1>
Open
Open
Sluiten
Sluiten
Slide 9 - Tekstslide
Slide 10 - Tekstslide
Structuur
Typische opbouw van een pagina
Slide 11 - Tekstslide
Code geldig maken
Pagina die je hebt gemaakt valideren op:
http://validator.w3.org/
Slide 12 - Tekstslide
Pagina is niet geldig!
Slide 13 - Tekstslide
Attributen
Alle HTML tags kunnen ze bevatten
Alle attributen moeten in de openingstag
Attributen bestaan voornamelijk uit naam en waarde combinaties
Naam van attribute in klein letters
Waarde tussen aanhalingstekens " hoi "
Slide 14 - Tekstslide
Encoding
Om een Html pagina correct te kunnen weergeven,
moet je aangeven welke character set gebruikt moet worden
Met de
<meta>
tag kan je de character set aangeven
(Character sets)
HTML5 gebruikt UTF-8
<meta charset="UTF-8">
Slide 15 - Tekstslide
HTML <!DOCTYPE> Declaration
De browser moet weten wat voor document het aan het lezen is.
Alle html documenten beginnen met:
Dit is geen html tag!
<!DOCTYPE html>
Slide 16 - Tekstslide
Welke is een container tag?
A
<h1/>
B
(h1) (h1)
C
{h1/ h2/}
D
<h1> </h1>
Slide 17 - Quizvraag
Welke tag(s) kunnen Attributen bevatten?
A
Alleen Open Tags
B
Alle tags
C
Alleen 1 tag per structuur
D
Geen enkele tags
Slide 18 - Quizvraag
Welke Encoding gebruikt HTML5
UTF-8
UTF-5
ITF-8
Slide 19 - Poll
Link tags
-
Absolute koppeling
(verwijzen naar een vast adres)
<a
href
=“https://www.youtube.com”>Let's watch some clips!</a>
-
Relatieve koppeling
(Geeft de bestandnaam en de mapverwijzing)
<a
href
=“profiel.html”>naar mijn profiel</a>
Attribute
Waarde
Slide 20 - Tekstslide
Interne koppeling
Ankers
<p id="goingUp"> this side up </p>
<a href="#goingUp "> Back to top </a>
Slide 21 - Tekstslide
Afbeelding
Tag:
<img/>
<img src="images/spiderman_cover.jpg"/>
Attribute:
source (waar de file te vinden is)
Slide 22 - Tekstslide
Opdracht: Maak een 2 pagina website
Maak een Mappen structuur aan
Maak een index.html bestand
Let op de structuur van je code
Maak gebruik van de verschillende koppelingen
Maak gebruik van een image
Nog meer info en tags op :
www.w3schools.com/
Valideer je pagina! ( http://validator.w3.org/)
Slide 23 - Tekstslide
Recap
-Werkwijze
-Tools
-Tags
-Structuur
Slide 24 - Tekstslide
Bronnen
Webdesign P58: Opdracht1
w3schools.com/html/html_intro.asp
w3schools.com/html/html_basic.asp
w3schools.com/html/html_elements.asp
w3schools.com/html/html_attributes.asp
Slide 25 - Tekstslide
Meer lessen zoals deze
HTML101
September 2022
- Les met
22 slides
Applicatie- en mediaontwikkelaar
MBO
Studiejaar 1
04 - HTML - head body
Januari 2024
- Les met
13 slides
ICT
MBO
Studiejaar 1-4
PLOH05 - 02 - HTML - Syntax Oefening
Maart 2021
- Les met
46 slides
Communication & multimedia design
HBO
Studiejaar 1
HWUD04-sj2122-03-HTML-document
Februari 2021
- Les met
31 slides
Communication & multimedia design
HBO
Studiejaar 2
WEEK 2 - INFORMATICA
November 2023
- Les met
32 slides
Informatica
Middelbare school
havo
Leerjaar 4
1. HTML-Basics
September 2022
- Les met
18 slides
Software Developer
MBO
Studiejaar 1
01 - HTML - intro
Januari 2024
- Les met
11 slides
ICT
MBO
Studiejaar 1-4
bkup 03-HTML-document
December 2021
- Les met
37 slides
Communication & multimedia design
HBO
Studiejaar 2