Software 1 Basis HTML

bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009 - 2010 semester 1 Alain Simons [email protected]

Basis HTML 1. Introductie 2. Basis 3. Elementen 4. Attributen 5. Headings 6. Paragrafen 7. Links 8. Afbeeldingen 9. Tabellen 10. Lijsten 11. Forms 12. Kleuren 13. ftp

© artesis - Illustratiesoftware - Alain Simons 2010-2011

p. 2 / 30

1. Introductie a. Een voorbeeld van HTML om te starten:

My First Heading

My first paragraph.

Je kan dit in een gewone standaard teksteditor typen en zelf uitproberen. b. Wat is HTML? HTML is een taal om webpagina’s te beschrijven

-

HTML staat voor Hyper Text Markup Language HTML is geen programmataal, het is een markup language Een markup language is een set van markup tags <> HTML gebruikt markup tags om webpagina’s te beschrijven

c. HTML Tags HTML markup tags worden meestal HTML tags genoemd.

-

HTML tags zijn kernwoorden omgeven door hoekige haakjes zoals dit voorbeeld HTML tags bestaan meestal uit een paar zoals and De eerste tag in een paar is de start tag, de tweede is de end tag Start en end tags worden ook openings tags and sluitings tags genoemd.

d. HTML Documenten = Web Pagina’s

- HTML documenten beschrijven websites - HTML documenten bevatten HTML tags and platte tekst - HTML documenten worden ook webpagina’s genoemd

Het doel van een webbrowser (zoals Internet Explorer of Firefox) is HTML documenten te lezen en ze te vertonen als webpagina’s. De browser vertoont niet de HTML tags, maar gebruikt de tags om de inhoud van de pagina te interpreteren:

My First Heading

My first paragraph

© artesis - Illustratiesoftware - Alain Simons 2010-2011

p. 3 / 30

Voorbeeld verklaring: * * * *

De De De De

tekst tekst tekst tekst

tussen tussen tussen tussen

and beschrijft de webpagina and is de zichtbare pagina inhoud

and

wordt vertoond als de titel

and

wordt vertoond als de tekst van de paragraaf

e. Wat heb je nodig om HTML te leren? Je hebt geen speciale software of dergelijke nodig om HTML te leren.

- Je hebt geen HTML editor nodig - Je hebt geen webserver nodig - Je hebt geen website nodig

f. Editeren HTML Om deze oefeningen te maken is een gewone platte tekst editor voldoende. Dit is de beste manier om HTML te leren. Desondanks geven webontwerpers dikwijls de voorkeur aan HTML editors zoals FrontPage of Dreamweaver i.p.v. een gewone teksteditor. Je kan deze dan ook desnoods gebruiken. g. HTM or HTML Extensie? Wanneer je een HTML-bestand bewaart kan je de .htm of de .html extensie gebruiken. Hier gebruiken we .htm in de voorbeelden. Dit is een oude gewoonte van uit de tijd dat software alleen 3-letters extensies toeliet. Met de huidige software is het perfect mogelijk om .html te gebruiken.

2. Basis a. HTML headings: HTML headings worden gedefinieërd met

to

tags. Voorbeeld:

Dit is een hoofding

Dit is een hoofding

Dit is een hoofding

b. HTML Paragrafen: HTML paragrafen worden gedefinieërd met

tag. Voorbeeld:

Dit is een paragraaf

Dit is een andere paragraaf

© artesis - Illustratiesoftware - Alain Simons 2010-2011

p. 4 / 30

c. HTML Links: HTML links worden gedefinieërd met tag. Voorbeeld: This is a link Nota: de link is hier wat men een attribuut noemt. d. HTML afbeeldingen: HTML afbeeldingen worden gedefinieërd met tag. Voorbeeld:

3. Elementen a. HTML elementen: HTML documenten worden gedefinieërd door HTML elements. Een HTML element is alles van de start tag tot de end tag: Start tag

Inhoud Element

End tag

Dit is een paragraaf Dit is een link

b. HTML Elementen Syntax

-

Een HTML element start met een start tag / opening tag Een HTML element stopt met een end tag / closing tag De inhoud van het element is alles tussen de start en de end tag Sommige HTML elementen hebben een lege inhoud Lege elementen zijn gesloten in de start tag De meeste HTML elementen kunnen attributen hebben

c. Geneste HTML elementen - De meeste HTML elementen kunnen genest worden (Ze kunnen andere HTML elementen bevatten). - HTML documenten bestaan uit geneste HTML elementen. Voorbeeld:

Dit is mijn eerste paragraaf

Dit bovenstaand voorbeeld bevat 3 HTML elementen. © artesis - Illustratiesoftware - Alain Simons 2010-2011

p. 5 / 30

Voorbeeld verklaring: Het

element:

Dit is mijn eerste paragraaf

Het

element definieërt een paragraaf in een HTML document Het element heeft een start tag

en een end tag

De inhoud van het element is: Dit is mijn eerste paragraaf Het element:

Dit is mij eerste paragraaf

Het element definieërt de body van het HTML document Het element heeft een start tag en een end tag Het element inhoud is een ander HTML element (een paragraaf) Het element:

Dit is mijn eerste paragraaf

Het element definieërt het volledige HTML document. Het element heeft een start tag en een end tag De inhoud van het element is een ander HTML element (body) d. Vergeet niet de End Tag De meeste browsers zullen de HTML correct vertonnen wanneer je de end tag vergeet:

Dit is een paragraaf

Dit is een paragraaf Dit bovenstaand voorbeeld zal dus werken in de meeste browsers maar vertrouw er toch maar niet op. Het vergeten van de End Tags kan onverwachte resultaten en fouten geven. Nota: toekomstige versies van HTML zullen het weglaten van de end tags niet meer toelaten. e. Lege HTML Elementen HTML elementen zonder inhoud worden empty elements genoemd. Empty elements kunnen gesloten worden in de start tag.
is een leeg element zonder een closing tag (dit is voor een line break). In XHTML, XML, en toekomstige versies van HTML zullen alle elementen gesloten moeten worden. Een slash toevoegen aan de start tag, zoals
, is de beste manier om een empty element af te sluiten en wordt aanvaard door HTML, XHTML en XML. Zelf als
werkt in alle browsers,
is meer toekomstgericht.

© artesis - Illustratiesoftware - Alain Simons 2010-2011

p. 6 / 30

f. Gebruik Lowercase Tags HTML tags zijn niet hoofdlettergevoelig:

betekent hetzelfde als

. Zeer veel websites gebruiken hoofdletter HTML tags op hun webpagina’s. Wij gaan Lowercase Tags gebruiken daar dit aanbevolen wordt in HTML 4 en gevraagd wordt in de toekomstige versies van (X)HTML.

4. Attributen

-

HTML elementen kunnen attributen hebben. Attributen geven extra informatie over het element Attributen worden altijd gespecifieërd in de start tag Attributen komen in een paarvorm voor: naam/waarde zoals: name=”value”

a. Voorbeeld Attribuut HTML links worden gedefinieërd met tag. Het linkadres wordt voorzien als een attribute: Voorbeeld: Dit is een link Altijd aanhalingstekens gebruiken rond de waarde van een attribute. Waarden van een Attribute moeten altijd binnen de aanhalingstekens bevinden. Dubbele aanhalingstekens zijn het meest gebruikt maar enkelvoudige mogen ook gebruikt worden. In sommige rare gevallen, zoals wanneer het Attribute zelf aanhalingstekens bevat, is het noodzakelijk om enkelvoudige aanhalingstekens te gebruiken: naam=’Eric “ShotGun” Patrick’ HTML tip: gebruik steeds onderkast Attributen Attribuut namen en attribuut waarden zijn hoofdletterongevoelig. Maar het World Wide Web Consortium (W3C) raad gebruik van onderkast aan in hun HTML 4. Nieuwere versies van (X) HTML zullen trouwens onderkast attributen vragen. b. HTML Attributen referentie Hieronder is een lijst van attributen die standaard zijn voor meeste HTML elementen: Attribute class id style title

Waarde classname id_name style_definition text

Omschrijving The class of the element A unique id for the element An inline style definition Extra information element

Een lijst van alle attributen vind je terug in de volledige HTML referentie.

© artesis - Illustratiesoftware - Alain Simons 2010-2011

p. 7 / 30

5. Headings

- HTML headings zijn gedefinieërd door tags van

tot

. -

is de grootste heading,

de kleinste. - Headings zijn belangrijk voor zoekmachines. De headings worden gebruikt om de pagina’s te indexeren. - Daarom ook de volgorde van de headings respecteren Eerst

, dan

enz...

a. Voorbeeld Heading

Dit is een hoofding

Dit is een hoofding

Dit is een hoofding

Dit geeft:

Dit is een hoofding Dit is een hoofding Dit is een hoofding

b. Voorbeeld

---

Je kan ook de tag

---

gebruiken. Deze geeft een horizontale lijn

de hr tag definieërt een horizontale lijn:

---

Dit is een paragraaf

Dit geeft: de hr tag definieërt een horizontale lijn: _________________________________________________________________________ Dit is een paragraaf

6. Paragraphs

-

HTML documenten zijn verdeeld in paragraven. Paragraven gebruiken de

tag. Browsers zetten automatisch een lege lijn voor en na paragraven. Vergeet de eind tag niet

.

a. Voorbeeld Paragraph

Dit is een paragraaf

Dit is een andere paragraaf

© artesis - Illustratiesoftware - Alain Simons 2010-2011

p. 8 / 30

Dit geeft: Dit is een paragraaf Dit is een andere paragraaf b. Voorbeeld Line Break Als je een line break wil hebben kan je de tag
toevoegen.

Dit is
een para
graaf met line breaks

Dit geeft: Dit is een para graaf met line breaks

7. Links

-

Een link is een verwijzing naar een bepaalde pagina op het web. Een link kan naar vanalles verwijzen zoals beelden, geluiden, filmen, enz... Een Anchor is een term die gebruikt wordt om een doel in een document te definiëren. Dit wordt door de tag voorgesteld. De term HTML-link wordt gebruikt wanneer element naar een ander document verwijst en de term Anchor wanneer er verwezen wordt binnen het document zelf. - href is het attribuut dat het adres bevat. - target is een attribuut dat je toelaat te definiëren waar het gelinkte document wordt geopend.

a. Voorbeeld Link Link tekst b. Voorbeeld Link met href attibuut Visit W3Schools! c. Voorbeeld Link met href attibuut Visit W3Schools!

© artesis - Illustratiesoftware - Alain Simons 2010-2011

p. 9 / 30