StartUp114: HTML：Internet Developer的第一步

2011年12月18日星期日

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>想表達什麼？
表達所有我們想告訴使用者的事物。

字形大小：<h1>, <h2>, ~ <h6>，數字越小代表字型會越大。
```
<h1>大</h1>      
<h6>小</h6>
```
字體：<b>代表粗體，<i>代表斜體。
```
<b>我好粗</b>
<i>我好斜</i>
```
分隔線：<hr>。
```
<hr/> //分隔線
```

按鈕：<button>。

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

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

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

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

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

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

表格：<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>

列表：<ul>, <li>。

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

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

試一試吧！

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

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

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

Enjoy coding,

Kai

StartUp114

2011年12月18日星期日

HTML：Internet Developer的第一步

沒有留言:

張貼留言

標籤

搜尋此網誌

2011年12月18日 星期日

HTML：Internet Developer的第一步

沒有留言:

張貼留言

2011年12月18日星期日