What is LessonUp
Search
Channels
Log in
Register
‹
Return to search
HTML101
HTML
1 / 22
next
Slide 1:
Slide
Applicatie- en mediaontwikkelaar
MBO
Studiejaar 1
This lesson contains
22 slides
, with
interactive quizzes
and
text slides
.
Start lesson
Save
Share
Print lesson
Items in this lesson
HTML
Slide 1 - Slide
Inhoud
Werkwijze
Tools
Tags
Structuur
Link Tags
Oefening
Slide 2 - Slide
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 3 - Slide
Slide 4 - Slide
Tools of the trade
Integrated Development Environment (eigen keuze)
Brackets, Notepad++ (gratis)
Code validator : http://validator.w3.org
Slide 5 - Slide
Code Along!
Slide 6 - Slide
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 7 - Slide
Slide 8 - Slide
Structuur
Typische opbouw van een pagina
Slide 9 - Slide
Code geldig maken
Pagina die je hebt gemaakt valideren op:
http://validator.w3.org/
Slide 10 - Slide
Pagina is niet geldig!
Slide 11 - Slide
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 12 - Slide
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 13 - Slide
HTML <!DOCTYPE> Declaration
De browser moet weten wat voor document het aan het lezen.
Alle html documenten beginnen met:
Dit is geen html tag!
<!DOCTYPE html>
Slide 14 - Slide
Welke is een container tag?
A
<h1/>
B
(h1) (h1)
C
{h1/ h2/}
D
<h1> </h1>
Slide 15 - Quiz
Welke tag(s) kunnen Attributen bevatten?
A
Alleen Open Tags
B
Alle tags
C
Alleen 1 tag per structuur
D
Geen enkele tags
Slide 16 - Quiz
Welke Encoding gebruikt HTML5
UTF-8
UTF-5
ITF-8
Slide 17 - 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 18 - Slide
Interne koppeling
Ankers
<p id="goingUp"> this side up </p>
<a href="#goingUp "> Back to top </a>
Slide 19 - Slide
Afbeelding
Tag:
<img/>
<img src="images/spiderman_cover.jpg"/>
Attribute:
source (waar de file te vinden is)
Slide 20 - Slide
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 21 - Slide
Recap
-Werkwijze
-Tools
-Tags
-Structuur
Slide 22 - Slide
More lessons like this
Les1 - HTML101
September 2024
- Lesson with
25 slides
Applicatie- en mediaontwikkelaar
MBO
Studiejaar 1
04 - HTML - head body
January 2024
- Lesson with
13 slides
ICT
MBO
Studiejaar 1-4
PLOH05 - 02 - HTML - Syntax Oefening
March 2021
- Lesson with
46 slides
Communication & multimedia design
HBO
Studiejaar 1
HWUD04-sj2122-03-HTML-document
February 2021
- Lesson with
31 slides
Communication & multimedia design
HBO
Studiejaar 2
WEEK 2 - INFORMATICA
November 2023
- Lesson with
32 slides
Informatica
Middelbare school
havo
Leerjaar 4
1. HTML-Basics
September 2022
- Lesson with
18 slides
Software Developer
MBO
Studiejaar 1
01 - HTML - intro
January 2024
- Lesson with
11 slides
ICT
MBO
Studiejaar 1-4
bkup 03-HTML-document
December 2021
- Lesson with
37 slides
Communication & multimedia design
HBO
Studiejaar 2