課前要求：

  1. 註冊codepen
  2. 註冊hypothes.is, 並點以下連結加入討論群：
    https://hypothes.is/groups/vPZDpneY/106xue-nian-xia-wb-01-1
  3. 安裝chrome
  4. 安裝hypothes.is extension for Chrome
  5. 註冊Github.com
  6. 安裝Github desktop
  7. 安裝atom

參考資料：

  1. 語法查詢：

  2. 語法練習：codepen

HTML

何為HTML(Hypertext Markup Language )?

是一種Markup language，即標記語言的意思，透過這些標記來說明排要求、字體大小、位置等等。標記（tag）的適用範圍多是以<標記>...</標記>來表示。

  • 標記名稱：內容在文件代表的地位。
  • HTML即是由許多有角色訂義的元素所構成，這些有義意的元素叫Semantic elements(elements with a meaning)。

典型html檔結構

<!DOCTYPE html>
<html lang="en">
  <head>
    網頁文檔屬性、相關資訊(meta, data of data)
    風格設計(style)
    其他外部引入的資源。
  </head>

  <body>
    網頁內容主體
  </body>
  
</html>

  • 一個html檔形成一個webpage（網頁）。

  • 數個串連在一起的web page形成一個website（網站）。

網頁內容主體<body>

  • 典型主體架構

Semantic Elements

tag：<p>與<h1> to <h6>

練習1

由經濟學人文章進行 codepen練習。

tag: 文章<article>、小節<section>

  • 說明

    • <article>

    • <section>
      • A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

  • 範例

練習2

延續上個練習參考經濟學人文章加入<article>及<section>標籤。

tag: 標頭<header>

  • 說明: …introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.

    • A <header> typically contains at least (but not restricted to) one heading tag (<h1> – <h6>).
    • 小心不要跟<head>搞混。
  • 範例1

  • 範例2

練習3

延續上個練習參考經濟學人文章加入標頭。

tag: 相關訊息<aside>

  • 說明：should be used for content tangentially related to the content surrounding it, such as related reading links and glossaries.
    • 「母區塊」的相關訊息。
  • 範例

練習4

使用白經濟文章：金融危機十週年—簡介與借鏡，在codepen加入<footer>及<aside>。

元素所佔空間

元素依照它「內定」會不會佔一整行分成：
  1. 塊級(block)元素
  2. 行內(inline)元素

萬用block element:<div>

  • 說明
  • 遇到需要block，但目前block element沒有任何一個符合它的意義。

萬用inline element: <span>

tag: 其他幾個常見元素

列點listing

  • 說明
    • 有排序<ol>加<li>
    • 無排序<ul>加<li>
    • 定義、描述列點(description lists)<dl>加description term<dt>及description definition<dd>.

表Table

圖像Image

  • 說明
  • 用法：<img src="圖像來源" alt="圖片連結失靈時的替代文字">
    • 注意這標籤沒有closing tag，也就是沒有</img>。
    • 是inline element。如果要自成一行，可以包在block element裡，如:<figure>（可搭配<figurecaption>加註圖標）。

影片Video

聲音Audio