9 walker studio-9w個人設計工作室
Google
.網頁設計接案業務
.加入GForce手機娛樂聯盟

.基礎HTML教學
.CSS樣式表教學
.基礎JAVASCRIPT教學
.JAVASCRIPT收集
.自製ASP程式下載
.色彩英文名對照
.16進位色碼對照一
.16進位色碼對照二
.可愛包子動畫圖庫
.MSN表情小圖示下載
.9W2U-1024X768桌布下載

.GForce付費手機遊戲
.免費遊戲房
.免費線上遊戲房
.免費檔案報報
.免費資源報報
.網站漫遊報報
.多國語言字母發音表

因網友留言內容
含成人色情內容
討論區即時停止運作
不便之處敬請見諒
● LOGO交換登錄
● 和我們連絡

 友站及其它連結
刑事警察局網際網路資訊站
591租屋網站
反毒害大聯盟
台灣認養地圖
KTzone日記, 論壇
::S.H.E 青春組織國際後援會::
基礎HTML教學
Hyper Markup Language

01 HTML簡介 10 分割畫面(Frameset)
02 HTML文件的基本架構及指令 11 超鏈結(Hyper Link)
03 製作第一份HTML文件 12 拋錨(Anchor)
04 網頁背景(Background) 13 表單(Form)
05 控制標題字元大小及字型指令 14 跑馬燈Internet Exploer專用
06 使用CSS控制字元屬性 15 文字編排
07 表格的運用(Table) 16 Meta 指令運用
08 清單(List) 17 標註指令列表
09 加入圖片
18 其他

02、HTML文件的基本架構及指令
基本上 HTML 的標註是成對出現的,其格式如下:
<指令名稱 [屬性名稱 = 參數 ...]> 內容 </指令名稱>
凡是在 <指令></指令> 之間的內容均會受到這個指令及屬性影響。
例:
   (網站的抬頭)
   <TITLE>9W個人設計工作室網站</TITLE>

   (超連結)
   <A HREF="http://www.9w2u.com">9 Walker Studio-9W個人設計工作室</A>

  (文字字型大小及頻色控制)

   <font size="4" color="orange">01、HTML(Hyper Text Markup Language)簡介</font>

但是有少部份的指令,是不加結尾指令的。
例:
  9W個人設計工作室網站<BR> (跳行)

  <HR>(水平分隔線)  

補充:
水平分隔線語法:<HR [ALIGN= left | center | right] [SIZE = n] [WIDTH = n [%] [NOSHADE]>

說明:
1.<HR> 標註是用來顯示橫隔線。
2.ALIGN 屬性用來指定橫隔線的靠齊方式。
3.SIZE 屬性是用來指定橫隔線的厚度。例:<HR SIZE=5>
4.WIDTH 屬性是用來指定橫隔線的寬度,例:<HR WIDTH=80%>
5.NOSHADE 屬性指定以實線來顯示,而不要立體效果。
<hr width="400" size="10" align="right" >
水平分隔線輸出結果:


一個基本完整的網頁的標註結構大致如下:
<html> -----標示HTML文件的開始
 <head>-----標示HTML文件表頭
  <title>標題</title> -----標示HTML文件主題
 </head> -----標示HTML文件表頭結束


 <body> -----標示HTML文件主體內容開始

   主要HTML文件的內容(顯示在瀏覽器視窗上的主要網頁內容)寫在這區域裡

 </body> -----標示HTML文件主體內容結束
</html> -----標示HTML文件的結束

常用的HTML TAG:
Tag Description
<html>...</html> 網頁文件開始及結束
<title>...</title> 讓網頁名稱顯示於瀏覽器視窗左上方的標題欄
<head>...</head> 表頭區(用來放入如:meta、Javascript、style、css...等程式碼)
<body>...</body> 顯示在瀏覽器視窗上的主要網頁內容,如選單、連結、文字、圖片、顏色、圖形...等

<h1>~<h6>

設定字型大小,<h1>最大<h6>最小
<font>...</font> 字型設定
<a href="...">...</a> 連結
<img src="..."> 圖片
<center>...</center> 置中
<table><tr><td>...</yd></tr></td></table> 表格
<p>...</p> 標示一個段落
<br> 換行
<hr> 水平分隔線
<!-- ... --> 定義一段註解或不使用的程式碼


注意事項:

  1. 顏色部份的敘述部份有三種表示方式:
    A.可以用16進位的Hex色碼 如:color="#FFFFFF" (白色)
      #RRGGBB 代表.紅.黃.藍.三色之濃度比例,以16進位Hex值表示

    B.可以用16進位Hex值轉十進位值色碼 如:bgcolor="rgb(255,255,255)" (白色)
      RR,GG,BB 代表.紅.黃.藍.三色之濃度比例,以16進位Hex值轉十進位值表示

    C.直接以顏色的英文名稱標示 如: color="WHITE" (白色)


    *Hex色碼及色彩英文名您可以參考本站的16進位色碼對照色彩英文名對照
     

  2. 如果想在HTML文件中加入程式註解或是暫時不使用某些標註內容時可用以下標註方式:
    <!-- 暫時不使用的標註內容或程式註解 -->


    或是將一個程式區段全標註為暫不使用:
    <!-- tr>
     <th align=left>Result</th>
     <th align=left>Description</th>
     <th align=left>Entity Name</th>
     <th align=left>Entity Number</th>
    </tr
    -->

  3. 標註命令使用大寫或小寫的英文字母均可,例如: <BR> 和 <br> 的功能是完全相同的。但是 URL 及檔案名稱....等部份,有時仍必須注意大小寫,以避免錯誤發生。

  4. HTML 文件會自動忽略換行符號,因此要換行的地方必須加上 <br>或<p>標註。

  5. 超過一個以上的半型空白字元(使用空白鍵輸入的空白),會被自動忽略,只能使用一個半型空白字元。如果要使用連續空白字元,請使用對照字元 &nbsp; (Non-breaking Space)取代空白字元即可。

  6. 多個標註寫在同一行或分成數行來寫,結果是一樣的,例如:
    <HEAD>
     <TITLE>9 Walker Studio-9W個人設計工作室</TITLE>
    <HEAD>

    可寫成:
    <HEAD><TITLE>9 Walker Studio-9W個人設計工作室</TITLE><HEAD>


  7. 標註中若有超過一個以上的屬性,其順序可以任意對調,結果並不會改變例如:
    <table width="100%" border="0" height="96">
    可寫成:
    <table border="0" height="96" width="100%">

  8. 在HTML中我們所下的指令都必須用到 < > "" 等符號,所以如要在文件中顯示引用這些符號或其它特殊字元,就得使用下表所列對照字元:
  9. HTML特殊字元
    顯示字元 說明 對照字元 對照數字
    " quotation mark &quot; &#34;
    ' apostrophe  &apos; &#39;
    & ampersand &amp; &#38;
    < less-than &lt; &#60;
    > greater-than &gt; &#62;
      non-breaking space半型空白字元 &nbsp; &#160;
    ¡ inverted exclamation mark &iexcl; &#161;
    ¤ currency &curren; &#164;
    ¢ cent &cent; &#162;
    £ pound &pound; &#163;
    ¥ yen &yen; &#165;
    euro &euro; &#8364;
    ¦ broken vertical bar &brvbar; &#166;
    § section &sect; &#167;
    ¨ spacing diaeresis &uml; &#168;
    ª feminine ordinal indicator &ordf; &#170;
    « angle quotation mark (left) &laquo; &#171;
    ¬ negation &not; &#172;
    © copyright &copy; &#169;
    ® registered trademark &reg; &#174;
    trademark &trade;  
    spacing macron &macr; &#175;
    ° degree &deg; &#176;
    ± plus-or-minus  &plusmn; &#177;
    ¹ superscript 1 &sup1; &#185;
    ² superscript 2 &sup2; &#178;
    ³ superscript 3 &sup3; &#179;
    ´ spacing acute &acute; &#180;
    µ micro &micro; &#181;
    paragraph &para; &#182;
    · middle dot &middot; &#183;
    ¸ spacing cedilla &cedil; &#184;
    º masculine ordinal indicator &ordm; &#186;
    » angle quotation mark (right) &raquo; &#187;
    ¼ fraction 1/4 &frac14; &#188;
    ½ fraction 1/2 &frac12; &#189;
    ¾ fraction 3/4 &frac34; &#190;
    ¿ inverted question mark &iquest; &#191;
    × multiplication &times; &#215;
    ÷ division &divide; &#247;
    horizontal ellipsis &hellip; &#8230;



本站內容屬私人所有 請勿任易轉載 如須轉載 請通知本站
本站所鏈結標題及鍊結內容 皆歸原權利人所有
網站內容如有任何侵權 亦請通知本站刪除 謝謝!

Power by 9 Walker Studio
本站內容屬私人所有 請勿任易轉載 如須轉載請通知本站