HTML基本语法练习.pptVIP

HTML 基本語法練習 HTML 基本語法練習 建立第一個靜態網頁 利用網頁編輯軟體 Microsoft Front Page Macromedia Dreamweaver Notepad HTML語法無大小寫區分 HTML 與 html相同效果 html head title My First HTML /title /head body font size =1 color=red 紅色一號字/font /body /html HTML字型大小及顏色變化 利用font標籤設定字型大小及顏色 HTML預設以三號字表示(size=3) 設定font中 size 屬性 font size=4 四號字/font 顏色可以指定顏色名稱或RGB三元配色法 設定font中color屬性 font size=2 color=“red”紅色二號字/font font size=2 color=“#ff0000”紅色二號字/font 字型設定在face屬性中 font face=“標楷體”姓名/font 設定標題字型，大小編號方式與font相反 標題字型會自動設定粗體 H1一號標題字/H1 編排方式的變化 利用p段落標籤設定編排方式 文字處理編排方式:置中(center)、靠左(left)、靠右(right) 設定p中align屬性，預設靠左 p align=center置中/p 斷行符號br 分隔線hr 粗體b/b 插入圖形的各種應用 利用img標籤，圖檔位置在網站目錄，圖檔名稱設定在src屬性中，圖形顯示位置可以設定在align屬性中。 一般常用.gif或.jpg圖形檔案，因為瀏覽器可以直接顯示該類圖形檔案 圖片依原本大小呈現在瀏覽器上，改變大小可設定width及height屬性 img src=“computer.jpg” align=center width=100 height=75 圖檔介紹 GIF (Graphic Interchange format) 無損圖檔壓縮，檔案大小比.bmp檔案小 可以做多層的圖層處理 可以做動畫圖形檔 可以有透明的背景圖形 缺點只能使用256色方式呈現,不適合顯示風景照片 JPEG (Joint Photographic Experts Group) 可以利用24 bits全彩格式儲存,適合風景照片儲存 壓縮比較GIF高 缺點:是一種有損壓縮方法，只有單一圖層，無透明背景功能 背景顏色與圖像的應用 利用body標籤的bgcolor屬性來設定背景顏色，屬性值與fontcolor屬性值相同 利用body標籤的background屬性來設定背景圖像，屬性值與imgsrc屬性值相同 預設背景顏色為白色 body bgcolor=yellow body background=“dot.jpg” 建立網頁內連結的各種變化 利用a標籤的name屬性設定同一網頁內定點(mark)位置，一般在長篇文章中各章節作定點位置。 a name=“chap1” 利用a標籤的href屬性設定連結。 在同一網頁中使用#加上定點名稱，即可跳到該定點位置，該屬性與name屬性成對出現 a href=“#chap1”到第一章/a 本機內網頁連結在href屬性中指定網頁名稱(show.jsp) a href = “show.jsp”顯示資料/a 網路上網頁連結在href屬性中指定URL (hinet) a href = hinet Hinet /a E-mail 連結 a href=“mailto:wpin@ms6.hinet” 連絡我/a HTML特殊字元處理 在HTML中空格與斷行不會顯示出來。要顯示特殊字元必須加上編碼 空白?nbsp; ? lt; ? gt; ? amp; “ ? quot; 表格的寫法 table/table定義一個表格，tr/tr：定義表格內的一行(row)，td/td：定義行內的一欄或一個格子。 table標籤中border屬性設定表格格線寬度，預設為0會顯示格線。width表示表格寬度，%表示佔畫面的比率，無%表示實際寬度。 tr標籤中bgcolor屬性設定整個row背景顏色，td標籤中bgcolor屬性只設定該格子背景顏色，th標籤功能同td置中加上粗體(b/b)。 td標籤的colspan屬性可以跨行，rowspan屬性可以跨列 table border=1 width=“80%” trtd colspan=2員工通訊資料/td/tr tr bgcolor=“#c0c0c0”thfont color=red姓名/thth電話/th/tr trtd王大明/tdttd/tr /table Table Elements and Their Attributes Tab