# 一、網頁編輯器、HTML 基礎教學 ## 1. 認識網頁編輯器 Sublime Text3，來寫第一個 Hello world 網頁吧 相關資源 * [Download - Sublime Text](https://www.sublimetext.com/3) * [一小時上手 Sublime Text 3 網頁編輯器 | Udemy](https://www.udemy.com/sublime-text-3/learn/v4/overview) * [將 Sublime Text3 添加到右鍵菜單中 - CSDN 博客](https://blog.csdn.net/geofferysun/article/details/52264069) * [KeJyun 學習日誌: 在 Win7 右鍵選單加入使用 Sublime Text 開啟的功能](http://blog.kejyun.com/2012/12/Add-Sublime-Shortcut-Into-Right-Click-Menu-On-Win7.html) * [VSCode 教學 - 前端新世代的編輯器 - YouTube](https://www.youtube.com/watch?v=3mhvZ7th4YI) 網頁上的 Hello world * 命名資料夾叫 project，放桌面 * 在 project 裡存 .html，內容隨便打 * 可以直接點擊 .html 打開，或是拖曳到 Chrome 打開 ## 2. 六角學院線上問答會資訊 參考課程內說明操作 * [多載具下載，移動視訊好便利！-Zoom 雲端視訊會議](https://zoomnow.net/zntw_zoom_download.php) ## 3. 認識 HTML 標籤，設計具有語意化的網頁結構 寫 html 文件就像是在寫 word 一樣 * 有標題，提醒最重要的內容是什麼。會發現文字比較大 * 內文，就是文字段落的意思 * 文字連結，就是超連結，能連到其他地方去 ```markup

標題

文字段落

``` 用標籤，就是要告訴瀏覽器，哪些是重要的內容，哪些是一般的文字 更實務的內容？以Ｙａｈｏｏ新聞當作例子，什麼是最重要的內容？ 應該是文章的標題。 如何用 Chrome 瀏覽器看網頁內容 選取內容，右鍵，檢查元素 左邊是 html，右邊是 css html 的標籤裡面還有很多奇奇怪怪的東西，那叫做屬性 ```markup

標題

文字段落

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

標題

文字段落

文字連結 ``` 小考題：如果到了 Yahoo 購物中心，想知道 h1 是什麼，可以先從什麼東西是最重要的開始下手。所以應該是物品的名稱 h1 可以給這個內容比較多的權重 小整理 1. html 有標籤，有開頭與結尾 2. h1 是標題，p 是文字段落 3. html 標籤裡有屬性 4. 看到網頁時，能尋找 h1，看是不是最重要的內容 ## 4. 建立 HTML 環境，賦予網頁新生命 剛剛那些範例算是建立 html 嘛？ 還不算是。需要宣告 內容需要放在 body 裡面 head 放一些這個網頁的相關資訊。網頁的名稱、要放入哪些 css js ```markup 第一個網頁

標題

文字段落

文字連結 ``` 第一行需要宣告網頁的格式 `` 有些人覺得 html4 不嚴謹，只有開始標籤，所以 html5 規範前後要包起來 1. 撰寫網頁時，第一行要宣告用什麼格式 `` 2. 網頁內容要用 html 標籤包起來 3. head 可以包網頁名稱、等等其他資訊 4. 內容包在 body 裡面 UTF-8 編碼補充 在 windows 底下，中文在網頁上有能亂碼 要在 head 裡面增加 ```markup 第一個網頁

標題

文字段落

文字連結 ``` ## 5. HTML 環境程式碼 ```markup Document ``` * [HTML \ 聲明 | 菜鳥教程](http://www.runoob.com/tags/tag-doctype.html) * [HTML 標簽 | 菜鳥教程](http://www.runoob.com/tags/tag-html.html) ## 6. 插入圖片，了解圖片路徑與 HTML 屬性 圖片路徑可以用相對路徑或絕對路徑 資料夾結構 * img * logo.png * index.html 絕對路徑 先了解如何偷別人的圖(誤) 點右鍵，複製連結網址 小整理 1. 相對路徑與絕對路徑 ```markup 第一個網頁

標題

文字段落

文字連結 ``` ## 7. 加上連結，讓網頁開始具有互動性 `href="連結、檔案路徑"` 超\~連結，hyper reference `target="_blank"` 開新視窗 `title="文字連結"` 滑鼠移過，會提示文字 ```markup 第一個網頁

標題

文字段落

文字連結 ``` ## 8. 認識 ul、li 清單標籤 到雅虎找哪些可能是清單 檢查元素，可以右鍵按檢查，或是放大鏡點選 dom 元素 ```markup 第一個網頁

標題

我想講幾個重點

文字連結 ``` ## 作業：設計一個簡單網站吧 麻煩老師過目我的 HW1-9 作業練習了，謝謝老師 * [https://codepen.io/ayugioh2003/pen/OvEJXr?editors=1000​](https://codepen.io/ayugioh2003/pen/OvEJXr?editors=1000%E2%80%8B) 順便附上一些觀察與心得 1. CodePen 好像不需要加入 ``，加了還會彈出提示訊息 orz 2. 但在第一行加入隨便的註解，CodePen 就不會彈出錯誤訊息了 3. 那是不是代表不在 CodePen 裡，而在電腦資料夾的 .html 檔案，如果 ``​ 前面添加了其他註解，``​ 這個宣告就會不成功呢？ 4. imgur 好像沒辦法外連到 CodePen，可能被檔掉了 ## 第一章測驗 確保你對 HTML、sublime 有一定的了解 ![CH1測驗結果](https://i.imgur.com/1vIxwnI.png)