# 任務六、認識 HTML、CSS 與實作第一個網頁(HTML篇) ###### tags: `Codeshiba` 了解一些 Command Line 工具之後，先讓腦袋休息一會兒，我們來認識一下網頁是怎麼回事。 先了解一下什麼是 HTML、什麼是 CSS。 接著我們來製作屬於我們的第一個網頁。 參考資料: [認識HTML元素_HTML Tutorial](https://www.w3schools.com/HTML/DEFAULT.ASP) [HTML & CSS Is Hard: semantic html](https://internetingishard.netlify.app/html-and-css/semantic-html/index.html) [Freecodecamp](https://www.freecodecamp.org/) [Codepen.io](https://codepen.io/) [devdocs.io](https://devdocs.io/) ## HTML是甚麼東西? HTML(Hypertext Markup Language) 超文本標記式語言 Q1: 甚麼叫做**超文本標記式語言** 用來告訴瀏覽器該如何呈現網頁的標記式語言(markup language)。 HTML 由一系列的元素(elements)組成，你將利用它們來圍住、包裹，或者說標記(mark up)網頁中的每個部分，使它們在外表或行為上呈現某種特定風貌。 被標籤(tags)包住的內容會變成超連結，或者斜體字，以及其他的功能 可以用來**組織網頁架構**和**呈現網頁內容(list, paragraph or numbers)** 屬於標記式語言 有</head>跟</tail>來包裡面的text ![](https://i.imgur.com/0DpFibB.png) ```注意 通常來說，為了保持一致性(consistency)、可讀性(readability)，以及其他可能的原因，最好還是以小寫來撰寫標籤。 ``` ```EXAMPLE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <img src="images/firefox-icon.png" alt="My test image"> </body> </html> ``` **1.<!DOCTYPE html> — 文件類型（doctype）。** 在 HTML 發展初期（約莫 1991/2 的年代）文件類型是用來連結一些應遵守的規則，有點像自動校正的功能。然而，現在大家其實不太管文件類型，它就是個必須放在程式碼中的東西，現階段大家只需要知道這點就夠了。 **2.<html></html> — <html> 元素** 又被視為根元素（root element），包含了所有顯示在這個頁面上的內容。 **3.<head></head> — <head> 元素** 裡面放的是你想涵括的重要資訊，但不會顯示於網頁瀏覽者眼前的。例如，顯示於搜尋結果的關鍵字、頁面說明、CSS、字元實體集...等。 **4.<body></body> — <body> 元素** 所有會顯示於網頁瀏覽者眼前的內容。 無論是文字、圖片、影面、互動遊戲...等。 **5.<meta charset="utf-8">** 這個元素指定了你的文件使用utf-8這種字元編碼， 建議大家都要使用這個元素，它會幫助你免去許多文字無法正確呈現的煩惱。 **6.<title></title>** 呈現於網頁瀏覽者眼前的網頁標題。 HTML 文件的架構 讓我們來看看一個完整的HTML頁面它所包含的要素（以下範例的程式碼出自這篇文章：Dealing with files）： HTML遵守W3C(全球資訊網協會)的規範，目前主流的版本是HTML 5 目標-建立第一個網頁: 1. 新增一個檔案命名為index.HTML 2. 用文字編輯器，VS Code或Sublime來打開 3. 輸入內容並存檔 4. 用瀏覽器開啟 ### 如何撰寫? 打開vscode，輸入下面內容: (小提示):透過輸入html 5按下tab鍵即可 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hi, I am title</title> </head> <body> <h1>Hi, I am h1</h1> <p>Hi, I am paragraph</p> </body> </html> ``` "<>"可以不用輸入，只要輸入內文，按下tab即會出現 成果: ![](https://i.imgur.com/j4e4w3D.png) ## HTML 文件的架構 ### <!DOCTYPE html> 1. 現今大多數瀏覽器都相容於HTML5的格式 2. 如果需要處理IE瀏覽器的相容性才會需要修改它 ### html與head <html></html> 屬於根元素(root element)，包含所有顯示頁面上的內容 <head></head> head元素裡面放的資訊**不會**在網頁中看到，但其實都是重要的資訊(e.g. 網頁使用的字元集(charset)、標題(title)、顯示在facebook的縮圖等) 字元集: UTF-8、ANSI之類的 FB的縮圖，來自於OG Image ### title和charset <title></title> 呈現於網頁瀏覽者前面的網頁標題 <meta charset="utf-8"> charset: 為字元的集合，也就是格式 指定文件使用utf-8的字元編碼，**建議使用該元素，以免去許多文字無法呈現的煩惱** <body></body> 包含了所有顯示於網頁瀏覽者眼前的內容。包含文字、圖片、影片等內容。 ## HTML的元素 ### 1. Headings ![](https://i.imgur.com/KW5xQo8.png) ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hi, Iam title</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> ``` 注意：**Head跟headings不一樣喔!!!** Head是指html裡面架構的一環(通常放title的部分) Headings是指內容的階層分別 ### 2. Paragraphs ![](https://i.imgur.com/NvjBtuh.png) ![](https://i.imgur.com/5gLIVQP.png) paragraphs之間是會有空間的!屬於**block元素** ``` <body> <h1>Hi, I am h1</h1> <p>Hi, I am paragraph</p> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <h1>夏普控康寧日本違約 向大阪地院聲請假處分</h1> <p>文字內容1</p> <p>文字內容2</p> </body> ``` ![](https://i.imgur.com/C79sJP0.png) **span**則屬於**inline元素**，不會有方塊狀的間距 ``` inline 元素 <span>a</span> <span>b</span> <sapn>c</sapn> ``` ![](https://i.imgur.com/BkBpLLo.png) **div**則屬於**block元素**，不像paragraphs有帶狀的間距，但會有換行的效果 如果要單純換行，則可使用**br** ``` inline 元素 <span>a</span> <span>b</span> <sapn>c</sapn> <br> <br> block 元素 <div>甲</div> <div>乙</div> <div>丙</div> ``` ### 3. image [資源網址](https://www.w3schools.com/html/html_images.asp) ![](https://i.imgur.com/Zh4rieq.jpg) ``` <h2>Pictures from Unsplash</h2> <img arc="C:\Users\GF63\Desktop\PHOTO\419394.jpg" alt="lalala"> ``` **想要跑電腦檔案或網頁出來，都無法...** ![](https://i.imgur.com/fTUFtXX.png) ### 4. link [資源網址](https://www.w3schools.com/HTML/html_links.asp) ![](https://i.imgur.com/z1NoggN.png) ![](https://i.imgur.com/nYCK2jN.jpg) 連結的話內外部網站都是可以連結的喔!! ``` <br> <br> <br> <a href="https://tw.dictionary.search.yahoo.com/">Visit 奇摩字典</a> <br> <a href="C:\Users\GF63\Desktop\PHOTO\419394.jpg">夏天的阿勃勒</a> ``` ### 5. Table [課程資源](https://www.w3schools.com/HTML/html_tables.asp) ![](https://i.imgur.com/p6E2zsx.png) ![](https://i.imgur.com/41i0HZI.png) tr 代表表格的**一列**資料 th 代表表格的**標題列** td 代表表格的**一格資料** ``` <table style="width:100%"> <tr> <th>國籍</th> <th>姓名</th> <th>年紀</th> </tr> <tr> <td>中國</td> <td>張小三</td> <td>26</td> </tr> <tr> <td>台灣</td> <td>吳小六</td> <td>38</td> </tr> </table> ``` 不過預設的內容跑出來有點醜... 要調整顏色需要透過調整邊界(Boarder)，之後CSS會講到 補充說明: 下載beutify套件可以讓版面編排更整齊 ![](https://i.imgur.com/h6nuHTf.png) ### 6. Forms [學習資源](https://www.w3schools.com/html/html_forms.asp) ![](https://i.imgur.com/Ctd9Vdm.png) 可透過value和placeholder來放置預設值 **value:** 全黑顯示，代表預設值 **placeholder:** 灰色顯示，表示提醒使用者填寫該值 ![](https://i.imgur.com/qbhL71C.png) ``` <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form> ``` ## HTML元素的結構 ![](https://i.imgur.com/gLHYmPi.png) 包含 **opening tag(起始標籤)**, **closing tag(結束標籤)** 和 **content(內容)** 等三個部分，即可稱為**元素(element)** ![](https://i.imgur.com/In0hO26.png) ![](https://i.imgur.com/Bz9DUub.png) 在標籤(tag)裡面還可以加以修改的部分，稱為attribute(屬性?) ![](https://i.imgur.com/izdT2o6.png) Class的範例一，在字體和背景上更改顏色 ``` <head> <style> .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h2>The class Attribute</h2> <p>Use CSS to style elements with the class name "city":</p> <h2 class="city">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2> <p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p> ``` ### 範例二，id(如果需要跳轉頁面很方便) ![](https://i.imgur.com/BopcZuP.png) 點選該連結後直接往指定地方跳躍 ![](https://i.imgur.com/hCaqR7h.png) ``` <h2 id="Country">The class Attribute</h2> <p>Use CSS to style elements with the class name "city":</p> # 要指定跳往的區域，加上id碼，形成錨點 <p><a href="#Country">Jump to Country&City</a></p> # 把連結加上"#"id碼，形成連結 ``` 還有javascript的運用，但今天很累了 改天再說~ ## HTML的絕對路徑和相對路徑 [學習資源](https://www.w3schools.com/html/html_filepaths.asp) ![](https://i.imgur.com/9HUPM4i.png) ![](https://i.imgur.com/BcFyX16.png) ``` <h2>HTML5 Logo</h2> <img src="C:\Users\GF63\Desktop\HTML.png" alt=""> ``` 結果這一章悲劇，只有電腦的絕對路徑跑得出來，相對路徑無法... 而且電腦內的是反斜線(Backslash, "\") 操作說明是寫正斜線(Forwardslash,"/") ``` <h2>HTML5 Logo</h2> <img src="C:\Users\GF63\Desktop\htmltst\HTML2.jpg"> <img src="\html tst\HTML2.jpg" alt=""> <img src="html tst\HTML2.jpg" alt=""> <img src=".\html tst\HTML2.jpg" alt=""> ``` ## CSS(Cascading Style Sheets) 中文：串接樣式表 凡是網頁上看得到的文字、圖片、表格、表單都有它發揮的空間，文字方面，您可以利用CSS來隨意設定字體大小（不再像HTML最大只能到size=7而已），設定行距、間距、去除連結底線…等。 CSS內有一個撰寫 "Style"的區塊，就是撰寫"CSS"的部分 ![](https://i.imgur.com/OmH35KO.png) ### Inline CSS 需要撰寫在body內 ![](https://i.imgur.com/XY6VopD.png) ``` <body> <!--Inline CSS--> <p style="color: darkorange;">Hello</p> </body> ``` ### Internal CSS 需要撰寫id在body內，把值錨定在head中 ![](https://i.imgur.com/R6RZXQO.png) ``` <head> <style> #my-p{ color: blue } </style> </head> <body> <!--Internal CSS--> <p id="my-p"> I am my-p</p> </body> ``` ### External CSS 可以透過LINK來呼叫CSS ![](https://i.imgur.com/nEjZLVR.png) 在同一個WORKSPACE裡面創立一個CSS檔(style.css)，並透過連結呼叫它 ``` <head> <link rel="stylesheet" href="style.css"> </head> ``` ``` <body> <!--Internal CSS--> <P id="external-p"> I am external</P> </body> ``` ![](https://i.imgur.com/CYKcUQD.png) ``` #external-p{ color: green } ``` ## 在HTML內使用Javascript ![](https://i.imgur.com/U6XQyUc.png) ### 方法一、script 在body的尾端可以加入script來觸發一些事件，例如alert讓網頁開啟時出現對話方塊 ``` <script> alert("hi") </script> ``` ### 方法二、用引入的做法 先加入一個Javascript的檔案 可以把引入的程式碼寫在head或body的部分，僅僅是讀取的順序不大一樣 ``` <head> <script src="javascript.js"></script> </head> ``` ![](https://i.imgur.com/XKVfNq4.png) 開創一個javascript檔案，寫入prompt語法 ``` a=prompt() alert(a) ``` ![](https://i.imgur.com/UUwX5i5.png) ## HTML與Semantic 語意化: 把不重要的部分做標示，來分出頁首、頁尾等，主要是給搜尋引擎看的，可以**讓搜尋引擎方便辨識** **非語意化**與**語意化後**的網頁結構差異 ![](https://i.imgur.com/dIbuR8S.png) 語意化的流程決策樹，透過該流程可以判斷如何將網頁逐步語意化，而不是每個部分都用DIV ![](https://i.imgur.com/NkvKk6V.png)