第一章
何謂HTML HTML 是 Hyper Text Markup Language 的 縮 寫,它 的 意 思 是 超 文 本 標 記
語 言, 它 透 過 一 些 特 別 的 標 簽 來 展 現 各 種 不 同 的 風 格, 具 備
有 下 列 幾 項 特 色 :
HTML 3.0 的 發 展 是 一 種 開 放 式 的 結 果 , 任 何 有 興 趣 的 人 都 可
加 入 這 一 發 展 的 組 織 , 各 家 瀏 覽 器 出 版 公 司 都 各 自 發 表 非
協 定 內 的 語 法 , 使 得 制 作 出 的 文 件 顯 得 更 加 豐 富 與 華 麗 .
回目
第二章
一份簡單基本的 Home Page<HTML>
<HEAD>
<TITLE>這是一個標題</TITLE>
</HEAD>
<BODY>
這是一個簡單的範例
</BODY>
</HTML>
這一個範例的樣子
<HTML>與</HTML> 這 是 用 來 定 義 一 份 文 件 內 的 HTML 段 落 , 此 標 簽 可 以 省 略 .
<HEAD>與</HEAD> 這 是 用 來 描 述 HTML 頁 的 內 容 , 此 標 簽 也 可 以 省 略 .
<TITLE>與</TITLE> 這 是 顯 示 文 件 的 標 題 , 會 被 放 在 瀏 覽 器 的 最 上 方 .
<BODY>與</BODY> 這 是 定 義 HTML 的 界 限 , 此 標 簽 可 以 省 略 .
回目
第三章
背景的變化 文法:
<BODY TEXT=#008000 LINK=#008000 VLINK=#008000 ALINK=#008000 BGCOLOR=#008000>
或
<BODY BACKGROUND="HTMLBAK.JPG">
TEXT 本文的顏色
LINK 可以鏈結的文字顏色
VLINK 已鏈結過的文字顏色
ALINK 被按下的文字顏色
BGCOLOR 背景顏色
BACKGROUND 背景圖形
以 上 各 # 後 為 0-9 的 八 個 數 字,代 表 各 種 顏 色 , 若 無 指 定 則 以 瀏 覽 器 之 內 定 值 為 准 .
回目
第四章
字型的變化 文法:<H1>等級一的字</H1>
結果:
文法:<H2>等級二的字</H2>
結果:
文法:<H3>等級三的字</H3>
結果:
文法:<H4>等級四的字</H4>
結果:
文法:<H5>等級五的字</H5>
結果:
文法:<H6>等級六的字</H6>
結果:
文法:<I>斜體字</I>
結果:
斜體字
文法:<B>粗體字</B>
結果:
粗體字
文法:<TT>TELETYPE打字機字型</TT>
結果:
TELETYPE打字機字型
文法:<BLINK>閃爍字型</BLINK>
結果:
閃爍字型
回目
第五章
一些分隔的標籤<BR>強迫跳到下一行
<P>產生一行空白
範例:
BR可強迫換行<BR>卻不多跳一行,P則會換行<P>而且多跳一行
結果:
BR可強迫換行
卻不多跳一行,P則會換行
而且多跳一行
<HR>水平分隔線(就是像上面的那一條線)
<HR WIDTH=40%>水平線占螢幕的40Tf!%
結果如下:
<HR SIZE=10>水平線變粗
結果如下:
<HR NOSHADE>不透明水平線
結果如下:
回目
第六章
如何依照自訂相片順序顯示範例:<PRE>
因HTML會忽略多餘的空白與行,所以如果想依照PE2所輸入的格式顯示.
就必須加入PRE的標籤.
HTML就會依照輸入的格式排列.
不再忽略多餘的空白與行.
</PRE>
回目
第七章
各種條列的排列數字化排列文法:<OL>
<LI>第一章
<LI>第二章
<LI>第三章
</OL>
結果:
文法:<OL TYPE=I>
<LI>第一章
<LI>第二章
<LI>第三章
</OL>
結果:
文法:<OL TYPE=A>
<LI>第一章
<LI>第二章
<LI>第三章
</OL>
結果:
以上TYPE的變化也可用i或a
非數字化排列文法:<UL>
<LI>第一章
<LI>第二章
<LI>第三章
</UL>
結果:
文法:<DL>
<DT>第一章
<DD>第一小節
<DT>第二章
<DD>第一小節
</DL>
結果:
回目
第八章
檔案中的註解如 一 個 HTML 的 文 件 非 常 大 , 最 好 加 上 注 解 , <!- 與 -> , 在 此 標 簽 中 的 文 字 , 將 不 會 被 瀏 覽 器 顯 示 出 來 .
回目
第九章
如何使用超鏈結在 HTML 文 件 中 的 一 大 特 色 就 是 隨 時 可 以 按 一 個 鍵 就 可 以 連 往 世 界 任 何 一 個 角 落 這 樣 的 功 能 其 實 只 要 一 行 指 令 就 可 以 做 到 了 .
文法:<A HREF="http://www.longlan.com.tw/lshow/chieh/chieh.htm">回到目 </A>
結果:回到目
http:後面是接著一個網路的位址
其他還有下列各種鏈結:
gopher:串連gopher資料庫系統
ftp:串連ftp擷取檔案系統
news:串連news新聞討論群
mailto:串連E-mail寄信
telnet:串連遠程載入系統
以 上 鏈 結 位 址 如 果 在 同 一 機 器 上 即 可 省 略 成 :
<A HREF="/lshow/chieh/chieh.htm">回到許恩傑的烘培雞</A>
以 上 鏈 結 位 址 如 果 在 同 一 機 器 上 而 且 在 同 一 目 錄 更 可 省 略 成 :
<A HREF="chieh.htm">回到許恩傑的烘培雞</A>
這就是所謂的相對路徑
鏈結到檔案中的某一部份文法:<A HREF="#TOP">回到本篇文章的最前面</A>
<A NAME="TOP"></A>
結果:回到本篇文章的最前面
以上文法HREF與NAME需相互對應,按下鏈結點即可前往NAME所在的地方
回目
第十章
如何加形加形也是一件很簡單的事情.
文法:<IMG SRC="k_k.jpg" ALT=KEMOON></IMG>
結果:
ALT:如使用無法顯示圖形的瀏覽器即會出現ALT後所寫的文字
圖片放置的位置與大小控制文法:<IMG SRC="k_k.jpg" ALIGN=LEFT></IMG>圖片靠左
結果:
圖片靠左
文法:<IMG SRC="k_k.jpg" ALIGN=RIGHT></IMG>圖片靠右
結果:
圖片靠右
文法:<IMG SRC="k_k.jpg" ALIGN=TOP></IMG>圖片向上對齊
結果:圖片向上對齊
文法:<IMG SRC="k_k.jpg" ALIGN=BOTTOM></IMG>圖片向下對齊
結果:圖片向下對齊
文法:<IMG SRC="k_k.jpg" ALIGN=MIDDLE></IMG>圖片向中對齊
結果:圖片向中對齊
文法:<IMG SRC="k_k.jpg" HEIGHT=50 WIDTH=40></IMG>指定圖片高度為50寬度40
結果:指定圖片高度為50寬度40
文字繞圖的寫法文法:<IMG SRC="k_k.jpg" ALIGN=LEFT></IMG>
在HOMEPAGE的製作上<BR>
本人也有一些不清楚的地方<BR>
如INPUT FORM 和CGI的配合使用<BR>
在下一次我們將注重討論<BR>
同時希望個位高手指點<BR>
請大家支援吧<BR>
結果:
在HOMEPAGE的製作上
本人也有一些不清楚的地方
如INPUT FORM 和CGI的配合使用
在下一次我們將注重討論
同時希望個位高手指點
請大家支援吧
回目
第十一章
表格的製作 文法:
<TABLE COLSPEC="L20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH>這是一個最簡單的表格</TH></TR>
</TABLE>
結果:
| 這是一個最簡單的表格 |
|---|
文法:
<TABLE COLSPEC="L20 L20 L20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH>第一格</TH><TH>第二格</TH><TH>第三格</TH></TR>
<TR><TH>下一格</TH><TD>下二格</TD><TD>下三格</TD></TR>
</TABLE>
結果:
| 第一格 | 第二格 | 第三格 |
|---|---|---|
| 下一格 | 下二格 | 下三格 |
文法:
<TABLE COLSPEC="C20 L20 L20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH COLSPAN=3>跨欄的表格</TH></TR>
<TR><TH>第一項</TH><TD>第二項</TD><TD>第三項</TD></TR>
</TABLE>
結果:
| 跨欄的表格 | ||
|---|---|---|
| 第一項 | 第二項 | 第三項 |
文法:
<TABLE COLSPEC="L20 L20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH ROWSPAN=2>跨列的表格</TH><TH>右邊第一列</TH></TR> <TR><TD>右邊第二列</TD></TR>
</TABLE>
結果:
| 跨列的表格 | 右邊第一列 |
|---|---|
| 右邊第二列 |
文法:
<TABLE COLSPEC="L20" BORDER=10>
<CAPTION ALIGN=top></CAPTION>
<TR><TH>這是指定表格線條的粗細</TH></TR>
</TABLE>
結果:
| 這是指定表格線條的粗細 |
|---|
文法:
<TABLE COLSPEC="L20" BORDER CELLPADDING=20"
<CAPTION ALIGN=top></CAPTION>
<TR><TH>指定字與表格的距離</TH></TR>
</TABLE>
結果:
| 指定字與表格的距離 |
|---|
文法:
<TABLE COLSPEC="C20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH ALIGN=CENTER>以下文字靠左靠右對中</TH></TR>
<TR><TH ALIGN=LEFT>靠左</TH></TR>
<TR><TH ALIGN=RIGHT>靠右</TH></TR>
<TR><TH>對中</TH></TR>
</TABLE>
結果:
| 以下文字靠左靠右對中 |
|---|
| 靠左 |
| 靠右 |
| 對中 |
回目
第十二章
分割畫面的製作文法:
<frameset rows="80%,20%">
<frameset cols="20%,80%">
<frame src=html-13b.htm>
<frame src=html-13c.htm name="lwwwbody">
</frameset>
<frame src=html-13d.htm scrolling=no>
</frameset>
<noframes>
沒有NetScape的人就只能看到這裡了
</noframes>
說明:
frameset-->設定分割畫面的大小比例,此標籤須有相對的結束標籤
rows-->設定分割為上下畫面
cols-->設定分割為左右畫面
分割畫面大小可用下列數值表示:
80%,20%或300,*或40%,20%,*以此類推可分割成各種不同大小的視窗
frame-->設定各個分割視窗分別使用的html
name-->指定此視窗的名稱
scrolling=no或yes或auto-->指定此視窗是否要有捲軸bar
noresize-->強迫此視窗不可拖曳改變大小
noframes-->給瀏覽器不支援分割畫面的使用者看的部份,須有結束標籤
以下是一些特殊技巧:
在個別視窗中的html如要使用特殊 的功能就必須加一些參數
否則所有的動作將在自己本身的視窗中進行
文法:
<A HREF="LWWW.HTM" target="_top">
<A HREF="lwwwbody.htm#01" target="lwwwbody">
target-->如設定=_top,代表按下此鏈結整個畫面都會變為所指定的鏈結
如設定=自定的名稱,需與name的參數互相配合,
代表按下此鏈結與指定name相同名稱的視窗才會改變畫面.
回目
第十三章
透明圖片,及交錯圖片的製作未做成透明圖片前 已做成透明圖片後
透明圖片的製作想要製作以上透明圖片效果,首先須有一套合適的圖形編輯軟體,例如:
LView或Paint Shop Pro都有此功能,在此以Paint Shop Pro為例:
1.開啟所需要的圖檔,將背景色,也就是想變成透明的地方,改成前景所沒有
的顏色.
2.將圖片存成GIF格式,關閉再重新開啟一次,片原就是GIF格式即可省
略此步驟.
3.選擇工具bar上的滴管,將滴管移到要變成透明的地方,此時最下方的狀態
列會出現I:5,5為此顏色的值,依顏色不同此值會不同,記下此值.
4.選擇Save As,在存檔視窗中的左下角有File Sub-format的選項,選擇
Version 89a-Noninterlaced.
5.按下右方Options會列出四個選項,選擇最後一項Set the Transparency Value
to在後面的空格填上剛才記下的I值,再按下OK,再存檔即可完成透明圖片
的製作.
注意事項:
1.盡量不要用會失真的圖形格式如JPG來轉成GIF,才不會造成轉為透明圖片
後有雜點產生.
2.變成透明的顏色必須為前景所沒有的,以免造成不想透明的地方也變成透
明.
3.雖然變成透明圖片,原來圖片的邊緣還是存在的,如要限定圖片的位置,就必
須將透明的邊緣考慮進去.
4.片邊緣有陰影製作效果,則最好將要透明的顏色設為與HomePage的底色相
同以免造成陰影部份不自然的現象.
所謂交錯顯示的圖片就是在顯示時,先出現整張圖片大概的樣子,再以類
似馬賽克的方式漸漸顯示出完整的圖片.
1.製作步驟與透明圖片相似,只是存檔時在File Sub-format的選項,要選擇
Version 89a-Interlaced.
2.以此格式存檔的圖片就會以交錯的方式顯示.
3.以此方式顯示圖片速度並不會比以普通方式顯示還快,但可讓使用者先
瞭解圖形大概的樣子.
4.其實Version 89a-Noninterlaced的格式也會以交錯的方式現示圖形,但如
果不想變成透明圖片,還是要存成Version 89a-Interlaced的格式.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
