"編輯培力/HTML+WIKI(二)" 修訂間的差異
(→課堂準備) |
(→進階) |
||
| (未顯示由 3 位使用者於中間所作的 29 次修訂) | |||
| 行 1： | 行 1： | ||
| − | + | [[分類:108上學年編輯培力]] | |
| − | |||
==課堂準備== | ==課堂準備== | ||
| 行 7： | 行 6： | ||
===下載軟體=== | ===下載軟體=== | ||
| − | |||
*Firefox免安裝版 (建議) | *Firefox免安裝版 (建議) | ||
*EmEditor免安裝版 (必須) | *EmEditor免安裝版 (必須) | ||
===登入"全民科學平台的維基頁"=== | ===登入"全民科學平台的維基頁"=== | ||
| − | * | + | *[http://science4everyone.net/MediaWiki 用報名時的帳號密碼] |
*http://science4everyone.net/MediaWiki | *http://science4everyone.net/MediaWiki | ||
| − | === | + | ===[http://science4everyone.net/file/index.php 網路檔案櫃]=== |
==課堂概述== | ==課堂概述== | ||
| 行 32： | 行 30： | ||
*#即完成頁面的分類標籤 | *#即完成頁面的分類標籤 | ||
*建議大家把上次過的筆記，從臨時的筆記頁上搬遷過來；因為那個頁面可能會在不久之後被清空 | *建議大家把上次過的筆記，從臨時的筆記頁上搬遷過來；因為那個頁面可能會在不久之後被清空 | ||
| − | |||
===免安裝版 軟體(綠色軟體)=== | ===免安裝版 軟體(綠色軟體)=== | ||
| 行 39： | 行 36： | ||
**不用安裝 | **不用安裝 | ||
**只佔用少量系統資源 | **只佔用少量系統資源 | ||
| − | **可直接移動( | + | **可直接移動(複製檔案後，換一台電腦繼續工作) |
**刪除方便，移除後也不會將任何紀錄（登錄檔訊息等）留在本機電腦上 | **刪除方便，移除後也不會將任何紀錄（登錄檔訊息等）留在本機電腦上 | ||
| − | ** | + | **[https://zh.wikipedia.org/wiki/綠色軟體 各種免安裝軟體] |
| − | |||
===學習資源=== | ===學習資源=== | ||
| − | * | + | *[http://science4everyone.net/file/index.php 網路檔案櫃] |
| − | + | *[https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics html基本概念說明] | |
| − | * | ||
*英文查詢(以下是不同網站，可交互參考) | *英文查詢(以下是不同網站，可交互參考) | ||
| − | ** | + | **[https://www.1keydata.com/css-tutorial/tw/codes.php 有示範] |
| − | ** | + | **[http://jendo.org/wiki1231/index.php?title=HTML/英文單字 HTML英文單字] |
| − | * | + | *[https://www.1keydata.com/css-tutorial/tw/font.php 字體] |
| − | * | + | *[https://www.1keydata.com/css-tutorial/tw/table.php 表格] |
| − | * | + | *[https://www.1keydata.com/css-tutorial/tw/border.php 邊框] |
| − | * | + | *[https://www.1keydata.com/css-tutorial/tw/apply.php 樣式] |
===進階=== | ===進階=== | ||
| − | <!-- | + | <!-- *[https://progressbar.tw/serials/5 HTML 新手網站基礎教學] --> |
| − | * | + | *[http://jendo.org/wiki1231/index.php?title=分類:HTML 振鐸html分類頁] |
| − | --> | + | *[http://jendo.org/wiki1231/index.php?title=HTML html語法(最基本規則)] |
| − | * | + | *[http://jendo.org/wiki1231/index.php?title=HTML中的數學符號 各種符號的表示法] |
| − | *html語法(最基本規則)[http://jendo.org/wiki1231/index.php?title= | + | *[https://www.csie.ntu.edu.tw/~r91112/myDownload/WEB/html.html 各種標籤] |
| − | |||
| − | |||
| − | |||
==教學與練習== | ==教學與練習== | ||
| − | + | ====一、[https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics 認識html]==== | |
| − | |||
| − | ==== | ||
#HTML（Hypertext Markup Language），中文全名為「超文字標示語言」 | #HTML（Hypertext Markup Language），中文全名為「超文字標示語言」 | ||
#HTML的組成可以分為 標籤 & 內容 | #HTML的組成可以分為 標籤 & 內容 | ||
| + | #[https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML 更多基本概念] | ||
====二、標籤==== | ====二、標籤==== | ||
| − | *標籤必須成對 如： | + | *標籤必須成對 如：<×>．．．．</×> |
*開始與結束標籤合體：meta(對自身的說明)、img(圖照)、br(換行)、hr(水平線)是開始標籤與結束標籤合一的，寫成<meta />、<img />、<br/>、<hr/> | *開始與結束標籤合體：meta(對自身的說明)、img(圖照)、br(換行)、hr(水平線)是開始標籤與結束標籤合一的，寫成<meta />、<img />、<br/>、<hr/> | ||
| 行 92： | 行 83： | ||
==練習== | ==練習== | ||
#練習一、完整文件架構 + 文字段落 | #練習一、完整文件架構 + 文字段落 | ||
| − | #*標籤包含： | + | #*標籤包含：<html>、<head>、<body> |
#*分段落並寫文字<p> 文字 </p> | #*分段落並寫文字<p> 文字 </p> | ||
#*延伸練習 | #*延伸練習 | ||
| 行 98： | 行 89： | ||
#練習二、插圖+插入影片+超連結 | #練習二、插圖+插入影片+超連結 | ||
#*先找一張圖、影，下載後上傳到網路資料庫(開放再利用) | #*先找一張圖、影，下載後上傳到網路資料庫(開放再利用) | ||
| − | #*插圖範例： | + | #*插圖範例：<img src="網址" border=0 width=70px height=70px alt="文字" /> |
| − | #*影片範例：<object data="影片連結" height="300px" width="500px" | + | #*影片範例： |
| − | #*超連結範例： | + | #**先上傳影片到網路資料櫃變成網址，再嵌入網址 |
| + | #**http://science4everyone.net/file/共用/Water.mp4 | ||
| + | #*Youtube影片 | ||
| + | #**去到你要的youtube網址，對影片點滑鼠右鍵，選"複製嵌入程式碼"，貼到html文件中 | ||
| + | #**<!--<object data="影片連結" height="300px" width="500px"></object> | ||
| + | <video width="360" height="270" controls> | ||
| + | <source src="./test.mp4" type="video/mp4"></video> --> | ||
| + | #*超連結範例：<a href="網址">文字</a> | ||
#*延伸練習： | #*延伸練習： | ||
#**改變長寬 | #**改變長寬 | ||
#練習三、定義 段落 的文字樣式 | #練習三、定義 段落 的文字樣式 | ||
| − | #*在<p> 文字 </p>裡定義文字樣式[http://jendo.org/files/doc/Demo/100308.htm] | + | #*在<p> 文字 </p>裡定義文字樣式[http://jendo.org/files/doc/Demo/100308.htm 示範文] |
#練習四、定義 整頁 的文字樣式 | #練習四、定義 整頁 的文字樣式 | ||
| − | #*在 | + | #*在<head>裡定義文字樣式[http://jendo.org/files/doc/Demo/100203.htm 示範文] |
| − | #**在 | + | #**在<body>的段落中運用文字樣式 |
| − | #*可練習樣式 - | + | #*可練習樣式 - [https://www.1keydata.com/css-tutorial/tw/font.php 字體] |
#練習五、做表 | #練習五、做表 | ||
| − | #* | + | #*tr、td、th差別：[https://i2.kknews.cc/SIG=3qtpten/5700/8486362933.jpg 請看圖示] |
| − | #* | + | #*[http://jendo.org/files/doc/Demo/100205.htm 範例] |
| − | #* | + | #*[http://jendo.org/files/doc/Demo/100206.htm 進階範例] |
#*延伸練習： | #*延伸練習： | ||
| − | #** | + | #**[https://www.1keydata.com/css-tutorial/tw/table.php 表格樣式] |
| − | #** | + | #**[https://www.1keydata.com/css-tutorial/tw/border.php 邊框樣式] |
| − | + | <!--===如何查看範例文件=== | |
| − | |||
| − | <!-- | ||
| − | |||
| − | ===如何查看範例文件=== | ||
*如何查看範例文件(以firefox為例) | *如何查看範例文件(以firefox為例) | ||
*#進入http://jendo.org/files/doc/Demo/ | *#進入http://jendo.org/files/doc/Demo/ | ||
| 行 130： | 行 124： | ||
*#改完之後亂碼會變回正常 | *#改完之後亂碼會變回正常 | ||
*#這時對頁面按右鍵，檢視原始碼，即可看到網頁的原始碼 | *#這時對頁面按右鍵，檢視原始碼，即可看到網頁的原始碼 | ||
| − | *#用原始碼&實際顯示出來的頁面參照學習 | + | *#用原始碼&實際顯示出來的頁面參照學習--> |
| − | |||
| − | --> | ||
==其他英文說明== | ==其他英文說明== | ||
*img title 與 img alt 的語法 | *img title 與 img alt 的語法 | ||
| − | ** | + | **<img src="圖片網址" alt="圖片替代文字" title="圖片標題"> |
** HTML img alt 圖片替代文字 | ** HTML img alt 圖片替代文字 | ||
| − | ***( | + | ***(一般不顯示，圖片顯示不出來時才會出現) |
** HTML img title 滑鼠移經顯示文字標示 | ** HTML img title 滑鼠移經顯示文字標示 | ||
==備註== | ==備註== | ||
| − | 關於 | + | 關於 [https://developer.mozilla.org/zh-TW/docs/MDN/About MDN] 由 [https://developer.mozilla.org/zh-TW/docs/MDN/About$history Mozilla Contributors] 製作，以 [http://creativecommons.org/licenses/by-sa/2.5/ CC-BY-SA 2.5] 釋出。 |
| − | |||
| − | |||
| − | |||
於 2020年4月17日 (五) 05:51 的最新修訂
目錄
課堂準備
本頁縮網址
下載軟體
- Firefox免安裝版 (建議)
- EmEditor免安裝版 (必須)
登入"全民科學平台的維基頁"
網路檔案櫃
課堂概述
正式的維基帳號
- 建議大家上課的筆記可以記錄在這，不論是記在一般頁或者是討論頁
- 帳號密碼：報名這堂課時用的帳號密碼
- 登錄進去後，請大家建一個新的筆記頁，步驟如下
- 在右上角的搜尋欄，搜尋：筆記頁/本名
- 送出後，點擊紅色的字建立新頁
- 即完成建立新頁
- 編輯頁面的分類
- 點擊編輯
- 在框框內最下方輸入：
- 點擊"儲存變更"
- 即完成頁面的分類標籤
- 建議大家把上次過的筆記，從臨時的筆記頁上搬遷過來；因為那個頁面可能會在不久之後被清空
免安裝版 軟體(綠色軟體)
- 好處
- 檔案比較小
- 不用安裝
- 只佔用少量系統資源
- 可直接移動(複製檔案後，換一台電腦繼續工作)
- 刪除方便，移除後也不會將任何紀錄（登錄檔訊息等）留在本機電腦上
- 各種免安裝軟體
學習資源
進階
教學與練習
一、認識html
- HTML（Hypertext Markup Language），中文全名為「超文字標示語言」
- HTML的組成可以分為 標籤 & 內容
- 更多基本概念
二、標籤
- 標籤必須成對 如：<×>．．．．</×>
- 開始與結束標籤合體：meta(對自身的說明)、img(圖照)、br(換行)、hr(水平線)是開始標籤與結束標籤合一的，寫成<meta />、<img />、<br/>、<hr/>
三、屬性
修飾標記
- 屬性名後面是屬性值
- 屬性名與屬性值之間用「=」相連。
- 同標記內兩組屬性是用空白相隔開。
- 屬性值通常用一對單引號「'」或雙引號「"」包起來
四、樣式
修是屬性
- style 的值包含的常常超過一項以上的樣式指示
- 兩組樣式指示以「;」間開
- 名與值以「:」相連
練習
- 練習一、完整文件架構 + 文字段落
- 標籤包含：<html>、<head>、<body>
- 分段落並寫文字<p> 文字 </p>
- 延伸練習
- 運用<br/>換行、<hr/>分隔線
- 練習二、插圖+插入影片+超連結
- 先找一張圖、影，下載後上傳到網路資料庫(開放再利用)
- 插圖範例：<img src="網址" border=0 width=70px height=70px alt="文字" />
- 影片範例：
- 先上傳影片到網路資料櫃變成網址，再嵌入網址
- http://science4everyone.net/file/共用/Water.mp4
- Youtube影片
- 去到你要的youtube網址，對影片點滑鼠右鍵，選"複製嵌入程式碼"，貼到html文件中
- 超連結範例：<a href="網址">文字</a>
- 延伸練習：
- 改變長寬
- 練習三、定義 段落 的文字樣式
- 在<p> 文字 </p>裡定義文字樣式示範文
- 練習四、定義 整頁 的文字樣式
- 練習五、做表
其他英文說明
- img title 與 img alt 的語法
- <img src="圖片網址" alt="圖片替代文字" title="圖片標題">
- HTML img alt 圖片替代文字
- (一般不顯示，圖片顯示不出來時才會出現)
- HTML img title 滑鼠移經顯示文字標示
備註
關於 MDN 由 Mozilla Contributors 製作，以 CC-BY-SA 2.5 釋出。
