Basic Html
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Basic Html as PDF for free.
More details
- Words: 498
- Pages: 26
部落客不可不知 的HTML語法 製作者： totem、安妮、孔迷、小豬的旅遊日記
大綱 • • • • • • • • • • •
原則 變化字型的小撇步 超連結語法 E-mail 連結語法 放置圖片設定圖片大小、位置 標題 設定段落、換行與縮排 列清單 置中 製作表格 水平線
原則 z z
有始有終--所有指令以<>開始，以結束。 開頭指令要與結尾相符。 Example: 將我的文章四字粗斜體 我的文章……….× 我的文章(or 結尾亦 可)………………………….........○
變化字型的小撇步 想把字變成什麼樣，就用什麼樣的標籤把想變的字包起來就對了!
變電報(teletype)------- It is not difficult! It is not difficult!
變粗體字語法 z
或 <strong> 表格根本一點都不難嘛! 表格根本一點都不難嘛!
變斜體字語法 z
或 <em> 表格根本一點都不難嘛! 表格根本一點都不難嘛!
z
劃底線(underline) ------- 快要變成部落格小神童嚕! 快要變成部落格小神童嚕!
z
刪除線(strikethrough) -------<strike> <strike>表格真的一點都不難嗎? 表格真的一點都不難嗎?
z
變字體大小(font)------- 真的要變小神童啦! 真的要變小神童啦!
z
變字體顏色 ------- 親愛的，我把字變美了! 親愛的，我把字變美了!
z
又粗 又斜 又劃底線 還變綠色 我真是太厲害了啦! 我真是太厲害了啦!
超連結語法 z
要顯示的文字 example: 輸入我的網頁
E-mail連結語法 z
要顯示的文字 example: 輸入 我的信箱
放置圖片/設定圖片大小、位置 z z z
置於右方: 限制圖片大小：
標題 z z z z z z
設定段落、換行與縮排 z z z
段落:
縮排:
列清單 z
一般清單
z
順序清單
置中 z
置中文字
做表格囉! *好好利用表格不但可以讓你的文字乖乖聽話， 還可以有條理的呈現資料給讀者喔! 我們先來認識一下表格的基本標籤： 表格(table) -
表格列(table row) -
了解基本標籤了!我們來試著建立一個簡單的表格吧! 步驟解析 1.
2. 3. 4. 5. 6.
鍵入表格起始標籤 來開始一個表格 鍵入表格列的起始標籤
HTML
網頁顯示內容
哈囉
想要一列裡面有幾欄， 就在步驟2到步驟5中間 重複操作3和4。
想要有幾列，就重複進行左邊的動 作幾次。 而且，想把欄內文字變成標題，把原 來的位置改成 就可以嚕!
哈囉 你好 拜拜 這是 第二 列嚕
覺得奇怪嗎?表格的框咧?
其實是因為表格很聽話，說一步、做一步，我們沒 叫它有框，它絕對不敢有框啦! 所以接下來我們就來看看要如何利用標籤設計自己 想要的表格喔!
讓表格隨你心所欲的標籤: 表格本身 邊框寬度 內框線寬度 文字與框之距離 表格寬度
你好
cellpadding
width
拜拜
表格列與表格欄 & 儲存格左右對齊方式 or ?可填left,center,or right> 儲存格上下對齊方式 or ?可填top,middle,or bottom> {放在
大綱 • • • • • • • • • • •
原則 變化字型的小撇步 超連結語法 E-mail 連結語法 放置圖片設定圖片大小、位置 標題 設定段落、換行與縮排 列清單 置中 製作表格 水平線
原則 z z
有始有終--所有指令以<>開始，以結束。 開頭指令要與結尾相符。 Example: 將我的文章四字粗斜體 我的文章……….× 我的文章(or 結尾亦 可)………………………….........○
變化字型的小撇步 想把字變成什麼樣，就用什麼樣的標籤把想變的字包起來就對了!
變電報(teletype)------- It is not difficult! It is not difficult!
變粗體字語法 z
或 <strong> 表格根本一點都不難嘛! 表格根本一點都不難嘛!
變斜體字語法 z
或 <em> 表格根本一點都不難嘛! 表格根本一點都不難嘛!
z
劃底線(underline) ------- 快要變成部落格小神童嚕! 快要變成部落格小神童嚕!
z
刪除線(strikethrough) -------<strike> <strike>表格真的一點都不難嗎? 表格真的一點都不難嗎?
z
變字體大小(font)------- 真的要變小神童啦! 真的要變小神童啦!
z
變字體顏色 ------- 親愛的，我把字變美了! 親愛的，我把字變美了!
z
又粗 又斜 又劃底線 還變綠色 我真是太厲害了啦! 我真是太厲害了啦!
超連結語法 z
要顯示的文字 example: 輸入我的網頁
E-mail連結語法 z
要顯示的文字 example: 輸入 我的信箱
放置圖片/設定圖片大小、位置 z z z
標題 z z z z z z
標題一
標題二
標題三
標題四
標題五
標題六
設定段落、換行與縮排 z z z
段落:
文字
換行:縮排:
文字
列清單 z
一般清單
- 物品一
- 物品二
z
順序清單
- 物品一
- 物品二
置中 z
做表格囉! *好好利用表格不但可以讓你的文字乖乖聽話， 還可以有條理的呈現資料給讀者喔! 我們先來認識一下表格的基本標籤： 表格(table) -
了解基本標籤了!我們來試著建立一個簡單的表格吧! 步驟解析 1.
2. 3. 4. 5. 6.
鍵入表格起始標籤 來開始一個表格
| 建立表格第一列的第一格 於 | 後面打上儲存格內容， 再以 | 結束這一格 鍵入表格列的結束標籤
HTML
網頁顯示內容
| 哈囉 |
哈囉
想要一列裡面有幾欄， 就在步驟2到步驟5中間 重複操作3和4。
| 哈囉 | 你好 | 拜拜 |
想要有幾列，就重複進行左邊的動 作幾次。 而且，想把欄內文字變成標題，把原 來
| 哈囉 | 你好 | 拜拜 |
|---|---|---|
| 這是 | 第二 | 列嚕 |
哈囉 你好 拜拜 這是 第二 列嚕
覺得奇怪嗎?表格的框咧?
| 哈囉 | 你好 | 拜拜 |
其實是因為表格很聽話，說一步、做一步，我們沒 叫它有框，它絕對不敢有框啦! 所以接下來我們就來看看要如何利用標籤設計自己 想要的表格喔!
讓表格隨你心所欲的標籤: 表格本身
| 哈囉 | 你好 | 拜拜 |
你好
cellpadding
width
拜拜
表格列與表格欄
裡面}
哈囉 哈囉 你好 你好 拜拜 拜拜 合併列(上下儲存格之合併) #為想合併多少個列 合併欄(左右儲存格之合併) | #為想合併多少個欄 讓儲存格內文字不會因儲存格大小而斷行 | |
你好 拜拜 這是 第二 列嚕
你好 拜拜 這是 第二 列嚕 為什麼表格亂掉了呢? 因為，我們要合併「哈囉」和「這是」，除了記得在「哈囉」那格寫上 正確的合併標籤之外，還要記得刪掉「這是」這一格喔 ! 你看Æ
哈囉 這是 你好 拜拜 第二 列嚕 小叮嚀 z 表格的標籤是很纖細的，一定要記得： 一旦有一個起始標籤，就一定要有一個結束標籤喔! z 所有控制某項目的屬性都是夾在那個項目的標籤之內的。例如： 控制整個表格的屬性，就是夾在 和 | 內 … | 水平線 (Horizontal Rules) 在文章中加入水平線，可以讓你的版面更整齊美觀喔! z z 水平線標籤 水平線屬性標籤： 水平線寬 像素或是百分比 水平線大小 水平線顏色 ?為顏色 避免陰影 width Related Documents
Html BasicNovember 2019 13
Basic HtmlOctober 2019 77
Basic HtmlJune 2020 22
Basic HtmlNovember 2019 49
Html Basic 2May 2020 17
Basic Html TagsNovember 2019 66 | |||||||||||||||||||||