一、網頁編輯器、HTML 基礎教學

PreviousIntroduction Next二、CSS 常用語法

Last updated 5 years ago

Was this helpful?

一、網頁編輯器、HTML 基礎教學

1. 認識網頁編輯器 Sublime Text3，來寫第一個 Hello world 網頁吧

相關資源

網頁上的 Hello world

命名資料夾叫 project，放桌面
在 project 裡存 .html，內容隨便打
可以直接點擊 .html 打開，或是拖曳到 Chrome 打開

2. 六角學院線上問答會資訊

參考課程內說明操作

3. 認識 HTML 標籤，設計具有語意化的網頁結構

寫 html 文件就像是在寫 word 一樣

有標題，提醒最重要的內容是什麼。會發現文字比較大
內文，就是文字段落的意思
文字連結，就是超連結，能連到其他地方去

<!-- html 範例 -->
<h1>標題</h1>
<p>文字段落</p>

用標籤，就是要告訴瀏覽器，哪些是重要的內容，哪些是一般的文字

更實務的內容？以Ｙａｈｏｏ新聞當作例子，什麼是最重要的內容？應該是文章的標題。

如何用 Chrome 瀏覽器看網頁內容選取內容，右鍵，檢查元素左邊是 html，右邊是 css

html 的標籤裡面還有很多奇奇怪怪的東西，那叫做屬性

<!-- html 範例 -->
<h1>標題</h1>
<p>文字段落</p>
<a href="http:www.kimo.com.tw">文字連結</a>

所有的 html 標籤都有開頭和結尾吧。不一定，像插入圖片就沒有

<!-- html 範例 -->
<h1>標題</h1>
<p>文字段落</p>
<a href="http:www.kimo.com.tw">文字連結</a>
<img src="xxx.jpg">

小考題：如果到了 Yahoo 購物中心，想知道 h1 是什麼，可以先從什麼東西是最重要的開始下手。所以應該是物品的名稱

h1 可以給這個內容比較多的權重

小整理

html 有標籤，有開頭與結尾
h1 是標題，p 是文字段落
html 標籤裡有屬性
看到網頁時，能尋找 h1，看是不是最重要的內容

4. 建立 HTML 環境，賦予網頁新生命

剛剛那些範例算是建立 html 嘛？還不算是。需要宣告

內容需要放在 body 裡面 head 放一些這個網頁的相關資訊。網頁的名稱、要放入哪些 css js

<!-- html 範例 -->

<html>
    <head>
        <title>第一個網頁</title>
    </head>
    <body>
        <h1>標題</h1>
        <p>文字段落</p>
        <a href="http:www.kimo.com.tw">文字連結</a>
        <img src="http://placehold.it/500x300.jpg">
    </body>
</html>

第一行需要宣告網頁的格式 <!DOCTYPE html> 有些人覺得 html4 不嚴謹，只有開始標籤，所以 html5 規範前後要包起來

撰寫網頁時，第一行要宣告用什麼格式 <!DOCTYPE html>
網頁內容要用 html 標籤包起來
head 可以包網頁名稱、等等其他資訊
內容包在 body 裡面

UTF-8 編碼補充

在 windows 底下，中文在網頁上有能亂碼要在 head 裡面增加

<!-- html 範例 -->

<!DOCTYPE html>

<html>
    <head>
        <title>第一個網頁</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>標題</h1>
        <p>文字段落</p>
        <a href="http:www.kimo.com.tw">文字連結</a>
        <img src="http://placehold.it/500x300.jpg">
    </body>
</html>

5. HTML 環境程式碼

<!DOCTYPE html> <!-- 宣告文件為 html5 格式的文件 -->
<html>        <!-- 告知瀏覽器這是 HTML 文件 -->
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

6. 插入圖片，了解圖片路徑與 HTML 屬性

圖片路徑可以用相對路徑或絕對路徑

資料夾結構

img
- logo.png
index.html

絕對路徑先了解如何偷別人的圖(誤) 點右鍵，複製連結網址

小整理 1. 相對路徑與絕對路徑

<!-- html 範例 -->

<!DOCTYPE html>

<html>
    <head>
        <title>第一個網頁</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>標題</h1>
        <p>文字段落</p>
        <a href="http:www.kimo.com.tw">文字連結</a>
        <img src="img/logo.png">
    </body>
</html>

7. 加上連結，讓網頁開始具有互動性

href="連結、檔案路徑" 超~連結，hyper reference target="_blank" 開新視窗 title="文字連結" 滑鼠移過，會提示文字

<!-- html 範例 -->

<!DOCTYPE html>

<html>
    <head>
        <title>第一個網頁</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>標題</h1>
        <p>文字段落</p>
        <a target="_blank" href="http:www.kimo.com.tw">文字連結</a>
        <img src="img/logo.png">
    </body>
</html>

8. 認識 ul、li 清單標籤

到雅虎找哪些可能是清單檢查元素，可以右鍵按檢查，或是放大鏡點選 dom 元素

<!-- html 範例 -->

<!DOCTYPE html>

<html>
    <head>
        <title>第一個網頁</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>標題</h1>
        <p>我想講幾個重點</p>
        <ul>
            <li>第一點: blabla</li>
            <li>第二點: 內容</li>
        </ul>
        <a target="_blank" href="http:www.kimo.com.tw">文字連結</a>
        <img src="img/logo.png">
    </body>
</html>

作業：設計一個簡單網站吧

麻煩老師過目我的 HW1-9 作業練習了，謝謝老師

順便附上一些觀察與心得

CodePen 好像不需要加入 <!DOCTYPE html>，加了還會彈出提示訊息 orz
但在第一行加入隨便的註解，CodePen 就不會彈出錯誤訊息了
那是不是代表不在 CodePen 裡，而在電腦資料夾的 .html 檔案，如果 <!DOCTYPE html> 前面添加了其他註解，<!DOCTYPE html> 這個宣告就會不成功呢？
imgur 好像沒辦法外連到 CodePen，可能被檔掉了

第一章測驗

確保你對 HTML、sublime 有一定的了解