4. html
TRANSCRIPT
網路藝術基礎 HTML
李岳凌 Rio 在 recorderz 點 com
本日課題
•HTML！
•目的在於看的懂，會用工具修改，而不求無中生有
網頁如何構成？介面動作格式內容
瀏覽器
頁面
網頁如何構成？JavaScriptsCSShtml
瀏覽器
頁面
HTML
•Hypertext Markup Language之上的之外的跳躍的
文本 標記 語言
• 何謂標記？ 描述文字功能
HTML 語法
<textarea rows="4" cols="30">
! 這是段HTML文字
</textarea>
標籤 Tag (Element 元素)
屬性名稱attribute value
屬性值attribute value
標記內容Tag contents
HTML 語法重點•角括弧內全部小寫
•大多標籤是有頭有尾的，成對的 </[tag]>
•在html 中的文件換行，不會是瀏覽器中的換行
•有些標籤是單一的，如換行 <br />
•請存成 .html 副檔名
•註解 <!-- 這是一條註解 -->
•如果只輸入站名，會去找 index.html
HTML 檔案架構(doctype)
<html>
! <head>
! ! ......
! </head>
! <body>
! ! ......
! </body>
</html>
最基本標籤
在網頁的最前及最後
網頁基本資料編碼方式頁面標題
網頁文字網頁圖片
HTML 撰寫練習•http://www.w3schools.com/html/default.asp
•無需強記，Wordpress中，就有HTML Editor
•用文字編輯器撰寫時，需要注意的：
•以 UTF-8 格式儲存檔案，避免中文編碼錯誤•在<head> 段內放入：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
HTML 样本文件<html><head><title>My first HTML page</title></head>
<body><h1>论打架</h1><p>据我的观察总结，人一过个二十六岁就难得再有机会打架了。我个人认为没有打过架的男性人生是不完整的人生，想把看着不顺眼的人打倒在地然后踏上一万只脚，这个冲动简直是胎里带来的。</p>
<h2>三种分类</h2><p>从参加人数上讲，打架可以分为单挑和群殴，从双方指导思想上来讲，可以分为想把对方打趴下、想把对方打残和想把对方打死三种心理，从阶段来划分，可以分为比较漫长的前期准备、收尾善后和比较短暂的实际操作阶段。我们将就每个阶段首先研究在所有情况之中都适用的一些基本要点，然后分别讨论在大学中可能遇到的不同情况下的应对办法。</p></body>
HTML 編寫練習
1. 開啟 SubEthaEdit
2. 將上頁文字貼入，存檔，檔名為 fight.html
3. 用 Transmit 上傳到自己的站台
4. 用 Firefox 瀏覽
5. 如要變更，可在 Transmit 站台文件上按右鍵，以編輯軟件編輯，存檔就會直接更新站上文件
HTML 圖片<h2>Norwegian Mountain Trip</h2><img border="0" src="/images/pulpit.jpg" width="304" height="228" />
邊寬 圖源 圖寬 圖長
•img 標籤是單標籤•最好要寫長寬•圖源可以是相對路徑(上例)
•或者絕對路徑 “http://......”
HTML 連結！•語法 <a href="protocol://domain/file" target="frame_name"> 這是段連結文字 </a>
•a: Anchor 標籤，也就是 地址 的意思
•href：hyperlink reference 屬性，要連到哪兒
• target：目的地屬性，連結的內容要在哪個視窗出現
HTML 連結範例
•<a href="http://www.google.com">連到Google網頁</a>
•<a href="mailto:[email protected]">寄信給Rio</a>
•圖檔連結：
•文字連結：
<a href="lastpage.htm"><img border="0" src="buttonnext.gif" width="65" height="38"></a>
連結內容會在哪出現？target="frame_name"
_blank 新視窗
_self 原本視窗
_top 原視窗，新框架
_parent 原視窗，父框架
相對路徑？絕對路徑？•絕對路徑，以站台根目錄為始： / (斜線，slash)若站台為 http://foo.com/site任何地方的 /foo.html 連結都會連到 http://foo.com/site/foo.html
•相對路徑，相對於現在頁面的位置，以 .. 表上層目錄在 http://foo.com/site/part1/bar.html 頁中../part2/quux.html
http://foo.com/site/part2/quux.html
part2/blue.html
http://foo.com/site/part1/part2/blue.html
一定要知道的 HTML 標籤
• <h[?]> , [?] =1-6• <p>.....</p>• <a href=””>.....</a>
• <img src=”” width=”” height=”” />• <br />
• <!-- 註解 -->
文字編輯器
•XP Notepad Plus http://notepad-plus.sourceforge.net/uk/site.htm
•Mac TextMate http://macromates.com/
•當然 Dreamweaver 也可以
•一切請以 UTF-8 格式的文字編碼來儲存
網站設計工具箱
•付費的！ http://www.lab404.com/toolshed/
•免費的！ http://www.lab404.com/toolbox/
問題？