HTML入門教程1

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

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

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

4、瀏覽器上 )，可以多行。 如 : 設(shè)定字體大小、顏色、字型有關(guān)設(shè)定文字的方法共有以下幾種 : 1.設(shè)定HTML文件主體文字顏色。.標記。 如 : . 或. 2.設(shè)定基本字體大小、顏色、字型。.標記。 3.設(shè)定字體大小、顏色、字型。.標記。 . 設(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è)定字型 注意事項1. 設(shè)定字體的大小分 : 絕對SIZE 如 : 和 相對SIZE 如 : ( 以 BASEFONT 設(shè)定的字體大小做加減 )。 2. 設(shè)定字體的顏色可以是顏色名稱或#RRGGBB表紅綠藍強度 ( 00 暗 FF 亮 )。 #RRGGBB 所代表的是紅、綠、藍三原色，每

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

7、IGN 調(dià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é)院 如 : ( 加強型 ) 增加背景顏色、表格標題、欄標題、跨欄寬、跨欄高。 表格標題行標題 1 行標題 2列標題 1 A A

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

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

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

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

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

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

14、 舉例設(shè)定地圖 第九課 加入聲音HTML不僅能插入圖片，也可以載入MIDI音樂、WAV 音效喔！ 常用音樂標記 背景音樂、音效。 相關(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 自動播放 如 : 第十課 滾動條這是由IE提供的滾動條，可不要被眾多的屬性嚇到了，越多的屬性功能越強喔！ 【文字卷動標記】 . 文字卷動 ( 滾動條 )?！鞠嚓P(guān)屬性】 BEHAVIOR = 設(shè)定卷動方式- ALTERNATE 交替來回卷動- SCROLL 卷動 ( 預(yù)設(shè) )- SLIDE 滑