基本HTML語法
對於架站來說，HTML語法就是最基本的語法，不過相信許多人架站都是使用套裝軟體(ME,TOO)，這樣有好 有壞，第一個可以節省時間，然後又可以把版面排的漂漂亮亮的，不過這樣對於網頁的編排功能上就會損失許多，也不能精準的控制每個物件之間的關連。
也許網頁 本來就是漂亮比較重要，不過如果可以快速編排再加上精準控制，這樣不就更可以把HTML的精華發揮出來。
再以PHP來說，HTML語法就變成極為重要了，在PHP世界裡可沒有可以拖拖拉拉用滑鼠就可以移動的功能，純粹只能以語法控制，連出現在網頁的哪邊、大小都要自行設定。
當然你也可以說先設計好然後再把語法剪貼過去使用(我是這樣子= =)，但在剪剪貼貼之前最重要的還是必須了解基本語法吧!!
至少也要知道某段語法是有什麼功用，然後才可以依樣畫葫蘆，否則PHP輸出結果大概就只有文字了。
---------------------------------------------------------------
0-1.使用的編輯軟體
筆記本 :
最基本的編輯軟體，主要是給很熟悉語法的人使用。也是最簡單可以取得的軟體。
Editpad :
為FREE版本，他可以清楚的條列語法。是要對語言也一定了解的人使用。
Dreamweaver :
ADOBE公司出版，主要為視覺網頁設計使用，他可以很方便的設計排版，也有提供較深入的語法可以直接使用。(本人主要用這個，功能強強滾)
Frontpage :
也算是比較基本的編輯器，主要也是偏向視覺設計排版，但功能較少，也是需付費軟體。
---------------------------------------------------------------
0-2.HTML基本架構
<html> 告訴瀏覽器，這一行開始以下都是網頁型式的語言。
<head> 重要先讀取的資訊，開始
<title> 標題打在這邊，就是IE最上面那行</title>
</head> 重要先讀取的資訊，結束
<body> 內文開始，就是顯示給viewer看的東西。
</body> 內文結束
</html> 告訴瀏覽器，這一行結束了網頁，以下就不是網頁語言了。
以 上就屬於最最基本的HTML架構，也就是普通舊式語法的開頭，而現在隨著瀏覽器越來越高級，能處理的語法、用法也跟著變多，所以在現在在程式開始執行辨識 前都還要先加入DOCTYPE 宣告以下的內容要用哪一種語法和辨認方法(也就是哪一種版本)，當然不輸入也行，瀏覽器會自動判別為舊式的語法，至於能宣告的形式就有分許多，在這邊主要 只推薦一般較好用的宣告:
在<html>上面加入:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這樣將為定義以下內容使用xhtml來辨識，至於為什麼要用xhtml，其實主要原因又是習慣麻!!(其實是一開始並不知道要設這個，不過DREAMWEAVER都自動設為xhtml了，而之後也就習慣了)~呵呵。(其實還有一些功能上的原因啦)
至於之後很多網頁的<html> 都會再加上xmlns 變成 :
<html xmlns="http://www.w3.org/1999/xhtml">
至於為什麼呢?老實說我也不是很清楚，實際上好像沒有影響，可能只是類似一種標籤之類的吧!! = ="
到目前為止程式碼為 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
這樣開頭的宣告就差不多了，接下來還要在宣告編碼(語言)，這要放在<head>內。
加入 :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
or
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
這 段主要就是加入宣告的編碼，在這邊其實很重要，尤其是在之後寫PHP輸出的編碼必須與此配合，否則如果是中文字就會出現亂碼，在這邊如果是使用繁體中文網 頁，首先推薦BIG5(UTF-8可能會有亂碼，還要再做檔案的編碼更換)，但如果對電腦比較瞭解的話，就建議使用UTF-8，UTF-8的字元比較多， 比較不會有人名打不出來的問題，至於如果只是單機處理"檔案"的話，也是要用BIG5(正常台灣內電腦編碼為BIG5，或是要轉碼)，這方面問題當初也被 搞得亂七八糟的，以後再慢慢道來。
到這邊基本的宣告已經差不多了 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> </title>
</head>
<body>
</body>
</html>
這樣基本架構就完成了，接下來主要就是在BODY裡添加內容。
---------------------------------------------------------------
0-3.文字處理
字型的處理在html語法中算是較基本的，就算不去理會也是可以印出字來，不過如果目標是做一個漂漂亮亮的網頁，就變成不可忽略的一環。不過能夠處理字型的語法卻是五花八門 html, xhtml, ccs 等，都可以讓字型變得專業。
<以下語法接在body中>
首先介紹最直接控制字型的語法： 標題
<h1>輸入要顯示的字</h1>
<h2>輸入要顯示的字</h2>
...
<h6>輸入要顯示的字</h6>
tools(html_test)
這個標題大小有分6種大小，1最大，6最小，如果就以大小來說，這語法還算是方便，不過如果要加上顏色，可能就只能呼叫 ccs 幫忙摟！
接下來是html專門處理字型的語法 <font>
用法也是和上述差不多，也是：
<font>要顯示的字</font>
不過這能加入的元素就可以比較多了（不包含ccs），可以字體大小、調整字型、顏色。
字體大小：<font size=""></font>
<font size="-6">要顯示的字</font>
<font size="+6">要顯示的字</font>
tools(html_test)
總共有12種大小，從-6 ～ +6 可供使用。
字型： <font face=""></font>
<font face="華康粗圓體">要顯示的字</font>
<font face="標楷體">要顯示的字</font>
這邊就可以把你電腦有的字型都打上去試試看，不過請注意一點，如果別人的電腦沒有你有的字型，那就顯示不出來摟！
字的顏色： <font color=""></font>
<font color="#0000FF">要顯示的字為藍色</font>
<font color="#00FF00">要顯示的字為綠色</font>
<font color="#FF0000">要顯示的字為紅色</font>
tools(html_test)
這邊就是在color裡面填入#xxxxxx 為16位元碼，0 ～F，依序為紅綠藍的比例，每個顏色佔2個位元，等於 16*16-1＝255 個深淺，然後三色（RGB）組合配成的顏色，就會顯示出來。
當然這三種組合也可以一起使用：<font size="" face=""t color="#">要顯示的字</font> ，（科科～不用照順序嘿）
<font size="+2" face="華康粗圓體"t color="#0000FF">要顯示的字</font>
tools(html_test)
以上三點元素，基本上font差不多就這樣了。
沒有留言:
張貼留言