Qu'est-ce que LessonUp
Rechercher
Canaux
Connectez-vous
S'inscrire
‹
Revenir à la recherche
HTML101
HTML
1 / 22
suivant
Slide 1:
Diapositive
Applicatie- en mediaontwikkelaar
MBO
Studiejaar 1
Cette leçon contient
22 diapositives
, avec
quiz interactifs
et
diapositives de texte
.
Commencer la leçon
Partager
Imprimer la leçon
Éléments de cette leçon
HTML
Slide 1 - Diapositive
Inhoud
Werkwijze
Tools
Tags
Structuur
Link Tags
Oefening
Slide 2 - Diapositive
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 - Diapositive
Slide 4 - Diapositive
Tools of the trade
Integrated Development Environment (eigen keuze)
Brackets, Notepad++ (gratis)
Code validator : http://validator.w3.org
Slide 5 - Diapositive
Code Along!
Slide 6 - Diapositive
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 - Diapositive
Slide 8 - Diapositive
Structuur
Typische opbouw van een pagina
Slide 9 - Diapositive
Code geldig maken
Pagina die je hebt gemaakt valideren op:
http://validator.w3.org/
Slide 10 - Diapositive
Pagina is niet geldig!
Slide 11 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Sondage
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 - Diapositive
Interne koppeling
Ankers
<p id="goingUp"> this side up </p>
<a href="#goingUp "> Back to top </a>
Slide 19 - Diapositive
Afbeelding
Tag:
<img/>
<img src="images/spiderman_cover.jpg"/>
Attribute:
source (waar de file te vinden is)
Slide 20 - Diapositive
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 - Diapositive
Recap
-Werkwijze
-Tools
-Tags
-Structuur
Slide 22 - Diapositive
Plus de leçons comme celle-ci
Les1 - HTML101
Septembre 2024
- Leçon avec
25 diapositives
Applicatie- en mediaontwikkelaar
MBO
Studiejaar 1
04 - HTML - head body
Janvier 2024
- Leçon avec
13 diapositives
ICT
MBO
Studiejaar 1-4
PLOH05 - 02 - HTML - Syntax Oefening
Mars 2021
- Leçon avec
46 diapositives
Communication & multimedia design
HBO
Studiejaar 1
01 - HTML - intro
Janvier 2024
- Leçon avec
11 diapositives
ICT
MBO
Studiejaar 1-4
HWUD04-sj2122-03-HTML-document
Février 2021
- Leçon avec
31 diapositives
Communication & multimedia design
HBO
Studiejaar 2
Les2 - HTML - Lijsten & Structuren
Juillet 2022
- Leçon avec
18 diapositives
Applicatie- en mediaontwikkelaar
MBO
Studiejaar 1
WEEK 2 - INFORMATICA
Novembre 2023
- Leçon avec
32 diapositives
Informatica
Middelbare school
havo
Leerjaar 4
1. HTML-Basics
Février 2022
- Leçon avec
26 diapositives
Software Developer [WEB_A]
MBO
Studiejaar 1