檢視編輯培力/HTML+WIKI(二) 的原始碼

編輯培力/HTML+WIKI(二)

==課堂準備==

===本頁縮網址===
https://reurl.cc/4g63Z2

===下載軟體===

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

===登入"全民科學平台的維基頁"===
*[http://science4everyone.net/MediaWiki 用報名時的帳號密碼]
*http://science4everyone.net/MediaWiki

===[http://science4everyone.net/file/index.php 網路檔案櫃]===

==課堂概述==

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


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

===學習資源===
*網路檔案櫃[http://science4everyone.net/file/index.php?]

*html基本概念說明[https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics]
*英文查詢(以下是不同網站，可交互參考)
**有示範[https://www.1keydata.com/css-tutorial/tw/codes.php]
**振鐸 - html英文單字[http://jendo.org/wiki1231/index.php?title=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]

===進階===
<!--
*HTML 新手網站基礎教學[https://progressbar.tw/serials/5]
-->
*振鐸html分類頁[http://jendo.org/wiki1231/index.php?title=分類:HTML]
*html語法(最基本規則)[http://jendo.org/wiki1231/index.php?title=HTML]




==教學與練習==


====一、[https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics 認識html]====  
#HTML（Hypertext Markup Language），中文全名為「超文字標示語言」
#HTML的組成可以分為 標籤 & 內容

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

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

====四、樣式====
修是屬性
*style 的值包含的常常超過一項以上的樣式指示
*兩組樣式指示以「;」間開
*名與值以「:」相連

==練習==
#練習一、完整文件架構 + 文字段落
#*標籤包含：<html>、<head>、<body>
#*分段落並寫文字&lt;p&gt; 文字 &lt;/p&gt;
#*延伸練習
#**運用&lt;br/&gt;換行、&lt;hr/&gt;分隔線
#練習二、插圖+插入影片+超連結
#*先找一張圖、影，下載後上傳到網路資料庫(開放再利用)
#*插圖範例：&lt;img src="網址" border=0 width=70px height=70px alt="文字" /&gt;
#*影片範例：

先上傳影片變成網址，再嵌入網址
http://science4everyone.net/file/張又懿/測試影片.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>
#*延伸練習：
#**改變長寬
#練習三、定義 段落 的文字樣式
#*在&lt;p&gt; 文字 &lt;/p&gt;裡定義文字樣式[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為例)
*#進入http://jendo.org/files/doc/Demo/
*#文件範例→各種文件範例
*#對藍色字按右鍵，新分頁開啟頁面
*#將頁面轉換成Unicode or UTF-8
*#(若是使用firefox，可以在瀏覽器右上角"三槓"處，找到自訂)
*#(點進去，裡面有一個圖示叫做"顯示文字編碼選項，可更改頁面的文字編碼類型)
*#改完之後亂碼會變回正常
*#這時對頁面按右鍵，檢視原始碼，即可看到網頁的原始碼
*#用原始碼&實際顯示出來的頁面參照學習

-->

==其他英文說明==
*img title 與 img alt 的語法
**<img src="圖片網址" alt="圖片替代文字" title="圖片標題">
** HTML img alt 圖片替代文字
***(ㄧ般不顯示，圖片顯示不出來時才會出現)
** HTML img title 滑鼠移經顯示文字標示

==備註==
關於 MDN[https://developer.mozilla.org/zh-TW/docs/MDN/About]由 Mozilla Contributors[https://developer.mozilla.org/zh-TW/docs/MDN/About$history]製作，以 CC-BY-SA 2.5[http://creativecommons.org/licenses/by-sa/2.5/] 釋出。


[[分類:108上學年編輯培力]]