Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

Agenda

HTML HyperText Markup Language

Aniel Bhulai

wHTML algemeen wAantal tags wHTML met stijl (CSS, DHTML) wDemo wVragen

E-m ail :abhulai@ c s .vu.nl

vrije Univers iteit am s terdam

A. Bhulai

1

A. Bhulai

Inleiding Computergebruik /HTM L

Wat is HTML? wOpmaaktaal wLetter wKleur wPlaatjes wTabellen wFormulieren wLinks A. Bhulai

Inleiding Computergebruik /HTM L

Hoe ziet een HTML-file eruit? <TITLE>A Simple HTML Example

HTML is Easy To Learn

Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!

And this is the second paragraph.

3

A. Bhulai

Inleiding Computergebruik /HTM L

wGewone tekst editor wApplicatie wHTML-editor (WYSIWYG)

5

4

Inleiding Computergebruik /HTM L

Waarom HTML leren?

Waarin maak je een HTML-bestand?

A. Bhulai

2

wHTML-syntax wGegenereerde HTML voldoet niet altijd wHTML-kenner is flexibeler wMogelijkheden HTML-editors beperkt

A. Bhulai

6

1

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

Meer over HTML... wWeb wICG-website (‘A beginners guide to HTML’) (http://teletop.few.vu.nl)

wBoeken wSource code

A. Bhulai

7

Extensies (1) w.html of .htm w.txt wandere extensies

A. Bhulai

8

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

Extensies (2) w.html of .htm w.txt w.asp w.js w.vb wgeen extensie wandere extensies A. Bhulai

HTML versies wOorsprong in CERN (http://cern.web.cern.ch/CERN)

wStandaarden door W3C (http://www.w3.org)

wHTML versies vs. Browser versies

9

A. Bhulai

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

Opvragen van HTML-pagina’s wHTTP:// wURL (http://www.cs.vu.nl/~login/index.html) wfile:/home/login/filename wfile:///c%7C/temp/ (c:\temp)

A. Bhulai

11

10

Opbouw HTML file (1) wElementen wTags wAttributes wNiet case sensitive

A. Bhulai

HTML is niet moeilijk

Mijn eerste HTML-pagina!

12

2

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

Opbouw HTML file (2) wElementen wTags wAttributes wScripts wCommentaar wNiet case sensitive

<script language="JavaScript"> document.write("Hello World");

HTML is niet moeilijk

Mijn eerste HTML-pagina!

A. Bhulai

HTML-tags: voorbeeld

HTML is niet moeilijk

Mijn eerste HTMLpagina!

A. Bhulai

13

14

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

HTML-tags: kleuren w w whttp://www.cs.vu.nl/~abhulai/doc/colors.html

HTML-tags: lijsten (1) wOngenummerde lijsten Source

• •

View

Source

View

• 
  
  n
  
  
• 
  
  O
  
  
• 
  
  n
  
  
• 
  
  O
  
  

Fig. 2

A. Bhulai

15

Inleiding Computergebruik /HTM L

Fig. 3

16

Inleiding Computergebruik /HTM L

HTML-tags: lijsten (2) wGenummerde lijsten

HTML-tags: links wBinnen een document:

1. Appels
2. Peren

1. Appels 2. Peren

– Verwijzing – Hierheen

wNaar een lokaal document:

wDefinitie lijsten

ICG

ICG, Inleiding Computergebruik…

A. Bhulai

Source

Fig. 1

A. Bhulai

View




– Lokale verwijzing

ICG ICG, Inleiding Computergebruik ...

wExtern: – Externe verwijzing

17

A. Bhulai

18

3

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

Voorbeeld: links <TITLE>Mijn pagina

Inhoud

Dankwoord
Hoofdstuk 1
Yahoo
. .
Dankwoord
A. Bhulai

HTML-tags: afbeeldingen Inhoud Dankwoord Hoofdstuk 1 Yahoo .. Dankwoord

19

w waarbij lokatie_plaatje het volgende kan zijn: – – – –

relatieve filename: plaatje.jpg absolute filename: /home/karin/../plaatje.jpg of c:\my pictures\plaatje.jpg URL: http://...

A. Bhulai

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

HTML-tags: uitlijnen

Voorbeeld: uitlijnen

wTekst uitlijnen met een plaatje

Deze tekst is aan de onderkant van het plaatje uitgelijnd.

(CENTER, BOTTOM)

Deze tekst is aan de bovenkant van het plaatje uitgelijnd.

wAfbeeldingen uitlijnen



A. Bhulai

21

Deze tekst is in het midden van het plaatje uitgelijnd.

A. Bhulai

Inleiding Computergebruik /HTM L

w w

23

22

Inleiding Computergebruik /HTM L

HTML-tags: afbeeldingen als link

A. Bhulai

20

HTML-tags: tabellen (1) w ... w … w ... w ... w ...

A. Bhulai

24

4

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

Voorbeeld: tabellen (1) <TITLE> Tabel

Mijn tabel

Kolom 1	Kolom 2
Data 1	Data 2
Data 4	Data 3

A. Bhulai

25

HTML-tags: tabellen (2) wBorder wCellspacing wCellpadding wWidth wbgcolor walign

A. Bhulai

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

Voorbeeld: tabellen (2)

Voorbeeld	Voorbeeld
Voorbeeld	Voorbeeld




Voorbeeld	Voorbeeld
Voorbeeld	Voorbeeld



26

Nog een paar tags... w
w

---

w … w

 … 

w abhulai

A. Bhulai

27

A. Bhulai

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

CSS syntax

Voordelen Cascading Style Sheet (CSS) wMeer controle over presentatie web-documents wGebruik van stijlen wGebruik van eigenfonts wContent positionering wGebruik van CSS als templates wWebsite makkelijk te onderhouden

A. Bhulai

29

28

wTwee typen CSS syntax wtype=“text/css” w<style> …

A. Bhulai

30

5

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

CSS definiëren <STYLE TYPE=“text/css”

A. Bhulai

31

Voorbeeld: CSS <TITLE> Style <STYLE TYPE=“text/css”>

Cascading Style Sheet



A. Bhulai

33

Voorbeeld: classes <TITLE> Style <STYLE TYPE=“text/css”>

Cascading Style Sheet

CSS maakt het onderhoud van websites makkelijker.

Deze paragraaf maakt geen gebruik van classes.

A. Bhulai

Inleiding Computergebruik /HTM L

Aantal CSS eigenschappen: font-eigenschappen wfont-size (x-small, xx-small, small, medium, large, x-large, xx-large, smaller, larger, pt, %)

wfont-style (normal, italic)

wfont-family (serif, sans-serif, cursive, monospace en fantasy )

wfont-weight (normal, bold, bolder, lighter, 100 - 900)

A. Bhulai

35

32

Inleiding Computergebruik /HTM L

Classes definiëren

A. Bhulai

Zonder CSS



CSS maakt het onderhoud van websites makkelijker.



Inleiding Computergebruik /HTM L

<STYLE TYPE=“text/css”

Met CSS

34

Inleiding Computergebruik /HTM L

Voorbeeld: font eigenschappen P {font-size:12pt;} EM {font-size:120%}; BLOCKQUOTE {font-size:medium;} B {font-size:larger;} H2 {font-style: italic;} H1 {font-family:Helvetica, Arial, sans-serif;} BLOCKQUOTE {font-weight: bold;} A. Bhulai

36

6

Inleiding Computergebruik /HTM L

Aantal CSS eigenschappen: text eigenschappen wtext-align

Inleiding Computergebruik /HTM L

Aantal CSS eigenschappen: kleur en achtergrond eigenschappen wcolor

(left, right, center, justify)

(color value, name)

wtext-transform

wbackground-image

(capitalize, uppercase, lowercase, none)

wtext-decoration

(url)

wbackground-color

(none, underline, line-through, blink)

A. Bhulai

(color value, name)

37

A. Bhulai

38

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

Aantal CSS eigenschappen: Block-level eigenschappen wmargin-left, margin-right, margin-top, marginbottom, margin

Voorbeeld: border-style Solid border

Ridge border

Double border

Inset border

Groove border

Outset border

(length, percentage, auto)

wborder-style (none, solid, double, inset, outset, groove, ridge)

wborder-color (none, color value)

wborder-top-width, border-bottom-width, borderleft-width, border-right-width, border-width (length) A. Bhulai

39

A. Bhulai

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

Zoek de fouten

12	24
44	88




Zoek

A. Bhulai

41

40

HTML voor gevorderden wFrames wDHTML wFormulieren en CGI-scripts wJavascript wVBscripts wJava Applets wActiveX A. Bhulai

42

7

Inleiding Computergebruik /HTM L

Inleiding Computergebruik /HTM L

Vragen

A. Bhulai

? 43

HTML ???

A. Bhulai

44

8