資源共享
實驗實習(xí)實訓(xùn)-第二章頁面布局實踐活動方案
頁面布局實踐方案
【實驗?zāi)康摹?
（1）了解HTML超文本標(biāo)記語言的結(jié)構(gòu)、語法。
（2）掌握HTML文件的建立及瀏覽、常用格式化標(biāo)記符的設(shè)置。
（3）掌握鏈接標(biāo)記的設(shè)置。
【實驗內(nèi)容】
（1）建立HTML文件。
（2）常用的HTML標(biāo)記設(shè)置。
（3）<a>鏈接標(biāo)記的設(shè)置
（4）相關(guān)知識
【實驗步驟】
（一）建立HTML文件
操作步驟如下：
（1）單擊“開始”按鈕，選擇“程序” →“附件” →“記事本”，并打開“記事本”窗口。
（2）在記事本中，輸入如下HTML語句
<html>
<head>
<title>我的花店</title>
</head>
<body>
歡迎你訪問我的花店!
</body>
</html>
（3）保存HTML文件。
（4）在瀏覽器中預(yù)覽所編輯的HTML文件效果。
(二)常用的HTML標(biāo)記設(shè)置
1.<Hi>標(biāo)題標(biāo)記
[示例1]標(biāo)題標(biāo)記，在記事本中輸入以下HTML語句，保存后瀏覽效果。
<html>
<head>
<title>我的花店</title>
</head>
<body>
<h1>歡迎你訪問我的花店!</h1>
<h2>歡迎你訪問我的花店!</h2>
<h3>歡迎你訪問我的花店!</h3>
<h4>歡迎你訪問我的花店!</h4>
<h5>歡迎你訪問我的花店!</h5>
<h6>歡迎你訪問我的花店!</h6>
<h7>歡迎你訪問我的花店!</h7>
</body>
</html>
說明： <hi>標(biāo)記符用于定義段落標(biāo)題的大小級數(shù)。最大的標(biāo)題級數(shù)是 <h1>，最小的標(biāo)題級數(shù)是<h6>。使用<hi>標(biāo)記符的align屬性可控制文字的對齊方式，屬性值可以是left(左對齊)，center(居中對齊)，或者right(右對齊)。
2. <P>段落標(biāo)記符
[示例2]段落標(biāo)記符，輸入HTML語句如下，保存后的瀏覽效果
<html>
<head>
<title>我的花店</title>
</head>
<body bgcolor="#FFFF99">
<h1 align="center">我的花店!</h1>
<p align="center">歡迎您訪問我的花店</p>
<p align=“center”>花可以傳情,可表達(dá)思念之情,親情,感恩的心情,衷
心的祝福!</p>
<p align="center">祝愿進(jìn)入我的花店的朋友天天有好心情!</p>
</body>
</html>
3.列表標(biāo)記
[示例3]項目列表標(biāo)記，HTML語句如下，保存后的瀏覽效果。
<head>
<html>
<title>花語</title>
</head>
<body bgcolor="#FFFF99">
<hl align="center"><font face="宋體">花語</font></hl>
<p>各種花所代表的含義如下：</p>
<ul>
<li>玫瑰：純潔的愛</li>
<li>劍蘭：用心堅固</li>
<li>百合：百年好和</li>
<li type="circle">滿天星：愛憐</li>
<li type="circle">菊花：吉祥</li>
<li type="circle">康及馨：親情思念</li>
<li type="square">郁金香：愛的表白</li>
<li type="square">紫羅蘭：永恒之美</li>
<li type="square">勿忘我：愛到永遠(yuǎn)</li>
</ul>
</body>
</html>
列表標(biāo)記包括“項目列表”標(biāo)記<ul>、“編號列表”標(biāo)記<ol>。<ul>和<ol>標(biāo)記都是成對標(biāo)記。在<ul>標(biāo)記之間還可以使用<li>標(biāo)記來設(shè)定項目內(nèi)容，其type屬性可以顯示不同形狀的項目符號。
（三）<a>鏈接標(biāo)記的設(shè)置
[示例4]鏈接標(biāo)記，輸入如下所示的HTML語句，保存后瀏覽效果。
<html>
<head>
</head>
<body bgcolor="#FFFF99"
<p><a href="1-7.htm">花語</a></p>
<p><a href="bg.htm" target="right">花節(jié)</a></p>
<p><a >友情鏈接</a></p>
<p><a href="mailto:gltxiaohong@buu.com.cn">與我聯(lián)系</a></p>
</body>
</html>
HTML是通過<a>標(biāo)記符來實際超鏈接的，它是成對標(biāo)記符，主要屬性有：
（1）href。鏈接文件的地址。
（2）target。鏈接目標(biāo)的位置。
1.指向電子郵件的鏈接
<a href="mailto:gltxiaohong@buu.com.cn">與我聯(lián)系</a>
2.指向站點內(nèi)文件的鏈接
<a href="bg.htm" target="right">花節(jié)</a>
3.指向其他網(wǎng)站文件的鏈接
<a >友情鏈接</a>
相關(guān)知識
（一）HTML文件的概念
HTML（Hyper Text Markup
Languafe），即超文本標(biāo)記語言，它通過多種標(biāo)準(zhǔn)化的標(biāo)記符號（Tag）對網(wǎng)頁內(nèi)容進(jìn)行標(biāo)注，對頁面內(nèi)容進(jìn)行標(biāo)注，對頁面超媒體內(nèi)容的輸出格式以及各內(nèi)容部分之間邏輯上的組織關(guān)系等進(jìn)行描述和指定。
（二）HTML文件的特點
HTML是Web頁面的基礎(chǔ)。使用HTML描述的網(wǎng)頁文件稱之為HTML頁面或者HTML文件，這種文件以“.html”或者“.htm”為擴(kuò)展名，它是一種純文本文件，可以使用記事本、寫字板等文本編輯器來進(jìn)行編輯，也可以使用FrontPage、DreamWeaver等網(wǎng)頁制作工具來快速創(chuàng)建HTML文件。
（三）HTML文件的結(jié)構(gòu)
HTML文件均以<html>標(biāo)記符開始，以</html>標(biāo)記符結(jié)束。<head>和</head>標(biāo)記符之間的內(nèi)容用于描述頁面的頭部信息，例如頁面標(biāo)題、關(guān)鍵詞等信息。在<body>和</body>標(biāo)記符之間的內(nèi)容即為頁面的主體內(nèi)容。HTML文件的整體結(jié)構(gòu)如圖所示。
<html>
<head>
頁面的頭部信息
</head>
<body>
頁面的主體內(nèi)容
</body>
</html>
（四）絕對地址和相對地址
文件的引用既可以使用絕對地址，也可以使用相對地址。
1.絕對地址
直接定出所鏈接的文件位于哪個服務(wù)器中的網(wǎng)站內(nèi)，主要用來鏈接其他網(wǎng)站的網(wǎng)頁，例如：
<a >友情鏈接</a>
2.相對地址
用所鏈接的文件相對于目前網(wǎng)頁所在位置來表示，通常用來鏈接當(dāng)前網(wǎng)站中的其他網(wǎng)頁，例如：
<a href="bg.htm" target="right">花節(jié)</a>
【注意事項】
在使用記事本等編輯器建立HTML文件時，一定要以.htm.或html為擴(kuò)展名保存文件否則在瀏覽器中無法正確顯示預(yù)覽效果。
【思考與練習(xí)】
- 成對標(biāo)記與非成對標(biāo)記在使用上有何不同？下面標(biāo)記符中哪些是成對標(biāo)記符？哪些是非成對標(biāo)記符？
<title>、<hi>、<p>、<br>、<ul>、<ol>、<li>。
2、<br>和<p>…</p>有何區(qū)別？
- 試用HTML編寫一個簡單的網(wǎng)頁。
文字與表格
【實驗?zāi)康摹?
（1）進(jìn)一步了解HTML超文本標(biāo)記語言的結(jié)構(gòu)、語法。
（2）掌握字體標(biāo)記符、表格標(biāo)記符的設(shè)置。
【實驗內(nèi)容】
（1）建立HTML文件
（2）<font>標(biāo)記的設(shè)置
（3）<table>表格標(biāo)記的設(shè)置
（4）相關(guān)知識
【實驗步驟】
（一）建立HTML文件
操作步驟如下：
（1）單擊“開始”按鈕，選擇“程序” →“附件” →“記事本”，打開“記事本”窗口。
（2）在記事本中輸入HTML語句。
（3）執(zhí)行“文件” →“保存”命令，將文件保存為htm或html格式。
（4）在瀏覽器中預(yù)覽所建立的HTML文件
（二） <font>標(biāo)記的設(shè)置
[示例6]字體標(biāo)記，設(shè)置示例2中相應(yīng)段落的字體，HTML語句如下，保存后瀏覽效果，如圖所示。
<head>
<title>我的花店</title>
</head>
<body bgcolor="#FFFF99">
<h1 align="center"><b><font color="#FF0000" face="隸書" size="+5">我的花店!花店</font></b></h1>
<hr align="center" width="100%" size="4" color="3333FF">
<p align="center">歡迎您訪問我的花店</p>
花可以傳情,可表達(dá)思念之情,親情,感恩的心情,衷心的祝福!<br>
祝愿進(jìn)入我的花店的朋友天天有好心情!<br>
<hr align="center" width="100%" size="4" color="3333FF">
</body>
</html>
<font>標(biāo)記用來定義文字的字體、大小和顏色，是成對標(biāo)記符。主要屬性有：
（1）face屬性：定義文字所使用的字體，如face=“隸書”。
（2）size屬性：定義文字的大小，屬性值為1~7，也可以使用相對大小來設(shè)置，如size=“+5”、 size=“-5”。
（3）color屬性。定義文字的顏色，可以使用顏色的英文名稱來表示顏色，如： color=“red”；也可使用16進(jìn)制的RGB代碼來表示顏色， color=“#FF0000”，在使用16進(jìn)制的RGB代碼來表示顏色時，需在顏色代碼前加“#”。
此外，字體標(biāo)記符還包括<b>…</b>粗體標(biāo)記符、<i>…</i>斜體標(biāo)記符等。
（三）<table>表格標(biāo)記的設(shè)置：
[示例7]表格標(biāo)記，在記事本中輸入以下HTML語句，保存后在瀏覽器中瀏覽，效果如圖所示。
<html>
<head>
<title>我的花店</title>
<style type="text/css">
<!--
.style3 {font-size: 24px; }
-->
</style>
</head>
<body bgcolor="#FFFF99">
<table width="317" height="182" border="1">
<tr>
<td colspan="2"><div align="center" class="style3">節(jié)日</div></td>
<td><div align="center" class="style3">名稱</div></td>
</tr>
<tr>
<td rowspan="3"><div align="center" class="style3">5月</div></td>
<td><div align="center" class="style3">1日</div></td>
<td height="36"><div align="center" class="style3">國際勞動節(jié)</div></td>
</tr>
<tr>
在<table>和</table>之間放置表格內(nèi)容，<table>標(biāo)記是成對標(biāo)記。在表格中，行是用<tr>…</tr>標(biāo)記來定義的，一行使用一個<tr>…</tr>標(biāo)記，每行中的列是用<td>…</td>標(biāo)記定義的；一列使用一個<td>…</td>標(biāo)記。<table>、<tr>、<td>標(biāo)記都有相應(yīng)的屬性，用來定義表格中內(nèi)容的顯示方式。<table>表格標(biāo)記的主要屬性有：
（1）rowspan。定義該單元格所跨行數(shù)。
（2）colspan。定義該單元格所跨列數(shù)。
相關(guān)知識
（一）HTML標(biāo)記的格式
HTML文件的所有控制語句稱為標(biāo)記，標(biāo)記在一對尖括號之間，格式如下：
<標(biāo)記>HTML語言元素</標(biāo)記>
（1）標(biāo)記符分為成對標(biāo)記符和非成對標(biāo)記符，<title>、<p>、<font>等屬于成對標(biāo)記符，<br>、<hr>等屬于非成對標(biāo)記符。標(biāo)記符忽略大小寫。HTML源文件為文本文件，多個標(biāo)記符可定成一行，甚至整個文件可定成一行；一個標(biāo)記符的內(nèi)容可以定成多行。
（2）可使用標(biāo)記符的屬性來講進(jìn)一步限定標(biāo)記符，一個標(biāo)記可以有多個屬性項，各屬性項的次序不限定，各屬性項間用空格進(jìn)行分隔。
（3）HTML中使用的注釋語句為<!--…-->,注釋內(nèi)容可插入文本中任何位置，注釋內(nèi)容將不顯示。
（二）HTML的作用
（1）利用標(biāo)題、文本、表格、列表和圖像發(fā)布在線信息。
（2）應(yīng)用超連接獲得世界各地的在線信息。
（3）應(yīng)用表單與遠(yuǎn)程服務(wù)通信，實現(xiàn)信息查詢及各種商貿(mào)活動。
（4）把樣式、視頻、音頻和應(yīng)用程序嵌入到HTML文檔。
注意事項