HTML - Tags

Tags voor document-structuur

<html>

1 / 30

Slide 1: Tekstslide

Communication & multimedia designHBOStudiejaar 1

In deze les zitten 30 slides, met interactieve quizzen en tekstslides.

Onderdelen in deze les

Tags voor document-structuur

<html>

Slide 1 - Tekstslide

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 - Tekstslide

Met welke taal geef je een webpagina structuur?

FTP

XML

HTML

Slide 3 - Quizvraag

Met welke taal kun je web-teksten opmaken?

CSS

HTML

XML

HTTP

Slide 4 - Quizvraag

<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 - Tekstslide

<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 - Tekstslide

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 - Tekstslide

Waar zie je een volledige HTML-tag?

<p>

</p>

<p>tekst</p>

Slide 8 - Quizvraag

Waar zie je een start-tag?

<p>

</p>

<p>tekst</p>

Slide 9 - Quizvraag

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 - Tekstslide

Waar zie je een eind-tag?

<p>

</p>

<p>tekst</p>

Slide 11 - Quizvraag

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

(html)

<html>

{html}

[html]

Slide 12 - Quizvraag

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

<html?>

<\html>

</html>

<HTML>

Slide 13 - Quizvraag

Maak de start-tag voor een paragraaf-element

{

}

(

)

html

head

body

strong

sub

sup

Slide 14 - Sleepvraag

Maak de eind-tag voor een paragraaf-element

{

}

(

)

html

head

body

strong

sub

sup

Slide 15 - Sleepvraag

Maak van mij een paragraaf

Sleep de juiste tags naar de juiste locatie

<\p>

</p>

<p>

<p/>

<!p>

Slide 16 - Sleepvraag

Maak van mij een html-document

Sleep de juiste tags naar de juiste locatie

<html>

</html>

</document>

<p>

</p>

Slide 17 - Sleepvraag

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

Slide 18 - Open vraag

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

html

head

body

strong

sub

sup

Slide 19 - Sleepvraag

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 - Sleepvraag

Met welke tag maak je scheve tekst?

Slide 21 - Quizvraag

Met welke tag zet je een titel bovenaan je pagina?

title

titel

Slide 22 - Quizvraag

Met welke tag maak je dikgedrukte tekst?

Slide 23 - Quizvraag

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 - Quizvraag

Welke tag vormt de buitenste HTML?

<html>

</html>

html

head

body

head & body

Slide 25 - Quizvraag

Welke tags vormen de binnenste HTML? (innerHTML)

<html>

</html>

html

head

body

head & body

Slide 26 - Quizvraag

Welke tag is genest?

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

head

body

gewone tekst

Slide 27 - Quizvraag

Welke tags zijn niet genest?

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

head

body

gewone tekst

Slide 28 - Quizvraag

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 - Tekstslide

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 - Tekstslide

HTML - Tags

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Quizvraag

Slide 4 - Quizvraag

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Quizvraag

Slide 9 - Quizvraag

Slide 10 - Tekstslide

Slide 11 - Quizvraag

Slide 12 - Quizvraag

Slide 13 - Quizvraag

Slide 14 - Sleepvraag

Slide 15 - Sleepvraag

Slide 16 - Sleepvraag

Slide 17 - Sleepvraag

Slide 18 - Open vraag

Slide 19 - Sleepvraag

Slide 20 - Sleepvraag

Slide 21 - Quizvraag

Slide 22 - Quizvraag

Slide 23 - Quizvraag

Slide 24 - Quizvraag

Slide 25 - Quizvraag

Slide 26 - Quizvraag

Slide 27 - Quizvraag

Slide 28 - Quizvraag

Slide 29 - Tekstslide

Slide 30 - Tekstslide

Meer lessen zoals deze

bkup 03-HTML-document

HWUD04-sj2122-03-HTML-document

PLOH05 - 02 - HTML - Syntax Oefening

Webdesign - Les 2 (22/23)

CSS review - HWUD04 20:21

HTML & CSS 90 - herhaling

2. Lists en CSS Basics

HTML & CSS 01 - 1 tmt 2.3 - introductie