HINF 6220 Networks and the Web for Health Informatics

1
Tutorial 8
HINF 6220 (Networks and the Web for Health
Informatics)
HTML
kharrazi_at_cs.dal.ca http//flame.cs.dal.ca/kharraz
i/
2
Review Tutorial 6 and 7

• Web Server Overview
• HTML Editor (NotePad)
• FTP Client (FileZilla)
• HMTL Introduction
• HTML Elements lttaggttextlt/taggt
• HTML Basic Tags lthtmlgtltbodygt
• HTML Formatting ltpgtltbgtltigt
• HTML Entities nbsp
• HTML Links (URLs) lta href'http//'gtlt/agt
• HTML Fonts ltfont face size colorgtlt/fontgt
• HTML Colors
• HTML Body Attributes ltbody bgcolor backgroundgt
• HTML Images ltimg src''/gt
• HTML Lists ltulgtltligtlt/ligtlt/ulgt

3
Have you downloaded theTutorialApps
from http//www.cs.dal.ca/kharrazi/teaching/hin
f_6220/TutorialApps.zip ?
4
TutorialApps.zip
5
HTML in a Nutshell (3)

• HTML Tables
• HTML Head
• HTML Styles (CSS)
• HTML Forms (Get/Post)

6
1. HTML Tables

• Tables are defined with the lttablegt tag. A table
  is divided into rows (with the lttrgt tag), and
  each row is divided into data cells (with the
  lttdgt tag). The letters td stands for "table
  data," which is the content of a data cell. A
  data cell can contain text, images, lists,
  paragraphs, forms, horizontal rules, tables, etc.

lttablegt lttrgt lttdgtrow 1, cell 1lt/tdgt lttdgtrow
1, cell 2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tablegt
7
HMTL Tables (ctn.)
lthtmlgt ltheadgtlt/headgt ltbodygt lttablegt lttrgt
lttdgtrow 1, cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
8
HMTL Tables (ctn.)
COLUMN lttdgt
TABLE lttablegt
ROW lttrgt
ROW lttrgt
9
HMTL Tables (ctn.)
The BORDER Attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttrgt lttdgtrow 1, cell
1lt/tdgt lttdgtrow 1, cell 2lt/tdgt lt/trgt lttrgt
lttdgtrow 2, cell 1lt/tdgt lttdgtrow 2, cell
2lt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
10
HMTL Tables (ctn.)
The BORDER Attribute
11
HMTL Tables (ctn.)
The TH (table header) tag
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttrgt ltthgtHeading
1lt/thgt ltthgtHeading 2lt/thgt lt/trgt lttrgt
lttdgtrow 1, cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
12
HMTL Tables (ctn.)
The TH (table header) tag
13
HMTL Tables (ctn.)
Empty Cell Problems
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttrgt lttdgtrow 1, cell
1lt/tdgt lttdgtrow 1, cell 2lt/tdgt lt/trgt lttrgt
lttdgtrow 2, cell 1lt/tdgt lttdgtlt/tdgt lt/trgt
lt/tablegt lt/bodygt lt/htmlgt
14
HMTL Tables (ctn.)
Empty Cell Problems
15
HMTL Tables (ctn.)
Empty Cell Problems
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttrgt lttdgtrow 1, cell
1lt/tdgt lttdgtrow 1, cell 2lt/tdgt lt/trgt lttrgt
lttdgtrow 2, cell 1lt/tdgt lttdgtnbsplt/tdgt
lt/trgt lt/tablegt lt/bodygt lt/htmlgt
16
HMTL Tables (ctn.)
Empty Cell Problems
17
HMTL Tables (ctn.)
The CELLPADDING attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1" cellpadding"20"gt lttrgt lttdgtrow
1, cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
18
HMTL Tables (ctn.)
The CELLPADDING attribute
19
HMTL Tables (ctn.)
The CELLSPACING attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1" cellspacing"20"gt lttrgt lttdgtrow
1, cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
20
HMTL Tables (ctn.)
The CELLSPACING attribute
21
HMTL Tables (ctn.)
The COLSPAN attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttrgt lttdgtrow 1, cell
1lt/tdgt lttdgtrow 1, cell 2lt/tdgt lt/trgt lttrgt
lttd colspan"2"gtrow 2, cell
12lt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
22
HMTL Tables (ctn.)
The COLSPAN attribute
23
HMTL Tables (ctn.)
The ROWSPAN attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttrgt lttd rowspan'2'gtrow 12,
cell 1lt/tdgt lttdgtrow 2, cell
1lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
2lt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
24
HMTL Tables (ctn.)
The ROWSPAN attribute
25
HMTL Tables (ctn.)
The WIDTH attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1" width"300"gt lttrgt lttdgtrow 1,
cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
26
HMTL Tables (ctn.)
The WIDTH attribute
300 pixels
27
HMTL Tables (ctn.)
The WIDTH attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1" width"100"gt lttrgt lttdgtrow 1,
cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
28
HMTL Tables (ctn.)
The WIDTH attribute
100 of the browsers width
100 of the browsers width
29
HMTL Tables (ctn.)
The HEIGHT attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1" height"150"gt lttrgt lttdgtrow 1,
cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
30
HMTL Tables (ctn.)
The HEIGHT attribute
150 pixels
31
HMTL Tables (ctn.)
The TR WIDTH attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttr width"300"gt lttdgtrow 1,
cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
32
HMTL Tables (ctn.)
The TR WIDTH attribute
??? pixels
Width usually does NOT work for TR.
33
HMTL Tables (ctn.)
The TR HEIGHT attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttr height"100"gt lttdgtrow 1,
cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
34
HMTL Tables (ctn.)
The TR HEIGHT attribute
100 pixels
35
HMTL Tables (ctn.)
The TD WIDTH attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttrgt lttd width"300"gtrow 1,
cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
36
HMTL Tables (ctn.)
The TD WIDTH attribute
300 pixels
37
HMTL Tables (ctn.)
The TD WIDTH attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttrgt lttd width"300"gtrow 1,
cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttd width"50"gtrow 2,
cell 1lt/tdgt lttdgtrow 2, cell
2lt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
38
HMTL Tables (ctn.)
The TD WIDTH attribute
300 pixels
50 pixels
39
HMTL Tables (ctn.)
The TD HEIGHT attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttrgt lttd height"100"gtrow 1,
cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
40
HMTL Tables (ctn.)
The TD HEIGHT attribute
100 pixels
41
HMTL Tables (ctn.)
The ALIGN attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttrgt lttdgtrow 1, cell
1lt/tdgt lttdgtrow 1, cell 2lt/tdgt lt/trgt lttrgt
lttdgtrow 2, cell 1lt/tdgt lttdgtrow 2, cell
2lt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
42
HMTL Tables (ctn.)
The ALIGN attribute
By default the Table will be aligned TOP LEFT.
43
HMTL Tables (ctn.)
The ALIGN attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1" align'center'gt lttrgt lttdgtrow 1,
cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
44
HMTL Tables (ctn.)
The ALIGN attribute
Center Align
45
HMTL Tables (ctn.)
The TR ALIGN attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1" gt lttr height'100'gt lttdgtrow 1,
cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
46
HMTL Tables (ctn.)
The TR ALIGN attribute
Middle Vertical Align.
TR Height 100 pixel
47
HMTL Tables (ctn.)
The TR ALIGN attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1" gt lttr height'100'
valign'top'gt lttdgtrow 1, cell
1lt/tdgt lttdgtrow 1, cell 2lt/tdgt lt/trgt lttrgt
lttdgtrow 2, cell 1lt/tdgt lttdgtrow 2, cell
2lt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
48
HMTL Tables (ctn.)
The TR ALIGN attribute
Top Vertical Align.
TR Height 100 pixel
49
HMTL Tables (ctn.)
The TD ALIGN attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1" gt lttrgt lttd width'200'
align'center'gtrow 1, cell 1lt/tdgt lttdgtrow 1,
cell 2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
50
HMTL Tables (ctn.)
The TD ALIGN attribute
Center Align.
TD Width 200 pixel
51
HMTL Tables (ctn.)
The ALIGN attribute
Align Center Valign Top
Align Right Valign Top
Align Left Valign Top
Align Right Valign Middle
Align Left Valign Middle
Align Right Valign Bottom
Align Left Valign Bottom
Align Center Valign Middle
Align Center Valign Bottom
52
HMTL Tables (ctn.)
The BGCOLOR attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1" bgcolor'FF0000'gt lttrgt lttdgtrow
1, cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
53
HMTL Tables (ctn.)
The BGCOLOR attribute
54
HMTL Tables (ctn.)
The BACKGROUND attribute
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1" background'texture.jpg'gt lttrgt ltt
dgtrow 1, cell 1lt/tdgt lttdgtrow 1, cell
2lt/tdgt lt/trgt lttrgt lttdgtrow 2, cell
1lt/tdgt lttdgtrow 2, cell 2lt/tdgt lt/trgt lt/tab
legt lt/bodygt lt/htmlgt
55
HMTL Tables (ctn.)
The BACKGROUND attribute
texture.jpg
We actually typed on an image!
56
HMTL Tables (ctn.)
Integration
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttrgt lttdgtrow 1, cell
1lt/tdgt lttdgtlta href'http//yahoo.com'gtrow 1,
cell 2lt/agt lt/tdgt lt/trgt lttrgt lttdgtltigtr
ow 2, cell 1lt/igtlt/tdgt lttdgtltbgtrow 2, cell
2lt/bgtlt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
57
HMTL Tables (ctn.)
Integration
58
HMTL Tables (ctn.)
Integration2
lthtmlgt ltheadgtlt/headgt ltbodygt lttable
border"1"gt lttrgt lttdgtrow 1, cell
1lt/tdgt lttdgtrow 1, cell 2lt/tdgt lt/trgt lttrgt
lttdgtrow 2, cell 1lt/tdgt lttdgt lttable
border'1'gt lttrgtlttdgtCell 1lt/tdgtlt/trgt lt
trgtlttdgtCell 2lt/tdgtlt/trgt lt/tablegt lt/tdgt
lt/trgt lt/tablegt lt/bodygt lt/htmlgt
59
HMTL Tables (ctn.)
Integration2
Table 1
Table 2
60
2. HTML Head

• The head element contains general information,
  also called meta-information, about a document.
  Meta means "information about".
• You can say that meta-data means information
  about data, or meta-information means information
  about information.
• The elements inside the head element should not
  be displayed by a browser.
• According to the HTML standard, only a few tags
  are legal inside the head section. These are
  ltbasegt, ltlinkgt, ltmetagt, lttitlegt, ltstylegt, and
  ltscriptgt.

61
HTML Head (ctn.)

• Most often the meta element is used to provide
  information that is relevant to browsers or
  search engines like describing the content of
  your document.
• The syntax of the HTML Head is

ltheadgt lttitlegtTitle of documentlt/titlegt ltmeta
name"keyword" content"key1, key2,
key3"gtlt/metagt ltlink rel"stylesheet"
type"text/css" href"style.css"/gt ltbase
href"http//www.cs.dal.ca/images/"gtlt/basegt lt/hea
dgt
62
HTML Head (ctn.)
lthtmlgt ltheadgt lttitlegtTitle of
documentlt/titlegt ltmeta name"keyword"
content"key1, key2, key3"gtlt/metagt ltmeta
name"description" content"The
description"gtlt/metagt ltlink rel"stylesheet"
type"text/css" href"style.css"/gt ltbase
href"http//www.cs.dal.ca/images/"gtlt/basegt lt/he
adgt ltbodygt lt/bodygt lt/htmlgt
63
HTML Head (ctn.)
Only TITLE can be seen.
64
3. HTML Styles (CSS)

• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save you a lot of work
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into one

ltlink rel"stylesheet" type"text/css"
href"style.css"/gt
ltheadgtlt/headgt
style.css
page2.html
page3.html
page1.html
65
HTML Styles (ctn.)
HTML File
lthtmlgt ltheadgt ltlink rel"stylesheet"
type"text/css" href"style.css"/gt lt/headgt ltbo
dygt This is a free text in the
body. lttablegtlttrgtlttdgtThis is a text in a
TDlt/tdgtlt/trgtlt/tablegt lta href'http//yahoo.com'
class'myStyle'gtGoto Yahoo!lt/agt lt/bodygt lt/htmlgt
66
HTML Styles (ctn.)
CSS File (Style Sheet)
/ This is a Cascading Style Sheet
/ body font-family Verdana, Helvetica, Arial,
sans-serif font-size 14px font-weightbold
td font-family Arial, Verdana,
sans-serif font-size 9px colorFF0000 .m
yStyle font-family Verdana, Arial, Helvetica,
sans-serif color006699 text-decorationnone

67
HTML Styles (ctn.)
Body CSS
TD CSS
myStyle class CSS
68
HTML Styles (ctn.)
Embedded HTML Styles
lthtmlgt ltheadgt ltlink rel"stylesheet"
type"text/css" href"style.css"/gt lt/headgt ltbo
dygt This is a free text in the
body. lttablegtlttrgtlttdgtThis is a text in a
TDlt/tdgtlt/trgtlt/tablegt lta href'http//yahoo.com'
style'font-family Verdana, Arial, Helvetica,
sans-serif color006699 text- decorationnone'
gtGoto Yahoo!lt/agt lt/bodygt lt/htmlgt
69
Summary

• HTML Tables
• HTML Head
• HTML Styles (CSS)

70
Next Session

• HTML Forms (Get/Post)

71
Exercise

• Please refer to the available text file in the
  slides section for session 8 on the tutorials
  website
• http//flame.cs.dal.ca/kharrazi/teaching/hinf_62
  20/slides.php

72
Tutorial References

• Readings
• W3C Consortium
• http//www.w3.org/MarkUp/
• HTML 4.0 Reference
• http//www.htmlhelp.com/reference/html40/
• Online HTML Resources
• http//www.w3schools.com/html/default.asp