Download - HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - [email protected].

Transcript
Page 1: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

HTMLLes 1: Introductie HTML

Webdesign module 1 - les 1 - [email protected]

Page 2: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

Inhoud module 1• Les 1:

• Introductie HTML• HTML Syntax• Minimale tag set• Tekst elementen

• Les 2:• Introductie XHTML• HTML links• Meerdere pagina’s• HTML images• Ordered/Unordered lists

• Les 3:• Tabellen

Webdesign module 1 - les 1 - [email protected]

• Les 4: • Formulieren

• Les 5 en 6:• Maak een website in

XHTML

• Les 7:• Toets

Page 3: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

HTML introductie• HTML staat voor HyperText Markup Language en is de

taal waarin we webpagina’s schrijven. De pagina’s bestaan uit “Markup” tags en gewone tekst

• De structuur van een HTML pagina bestaat uit drie onderdelen:

DOCTYPE HEAD BODY

Vertelt je browser welke HTML-versie je gebruikt

Bevat bijvoorbeeld de “title tag” van je HTML pagina

Hierin plaats je alle content die je wel wilt laten zien

Webdesign module 1 - les 1 - [email protected]

Page 4: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

HTML Syntax• HTML kent een aantal regels, ook wel de HTML Syntax

genoemd• Deze Syntax bepaald hoe we de HTML code schrijven• HTML tags zijn trefwoorden tussen brackets <html>• Vrijwel alle tags worden eerst geopend, <title> dan volgt

er tekst (in dit geval de titel van de pagina) en daarna wordt de tag gesloten, </title>

• De twee tags vormen dan samen 1 HTML element

<tag>content</tag> <title>Pagina 1</title>

Webdesign module 1 - les 1 - [email protected]

Page 5: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

HTML Syntax• Let op: Niet alle HTML tags worden gesloten• Sommige tags staan niet om content heen en sluiten

zichzelf meteen af;• Bijvoorbeeld de tag om een witregel toe te voegen <br/>

Webdesign module 1 - les 1 - [email protected]

Page 6: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

Minimale tags• Alle HTML pagina’s moeten een minimale set van tag’s

bevatten, namelijk: <!DOCTYPE>, <html>, <head> en <body> een minimale HTML pagina bevat dus de volgende elementen:

<!DOCTYPE> <html> <head> <title> Hier komt de titel </title> </head> <body> Alle content komt hier </body> </html>

Webdesign module 1 - les 1 - [email protected]

Page 7: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

Minimale tagsElement Beschrijving

<!DOCTYPE> Vertelt de browser welke tag sets hij kan verwachten

<html> </html>

Omkadert de hele HTML pagina

<head></head>

Hier kun je alle informatie voor een pagina kwijt bijvoorbeeld de tags <link>, <meta>, <script> en <title>

<body></body>

Omkadert alle content die je wilt laten zien in je browser scherm

<title></title>

Hierin kun je een titel aangeven die helemaal boven in je browser verschijnt, de <title> tag staat altijd in het <head> element

Webdesign module 1 - les 1 - [email protected]

Page 8: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

Attributen en waarden• Veel tags hebben nog meer opties die je kunt aanpassen.

Deze opties heten attributen en je kunt ze aanpassen in de openingstag en de waarde van het attribuut staat altijd tussen aanhalingstekens.

<tag attribuut=“waarde”>tekst</tag>

Webdesign module 1 - les 1 - [email protected]

Page 9: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

Tekst elementen• Met de volgende tags kun je teksten in HTML opmaken:• Met de “h1” tag kun je een heading (titel) aangeven in je

tekst, de tag loopt van h1 t/m h6, h1 is de grootste titel en h6 de kleinste. Tekst in een h1 tag wordt altijd dikgedrukt

• Met de “p” tag kun je een paragraaf aanduiden, er komt automatisch een witregel boven en onder de paragraaf

<h1>heading tekst</h1>

<p>tekst</p>

Webdesign module 1 - les 1 - [email protected]

Page 10: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

Tekst elementen• Met de “blockquote” tag kun je een quote/citaat

beschrijven, een blockquote staat altijd een stuk van de kantlijn af

• Met de “break” tag kun je een witregel toevoegen (een enter), de break tag sluit je meteen af

<blockquote>tekst</blockquote>

<br/>

Webdesign module 1 - les 1 - [email protected]

Page 11: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

Tekst elementen• Met de “a” tag kun je een hyperlink toevoegen, dit kan een

link zijn naar een document, een andere HTML pagina of een gedeelte in de pagina zelf

• Zorg dat je bij een link naar een webpagina altijd http:// voor de URL zet

<a href=“URL”>tekst</a>

<a href=“http://www.google.nl/”>tekst</a>

Webdesign module 1 - les 1 - [email protected]

Page 12: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

Tekst elementen• Met de “b” tag kun je tekst dikgedrukt maken

• Met de “i” tag kun je tekst schuingedrukt maken

• Met de “sub” en “sup” tag kun je tekst in sub- of supscript weergeven

• Met de “big” en “small” tag kun je tekst groter of kleiner weergeven

<b>tekst</b>

<i>tekst</i>

<sub>tekst</sub> <sup>tekst</sup>

<big>tekst</big> <small>tekst</small>

Webdesign module 1 - les 1 - [email protected]

Page 13: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

Tekst elementen• Met de “del” tag kun je tekst doorstrepen en met de

“ins” tag kun je laten zien wat ervoor in de plaatst komt

• Met de “hr” tag kun je een horizontale lijn toevoegen

• Met de “em” tag kun je tekst benadrukken (wordt ook schuingedrukt)

• Met de “strong” tag wordt tekst ook dikgedrukt

<p>mijn favoriete kleur is <del>groen</del><ins>blauw</ins></p>

<hr/>

<em>benadrukte tekst</em>

<strong>strong tekst</strong>

Webdesign module 1 - les 1 - [email protected]

Page 14: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

Bestandsstructuur website• Wanneer je een website gaat maken werk je altijd met de

volgende mappenstructuur:

Website naam images index.html

Webdesign module 1 - les 1 - [email protected]

Page 15: HTML Les 1: Introductie HTML Webdesign module 1 - les 1 - h.v.eeuwijk@unit-ict.nl.

Opdracht 1• Download Notepad ++ (voor Windows) of Textwrangler

(voor Mac) en maak hiermee je eerste HTML pagina. Gebruik de minimale tag set uit deze presentatie, deze kun je terugvinden op mijn blog

• Je slaat het bestand op als HTML bestand (.html)• Op de pagina schrijf je kort iets over jezelf en je gebruikt

alle tags die in deze presentatie staan• Als je de opdracht af hebt stuur je het .html bestand naar

[email protected]

Webdesign module 1 - les 1 - [email protected]