雲橙雨林: Html 基本說明

顯示具有 Html 基本說明 標籤的文章。顯示所有文章

2012年11月22日星期四

Html基本說明（01）-html各項版本編寫差異

Html 有許多的格式，但基本的使用和目前常用的，也就那幾種，看各位想要哪一種，就選用那一種方式編寫，以下就介紹一些抬頭宣告的說明，這是基本的規格，各位可將之存成單一文檔，就可在新增網頁的時候，就不用再打一次了，多打多錯！

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>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>魚與橙的結合</title>
</head>

<body>
</body>
</html>

Html 4.01 格式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>魚與橙的結合</title>
</head>

<body>
</body>
</html>

HTML 5 格式

<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚與橙的結合</title>
</head>

<body>
</body>
</html>

以上，可選擇其一複制，當作每個網頁的開頭，其差別在於抬頭的宣告，其實也是告訴瀏覽器說，你的文件是那一種文件檔案。

XHML:

<!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">

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5

<!doctype html>

特別把他標示出，這些宣告是必須要寫的，如果不寫，瀏覽器會認定為這個網頁是很早很早以前設計的，而進入一種模式叫怪異模式，也就是說瀏覽器將會誤認你的網頁，就會發生，圖片和文字混亂的狀況！各位只要確定你要哪種寫法寫，你就把以上的文字做成固定文檔，要的時候再取出另存一個檔，就不會有問題了！

不過要注意的是，每個寫法內容都是一樣的，只是在寫的時候，XTML 和 HTML5 是比較嚴謹一點，必須在每個文檔皆有結束的標籤，HTML 4 就相對鬆散一點，其中的差異不大，但是要注意就是了。

Html 基本說明（02）-HTML基本結構說明

再來我們就html 結構來說明，以下以html5 的結構來說明！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚與橙子的結合</title>
</head>

<body>
</body>
</html>

在Html 抬頭宣告中，已簡化成 <!doctype html>，不再是一長串文字了，這對有些人來也許是個好消息，這個宣告還是必要的，所以在每個網頁上面，都必須有這個文檔類型。

1、<html> </html>：為最頂層元素，網頁的所有內容都寫在裡面（包在裡面）。

2、<head> </head>：通常放在這裡面的有<meta>,<title>,javascript,css 編寫或路徑，一般而言，網頁實際是不顯示該區域的內容的

3、<body> </body>：網頁編寫及顯示的位置，將你要顯示的內容，皆寫在裡面。

4、<meta> ：附加文件的額外資訊，如例<meta charset="utf-8">即為告知瀏覽器為utf-8的文字編碼，另有name屬性，可標示關鍵字的部份，例：

<meta name="Keywords"content="刀具,cnc,切削刀具">

提供搜尋機器人(google ,bing)搜尋的重點，內容不要寫太多關鍵字，寫太多沒有用，只要寫幾個就好了，這是有關於SEO的部份，在此不多做討論。

再附加一個也是關鍵字的部份，也可以增加搜尋機會，例：

<meta name="Description" content="魚和橙的結合,網頁設計,網頁與你分享。"/>

上述也是告知機器人知道你的網頁內容，利於搜尋即閱讀！

5、<title> Html 基本說明（二）</title>：表示網頁抬頭的部份，顯示於網頁上頭的文字，也是搜尋機器人(google,bing)關鍵字的重點之一

以上，為html基本結構，再來就要從這個基準點裡面，開始寫你所想的網頁了！

2012年8月22日星期三

Html 基本說明（25）-可以不用的html 標籤，讓你的網頁更易了解 [4]-br

最後就是不要過度使用<br/>標籤，<br/>是用來換行的，而不是用來建立一個段落，在過去設計師總是會避免他們不想要的段落間距，比如用一些換行來取代一個<p>標籤用<font>標籤使段落看起來像一個標題，其實，無須過度使用<br/>換行標籤，即可

利用css裡的margin和padding在<p>標籤中設定上下的長度，即可看出行與行的間距量

而一些過去粗糙的html 寫法就不要再寫了

結語：

過去的html的寫法，有那個時代的背景和時空，通常並非是很完整和通用的，有的在現在

看來是個很奇怪的寫法，但在橙子剛學html的時候，確實為了這個寫法感到感動，因為當

時也只有這樣寫法才會使網頁顯示自己所要表達的，不過，依照現今css的寫法中，是真的

要學習的，在實際寫網頁中，累的不是寫網頁，累的真的修改網頁，如果不照規矩寫，等

真的要修改的時候，那才叫。。。。。ooxx

Html 基本說明（24）-可以不用的html 標籤，讓你的網頁更易了解 [3]-bgcolor

再來就是不要再使用只有能裝飾外觀的，看起來又笨笨的<body>標籤屬性如以下程式碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>
<body bgcolor="red", text="#fff">abc
</body>
</html>

結果如下：

結果出現此背景是全紅的，而有白色的字，其實事實上只要應用基本的css標籤，即可完成此事各位須想像，如果當各位想將一個網頁的專案裡，全部的body全變成另外的顏色，而專案的網頁又高達20個網頁時，你要一個一個改body的標籤，只一件可怕的事，而這樣做，做出來只能是一個很基本的網頁，無法設計出較為高檔的網頁，而也不要使用特定用於瀏灠器上來設置網頁邊距的屬性：leftmargin。topmargin。marginwidth。marginheight，這些皆可用css中的

margin 來頂替使用。

2012年8月13日星期一

Html 基本說明（23）-可以不用的html 標籤，讓你的網頁更易了解 [2]-table 標籤

再來，依上篇說明我們不要用<font>、<b>、<i>的標籤後再來就是<table> 標籤，<table>標籤不是常用嗎，怎麼可能不用呢？不是的！<table>還是要用的，只是要針對他的功能來說明對於早期的寫網頁的人，常常都是用<table>來佈局的，會造成網頁程式的混亂，即對未來網頁修改，會造成很大的麻煩。

<bodybgcolor="#ffffff">
<table style="display:inline-table;"border="0"cellpadding="0"cellspacing="0"width="664">
  <tr>
   <td><img src="spacer.gif" width="184" height="1"alt=""/></td>
   <td><img src="spacer.gif" width="480" height="1"alt=""/></td>
   <td><img src="spacer.gif" width="1" height="1"alt=""/></td>
  </tr>

  <tr>
   <td><img name="challenges_r1_c1"src="challenges_r1_c1.gif"width="184"height="148"id="challenges_r1_c1"alt=""/></td>
   <td rowspan="4"><imgname="challenges_r1_c2"src="challenges_r1_c2.gif"width="480"height="641"id="challenges_r1_c2"alt=""/></td>
   <td><img src="spacer.gif"width="1"height="148"alt=""/></td>
  </tr>
  <tr>
   <td><img name="challenges_r2_c1"src="challenges_r2_c1.gif"width="184"height="120"id="challenges_r2_c1"alt=""/></td>
   <td><img src="spacer.gif"width="1"height="120"alt=""/></td>
  </tr>
  <tr>
   <td><img name="challenges_r3_c1"src="challenges_r3_c1.gif"width="184"height="153"id="challenges_r3_c1"alt=""/></td>
   <td><img src="spacer.gif"width="1"height="153"alt=""/></td>
  </tr>
  <tr>
   <td><img name="challenges_r4_c1"src="challenges_r4_c1.gif"width="184"height="220"id="challenges_r4_c1"alt=""/></td>
   <td><img src="spacer.gif"width="1"height="220"alt=""/></td>
  </tr>
</table>
</body>

這是一個用<table>來排版的網頁內容，一堆程式碼，是不是很亂呀！所以table只限於用於你要表現數據或者表單時所用，沒事別拿來用排版！

Html 基本說明（22）-可以不用的html 標籤，讓你的網頁更易了解 [1]-font、i、b 標籤

CSS 可以讓HTML的編寫更加容易，你不須要在HTML上增加一些標籤碼，而所出來的效果，又沒有預期的好，反而更加的醜，再加上更新上的困難，例如 <font>是較明顯的例子，最主要是給本本加入顏色，改變字體類型…等等

以下介紹一些可以用CSS 取代的標籤和屬性

不要用<font> 來控制文中的顯示，這個交給css來處理會更好。

不要用<b>和<i>來使文字變成粗體和斜體，css 可以使任何標籤變成粗體或斜體，因此你不需要這些專門用於格式化的標籤，然而，如果你一定要特別強調某個字或短語，你可以用<strong>標籤[系統會將文字顯示為粗體，而搜尋系統會認為為重要的搜尋點，增加搜尋的機會]。如對於較次要的文字，就用<em>來進行說明[系統會視為斜體]。

不要用<font>、<b>、<i>的方式

<body>
<p>this is  <font color="#999999">魚橙結合</font> blog~~~ go go go </p>
<p>this is  <b>魚橙結合</b> blog~~~ go go go </p>
<p>this is  <i>魚橙結合</i> blog~~~ go go go </p>
</body>

輸出結果

要改成以下寫法：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
<style type="text/css">
span {
    color: #999999;
}
</style>
</head>

<body>
<p>this is  <span> 魚橙結合 </span> blog~~~ go go go </p>
<p>this is  <strong>魚橙結合</strong> blog~~~ go go go </p>
<p>this is  <em>魚橙結合</em> blog~~~ go go go </p>
</body>
</html>

輸出結果

結果輸出的結果是一樣的，但是各位必須改由這樣寫，因為，這樣寫才符合現在的html寫法，也讓以後更能方便修改！

參考資料：CSS the missing manul - 麥克法藍

2012年8月7日星期二

Html 基本說明（21） - 網頁顏色英文 RGB 對照表

我們在CSS設定中，可以設定RGB，也可設定你要英文顏色，一般來說如果沒有特定用的顏色，我們都可以用英文顏色名稱來替代

所以，寫了一個對照表提供各位參照！

色彩

英文名稱

RGB值


Aqua

#00FFFF


Black

#000000


Blue

#0000FF


Fuchsia

#FF00FF


Gray

#808080


Green

#008000


Lime

#00FF00


Maroon

#800000


Navy

#000080


Olive

#808000


Purple

#800080


Red

#FF0000


Silver

#C0C0C0


Teal

#008080


White

#FFFFFF


Yellow

#FFFF00

2012年8月3日星期五

Html 基本說明（20） - 製作動態選單

有許多人，會用flash來製作選單，可以做出許多漂亮的動態選單，但是flash的動態選單並不是萬能的，

他有幾項問題，造成網路的困擾

1、flash 很傷電腦資源：現在的網頁並非只有電腦在讀取，設計時更須要符合各項設備的要求，平板電腦和手機並非像電腦一樣，有那麼快的cpu和ram，所以在讀取時就會很慢。

2、flash 不利搜尋：以現在來說，seo的部份對於swf 的內容資料，並非有效關鍵字搜尋，所以不利搜尋結果。

3、flash 工具太強：其實，選單的使用對於使用者來說，他只想要找到他要的資料，致於漂不漂亮，對於使用者來說，好像不是那麼實際，就有點殺雞焉用牛刀的狀況了

所以，還是用簡易的html 和 css 的方法來設計，比較方便又快速！

先來寫段基本架構吧！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>

<body>
<header>
  <h1>魚和橙的結合-選單</h1>
  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">CONTANT</a></li>
      <li><a href="#">BLOG</a></li>
      <li><a href="#">NEWS</a></li>
    </ul>
  </nav>
</header>
</body>
</html>

執行一下吧！

很醜！讓我加入一段css 吧！美化一下吧！

<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
h1 {
    font-family: Tahoma, Arial;
    color: #FC3;
}
nav {
    border: 1px dotted #999;
    height: 50px;
    width: 90%;
    float: left;
    background-color: #632494;
}
ul {
    list-style-type: none;
}
li {
    display: block;
    float: left;
    height: 50px;
    text-align: center;
}
nav ul li a:link, nav ul li a:visited {
    font-size: 1.5em;
    font-weight: bold;
    background-color: #632494;
    color: #ffffff;
    height: 40px;
    text-decoration: none;
    display: block;
    width: 150px;
    padding-top: 10px;
}
nav ul li a:hover, nav ul li a:active {
    font-size: 1.5em;
    font-weight: bold;
    background-color: #c6aa50;
    color: #000000;
}
</style>

加入以上的css後，先來看看結果：

加入css 就可以得到以上的結果，這有幾個設定的重點

1.一定要加入以下的css
* { margin: 0px; padding: 0px; }
2.設 <li> 及 <li a:link ..>都要設定 display:block; 及 float:left
這要設定為區塊，讓這個區塊的部位都向左浮動。選單就會變橫的
3.設定 :hover 讓滑鼠滑過時，作圖形的變化
4.在 a:link 設定 text-decoration: none;
讓連結的底線取消。
5.在 <ul> 設定 list-style-type: none;
取消讓選單的前面標示為none。

以上，就可以建設一個基本選單，各位可以試著copy程式碼，去一個一個試，應該會了解不少，試試吧！

如有問題，可以留言喔！大家討論討論！

訂閱：文章 (Atom)

色彩	英文名稱	RGB值
	Aqua	#00FFFF
	Black	#000000
	Blue	#0000FF
	Fuchsia	#FF00FF
	Gray	#808080
	Green	#008000
	Lime	#00FF00
	Maroon	#800000
	Navy	#000080
	Olive	#808000
	Purple	#800080
	Red	#FF0000
	Silver	#C0C0C0
	Teal	#008080
	White	#FFFFFF
	Yellow	#FFFF00

2012年11月22日 星期四

2012年8月22日 星期三

2012年8月13日 星期一

2012年8月7日 星期二

2012年8月3日 星期五

2012年11月22日星期四

2012年8月22日星期三

2012年8月13日星期一

2012年8月7日星期二

2012年8月3日星期五