1 / 25

認識 HTML 檔案結構

認識 HTML 檔案結構. 老師：蘇女珍. 定義 HTML 標頭. 【 標籤 】HEAD 【 說明 】 定義網頁的標題、相關資訊 【 用法 】 <head> <title> 定義 HTML 標頭 </title></head> <html> <head> HTML 文件的標頭，不會影響整份文件顯示的內容 </head> <body> HTML 文件的內容 </body> </html>. 換行符號. 【 標籤 】 br 【 說明 】 將段落文字換行 【 用法 】 <body> 資三孝 01 王大明 <br>

neila
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標頭 【標籤】HEAD 【說明】定義網頁的標題、相關資訊 【用法】 <head> <title>定義HTML標頭</title></head> <html> <head> HTML文件的標頭，不會影響整份文件顯示的內容 </head> <body> HTML文件的內容 </body> </html>

  3. 換行符號 【標籤】br 【說明】將段落文字換行 【用法】 <body> 資三孝01王大明 <br> 興趣：reading <br> 血型：<br> 專長：<br> 工作：<br> 偶像：<br> </body>

  4. 註解 【標籤】 !-- 【說明】註解文字 【用法】 <!-- 設定文字間的空白字元 --> <html> <!-- 註解, 電腦不會執行 --> <head> <title>定義HTML標頭</title> </head> <body> HTML文件的內容 </body> </html>

  5. 設定文字字型 【標籤】FACE 【說明】設定文字字型 【用法】 <html> <head> <title>設定文字字型</title> </head> <body> <font face="標楷體">三都溫泉之旅</font><br> 哇!久違的日本，我又來囉...<br> 這次來到日本的地點為京都、大阪、神戶，真的很棒哦!<br> 趕快進來我的網站看看吧，相信您一定也會很心動的。 </body> </html>

  6. 設定文字大小 【標籤】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>

  7. 指定字型色彩 【標籤】size 【說明】指定字型色彩 【用法】 <font color=red>三都溫泉之旅</font> <html> <head> <title>指定字型色彩</title> </head> <body> <font color=red>三都溫泉之旅</font><br> 哇!久違的日本，我又來囉...<br> 這次來到日本的地點為京都、大阪、神戶，真的很棒哦!<br> 趕快進來我的網站看看吧，相信您一定也會很心動的。 </body> </html> 預設整體字型大小

  8. 網頁中顯示特殊文字 【標籤】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>

  9. 常用的特殊符號 【標籤】雙引號 <> 【說明】指定文字字體加粗 【用法】 quot;雙引號quot; &lt;京都<>&gt; <html> <head> <title>常用的特殊符號</title> </head> <body> <font color=red>三都溫泉之旅</font><br> 哇!久違的&quot;日本&quot;，我又來囉...<br> 這次來到日本的地點為&lt;京都&gt;、&lt;大阪&gt;、&lt;神戶&gt;，真的很棒哦!<br> 趕快進來我的網站看看吧，相信您一定也會很心動的。 </body> </html>

  10. 上下標文字 【標籤】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>

  11. 段落標題 【標籤】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>

  12. 段落置中對齊 【標籤】center 【說明】 段落置中對齊 【用法】 <center> 段落置中對齊</ center > <html> <head> <title>段落置中對齊</title> </head> <body> <h2><center>三都溫泉之旅</center></h2> 哇!久違的日本，我又來囉...<br> 這次來到日本的地點為京都、大阪、神戶，真的很棒哦!<br> 趕快進來我的網站看看吧，相信您一定也會很心動的。 </body> </html>

  13. 段落 【標籤】P 【說明】 段落 【用法】 <p>一段文字 </ p > <html> <head> <title>2-3.3建立文字段落</title> </head> <body> <h2><center>三都溫泉之旅</center></h2> 哇!久違的日本，我又來囉...<p> 這次來到日本的地點為京都、大阪、神戶，真的很棒哦! 趕快進來我的網站看看吧，相信您一定也會很心動的。 </body> </html>

  14. 定義段落對齊方式 【標籤】ALIGN 【說明】 定義段落對齊方式 【用法】 <p align=center>哇!久違的日本，我又來囉...</p> <html> <head> <title>2-3.4設定段落對齊方式</title> </head> <body> <h2><center>三都溫泉之旅</center></h2> <p align=center>哇!久違的日本，我又來囉...</p> 這次來到日本的地點為京都、大阪、神戶，真的很棒哦! 趕快進來我的網站看看吧，相信您一定也會很心動的。 </body> </html>

  15. 自訂段落排列方式 【標籤】pre 【說明】自訂段落排列方式 【用法】 <pre> 哇!久違的日本，我又來囉... 這次來到日本的地點為京都、大阪、神戶，真的很棒哦! 趕快進來我的網站看看吧，相信您一定也會很心動的。 </pre> <html> <head> <title>自訂段落排列方式</title> </head> <body> <h2><center>三都溫泉之旅</center></h2> <pre> 哇!久違的日本，我又來囉... 這次來到日本的地點為京都、大阪、神戶，真的很棒哦! 趕快進來我的網站看看吧，相信您一定也會很心動的。 </pre> </body> </html>

  16. 自動縮排的段落 【標籤】 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>

  17. 插入空白字元 【標籤】 &nbsp ; 【說明】插入空白字元 【用法】 <h2 align=center>三&nbsp;&nbsp;都&nbsp;&nbsp;溫&nbsp;&nbsp;泉&nbsp;&nbsp;之&nbsp;&nbsp;旅</h2> <html> <head> <title>插入空白字元</title> </head> <body> <h2 align=center>三&nbsp;&nbsp;都&nbsp;&nbsp;溫&nbsp;&nbsp;泉&nbsp;&nbsp;之&nbsp;&nbsp;旅</h2> <pre> 哇!久違的日本，我又來囉... 這次來到日本的地點為京都、大阪、神戶，真的很棒哦! 趕快進來我的網站看看吧，相信您一定也會很心動的。 </pre> </body> </html>

  18. 第一章習題 習題：下戴座右銘，文字內容要 1.要改字型大小 2.字型要有粗體、料體、底線 3.字型要有”” 4.字型插入空白字元 名言 為錢做事，容易累； 為理想做事，能夠耐風寒； 為"興趣"做事，則永不倦怠。 ~郭台銘~

  19. 插入表格 【標籤】 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>

  20. 背景底圖 【標籤】 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>

  21. 表格內對齊 【標籤】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>

  22. 表格內對齊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>

  23. 儲存格顏色 【標籤】 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>

  24. 表格寬度 【標籤】 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>

  25. 表格儲存格合併 【標籤】 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>

More Related