第九章使用HTML编辑工具编写网页语法_第1页
第九章使用HTML编辑工具编写网页语法_第2页
第九章使用HTML编辑工具编写网页语法_第3页
第九章使用HTML编辑工具编写网页语法_第4页
第九章使用HTML编辑工具编写网页语法_第5页
已阅读5页,还剩29页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、第九章使用HTML編輯工具編寫網頁語法目錄1.本章目的:22.Html語法的基本架構23.分隔標籤 :<br> <p>44.排版標籤55.字體標籤。76.商務網站77.特殊文字設定標籤118.影像標籤139.背景標籤1410.連結標籤1511.表格標籤1812.序列標籤2013.框架標籤2214.網頁背景音樂2315.如何用DreamWeaver 來撰寫Html語法241. 本章目的:n 早期在學習網頁製作時,都是學習Html語法來製作網頁,直到近2、3年才因為網頁軟體的進步,大家學網頁製作大都由FrontPage、DreamWeaver入手,比較少人在提倡學習Html

2、語法了,那到底需不需要學習Html呢?如果想進入網頁高級班-製作電子商務網站,使用PHP或是ASP.NET來製作互動式結合資料庫的網頁時,那就要熟悉Html語法了。n 在本章將介紹Html語法的入門,包括一些常用的語法:¨ 網頁架構、分隔標籤、排版標籤、字體標籤、文字標籤、影像標籤、背景標籤、連結標籤、表格標籤、序列標籤、表單標籤、框架標籤、背景音樂標籤n 另外也將介紹如何用DreamWeaver 來撰寫Html語法,在DreamWeaver 提供了5種輔助工具來幫忙撰寫Html語法,這些工具包括:¨ 使用HTML語法提示功能¨ 使用即時查詢HTML語法¨

3、; 使用狀態列的快速標籤編輯器¨ 使用標籤選擇程式及標籤編輯器¨ 使用標籤檢測器2. Html語法的基本架構(1). 標籤範例<HTML><HEAD><TITLE>首頁的名稱</TITLE><Meta></HEAD><BODY>此部份網頁的主要呈現部分。</BODY></HTML>(2). 解說標籤及用法n 網頁是由一堆標籤組合起來的,透過瀏覽器的解讀,就成了平時你上網所看到的網頁了。n HTML: HyperText Makeup Language 大小寫不拘,但要

4、純文字格式 <>:TAG, <:start tag, >:end tagn <HTML> </HTML>說明文件的開始與結束,但可以省略n <HEAD> </ HEAD >說明文件的標頭,文件資訊n <TITLE> </TITLE>顯示在瀏覽器視窗左上方的標題n <BODY> </ BODY >說明文件的主體,本文3. 分隔標籤 :<br> <p>在網頁的HTML語言是沒有所謂的Enter鍵或空白鍵,所以不管您按了多少次的空白或Enter,都是無法換行

5、的。 (1). 分隔標籤有2種語法:換行分段n 換行標籤:<br>n 分段標籤:<p> (2). 標籤說明:n <br>會強迫斷行n <p>會分段 :基本上他會比斷行還多空出一行(3). 範例: Html語法網頁顯示結果中華名國<br>萬歲中華名國萬歲中華名國<p>美國中華名國美國4. 排版標籤(1). 文字置左、置中、置右 (A). 語法:分段標籤<p>有個屬性:align,就是用來設定文字段落置左、置中或置右(B). 範例:Html語法網頁顯示結果<p align="left"&g

6、t;商務網站</p>商務網站<p align="center">商務網站</p>商務網站<p align="right">商務網站</p>商務網站(C). 標籤說明:n align這個屬性將來會常常在不同標籤中看到,它的功能是專門在設定水平對齊位置,包括:置左(align="left")、置中(align="center")、置右(align="right")。 (2). 置中標籤 (A). 語法:n <center>商務網

7、站</center> (B). 標籤說明:n 任何可以顯現在網頁上的東西,包括:文字,圖片、表格等等都可以置中(C). 範例: Html語法網頁顯示結果<center>商務網站</center>商務網站(3). 以原先樣式顯示標籤(A). 使用方法:n <PRE> </PRE> (B). 標籤說明:n <PRE> </PRE>這個標籤可以將其中的文字以原先樣式顯示出來。 (C). 範例: Html語法網頁顯示結果<PRE>祝福大家 幸福快樂 2003.02.10</PRE>祝福大家 幸福

8、快樂 2003.02.105. 字體標籤。 (1). 標題標籤 (A). 語法:n <h1> </h1> (B). 標籤說明:n 標題共有六種,分別是從<h1>到<h6>,<h1>最大,<h6>最小n 使用標題標籤時,標籤會將字體變成粗體字,而且獨自一行(C). 範例:Html語法網頁顯示結果<h1>商務網站</h1>6. 商務網站<h2>商務網站</h2>商務網站<h3>商務網站</h3>商務網站<h4>商務網站</h4>商務

9、網站<h5>商務網站</h5>商務網站<h6>商務網站</h6>商務網站(1). 文字標籤Font-更改文字大小(A). 語法:n <FONT SIZE=n> </FONT> n = 17,7最大,1最小(B). 標籤說明:n Font是改變文字標籤,它可以設定文字的大小、顏色、底線.n 如果以Font更改字體大小,利用Size屬性,可以有七種變化¨ 最小:<font size=1>¨ 最大:<font size=7>n 另外寫法:¨ 先定義基本字型大小<BASE

10、FONT SIZE=n> n = 17,7最大,1最小¨ 再以相對大小定義字型大小<FONT SIZE=+m> </FONT> <FONT SIZE=-m> </FONT> ¨ 以一般而言,預設字體多為 3,所以以基本字型的大小加減m,則為<FONT SIZE=+2> </FONT>字型大小為6<FONT SIZE=-1> </FONT> 字型大小為3¨(C). 範例:Html語法網頁顯示結果<font size=1>商務網站</font>

11、 或是<font size=-2>商務網站</font>商務網站 <font size=2>商務網站</font> 或是<font size=-1>商務網站</font>商務網站<font size=3>商務網站</font> 或是<font size=+0>商務網站</font>商務網站<font size=4>商務網站</font> 或是<font size=+1>商務網站</font>商務網站<font size=5

12、>商務網站</font> 或是<font size=+2>商務網站</font>商務網站<font size=6>商務網站</font> 或是<font size=+3>商務網站</font>商務網站<font size=6>商務網站</font> 或是<font size=+4>商務網站</font>商務網站(2). 字型變化標籤(A). 語法:n <B> </B> 黑體字n <I> </I> 斜體字n &l

13、t;U> </U> 加底線n <STRIKE> </STRIKE> 加上刪除線n <BLINK> </BLINK >讓文字閃爍但是只在Netscape適用n <SUP> </SUP>上標n <SUB> </SUB>下標n <!->註解,說明n <tt> </tt>可以顯示似打字效果字體n <em>.</em>可以顯示強調效果字體n <strong>.</strong>可以顯示加強效果字體(B). 使

14、用範例:Html語法網頁顯示結果<b>粗體</b>粗體 <i>斜體</i>斜體 <u>底線</u>底線 <sup>上標</sup>上標 <sub>下標</sub>下標 <tt>打字機</tt>打字機 <blink>閃爍</blink>(ie沒效果)閃爍 <em>強調</em>強調 <strong>加強</strong>加強 (3). 文字標籤Font-更改文字顏色(A). 使用方法

15、:n <FONT color="顏色值">.</ FONT > (B). 標籤說明:n 使用Color屬性設定顏色,其中的顏色值可以使用RGB值(例如:#800080),也可以用顏色的英文(例如:紫色)n 一些常用的顏色英文與RGB值對應表請參考下表英文中文RGB值英文中文RGB值Black黑色#000000Green綠色#008000Silver銀色#C0C0C0Lime萊姆綠#00FF00Gray灰色#808080Oliver橄欖綠#808000White白色#FFFFFFYellow黃色#FFFF00Maroon褐紅色#800000Light

16、Yellow淡黃色#FFFFE0Red紅色#FF0000Navy海軍藍#000080Purple紫色#800080Blue藍色#0000FFFuchsia粉紅色#FF00FFTeal藍綠色#008080Orange橘色#FFA500Aqua水藍色#00FFFFSnow White雪白色#FFFAFASky Blue天藍色#90CEEB(C). 範例:Html語法網頁顯示結果<font color="#FF0000">商務網站</font>商務網站<font color="紅色">商務網站</font>商務網

17、站(4). 文字標籤Font-更改文字字體(A). 語法:n <FONT face="字型名稱">.</ FONT > (B). 標籤解說:n 你製作網頁使用某種字型(草書),而網友在瀏覽你的網頁時,如果它的電腦沒有該字型(草書),那麼它看到的仍然還是細明體n 另外,如果針對NETSCAPE瀏覽器,則必須在網頁中有加上這一行敘述,以指定網頁的語言格式¨ <meta http-equiv="content-type" content="text/html; charset = big5">&

18、#168; 如此NETSCAPE瀏覽器才可以正確顯示出中文¨ 如果沒有加這一行,顯示出的中文一定是細明體而無法更改¨ 至於 ,皆可正常顯示。 (C). 使用範例:Html語法網頁顯示結果<font face="標楷體">商務網站</font>商務網站<font face="新細明體">商務網站</font>商務網站7. 特殊文字設定標籤(1). 特殊控制字元(A). 使用方法:n &lt 表示<n &gt 表示>n &amp表示&n &

19、nbsp表示(B). 標籤說明:n 很多特殊的符號是需要特別處理的n < 、 > 因為很容易與網頁標籤< >搞混,所以如果要輸入 <,則必須輸入特殊字元 &lt(C). 範例:Html語法網頁顯示結果&nbsp;  (&nbsp;代表一個不斷行空白) &lt;< &gt;> &amp;& &quot;" 8. 影像標籤(1). HTML 內可以放置的兩種圖片格式:n GIFn JPG(2). 基本語法n <IMG SRC=" taigi.gif"

20、; >加上test.gif 的圖片及下列特性¨ 絕對路徑 D:photo taigi.gif¨ 相對路徑 與HTML文件同一目錄之taigi .gif(3). 進階語法n <IMG SRC="taigi.gif" WIDTH=200 HEIGHT=150 BORDER=N VSPACE=10 HSPACE=10 ALIGN=TOP ALT="這是提示字喔">¨ WIDTH圖片寬200點¨ HEIGHT圖片高150點¨ BORDER=N N為外框大小,不設則為無外框¨ VSPAC

21、E 10圖形上下方各留10點¨ HSPACE 10 圖形左右方各留10點¨ ALIGN=TOP 文字與圖形上方對齊¨ ALIGN=MIDDLE 文字與圖形中間對齊¨ ALIGN=BOTTOM文字與圖形下方對齊¨ ALT=" "說明圖形的文字(4). 範例: Html語法網頁顯示結果<img src=taigei.gif">太極 太極<img src=taigei.gif height=30 width=30>太極9. 背景標籤(1). 背景顏色、背景圖片標籤 (A). 語法:n &

22、lt;BODY bgcolor="#ffffff" background="bground.jpg"> (B). 標籤說明:n 設定背景顏色¨ <BODY BGCOLOR=#FFFFFF> 背景顏色為白色n 設定背景圖片¨ <BODY background="bground.jpg"> (2). 設定內文顏色、連結文字顏色 (A). 語法:連結前後顏色的設定n <BODY TEXT=”顏色代碼” LINK=”顏色代碼” ALINK=”顏色代碼” VLINK=”顏色代碼”>&

23、#168; TEXT=”顏色代碼”設定文件中文字的顏色¨ LINK=”顏色代碼”設定未連結過文字的顏色¨ ALINK=”顏色代碼” 設定正在連結但尚未連結上的顏色¨ VLINK=”顏色代碼”設定曾經連結過的顏色(B). 範例:n <BODY text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000> 10. 連結標籤(1). 網頁外部的連結 - 連結檔案或超連結(A). 語法:n <A HREF="URL

24、" > 商務網站 </A>(B). 標籤解說:n URL 連結的位址Ø Local : 如某個檔案<A HREF=Link1.HTM>按我就可以打開Link.htm<A HREF=”/SUB/HREF1.HTM>打開子目錄SUB下的href1.htmØ 其他 : 如某個檔案 <A HREF:”.tw>致遠首頁 Hinet的FTP站 硬體討論區 <A HREF:mailto:awecmail.dw>陳老師的E-Mail(C). 範例: 網站連結<a href=&

25、quot;http:/sunspot-">好站</a>電子郵件連結<a href="mailto:tad.tw">寫情書給我</a>ftp連結<a href=".tw">下載檔案</a>news連結<a href="news:.tw">seednet news服務</a>gopher連結<a href="gopher:/.tw/">seednet gopher服務</

26、a>bbs連結<a href="telnet:/.tw/">seednet bbs服務</a>(2). 網頁內部的連結-又稱為書籤的功能文件的超連結(A). 語法: n 先在欲連結處作記號:<a name="here1">這裡是你想連結的點</a> n 設定連結:<a href="#here1">連結</a> (B). 標籤說明:n 舉例說明<HTML><UL>李白的詩<LI> <A HREF=#POEM1>靜

27、夜思</A><LI> <A HREF=#POEM2>玉階怨</A><UL><A NAME=#POEM1><H2>靜夜思</H2> 床前明月光, 疑似地上霜。<BR> 舉頭望明月, 低頭思故鄉。<HR><A NAME=#POEM2><H2>玉階怨</H2> 玉階生白露, 夜久侵白襪。<BR> 卻下水晶簾, 玲瓏望秋月。</HTML>Ø <A NAME=#書籤名稱>上例的書籤名稱即為Poem1,Po

28、em2Ø 在用HREF指到這個書籤,如<A HREF=#POEM1>靜夜思</A>n 同一份文件內<A HREF= #FIRST><A HREF= #SECOND><A NAME=#FIRST><A NAME=#SECOND>(C). 範例: 第一步驟第二步驟<a name="m1">欲連結的位置</a><a href="#m1">www連結標籤基本概念</a>(3). 【連結標籤的參數】 (A). 使用方法:n 在連結後面加

29、入 target=_參數 (B). 標籤解說:n 連結的參數並不多,常見的大概就屬 target 這參數了,target 的意思是目標,也就是網頁連結的指向目標,這參數在框窗(frame)裡尤為重要! (C). 使用範例: n target=框窗名稱:這在框架標籤中也有提到,而且也只有在框架(框窗 or frame)中才用得到。正常而言,框窗有各自的名稱,因此,我們可以利用此標籤,來指定連結的內容顯示到哪一個框窗中。 n target=_blank:將連結的畫面內容,開在新的瀏覽視窗中。 n target=_parent:將連結的畫面內容,當成文件的上一個畫面。 n target=_self:

30、將連結的畫面內容,顯示在目前的視窗中。 n target=_top:這個參數可以解決新連結的畫面內容,被舊框窗包圍的困擾,使用這參數,會將整個畫面重新顯示成連結的畫面內容。 11. 表格標籤(1). 範例:以建立下列的表格為例:表格的標題第一行第二行第三行第一列A1A2A3第二列B1B2B3第三列C1C2C3(2). 範例語法解答:以建立上述的表格的語法如下所示:<TABLE><CAPTION> 表格的標題</CAPTION><TR> <TH> <TH>第一行 <TH>第二行 <TH>第三行<

31、TR> <TH>第一列 <TD>A1 <TD>A2 <TD>A3<TR> <TH>第二列 <TD>B1 <TD>B2 <TD>B3<TR> <TH>第三列 <TD>C1 <TD>C2 <TD>C3</TABLE>(3). 基本語法說明² <TABLE > </ TABLE >表格的開頭與結尾² <CAPTION > </ CAPTION >表格

32、的標題或名稱² <TR>TR (Table Row),定義表格的一列,如上例,有4個TR,所以這個表格共有4列,換言之,有幾列,就要有幾個TR² <TH>TH (Table Heading ),定義表格欄位標題,文字以粗體並置中顯示(黃色部分)² <TD>TD (Table Data),定義表格內每一欄的資料,文字以正常並靠左顯示(綠色部分)l 基本上,<TH>與<TD>除了字型及對齊方式外,並無太大區別。二者都可以看成是定義該列中,每一欄的資料為何,所以,一列中有幾欄,就應有幾個<TH> 或

33、 <TD>(4). 其他語法說明² <TABLE BORDER=2 WIDTH=100% HEIGHT=100% CELLSPACING=5 CELLPADDING=2>l BORDER表格加框線l BORDER=2表格框線圖點(pixel)數l WIDTH=100%佔瀏覽器寬度的百分比,否則以資料多少而調整,資料多則表格加寬,資料少則表格小l HEIGHT=100%佔瀏覽器高度的百分比l CELLSPACING=5 表格格線的圖點數l CELLPADDING=2距欄位邊界的圖點數,即資料與格線之距離² <CAPTION ALIGN=TOP&g

34、t;l ALIGN=TOP表格的標題放在表格的上方l ALIGN=BOTTOM表格的標題放在表格的下方(5). 練習範例:Html語法網頁顯示結果<TABLE BORDER=1><TR><TD>1</TD><TD>2</TD><TD>3</TD></TR><TR><TD>4</TD><TD>5</TD><TD>6</TD></TR></TABLE>12345612. 序列標籤 (1

35、). 有幾種標籤可以做條列式列表(A). 種類:DIR,MENU,OL(Ordered List),UL(Unordered List)等。而項目標籤則均為LI。其格式大致如下<列表標籤><LI> 項目1<LI> 項目2<LI> 項目3</列表標籤>n <DIR> </DIR> n <MENU> </MENU> n <OL> </OL> 每一個項目前會自動加上項目編號(序號)n <UL> </UL> 每一個項目前會加上項目符號(2). 無序

36、標籤 (A). 功能:n 無序條列是指各條列間並無順序關係,純粹只是利用條列式方法來呈現資料而已(B). 語法:n <UL TYPE=n > </UL> ¨ TYPE=disc以為項目符號¨ TYPE=circle以為項目符號¨ TYPE=square以為項目符號(3). 有序標籤(A). 功能:n 有序條列就是指各條列之間是有順序的,從1、2、3一直延伸下去。(B). 語法:n <OL TYPE=n START=m> </OL> ¨ TYPE=A以A,B,C為項目編號¨ TYPE=a以a,b,c

37、為項目編號¨ TYPE=I以I,II,III大寫羅馬數字為項目編號¨ TYPE=i以i,ii,iii小寫羅馬數字為項目編號¨ TYPE=1以1,2,3阿拉伯數字為項目編號(預設值)¨ START=mm為編號的起始值13. 框架標籤 (1). 框架的基本語法 n <FRAMESET COLS=”*,*,*” ROWS=”*,*”>COLS=”*,*,*”將視窗平均分割成3欄,一個 * 表示一欄,* 與 * 間,以,區隔,ROWS=”*,*”將視窗平均分割成2列,一個 * 表示一列,* 與 * 間,以,區隔,n <FRAME SRC=”Fr

38、ame5.htm"> 表示這個視窗連結到Frame5.htm如下例,連結至致遠的一些網頁(2). 框架的基本範例1 <HTML> <FRAMESET COLS="*,*,*"> <FRAME SRC=".tw/student/news.htm">致遠校園學務處 <FRAME SRC=".tw/pr/最新消息.htm">致遠校長室 <FRAME SRC=".tw">致遠首頁 </FRAMESET></HTML>(3). 框架的基本範例2 Html語法網頁顯示結果<HTML><HEAD><TITLE>框窗實作</TITLE></HEAD><FRAMESET COLS="120,*" ><FRAME SRC="a.htm" NAME=&qu

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论