1 / 33

HTML 簡介

HTML 簡介. 鄧姚文 http://www.ywdeng.idv.tw. 大綱. 網際網路基本及資源 HTML 基本與操作環境 HTML 的基本語法熟悉與練習. Internet 基本簡介. Internet ( 網際網路 ): 連結全世界所有小型區域網路上的電腦達到資源共享的目的 全球資訊網 (World-Wide Web, WWW) 1989 年歐洲高能物理實驗室( CERN) 開始發展 透過超連結，將多媒體的各種資料型態透過簡單的介面在網路上呈現. URL (Universal Resource Locator, 一致資源定址器 ).

oleg-mcguire
Download Presentation

HTML 簡介

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. HTML簡介 鄧姚文 http://www.ywdeng.idv.tw

  2. 大綱 網際網路基本及資源 HTML基本與操作環境 HTML的基本語法熟悉與練習

  3. Internet 基本簡介 • Internet (網際網路): 連結全世界所有小型區域網路上的電腦達到資源共享的目的 • 全球資訊網(World-Wide Web, WWW) • 1989年歐洲高能物理實驗室(CERN)開始發展 • 透過超連結，將多媒體的各種資料型態透過簡單的介面在網路上呈現

  4. URL (Universal Resource Locator,一致資源定址器) • Internet表示網路資源種類與地址的方式 • Protocol(協定):協議公定的標準,如 • http (Hyper Text Transport Protocol) • ftp (File Transfer Protocol)等 • 例子 (可於瀏覽器網址部分輸入) • http://www.google.com.tw • ftp://ftp.isu.edu.tw • mailto:ywdeng@cc.ywdeng.idv.tw • telnet://bbs.ptt.cc

  5. 網頁的組成份子 • 文字：所有未規範的文字都會顯示在瀏覽器中 • 標籤：HyperTextMarkupLanguage的語法 • 單一標籤: 例如跳行<br />或水平橫線<hr /> • 成對標籤: • <b>粗體字</b> • <font>字型與大小設定</font> • 屬性標籤: • <hr size=3 /> • <font size=4 color="red">字型與大小設定</font>

  6. 網頁的組成份子(續) • 非文字內容：例如圖形、動畫或聲音檔案 • 程式碼： • 在瀏覽器上執行: JavaScript • 在伺服器端執行: PHP、ASP

  7. 網頁的架構: HTML樣本架構 <html> <head> <title> 這是標題，出現在瀏覽器標題列</title> </head> <body> 這裡是網頁的內容 </body> </html>

  8. 網頁的製作: 基本操作程序 開啟 Dreamwaever 『網站』\『管理網站』 新增『FTP & RDS 伺服器』

  9. 網頁的製作: 基本操作程序（續） 登入帳號為組長學號 從校外連線，務必勾選SFTP

  10. 網頁的製作: 基本操作程序（續） 在網站上開新檔案 輸入網頁內容 存檔（Ctrl+S） 以 IE 瀏覽器預覽（F12）

  11. 網頁的製作: 基本操作程序（續） 檢查結果，如果結果不如預期中地顯示，開始出現誤差處的程式部分即錯誤所在

  12. 段落標籤: <br>, <p>, <hr> • <br /> break 斷行，跳至下行 • <p> paragraph </p> 段落起迄 • <hr /> horizontal line 畫出水平橫線 • 例如修改<body> 中的文字成為 • <body>你好！<br/>這是第一個網頁。<p>段落一</p><hr />Hello!!</body>

  13. 網頁的製作: 常見錯誤自我檢視 • 檢查結果 • 成對標籤不成對? • 標籤不完整? • 檔案名稱及超連結中的檔名是否大小寫一致？ • 是否為相對路徑? • 路徑正確?

  14. 大小標籤: <h1>~<h6> • 修改 (至少用三個如 h1、h3、h6)、儲存並重新整理 • <body><h1> Don’t worry! </h1><br> <h3>This is just a test! </h3><p> <h6>OK?</h6> <hr>Hello??? • </body> • 檢查 h1 與 h3 誰大? H3 與 h6呢? • Done!

  15. 水平對齊 alignment • 使用屬性 • 置中 align=center • 置左 align=left • 置右 align=right • 範例 • <h1 align=center>最新消息</h1>

  16. 垂直對齊 vertical alignment • 使用屬性 • 靠上 valign=top • 靠中 valign=middle • 靠下 valign=bottom • 範例 • <td valign="top">400.3</td>

  17. 字型標籤: <font>~</font> • <font size=1 color=“red” face=“標楷體“>這是標楷體</font> • size • 1~7 或-3~+3 預設為 4 • color • "顏色字串"or #RRGGBB 16進位表示法 • R: Red; G: Green; B: Blue • 0~F 愈大 R/G/B 值愈大

  18. 文件格式 • 實體格式標籤 • <b>、<big>、<blink>、<i>、<small>、<sub>、<sup>、<tt>、<u> • 文意格式標籤 • <abbr>、<acronym>、<cite>、<code>、<dfn>、<em>、<kbd>、<samp>、<strong>、<var>

  19. 實體格式標籤 <b> 粗體字 <i> 斜體字 <big> 加大字體、<small> 縮小字體 <blink> 閃爍（Only for Firefox） <sub>下標 <sup>上標 <tt> 單行間距字型 <u> 加底線

  20. <b>粗體字</b> <i>斜體字</i> <big>加大字體</big> <small>縮小字體</small> <blink>閃爍</blink> <sub>下標</sub> <sup>上標</sup> <tt>單行間距字型</tt> <u>加底線</u>

  21. 文意格式標籤 <abbr> 縮寫 <acronym> 字母縮寫字 <cite> 引用 <code> 程式格式 <dfn> 定義 <em>、 <strong> 強調 <kbd> 鍵盤 <var> 變數

  22. <abbr>縮寫</abbr> <acronym>字母縮寫字</acronym> <cite>引用</cite> <code>程式格式</code> <dfn>定義</dfn> <em>em強調</em> <strong>strong強調</strong> <kbd>鍵盤</kbd> <var>變數</var>

  23. 排版用標籤 <br> 換行 <nobr>不換行 <wbr>找尋適當位置換行 <pre> 依照您的編排方式顯示 <center> 置中 <q> 引述 <address> 地址

  24. <br>換行<br>換行<nobr>不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行<wbr>找尋適當位置換行<br>換行<br>換行<br>換行<br>換行<nobr>不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行<wbr>找尋適當位置換行<br>換行<br>換行 <pre> 依照您的編排方式顯示 依照您的編排方式顯示 依照您的編排方式顯示 </pre> <center>置中置中置中置中置中置中置中置中</center> 引述 國父孫中山先生遺囑 <q>余致力國民革命，凡四十年，其目的在求中國之自由平等。積四十年之經驗，深知欲達到此目的，必須喚起民衆，及聯合世界上以平等待我之民族，共同奮鬥。</q> <address>11581 台北市南港區研究院路三段245號</address>

  25. 超連結標籤:<a>~</a>成對屬性標籤 <a href="http://www.google.com.tw">谷歌</a> <a href="mailto:ywdeng@cc.chit.edu.tw">寄信給鄧老師</a> <a href="test.htm">測試連結</a> <a href="woody.gif">動畫</a> <a href="chicken.wav">音效</a> a: anchor, href: hyper reference href 可設 URL、各種型態檔案、內部位置

  26. 超連結標籤:<a>~</a>成對屬性標籤 Target 屬性: _blank 開新視窗 _parent 上層頁框 _self 本頁框 _top 頂層頁框 frameName 特定頁框

  27. 路徑表示: 絕對與相對 • 連結檔案須知檔案之路徑 • 絕對途徑表示: 從磁碟機代號、根目錄以下的完整目錄及檔案皆顯示出 • C:\Inetpub\wwwroot\index.htm

  28. 路徑表示: 絕對與相對 (續) • 相對路徑表示: • 依目前瀏覽器呈現的網頁所在的磁碟機位置 “.”、上層目錄“..” 及部分目錄及檔案之顯示 • 例如：從 C:\Inetpub\wwwroot\proj1\test.htm 存取 C:\Inetpub\wwwroot\proj2\about.htm<a href="../proj2/about.htm"></a>

  29. 背景聲音與圖形 • 背景圖片： • <body background=“woody.gif”> …. </body> • 背景顏色： • <body bgcolor=“yellow”> …. </body> • 圖片/動畫 • <img src=“woody.gif”> • 背景聲音 • <bgsound src=“chicken.wav”>

  30. 清單條列標籤: <ol>~</ol> <ol> ordered list 有順序編號之清單 <li> 第一 </li> <li> 第二 </li> <li> 第三 </li> </ol>

  31. 清單條列標籤: <ul>~</ul> <ul> unordered list 無順序之項目清單 <li> Perl </li> <li> Python </li> <li> Ruby </li> </ul>

  32. 表格標籤: <table> ..</table> <table> <caption>學歷</caption> <tr> <!--table row--> <th> 學級</th> <th>學校</th> <!--table heading--> </tr> <tr> <td> 國小</td> <td> 永和國小、南門國小</td> </tr> <tr> <td> 國中</td> <td>南門國中</td> <!-- table data --> </tr> </table>

  33. 頁框:分割畫面 <frameset cols=“20%, 80%”> <frame name=“directory” src=“menu.html”> <frame name=“content” src=“con.htm”> </frameset> frameset 僅提供畫面分割之架構; 內容則由 menu.htm 及 con.htm 提供

More Related