HTML入門教程1

1、HTML語言入門 第一課 基礎(chǔ)當(dāng)我們暢游Internet時(shí)，我們透過瀏覽器所看到的網(wǎng)站，是由HTML (HyperText Markup Language) 語言所構(gòu)成。HTML ( 超文件標(biāo)記語言 ) 是一種建立網(wǎng)頁文件的語言，透過標(biāo)記式的指令 (Tag)，將影像、聲音、圖片、文字等連結(jié)顯示出來。 HTML標(biāo)記是由 所括住的指令，主要分為 : 單標(biāo)記指令、雙標(biāo)記指令 ( 由 ，所構(gòu)成 ) 。HTML網(wǎng)頁文件可由任何文本編輯器或網(wǎng)頁專用編輯器編輯，完成后 ( 以 .htm 或 .html 為文件后綴保存 ) 將HTML網(wǎng)頁文件由瀏覽器打開顯示，若測試沒有問題則可以放到服務(wù)器 (Server)

2、上，對外發(fā)布信息。HTML文件基本架構(gòu) 文件開始 標(biāo)頭區(qū)開始. 標(biāo)題區(qū) 標(biāo)頭區(qū)結(jié)束 本文區(qū)開始本文區(qū)內(nèi)容 本文區(qū)結(jié)束 文件結(jié)束 網(wǎng)頁文件格式。 標(biāo)頭區(qū) : 記錄文件基本資料，如作者、編寫時(shí)間。 標(biāo)題區(qū) : 文件標(biāo)題須使用在標(biāo)頭區(qū)內(nèi)，可以在瀏覽器最上面看到標(biāo)題。 本文區(qū) : 文件資料，即在瀏覽器上看到的網(wǎng)站內(nèi)容。注意事項(xiàng) 通常一份HTML網(wǎng)頁文件包含二個(gè)部份 : . 標(biāo)頭區(qū)、 . 本文區(qū)。而 和 代表網(wǎng)頁文件格式。 習(xí)慣上一個(gè)網(wǎng)站的首頁名稱通常訂為 index.htm 或 index.html 這樣只要瀏覽網(wǎng)站，瀏覽器便會自動(dòng)的找出 index.htm 文件。 第二課 字體我們在這里將要談的是有

3、關(guān)文字的標(biāo)記，包括字體大小、顏色、字型.等變化，適當(dāng)?shù)膽?yīng)用可以增加頁面的美觀！ 常用字體標(biāo)記 . 標(biāo)題，設(shè)定標(biāo)題字體大小， n = 1 ( 大 ) 6 ( 小 ) 會自動(dòng)跳下一行。通常用在如章節(jié)、段落等標(biāo)題上。 如 : 標(biāo)題 標(biāo)題如 : 標(biāo)題 ( 標(biāo)題置中 ) 標(biāo)題. 粗體字。 如 : 粗體字 粗體字 . 斜體字。 如 : 斜體字 斜體字 . 加底線。 如 : 加底線 加底線 . 橫線 ( 表示刪除 )。 如 : 橫線 . 打字體 ( 固定寬度文字 )。 如 : 打字體 打字體 . 上標(biāo)字。 如 : 字體 上標(biāo)字 字體上標(biāo)字 . 下標(biāo)字。 如 : 字體 下標(biāo)字 字體下標(biāo)字 注解 ( 不會顯示在

4、瀏覽器上 )，可以多行。 如 : 設(shè)定字體大小、顏色、字型有關(guān)設(shè)定文字的方法共有以下幾種 : 1.設(shè)定HTML文件主體文字顏色。.標(biāo)記。 如 : . 或. 2.設(shè)定基本字體大小、顏色、字型。.標(biāo)記。 3.設(shè)定字體大小、顏色、字型。.標(biāo)記。 . 設(shè)定基本字體，SIZE = 1 7，1 ( 最小 ) 7 ( 最大 )。 如 : 基本字體大小為 4 基本字體大小為 4 如 : 設(shè)定顏色 設(shè)定顏色 如 : 設(shè)定字型 設(shè)定字型 . 基本字體加大。 如 : 基本字體大小為 4， 加大為 5 基本字體大小為 4，加大為 5 . 基本字體減小。 如 : 基本字體大小為 4， 減小為 3 基本字體大小為 4，減

5、小為 3 . 設(shè)定字體大小、顏色、字型，SIZE = 1 7，1 ( 最小 ) 7 ( 最大 )。 如 : 字體大小為 4 字體大小為 4 如 : 基本字體大小為 4 +1字體大小為 5 -2字體大小為 2 .基本字體大小為 4 +1字體大小為 5-2字體大小為 2如 : 設(shè)定顏色 設(shè)定顏色 如 : 設(shè)定字型 設(shè)定字型 注意事項(xiàng)1. 設(shè)定字體的大小分 : 絕對SIZE 如 : 和 相對SIZE 如 : ( 以 BASEFONT 設(shè)定的字體大小做加減 )。 2. 設(shè)定字體的顏色可以是顏色名稱或#RRGGBB表紅綠藍(lán)強(qiáng)度 ( 00 暗 FF 亮 )。 #RRGGBB 所代表的是紅、綠、藍(lán)三原色，每

6、一色由兩位十六進(jìn)制的數(shù)值表示 ( 即十進(jìn)制 0 255 )。十六進(jìn)制 : 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。 3. 設(shè)定字體的字型會按照順序找出顯示的字型，若找不到則以系統(tǒng)預(yù)設(shè)字型顯示第三課 表格表格是HTML的一項(xiàng)非常重要功能，利用其多種屬性能夠設(shè)計(jì)出多樣化的表格。使用表格可以使你的頁面有很多意想不到的效果，使頁面更加整齊美觀。 常用表格標(biāo)記 . 表格指令。 相關(guān)屬性 : ALIGN 調(diào)整BGCOLOR 背景顏色BORDER 邊框HEIGHT 高度WIDTH 寬度 . 表格標(biāo)題。 相關(guān)屬性 : ALIGN 調(diào)整 . 表格列 ( 可省略 ) 。 相關(guān)屬性 : AL

7、IGN 調(diào)整 . 表格欄標(biāo)題 ( 表頭 ) 粗體字 ( 可省略 ) 。 相關(guān)屬性 : ALIGN 調(diào)整COLSPAN 欄寬ROWSPAN 欄高 . 表格欄資料 ( 儲存格 ) ( 可省略 ) 。 相關(guān)屬性 : ALIGN 調(diào)整BGCOLOR 背景顏色HEIGHT 高度WIDTH 寬度COLSPAN 欄寬ROWSPAN 欄高 舉例 如 : ( 基礎(chǔ)型 ) 太平洋網(wǎng)絡(luò)學(xué)院太平洋網(wǎng)絡(luò)學(xué)院太平洋網(wǎng)絡(luò)學(xué)院太平洋網(wǎng)絡(luò)學(xué)院太平洋網(wǎng)絡(luò)學(xué)院 太平洋網(wǎng)絡(luò)學(xué)院 太平洋網(wǎng)絡(luò)學(xué)院 太平洋網(wǎng)絡(luò)學(xué)院 如 : ( 加強(qiáng)型 ) 增加背景顏色、表格標(biāo)題、欄標(biāo)題、跨欄寬、跨欄高。 表格標(biāo)題行標(biāo)題 1 行標(biāo)題 2列標(biāo)題 1 A A

8、A AB B B B列標(biāo)題 2 C C C CD D D D 表格標(biāo)題行標(biāo)題 1 行標(biāo)題 2 列標(biāo)題 1 A A A A B B B B 列標(biāo)題 2 C C C C D D D D 看了以上的例子，應(yīng)該了解表格的基本寫法吧！ 第四課 標(biāo)示HTML提供許多種類的標(biāo)示標(biāo)記，作項(xiàng)目標(biāo)示，而且可以作巢狀式標(biāo)示！ 常用標(biāo)示標(biāo)記 標(biāo)示項(xiàng)目。 如 : 第一項(xiàng)第二項(xiàng)1. 第一項(xiàng) 2. 第二項(xiàng) . 編號標(biāo)示，可標(biāo)示數(shù)字或英文、羅馬字母。 如 : 第一項(xiàng)第二項(xiàng)I. 第一項(xiàng) II. 第二項(xiàng) . 符號標(biāo)示，可標(biāo)示數(shù)字或英文、羅馬字母。 如 : 第一項(xiàng)第二項(xiàng) 第一項(xiàng) 第二項(xiàng) 定義項(xiàng)目。 定義資料。 . 定義標(biāo)示。 如

9、: 十進(jìn)制 :0、1、2、3、4、5、6、7、8、9十六進(jìn)制 :0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F十進(jìn)制 : 0、1、2、3、4、5、6、7、8、9 十六進(jìn)制 : 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F 巢狀式標(biāo)示 如 : 第一章 第一節(jié) 第一段 第二段 第二節(jié) 第二章第三章1. 第一章 i. 第一節(jié) 第一段 第二段 ii. 第二節(jié) 2. 第二章 3. 第三章 其他標(biāo)示標(biāo)記. 目錄式標(biāo)示 ( 自動(dòng)加圓點(diǎn) )。 如 : 網(wǎng)絡(luò)學(xué)院 :新手上路軟件教室設(shè)計(jì)教室開發(fā)教室 網(wǎng)絡(luò)學(xué)院 : 新手上路 軟件教室 設(shè)計(jì)教室 開發(fā)教室 注意事項(xiàng)標(biāo)示項(xiàng)目符號也可以

10、用. 標(biāo)記，以符號字元 ( 、.等 ) 標(biāo)示。如 : 特殊符號 :在HTML文件中，有些符號是代表特定的意義的。所以當(dāng)我們要使用這些特殊符號時(shí)，便要用替代指令。 符號 替代指令 charset=gb2312 設(shè)定十秒回到首頁。 ( 若不設(shè)定HTML文件位置則再載入原HTML文件 ) 設(shè)定鏈接、未鏈接部份顏色 設(shè)定鏈接、未鏈接部份顏色，用.標(biāo)記。 相關(guān)屬性 : ALINK按下鏈接部份未放開時(shí)顏色 LINK未看過的鏈接部份顏色 VLINK已看過的鏈接部份顏色 如 : 第七課 框架框架架構(gòu)的標(biāo)記，主要是分割窗口和插入浮動(dòng)窗口的功能。如果能有效的運(yùn)用將有助于瀏覽網(wǎng)頁的效率！ 常用窗口標(biāo)記 . 定義分割

11、窗口。 相關(guān)屬性 : BORDER 邊框COLS 行 , 設(shè)定分割左右窗口寬度 ( 用,分隔，可設(shè)百分比 % ;*表示剩余部份 )FRAMEBORDER 顯示邊框ROWS 列 , 設(shè)定分割上下窗口高度 ( 用,分隔，可設(shè)百分比 % ;*表示剩余部份 ) 定義窗口。 相關(guān)屬性 : FRAMEBORDER 顯示邊框NAME 名稱 NORESIZE 設(shè)定是否可以調(diào)整窗口大小SRC 文件或URL位址SCROLLING 設(shè)定是否可以卷動(dòng) . 無支援分割窗口瀏覽器顯示文字。 . 插入浮動(dòng)窗口。 相關(guān)屬性 : BORDER 邊框FRAMEBORDER 顯示邊框NORESIZE 設(shè)定是否可以調(diào)整窗口大小SRC

12、 文件或URL位址SCROLLING 設(shè)定是否可以卷動(dòng) 舉例 如 : 本站窗口架構(gòu)。( 先分割成上下窗口，再于窗口各分割成左右窗口。 ) 如 : 浮動(dòng)窗口 注意窗口基本架構(gòu)的文件，通常放在HTML文件的第一頁，如 : index.htm 。此HTML文件的基本架構(gòu)并不需要本文區(qū) ( BODY )，只需定義窗口架構(gòu)，而其他HTML文件可用連結(jié)方式 ( A HREF=.連結(jié)標(biāo)記 TARGET屬性 ) 顯示于指定的窗口中。 第八課 設(shè)置圖片現(xiàn)在的網(wǎng)站沒有用圖片的，幾乎很少了吧！圖片增加了網(wǎng)站版面的美觀，不過也不要放了大量的圖片，而拖慢網(wǎng)站傳輸?shù)男枢福?有關(guān)設(shè)定圖片的方法共有以下幾種 : 1. 設(shè)定

13、HTML文件背景圖片、背景顏色。.標(biāo)記。如 : . 或. 2. 設(shè)定圖片。標(biāo)記。 3. 設(shè)定地圖。.標(biāo)記。 常用圖片標(biāo)記 指令 相關(guān)屬性 : ALIGN 調(diào)整ALT 提示字BORDER 邊框HEIGHT 高度SRC 文件或URL位址USEMAP 地圖名稱WIDTH 寬度 如 : 可插入圖片 ( GIF、JPG格式 )、AVI電影. 地圖 相關(guān)屬性 : NAME 名稱 設(shè)定地圖動(dòng)作區(qū)域 相關(guān)屬性 : COORDS 設(shè)定動(dòng)作區(qū)域座標(biāo) ( 左上角座標(biāo) : X1,Y1 ; 右下角座標(biāo) : X2,Y2 )HREF 動(dòng)作區(qū)域連結(jié)點(diǎn) ( 可載入位址或文件 )NOHREF 動(dòng)作區(qū)域連結(jié)點(diǎn)不動(dòng)作SHAPE 外型

14、 舉例設(shè)定地圖 第九課 加入聲音HTML不僅能插入圖片，也可以載入MIDI音樂、WAV 音效喔！ 常用音樂標(biāo)記 背景音樂、音效。 相關(guān)屬性 : LOOP 循環(huán) , 背景音樂播放次數(shù)SRC 文件或URL位址 (可為WAV、MIDI格式 ) 如 : 內(nèi)嵌音樂插件 . 內(nèi)嵌插件。 相關(guān)屬性 : HEIGHT 高度WIDTH 寬度 ( 可設(shè)百分比% )SRC 設(shè)定內(nèi)嵌物件的 URL 位址LOOP 循環(huán) , 背景音樂播放次數(shù)AUTOSTART 自動(dòng)播放 如 : 第十課 滾動(dòng)條這是由IE提供的滾動(dòng)條，可不要被眾多的屬性嚇到了，越多的屬性功能越強(qiáng)喔！ 【文字卷動(dòng)標(biāo)記】 . 文字卷動(dòng) ( 滾動(dòng)條 )。【相關(guān)屬性】 BEHAVIOR = 設(shè)定卷動(dòng)方式- ALTERNATE 交替來回卷動(dòng)- SCROLL 卷動(dòng) ( 預(yù)設(shè) )- SLIDE 滑