HTML檔案結構

一、HTML 的基本架構:

    HTML文件的程式碼分為三個區塊 <html>...</html>、<head>...</head>、<body>...</body>。

    整個HTML文件由<html>...</html>標籤(tag)包圍、瀏覽器一看到這個標籤就知道這是一個HTML文件,而範圍內又包含了<head>...</head>、<body>...</body>標籤。

<html>

    <head>

      HTML 文件的標題

    </head>

    <body>

      HTML 文件的內容

    </body>

</html>

二、HTML撰寫規則:

  1. HTML文件裡的標籤需有「<>」符號,一對標籤裡的結尾需加上「/」符號。
  2. 在HTML程式碼中,註解文字需使用「<!--」符號為開頭,「-->」符號為結尾。
  3. HTML標籤不分大小寫。

三、編輯工具:

  1. HTML 檔案是屬於普通的文字檔,所以只要利用最簡單的文書編輯器編寫就可以了,例如:記事本、WordPad…等。
  2. 儲存HTML檔案時,記得要加上 .htm 或 .html ,才能將文字檔存成網頁文件格式。

四、建立第一個HTML文件檔案:

1.定義HTML標頭:

<html>

    <head>

    <title>小雅的貓窩</title>

    </head>

</html>

HTML 標頭

2.定義網頁內容:

<html>

    <head>

    <title>小雅的貓窩</title>

    </head>

    <body>

      Hello World~

    </body>

</html>

HTML 標頭

 

五、文字與段落編排:

    以下說明的HTML標籤是寫在 <body>...</body>之間

NO.

項目名稱

說     明

1.

將段落文字換行

文字長度太長在這裡跳行<br>
跳到下一行了,而且兩行距離用 <p> 換段還要進

2.

設定文字字型

<font face="標楷體"> 這是標楷體 </font>

3.

指定字型大小

<font size = "6">這是size=6的字型大小 </font>

<font face="標楷體" size = "4">這是size=6的標楷體字型 </font>

4.

設定網頁文字預設的大小

<basefont size="4">  (size={1,2,3,4,5,6,7})

5.

指定字型色彩

 <font color = "red'> 這是色彩為red 的字 </font>

除了利用色彩名稱來指定文字顏色外,也可以利用十六進制的顏色代今來表示。

例: <font color = "#FF0000'> 這是色彩為#FF0000 的字 </font>   (ps: #FF0000 = red)

6.

特殊文字

<b> 粗體 </b>
<i> 斜體 </i>
<u> 加底線 </u>

7.

上下標的文字

<sup>上標文字</sup>
<sub>下標文字</sub>

在nomo 的「格式/字型」可以直接勾選設定

8.

標題段落

文件內容的主標題、次標題和小標題的文字效果

<h6> 這是h6的字 </h6>

看效果

9.

段落置中對齊

<center>置中</center>

10.

建立文字段落

<p>第一段</p>

<p>第二段</p>

六、網頁上的圖片與聲音:

NO.

項目名稱

說     明

1.

在網頁上插入圖片

<img src="images\cat.jpg" width="128" height="96" alt="小花">

小花

圖片來源:src="images\cat.jpg"

圖片大小:width="128" height="96"

替代文字:alt="小花"

2.

插入背景音樂

 <embed src="music\bgmusic.mid" hidden=true>

音樂檔來源:src="music\bgmusic.mid"

隱藏播放控制面板:hidden=true

看效果

3.

跑馬燈效果

使用Namo 的 「插入/Script/Script 精靈」即可快速建立跑馬燈文字特效

 

<input type="text" name="scrolltext1" value="貓貓學電腦跑馬燈測試" size="40" style="color:rgb(0,153,255); background-color:rgb(255,255,102);">

另外一種用IE 可以看到效果的跑馬燈:

<marquee behavior="scroll"> 這是符合IE 的語法</marguee>

ps: behavior={scroll, slide, alterate}