Beginner HTML and CSS （上）

Introduction: What is HTML and CSS?

講師：Caleb Curry

HTML是Hypertext Markup Language（超文本標記語言）的縮寫，它是構成Web頁面（Page）的主要工具，是用來表示網上信息的符號標記語言。

層疊樣式表（英語：Cascading Style Sheets，簡寫 CSS），又稱串樣式列表、級聯樣式表、串接樣式表、層疊樣式表、階層式樣式表，一種用來為結構化文件（如 HTML 文件或 XML 應用）添加樣式（字型、間距和顏色等）的電腦語言。

講師使用的是Windows系統，編輯器推薦Notepad++，不過我還是會持續使用vim吧XD，因為沒有字幕，所以很多片段我只能看影片猜測他戲咧公啥米哇糕＠＠。

Tags and Basic Page Outline

講師：Caleb Curry

撰寫一段Hello, world!的程式碼，

結果如下圖：

Paragraphs, Headers, Line Breaks 

段落、標題、斷行表示:
其結果如下圖:

Everything About Lists

各種清單表示:

其結果如下圖:

Everything About Tables

表格表示方式:

表格標籤為<table>，橫行標籤為<tr>是table row的縮寫，表格標題標籤為<th>是table head的縮寫，通常是粗體且擺放是在中間位置，表格內容資料標籤為<td>是table data縮寫。

其程式碼執行結果如下圖:

Comments

註解在程式裡面相當重要，可以讓程式更易讀，使用的方式<!-- comment -->就好了。

Everything About Links

連結在網頁來說是相當之重要，不多說直接看程式碼:

要把index.html跟Another.html放在同一個目錄下。

Creating a FAQ with Page jump Links

也是一種超連結的概念，開啟一本的電子書，通常會有目錄，可以透過點擊某個文章標題直接跳到那頁的畫面，來看程式碼是怎麼作如下:

Everything About Pictures

圖片標籤為<img>，alt是說如果圖片連結失效，則就用這段文字顯示，示意如下:

程式碼如下:

width很直覺的就是限制圖片大小。

Text Inputs

輸入字串最常見的就是登入帳密的地方，像是信箱或是線上遊戲等等。其標籤為<input>，value是預設值，size是輸入框的大小，maxlength是可輸入的最大字母長度。其程式碼如下:

Password Inputs

Well, 有使用者名稱，當然就有使用者密碼囉，其實就跟一般text input差不多，只是輸入的密碼會用特殊符號代替。程式碼如下:

HTML Form Submission

這邊的教學有用到php的部分，所以就要安裝Appserv這套軟體，安裝好之後，把寫好的php放入你安裝的路徑\AppServ\www 之下。
<form>是個表單應用，這邊用來把表單內容傳送到php，以下是表單的簡單架構:

HTML form 表單結構

<form action="送出目的地" method="資料傳送方式">
... 表單內容...
</form>

<fieldset> 為 HTML 文件的表單元素 (element) ，用來設置輸入欄的表單。

<legend> 為fieldset表單的標題。

<label> 為 HTML 文件的表單元素 (element) ，用來設置標籤。

以下為程式碼

Radio

Radio屬於與使用者互動的功能之一，因此標籤也是 <input> 只是type是radio。

參考程式碼如下:

Check Boxes

Check Boxes屬於與使用者互動的功能之一，因此標籤也是 <input> 只是type是checkbox。

參考程式碼如下:

Drop Down Lists

由於這個部分的程式碼太長了，因此請點選這裡開啟。

Textarea

Textarea就是讓使用者可以輸入意見或是評論或是留言的功能。
直接看程式碼吧

Upload Button

就很簡單的一行code: <input name="upload" type="file" />

Div tag

其實這個小屁孩講師很多html的地方也不是很懂...亂教一堆..
根據我問谷哥大神的結果，得到下列的定義:

<div> 可定義文檔中的分區或節（division/section）。

<div> 標簽可以把文檔分割为獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。

如果用 id 或 class 來標記 <div>，那麼該標簽的作用會變得更加有效。

HTML5 Tags

HTML5 有新增一些tags，可以到這個連結參考。

結論

這個講師在一開始講非常基本的HTML還可以，之後稍微深入一點就不行了，他本人也不知道那幾個tags有什麼作用...，這樣不求甚解還敢開教學課程，真不塊是外國人，不知道哪裡來的自信？

此課程雖然我只把HTML上完而已，但是我目前給他的評價如下：
★★☆☆☆

就等CSS課程他是否能扳回一城。