-楓林軒-: HTML 入門-part1

剛架站時，遇到了一堆 html 碼看都看不懂，覺得這樣下去不是辦法，因為吃了魚也會想知道怎麼釣魚吧XDDD(這邊的釣魚不是指網路詐騙那種釣魚~ 廢話!!!!!)

所以就鑽研了一些有關 html 的資料，發現，學起來的話真的是很好用的工具，就這樣，我就陷入其中了~~~

網路上有些網站介紹 html 會突然從簡單的東西突然跳到一堆讓我霧煞煞的程式碼...深感挫折的我(其實還好)，咬牙撐過來之後，決定要整理出自己最好理解的說明順序，造福眾網友們(明明就是怕自己忘記= =)XD

現在，請把 HTML 當成你們的敵人吧!!! 攻略他!!! (= =")

有句話說，「要打敗敵人首先要先了解敵人~」

所以，什麼是 HTML 呢? HyperText Mackup Language，什麼?!要我解釋這是什麼意思?!好吧...反正我也會直接從維基上找，所以，想了解敵人名字的就 → HTML (超連結大法~ 喂!!!太不負責任了吧...)

廢話不多說(抱歉...廢話已經很多了)，就讓我們繼續攻略她他吧!!!!

首先，基礎架構就直接列出來

-Basic construct-

<html>
<head>
<title> //標題，例如本站此處就是 <title>楓林軒</title>
</head>
<body> //網站主體，所有程式碼，網站頁面中的，都是寫在此處
 //在html中，表示註解的意思，寫在中間的文字不會在網站中顯示出來
</body>
</html>

從上面能看出，主要有兩種符號，一種是<>一種是</>，<>是開始執行參數內容，</>是結束。

不難理解吧!目前為止...

當然，一開始不可能自己撰寫所有程式碼，所以要先會"讀"懂他她想說什麼(= =)

先從出現最多的開始說吧~有兩個，一個是字的變化，另一個是超連結，

OK! 呃啊啊啊啊啊啊~~~~~~要先說紫色還是先說藍色呢...(猶豫猶豫猶豫，猶豫個屁啊!!!)

先說藍色好了! (為啥啊 =口 =)

-字的變化- (不是要先說藍色嗎?! |||凸)

第一課：字體大小

>>之一 | 直接指定

我是字我是字我是字我是字

其中的 1=<n<=7 就是1以上7以下啦!!!! 若無設定，內定是"3"

其實最大就6而已，我也不之7是幹嘛的~~~~~啦啦啦 (慚愧...我錯了...)

出來長這樣

n = 1 我是字我是字我是字我是字
n = 2 我是字我是字我是字我是字
n = 6 我是字我是字我是字我是字
n = 7 我是字我是字我是字我是字

1 跟 2 為啥一樣大啊?奇怪 (歪頭)

算了~(就這樣算了啊?!)

什麼都不輸入的話

就會是初始設定值 3

default = 3

>>之二 | 加減內定值

我是字我是字我是字我是字

其中 -2 =< n <= +5 , default = 3

就是加正負號啦!不用什麼大腦~(菸) (跩屁啊 =_=+)

出來長這樣

n = -2 我是字我是字我是字我是字
n = -1 我是字我是字我是字我是字
n = +4 我是字我是字我是字我是字
n = +5 我是字我是字我是字我是字

奇怪= = -2 又跟 -1 一樣大了...

我怎麼覺得這邊試出來都怪怪的= =

照理說

+4應該要跟上面的 7 一樣大啊!!! ( 3+4 = 7)

算了= =

這一定跟網頁的初始設定有關(肯定貌) (你肯定個什麼勁啊!!!!! / 皿 \ )

反正~~~~大家都懂我的意思吧!!!

default 是 3 ，所以輸入 1 的話就跟輸入 -2 會有一樣的效果

//我怎麼覺得到現在這篇有點糟糕啊= =" 一堆失敗的東西... 而且我好吵 = =

>>之三 | 放大字體

<big>我是字我是字我是字我是字</big>

這更簡單了，一個<big></big>是放大一倍，<big><big></big></big>放大兩倍，依此類推，記得寫幾個<big>就補幾個</big>，培養好習慣喔!!

基本上，<big>ABC</big> 大小會等於 ABC

>>之四 | 縮小字體

我是字我是字我是字我是字

嘿嘿!用法同<big></big>

第二課：字的顏色

我是字我是字我是字我是字

這邊就要說一下 RGB 是啥了

點連結吧!(瀟灑) (還是要點連結啊?! =口 =|||)

簡單的說就是色碼，用三原色的概念來定義所有顏色的組成字母，闖造這個的人實在是太偉大了啊!!! (感嘆)

想知道色碼嗎~~~~~不告訴你~~~~~ (拖...眾毆)

.....我回來了，在這裡... RGB色碼 (遞)

下一課...

啊!差點忘了!!!!這課還有一些沒說!!!!!

有另一個懶人專用法，就是

我是字我是字我是字我是字

這邊的 word 是指顏色的名稱，像是red, green, blue, white, black....

嗯!就是這樣! (單字量這麼少啊?!?!?!)

因為我只會這些 (慚愧)

OK!下一課!!! (恢復得這麼快啊!!!???)

抱歉，記錯，沒有下一課了

下一單元...

-超連結-

直接來吧!

<a href="連結網址">我是字我是字我是字我是字</a>

這樣"我是字我是字我是字我是字"就會變超連結了，如果是寫成

<a href="http://jys.twbbs.org/" target="_blank">我是字我是字我是字我是字</a>

就會變這樣 → 我是字我是字我是字我是字

上面的網址後面我多加了一行字 target="_blank" 這是新開視窗的意思

若沒加，就直接在此頁打開囉!(悲劇就發生了...其實再按上一頁回來也是很快= =)

另外，很常見的，有些超連結不是文字，是圖片!!!!! (幹嘛激動= =")

圖片呢!就再多加一行像這樣

<a href="http://jys.twbbs.org/" target="_blank"><img src="http://puu.sh/41JA"></a>

這樣就變連結圖了 →

圖片網址後面可多一些控制大小的語法

width寬度 height高度 alt滑鼠移至其上的註解

徐爸說：若是只設定width或是height，可達到自訂縮放圖片到指定寬(高)的效果。

改完之後，像這樣

<a href="http://jys.twbbs.org/" target="_blank"><img src="http://puu.sh/41JA" width="40" height="40" alt="楓"></a>

成品就變小了 →

差不多就是這樣

網站中許多內嵌的工具，或是編輯文章時常常會用到，用內建編輯器有時也調不到自己要的那麼準確，所以還是適時地配合程式碼比較好用，當然，因人而異。

還有一件事要提醒，每個同一個<>中，若出現不同的指令(像是 width height)指令跟指令間要空格，因為~~編譯器~~　→錯誤，應為"直譯器"(感謝徐爸更正錯誤^^) 是依照空格來判斷指令，so, don't forget.

最後呢~

我要說一句話，那就是

革命尚未成功，同志仍須努力。