560 likes | 634 Views
Ch.13 HTML 網頁實作. 源流與發展. 全名為 Hyper Text Markup Language 。 西元 1991 年提出。 主要 為 方便分享資料所設計。 主要顯示文字與 超連結。 網頁內的內容皆可以透過不同的標籤定義。 最新的 HTML 標準稱為 HTML5 。. 源流與發展. HTML 瀏覽器. 一般 HTML 網頁皆可透過網頁瀏覽器瀏覽。 目前主流的瀏覽器 有 Microsoft Internet Explorer Mozilla Firefox Google Chrome Apple Safari Opera.
E N D
源流與發展 • 全名為 Hyper Text Markup Language。 • 西元 1991 年提出。 • 主要為方便分享資料所設計。 • 主要顯示文字與超連結。 • 網頁內的內容皆可以透過不同的標籤定義。 • 最新的 HTML 標準稱為 HTML5。
HTML瀏覽器 • 一般 HTML 網頁皆可透過網頁瀏覽器瀏覽。 • 目前主流的瀏覽器有 Microsoft Internet Explorer Mozilla Firefox Google Chrome Apple Safari Opera
HTML 標籤 • 大部分的標籤都是成雙成對的,有開始標籤,就會有結尾標籤。如: <html>…..</html> <body>….</body> • 網頁瀏覽器會將 HTML 轉譯成我們平常所看到的網頁效果、排版與顏色等。
HTML 網頁架構 • 基本 HTML 網頁架構: <!DOCTYPE HTML PUBLIC … > <html> <head> … </head> <body> … </body> </html>
HTML 網頁內容與標籤 • 一般網頁起始於 <html>,結尾於</html>。 • 網頁的主要內容,如表格、圖片、文字、影片與超連結多媒體內容等,皆必須置於<body>...</body>之中 • <head>…</head> 用來定義網頁文件等訊息,如網頁的標題等。
HTML 標籤與屬性 • 每個標籤內可能定義了多個屬性。 <body background=“bg.jpg”>….</body> • Background 為 <body> 的屬性之一,代表的是網頁所使用的背景圖片,而 bg.jpg 為其背景圖片之檔案名稱。
HTML 樣式及Meta標籤 樣式標籤 Meta 標籤
HTML 編輯軟體-1 • 純文字編輯。如直接透過任何純文字編輯器,如 Windows 記事本。 • 透過 W3School TryIt Editor 編輯,並可即時預覽。
HTML 編輯軟體-2 • 利用文書編輯軟體,如大家常用的 Word 編寫網頁內容與繪製表格等。 • 編輯完畢後儲存成 html 或 htm的檔案格式。 • 由於該類文書編輯軟體並非針對專業網頁製作所設計,因此若要網頁動態化,或是各種精緻化功能都會有問題。
HTML 編輯軟體-3 • 透過專業網頁編輯軟體,方便設計者撰寫 HTML 以及 Javascript等語法。 • 較著名的網頁編輯軟體: Microsoft FrontPage NamoWebEditor Adobe Dreamweaver Microsoft Expression Web • Kompozer為免費的網頁開發工具。
15-2 HTML 網頁實作 以 2010 年 4 月 21 日所擷取的淡江大學首頁為例
網頁結構分析(1) – HTML 碼 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TKU Website Structure</title> </head> <body> <table cellspacing=0 cellpadding=0> <tr> <td rowspan=3> <imgsrc="t1-11.jpg"></td> <td colspan=2> <imgsrc="t1-12.jpg"></td> </tr> <tr> <td> <imgsrc="t1-21.jpg"> </td> <td> <imgsrc="t1-22.jpg"> </td> </tr> <tr> <td colspan=2> <imgsrc="t1-31.jpg"></td> </tr> </table>
網頁結構分析(2) – HTML 碼 • <table> • <tr> • <td valign="top"> • <table> • <tr> <td> <imgsrc="t2-11-1.jpg"> </td> </tr> • <tr> <td> <imgsrc="t2-11-2.jpg"> </td> </tr> • </table> • </td> • <td> • <table> • <tr> • <td valign="top" align="center"> <imgsrc="t2-12-1.jpg"></td> • </tr> • <tr> <td> <imgsrc="t2-12-2.jpg"></td> </tr> • </table> • </td> • <td> <imgsrc="t2-13.jpg"> </td> </tr> • <tr> <td colspan=3> <imgsrc="t2-21.jpg"> </td> </tr> • </table>
網頁結構分析(3) – 找到td 原 HTML 語法 <tr> <td valign="top" align="center"> <imgsrc="t2-12-1.jpg"></td> </tr>
網頁結構分析(3) – HTML 碼 <tr> <td valign="top" align="center"> <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/RechrtUxfQc" frameborder="0" allowfullscreen></iframe> </td> </tr> <tr> <td style="color:#0000ff;background-color:#ffccff"><center><h3> 淡江大戲 Part <a href= "http://www.youtube.com/watch?v=RechrtUxfQc&playnext=1&list=PLA134F7F5E4A537D2" >[1]</a> <a href= "http://www.youtube.com/watch?v=MRWX49Furew&feature=related">[2]</a> <a href= "http://www.youtube.com/watch?v=METhdbL_iMw&feature=related">[3]</a> <a href= "http://www.youtube.com/watch?v=ZyDbq-lEKTo&feature=related">[4]</a> <a href= "http://www.youtube.com/watch?v=NlsrJbVvjaA&feature=related">[5]</a></h3><center> </td> </tr> 替換為新的 HTML 語法
網頁 -- 顏色表示法 <td style="color:#0000FF;background-color:#FFCCFF"> 顯示在 <td> 格中背景是粉紅底(FFCCFF),前景顏色是藍色(0000FF)。這裡顏色是用RGB色彩三原色表示,R是紅色(Red),G是綠色(Green),B是藍色(Blue),RGB每種顏色各有256種組合,十進位數字為00~255,十六進位數字為00~FF。
淡江大學網頁空間 • 學校針對 100 學年度新生提供的伺服器如下 Web 伺服器:s00.tku.edu.tw FTP 伺服器:ftp.s00.tku.edu.tw • 學生上傳網頁成功後,瀏覽自己網頁的 URL 為http://s00.tku.edu.tw/~ID ID 為學生於淡江大學之學號。
FTP 軟體下載與安裝 • 至 Google 搜尋 FileZilla,下載後安裝。
FTP 軟體 -- Filezilla設定 • 啟動Filezilla,並做好連線設定後,連線登入。 • 請從選單「檔案」中選「站台管理員」,先輸入站名名稱(如ftp.s00) • 主機名稱100年度大一新生請填寫 ftp.s00.tku.edu.tw,99年度學生請填寫 ftp.s99.tku.edu.tw,依此類推。 • 使用者請輸入學號,密碼請輸入學校提供的密碼,按確認就可以將ftp.s00站台儲存起起來,下一次就不必再輸入。 • 設定好了按「連線」登入ftp.s00.tku.edu.tw
瀏覽放在TKU網頁空間之網頁 啟動瀏覽器,輸入網址 http://s00.tku.edu.tw/~ID,看看是否能夠看到你寫的網頁。如果可以就是成功了。 之後如果網頁檔案更新,只要將有更動的檔案傳入ftp.s00.tku.edu.tw即可。
CSS 簡介 • HTML主要是用標籤來定義文件的結構。 • CSS (Cascading Style Sheets) 主要是用來定義HTML文件要如何顯示。 • 同一個網頁內容,因為不同的CSS而造成顯示產生差異。
CSS 簡介 <body> <h1>淡江大學</h1> <hr> <h2>World Wide Web</h2> <table border="1" width="100%"> <tbody> <tr> <th align="left">Chapter</th> <th align="left">Title</th> </tr> <tr> <td width="10%">13</td> <td width="50%">雲端服務</td> </tr> <tr> <td width="10%">14</td> <td width="50%">智慧型手機</td> </tr> </tbody> </table><br> <hr> </body>
CSS 範例 於 <head>…</head> 中加入下列語法 <style type="text/css"> body { font-family:"lucida calligraphy",arial,'sans serif'; background-color:#DCDCDC; color:#8A2BE2; margin:10px; } h1 {font-size:250%;} h2 {font-size:150%;} th {background-color:#D3D3D3;} td {background-color:#FFFAF0A;} </style>
CSS 免費資源 • http://www.w3school.com.cn/css/ • 無名小站有針對CSS提供畫面美化的服務,有興趣者可以去試試看,不僅可以藉此更深入了解CSS的用法,還可以做出個人風格的網頁來。
動態 HTML 免費資源 • DynamicDrive (http://www.dynamicdrive.com/)
HTML 編輯器- CKEditor • ckEditor(http://ckeditor.com/demo)