HTML：Internet Developer的第一步

 

身為一個網路開發工程師，你首先必須要知道的就是：HTML。

就算你職位不是工程師，但若是你對網路產業有興趣，我也建議你稍微弄懂HTML在幹什麼？就連最近在網路業很夯的知名創投家 - Mr.Jamie，他也懂HTML，略懂。（甚至他還略懂Ruby on Rail，這連我也都還不熟）

今天在這裡，我們只談技術，對於HTML歷史發展有興趣的人，可以去HTML-wiki逛逛。

看到“技術”兩個字請不要害怕，其實網頁技術不過就等同“巫師放直火的走位，姜維先電再冰然後瞬過去冥天大絕”一般，沒什麼可怕的，熟能生巧罷了，況且這篇文章是給完全沒看過code的人所寫，所以請不用擔心會太複雜。

HTML的架構

HTML由<head>與<body>所組成。

而這兩個東西都被<html>所包圍著。 

• <head>：專門負責處理網頁的重要事項，例如link檔案，提供關鍵字給搜尋引擎，sitemap，展示網頁title等，簡單一點想其實他就是“大頭”，你頭腦裡的東西平常是不會隨便給別人看到的吧？而重要事項都是裝在你腦裡對吧。（不要跟我說你都裝...ㄕ.....）
• <body>：專門show出你想給使用者看到的東西，網頁的基礎模型從這裡開始建設，例如表格，footer（就是一般網頁底下的那一塊），左方的功能表，內文等等。其實稍微想像一下也知道，它叫做“body”，身體主要就是給人看的對吧？像是你也常常會去看蒼井空的...而不會只看他頭吧？
• <html>：告訴網頁這是由html語法所寫，不是xml等其他語法。

所以一般網頁的架構會是長得像這樣：

<html>
    <head>
        頭腦
    </head>
    <body>
        身體
    </body>
</html>

在html裡，"<"與">"夾起來的東西我們稱作"tag"。所有東西都會用開始tag: <sth> 和結束tag: </sth>（sth: something）包起來。（有些情況下為了code的整齊乾淨，會省略後面的結束tag: </sth>，只寫開始tag: <sth />，並在後面加個"/"代表結束。）


<head>在想什麼？
通常我們會在<head>裡放入一些我們不想讓使用者看到的資料，但這些資料又是必須要在網頁讀取完成前先載入好的，這裡舉幾個簡單例子：

CSS：美工檔案，底下代表連結到這個美工檔案。

<link href="test.css" rel="stylesheet" type="text/css" />

<title>：標頭資訊，就是你在瀏覽器上方顯示出的名稱。底下例子若寫在網頁裡，那此網頁上方就不會顯示“StartUp114:...”，而會顯示“This is a title”。

<title>
    This is a title
</title>

<body>想表達什麼？
表達所有我們想告訴使用者的事物。

1. 字形大小：<h1>, <h2>, ~ <h6>，數字越小代表字型會越大。
   

   <h1>大</h1>      
   <h6>小</h6>
   

2. 字體：<b>代表粗體，<i>代表斜體。
   

   <b>我好粗</b>
   <i>我好斜</i>
   

3. 分隔線：<hr>。
   

   <hr/> //分隔線
   

4. 按鈕：<button>。
   

   <button name="button" value="button" />    //value代表按鈕上所顯示的值
   

5. 輸入欄位：<input>。這裡分幾種型態(type)：
   

   <input type="text" />    //純文字輸入
   

   <input type="password" />    //密碼輸入 
   

   <input type="checkbox" />    //勾選欄 
   

   <input type="radio" />    //單選欄
   

6. 表格：<table>。
   

   <table>    //表格
       <tr>    //第一欄
           <td>1st</td><td>2nd</td><td>3rd</td>    //三個格子
       <tr/>
       <tr>    //第二欄
           <td>1st</td><td>2nd</td><td>3rd</td>    //三個格子
       <tr/>
   </table>
   

7. 列表：<ul>, <li>。
   

   <ul>
       <li>列表一<li/>
       <li>列表二<li/>
       <li>列表三<li/>
   <ul/>
   

看到這裡，恭喜你！你已經成功踏入神秘的網路工程世界了。


試一試吧！

竟然你已經看到這裡了，想必你也手癢很久了吧。
底下是我用javascript與html做成的html練習小工具。來動手試一試吧！
（或是你可以把我上面寫的code貼上去試試看）

---

---

小技巧：逛網頁時，若你對這網站的架構有興趣，你可以按右鍵然後點選“檢視原始碼”，這樣你就可以看到所有的html code囉。


截至目前為止，我寫了一年多的code了，寫程式其實真的不需要太聰明，只要你細心，邏輯正確，大致上都能完成程式工作，而對我來說coding帶給我最大的好處便是：加強我對所有事物的邏輯判斷，寫程式，真的是一件挺有趣的事呢！

Enjoy coding,

Kai

HTML5 v.s. Flash 生死鬥

為什麼我突然想寫技術相關文章呢?

竟然你誠心誠意的發問了，那我就大發慈悲的告訴你，為了防止本網誌過於單調，為了守護網誌的多元性，貫徹愛與真實的技術文章，可愛又迷人的瀟灑工程師，網路業!工程師!身為一個網路工程師，聊點技術文章，也是很合理的。就是這樣!喵^.<

不是所有人都是工程師，所以這邊簡單介紹一下何謂HTML5? 何謂Flash?

何謂HTML5

HTML5是由HTML延伸而來，所以要介紹HTML5必先了解HTML，HTML較為簡單的解釋為網路程式語言 (雖說實際上它算是一種協定，遵守XML協定之下的產物)，主要的功能為提供程式設計師們架設網頁用，現時則用來作為設計一個網頁(or網站, whatever)的主要架構，接著再用Javascript / jQuery / Ruby on Rail等script語言來控制網頁的特效及簡單驗證資料，而後端與資料庫串接或是複雜的處理則由PHP或是ASP來控制。若將網站比喻為一棟大樓，這棟大樓的鋼筋，就是HTML。
那HTML5與HTML有什麼差別?簡單來說，HTML5，比較新!!(踹飛...)因傳統HTML只能針對網頁作架構上的設計，例如將網頁左邊與右邊分開，中間放一個區塊作為主要資料呈現，上面放一排工具按鈕，下面放個copy right什麼的，無法做到像是動畫、特效、3D運算，或是直接拖曳桌面檔案到網頁上等酷炫功能，已然完全無法跟上時代的演變與無法滿足人們的視覺需求，於是，HTML5誕生了。

HTML5與HTML的不同之處：

• 新增動畫功能(與Javascript & CSS)
• 3D特效 (即時二維繪圖)
• 定時媒體播放
• 離線儲存資料庫（離線網路應用程式）
• 拖放資料檔案
• 新增一堆標籤與移除舊HTML標籤

何謂Flash

由Adobe公司在1996年針對網頁無法撥放動畫影音特效而發明，主要作用是用來在網頁中載入一段華麗的動畫，撥放多媒體物件，或製造可與user互動的視窗，像是網路上的許多小遊戲，95%以上都是由Flash製作。

生死鬥的由來

一切一切，都是因為我們偉大的Steve Jobs在2010年發表的一篇文章，Steve Jobs闡述為何不在Apple裝置上支援Flash，這篇文章在當時引起了一陣轟動，甚至有人認為Apple公然向Adobe宣戰了，但其實，Jobs只是闡述當時他所看到的未來，一個Flash慢慢消失的未來，在這之前並沒多少人特別以HTML5去抨擊Flash。而就在前幾天，Adobe宣布放棄行動版本Flash，這無疑在科技圈投下了一顆震撼彈!!不是因為證明了Steve Jobs的卓越遠見，而是橫行15年的Flash，終於承認自己開始跟不上潮流了，HTML5的聲勢開始盛囂其上，這場對決，即將完結!?

究竟Adobe Flash出了什麼事?

他無法與時並進，Flash作為一個曾經佔有網路多媒體市場95%的工具，卻從不聽進Adobe以外開發人員的心聲。我們要Flash支持3D運算，他不做。我們要Flash降低消耗CPU資源，他不聽。我們要Flash降低耗電量，他不聞不問，讓iPad死不安裝Flash，Jobs公開聲明：你是要有Flash但只有1.5小時電量的iPad還是沒Flash但電量10小時的iPad?行動裝置的崛起，Flash無法適時調整，逼迫硬體廠商生產行動裝置元件時，為了能撥放Flash，大幅提高成本，你知道的，要在行動裝置上播放Flash是需要特殊元件的，這元件，很貴。Flash是個封閉的軟體，他由Adobe所控制，相對於HTML5為開源軟體，這是個弱勢，HTML5可以很靈活，隨時加入新功能，Flash不行。Jobs與Google想要HTML5崛起，這兩家大廠各懷鬼胎，Jobs不想讓旗下產品iPad, iPhone等受到Flash控制，若每次更新或app strore上小遊戲都被Adobe Flash吃掉30%營收，Jobs會讓許多員工變成no jobs。Google為了降低微軟OS的市佔率，他當然要支持HTML5，因HTML5可以幫助Google做到像是Chrome OS，一個在雲端上的OS，Google長遠目標其一就是使未來的人們電腦上再安裝OS，只要有Browser，就可以上網使用OS，雲端OS。
綜合以上各個政治因素，技術因素，未來HTML5漸漸取代Flash已然成為趨勢，除非Adobe能想到什麼殺手級招數!
說到殺手級招數，HTML5已有人實作出幾個殺手級應用了：

1. 動畫
2. 無限的球
3. 滿天星斗
4. Web applicateion
5. 小畫家
6. 擁有物理引擎的小畫家
7. 3D圖框
8. 小遊戲
9. 俄羅斯方塊
10. 在Browser上打CS!!

注意到了嗎?以前這些可都是要用Flash來實現的呢!且HTML5不需要像Flash那樣先等他全部載入完才可以運行，他可以運用Ajax技術讓我們在背後暗地載入，這對user experience來說大大加分!而且，這些應用還都是一兩年前所做的。

HTML5 v.s. Flash 啟示錄


身為一個Start Uper，經過了這一連串HTML5與Flash的大車拼，你所應該從中知道的：

• 你必須要與時俱進，聽取市場的需要，而不是先做出產品再強迫大家使用你的產品。
• 你要能隨時靈活地更改你的產品，畢竟誰也無法預測人們的真正需要。
• 95%以上案例開源產品絕對比封閉好，閉門造車要造出符合大家期待的產品有很大難度，畢竟這世界上很難找到第二個Steve Jobs。
• 不要只看眼前，一個產品的興衰背後絕對有複雜的因素，或說背後有許多低調的大推手(見Apple與Google)。
• 不要盲目跟隨主流，主流未來未必會是主流。(台廠們你聽到了嗎?)
• 若無法因應市場靈活調整你的步伐，就算現在市佔率達到95%，也將會有滅頂之災。
• 身為一個技術人員，請開始學習HTML5。
• 聽Steve Jobs的話。

請不斷學習，不斷調整，且獨立思考，進而影響他人，加油!

Kai