前端連載

[前端連載] 賣咖啡學 html tag

簡介

上一篇簡單介紹完編輯器和html的tag,這篇就要來詳細介紹各種tag囉。說到html裡的每個tag,都有它存在的意義和目的。此外,這些tag可說是琳琅滿目,基本上沒有人可以全部認得喔!

那如果tag有這麼多種的話,我們要怎麼學呢?當然是挑出一些重要的、常見的tag,解釋它的使用時機和意義,其它的部分,就交給個人造化,需要的時候再去查囉。網路上有各式各樣的html5 cheat sheet可以參考,印下來,閒瑕時拿來蓋泡麵也是很不錯的XD

開始囉!

迎合老闆很重要

還記得你實驗室的老闆嗎?他平常的興趣是喝咖啡,上課時喝咖啡、下課時也喝咖啡。要罵你們這些研究生不長進之前,也是先喝一口咖啡漱口。此外,關於他最喜歡的程式語言,也是叫咖啡。但除了喝咖啡之外,他還有一個副業是賣咖啡。

什麼?賣咖啡?他不是教授嗎?幹麻去賣咖啡?

博士都可以賣雞排了,為什麼教授不能賣咖啡?說到這個,請給我一杯「教授咖啡」,我想喝喝看好不好喝。

這天你老闆走到你的座位,拍了你的肩膀。你覺得很奇怪,明明我今天準時早上九點到實驗室啊,難不成要罵我那天慶祝生日沒找他不成?正當你下半身發軟,想著要怎麼解釋的時候,老闆開口了:

可以幫我做一個網頁嗎?我想要向外行銷我的「教授咖啡」。

喔喔,當然可以啊!

即便有千百個不願意,但為了少幫他倒365天的咖啡,你還是硬著頭皮接下了這份差事,即便你沒有寫過任何的網頁。

想想看,你的網頁想要顯示什麼?

當然是標題囉!進一個網站的第一眼,一定是上方斗大的標題,這標題下的好不好,決定你87%的生意。我想你要賣杯咖啡的話,你的標題一定是跟咖啡有關,不會是什麼修理紗窗換玻璃之類的。

說到標題的話,你就需要一個h1 tag。除了h1 tag外,html 還提供我們6個大小的標題,分別是h1 h2 h3 h4 h5 h6,由大到小。每個瀏覽器顯示他絕對大小的部分,有可能會不一樣,但一般來說,都是h1>h2>h3>h4>h5>h6。所以囉,如果你要加上一個副標題的話,你就可以選擇使用h2。

除了標題之外,你還會需要一段內文,這時候,我們就需要一個p tag,代表的是paragraph。看到了嗎?這就是你第一步的網頁雛形。

那,我可不可以把h6拿來當內文呢?

當然可以囉,高興的話,連h1都可以拿來當內文。不過為了可讀性和瀏覽器SEO(搜尋排名),我們通常不會這麼做的。h1到h6和p都是一把刀,但不同種的刀適合切不一樣的東西,就是這個概念。

沒有藏頭不夠炫,我還要其它樣式!

身為一個資工系的學生,不會寫藏頭的程式碼,也要會寫藏頭的文章。想要換行嗎?html聽到你的聲音了,你需要一個br tag。br 這個tag和其它的tag有一點點小小的不一樣,他只有一個開始的tag,沒有結束的tag。因此世界上不存在</br>這種tag喔。好了,

除了藏頭還不夠,你還想特別強調它,不然如果別人看不懂你的弦外之音,辛苦就白費了。這樣的話,你需要一個b tag。加上b tag後,就會長這個樣子:

看一下html code,可能會覺得很亂,不過仔細分析一下結構,我們會發現其實就是把想要變粗的字用b包起來而已。當然啦,我們其實也可以把它寫在不同行,不過方便起見,既然都是在同一個段落,很多工程師會為了不想把檔案拉太長,便將全部都放在同一行。我個人是這一派的。

除了b tag外,還有其它 tag 例如 i、em、del、strong之類的,也都是相同的用法喔。

我試了一下,發現strong 和 b都是把字體加粗耶,這有什麼差別嗎?

好問題!雖然b 和 strong 都有加粗字體的效果,但是b 只是「單純加粗」而已,並沒有其它意思。但是 strong 包起來的區域,就是你真的想表示他們很重要。

我還是有點不大懂,這樣我該在什麼時候用哪個?

還記得九品芝麻官裡,方唐鏡一直跳進跳出的,白目的說「我又進來了,我又出去了,打我啊笨蛋。」嗎?其實他根本沒有想被打的意思,只是說出來後,主角當然就應他要求,揍他一頓囉。同樣的,如果你沒有要表達這很重要的意思,純粹只是要讓他粗而已,那你就用b tag就好了。如果這一段都很重要,就給他上個 strong tag 吧!

教授說他想要放上自己的名言耶,我該怎麼辦?

那就給個 q 或 blockquote 吧!你的老闆好麻煩喔,記得問他可不可以讓你早一點畢業。仔細看一下,會發現q是行內呈現的,而blockquote是另外再開一行呈現的。這是因為元素都有一個預設的顯示屬性,而q預設會接到前面元素的後面,而blockquote預設會開新的一行。關於這點的詳細介紹,要等到後面不知道幾篇連載,再來詳細說明。(遠目)

我要超連結,連到我們實驗室的網站,然後再加個圖片,這樣就差不多了!

當然囉,寫網頁難免會有連結,這時我們要用到a tag。在tag的起頭加上一個href,便可以連結到想要去的網址喔。此外,如果想要連結到相對的目錄去,也可以用"./XXX.html"或"../XXX.html"這種的表示法。./代表的是本層目錄,而../代表的是上一層目錄。

如果想要讓瀏覽器另開分頁,顯示你的網頁的話,那就加個target="_blank"吧!

等等!別工商R!你這連到的不是我們實驗室耶!

噓!小聲一點,不然會被你老闆知道!

要加個圖片的話,就補上img這個 tag 吧,src裡面就放著圖片的網址。或者如果圖片也在同個主機上的話,那也可以使用和 a tag 的 href一樣的相對目錄概念。注意到了嗎?圖片太大了,我給他加個width屬性,讓他「等比例」縮小。

還不夠!我想要有咖啡的清單

對對對,最重要的咖啡清單還沒放上來。說到列表,我們就會用 ol、ul、li這三個tag喔。看到OL先別興奮,讓我來示範一下他們的用法。

聰明的你應該有發現ul和ol前面的樣式有一點不太一樣。沒錯,數字和圓點,分別是他們的預設樣式。但是我們也可以用css把它改掉。你可以試著在css那一欄加上這些程式碼試試看,然後用//調整注解喔:


ol{
list-style-type: circle;
//list-style-type: square;
//list-style-type: lower-roman;
}

結語

洋洋灑灑寫了很多常用tag的用法,其實所有html的tag遠多於這一些。想要學習怎麼用的話,都可以上查資料喔。畢竟學習還是主動一點的好!

至於最重要的div和span,我想,就留到下次吧哈哈。

嘿,你怎麼都沒有重新整理你的瀏覽器!

粉絲專頁

https://www.facebook.com/noootownnotes/

 

 

 

One thought on “[前端連載] 賣咖啡學 html tag

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s