--- type: slide --- # 新聞網頁製作 （一） - HTML 標記式語言 --- ## 學習目標 * 使用 Visual Studio Code 來撰寫程式 * 瀏覽器與開發者工具 * 基礎了解／運用 HTML（Hypertext Markup Language） * 解析新聞網頁 --- ## 下載／安裝 Visual Studio Code（VSCode） https://code.visualstudio.com/download --- ### 透過 VSCode 生成你們的第一個網頁 1. 新增 `demo` 資料夾 2. 啟動 VSCode 應用程式，打開 `demo` 資料夾 3. 新增 `index.html` 檔案（注意⚠️：副檔名為 `.html 4. 透過 VSCode 打開 `index.html`，並在編輯器中寫入 ```htmlembedded= <html> <body> <h1>Hello World!</h1> </body> </html> ``` --- 5. 右鍵點選 `index.html`，點選 `Copy Path` 選項。 6. 打開 Chrome 瀏覽器，將網址貼上。 7. 瀏覽器會出現 `Hello World!` 網頁。 --- ## 透過 Chrome Inspector（開發者工具）檢查網頁 1. 右鍵點選網頁 2. 點選 `inspect` 3. 網頁會跳出開發者工具 --- 5. 透過開發者工具，切換成不同載具來瀏覽網頁（見下圖） ![](https://i.imgur.com/oVVlpcp.png) --- ## Hypertext Markup Language（HTML） --- HTML 元素 - `起始標籤`（opening tag） - `內容`（content） - `結束標籤`（closing tag） --- ### 一般元素（Element） ``` 文法： <標籤名稱 屬性名稱="屬性值" 屬性名稱="屬性值"> 網頁呈現的內容 </標籤名稱> <tag attr1="value" attr2="value2"></tag> ``` ```htmlembedded= <!-- 範例： --> <h1 style="color: pink">新聞標題</h1> ``` --- ### 空元素（Empty Element） ``` 文法： <標籤名稱 屬性名稱="屬性值"> 範例： <img src="https://www.twreporter.org/images/footer/logo-horizontal02.svg" alt="報導者logo"> ``` --- ### 巢狀元素（Nested Elements） ``` <html> <!-- metadata for this html --> <head> <meta /> </head> <!-- data you want to present on browser --> <body> <article> <header> <h1> </h1> </header> <p></p> <figure> <img /> <figcaption></figcaption> </figure> </article> </body> </html> ``` --- ![](https://i.imgur.com/RMyPyfg.png) --- --- ### HTML 註解(Comment) ``` <body> <!-- 這是一個註解，不會呈現在畫面上。--> 這串字才會呈現在畫面上面。 </body> ``` --- ### 屬性(Attributes) ```htmlembedded= <!-- src 和 alt 是 <img> 特有的屬性 --> <img src="https://i.imgur.com/RMyPyfg.png" alt="用俄羅斯娃娃來解釋巢狀元素"> <!-- --> <a href="https://nickhsine.github.io/teach-at-nccu" target="_blank"> 課綱網址 </a> ``` --- ### 跳脫字元 https://oinam.github.io/entities/ ###### tags: `slides`