HTML 入門 - HackMD

--- title: HTML 入門 tags: sirla, class, html description: 1. title 請改為 [授課名稱]課程 2. tag 請刪去template，加上活動內容類型或名稱 3. 下方會議記錄請使用會議記錄範本 4. 加上"{%hackmd BkVfcTxlQ %}"意為套用黑色模板 --- # **_HTML_** > 負責人：陳舒婷 > 授課時間：[2019-09-25 (三)] > --- # **參考資源** > 1. [w3schools](https://www.w3schools.com/) > 2. [HTML基礎](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics) > 3. [邊界關係](https://ithelp.ithome.com.tw/articles/10205322) --- # **課程大綱** [TOC] --- ## (P) **什麼是HTML** * HTML = HyperText Markup Language 超文本標記語言，通過標記符號來標記要顯示的網頁中的各個部分。 * 它會告訴瀏覽器該如何呈現你的網頁 * 常與CSS、JavaScript一起被眾多網站用於設計網頁、網頁應用程式以及行動應用程序的使用者介面。 ### HTML文件架構 ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My page</title> </head> <body>  </body> </html> ``` * `<!DOCTYPE html>`：文件類型（doctype），告訴瀏覽器要進行編碼的html版本 * `<html></html>`：又被視為根元素（root element），包含了所有顯示在這個頁面上的內容。 * `<head></head>`：裡面放的是你想涵括的重要資訊，但不會顯示於網頁瀏覽者眼前的。例如，顯示於搜尋結果的關鍵字、頁面說明、CSS、字元實體集...等。 * `<meta charset="utf-8">`：這個元素指定了你的文件使用utf-8這種字元編碼，建議大家都要使用這個元素，它會幫助你免去許多文字無法正確呈現的煩惱。 * [更多charset](https://www.w3schools.com/html/html_charset.asp) * `<title></title>`：呈現於網頁瀏覽者眼前的網頁標題。 * `<body></body>`：包含了所有會顯示於網頁瀏覽者眼前的內容。 ### HTML常用標籤 * 標題 ```htmlmixed= <h1>我是h1</h1> <h2>我是h2</h2> <h3>我是h3</h3> <h4>我是h4</h4> <h5>我是h5</h5> <h6>我是h6</h6> ``` * 段落及文本`<p></p>` `<span></span>` ```htmlmixed= <p>This is a single paragraph</p> <p>This is a <b>single</b> paragraph</p> <p>This is a <i>single</i> paragraph</p> <p>This is a <strong>single</strong> paragraph</p> <p>This is a <s>single</s> paragraph</p> <p>This is a <u>single</u> paragraph</p> <p>This is a<br>single paragraph</p> <span>不換行</span> <span>不換行</span> ``` * 列表`<ol></ol>` `<ul></ul>` * 無順序性清單（Unordered lists）代表這些項目的順序改變，不影響任何是，例如購物清單。項目會包含在 `<ul>` 裡面。 ```htmlmixed= <p>今天吃了什麼</p> <ul> <li>蘋果</li> <li>香蕉</li> <li>梨子</li> </ul> ``` * 有順序性清單（Ordered lists）代表這些項目的順序是有意義的，例如食譜裡的製作步驟。 * ``ol``項目會包含在 `<ol>`裡面。可使用``type``更改序號樣式，如1、A、a、i ```htmlixed= <p>今天吃了什麼</p> <ol> <li>蘋果</li> <li>香蕉</li> <li>梨子</li> </ol> ``` --- #### LAB 1 -推薦料理 [食譜參考網站-愛料理](https://icook.tw/) * 條件1：title為推薦料理 * 條件2：要有標題：大標題「推薦料理」與小標題「XXX誠心推薦XXXXX」 * 條件3：寫一段推薦理由 * 條件4：食材標題(不可大過條件2的兩個標題)斜體呈現，以無序列表列出食材至少3樣 * 條件5：步驟標題粗體呈現(不可大過條件2的兩個標題)，以有序列表列出步驟至少3步（發揮各位的聰明才智，control+C&V） * 自由發揮以上所學範例： ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>推薦料理</title> </head> <body> <h1>推薦料理</h1> <h2>XXX誠心推薦黃瓜炒蛋</h2> <p>平易近人好上手，自己炒自己吃</p> <h4><i>食材</i></h4> <ul> <li>小黃瓜</li> <li>雞蛋</li> <li>好菇道雪白菇</li> </ul> <ol> <li>準備好以上食材</li> <li>切好洗好下鍋</li> <li>起鍋拍照</li> </ol> </body> </html> ``` --- * 連結`<a></a>` ```htmlmixed= <a href="https://sirla-fjulis.github.io/">SIRLA</a> ``` * `href`：hypertext reference的縮寫，放網頁連結。 * 圖片`<img>` ```htmlmixed=  <img src="images/firefox-icon.png" alt="SIRLA">  <img src="https://sirla-fjulis.github.io/pictures/logo/Halloween_SIRLA_LOGO_1000.png" alt="SIRLA"> ``` * `src`：要插入的圖片 URL。 * `alt`：當無法顯示圖片時，圖片替代文字，便於視障者閱讀網頁 * `title`：當滑鼠移經圖片時，顯示圖片的文字標示，非必填項目。 * 圖片與連結的結合 ```htmlmixed= <a href="https://sirla-fjulis.github.io/"> <img src="https://sirla-fjulis.github.io/pictures/logo/Halloween_SIRLA_LOGO_1000.png" > </a> ``` * div標籤 `<div></div>`：一般在寫html的時候，會以`div`作為容器，將某一部分內容包含在內，以方便做區塊的調整。 ```htmlmixed= <div style="height:100px; width:100px; background-color:black; color:white; border:10px red solid"> 你的內容 </div> <div style="height:100px; width:100px; background-color:blue; color:white"> 你的內容 </div> ``` * 屬性： * ``style``:可以放3個地方→元素裡、head裡、css檔案 * ``style``的值： * ``height``、``width``（不定義寬高時，其大小由內容而定） * ``overflow``:auto(or hidden)→解決文字溢出問題 * ``background-color``：背景顏色（英文、色碼） * ``color``：字體顏色 * ``border``：大小px 顏色樣式（solid、dashed、dotted、double....[更多](http://www.eion.com.tw/Blogger/?Pid=1118)） * ``margin``：調整外邊界間距（元素與元素間），用法如下 * margin:上右下左; * margin:上下左右； * margin:上下左右 ; * margin:四個邊同樣値; * ``padding``：調整內邊界間距（元素內內容與元素自己）；用法同上 ![](https://i.imgur.com/ynaIh1o.png) --- #### LAB 2 在LAB 1的基礎上，增加以下條件： 1. 插入食物照片，點擊圖片可另開網頁連結 2. 一個``div``包含整體，無背景顏色，要有邊框 3. 3個``div``標籤區分推薦理由、食材、標題 4. 選擇使用``margin ``或``padding``讓排版更好看 5. 自由發揮以上所學 * 範例 ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>推薦料理</title> </head> <body> <div style="border:1px black solid"> <div style="background-color:#FFF0F5; padding:20px;"> <h1>推薦料理</h1> <h2>XXX誠心推薦小黃瓜炒蛋</h2> <p>平易近人好上手，自己炒自己吃</p> </div> <div style="background-color:#FFFFBB; padding:20px;"> <h4><i>食材</i></h4> <ul> <li>小黃瓜</li> <li>雞蛋</li> <li>好菇道雪白菇</li> </ul> </div> <div style="background-color:#E8CCFF; padding:20px;"> <h4><i>步驟</i></h4> <ol> <li>準備好以上食材</li> <li>切好洗好下鍋</li> <li>起鍋拍照</li> </ol> </div>  <a href="https://icook.tw/recipes/306899" target="_blank"><img src="https://tokyo-kitchen.icook.network/uploads/step/cover/1513490/large_b129c85b64bb208f.jpg" alt="小黃瓜炒蛋"></a> </div> </body> </html> ``` --- * #### 區塊元素與行內元素 * 區塊元素（Block） 1. 會另起一行 2. 可以設置寬高 ``width`` ``hight``高度，行高以及頂和底邊距都可控制；默認情况下，其寬度自動填满其父元素寬度，即寬度100% 3. 區塊元素常見包括``div``、``p``、``h1~h6``、``ul``、``ol``、``li``.....等等 * 行內（inline）元素 1. 和其他元素都在一行上，相臨的行内元素会排列在同一行，直到一行排不下，才會換行，其寬度隨元素的内容而變化。 2. 設置寬高無效，只能由内容撑起来，即行内元素設置``width``，``height``屬性無效。 3. 設置上下``margin``无效，左右``margin``有效,``padding``上下左右有效，但父元素不會被一起撐起來 4. 行內元素常見包括``span``、``i``、``b``、``strong``、``a``、``img``...等等 * 用下面的程式碼試試看： ```htmlmixed= <div style="height:100px; width:100px; margin:10px auto">區塊元素</div> <span style="height:100px; width:100px; margin:10px auto">行內元素</span> ``` * 使用display屬性修改區塊、行內元素特性： * 值：block、inline、inline-block * inline-block：有行內元素的特質，也可以設定寬高及間距。 * 如何讓div可以並排排版？ * ``inline-block`` * ``float``浮動：會出現其他區塊被浮動區塊蓋住的現象，解決辦法：使用style屬性clear清除 * float特性 * 圖1：當還沒有添加float時，div會以區塊元素的特性呈現各佔一行 ![未添加浮動屬性] (https://i.imgur.com/NcqE4J7.png) * 圖2：當藍色區塊加上float屬性時，就如同漂浮起來一樣，在原本的地方如同不佔空間，所以橘色區塊會遞補上去，造成橘色區塊部分被藍色區塊蓋住的現象，此時需要在橘色區塊添加clear(值：left、right、both)屬性，使這樣的狀態被消除 * 藍色float + 橘色clear = 圖一的樣子 ![添加浮動屬性](https://i.imgur.com/VDHjx6Y.png) 範例 ```htmlmixed= <div> <div id="box1" class="b1"style="height:100px; width:100px; background-color:black; color:white; float:left"> 你的內容 </div> <div id="box2" class="b1"style="height:100px; width:200px; background-color:red; color:white; float:left"> 你的內容 </div> <p>dkjsjkdfsjkdgjkkgjsgjkdg</p> <p>dkjsjkdfsjkdgjkkgjsgjkdg</p> <p>dkjsjkdfsjkdgjkkgjsgjkdg</p> <p>dkjsjkdfsjkdgjkkgjsgjkdg</p> </div> ``` --- #### LAB 3 在LAB2的基礎上添加以下條件： 1. 選擇一種方式排版你的菜單 2. 活用以上所學完成屬於你的推薦菜單 * 範例1——inline-block ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>推薦料理</title> </head> <body> <div style="border:1px black solid"> <div style="background-color:#FFF0F5; padding:20px; " > <h1>推薦料理</h1> <h2>XXX誠心推薦小黃瓜炒蛋</h2> <p>平易近人好上手，自己炒自己吃</p> </div> <div style="background-color:#FFFFBB; padding:20px;display:inline-block; width:45%"> <h4><i>食材</i></h4> <ul> <li>小黃瓜</li> <li>雞蛋</li> <li>好菇道雪白菇</li> </ul> </div> <div style="background-color:#E8CCFF; padding:20px;display:inline-block; width:45%"> <h4><i>步驟</i></h4> <ol> <li>準備好以上食材</li> <li>切好洗好下鍋</li> <li>起鍋拍照</li> </ol> </div>  <a href="https://icook.tw/recipes/306899" target="_blank"><img src="https://tokyo-kitchen.icook.network/uploads/step/cover/1513490/large_b129c85b64bb208f.jpg" alt="小黃瓜炒蛋" style="display:block"></a> </div> </body> </html> ``` * 範例2——float ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>推薦料理</title> </head> <body> <div style="border:1px black solid"> <div style="background-color:#FFF0F5; padding:20px; " > <h1>推薦料理</h1> <h2>XXX誠心推薦小黃瓜炒蛋</h2> <p>平易近人好上手，自己炒自己吃</p> </div> <div style="background-color:#FFFFBB; padding:20px; float:left; width:45%"> <h4><i>食材</i></h4> <ul> <li>小黃瓜</li> <li>雞蛋</li> <li>好菇道雪白菇</li> </ul> </div> <div style="background-color:#E8CCFF; padding:20px;float:right; width:45%"> <h4><i>步驟</i></h4> <ol> <li>準備好以上食材</li> <li>切好洗好下鍋</li> <li>起鍋拍照</li> </ol> </div>  <a href="https://icook.tw/recipes/306899" target="_blank"><img src="https://tokyo-kitchen.icook.network/uploads/step/cover/1513490/large_b129c85b64bb208f.jpg" alt="小黃瓜炒蛋"></a> </div> </body> </html> ``` --- * 改成html5語義標籤，使可讀性增加，看標籤就可以知道哪一個部份是標題、哪裡是選單，方便使用者與搜尋引擎判斷。搜尋引擎在搜尋網頁內容時，可以搜尋到準確的資料與資訊。 ```htmlmixed= <div class="header"></div> <div class="nav"></div> <div class="main"> <div class="article"></div> <div class="aside"></div> </div> <div class="footer"> Updated on <span class="time">1</span> </div> ``` ```htmlmixed= <header></header> <nav></nav> <main> <article></article> <aside></aside> </main> <footer> Updated on <time></time> </footer> ``` `<header>`：網頁的標頭，通常放置網站標題。 `<nav>`：網頁的選單、導覽。 `<main>`：網頁的主要內容。 `<aside>`：網頁的側欄、附加內容。 `<article>`：一篇文章內容。 `<section>`：自訂的區塊，例如數篇摘要組成的空間。 `<footer>`：網頁的頁尾，通常放置聯絡方式、著作權宣告等等。 `<mark>`：強調一小塊內容。 `<time>`：顯示日期時間。 [更多](https://www.w3schools.com/html/html5_new_elements.asp) ---- ### 其他 * 表格 ```htmlmixed= <table border="1"> 　<tr> 　<td>這裡是第一行的第一個欄位</td> 　<td>這裡是第一行的第二個欄位</td> <td rowspan="3">這裡是第三個欄位</td> 　</tr> 　<tr> 　<td>這裡是第二行的第一個欄位</td> 　<td>這裡是第二行的第二個欄位</td> 　</tr> <tr> 　<td colspan="2">這裡是第三行的第一個欄位</td> 　　</tr> </table> ```

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.