寫網誌一定要懂HTML
網頁的副檔名為什麼是 html/html ?
因為網頁是由 HTML(HyperText Markup Language) 編寫。
|
| 在網頁上按滑鼠右鍵，可「檢視網頁原始碼」。 |
|
| 網頁其實就是HTML |
HTML的作用
看看我們的報紙、雜誌，如果沒有排版，像字典一樣，所有字排排站，好看嗎？我的意思是好讀嗎？
|
| 排版讓報紙變得好看 |
語義化
HTML(Hypertext Markup
Language)可以賦予純文字意義，也就是所謂的「語義化」，好讓瀏覽器知道如何正確地顯示它內容結構
(HTML text fundamentals - Learn web development | MDN
)。讓人好閱讀，也幫程式理解其中的重點、思路、內容脈絡，以便 AI
人工智慧解讀。
因此 HTML 可以描述文章中的：
- 段落
- 標題
- 清單
- 表格
如下透過標籤/tag元素：<h3></h3>，標示(Markup)其中的文字"HTML的作用"是標題3
(heading 3)。
多媒體
HTML中的H，就是Hyper，超級的「超」。HyperText超文本，所以HTML網頁中除可以呈現文本，還可以放進圖片和影音。
如下<img />標籤元素，可將一個名為 butterfly.jpg 的圖片嵌入網頁中。
超連結
HTML還可在其中嵌入許多連結(link)、錨點(anchor)，把網路上的網頁、影音、PDF⋯⋯，各式各樣的資源串連在一起。
如下<a />標籤元素，便是一個錨點(anchor)，把「我的網誌」這幾個字變成一個連結，連結到 https://blogger.com
這個網址。
HTML檢視
若要檢視或編輯HTML，請善用編輯工具列上的「HTML檢視」及「HTML格式」功能：
在網誌中加入圖片
Blogger加圖片有以下四種方式。
我建議把會用到的圖片照片都集中在 Google
相簿，方便統一管理，而且現在我們大多用手機拍照，手機中裝 Google 相簿 的App
便可自動同步上傳到雲端。
素材圖庫-Pixabay
但往往有時只是想拿張圖片來裝飾一下網誌，或是做為心情的示意圖。網路上有些素材圖庫、庫存圖片可供使用，大部分是要收費，不然也有著作權的問題，Pixabay上的照片、插圖、向量圖形、影片和音樂，可免費使用、無需註明出處，也可用於商業目的。
類似 Pixabay 的網站不只一個，但我覺得它提供比較多的篩選功能，找圖比較方便。
|
| 素材圖庫-Pixabay |
例如輸入：summer，找和夏天有關的圖片，選擇：
- 排序：根據 受歡迎/Popular 的程度
- 圖片類型/images：照片、插圖、向量圖形
- 圖片配置/Orientation：長、寬
- 類型/Category
- 大小/Size
- 色調/Color
|
| Summer的搜圖結果 |
因為這是一段HTML文字，因此要切換到HTML模式貼上，才會被正確呈現：
發表文章
沒有留言:
張貼留言