編輯培力/HTML+WIKI(二)

編輯培力/HTML+WIKI(二)

課堂準備

下載軟體

• Firefox免安裝版 (建議)
• EmEditor免安裝版 (必須)

登入"全民科學平台的維基頁"

• 用報名時的帳號密碼[1]
• http://science4everyone.net/MediaWiki

課堂概述

正式的維基帳號

• 建議大家上課的筆記可以記錄在這，不論是記在一般頁或者是討論頁
• 帳號密碼：報名這堂課時用的帳號密碼
• 登錄進去後，請大家建一個新的筆記頁，步驟如下
  1. 在右上角的搜尋欄，搜尋：筆記頁/本名
  2. 送出後，點擊紅色的字建立新頁
  3. 即完成建立新頁
• 編輯頁面的分類
  1. 點擊編輯
  2. 在框框內最下方輸入：
  3. 點擊"儲存變更"
  4. 即完成頁面的分類標籤
• 建議大家把上次過的筆記，從臨時的筆記頁上搬遷過來；因為那個頁面可能會在不久之後被清空

免安裝版 軟體(綠色軟體)

• 好處
  • 檔案比較小
  • 不用安裝
  • 只佔用少量系統資源
  • 可直接移動(複製檔案後，換ㄧ台電腦繼續工作)
  • 刪除方便，移除後也不會將任何紀錄（登錄檔訊息等）留在本機電腦上
  • 各種免安裝軟體[2]

學習資源

• html基本概念說明[3]
• 英文查詢(以下是不同網站，可交互參考)
  • 有示範[4]
  • 振鐸 - html英文單字[5]
• 字體[6]
• 表格[7]
• 邊框[8]
• 樣式[9]

進階

• 振鐸html分類頁[10]
• html語法(最基本規則)[11]

練習與範例

練習

ㄧ、認識html[12]

1. HTML（Hypertext Markup Language），中文全名為「超文字標示語言」
2. HTML的組成可以分為 標籤 & 內容

二、標籤

• 標籤必須成對 如：<×>．．．．</×>
• 開始與結束標籤合體：meta(對自身的說明)、img(圖照)、br(換行)、hr(水平線)是開始標籤與結束標籤合一的，寫成<meta />、<img />、<br/>、<hr/>

三、屬性

修飾標記

• 屬性名後面是屬性值
• 屬性名與屬性值之間用「=」相連。
• 同標記內兩組屬性是用空白相隔開。
• 屬性值通常用一對單引號「'」或雙引號「"」包起來

四、樣式

修是屬性

• style 的值包含的常常超過一項以上的樣式指示
• 兩組樣式指示以「;」間開
• 名與值以「:」相連

其他英文說明

• img title 與 img alt 的語法
  • HTML img alt 圖片替代文字
    • (ㄧ般不顯示，圖片顯示不出來時才會出現)
  • HTML img title 滑鼠移經顯示文字標示

備註

關於 MDN[13]由 Mozilla Contributors[14]製作，以 CC-BY-SA 2.5[15] 釋出。

基本文件格式 table

範例，ㄧ步步實作

提供主題，限制:ex.500字以上的文章，編表格...