"編輯培力/HTML+WIKI(二)" 修訂間的差異

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

於 2020年4月17日 (五) 05:51 的最新修訂

課堂準備

本頁縮網址

https://reurl.cc/4g63Z2

下載軟體

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

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

網路檔案櫃

課堂概述

正式的維基帳號

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

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

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

學習資源

進階

教學與練習

一、認識html

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

二、標籤

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

三、屬性

修飾標記

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

四、樣式

修是屬性

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

練習

  1. 練習一、完整文件架構 + 文字段落
    • 標籤包含：<html>、<head>、<body>
    • 分段落並寫文字<p> 文字 </p>
    • 延伸練習
      • 運用<br/>換行、<hr/>分隔線
  2. 練習二、插圖+插入影片+超連結
    • 先找一張圖、影，下載後上傳到網路資料庫(開放再利用)
    • 插圖範例：<img src="網址" border=0 width=70px height=70px alt="文字" />
    • 影片範例：
    • Youtube影片
      • 去到你要的youtube網址，對影片點滑鼠右鍵，選"複製嵌入程式碼"，貼到html文件中
    • 超連結範例：<a href="網址">文字</a>
    • 延伸練習：
      • 改變長寬
  3. 練習三、定義 段落 的文字樣式
    • 在<p> 文字 </p>裡定義文字樣式示範文
  4. 練習四、定義 整頁 的文字樣式
    • 在<head>裡定義文字樣式示範文
      • 在<body>的段落中運用文字樣式
    • 可練習樣式 - 字體
  5. 練習五、做表

其他英文說明

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

備註

關於 MDN 由 Mozilla Contributors 製作，以 CC-BY-SA 2.5 釋出。

取自 "http://science4everyone.net/MediaWiki/index.php?title=編輯培力/HTML%2BWIKI(二)&oldid=4949"