HTML基礎教學

HTML V.S. XHTML



XHTML是XML的一種應用
基於這一事實,
那些在以SGML為基礎的HTML 4中,
不完全合法的用法,應被改寫


HTML V.S. XHTML - #1

XHTML : 所有的元素,都要有結束符號。
  • 換行<br> --> <br />
  • 水平線<hr> --> <hr />
  • 圖片<img src=""> --> <img src="" />

所有屬性都要有引號包住。
  • <img src=123.jpg /> --> <img src="123.jpg" />

所有元素都必需要小寫。


那我們現在開始吧


XHTML教學

HTML 標記


圍堵標記
<起始標記> ... </終止標記>
範例
<title>這內容是標題</title>

單一標記
<hr />
<br />

HTML組成





標記的屬性值


<標記 屬性1="設定值1" 屬性2="設定值2" ……/>

FOR EXAMPLE

<img src="1.png" width="500" height="400" />

HTML常用單位


  • 百分比 %
  • 像素 px ( 預設 )


FOR EXAMPLE :


width=50%

width=250px

HTML的顏色設定


  • 以顏色名稱來表示(不建議)
    <body bgcolor="red">
  • 以色碼來表示[HEX碼表示]
    <body bgcolor="#FF0000">

HTML顏色設定


練習 : 修改網頁背景色彩

建立一個檔案名稱叫bgcolor_test.html的檔案,
用屬性方式把網頁背景顏色改成你喜歡的顏色。

提示 : body 的 bgcolor屬性。

相對路徑與絕對路徑


相對路徑
  • 網頁跟檔案在同一個資料夾
    <img src="a.jpg" />
  • 檔案位於上一層資料夾
    <img src="../a.jpg" />
  • 檔案位於下一層資料夾
    <img src="folder/a.jpg" />

絕對路徑
<img src="http://google.com/logo.jpg" />

相對路徑絕對路徑 - #2


絕對路徑可以節省網站流量,
但是要連結你信任的單位...

新聞 : 

文字變化與排版技巧


段落效果—使用排版標記

<p align="left">這是一個段落</p>

align屬性 - 預設是靠左
  • right - 靠右
  • left - 靠左
  • cancer - 置中




文字變化與排版技巧


網頁寫得好累,想換一行怎麼辦?

<br />


文字變化與排版技巧


水平線

<hr />

文字變化與排版技巧


段落標題(一樣有align屬性
right (靠右)、left (靠左)、center (置中),預設值:left)

<h1>

<h2>

<h3>

<h4>

<h5>
<h6>

文字變化與排版技巧


使用文字標記

<font size="2" color="#FF0000" face="標楷體">

size - 文字大小
color - 文字顏色
face - 文字字型

文字變化與排版技巧


 <b>、<u>、<i> 圍堵標記

  • <b> blod 粗體
  • <u> underline 底線
  • <i> Italic 斜體

文字變化與排版技巧


符號清單 - <ul><li>標記語法:

<ul type="square">...</ul>

<ul>標記的屬性 
type 預設值:type="disc"
  • disc  - 圓點
  • circle - 圓圈
  • square - 正方型

文字變化與排版技巧


項目符號與編號—使用清單標記
<li type="square" value="3">

value 設定清單的起始值 - 預設值是 : 1

type 預設值:type="disc"
  • disc  - 圓點
  • circle - 圓圈
  • square - 正方型

文字變化與排版技巧


編號清單

<ol>標記語法:
<ol type="i" start="4"></ol>

  • type="1" --> 阿拉伯數字 1,2,3
  • type="A" --> 大寫英文字母 A,B,C
  • type="a" --> 小寫英文字母 a,b,c
  • type="I" --> 大寫羅馬數字 I,II,III
  • type="i" --> 小寫羅馬數字i,ii,iii


文字變化與排版技巧


巢狀清單

在清單裡再加入另一層清單,
清單項目也會隨著一層層往內縮。

  • A
    • 1
      • @
      • #
      • $
    • 2
  • B

文字變化與排版技巧


加入註解

<!-- 老闆是白痴!!!! -->


特殊符號


  • © --> &copy; 
  • < --> &it;
  • > --> &gt;
  • " --> &quot;
  • & --> &amp;
  •  半形空白 --> &nbsp;

網頁圖片


圖片的尺寸與解析度

  • 格式 :  JPEG、GIF、PNG
  • 解析度  :  電腦螢幕為 72 dpi
  • 大小 :  越小越好(需考慮圖檔的清晰度 ) 

網頁圖片


圖片來源

  • 利用繪圖軟體自行製作圖片
  • 從掃描器或數位相機
  • 網路上免費的網頁素材

※用網頁素材需要注意版權

網頁加入圖片

  • src="images/butterfly.jpg" 指定圖片的路徑及檔名
  • alt="這是蝴蝶圖片" 設定圖片的替代文字
  • width="300" 圖片寬度 
  • height="350" 圖片高度 
  • hspace="5" 圖片左右的留白距離
  • vspace="5" 圖片上下的留白距離
  • border="2" 外框線的厚度
  • align="top" 設定圖片的位置。

src跟alt是必要的,
樣式設定會在CSS教更好的解法。

製作表格


<table>
 <caption>表格標題</caption>

 <thead><!--表頭--></thead>

 <tbody><!--表格主體--> </tbody>
  <tbody> <!--表格主體--> </tbody>

 <tfoot><!--表尾--> </tfoot>
</table>

製作表格


當報表很長時,
thead 與 tfoot 可以顯示在每一頁上

一份報表只能有一個 thead 及一個 tfoot
可以有多個 tbody

製作表格

表頭 thead
<thead>
 <tr>
  <th>月份</th>
  <th>價錢</th>
 </tr>
</thead>

製作表格

tbody
<tbody>
    <tr>
    <td>一月</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>$80</td>
  </tr>
</tbody>

製作表格

tfoot
<tfoot>
    <tr>
    <td>總計</td>
    <td>$180</td>
  </tr>
</tfoot>

製作表格


文字對齊位置

  • align 水平位置 left(靠左)、right(靠右)、center(置中)
  • valign 垂直位置 top(上)、middle(中)、bottom(下)

FOR EXAMPLE : 

<td align="left" valign="top">...</td>

製作表格


表格美化

  • bgcolor="#FF0000"
  • background="images/bg1.jpg"
  • border="1"
  • bordercolor="#FF00FF"

其實還有很多 : 

表格製作


但是

可以用CSS來做樣式設定會更好。

CSS我們後面會教到。

製作表格

練習


製作表格

合併儲存格

  • 合併左右欄 colspan="2"
  • 合併上下欄 rolspan="3" 更正 : rowspan="3"

製作表格


練習 : 合併儲存格


超連結


你們剛在簡報內所看到的藍色網址,都是超連結。



FOR EXAMPLE :

超連結


基本語法

  • 文字超連結
    <a href="index.htm">這是一個超連結</a>
  • 圖片超連結
    <a href="index.htm">
      <img src="logo.jpg" alt="這是一張圖片" />
    </a>

超連結


target屬性

  • _blank -->在新視窗。
  • _self --> 預設。在相同的框架。
  • _parent --> 在父框架中。
  • _top --> 在整個視窗。
  • framename --> 在指定的框架中。


超連結


連結方式

  • 站外連結
    <a href="http://www.google.com"
    target="_blank">google</a>
  • 站內連結
    <a href="連結目標相對路徑">…</a> 
    <a href="index.htm">回首頁</a> 

超連結


錨點(同一個頁面)

  1. 設定錨點位置
    <a name="錨點名稱">...</a>
  2. 加入錨點超連結
    <a href="#錨點名稱">…</a>

超連結


連結至EMAIL

mailto

<a href="mailto:who@email.com">歡迎來信</a>

超連結


練習:

建立一個超連結,連結到學校首頁


回家後自己試一下綜合實作練習題。


HTML基礎教學

By jackai

HTML基礎教學

  • 3,774