1 / 33

HTML 語法教學

HTML 語法教學. 授課：彭穎聰 老師. Html 概述. HTML 的全名是 HyperText Markup Language ，是編寫網頁的基本語言，而它並不是一個程式， 只是一些插在普通文件內的碼 ( code ) ，這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來 , 就是你現在所看到的頁面就是用 HTML 來控制的，它可控制字體的大小，也可以插入連結或圖像。

Lucy
Download Presentation

HTML 語法教學

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML 語法教學 授課：彭穎聰 老師

  2. Html 概述 • HTML的全名是HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式， 只是一些插在普通文件內的碼( code )，這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來, 就是你現在所看到的頁面就是用HTML來控制的，它可控制字體的大小，也可以插入連結或圖像。 • 一個HTML檔稱為HTML document，存檔的副檔名為htm或 html，編寫的方式有很多種， 最原始的方法是用windows內的記事本或各種文書編輯軟體，而現在有一種軟體也是編寫HTML碼， 但具有預覽及插入特效的功能，如Dida 網頁速寫器，編寫完成後記得儲存成*.htm或*.html 即可。 　

  3. Html 概述 • 若你想看一個網頁的HTML檔，只要在瀏覽器內按下滑鼠右鍵，再選擇 檢視原始檔(view)即可。 • 一份標準的HTML文件是由元素所組成的，元素是由標籤(Tag)以及文件內容所組成。 文件內容可以是文字、圖形、甚至是影像、聲音等等。而標籤又是啥東東呢？？ 一個開始標籤(< >)是由一個小於符號(<)和一個大於符號(>)所構成的 一個起始標籤中加一道斜線"/"就構成了結束標籤(</>) 而一對標籤是由一個起始標籤和一個結束標籤所構成的。

  4. html的結構 • HTML document有一固定的格式，瀏覽器才可以辨識及分析，進而顯示在你的眼前，而基本格式為 : <html> <head> <title> </title> </head> <body> 您所要在瀏覽器顯示的內容 </body> </html> • 有兩個須要注意的地方，每一個開啟碼是由<> 兩個符號所框住的，而關閉碼是由</> 所框住的，而每一個HTML碼有開就要有關，後面的單元會逐一的介紹。

  5. 網頁顏色設定 • <bodybgcolor="#xxxxxx"text="#xxxxxx"link="#xxxxxx"vlink="#xxxxxx"alink="#xxxxxx"> bgcolor=控制背景顏色 text=控制文字顏色 link=控制連結顏色 vlink=控制已閱讀過的顏色 alink=控制正在連結的顏色 • 而xxxxxx六個數值代表紅／綠／藍的顏色元素值，為A～F及0～9等所組合起來的六個數值

  6. 加入背景圖片 • 若您覺得背景顏色太單調，想要換成背景圖像的話，就得要在<body>內加入background的屬性了。如果你的背景圖檔檔名為 back.gif，則<body>內便要寫成 : <bodybackground="back.gif"text="#000000"link="#0066cc"vlink="#336600"> • 如果圖像的檔案跟您網頁的檔案不在同一目錄裡，則必須輸入完整路徑，如http://www.123.com.tw/back.gif。 bgproperties="fixed"(使背景圖像固定不動，不過只有IE有效果)

  7. 加入水平分線 • 如果想要在網頁內加入一條像下面的水平線，加入<hr>的碼即可。 • 這是上面那一條線的原始碼 : <hr size="5" align="center" noshade width="90%" color="0000ff"> size=控制線的寬度 align=控制線是靠左(left)／靠右(right)／中間(center) width=控制線的長度，可用數字或百分比 noshade=控制線沒有陰影 color=控制線的顏色

  8. 符號清單設定方式 1 • 只要加入<ul>的碼，便可製出有小圓頭的清單 : <ul> <li>物件清單1 <li>物件清單2 <li>物件清單3</ul> • 上面的原始碼會顯示成下面的樣子 : • 物件清單1 • 物件清單2 • 物件清單3

  9. 符號清單設定方式 2 • 在<ul>的標籤內加入一些參數就可以讓顯出的效果有所變動唷 : <ul type=disc> • 這是一般的小圓點 <ul type=circle> • 這是空心的小圓點 <ul type=square> • 這是實心正方黑點

  10. 編號清單設定方式 1 • 跟小圓頭的方式很像，只要加入<ol>的碼，便可製出有數字的清單 : <ol><li>清單1<li>清單2<li>清單3</ol> • 上面的原始碼會顯示成下面的樣子 : • 清單1 • 清單2 • 清單3

  11. 編號清單設定方式 2 type=A(控制清單之前數字的參數顯示成A. B. C......) type=a (控制清單之前數字的參數顯示成a. b. c......) type=I (控制清單之前數字的參數顯示成I. II. III......) type=i (控制清單之前數字的參數顯示成i. i. iii......) start=起始的數值

  12. 自訂清單 • 一般做為解釋一樣動作，加入以下的碼便可做一個定義清單 <dl> <dt>電腦 <dd>已成為人類生活的一部分 <dt>滑鼠 <dd>不是老鼠喔～ </dl> • 上面的原始碼會顯示成下面的樣子 : 電腦 已成為人類生活的一部分 滑鼠 不是老鼠喔～

  13. 標題文字 • 瀏覽器可分出六種大小的標題文字,原始碼如下 : <h1> 標題文字1 </h1> <h2> 標題文字2 </h2> <h3> 標題文字3 </h3> <h4> 標題文字4 </h4> <h5> 標題文字5 </h5> <h6> 標題文字6 </h6>

  14. 文字設定 如果要把文字變成粗體，就要加上<b>的碼了 如果要把文字變成斜體，就要加上<i>的碼了 如果要把文字加上底線，就要加上<u>的碼了 <b>HTML教學</b> HTML教學　 <i>HTML教學</i> HTML教學 <u>HTML教學</u> HTML教學

  15. 文字的控制 • 文字的控制要加上<font>的碼，它可以控制文字的大小，顏色，字型，在<font>裡加上一些屬性就可以控制 <fontface="Arial"color="#cc33ff"size="7"> Good morning </font> • face=控制文字字體，填入字體名稱 • color=控制文字顏色 • size=控制文字大小，數字1～7

  16. 強迫換行、換段 • 如果覺得您的文字太長，想要您的文字跳到下一行，就要加上<br>或<p>的碼 : 　同一段換行<br>換新的段落<p> • 在<p>的標籤內，可以加入 align=left (或是 right、center)控制靠左、靠右、置中 • 如果在<p>內有加入align的屬性，記得加上</p>的關閉碼

  17. 超連結 • 如要插入一個連結便要加入：<a href=“URL”> <a href=“http://www.kimo.com”>奇摩站 </a> <a href=“index.htm”>回首頁 </a> • 而在<a href=“URL”>的標籤中，可插入target=“_blank” (_self、 _name)來改變連結所開啟頁面的狀態!! blank=開在新視窗 self=開在原視窗 name=開在frame分割頁框的name

  18. 插入圖片 • 要插入圖片，就要加入<img src="圖檔名"> <img src="http://www.e4fancy.com/images/e4fancy88.gif"> • 其中<img src="*.gif">內還可加入下列屬性，來變化圖檔 : width=控制圖檔長度 height=控制圖檔高度 align=left／right／center(靠左、靠右、置中) border=控制外框粗細，設成0就是不要外框

  19. 表格製作 1 • 表格是每一個網頁不可缺少的東西，首先我們要加入<table>的碼，在<table>的標籤內可以控制整個表格的長度和外框的粗細 : <table width="300" border="1" cellspacing="2"> width=控制表格長度，可用數字或百分比 cellspaing=控制儲存格的分隔距離，內定為2 background=背景圖檔 border=控制外框粗細，不外框便設成0

  20. 表格製作 2 • <table>後加上<td>，才會新開一個儲存格，再用</td>來關閉儲存格 : <table border=1> <td>儲存格1</td> <td>儲存格2</td> </table>

  21. 表格製作 3 • 若想跳到下一行，加上<tr>即可 <table border=1> <td>儲存格1</td> <td>儲存格2</td> <tr> <td>儲存格3</td> <td>儲存格4</td> </table>

  22. 表格製作 4 • 也可使用<th> <table border=1> <th>儲存格1</th> <th>儲存格2</th> <tr> <th>儲存格3</th> <th>儲存格4</th> </table>

  23. 表格製作 5 • <td><th>內的屬性如下 : align=控制水平是left／right／center valign=控制垂直是top／middle／bottom background=背景圖檔 colspan=使一個儲存格橫跨 N 個欄位 rowspan=使一個儲存格下跨 N 個列

  24. 表格製作 6 • colspan的用法 : <table border=1> <td colspan=3 align=center>儲存格 A1</td> <tr> <td>儲存格 B1</td> <td>儲存格 B2</td> <td>儲存格 B3</td> </table>

  25. 表格製作 7 • rowspan的用法 : <table border=1> <td rowspan=3 align=center>儲存格 A1</td> <td>儲存格 B1</td> <tr> <td>儲存格 B2</td> <tr> <td>儲存格 B3</td> </table>

  26. 頁框分割 1 • 首先要加入 <frameset cols=數字或比例,數字或比例>(左右分割畫面) <frameset rows=數字或比例,數字或比例>(上下分割畫面) • 也可以寫成這樣 : <frameset cols=120,*> • 用*的意思是左邊的頁面長度為120，而剩餘的空間都給右方的頁面使用

  27. 頁框分割 2 • 在<frameset>之後便要加上<frame>的碼，如果左邊頁面的顯示檔案為left.htm， 而右邊的頁面顯示的檔案為right.htm，如下所示 : <frameset cols=120,*> <frame src="left.htm"> <frame src="right.htm"> </frameset>

  28. 頁框分割 3 • 在<frameset>內的控制屬性如下 : framespacing=控制兩個frame之間的距離 frameborder=控制frame外框的粗細 border=控制外框粗細，設成0就是不要外框

  29. 頁框分割 4 • 要分割頁面的原始碼如下，不須加上<body>碼 : <html> <head> <title> </title> </head> <frameset cols=120,* frameborder="0" framespacing="0" border="0"> <frame src="left.htm"> <frame src="right.htm"> </frameset> </html>

  30. 頁框分割 5 • 在<frame>內的特性 : <frame src="left.htm" name="left"> <frame src="right.htm" name="right"> noresize=讓瀏覽者不可改變frame的size，就加上這行 scrolling=auto/no控制frame是可以/不可以捲動 name=給frame的名字，下面有介紹如何應用 • 連結標籤指定開在frame其中一個頁框內 <a href="right.htm" target="right">回首頁</a> target=“name” 如：left、right

  31. IE專用背景音樂 • 加入背景音樂只要在<head>跟</head>之間插入下列原始碼即可讓你的網站有悅耳的聲音唷 : <bgsound src="music.mid" loop="1"> src=設定你想要撥放的midi音樂檔名 loop=音樂重撥次數，如想不斷撥放便設成infinite

  32. 通用背景音樂 • 語法： <embed src="music.mid" loop="1" hidden="true" autostart="true"> src=設定你想要撥放的midi音樂檔名 loop=音樂重撥次數，如想不斷撥放便設成true autostart=是否要在音樂檔傳完之後，就自動播放音樂。true是要，flace是不要。內定值是不要。 width=控制面版寬度 high=控制面版高度 align=控制面版與旁邊文字的對齊方式，跟<img>的語法一樣 hidden=true(如果寫上這個屬性的話，就會完全隱藏控制面板，但無法設定控制面板的寬和高。) controls=控制面版樣式為console(正常面版)／smallconsole(較小面版)／playbutton(只顯示撥放按鈕)／pausebutton(只顯示暫停按鈕)／stopbutton(只顯示停止按鈕)／volumelever(只顯示音量調整)

  33. 跑馬燈 • 若您覺得網頁太單調，想要加上變化的話，跑馬燈是不可少的．只要加上<marquee>即可 <marquee>跑馬燈</marquee> • 在<marquee>內的屬性 : bgcolor=“#aaff00”這裡加上背景顏色 direction=這是空控制行進的方向(right／up／down) scrollamount=這是空控制行速度 behavior=這是空控制行進的方式(slide／alternate) width=寬度 height=高度

More Related