1 / 53

Chapter 2

Chapter 2. HTML Review. Dynamic Web Page Design. Y. Chen, Ph.D. 2-1 Static versus Dynamic Web Page. 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.

shannon-dominguez
Download Presentation

Chapter 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 2 HTML Review Dynamic Web Page Design Y. Chen, Ph.D.

  2. 2-1 Static versus Dynamic Web Page • 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. 2-1 Dynamic Web Page

  4. 2-2 Static Web Page • How HTML works?

  5. 2-2 Static Web Page • An HTML document contains text and HTML tags. • “Hello” is the text. • <html> and </html> are the HTML tags. • <html> indicates the start of a web page. • </html> indicates the end of a web page.

  6. 2-2 Static Web Page • HTML Tag Attributes • The <font> 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: <font size=“7” color=“red”> • Use a font of size 7 in red color. • </font> indicates the end of the special font. <html> <font size="7" color="red"> Hello </font> HTML </html>

  7. 2-2 Static Web Page • Design tool: Microsoft FrontPage 2002.

  8. 2-2 Static Web Page • Three View Mode (Tabs) • Normal, design mode • HTML, text mode • Preview, preview mode

  9. 2-2 Static Web Page • Normal, Design mode

  10. 2-2 Static Web Page • HTML, Text Mode

  11. 2-2 Static Web Page • Preview, Preview Mode

  12. 2-2 Static Web Page • HTML Top Hierarchy：

  13. 2-2 Static Web Page • HTML Top Level Tags：

  14. 2-3 Common HTML Tags • <p>, Paragraph • <br>, Line break <html> <font size="7" color="red"> Hello </font> HTML 第一行 第二行<br> 第三行 第四行 <p>第五行</p> </html>

  15. 2-3 Common HTML Tags

  16. 2-3 Common HTML Tags • <font>, Set font and its color and size. <html> <font size="1">size="1"</font><br> <font size="2">size="2"</font><br> <font size="3">size="3"</font><br> <font size="4">size="4"</font><br> <font size="5">size="5"</font><br> <font size="6">size="6"</font><br> <font size="7">size="7"</font><br> </html>

  17. 2-3 Common HTML Tags

  18. 2-3 Common HTML tags <html> <font size="5" face="細明體">細明體</font><br> <font size="5" face="標楷體">標楷體</font> </html> • <font>,「face」attribute determines the font used.

  19. 2-3 Common HTML Tags • <font>,「color」attribute determines the color of the font. Its value can be simple color name or a RGV value.

  20. 2-3 Common HTML Tags <html> <font color="#FF0000">red</font><br> <font color="#00FF00">green</font><br> <font color="#0000FF">blue</font><br> <font color="red">red</font><br> <font color="green">green</font><br> <font color="blue">blue</font> </html>

  21. 2-3 Common HTML Tags

  22. 2-3 Common HTML Tags • <b>, bold • <i>, italic • <u>, underline <html> 正常字示範<br> <b>粗體字示範</b><br> <i>斜體字示範</i><br> <u>底線字示範</u><br> <b><i><u>正常字加粗體字加底線字示範</u></i></b> </html>

  23. 2-3 Common HTML Tags

  24. 2-3 Common HTML Tags • <h1>～<h6>, different levels of paragraph headings <html> <h1>標題一</h1> <h2>標題二</h2> <h3>標題三</h3> <h4>標題四</h4> <h5>標題五</h5> <h6>標題六</h6> </html>

  25. 2-3 Common HTML Tags • <h1>～<h6>

  26. 2-3 Common HTML Tags • <blockquote>, indented and quoted paragraph. <html> .NET Framework總共分為三大部分 <blockquote> 第一部份是CLR<br> 第二部分是基底物件庫<br> 第三部分是ASP.NET </blockquote> </html>

  27. 2-3 Common HTML Tags • <blockquote>

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

  29. 2-3 Common HTML Tags • <ol>

  30. 2-3 Common HTML Tags • <ul>, unordered list

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

  32. 2-3 Common HTML Tags • <div>

  33. 2-3 Common HTML Tags • Other tags: <html> <!-- 這是註解, 給開發人員看的, 不會被解譯 --> <big>這是大型字</big><br> <small>這是小字型</small><br> <strong>粗體強調</strong><br> <em>斜體強調</em><br> <s>刪除文字</s><br> </html>

  34. 2-3 Common HTML Tags

  35. 2-3 Common HTML Tags • <table>, table • <tr>, table row • <th>, table heading • <td>, table description <html> <table border="1"> <tr> <td>第一列第一欄</td> <td>第一列第二欄</td> </tr> <tr> <td>第二列第一欄</td> <td>第二列第二欄</td> </tr> </table> </html>

  36. 2-3 Common HTML Tags

  37. 2-3 Common HTML Tags • Table tag structure：

  38. 2-3 Common HTML Tags <html> <table align="center" border="1"> <tr> <td align="right">靠右</td> <td align="left">靠左</td> </tr> <tr align="center"> <td>靠中</td> <td>靠中</td> </tr> <tr> <td>第三列第一欄</td> <td>第三列第二欄</td> </tr> </table> </html> • <table align=“”>

  39. 2-3 Common HTML Tags

  40. 2-3 Common HTML Tags <html> <table align="center" border="1" bgcolor="cyan"> <tr bgcolor="yellow"> <td align="right">靠右</td> <td align="left">靠左</td> </tr> <tr align="center"> <td bgcolor="red">靠中</td> <td>靠中</td> </tr> <tr> <td>第三列第一欄</td> <td>第三列第二欄</td> </tr> </table> </html> • <table bgcolor=“”>

  41. 2-3 Common HTML Tags

  42. 2-3 Common HTML Tags <html> <table border="10" cellpadding="10" cellspacing="10"> <tr> <td>X</td> </tr> </table> </html> • <table cellpadding=“” cellspacing=“”>

  43. 2-3 Common HTML Tags <html> <table align="center" border="1" width="400"> <tr> <td>第一列第一欄</td> <td>第一列第二欄</td> </tr> </table><br> <table align="center" border="1" width="90%"> <tr> <td>第一列第一欄</td> <td>第一列第二欄</td> </tr> </table> </html> • <table width=“”>, width

  44. 2-3 Common HTML Tags

  45. 2-3 Common HTML Tags <html> <table border="1" width="100%"> <tr> <td width="33%" 【rowspan="2"】>第一列第一欄</td> <td width="66%" 【colspan="2"】>第一列第二欄</td> </tr> <tr> <td width="33%">第二列第二欄</td> <td width="33%">第二列第三欄</td> </tr> </table> </html> • <td rowspan=“” colspan=“”>, cell merge

  46. 2-3 Common HTML Tags

  47. 2-4 Hyperlink • Connect to a file, image, voice, or HTML document over the Internet by specify its「URL」（Uniform Resource Locator）。

  48. 2-4 Hyperlink • <a href=“”>, hyperlink • <a href=mailto:>, hyperlink with email <html> <a href="http://www.flag.com.tw"> <img src="Train.jpg" width="76" height="83"> </a><br> <a href="H10.htm">請按這裡到H10</a><br> <a href="mailto:vbdoctor@hotmail.com">請按這裡寄信給我</a><br> <a href="Train.jpg">顯示火車圖形</a> </html>

  49. 2-4 Hyperlink Addressing Methods • Relative address (to the current HTML document). • Absolute address (on the Internet).

  50. 2-4 Hyperlink • Different folder • Same folder

More Related