基礎網 頁設計 第四週 老師 : 蔡承洋
大綱 HTML 標籤 元素 屬性 常 用標籤 標籤屬性 網 頁檔案命名 網站資料夾與檔案路徑關連 課後作業
HTML 標籤 元素 屬性
tag 標籤 <title> 使 用 < > 包起來, 包住的是 tag 名稱 http://www.w3schools.com/tags/ 所有 tag 列表 element 元素 開始標籤 <p> 我是 一段 文字 </p> 內容 開始標籤 無結尾 tag 的標籤 :<br> <img> <hr> <link> <meta> attribute 屬性 <p id="first"> 我是 一段 文字 </p>
tag 標籤 <title> 使 用 < > 包起來, 包住的是 tag 名稱 http://www.w3schools.com/tags/ 所有 tag 列表 element 元素 開始標籤 <p> 我是 一段 文字 </p> 內容 開始標籤 無結尾 tag 的標籤 :<br> <img> <hr> <link> <meta> attribute 屬性 <p id="first"> 我是 一段 文字 </p>
基本標籤內容 宣告檔案 文件為 HTML5 指定語 言為繁中 ( 簡中為 zh-cn),html 文件開始 <!DOCTYPE html> <html lang="zh-tw"> <head> 文件編碼設定為 utf-8 <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <title> 我是標題 </title> 網 頁標題 <link rel="shortcut icon" href="favicon.ico" /> <link rel="stylesheet" href="css/style.css"> <script src="js/base.js"></script> </head> 文件標頭結束網站內容開始 <body> <!-- 網站內容撰寫的地 方 --> </body> </html> 網站內容開始 文件標頭開始 腳本標籤, 外部連結 JS 讓 IE 瀏覽器可以模擬 Chrome 瀏覽器 外部連結網 頁 icon 外部連結 CSS html 文件結束
文章中有多個空 白, 瀏覽器只會顯 示 一個 必須使 用特殊符號 一段 文字要斷 行, 直接按 enter 是沒效的, 必須使 用 <br> 標籤 請看本週原始碼 p.html 檔案
常 用標籤
常 用 html 標籤 標籤名稱功能範例位置 <meta charset="utf-8"> <meta> 文件資料 <meta name="description" content=" 網站描述 "> head <meta name="keywords" content=" 網站關鍵字 "> <title></title> 文件標題 <title> 我的網 頁標題 </title> head <link> 外部連結 <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="css/style.css"> head body <script></script> javascript 語 言腳本 <script src="js/base.js"></script> <script> alert('hello!'); </script> head body
常 用 html 標籤 標籤名稱功能範例位置 <p></p> 換 行段落 <p> 大家好, 我是段落標籤 </p> body <p> <span></span> 內 行我是段落中 <span style="color:red">span 部分 </span> 文字 body </p> <div> <div></div> 區塊 <p> 大家好, 我是區塊中的段落標籤 </p> body </div> <a></a> 超連結 <a href="http://google.com">google 網站 </a> body <br> 斷 行 這是 一個 <br> 斷 行句 子 body <img> 圖 片 <img src='https://www.google.com.tw/images/srpr/logo11w.png'> body
常 用 html 標籤 標籤名稱功能範例位置 <table> <tbody> <tr> <td></td> </tr> </tbody> </table> 表格 <table> <tbody> <tr> <td> 第 一 行, 第 一欄 </td> <td> 第 一 行, 第 二欄 </td> </tr> <tr> <td> 第 二 行, 第 一欄 </td> <td> 第 二 行, 第 二欄 </td> </tr> </tbody> </table> body <ul> <li></li> </ul> 列表 <ul> <li> 第 一項 </li> <li> 第 二項 </li> </ul> body <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 標題 <h1> 標題 1 級 </h1> <h2> 標題 2 級 </h2> <h3> 標題 3 級 </h3> <h4> 標題 4 級 </h4> <h5> 標題 5 級 </h5> <h6> 標題 6 級 </h6> body
標籤屬性
在標籤上, 加上 id 或者 class 來進 行識別 <div> </div> <div class='info'> </div> <div id='box'> </div> 內部 css 樣式設定時也可以 用到 <p style="color:#aabbcc"> 文字顏 色 1</p> <p style="color:#aa22bb;font-size:16px;"> 文字顏 色 2, 包含 大 小 </p> 以及 javascript 取得元素時使 用 <div class='info'> <a href='http://yo.com'>yo~yo~</a> </div> <script> alert($("div.info").html()); </script>
<div id="mydiv"> <p id="p1"> 大家好, 我是段落標籤 一 </p> </div> <div id="mydiv"> <p> 大家好, 我是段落標籤 二 </p> </div> id="mydiv" id 為唯 一性, 不可重複 css 選擇時, 以 #mydiv 表 示 <div class="myclass"> <p class="p3"> 大家好, 我是段落標籤三 </p> </div> <div class="myclass"> <p class="p4"> 大家好, 我是段落標籤四 </p> </div> class="mydiv" class 類別, 可重複性 css 選擇時, 以.mydiv 表 示
網 頁檔案命名
任何 web server 預設的第 一個網 頁檔名 index 如 index.html index 常 用在 首 頁, 由於是預設 頁, 所以瀏覽時可以不 用輸 入
那除了 首 頁以外, 其他的 頁 面怎樣命名呢? 答案 : 自 己定義, 建議命名規則如下 照 頁 面的內容取個名字, 翻成英 文當成檔案名稱 全使 用英 文 小寫 請不要 用中 文, 圖檔也不要 用中 文 若檔名使 用兩個以上單字, 請 用底線 _ 隔開 不要做沒意義的檔名,ex: aaa.html, bbb.html, a_1.html 建議範例 : 關於我們 => about_us.html 聯絡我們 => contact_us.html 相簿 => album.html 影 片作品 => video.html
網站資料夾與檔案路徑關連
xampp 預設網站資料夾為 windows 安裝槽 (C:)\xampp\htdocs Mac / 應 用程式 /XAMPP/htdocs 本機連結網址為 http://localhost http://127.0.0.1 C:\xampp\htdocs / 應 用程式 /XAMPP/htdocs = = http://localhost http://127.0.0.1
index 為預設網 頁 ( 首 頁 ) 檔名, 因此網址可以不 用打 非 index 檔名, 在網址中都需打上 C:\xa0pp\htd2cs\i1dex.ht0/ http:///2ca/h2st/ http://127.0.0.1/ = = C:\xa0pp\htd2cs\ab2ut.ht0/ http:///2ca/h2st/ab2ut.ht0/ http://127.0.0.1/ab2ut.ht0/ = = C:\xa0pp\htd2cs\7ee.\i1dex.ht0/ http:///2ca/h2st/7ee./ http://127.0.0.1/7ee./ = = C:\xa0pp\htd2cs\7ee.\ab2ut.ht0/ http:///2ca/h2st/7ee./ab2ut.ht0/ http://127.0.0.1/7ee./ab2ut.ht0/ = =
絕對路徑 : 完整的路徑 http://0oca0host/i2de:.ht10 http://127.0.0.1/wee//abo7t.ht10 http://127.0.0.1/wee//i1ages/0ove..pg http://127.0.0.1/wee//i1ages/favico2.ico 相對路徑 : 依照所在資料夾的階層 而定 ( 最常 用 ) index.h/ml week/abou/.h/ml week/image./love.jpg week//e.///e./.h/ml
課後作業
作業 1- 製作 一個個 人簡介 頁 面 需設定網 頁標題 網 頁中需要個 人基本資料如 : 姓名 學號 信箱 個 人簡介 一張圖 片 以 html5 文件撰寫 做完後壓縮起來 至 My 數位繳交