認識 html 檔案結構
DESCRIPTION
認識 HTML 檔案結構. 老師：蘇女珍. 定義 HTML 標頭. 【 標籤 】HEAD 【 說明 】 定義網頁的標題、相關資訊 【 用法 】 定義 HTML 標頭 HTML 文件的標頭，不會影響整份文件顯示的內容 HTML 文件的內容 . 換行符號. 【 標籤 】 br 【 說明 】 將段落文字換行 【 用法 】 資三孝 01 王大明 - PowerPoint PPT PresentationTRANSCRIPT
認識 HTML 檔案結構
老師：蘇女珍
【標籤】 HEAD
【說明】定義網頁的標題、相關資訊【用法】
<head> <title> 定義 HTML 標頭 </title></head>
<html><head> HTML 文件的標頭，不會影響整份文件顯示的內容</head><body> HTML 文件的內容</body></html>
定義 HTML 標頭
【標籤】 br【說明】將段落文字換行【用法】
<body> 資三孝 01 王大明 <br> 興趣： reading <br> 血型： <br> 專長： <br> 工作： <br> 偶像： <br>
</body>
換行符號
註解【標籤】 !--【說明】註解文字【用法】 <!-- 設定文字間的空白字元 -->
<html><!-- 註解 , 電腦不會執行 --><head><title> 定義 HTML 標頭 </title></head><body> HTML 文件的內容</body></html>
【標籤】 FACE【說明】設定文字字型【用法】
<html><head><title> 設定文字字型 </title></head><body><font face=" 標楷體 "> 三都溫泉之旅 </font><br>哇 ! 久違的日本，我又來囉 ...<br>這次來到日本的地點為京都、大阪、神戶，真的很棒哦 !<br>趕快進來我的網站看看吧，相信您一定也會很心動的。</body></html>
設定文字字型
設定文字大小【標籤】 size【說明】設定文字字型大小【用法】 font face=" 標楷體 " size={1,2,3,4,5,6,7}
<html><head><title> 指定字型大小 </title></head><body><font face=" 標楷體 " size=6> 三都溫泉之旅 </font><br>哇 ! 久違的日本，我又來囉 ...<br>這次來到日本的地點為京都、大阪、神戶，真的很棒哦 !<br>趕快進來我的網站看看吧，相信您一定也會很心動的。</body></html>
指定字型色彩【標籤】 size【說明】指定字型色彩【用法】 <font color=red> 三都溫泉之旅 </font>
<html><head><title> 指定字型色彩 </title></head><body><font color=red> 三都溫泉之旅 </font><br>哇 ! 久違的日本，我又來囉 ...<br>這次來到日本的地點為京都、大阪、神戶，真的很棒哦 !<br>趕快進來我的網站看看吧，相信您一定也會很心動的。</body></html>
預設整體字型大小
網頁中顯示特殊文字【標籤】 B【說明】指定文字字體加粗【用法】 <b> 加粗 </b> <I> 斜體 </I> <U> 底線 </U><html><head><title> 粗體、斜體與底線字 </title></head><body><font color=red> 三都溫泉之旅 </font><br><b> 哇 ! 久違的日本，我又來囉 ...</b><br><i> 這次來到日本的地點為京都、大阪、神戶，真的很棒哦 !</i><br><u> 趕快進來我的網站看看吧，相信您一定也會很心動的。 </u></body></html>
常用的特殊符號【標籤】雙引號 <>【說明】指定文字字體加粗【用法】 quot; 雙引號 quot; < 京都 <>><html><head><title> 常用的特殊符號 </title></head><body><font color=red> 三都溫泉之旅 </font><br>哇 ! 久違的 " 日本 " ，我又來囉 ...<br>這次來到日本的地點為 < 京都 > 、 < 大阪 > 、 < 神戶 > ，真的
很棒哦 !<br>趕快進來我的網站看看吧，相信您一定也會很心動的。</body></html>
上下標文字【標籤】 SUP SUB【說明】指定文字改上標 下標【用法】 <SUP> 上標 </SUP> <SUB> 上標 </SUB><html><head><title> 上下標文字 </title></head><body><font color=red> 三都溫泉之旅 </font><br>哇 ! 久違的日本，我又來囉 ...<br>這次來到日本的地點為 <sup> 京都 </sup> 、 <sub> 大阪 </sub> 、神戶，真
的很棒哦 !<br>趕快進來我的網站看看吧，相信您一定也會很心動的。</body></html>
段落標題【標籤】 H【說明】標題段落【用法】 <h1~6> 標題段落 </ h1~6 > <html><head><title>2-3.1 標題段落 </title></head><body><h1> 三都溫泉之旅 </h1><h2> 三都溫泉之旅 </h2><h3> 三都溫泉之旅 </h3><h4> 三都溫泉之旅 </h4><h5> 三都溫泉之旅 </h5><h6> 三都溫泉之旅 </h6></body></html>
段落置中對齊
【標籤】 center【說明】 段落置中對齊 【用法】 <center> 段落置中對齊 </ center >
<html><head><title>段落置中對齊 </title></head><body><h2><center>三都溫泉之旅 </center></h2>哇 !久違的日本，我又來囉 ...<br>這次來到日本的地點為京都、大阪、神戶，真的很棒哦 !<br>趕快進來我的網站看看吧，相信您一定也會很心動的。</body></html>
段落【標籤】 P【說明】 段落【用法】 <p> 一段文字 </ p >
<html><head><title>2-3.3 建立文字段落 </title></head><body><h2><center> 三都溫泉之旅 </center></h2>哇 ! 久違的日本，我又來囉 ...<p>這次來到日本的地點為京都、大阪、神戶，真的很棒哦 !趕快進來我的網站看看吧，相信您一定也會很心動的。</body></html>
定義段落對齊方式【標籤】 ALIGN【說明】 定義段落對齊方式【用法】 <p align=center> 哇 ! 久違的日本，我又來囉 ...</p>
<html><head><title>2-3.4 設定段落對齊方式 </title></head><body><h2><center> 三都溫泉之旅 </center></h2><p align=center> 哇 ! 久違的日本，我又來囉 ...</p>這次來到日本的地點為京都、大阪、神戶，真的很棒哦 !趕快進來我的網站看看吧，相信您一定也會很心動的。</body></html>
自訂段落排列方式【標籤】 pre【說明】自訂段落排列方式【用法】 <pre> 哇 ! 久違的日本，我又來囉 ... 這次來到日本的地點為京都、大阪、神戶，真的很棒哦 ! 趕快進來我的網站看看吧，相信您一定也會很心動的。 </pre>
<html><head><title> 自訂段落排列方式 </title></head><body><h2><center> 三都溫泉之旅 </center></h2><pre>哇 ! 久違的日本，我又來囉 ...這次來到日本的地點為京都、大阪、神戶，真的很棒哦 !趕快進來我的網站看看吧，相信您一定也會很心動的。</pre></body></html>
自動縮排的段落【標籤】 blockquote 【說明】自訂段落排列方式【用法】 <blockquote><blockquote><blockquote> 哇 ! 久違的日本，我又來囉 ... </blockquote></blockquote></blockquote>
<html><head><title> 自動縮排的段落 </title></head><body><h2><center> 三都溫泉之旅 </center></h2><blockquote><blockquote><blockquote>哇 ! 久違的日本，我又來囉 ...</blockquote></blockquote></blockquote>這次來到日本的地點為京都、大阪、神戶，真的很棒哦 !趕快進來我的網站看看吧，相信您一定也會很心動的。</body></html>
插入空白字元【標籤】   ;【說明】插入空白字元【用法】 <h2 align=center> 三 都 溫 泉
之 旅 </h2>
<html><head><title> 插入空白字元 </title></head><body><h2 align=center> 三 都 溫 泉 之
旅 </h2><pre>哇 ! 久違的日本，我又來囉 ...這次來到日本的地點為京都、大阪、神戶，真的很棒哦 !趕快進來我的網站看看吧，相信您一定也會很心動的。</pre></body></html>
第一章習題
習題：下戴座右銘，文字內容要 1.要改字型大小 2.字型要有粗體、料體、底線 3.字型要有”” 4.字型插入空白字元
名言為錢做事，容易累； 為理想做事，能夠耐風寒； 為 " 興趣 " 做事，則永不倦怠。 ~ 郭台銘 ~
插入表格【標籤】 TR【說明】在表格中插入列【用法】 <TR> 表格列的內容 </TR>【標籤】 TD【說明】在表格中插入欄【用法】 <TR><TD> 儲存格內容 </TD></TR>
<TABLE BORDER=1> <TR> <TD> 第一列的第一欄 </TD> <TD> 第一列的第二欄 </TD> </TR> <TR> <TD> 第二列的第一欄 </TD> <TD> 第二列的第二欄 </TD> </TR> <TR> <TD> 第三列的第一欄 </TD> <TD> 第三列的第二欄 </TD> </TR> </TABLE>
背景底圖【標籤】 background【說明】背景底圖【用法】 <body background="images\b006.jpg" text=green> 代表背景底圖是 b006.jpg 文字顏色是綠色
<body background="images\b006.jpg" text=green> <table> <tr> <td> 名稱 </td> <td> 圖片 </td> <td> 說明 </td> </tr> <tr> <td> 電車 </td> <td><img src="images\train-s.jpg"></td> <td> 咦 ! 看清楚哦 ... 這可不是台北的捷運呢 !<br> 這是日本最重要的交通工具，電車 !</td> </tr> </table> </body> </html>
表格內對齊【標籤】 TR【說明】表格內對齊【用法】 Align 水平對齊 Left 、 Center 、 Right
Valign 垂直對齊 Top 、 Center 、 Bottom
<TABLE border="1"> <TR> <TD Align="Left" Valign="Top"> 水平 : 靠左 <br> 垂直 : 靠上 </TD> <TD Align="Center" Valign="Top"> 水平 : 置中 <br> 垂直 : 靠上 </TD> <TD Align="Right" Valign="Top"> 水平 : 靠右 <br> 垂直 : 靠上 </TD> <TD>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</TD> </TR> <TR> <TD Align="Left" Valign="Center"> 水平 : 靠左 <br> 垂直 : 置中 </TD> <TD Align="Center" Valign="Center"> 水平 : 置中 <br> 垂直 : 置中 </TD> <TD Align="Right" Valign="Center"> 水平 : 靠右 <br> 垂直 : 置中 </TD> <TD>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</TD> </TR> </TABLE>
表格內對齊 2
<TABLE border="1"> <TR Valign="Top"><!-- 這一行都是靠上對齊 --> <TD Align="Left"> 水平 : 靠左 <br> 垂直 : 靠上 </TD> <TD Align="Center"> 水平 : 置中 <br> 垂直 : 靠上 </TD> <TD Align="Right"> 水平 : 靠右 <br> 垂直 : 靠上 </TD> <TD>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</TD> </TR> <TR Valign="Center"><!-- 這一行都是置中對齊 --> <TD Align="Left"> 水平 : 靠左 <br> 垂直 : 置中 </TD> <TD Align="Center"> 水平 : 置中 <br> 垂直 : 置中 </TD> <TD Align="Right"> 水平 : 靠右 <br> 垂直 : 置中 </TD> <TD>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</TD> </TR> <TR Valign="Bottom"><!-- 這一行都是靠下對齊 --> <TD Align="Left"> 水平 : 靠左 <br> 垂直 : 靠下 </TD> <TD Align="Center"> 水平 : 置中 <br> 垂直 : 靠下 </TD> <TD Align="Right"> 水平 : 靠右 <br> 垂直 : 靠下 </TD> <TD>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</TD> </TR> <TR> <TD>xxxxxxxxxxxxxx</TD> <TD>xxxxxxxxxxxxxx</TD> <TD>xxxxxxxxxxxxxx</TD> <TD> </TD> </TR> </TABLE>
儲存格顏色【標籤】 BgColor 【說明】儲存格顏色【用法】 <TD BgColor="yellow"> (1, 1) </TD>
<TABLE BORDER=1> <TR> <TD BgColor="yellow"> (1, 1) </TD> <TD> (1, 2) </TD> </TR> <TR BgColor="Cyan"> <TD> (2, 1) </TD> <TD> (2, 2) </TD> </TR> <TR> <TD> (3, 1) </TD> <TD> (3, 2) </TD> </TR> </TABLE>
表格寬度【標籤】 Width【說明】表格寬度【用法】 Width=“80% 寬度為 screen 的百分之 80
Width=”350“ 寬度 350 像素
<DIV Align="Center"> <TABLE Border=1 Width="80%"> <TR> <TD> 第一列第一欄 </TD> <TD> 第一列第二欄 </TD> </TR> <TR> <TD> 第二列第一欄 </TD> <TD> 第二列第二欄 </TD> </TR> </TABLE> <P> <TABLE Border=1 Width="350"> <TR> <TD> 第一列第一欄 </TD> <TD> 第一列第二欄 </TD> </TR> <TR> <TD> 第二列第一欄 </TD> <TD> 第二列第二欄 </TD> </TR> </TABLE> </DIV>
表格儲存格合併【標籤】 ColSpan 、 RowSpan【說明】欄合併、列合併【用法】 RowSpan="3“
ColSpan="2"
<TABLE Border=1 Width="100%" > <TR> <TD ColSpan="3"> </TD> </TR> <TR> <TD RowSpan="2"> </TD> <TD ColSpan="2"> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR> </TABLE>