Y. Chen, Ph.D.

1
Chapter 2
HTML Review
Dynamic Web Page Design

• Y. Chen, Ph.D.

2

• Static Web Page
• Contains only text and markup text.
• No executable client or server scripts.
• A plain HTML document. Has .htm or .html file
  extension.
• A plain document dump from server.
• Dynamic Web Page
• Contains executable client or server scripts.
• Responses from a server depend on data in the
  page.
• Has file extensions as .asp, .aspx, .jsp, or .cgi.

3
(No Transcript)
4

• How HTML works?

5

• An HTML document contains text and HTML tags.
• Hello is the text.
• lthtmlgt and lt/htmlgt are the HTML tags.
• lthtmlgt indicates the start of a web page.
• lt/htmlgt indicates the end of a web page.

6

• HTML Tag Attributes
• The ltfontgt tag has attributes size and color.
• The size attribute specifies the size of a
  font.
• The color attribute specifies the color of a
  font.
• Usage ltfont size7 colorredgt
• Use a font of size 7 in red color.
• lt/fontgt indicates the end of the special font.

lthtmlgt ltfont size"7" color"red"gt
Hello lt/fontgt HTML lt/htmlgt
7

• Design tool Microsoft FrontPage 2002.

8

• Three View Mode (Tabs)
• Normal, design mode
• HTML, text mode
• Preview, preview mode

9

• Normal, Design mode

10

• HTML, Text Mode

11

• Preview, Preview Mode

12

• HTML Top Hierarchy

13

• HTML Top Level Tags

Tag Description
html Optional. ?lthtmlgt?and?lt/htmlgt?enclose an HTML document.
head Document heading. The Heading includes data like author, document date, title (indicated by?lttitlegt?tag), and other data useful for CGI scripts (indicated by?ltmetagt?tag).
body Document content used to be displayed in a browser.
14

• ltpgt, Paragraph
• ltbrgt, Line break

lthtmlgt ltfont size"7" color"red"gt Hello lt/fontgt H
TML ??? ???ltbrgt ???
??? ltpgt???lt/pgt lt/htmlgt
15
(No Transcript)
16

• ltfontgt, Set font and its color and size.

lthtmlgt ltfont size"1"gtsize"1"lt/fontgtltbrgt ltfont
size"2"gtsize"2"lt/fontgtltbrgt ltfont
size"3"gtsize"3"lt/fontgtltbrgt ltfont
size"4"gtsize"4"lt/fontgtltbrgt ltfont
size"5"gtsize"5"lt/fontgtltbrgt ltfont
size"6"gtsize"6"lt/fontgtltbrgt ltfont
size"7"gtsize"7"lt/fontgtltbrgt lt/htmlgt
17
(No Transcript)
18

• ltfontgt,?face?attribute determines the font used.

lthtmlgt ltfont size"5" face"???"gt???lt/fontgtltbrgt ltf
ont size"5" face"???"gt???lt/fontgt lt/htmlgt
19

• ltfontgt,?color?attribute determines the color of
  the font. Its value can be simple color name or a
  RGV value.

20
lthtmlgt ltfont color"FF0000"gtredlt/fontgtltbrgt ltfont
color"00FF00"gtgreenlt/fontgtltbrgt ltfont
color"0000FF"gtbluelt/fontgtltbrgt ltfont
color"red"gtredlt/fontgtltbrgt ltfont
color"green"gtgreenlt/fontgtltbrgt ltfont
color"blue"gtbluelt/fontgt lt/htmlgt
21
(No Transcript)
22

• ltbgt, bold
• ltigt, italic
• ltugt, underline

lthtmlgt ?????ltbrgt ltbgt?????lt/bgtltbrgt ltigt?????lt/igtltbrgt
ltugt?????lt/ugtltbrgt ltbgtltigtltugt?????????????lt/ugtlt/igtlt/
bgt lt/htmlgt
23
(No Transcript)
24

• lth1gtlth6gt, different levels of paragraph headings

lthtmlgt lth1gt???lt/h1gt lth2gt???lt/h2gt lth3gt???lt/h3gt lth4gt
???lt/h4gt lth5gt???lt/h5gt lth6gt???lt/h6gt lt/htmlgt
25

• lth1gtlth6gt

26

• ltblockquotegt, indented and quoted paragraph.

lthtmlgt .NET Framework???????? ltblockquotegt ?????C
LRltbrgt ??????????ltbrgt ?????ASP.NET lt/blockquotegt lt
/htmlgt
27

• ltblockquotegt

28

• ltolgt, ordered list

lthtmlgt .NET Framework???????? ltolgt ltligt?????CLRltb
rgt ??????????????????? ltligt??????????ltbrgt ????????
???????? ltligt?????ASP.NETltbrgt ASP.NET???????Web???
?????? lt/olgt lt/htmlgt
29

• ltolgt

30

• ltulgt, unordered list

31

• ltdivgt, division

lthtmlgt ltdiv align"right"gt .NET Framework????????
ltpgt?????CLRltbrgt ???????????????????lt/Pgt ltpgt??????
????ltbrgt ????????????????lt/pgt ltpgt?????ASP.NETltbrgt
ASP.NET???????Web?????????lt/pgt lt/divgt lt/htmlgt
32

• ltdivgt

33

• Other tags

lthtmlgt lt!-- ????, ???????, ?????
--gt ltbiggt?????lt/biggtltbrgt ltsmallgt?????lt/smallgtltbrgt
ltstronggt????lt/stronggtltbrgt ltemgt????lt/emgtltbrgt ltsgt???
?lt/sgtltbrgt lt/htmlgt
34
(No Transcript)
35

• lttablegt, table
• lttrgt, table row
• ltthgt, table heading
• lttdgt, table description

lthtmlgt lttable border"1"gt lttrgt
lttdgt??????lt/tdgt lttdgt??????lt/tdgt lt/trgt
lttrgt lttdgt??????lt/tdgt lttdgt??????lt/tdgt
lt/trgt lt/tablegt lt/htmlgt
36
(No Transcript)
37

• Table tag structure

38

• lttable aligngt

lthtmlgt lttable align"center" border"1"gt lttrgt
lttd align"right"gt??lt/tdgt lttd
align"left"gt??lt/tdgt lt/trgt lttr
align"center"gt lttdgt??lt/tdgt lttdgt??lt/tdgt
lt/trgt lttrgt lttdgt??????lt/tdgt
lttdgt??????lt/tdgt lt/trgt lt/tablegt lt/htmlgt
39
(No Transcript)
40

• lttable bgcolorgt

lthtmlgt lttable align"center" border"1"
bgcolor"cyan"gt lttr bgcolor"yellow"gt lttd
align"right"gt??lt/tdgt lttd align"left"gt??lt/tdgt
lt/trgt lttr align"center"gt lttd
bgcolor"red"gt??lt/tdgt lttdgt??lt/tdgt lt/trgt
lttrgt lttdgt??????lt/tdgt lttdgt??????lt/tdgt
lt/trgt lt/tablegt lt/htmlgt
41
(No Transcript)
42

• lttable cellpadding cellspacinggt

lthtmlgt lttable border"10" cellpadding"10"
cellspacing"10"gt lttrgt lttdgtXlt/tdgt
lt/trgt lt/tablegt lt/htmlgt
43

• lttable widthgt, width

lthtmlgt lttable align"center" border"1"
width"400"gt lttrgt lttdgt??????lt/tdgt
lttdgt??????lt/tdgt lt/trgt lt/tablegtltbrgt lttable
align"center" border"1" width"90"gt lttrgt
lttdgt??????lt/tdgt lttdgt??????lt/tdgt
lt/trgt lt/tablegt lt/htmlgt
44
(No Transcript)
45

• lttd rowspan colspangt, cell merge

lthtmlgt lttable border"1" width"100"gt lttrgt
lttd width"33" ?rowspan"2"?gt??????lt/tdgt lttd
width"66" ?colspan"2"?gt??????lt/tdgt lt/trgt
lttrgt lttd width"33"gt??????lt/tdgt lttd
width"33"gt??????lt/tdgt lt/trgt lt/tablegt lt/htmlgt
46
(No Transcript)
47

• Connect to a file, image, voice, or HTML document
  over the Internet by specify its?URL?(Uniform
  Resource Locator)?

48

• lta hrefgt, hyperlink
• lta hrefmailtogt, hyperlink with email

lthtmlgt lta href"http//www.flag.com.tw"gt ltimg
src"Train.jpg" width"76" height"83"gt lt/agtltbrgt lt
a href"H10.htm"gt?????H10lt/agtltbrgt lta
href"mailtovbdoctor_at_hotmail.com"gt????????lt/agtltbr
gt lta href"Train.jpg"gt??????lt/agt lt/htmlgt
49

• Addressing Methods
• Relative address (to the current HTML document).
• Absolute address (on the Internet).

50

• Same folder

• Different folder

51

• Parent folder

• Different web site www.microsoft.com

52

• ltimggt, image

lthtmlgt ltimg src"Train.jpg"gt lt/htmlgt
53
(No Transcript)