HTML 介紹與練習

HTML介紹與練習

網頁設計所需的軟體 • 網頁編輯軟體：又可以分成兩種，一種是純文字編輯軟體，另一種則是「所視即所得 (WYSIWYG)」網頁編輯軟體 • 影像動畫繪圖軟體：用來幫助您製作網頁圖片、標題、按鈕、背景圖案、動畫等效果。 • 瀏覽器：用來測試網頁的實際瀏覽結果 • 網頁空間：用來將網頁上傳至Internet

與網頁相關的程式語言 • Common GetwayInterface，CGI • ASP(ActiveServer Page) • Java • VB Script • DHTML • VRML • HTML • XML

共同閘介面(Common GetwayInterface，CGI) • CGI是在伺服器程式之間傳送訊息的標準介面，而CGI程式則是符合CGI標準介面的Script • Script(描述語言)就是在伺服器上執行的程式，用來接收及處理資料，常用的Script語言有 • Windows系統：Visual Basic 、 C、C++ • Unix/Linux系統：shell 、Perl 、C、C++ • 麥金塔系統(Mac):Apple Script • Script經由瀏覽器透過伺服器啟動，執行後的結果透過伺服器回傳用戶端瀏覽器顯示，伺服器與Script之間的交談就是透過CGI來完成 • CGI 通常是由Perl、Python或C語言所撰寫

ASP • ASP(ActiveServer Page)是微軟相對於CGI所做的產品 • 主要也是要建構一套伺服器與使用者之間雙向互動式的網頁 • ASP是由描述語言(Script)所搆成的，ASP常用的兩種描述語言分別是：Java Script、VB Script • 都是在服伺服器執行的程式(Serverend Script)， ASP應用了物件導向程式設計理念，其內建功能： • Session(用來儲存連線者的資訊) • Requset(可用來讀取客戶端的資訊) • Response(用來傳輸資料到客戶端瀏覽器) • Server(提供一些Web Server端的相關資訊) • Application(用來儲存共用的資訊)等物件來運作，使得程式的撰寫變得容易得多且執行效能變高，另可再外掛各式各樣的ActiveX，ASP與瀏覽器的功能就可不斷增加 • ASP最大的缺點就是只適微軟系統的網伺服器

Java • 昇陽電腦(SunMicrosystem)所研發，是在應用網路上的程式語言 • Java的前身本來是用來設計消費性電子產品用的，組員常去的那家咖啡店之名作為命名，所以 Java的圖標是冒著熱煙的咖啡杯 • Java它提供一個跨平台(Crossplatform)的運算環境，同樣的程式寫一次，就可以在任何電腦上執行 • Java得到IBM、Novell、Oracle等大廠的支持，所以在各應用領域都有很不錯的發展

Java應用的網頁上Java Applet(小程式)，讓用戶在自己的電腦上執行遠端程式，減少伺服器的負載 • Java Script的前身是網景公司所發展的LifeScript，當時昇陽公司正在推廣Java因而將LifeScript改名為Java Script • Java Script是一種描述語言，不需要編譯 • Java是一種物件導向的程式語言，需要編譯

VB Script • VB Scrip是由微軟公司所推出與Java相抗衡的描述語言，語法是由VB演化而來 • VB Scrip是一種描述語言，不需要編譯，但是必需與Html結合在一起使用，無法獨立使用，且必須使用微軟的瀏覽器，其餘的瀏覽器就必須外掛程式(Plug-in)才可以使用

DHTML • 動態超文件標示語言(Dynamic HTML，DHTML) • 目前還不是一個具有明確定義的技術 • 瀏覽器廠商使用DHTML來強調結合：HTML、樣式表(Cascading Style Sheet) 、描述語言、文件物件模型(DOM)使得網頁能展現各種動能效果，且引入了物作導向的念與技術，使得網頁設計者有更大的發展空間，DHTML並不是一項獨立的技術，只是使網頁能達到動態效果的一個總稱

VRML • 虛擬實境(Virtual Reality，VR)可以在Web上展現3D特效，近年來常被在電影之中 • 1994年在第一屆全球資訊網國際會議上，由Mark Peace、Tony Parisis提出結合Wed和VR的3D介面Labyrinth成了的VRML前身 • VAG(VRML Architecture Group) 在1995年公佈了VRML 1.0版的規格書 • 1997年ISO/IEC正式認證VRML2.0為國際標準

超文件標籤語言 HTML • HTML：HTML是“HyperText Markup Language”(超文件標籤語言) 的簡寫，由W3C協會所制定，主要的用途是撰寫網頁 • 是目前全球資訊網的標準編寫網頁的語言 W3C:World Wide Web Consortium

XML • XML(ExtensibleMarkup Language)是一種標籤語言(Meta-markup Language) • 1998年W3C(World Wide Web Consortium)通過XML 1.0建議規格，從此XML就成為各家軟體廠商共同採用的核心技術， • XML是由SGML(StandardGeneralized Markup Language) • 發展而來的 • 1986年ISO採用成為一個資訊管理標準，做為具平台和應用程式獨之性之文件標準，可以保留文件格式、索引和連結資訊、具有擴展性、結構性、自我描述性，採用資料和樣式分離的原則，使資料的管理、交換上有良好的性能

HTML和XML都由是SGML演變而來，HTML是SGML的一個應用語言， XML是SGML的精華版 • 網路發展快速，使得HTML的應用發生了瓶頸，因而有了XML的誕生，但是XML並不是要來取代HTML，而是來補足不足之處

XML與Html主要的相異 • XML可以自定標籤和屬性(Attribute) ，而HTML則否 • XML是一般用途(General Purpose)的標示語言，一種Meta Language可以生成其他語言，HTML是特殊用途(Special Purpose)的標示語言，而HTML則無法生成其他語言 • XML著重文件的結合，而HTML著重文件的表現 • XML可以利用DTD或XML綱要(Schema)來確認文件的有效性，而HTML則否

HTML 超文件標籤語言

標籤(Tag) • HTML的指令稱為標籤(Tag) • 以< >開始、</>結束 • 基本上HTML是純文字的檔案，可利用成對的標籤表現文字、聲音、圖片等多媒體物件，副檔名為‧htm • 若是在unix環境，則副檔名為‧html • HTML所設計出的網頁是屬於靜態網頁，資料傳遞方向是單一方向，由伺服器傳送給用戶端故互動性較差，為了增加互動性便有了CGI可以達到雙向交流的效果 • CGI為Web Server與Script之間互動的介面標準

HTML基本架構 • <html>, <head>, <body>

標籤基本語法 • 標籤(Tag) • 語法 <x> 受控文字</x> <x a1="v1", a2="v2", ..., an="vn"> 受控文字</x> • 空標籤 • 語法 <x> <x a1="v1", a2="v2", ..., an="vn">

標籤性質 • 標籤(tag)：通常分成兩種：第一種是用來識別網頁上的元件或描述元件的樣式，例如網頁的標題 <TITLE> 第二種是用來指向其它資源，例如 <IMG> 用來插入圖片、<APPLET> 用來插入Java Applets… <I>網頁程式設計</I>

屬性(attribute)：除了HTML標籤本身所能描述的特性之外，多數標籤還會搭配屬性，以提供更多控制資訊屬性(attribute)：除了HTML標籤本身所能描述的特性之外，多數標籤還會搭配屬性，以提供更多控制資訊 • 例如： <H1 COLOR="#FF0000" ALIGN="CENTER“>網頁程式設計</H1>

值(value)：通常屬性會有一個值，而且這個值必須從預先定義的範圍內選取，不能自行定義。值(value)：通常屬性會有一個值，而且這個值必須從預先定義的範圍內選取，不能自行定義。 • 巢狀標籤(nesting tag)：有時我們可能需要使用一個以上的標籤來表示資料，請注意巢狀標籤之間的順序，例如： <H1><I>H</I> appy</H1> <H1><I>Happy</H1></I>

空白字元：HTML瀏覽器會忽略標籤之間多餘的空白字元或 [Enter]，因此，我們可以利用這個特點在HTML原始檔加上空白字元和 [Enter]，將HTML原始檔排列整齊。

特殊字元：我們不能直接以鍵盤輸入諸如空白字元、小於 (<)、大於 (>)、雙引號 (")、&…等特殊字元，而是要分別輸入、<、&gt；、"、& 。

<HTML>...</HTML> 標籤 • 標籤解說：這個標籤用來識別HTML文件，當我們撰寫HTML文件時，<HTML> 標籤放於前面，而且必須加上結束標籤 </HTML>。 <HTML> ...網頁的標題、主體等內容放於此... </HTML>

<HEAD>...</HEAD> 標籤 • 標籤解說：這個標籤包含文件的相關資訊。當我們撰寫HTML文件時，<HEAD> 標籤是放在 <HTML> 標籤的後面，而且必須加上結束標籤 </HEAD>。

<TITLE>...</TITLE> 標籤 • 標籤解說：這個標籤用來指定文件的標題，此標題會顯示在瀏覽器的標題列。當我們撰寫HTML文件時，<TITLE> 標籤一定要放在 <HEAD>...</HEAD> 標籤內，而且必須加上結束標籤 </TITLE>。

TITLE範例 <HTML> <HEAD> <TITLE>我的第一個網頁</TITLE> </HEAD> <BODY> Hello World! </BODY> </HTML>

<BODY>...</BODY> 標籤 • 標籤解說：這個標籤用來指定HTML文件的主體，包括文件內的文字、圖片、影像、動畫、色彩、音效…。當我們撰寫HTML文件時，<BODY> 標籤是放在<HEAD>...</HEAD> 標籤的後面，而且必須加上結束標籤 </BODY>，例如： <HTML> <HEAD> <TITLE>網頁的標題</TILTE> </HEAD> <BODY> ...網頁的主體.... </BODY> </HTML>

<html> <head> <title>標題範例</title> </head> <body> <h1> 這是第一層標題</h1> <h2> 這是第二層標題</h2> <h3> 這是第三層標題</h3> <h4> 這是第四層標題</h4> <h5> 這是第五層標題</h5> <h6> 這是第六層標題</h6> </body> </html> 範例：<h1>~<h6>

區段格式標籤 • <h1>~<h6>：文章標題 • <hr>：產生水平線 • <br>：強迫換行 • <p>：文件段落 • <pre>：以原始格式顯示 • <address>：地址標記 • <blockquote>：段落內縮 • ：註解

範例：<hr> <html> <head> <title>水平分隔線範例</title> </head> <body > hr <hr> size =5 <hr size ="5"> size =10 <hr size ="10"> size =20 <hr size ="20"> width = 70% <hr width = "70%"> width = 50% align = center <hr width = 50% align = "center"> <hr width = 50% align = "left"> <hr width = 50% align = "right"> noshade <hr noshade> </body> </html>

字型的設定 <b>：粗體字 <i>：斜體字 <tt>：打字體 <basefont>：設定基本字型 <basefont color="color"face="font"size="n"> ... </basefont> <font>：改變字型 <font color=”color”face=”font”size=”n”> ... </font> <big>：字體加大 <small>：字體縮小字元格式標籤

特殊符號

例：網頁設計練習 • <Html> • <Head> • <Title> • 網頁設計練習 • </Title> • </Head> • <Body> • <H2 > 1.數學 </H2><Br> • <H2 > 2.物理 </H2><Br> • <H2 > 3.電子學 </H2><Br> • </Body> • </Html>

例：字體效果範例 <html> <head> <title>字體效果範例</title> </head> <body> <p> <b>這是粗體字 bold font</b> <br> <i>這是斜體字 italic font</i> <br> <tt>這是打字體 typewiter font</tt> <br></p> <p>未被包圍的文字。</p> </body> </html>

字型位址控制 • <Html> • <Head> • <Title>字型位址控制 • </Title> • </Head> • <Body> • <H2 align=left > 1.數學 </H2><Br> • <H3 align=center> 2.物理 </H3><Br> • <H4 align=right> 3.電子學 </H4><Br> • </Body> • </Html>

例：字型大小顏色控制 • <html> • <head> • <title>字型大小顏色控制</title> • </head> • <body> • <P STYLE="cursor:pointer"> • point • aaaaaa • 11111111 • </P> • <Font size=1 color=red > 1.數學 </Font><Br> • <Font size=2 color=blue > 2.物理 </Font><Br> • <Font size=3 color=green > 3.電子學 </Font><Br> • </body > • </Html>

游標控制 <html> <head> <title>游標控制</title> </head> <body> <P STYLE="cursor:pointer"> pointer 11111111 </P> <P STYLE="cursor:wait"> wait 222222 </P><Br> <P STYLE="cursor:n-resize"> resize 99999 </P><Br> </body > </Html>

游標字型大小顏色控制 <html> <head> <title>游標字型大小顏色控制</title> </head> <body> <P STYLE="cursor:pointer"> point aaaaaa 11111111 </P><br> <p style="cursor:wait"> <Font size=3 color=red > 1.數學 <p style="cursor:pointer"> </Font><Br> <Font size=5 color=blue > 2.物理 </p> </Font><Br> Chang chien-chih <p style="cursor:help"> <Font size=3 color=green > 3.電子學 </Font><Br> </p> </body > </Html>

超連結 • 格式：<a href="URL">超鏈結文字</a> • <a href=“http://www.csu.edu.tw”>正修科大</a><a href=“http://140.127.128.1”>電機系</a><a href=“http:// http://www.csu.edu.tw /~chang/index.html”>個人檔</a> • <A HREF="http://www.kimo.com.tw">奇摩站 <br> </A>

Html-5 練習一執行結果： <HTML> <HEAD><TITLE>字型的練習</TITLE></HEAD> <BODY> <CENTER> <FONT SIZE=3>歡迎光臨</FONT> <FONT SIZE= 5>§</FONT> <FONT SIZE=+2>電</FONT> <FONT SIZE= 3>機</FONT><FONT SIZE=+4>工</FONT> <FONT SIZE=+3>程</FONT><FONT SIZE=+2>系</FONT> <FONT SIZE=-5>§</FONT><FONT SIZE=3>歡迎光臨</FONT> </CENTER> </BODY></HTML> 練習二 <HTML> <HEAD> <TITLE>實體字型控制</TITLE> </HEAD> <BODY> <B>電機工程系</B> <P> ;P:跳段、B:粗體 <I>電機工程系</I><P> ;I:斜體 <U>電機工程系</U><P> ;U:加底線 <S>電機工程系</S> <P> ;S:加直線 <TT>電機工程系</TT><P> ;TT:細小字 <SUP>電機工程系</SUP> <P>;SUP:上標字 <SUB>電機工程系</SUB> <P>;SUB:下標字 </BODY> </HTML> 執行結果：

HTML的編寫練習 • 用「記事本」編輯HTML程式 • 存檔時副檔名為‧htm • 由瀏覽器開啟執行

HTML編寫工具 • Macromedia Dreamweaver • Microsoft FrontPage

END

HTML 介紹與練習