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

出自 全民科學平台
前往： 導覽、 搜尋
(→‎登入"全民科學平台的維基頁")
(→‎網路檔案櫃[http://science4everyone.net/file/index.php?])
行 15： 行 15：
 
*http://science4everyone.net/MediaWiki
 
*http://science4everyone.net/MediaWiki
  
−
===網路檔案櫃[http://science4everyone.net/file/index.php?]===
+
===[http://science4everyone.net/file/index.php 網路檔案櫃]===
  
 
==課堂概述==
 
==課堂概述==

於 2019年11月12日 (二) 13:23 的修訂

編輯培力/HTML+WIKI(二)

課堂準備

本頁縮網址

https://reurl.cc/4g63Z2

下載軟體

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

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

網路檔案櫃

課堂概述

正式的維基帳號

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


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

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


學習資源

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

進階

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



教學與練習

一、認識html

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

二、標籤

  • 標籤必須成對 如：<×>．．．．</×>
  • 開始與結束標籤合體：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="文字" />
    • 影片範例：

先上傳影片變成網址，再嵌入網址 http://science4everyone.net/file/張又懿/測試影片.html


<object data="影片連結" height="300px" width="500px"></object>

    • 超連結範例：<a href="網址">文字</a>
    • 延伸練習：
      • 改變長寬
  2. 練習三、定義 段落 的文字樣式
    • 在<p> 文字 </p>裡定義文字樣式[12]
  3. 練習四、定義 整頁 的文字樣式
    • 在<head>裡定義文字樣式[13]
      • 在<body>的段落中運用文字樣式
    • 可練習樣式 - 字體[14]
  4. 練習五、做表
    • tr、td、th差別[15]
    • 範例[16]
    • 進階範例[17]
    • 延伸練習：


其他英文說明

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

備註

關於 MDN[20]由 Mozilla Contributors[21]製作，以 CC-BY-SA 2.5[22] 釋出。

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