chapter 2

Chapter 2Chapter 2

Dynamic Web Dynamic Web Page DesignPage DesignY. Chen, Ph.D.Y. Chen, Ph.D.

HTML ReviewHTML Review

2

Static Web PageStatic Web Page Contains only text and markup text.Contains only text and markup text. No executable client or server scripts.No executable client or server scripts. A plain HTML document. Has .htm or .html file extA plain HTML document. Has .htm or .html file ext

ension.ension. A plain document dump from server.A plain document dump from server.

Dynamic Web PageDynamic Web Page Contains executable client or server scripts.Contains executable client or server scripts. Responses from a server depend on data in the pResponses from a server depend on data in the p

age.age. Has file extensions as .asp, .aspx, .jsp, or .cgi.Has file extensions as .asp, .aspx, .jsp, or .cgi.

2-1 Static versus Dynamic Web 2-1 Static versus Dynamic Web PagePage

3

2-1 Dynamic Web Page2-1 Dynamic Web Page

4

How HTML How HTML works?works?

2-2 Static Web Page2-2 Static Web Page

5

An HTML document contains text and An HTML document contains text and HTML tags.HTML tags. ““Hello” is the text.Hello” is the text. <html> and </html> are the HTML tags.<html> and </html> are the HTML tags.

<html> indicates the start of a web page.<html> indicates the start of a web page. </html> indicates the end of a web page.</html> indicates the end of a web page.


6

HTML Tag AttributesHTML Tag Attributes The <font> tag has attributes “size” and “color”.The <font> tag has attributes “size” and “color”.

The “size” attribute specifies the size of a font.The “size” attribute specifies the size of a font. The “color” attribute specifies the color of a The “color” attribute specifies the color of a

font.font. Usage: <font size=“7” color=“red”>Usage: <font size=“7” color=“red”>

Use a font of size 7 in red color.Use a font of size 7 in red color. </font> indicates the end of the special font.</font> indicates the end of the special font.


<html><html><font size="7" color="red"><font size="7" color="red"> HelloHello</font></font> HTMLHTML</html></html>

<html><html><font size="7" color="red"><font size="7" color="red"> HelloHello</font></font> HTMLHTML</html></html>

7

Design tool: Microsoft FrontPage 2002.Design tool: Microsoft FrontPage 2002.


8

Three View Mode (Tabs)Three View Mode (Tabs) Normal, design modeNormal, design mode HTML, text modeHTML, text mode Preview, preview modePreview, preview mode


9

Normal, Design mode Normal, Design mode


10

HTML, Text Mode HTML, Text Mode


11

Preview, Preview Mode Preview, Preview Mode


12

HTML Top HierarchyHTML Top Hierarchy ：： 2-2 Static Web Page2-2 Static Web Page

13

HTML Top Level TagsHTML Top Level Tags ：：


TagTag DescriptionDescription

htmlhtml Optional. Optional. 「「 <html><html>」」 andand「「 </html></html>」」 enclose an enclose an HTML document.HTML document.

headhead

Document heading. The Heading includes data like aDocument heading. The Heading includes data like author, document date, title (indicated byuthor, document date, title (indicated by 「「 <title><title>」」 ttag), and other data useful for CGI scripts (indicated bag), and other data useful for CGI scripts (indicated byy「「 <meta><meta>」」 tag).tag).

bodybody Document content used to be displayed in a browser. Document content used to be displayed in a browser.

14

<p>, Paragraph<p>, Paragraph <br>, Line break<br>, Line break

2-3 Common HTML Tags2-3 Common HTML Tags

<html><html><font size="7" color="red"><font size="7" color="red">HelloHello</font></font>HTML HTML 第一行第一行第二行第二行 <br><br>第三行第四行第三行第四行<p><p> 第五行第五行 </p></p></html></html>

<html><html><font size="7" color="red"><font size="7" color="red">HelloHello</font></font>HTML HTML 第一行第一行第二行第二行 <br><br>第三行第四行第三行第四行<p><p> 第五行第五行 </p></p></html></html>

15


16

<font>, Set font and its color and size.<font>, Set font and its color and size.


<html><html><font size="1">size="1"</font><br><font size="1">size="1"</font><br><font size="2">size="2"</font><br><font size="2">size="2"</font><br><font size="3">size="3"</font><br><font size="3">size="3"</font><br><font size="4">size="4"</font><br><font size="4">size="4"</font><br><font size="5">size="5"</font><br><font size="5">size="5"</font><br><font size="6">size="6"</font><br><font size="6">size="6"</font><br><font size="7">size="7"</font><br><font size="7">size="7"</font><br></html></html>

<html><html><font size="1">size="1"</font><br><font size="1">size="1"</font><br><font size="2">size="2"</font><br><font size="2">size="2"</font><br><font size="3">size="3"</font><br><font size="3">size="3"</font><br><font size="4">size="4"</font><br><font size="4">size="4"</font><br><font size="5">size="5"</font><br><font size="5">size="5"</font><br><font size="6">size="6"</font><br><font size="6">size="6"</font><br><font size="7">size="7"</font><br><font size="7">size="7"</font><br></html></html>

17


18

<font>,<font>, 「「 faceface 」」 attribute determines the font useattribute determines the font used.d.

2-3 Common HTML tags2-3 Common HTML tags

<html><html><font size="5" face="<font size="5" face=" 細明體細明體 ">"> 細明體細明體 </font><br></font><br><font size="5" face="<font size="5" face=" 標楷體標楷體 ">"> 標楷體標楷體 </font></font></html></html>

<html><html><font size="5" face="<font size="5" face=" 細明體細明體 ">"> 細明體細明體 </font><br></font><br><font size="5" face="<font size="5" face=" 標楷體標楷體 ">"> 標楷體標楷體 </font></font></html></html>

19

<font>,<font>, 「「 colorcolor 」」 attribute determines tattribute determines the color of the font. Its value can be simplhe color of the font. Its value can be simple color name or a RGV value.e color name or a RGV value.


20


<html><html><font color="#FF0000">red</font><br><font color="#FF0000">red</font><br><font color="#00FF00">green</font><br><font color="#00FF00">green</font><br><font color="#0000FF">blue</font><br><font color="#0000FF">blue</font><br><font color="red">red</font><br><font color="red">red</font><br><font color="green">green</font><br><font color="green">green</font><br><font color="blue">blue</font><font color="blue">blue</font></html></html>

<html><html><font color="#FF0000">red</font><br><font color="#FF0000">red</font><br><font color="#00FF00">green</font><br><font color="#00FF00">green</font><br><font color="#0000FF">blue</font><br><font color="#0000FF">blue</font><br><font color="red">red</font><br><font color="red">red</font><br><font color="green">green</font><br><font color="green">green</font><br><font color="blue">blue</font><font color="blue">blue</font></html></html>

21


22

<b>, bold<b>, bold <i>, italic<i>, italic <u>, underline<u>, underline


<html><html>正常字示範正常字示範 <br><br><b><b> 粗體字示範粗體字示範 </b><br></b><br><i><i> 斜體字示範斜體字示範 </i><br></i><br><u><u> 底線字示範底線字示範 </u><br></u><br><b><i><u><b><i><u> 正常字加粗體字加底線字示範正常字加粗體字加底線字示範 </u></i></b></u></i></b></html></html>

<html><html>正常字示範正常字示範 <br><br><b><b> 粗體字示範粗體字示範 </b><br></b><br><i><i> 斜體字示範斜體字示範 </i><br></i><br><u><u> 底線字示範底線字示範 </u><br></u><br><b><i><u><b><i><u> 正常字加粗體字加底線字示範正常字加粗體字加底線字示範 </u></i></b></u></i></b></html></html>

23


24

<h1><h1> ～～ <h6>, different levels of paragra<h6>, different levels of paragraph headings ph headings


<html><html><h1><h1> 標題一標題一 </h1></h1><h2><h2> 標題二標題二 </h2></h2><h3><h3> 標題三標題三 </h3></h3><h4><h4> 標題四標題四 </h4></h4><h5><h5> 標題五標題五 </h5></h5><h6><h6> 標題六標題六 </h6></h6></html></html>

<html><html><h1><h1> 標題一標題一 </h1></h1><h2><h2> 標題二標題二 </h2></h2><h3><h3> 標題三標題三 </h3></h3><h4><h4> 標題四標題四 </h4></h4><h5><h5> 標題五標題五 </h5></h5><h6><h6> 標題六標題六 </h6></h6></html></html>

25

<h1><h1> ～～ <h6><h6>2-3 Common HTML Tags2-3 Common HTML Tags

26

<blockquote>, indented and quoted p<blockquote>, indented and quoted paragraph. aragraph.


<html><html>.NET Framework.NET Framework 總共分為三大部分總共分為三大部分 <blockquote><blockquote>第一部份是第一部份是 CLR<br>CLR<br>第二部分是基底物件庫第二部分是基底物件庫 <br><br>第三部分是第三部分是 ASP.NETASP.NET</blockquote></blockquote></html></html>

<html><html>.NET Framework.NET Framework 總共分為三大部分總共分為三大部分 <blockquote><blockquote>第一部份是第一部份是 CLR<br>CLR<br>第二部分是基底物件庫第二部分是基底物件庫 <br><br>第三部分是第三部分是 ASP.NETASP.NET</blockquote></blockquote></html></html>

27

<blockquote><blockquote>


28

<ol>, ordered list<ol>, ordered list


<html><html>.NET Framework.NET Framework 總共分為三大部分總共分為三大部分 <ol><ol><li><li> 第一部份是第一部份是 CLR<br>CLR<br>所有的程式語言都共同使用單一的執行時期所有的程式語言都共同使用單一的執行時期<li><li> 第二部分是基底物件庫第二部分是基底物件庫 <br><br>所有的程式語言都使用相同的物件庫所有的程式語言都使用相同的物件庫<li><li> 第三部分是第三部分是 ASP.NET<br>ASP.NET<br>ASP.NETASP.NET 最主要提供建構最主要提供建構 WebWeb 應用程式的基礎架構應用程式的基礎架構</ol></ol></html></html>

<html><html>.NET Framework.NET Framework 總共分為三大部分總共分為三大部分 <ol><ol><li><li> 第一部份是第一部份是 CLR<br>CLR<br>所有的程式語言都共同使用單一的執行時期所有的程式語言都共同使用單一的執行時期<li><li> 第二部分是基底物件庫第二部分是基底物件庫 <br><br>所有的程式語言都使用相同的物件庫所有的程式語言都使用相同的物件庫<li><li> 第三部分是第三部分是 ASP.NET<br>ASP.NET<br>ASP.NETASP.NET 最主要提供建構最主要提供建構 WebWeb 應用程式的基礎架構應用程式的基礎架構</ol></ol></html></html>

29

<ol><ol>2-3 Common HTML Tags2-3 Common HTML Tags

30

2-3 Common HTML Tags2-3 Common HTML Tags <ul>, unordered list<ul>, unordered list

31

<div>, division<div>, division


<html><html><div align="right"><div align="right">.NET Framework.NET Framework 總共分為三大部分總共分為三大部分 <p><p> 第一部份是第一部份是 CLR<br>CLR<br>所有的程式語言都共同使用單一的執行時期所有的程式語言都共同使用單一的執行時期 </P></P><p><p> 第二部分是基底物件庫第二部分是基底物件庫 <br><br>所有的程式語言都使用相同的物件庫所有的程式語言都使用相同的物件庫 </p></p><p><p> 第三部分是第三部分是 ASP.NET<br>ASP.NET<br>ASP.NETASP.NET 最主要提供建構最主要提供建構 WebWeb 應用程式的基礎架構應用程式的基礎架構 </p></p></div></div></html></html>

<html><html><div align="right"><div align="right">.NET Framework.NET Framework 總共分為三大部分總共分為三大部分 <p><p> 第一部份是第一部份是 CLR<br>CLR<br>所有的程式語言都共同使用單一的執行時期所有的程式語言都共同使用單一的執行時期 </P></P><p><p> 第二部分是基底物件庫第二部分是基底物件庫 <br><br>所有的程式語言都使用相同的物件庫所有的程式語言都使用相同的物件庫 </p></p><p><p> 第三部分是第三部分是 ASP.NET<br>ASP.NET<br>ASP.NETASP.NET 最主要提供建構最主要提供建構 WebWeb 應用程式的基礎架構應用程式的基礎架構 </p></p></div></div></html></html>

32

<div><div>


33

Other tags:Other tags:


<html><html>--><big><big> 這是大型字這是大型字 </big><br></big><br><small><small> 這是小字型這是小字型 </small><br></small><br><strong><strong> 粗體強調粗體強調 </strong><br></strong><br><em><em> 斜體強調斜體強調 </em><br></em><br><s><s> 刪除文字刪除文字 </s><br></s><br></html></html>

<html><html>--><big><big> 這是大型字這是大型字 </big><br></big><br><small><small> 這是小字型這是小字型 </small><br></small><br><strong><strong> 粗體強調粗體強調 </strong><br></strong><br><em><em> 斜體強調斜體強調 </em><br></em><br><s><s> 刪除文字刪除文字 </s><br></s><br></html></html>

34


35

<table>, table<table>, table <tr>, table row<tr>, table row <th>, table heading<th>, table heading <td>, table description <td>, table description


<html><html><table border="1"><table border="1"> <tr><tr> <td><td> 第一列第一欄第一列第一欄 </td></td> <td><td> 第一列第二欄第一列第二欄 </td></td> </tr></tr> <tr><tr> <td><td> 第二列第一欄第二列第一欄 </td></td> <td><td> 第二列第二欄第二列第二欄 </td></td> </tr></tr></table></table></html></html>

<html><html><table border="1"><table border="1"> <tr><tr> <td><td> 第一列第一欄第一列第一欄 </td></td> <td><td> 第一列第二欄第一列第二欄 </td></td> </tr></tr> <tr><tr> <td><td> 第二列第一欄第二列第一欄 </td></td> <td><td> 第二列第二欄第二列第二欄 </td></td> </tr></tr></table></table></html></html>

36


37

Table tag structureTable tag structure ：：


38

<table align=“”><table align=“”>


<html><html><table align="center" border="1"><table align="center" border="1"> <tr><tr> <td align="right"><td align="right"> 靠右靠右 </td></td> <td align="left"><td align="left"> 靠左靠左 </td></td> </tr></tr> <tr align="center"><tr align="center"> <td><td> 靠中靠中 </td></td> <td><td> 靠中靠中 </td></td> </tr></tr> <tr><tr> <td><td> 第三列第一欄第三列第一欄 </td></td> <td><td> 第三列第二欄第三列第二欄 </td></td> </tr></tr></table></table></html></html>

<html><html><table align="center" border="1"><table align="center" border="1"> <tr><tr> <td align="right"><td align="right"> 靠右靠右 </td></td> <td align="left"><td align="left"> 靠左靠左 </td></td> </tr></tr> <tr align="center"><tr align="center"> <td><td> 靠中靠中 </td></td> <td><td> 靠中靠中 </td></td> </tr></tr> <tr><tr> <td><td> 第三列第一欄第三列第一欄 </td></td> <td><td> 第三列第二欄第三列第二欄 </td></td> </tr></tr></table></table></html></html>

39


40

<table bgcolor=“”><table bgcolor=“”>2-3 Common HTML Tags2-3 Common HTML Tags

<html><html><table align="center" border="1" bgcolor="cyan"><table align="center" border="1" bgcolor="cyan"> <tr bgcolor="yellow"><tr bgcolor="yellow"> <td align="right"><td align="right"> 靠右靠右 </td></td> <td align="left"><td align="left"> 靠左靠左 </td></td> </tr></tr> <tr align="center"><tr align="center"> <td bgcolor="red"><td bgcolor="red"> 靠中靠中 </td></td> <td><td> 靠中靠中 </td></td> </tr></tr> <tr><tr> <td><td> 第三列第一欄第三列第一欄 </td></td> <td><td> 第三列第二欄第三列第二欄 </td></td> </tr></tr></table></table></html></html>

<html><html><table align="center" border="1" bgcolor="cyan"><table align="center" border="1" bgcolor="cyan"> <tr bgcolor="yellow"><tr bgcolor="yellow"> <td align="right"><td align="right"> 靠右靠右 </td></td> <td align="left"><td align="left"> 靠左靠左 </td></td> </tr></tr> <tr align="center"><tr align="center"> <td bgcolor="red"><td bgcolor="red"> 靠中靠中 </td></td> <td><td> 靠中靠中 </td></td> </tr></tr> <tr><tr> <td><td> 第三列第一欄第三列第一欄 </td></td> <td><td> 第三列第二欄第三列第二欄 </td></td> </tr></tr></table></table></html></html>

41


42

<table cellpadding=“” cellspacing=“”> <table cellpadding=“” cellspacing=“”> 2-3 Common HTML Tags2-3 Common HTML Tags

<html><html><table border="10" cellpadding="10" cellspacing="10"><table border="10" cellpadding="10" cellspacing="10"> <tr><tr> <td>X</td><td>X</td> </tr></tr></table></table></html></html>

<html><html><table border="10" cellpadding="10" cellspacing="10"><table border="10" cellpadding="10" cellspacing="10"> <tr><tr> <td>X</td><td>X</td> </tr></tr></table></table></html></html>

43

<table width=“”>, width<table width=“”>, width


<html><html><table align="center" border="1" width="400"><table align="center" border="1" width="400"> <tr><tr> <td><td> 第一列第一欄第一列第一欄 </td></td> <td><td> 第一列第二欄第一列第二欄 </td></td> </tr></tr></table><br></table><br><table align="center" border="1" width="90%"><table align="center" border="1" width="90%"> <tr><tr> <td><td> 第一列第一欄第一列第一欄 </td></td> <td><td> 第一列第二欄第一列第二欄 </td></td> </tr></tr></table></table></html></html>

<html><html><table align="center" border="1" width="400"><table align="center" border="1" width="400"> <tr><tr> <td><td> 第一列第一欄第一列第一欄 </td></td> <td><td> 第一列第二欄第一列第二欄 </td></td> </tr></tr></table><br></table><br><table align="center" border="1" width="90%"><table align="center" border="1" width="90%"> <tr><tr> <td><td> 第一列第一欄第一列第一欄 </td></td> <td><td> 第一列第二欄第一列第二欄 </td></td> </tr></tr></table></table></html></html>

44


45

<td rowspan=“” colspan=“”>, cell merge <td rowspan=“” colspan=“”>, cell merge 2-3 Common HTML Tags2-3 Common HTML Tags

<html><html><table border="1" width="100%"><table border="1" width="100%"> <tr><tr> <td width="33%" <td width="33%" 【【 rowspan="2"rowspan="2" 】】 >> 第一列第一欄第一列第一欄 </td></td> <td width="66%" <td width="66%" 【【 colspan="2"colspan="2" 】】 >> 第一列第二欄第一列第二欄 </td></td> </tr></tr> <tr><tr> <td width="33%"><td width="33%"> 第二列第二欄第二列第二欄 </td></td> <td width="33%"><td width="33%"> 第二列第三欄第二列第三欄 </td></td> </tr></tr></table></table></html></html>

<html><html><table border="1" width="100%"><table border="1" width="100%"> <tr><tr> <td width="33%" <td width="33%" 【【 rowspan="2"rowspan="2" 】】 >> 第一列第一欄第一列第一欄 </td></td> <td width="66%" <td width="66%" 【【 colspan="2"colspan="2" 】】 >> 第一列第二欄第一列第二欄 </td></td> </tr></tr> <tr><tr> <td width="33%"><td width="33%"> 第二列第二欄第二列第二欄 </td></td> <td width="33%"><td width="33%"> 第二列第三欄第二列第三欄 </td></td> </tr></tr></table></table></html></html>

46


47

Connect to a file, image, voice, or HTML Connect to a file, image, voice, or HTML document over the Internet by specify idocument over the Internet by specify itsts 「「 URLURL 」（」（ Uniform Resource LocatUniform Resource Locatoror ）。）。

2-4 Hyperlink2-4 Hyperlink

48

<a href=“”>, hyperlink<a href=“”>, hyperlink <a href=mailto:>, hyperlink with email


<html><html><a href="http://www.flag.com.tw"><a href="http://www.flag.com.tw"><img src="Train.jpg" width="76" height="83"><img src="Train.jpg" width="76" height="83"></a><br></a><br><a href="H10.htm"><a href="H10.htm"> 請按這裡到請按這裡到 H10</a><br>H10</a><br><a href="mailto:[email protected]"><a href="mailto:[email protected]"> 請按這裡寄信給我請按這裡寄信給我 </a><br</a><br>><a href="Train.jpg"><a href="Train.jpg"> 顯示火車圖形顯示火車圖形 </a></a></html></html>

<html><html><a href="http://www.flag.com.tw"><a href="http://www.flag.com.tw"><img src="Train.jpg" width="76" height="83"><img src="Train.jpg" width="76" height="83"></a><br></a><br><a href="H10.htm"><a href="H10.htm"> 請按這裡到請按這裡到 H10</a><br>H10</a><br><a href="mailto:[email protected]"><a href="mailto:[email protected]"> 請按這裡寄信給我請按這裡寄信給我 </a><br</a><br>><a href="Train.jpg"><a href="Train.jpg"> 顯示火車圖形顯示火車圖形 </a></a></html></html>

49

Addressing Addressing MethodsMethods

Relative address Relative address (to the current (to the current HTML document).HTML document).

Absolute address Absolute address (on the Internet).(on the Internet).


50

Same Same folderfolder

Different folderDifferent folder


51

Parent folderParent folder Different web site: wwDifferent web site: www.microsoft.comw.microsoft.com


52

<img>, image<img>, image


<html><html><img src="Train.jpg"><img src="Train.jpg"></html></html>

<html><html><img src="Train.jpg"><img src="Train.jpg"></html></html>

53


chapter 2

Documents

font of size

html tags

plain html document

size attribute

current html document

hierarchy html

html works

attributes size