"編輯培力/HTML+WIKI(二)" 修訂間的差異
(→練習) |
(→練習) |
||
| 行 106： | 行 106： | ||
#*可練習樣式 - 字體[https://www.1keydata.com/css-tutorial/tw/font.php] | #*可練習樣式 - 字體[https://www.1keydata.com/css-tutorial/tw/font.php] | ||
#練習四、做表 | #練習四、做表 | ||
| − | #*[[https://i2.kknews.cc/SIG=3qtpten/5700/8486362933.jpg | + | #*[[File:https://i2.kknews.cc/SIG=3qtpten/5700/8486362933.jpg]] |
#*範例[http://jendo.org/files/doc/Demo/100205.htm] | #*範例[http://jendo.org/files/doc/Demo/100205.htm] | ||
#*進階範例[http://jendo.org/files/doc/Demo/100206.htm] | #*進階範例[http://jendo.org/files/doc/Demo/100206.htm] | ||
於 2019年11月4日 (一) 12:43 的修訂
編輯培力/HTML+WIKI(二)
目錄
課堂準備
本頁縮網址
下載軟體
- Firefox免安裝版 (建議)
- EmEditor免安裝版 (必須)
登入"全民科學平台的維基頁"
- 用報名時的帳號密碼[1]
- http://science4everyone.net/MediaWiki
課堂概述
正式的維基帳號
- 建議大家上課的筆記可以記錄在這，不論是記在一般頁或者是討論頁
- 帳號密碼：報名這堂課時用的帳號密碼
- 登錄進去後，請大家建一個新的筆記頁，步驟如下
- 在右上角的搜尋欄，搜尋：筆記頁/本名
- 送出後，點擊紅色的字建立新頁
- 即完成建立新頁
- 編輯頁面的分類
- 點擊編輯
- 在框框內最下方輸入：
- 點擊"儲存變更"
- 即完成頁面的分類標籤
- 建議大家把上次過的筆記，從臨時的筆記頁上搬遷過來；因為那個頁面可能會在不久之後被清空
免安裝版 軟體(綠色軟體)
- 好處
- 檔案比較小
- 不用安裝
- 只佔用少量系統資源
- 可直接移動(複製檔案後，換ㄧ台電腦繼續工作)
- 刪除方便，移除後也不會將任何紀錄（登錄檔訊息等）留在本機電腦上
- 各種免安裝軟體[2]
學習資源
- 網路檔案櫃[3]
進階
教學與練習
ㄧ、認識html[13]
- HTML（Hypertext Markup Language），中文全名為「超文字標示語言」
- HTML的組成可以分為 標籤 & 內容
二、標籤
- 標籤必須成對 如：<×>．．．．</×>
- 開始與結束標籤合體：meta(對自身的說明)、img(圖照)、br(換行)、hr(水平線)是開始標籤與結束標籤合一的，寫成<meta />、<img />、<br/>、<hr/>
三、屬性
修飾標記
- 屬性名後面是屬性值
- 屬性名與屬性值之間用「=」相連。
- 同標記內兩組屬性是用空白相隔開。
- 屬性值通常用一對單引號「'」或雙引號「"」包起來
四、樣式
修是屬性
- style 的值包含的常常超過一項以上的樣式指示
- 兩組樣式指示以「;」間開
- 名與值以「:」相連
練習
- 練習一、完整文件架構 + 文字段落
- 標籤包含：<html>、<head>、<body>
- 分段落並寫文字
文字
- 延伸練習
- 運用<br/>換行、<hr/>分隔線
- 練習二、插圖+插入影片+超連結
- 先找一張圖、影，下載後上傳到網路資料庫(開放再利用)
- 插圖範例：
- 影片範例：<object data="影片連結" height="300px" width="500px"></object>
- 超連結範例：<a href="網址">文字</a>
- 延伸練習：
- 改變長寬
- 練習三、定義文字樣式[14]
- 在<head>裡定義文字樣式
- 在<body>的段落中運用文字樣式
- 可練習樣式 - 字體[15]
- 練習四、做表
其他英文說明
- img title 與 img alt 的語法
- HTML img alt 圖片替代文字
- (ㄧ般不顯示，圖片顯示不出來時才會出現)
- HTML img title 滑鼠移經顯示文字標示
備註
關於 MDN[20]由 Mozilla Contributors[21]製作，以 CC-BY-SA 2.5[22] 釋出。
基本文件格式
table
範例，ㄧ步步實作
提供主題，限制:ex.500字以上的文章，編表格...
