HTML - Tags

Tags voor document-structuur

<html>

1 / 30

Slide 1: Slide

Communication & multimedia designHBOStudiejaar 1

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

Items in this lesson

Tags voor document-structuur

<html>

Slide 1 - 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 2 - Slide

Met welke taal geef je een webpagina structuur?

FTP

XML

HTML

Slide 3 - Quiz

Met welke taal kun je web-teksten opmaken?

CSS

HTML

XML

HTTP

Slide 4 - Quiz

<HTML>innerHTML</HTML>

Net als met haakjes en aanhalingstekens

Bestaat HTML uit tekens die aangeven waar

iets begint en eindigt.

De code tussen < en > noemen we tags
en samen omsluiten ze de innerHTML

HTML Syntax

Slide 5 - Slide

<html>innerHTML</html>

Een HTML-tag bestaat dus uit

1. een begin-tag

2. een eind-tag en

3. innerHTML

<html> is een voorbeeld van een start-tag.
De start-tag bestaat zelf uit een start-teken: <
een tag: html

en een eind-teken: >

De syntax van een start-tag is dus: <tag>

</html> is een voorbeeld van een eind-tag.
Ook de eind-tag bestaat uit een start-teken: <

Vervolgens komt een teken dat aangeeft dat het om een eind-teken gaat: /
Vervolgens de tag die wordt afgesloten: html

en het einde-teken van de tag: >

De syntax van een eind-tag is dus: </tag>

De innerHTML kan uit vanalles bestaan. Afbeeldingen, tekst, links en HTML. HTML kan alleen volledig in een andere HTML-tag voorkomen. ze mogen niet 'deels overlappen'. Genest mag dus wel.

Slide 6 - Slide

HTML tags die we gaan leren:

h1, h2, h3, h4, h5, h6

b, i, u, strong, em, s

Dit zijn de meest-voorkomende tags. Ze geven het HTML-document structuur (linker rijtje) of je gebruikt ze om tekst op te maken (rechter rijtje). In andere lessen zul je nog meer tags leren.

Zie ook W3schools.com

Bovenstaande tags zijn allemaal gelinkt naar een informatiepagina op W3schools. Deze website vormt een heel handig naslagwerk voor het toepassen van HTML. Steeds als je het W3-symbool ziet, bevat het een link naar W3schools.

Slide 7 - Slide

Waar zie je een volledige HTML-tag?

<p>

</p>

<p>tekst</p>

Slide 8 - Quiz

Waar zie je een start-tag?

<p>

</p>

<p>tekst</p>

Slide 9 - Quiz

Parallellen met WORD

Het lint van WORD

HTML is oorspronkelijk bedacht om tekst op te maken (in het Engels: to mark up). In de symbooltjes op het lint vind je dan ook dezelfde opties als die je met HTML hebt. Sommige dingen doe je met tags (wit). Andere met attributen of CSS (groen).

Underline - geeft onderstreepte tekst

voorbeeld:

<u>onderstreept</u>

W3schools

Sub - subscript

voorbeeld

<sub>subscript</sub>

w3schools

Sup - superscript

voorbeeld:

<sup>superscript text</sup>

W3schools

Italic- geeft scheve tekst

voorbeeld:

<i>scheef</i>

W3schools

Bold - geeft dikke tekst

voorbeeld:

W3schools

font-size - text-grootte

Met CSS kun je van HTML-tags het attribuut font-size aanpassen:

font-size: 12pxnf

W3schools

font-family

Met CSS kun je van HTML-tags het attribuut font-familyaanpassen:

font-family: Calibri

W3schools

h1 - Kop 1

voorbeeld:

W3schools

Strikethrough - geeft doorgestreepte tekst

voorbeeld:

<s>doorgestreept</s>

W3schools

h2 - Kop 2 (iets kleiner dan kop1)

voorbeeld:

W3schools

Background-color - Achtergrondkleur

Met CSS kun je van HTML-tags het attribuut background-color aanpassen:

background-color: yellow

W3schools

Color - tekst-kleur

Met CSS kun je van HTML-tags het attribuut color aanpassen:

<p style="color:red">This is a paragraph.</p>

W3schools

UL - Unordered list - ongeordende lijst

voorbeeld:

<ul>

<li>element van de lijst</li>

<li>tweede element van de lijst</li>

</ul>

W3schools

ol - ordered list - geordende lijst

voorbeeld:

<ol>

<li>element van de lijst</li>

<li>tweede element van de lijst</li>

</ol>

W3schools

text-align - tekst-uitlijning

Met CSS kun je van HTML-tags het attribuut text-alignaanpassen:

<p style="text-align:center">This is a paragraph.</p>

W3schools

table -tabel

voorbeeld:

<table>

<tr><td>tabel-cel in de eerste rij</td><td></td></tr>

</ol>

W3schools

Slide 10 - Slide

Waar zie je een eind-tag?

<p>

</p>

<p>tekst</p>

Slide 11 - Quiz

Welke is de start-tag van de html-tag?

(html)

<html>

{html}

[html]

Slide 12 - Quiz

Welke is de eind-tag van de html-tag?

<html?>

<\html>

</html>

<HTML>

Slide 13 - Quiz

Maak de start-tag voor een paragraaf-element

{

}

(

)

html

head

body

strong

sub

sup

Slide 14 - Drag question

Maak de eind-tag voor een paragraaf-element

{

}

(

)

html

head

body

strong

sub

sup

Slide 15 - Drag question

Maak van mij een paragraaf

Sleep de juiste tags naar de juiste locatie

<\p>

</p>

<p>

<p/>

<!p>

Slide 16 - Drag question

Maak van mij een html-document

Sleep de juiste tags naar de juiste locatie

<html>

</html>

</document>

<p>

</p>

Slide 17 - Drag question

Schrijf nu zelf een paragraaf-tag met als innerHTML de zin "dit is een paragraaf."

Slide 18 - Open question

Sleep de tags die de onzichtbare structuur van een HTML-document definieren naar het doel.

html

head

body

strong

sub

sup

Slide 19 - Drag question

Sleep de tags die gebruikt worden om tekst op te maken naar het doel

p b u i s em strong

html

head

body

h1 h2 h3 h4 h5 h6

sub sup

Slide 20 - Drag question

Met welke tag maak je scheve tekst?

Slide 21 - Quiz

Met welke tag zet je een titel bovenaan je pagina?

title

titel

Slide 22 - Quiz

Met welke tag maak je dikgedrukte tekst?

Slide 23 - Quiz

Wat is een andere manier om tekst scheef te drukken?

hint: scheefgedrukte tekst benadrukt meestal iets.

Het engelse woord daarvoor is emphasis

<strong>hello</strong>

<div>hello</div>

<p>hello</p>

<em>hello</em>

Slide 24 - Quiz

Welke tag vormt de buitenste HTML?

<html>

</html>

html

head

body

head & body

Slide 25 - Quiz

Welke tags vormen de binnenste HTML? (innerHTML)

<html>

</html>

html

head

body

head & body

Slide 26 - Quiz

Welke tag is genest?

<head><head><body><p>gewone tekst</p></body>

head

body

gewone tekst

Slide 27 - Quiz

Welke tags zijn niet genest?

<head><head><body><p>gewone tekst</p></body>

head

body

gewone tekst

Slide 28 - Quiz

HTML heeft ook familie

We zeggen ook wel dat de buitenste HTML de 'ouder' is en de geneste HTML het 'kind'. Je krijgt dan een soort familie-stamboom met grootouders, zusjes, neefjes etc.

Slide 29 - Slide

HTML Syntax

Met Syntaxis (Engels: Syntax) worden alle regels bedoeld die de opbouw en structuur van zinnen bepaalt. M.a.w. woordvolgorde, interpunctie en grammatica.

Slide 30 - Slide

HTML - Tags

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Quiz

Slide 4 - Quiz

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Quiz

Slide 9 - Quiz

Slide 10 - Slide

Slide 11 - Quiz

Slide 12 - Quiz

Slide 13 - Quiz

Slide 14 - Drag question

Slide 15 - Drag question

Slide 16 - Drag question

Slide 17 - Drag question

Slide 18 - Open question

Slide 19 - Drag question

Slide 20 - Drag question

Slide 21 - Quiz

Slide 22 - Quiz

Slide 23 - Quiz

Slide 24 - Quiz

Slide 25 - Quiz

Slide 26 - Quiz

Slide 27 - Quiz

Slide 28 - Quiz

Slide 29 - Slide

Slide 30 - Slide

More lessons like this

bkup 03-HTML-document

HWUD04-sj2122-03-HTML-document

Webdesign - Les 2 (22/23)

PLOH05 - 02 - HTML - Syntax Oefening

CSS review - HWUD04 20:21

HTML & CSS 90 - herhaling

HTML & CSS 01 - 1 tmt 2.3 - introductie

2. Lists en CSS Basics