User:Vin0528
歡迎來到 HTML 的世界！此頁面充滿了許多關於 HTML 編輯的教學 (包含少數 JavaScript、CSS)，不會做網頁的網友可以看過來，從入門學起，到比較深入，都可以學習到！
若要發表問題，請按這裡。
English version click here.
入門
[编辑]如何新增 HTML 檔案?
[编辑]新增 *.txt 檔案，主檔名可自取，副檔名應為.htm , .html ...。
如何編輯 ?
[编辑]此文主要是使用純文字編輯，各位網友也可以試試 Microsoft FrontPage、Adobe Dreamweaver，兩者皆是直接編輯的方式。
那到底要如何編輯 ? 答案揭曉！
第一課
[编辑]建立網頁
[编辑]要先新增 HTML 檔案，再進行編輯，於是新增了 "index.html" 檔案。現在請使用純文字編輯器開啟它。
接著輸入以下文字：
<html<head> <title>(自訂標題)</title> </head> <body> Hello, world. </body></html>
"自訂標題" 的意思是自己為網頁取一個名稱。"title"顧名思義就是要定義標題。
呈現結果為：
Hello, world.
第一個課程上完了。很快吧！
第二課
[编辑]條列項目
[编辑]註: 以下若沒特別註解，該程式碼一律放置於<body>與</body>之間。
輸入以下程式碼：
<menu> <!-- 建立條列式項目。 --> <li> List one <li> List two <li> List three </menu>
List one 等等的定義了項目名稱。呈現結果：
上完了條列項目，還有一節要上。
表格
[编辑]這次比較複雜，要專心看！
輸入以下程式碼：
<table border="1"> <!-- 建立表格。 --> <tr><td colspan="3">網頁技術</td></tr> <!-- 定意一行表格，並跨 3 欄。 --> <tr><td>HTML</td><td>JavaScript</td>><td>CSS</td></tr> <!-- 這是表格的第二行。 --> </table>
呈現的表格如下：
| 網頁技術 | ||
| HTML | JavaScript | CSS |
這節課又上完了。超快速！
第三課
[编辑]表單
[编辑]這次要介紹 HTML 中的表單。呈現結果：
輸入以下程式碼：
<input type="text">
即可顯示文字框。
<標籤名 屬性名="屬性">，以下列一個表格。
| text |
|
一般文字框。 |
| password |
|
密碼文字框，使用 ● 隱藏。 |
|
|
電子郵件輸入框，僅 HTML5 支持。 不支援者顯示一般文字框。 | |
Perl 程式語言
[编辑]Perl 是一種處理表單的程式。新增 "cgi-1.pl" 後，寫出下列程式碼：
| 01 | #!/usr/local/bin/perl |
| 02 | print "Context-type: text/html\n\n" |
| 03 | # Get that user submitted info. |
| 04 | $ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/; |
| 05 | if ($ENV{'REQUEST_METHOD'} eq "POST") |
| 06 | {read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});} |
| 07 | else |
| 08 | { $buffer = $ENV{'QUERY_STRING'};} |
| 09 | # Give the page values. |
| 10 | @darray = split(/&/, $buffer); |
| 11 | foreach $arg(@darray) |
| 12 | { |
| 13 | ($name; $value) = split(/=/, $arg); |
| 14 | $value =~ tr/+//; |
| 15 | $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; |
| 16 | $argument{$field_name} = $field_value; |
| 17 | } |
| 18 | # Show the respond HTML file. |
| 19 | print "<html><head>"; |
| 20 | print "<title>問卷調查</title></head>"; |
| 21 | print "<body>"; |
| 22 | print "<h1>問卷調查</h1><hr>"; |
| 23 | print "姓名：$argument{'name'}"; |
| 24 | print "</body></html>"; |