Ch 13 html
Download
1 / 56

Ch.13 HTML 網頁實作 - PowerPoint PPT Presentation


  • 40 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Ch.13 HTML 網頁實作' - corazon-soria


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網頁實作


源流與發展

  • 全名為 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 基本標籤


HTML 格式化標籤


HTML 超連結及圖片標籤


HTML 表格標籤


HTML表單標籤


HTML 頁框標籤


Html meta
HTML 樣式及Meta標籤

樣式標籤

Meta 標籤


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 日所擷取的淡江大學首頁為例


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>


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


網頁結構分析(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影片之內嵌碼


網頁 -- 顏色表示法

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

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


網頁 – 顏色及RGB值


淡江大學網頁空間

  • 學校針對 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
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 空間


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

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

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


15 3 html

15-3 動態 HTML


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/)


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問卷 – 結果分析


ad