Ch 13 html
This presentation is the property of its rightful owner.
Sponsored Links
1 / 56

Ch.13 HTML 網頁實作 PowerPoint PPT Presentation


  • 30 Views
  • Uploaded on
  • Presentation posted in: General

Ch.13 HTML 網頁實作. 源流與發展. 全名為 Hyper Text Markup Language 。 西元 1991 年提出。 主要 為 方便分享資料所設計。 主要顯示文字與 超連結。 網頁內的內容皆可以透過不同的標籤定義。 最新的 HTML 標準稱為 HTML5 。. 源流與發展. HTML 瀏覽器. 一般 HTML 網頁皆可透過網頁瀏覽器瀏覽。 目前主流的瀏覽器 有 Microsoft Internet Explorer Mozilla Firefox Google Chrome Apple Safari Opera.

Download Presentation

Ch.13 HTML 網頁實作

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Ch 13 html

Ch.13 HTML網頁實作


Ch 13 html

源流與發展

  • 全名為 Hyper Text Markup Language。

  • 西元 1991 年提出。

  • 主要為方便分享資料所設計。

  • 主要顯示文字與超連結。

  • 網頁內的內容皆可以透過不同的標籤定義。

  • 最新的 HTML 標準稱為 HTML5。


Ch 13 html

源流與發展


Ch 13 html

HTML瀏覽器

  • 一般 HTML 網頁皆可透過網頁瀏覽器瀏覽。

  • 目前主流的瀏覽器有

    Microsoft Internet Explorer

    Mozilla Firefox

    Google Chrome

    Apple Safari

    Opera


Ch 13 html

HTML 標籤

  • 大部分的標籤都是成雙成對的,有開始標籤,就會有結尾標籤。如:

    <html>…..</html>

    <body>….</body>

  • 網頁瀏覽器會將 HTML 轉譯成我們平常所看到的網頁效果、排版與顏色等。


Ch 13 html

HTML 網頁架構

  • 基本 HTML 網頁架構:

    <!DOCTYPE HTML PUBLIC … >

    <html>

    <head> … </head>

    <body> … </body>

    </html>


Ch 13 html

HTML 網頁內容與標籤

  • 一般網頁起始於 <html>,結尾於</html>。

  • 網頁的主要內容,如表格、圖片、文字、影片與超連結多媒體內容等,皆必須置於<body>...</body>之中

  • <head>…</head> 用來定義網頁文件等訊息,如網頁的標題等。


Ch 13 html

HTML 標籤與屬性

  • 每個標籤內可能定義了多個屬性。

    <body background=“bg.jpg”>….</body>

  • Background 為 <body> 的屬性之一,代表的是網頁所使用的背景圖片,而 bg.jpg 為其背景圖片之檔案名稱。


Ch 13 html

HTML 基本標籤


Ch 13 html

HTML 格式化標籤


Ch 13 html

HTML 超連結及圖片標籤


Ch 13 html

HTML 表格標籤


Ch 13 html

HTML表單標籤


Ch 13 html

HTML 頁框標籤


Html meta

HTML 樣式及Meta標籤

樣式標籤

Meta 標籤


Ch 13 html

HTML 程式標籤


Html 1

HTML 編輯軟體-1

  • 純文字編輯。如直接透過任何純文字編輯器,如 Windows 記事本。

  • 透過 W3School TryIt Editor 編輯,並可即時預覽。


Html 2

HTML 編輯軟體-2

  • 利用文書編輯軟體,如大家常用的 Word 編寫網頁內容與繪製表格等。

  • 編輯完畢後儲存成 html 或 htm的檔案格式。

  • 由於該類文書編輯軟體並非針對專業網頁製作所設計,因此若要網頁動態化,或是各種精緻化功能都會有問題。


Html 3

HTML 編輯軟體-3

  • 透過專業網頁編輯軟體,方便設計者撰寫 HTML 以及 Javascript等語法。

  • 較著名的網頁編輯軟體:

    Microsoft FrontPage

    NamoWebEditor

    Adobe Dreamweaver

    Microsoft Expression Web

  • Kompozer為免費的網頁開發工具。


Html kompozer

HTMLKompozer


15 2 html

15-2 HTML 網頁實作

以 2010 年 4 月 21 日所擷取的淡江大學首頁為例


Ch 13 html

TKU網頁結構設計分析


1 table

網頁結構分析(1) – table標籤


1 html

網頁結構分析(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 td table

網頁結構分析(2) – td 含 table


2 html

網頁結構分析(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>


Ch 13 html

網頁結構分析(3) – td 插入影片


Ch 13 html

網頁結構分析(3) – 找到td

原 HTML 語法

<tr>

<td valign="top" align="center"> <imgsrc="t2-12-1.jpg"></td>

</tr>


3 html

網頁結構分析(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 語法


Youtube

取得YouTube影片之內嵌碼


Ch 13 html

網頁 -- 顏色表示法

<td style="color:#0000FF;background-color:#FFCCFF">

顯示在 <td> 格中背景是粉紅底(FFCCFF),前景顏色是藍色(0000FF)。這裡顏色是用RGB色彩三原色表示,R是紅色(Red),G是綠色(Green),B是藍色(Blue),RGB每種顏色各有256種組合,十進位數字為00~255,十六進位數字為00~FF。


Ch 13 html

網頁 – 顏色及RGB值


Ch 13 html

淡江大學網頁空間

  • 學校針對 100 學年度新生提供的伺服器如下 Web 伺服器:s00.tku.edu.tw

    FTP 伺服器:ftp.s00.tku.edu.tw

  • 學生上傳網頁成功後,瀏覽自己網頁的 URL 為http://s00.tku.edu.tw/~ID

    ID 為學生於淡江大學之學號。


Ch 13 html

FTP 軟體下載與安裝

  • 至 Google 搜尋 FileZilla,下載後安裝。


Ftp 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


Ftp filezilla1

FTP 軟體– Filezilla畫面


Filezilla tku ftp

Filezilla連線TKU 提供之ftp 空間


Ch 13 html

瀏覽放在TKU網頁空間之網頁

啟動瀏覽器,輸入網址 http://s00.tku.edu.tw/~ID,看看是否能夠看到你寫的網頁。如果可以就是成功了。

之後如果網頁檔案更新,只要將有更動的檔案傳入ftp.s00.tku.edu.tw即可。


15 3 html

15-3 動態 HTML


Ch 13 html

CSS 簡介

  • HTML主要是用標籤來定義文件的結構。

  • CSS (Cascading Style Sheets) 主要是用來定義HTML文件要如何顯示。

  • 同一個網頁內容,因為不同的CSS而造成顯示產生差異。


Ch 13 html

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>


Ch 13 html

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>


Ch 13 html

CSS 免費資源

  • http://www.w3school.com.cn/css/

  • 無名小站有針對CSS提供畫面美化的服務,有興趣者可以去試試看,不僅可以藉此更深入了解CSS的用法,還可以做出個人風格的網頁來。


Ch 13 html

動態 HTML 免費資源

  • DynamicDrive (http://www.dynamicdrive.com/)


15 4 html

15-4 HTML 學以致用


Html ckeditor

HTML 編輯器- CKEditor

  • ckEditor(http://ckeditor.com/demo)


Ckeditor

CKEditor編輯畫面


Ckeditor1

CKEditor顯示網頁


Html blogger

HTML 編輯器- Blogger


Html blogger1

HTML 編輯器- Blogger


Google

Google 問卷客製化


Google html

Google 問卷加入HTML編輯


Google html1

Google 問卷整合HTML


Google facebook

Google 問卷 – Facebook發佈


Google1

Google問卷– 調查結果


Google2

Google問卷 – 結果分析


  • Login