新聞網頁製作（一） - HTML 標記式語言

# 新聞網頁製作（一） - HTML 標記式語言 ## Slides https://hackmd.io/58cKH6zGSliUosSFgYFTuQ#/2 ## 學習大綱： - [新聞網頁製作（一） - HTML 標記式語言](https://hackmd.io/svhFYKq4QyaarC_J0WRsig) - [新聞網頁製作（二） - CSS 串接樣式表](https://hackmd.io/Pekdv0mvT8qD_LXLzUo9iQ) - [新聞網頁製作（三）- CSS 選擇器與基礎網頁排版](https://hackmd.io/ccO-gvxFR5-49q3ePoNJkg) - [新聞網頁製作（四）- CSS Position 與 Flexbox 排版](https://hackmd.io/i1uBelrpRv2Uz5emQawIiw) - [新聞網頁製作（五）- Responsive Web Design 響應式網頁](https://hackmd.io/ojTXG2s0RQaJz85goqIz1w) - [新聞網頁製作（六）- 多媒體元素與動態效果](https://hackmd.io/J_YYk1YUSum1x3fVo75PXA) - [新聞網頁製作（七）- 使用 GitHub 部署網頁](https://hackmd.io/P9N34oIwS2G6Mfhag3Rqzg) ## 學習目標 * 了解網頁的生成 * 基礎了解／運用 HTML（Hypertext Markup Language） * 瀏覽器與它的使用方式 * 使用 Visual Studio Code 來撰寫程式 * 解析新聞網頁 ### 了解網頁的生成在了解網頁之前，我們必須先提到瀏覽器、伺服器和網頁的基礎 —— HTML(Hypertext Markup Language)。 **瀏覽器(Browser)**：簡單來說，就是電腦、手機或是平板上的一個應用程式(Application/App)，它能將HTML轉化成我們現在看到的網頁的樣子。透過瀏覽器的解析，將一行行生硬的程式碼，轉換成老嫗都能看得懂的網頁樣子。而Chrome(Google)、Firefox、~~IE(Microsoft)~~、Edge (Microsoft)和 Safari(Apple) 是市面上常見到的瀏覽器。 **伺服器(Server)**：伺服器，是HTML的生產者。當它從網路上接收到瀏覽器的需求後，便會產生相對應的HTML，並將其送回給瀏覽器。 **HTML(Hypertext Markup Language)**： HTML是網頁最基本的元素。既然HTML的縮寫L是指Language，那也代表它會有它定義好的語法和使用方式。瀏覽器根據語法，將一行行生硬、由英文字母組成的文字串，轉化成我們現在看到的網頁介面。接下，我們便要來學習HTML的文法和使用方式，能夠操控 HTML ，我們便能操控網頁的基本樣子 ![](https://i.imgur.com/dbDIIQs.jpg) ### 基礎了解／運用網路上充滿著HTML的教學文件和網站，大家可以先從以下網站著手，開啟這學期寫HTML的人生。 - [HTML 基礎](https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started) - [HTML tutorial](https://www.w3schools.com/html/) ### HTML 語法一個完整的HTML由多個HTML元素(element)所組成；而一個HTML元素則包含HTML起始標籤(opening tag)、內容(content)和結束標籤(closing tag)。你可以把標籤想像成 HTML 裡的單字，有了這些單字，我們才能組成有意義的句子。因此，在解釋 HTML 元素之前，我們必須先看過以下標籤。 - `<html>` - `<head>` - `<body>` - `<div>` - `<span>` - `<article>` - `<h1>`, `<h2>`, ...`<h6>` - `<figure>` - `<img>` - `<figcaption>` - `<ul>` - `<ol>` - `<li>` - `<blockquote>` - `<a>` - `<header>` - `<footer>` - `<i>`, `<b>`, `<em>`, `<strong>` - [List of inline tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#Elements) - [List of block tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements) 在對 HTML 裡的單字（標籤）有些許印象後，我們要來學習怎麼把單字拼湊成一段有意義的句子（元素）。 #### 一般元素(Element) ``` 文法： <標籤名稱屬性名稱="屬性值" 屬性名稱="屬性值">網頁呈現的內容</標籤名稱> 範例： <h1 style="color: pink">報導者</h1> ``` 元素可以擁有**零個至多個**「屬性」，根據元素中不同的標籤，擁有的屬性也不盡相同。上例`h1`的「屬性名稱」是`style`，其「屬性值」為`color: pink`， `color: pink` 這個部分之後介紹CSS時會說；以白話文來說，就是告訴瀏覽器這個標題的字體顏色是粉紅色。要注意，結束標籤的標籤名稱要與起始標籤的標籤名稱一樣，不能寫成`<h1>報導者</h2>`，這樣子瀏覽器會解析錯誤。此外，結束標籤一定要有反斜線`/`，像是`</h1>`, `</h2>`。 #### 空元素(Empty Element) ``` 文法： <標籤名稱屬性名稱="屬性值"> 範例： <img src="https://www.twreporter.org/images/footer/logo-horizontal02.svg" alt="報導者logo"> ``` 空元素相較於一般元素而言，少了內容和結束標籤，通常代表該元素的起始標籤就有其作用，不需要內容呈現在網頁上。上述範例翻譯成白話文，是告訴瀏覽器，我這邊要呈現一張圖片(`img`是image的縮寫)，圖片的來源是`https://www.twreporter.org/images/footer/logo-horizontal02.svg`，若瀏覽器你找不到這張圖，退而求其次，就幫我在網頁上呈現`報導者logo`這幾個字吧。其他常用到的空元素包括， `<br>`：斷行 `<hr>`：分隔線 #### 巢狀元素(Nested Elements) 除了一般元素和空元素，網頁主要的構成是透過巢狀元素。當一般元素中的內容，是另外的元素（一個或是多個）時，我們稱之為巢狀元素。以下例子來說明： ``` <html>  <head> <meta /> </head>  <body> <article> <header> <h1> </h1> </header> <p></p> <figure> <img /> <figcaption></figcaption> </figure> </article> <footer> </footer> </body> </html> ``` 你會發現`<html>` 起始標標和`</html>`結束標籤中的內容分別是`<head></head>`元素和`<body></body>`元素。整份HTML解析下來，你會發現HTML就像是一個俄羅斯娃娃一樣，是由一個最大的元素包著另一個次大的元素，次大的元素在包著較小的元素，較小的元素則一路包到最小的元素。俄羅斯娃娃的上半身是起始標籤，下半身是結束標籤，中間較小的俄羅斯娃娃則是元素的內容。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-03-15/well_formed_html_diagram.png" width="600" > `Ben Henick. (2010). HTML & CSS: The Good Parts. p. 9` #### 屬性(Attributes) 剛剛上面有稍微帶過屬性在元素中的位置和使用方式， **但初學者常常會犯以下幾個錯誤**: * 錯誤一：標籤名稱和屬性名稱中間沒有空白，例：`<h1style="color: pink">` 若`h1`和`style`中間沒有空白，瀏覽器會不小心把`h1style`視為一個它看不懂的標籤。 * 錯誤二：屬性名稱後沒有**等於符號**`=` * 錯誤三：等於符號後的屬性值沒有用**雙引號**`"`或是**單引號**`'`**包住**。注意：雙引號和單引號需要成對，不能一單一雙，例如：`style="color: pink'` **注意中的大注意：任何符號都是半形符號，不能打全型符號。** * 不同的標籤，可能有不同的屬性名稱，使用前請詳閱說明書。 #### HTML 註解(Comment) 有時候寫程式碼，你會需要寫一些解釋在程式碼裡，<br/> 但是這些解釋你又不想要呈現在網頁上面。<br/> 你可以使用html comment。 ``` <body>  這串字才會呈現在畫面上面。 </body> ``` #### 跳脫字元瀏覽器利用小於符號`<`和大於符號`>`來組成HTML標籤，所以當瀏覽器一段文字被`<`和`>`包住時，它就會主動認為這段文字是HTML標籤。然而，當我們想要在網頁上呈現`<`和`>`這兩個文字時，我們要如何告訴瀏覽器，這個`<`和`>`並不是標籤的一部分呢？ `<`和`>`就是我們所謂的跳脫字元，因為要在網頁上呈現`<`和`>`，必須透過其代碼來呈現。透過代碼，瀏覽器就能分別標籤的`<`和文字上要呈現的`<`的不同。舉例而言，若網頁上我們要呈現`<`這個字，我們在寫HTML的時候，必須使用`<`代碼。下面的表格整理出跳脫字元和代碼。代碼 | 呈現在網頁上的符號 --------|------------------ `<` | 小於符號(`<`) `>` | 大於符號(`>`) `&` | and符號(`&`) ` `| 空白(` `) 除了上述簡易表格，也可到[HTML Codes Table](https://ascii.cl/htmlcodes.htm)找其他跳脫字元的代碼，或是可以到[Unicode](https://home.unicode.org/) 找你想要的表情符號。 #### 進一步認識 HTML tag ##### `<div>` `<div>` 是 `<div style="display:block;">` 的縮寫。 ```htmlmixed=false <div>這是一個區塊，佔了瀏覽器一整行</div>  <div> 包含了兩個區塊: <div>第一個區塊</div> <div>第二個區塊</div> </div> ``` ##### `<span>` `<span>` 是 `<span style="display: inline;">` 的縮寫。 ```htmlmixed=false  <span style="color: green">span 是 inline element，</span> <span style="color: red">所以這兩個 span 會在同一行上。</span> ``` ##### `<a>`：超連結 `<a>` 是 `<a style="display: inline;">` 的縮寫。 `<a>` 是用來產生超連結的標籤。被`<a>`包住的內容，會變成超連結。 `href="https://www.twreporter.org"` 指定超連結的網址。 `traget="_blank"` 則是指定超連結打開的方式，`_blank`是指另開分頁。更多詳細的設定，可以參考 [w3schools \<a\> tag](https://www.w3schools.com/tags/tag_a.asp)。 ```htmlmixed=false <a href="https://www.twreporter.org" target="_blank" > this is a link to twreporter homepage </a> ``` ##### `<p>`：文章段落 `<p>` 是 `<p style="display: block;">`的縮寫。在之後的新聞網頁中，我們會大量使用`<p>`來呈現文章段落。 ##### `<img>` 呈現圖片[點此暸解更多](https://www.w3schools.com/tags/tag_img.asp) `<img>`是`<img style="display: inline-block;"`的縮寫。 `<img>`是空元素。 `src="https://nickhsine.github.io/teach-at-nccu/mobile-aritcle-page/leading.jpeg"` 指定圖片的來源。 `alt="一隻美麗的海龜"`指定圖片的文字敘述，當瀏覽器無法載入圖片時，取而代之，會出現`一隻美麗的海龜`等文字內容。 `width="300px"`指定圖片的寬度。 `height="auto"`指定圖片的高度，`auto`代表隨寬度等比例縮放。更多`<img>`的使用方式，可以參考[w3schools \<img\> tag](https://www.w3schools.com/tags/tag_img.asp)。 ```htmlmixed=false <img src="https://nickhsine.github.io/teach-at-nccu/mobile-aritcle-page/leading.jpeg" alt="一隻美麗的海龜" width="300px" height="auto" > ``` ##### `<figure>` `<figcaption>` `<figure>` 和 `<figcaption>` 通常會搭配 `<img>` 使用。 `<figcaption>`是圖說。 ```htmlmixed=false <figure> <img src="https://nickhsine.github.io/teach-at-nccu/mobile-aritcle-page/leading.jpeg" alt="一隻美麗的海龜" width="300px" height="auto" > <figcaption>為了美麗的海龜，我們少用點吸管、塑膠袋等塑膠類製品吧 :)</figcaption> </figure> ``` ##### `<ul>` `<ol>` `<li>` `<ul>` means unordered list<br/> `<ol>` means ordered list<br/> `<ul>`和`<ol>`需要搭配 `<li>`使用。 ```htmlmixed=false  <ul> <li>list one</li> <li>list two</li> </ul>  <ol> <li>list one</li> <li>list two</li> </ol> ``` ##### `<h1>` `<h2>` `<h3>` `<h4>` `<h5>` `<h6>` headings:<br/> `<h1>` 放最重要的資訊，例如標題 `<h2>` 放次重要的資訊，例如小標題 ##### `<em>` `<i>` `<b>` `<strong>` `<em>` emphasize<br/> `<i>` italic<br/> `<b>` bold<br/> `<strong>`bolder<br/> ##### `<article>` `<header>` `<footer>` `<nav>` `<article>` `<header>` `<footer>` `<nav>` 外觀上都與`<div>`沒有不同。<br/> 但為了讓搜尋引擎理解我們的程式碼，我們使用這些帶有意義的 HTML tag，又稱為 semantic HTML。 ### 新聞網頁的元素當我們多多少少理解HTML有哪些標籤可以使用後，我們可以簡單的分類新聞網頁會使用的標籤。 1. Title／標題 -> `<h1>` 2. Subtitle／副標題 -> `<h2>` 3. Authors／作者欄 -> `<div>`,`<span>`,`<a>` 4. Hero image／首圖 -> `<figure>`, `<img>`, `<figcaption>` 5. Introduction／前言 -> `<p>` 6. Paragraph／段落 -> `<p>` 7. Headings／小標 -> `<h3>` 8. BlockQuote／抽言 -> `<blockquote>` 10. Caption／圖說 -> `<figcaption>` 11. Link／連結 -> `<a>` 12. Slideshow -> `<img>`'s 13. Audio -> `<audio>` 14. Video -> `<video>` 15. 圖表 -> `<img>` 16. 相關新聞 -> `<ul>`,`<li>` ### Trouble Shooting #### 我用瀏覽器打開我寫的 HTML 檔案，但只跑出程式碼，瀏覽器沒有正確將檔案解析成 HTML 以下兩種方式告知瀏覽器，你寫的檔案是 html： 1. 副檔名設定成 `.html` 2. 在檔案最開頭加上 `<!DOCTYPE html>` #### 延伸閱讀 [Semantic HTML](https://internetingishard.com/html-and-css/semantic-html/) ### 好用的線上編輯器 1. [jsbin](https://jsbin.com/) 2. [jsfiddle](https://jsfiddle.net/)  ###### tags: `teach-at-nccu`, `html`, `css`

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.