week04.key

Size: px

Start display at page:

Download "week04.key"

终衬郭
5 years ago
Views:

1 基礎網頁設計第四週老師 : 蔡承洋

2 大綱 HTML 標籤元素屬性常用標籤標籤屬性網頁檔案命名網站資料夾與檔案路徑關連課後作業

3 HTML 標籤元素屬性

4 tag 標籤 <title> 使用 < > 包起來, 包住的是 tag 名稱所有 tag 列表 element 元素開始標籤 <p> 我是一段文字 </p> 內容開始標籤無結尾 tag 的標籤 :<br> <img> <hr> <link> <meta> attribute 屬性 <p id="first"> 我是一段文字 </p>

5 tag 標籤 <title> 使用 < > 包起來, 包住的是 tag 名稱所有 tag 列表 element 元素開始標籤 <p> 我是一段文字 </p> 內容開始標籤無結尾 tag 的標籤 :<br> <img> <hr> <link> <meta> attribute 屬性 <p id="first"> 我是一段文字 </p>

6 基本標籤內容宣告檔案文件為 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 文件結束

7 文章中有多個空白, 瀏覽器只會顯示一個必須使用特殊符號一段文字要斷行, 直接按 enter 是沒效的, 必須使用 <br> 標籤請看本週原始碼 p.html 檔案

8 常用標籤

9 常用 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

10 常用 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=" 網站 </a> body <br> 斷行這是一個 <br> 斷行句子 body <img> 圖片 <img src=' body

11 常用 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

12 標籤屬性

13 在標籤上, 加上 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=' </div> <script> alert($("div.info").html()); </script>

14 <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 表示

15 網頁檔案命名

16 任何 web server 預設的第一個網頁檔名 index 如 index.html index 常用在首頁, 由於是預設頁, 所以瀏覽時可以不用輸入

17 那除了首頁以外, 其他的頁面怎樣命名呢? 答案 : 自己定義, 建議命名規則如下照頁面的內容取個名字, 翻成英文當成檔案名稱全使用英文小寫請不要用中文, 圖檔也不要用中文若檔名使用兩個以上單字, 請用底線 _ 隔開不要做沒意義的檔名,ex: aaa.html, bbb.html, a_1.html 建議範例 : 關於我們 => about_us.html 聯絡我們 => contact_us.html 相簿 => album.html 影片作品 => video.html

18 網站資料夾與檔案路徑關連

$xampp 預設網站資料夾為 windows 安裝槽 (C:)\xampp\htdocs Mac / 應用程式 /XAMPP/htdocs 本機連結網址為$

19 xampp 預設網站資料夾為 windows 安裝槽 (C:)\xampp\htdocs Mac / 應用程式 /XAMPP/htdocs 本機連結網址為 C:\xampp\htdocs / 應用程式 /XAMPP/htdocs = =

20 index 為預設網頁 ( 首頁 ) 檔名, 因此網址可以不用打非 index 檔名, 在網址中都需打上 C:\xa0pp\htd2cs\i1dex.ht0/ = = C:\xa0pp\htd2cs\ab2ut.ht0/ = = C:\xa0pp\htd2cs\7ee.\i1dex.ht0/ = = C:\xa0pp\htd2cs\7ee.\ab2ut.ht0/ = =

21 絕對路徑 : 完整的路徑相對路徑 : 依照所在資料夾的階層而定 ( 最常用 ) index.h/ml week/abou/.h/ml week/image./love.jpg week//e.///e./.h/ml

22 課後作業

23 作業 1- 製作一個個人簡介頁面需設定網頁標題網頁中需要個人基本資料如 : 姓名學號信箱個人簡介一張圖片以 html5 文件撰寫做完後壓縮起來至 My 數位繳交

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt]

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt] HTML CSS / 2011 HTML CSS 1/ 47 1 2 HTML 3 4 HTML 5 5 : CSS 6 CSS 7 HTML CSS 2/ 47 HTML CSS 3/ 47 ( BOM) UTF-8 Notepad++ (Winodws), Fraise/Smultron (Mac), VIM ( ) HTML CSS 4/ 47 UTF-8? UTF-8 (unicode),