An Introduction …

An Introduction …

HTML 與網頁

Wen-Nung Tsai蔡文能

2蔡文能 Reference: http://www.csie.nctu.edu.tw/~jglee/teacher/content.htm

AgendaAgenda What is HTML ? An example of HTML page (Web page) HTML elements Related Terminologies HTML tags … Tools to build a Web Page The WWW history/story


What is aWhat is ann HTML File? HTML File? Web pages (網頁 ) is simply an HTML file.

HTML file is Essentially a text file, containing small markup tags.

Markup tags tell the Web browser how to read and display the page.

An HTML file can be created using a simple text editor or FrontPage, ….


What is HTML ?What is HTML ?

HTML – HyperText Markup Language– HTML are the instructions that tell a browser

how to lay out the information (text, images, etc) in the browser window ( 排版語言 )

It is made up of tags – an opening tag <html> and a closing tag </html> with the content that the tag is applied to, in between them.


<html>

<head>

<title> 名稱 </title>

</head>

<body>

內容 <tag attribute=val … > … </tag> </body>

</html>

Titile 讓首頁製作者以簡短的文字表達此一首頁之內容。Title 的內容會出現在瀏覽器的頂端。若將某個首頁加入書籤，則 Title 內容變成該書籤名稱。

HTML Page (Web Page) 外觀


HTML ElementsHTML Elements Headings, Font Sizes, Color Comments Backgrounds Links and hyperlinks E-mail Pictures Lists Tables, Frames, …


Some HTML tagsSome HTML tags <html></html> - The start and closing tags of an html document <head></head> - found at the beginning of an html document, will contain i

nformation such as the title, meta tags (content, keywords), css and javascript information.

<body></body> - the bulk of your webpage information is found between these two tags

<table></table> - For tables, you also need the row and column tags (you can also add a border=“#” in the opening table tag)

– <tr></tr> row– <td></td> column (the column tags are contained within the row tags)

For example <table> <tr> <td></td><td></td></tr></table> will produce a table with one row, two columns

<font></font> - applies font type and size to text– <b></b> - bold– <i></i> - italicize

<a href=“”></a> - hyperlink <p></p> - paragraph <br> line break


Related TerminologiesRelated Terminologies WWW – World Wide Web URL – Uniform Resource Locator HTML – Hyper Text Markup Language HTTP – Hyper Text Transfer Protocol Hyperlinks and Links Web Browser Web Server, Application Server http://w3c.org



The World Wide Web The World Wide Web (WWW)(WWW)

Originated at the Conseil Européen pour la Recherche Nucléaire (CERN).

Uses a browser ( 例如 IE 或 Netscape) program to access Web documents called Web pages and to display the hypertext (including text, pictures, etc.) in the Web pages.

Uses HyperText Mark-up Language (HTML) to write Web pages.


WWW ?WWW ? The World Wide Web, or simply Web, is an

information-sharing model that is built on top of the Internet. The Web uses HTTP, only one of the languages spoken over the Internet, to transmit data and receive data from an Application Server. The Netizen uses browsers, such as Internet Explorer or Netscape, to access Web documents called Web pages that are linked to each other via hyperlinks. Web documents also contain graphics, sounds, text and video.


WWW-related EventsWWW-related EventsDate Event

03/1989 WWW project was originated by Timothy Berners-Lee

11/1990 A revised version of project by NeXT computer

03/1991 Release of WWW for testing

09/1993 Release of 1st version of Marc Andreessen’s Mosaic by NCSA

10/1993 > 500 known HTTP servers in operation

10/1994 > 10,000 know HTTP servers in operation


HeadHead 裡可強制用中文裡可強制用中文 big5 big5 編編碼碼 <meta http-equiv="Content-Type" content

="text/html; charset=big5">


置中與標題置中與標題置中與標題置中與標題 <center> 內容會置中 </center>

<h1> 第一級標題 </h1> 正常文字<h2> 第二級標題 </h2> 正常文字<h3> 第三級標題 </h3> 正常文字<h4> 第四級標題 </h4> 正常文字<h5> 第五級標題 </h5> 正常文字<h6> 第六級標題 </h6> 正常文字


<h1><h1> 第一級標題第一級標題 </h1></h1>


常用控制用的常用控制用的 tagtag <font size=n color= 顏色 > 字串 </font> <br> 換列 new Line <p> 段落開始 <pre> 文件照所寫樣子顯示 , 包括換列 </pre> < b> 粗體字 </b> 標準 <sup> 上標 </sup> 標準 <sub> 下標 </sub>

標準


<HTML><HTML><head><head><title><title> 水平線練習水平線練習 </title></title></head></head><BODY><BODY><HR ALIGN="left" WIDTH=60% SIZE=3><HR ALIGN="left" WIDTH=60% SIZE=3><hr width=50 size=5 align="right"><hr width=50 size=5 align="right"></BODY></BODY></HTML></HTML>

常用語法－水平線常用語法－水平線


常用語法介紹－段落常用語法介紹－段落 <P ALIGN = LEFT> 該段內文靠左對齊 ... 該段內文靠左

對齊 .. 該段內文靠左對齊 : 該段內文靠左對齊 : ( 預設值 ) </P>

<P ALIGN = CENTER> 該段內文置中對齊 ... 該段內文置中對齊 .. 該段內文置中對齊 : </P>

<P ALIGN = RIGHT> 該段內文靠右對齊 ... 該段內文靠右對齊 :.. 該段內文靠右對齊 : </P>


<HTML> <HEAD> <TITLE> 歸去來辭 </TITLE> </HEAD><BODY><H1 ALIGN = CENTER><FONT COLOR = RED>歸去來辭　　　－－陶淵明 </FONT></H1>余家貧，耕植不足以自給。幼稚盈室，缾無儲粟。生生所資，未見其術。親故多余為長吏，脫然有懷，求之靡途。 ... <HR> <BR><P ALIGN = CENTER><FONT COLOR=BLUE> 歸去來兮！田園將蕪胡不歸？<BR>既自以心為形役，奚惆悵而獨悲？ <BR> 悟已往之不諫，知來者之可追； <BR> 實迷途其未遠，覺今是而昨非。 <BR> 舟遙遙以輕颺，風飄飄而吹衣。 <BR>問征夫以前路，恨晨光之熹微。 <BR><BR>乃瞻衡宇，載欣載奔，僮僕歡迎，稚子候門。 <BR> 三徑就荒，松菊猶存。 <BR>...</FONT></P></BODY></HTML> 排版結果在下頁







註解註解 (comments) (comments)

在 C 語言裡面： /*… 註解… */ 在 C++ 語言裡面： // … 註解… ＨＴＭＬ語言：  註解的意識是說：這段文字是給人看的，

所以電腦不會去理會該段文字。畫線： <hr size=XX width=XX% align=XX>


特殊符號特殊符號 < & > " < & > "

< 來顯示小於符號> 來顯示大於符號& 來顯示＆符號" 來顯示雙引號

是一個空白


參照參照 (Links)(Links) <a href="URL"> 超鏈結文字 </a>

<a href=http://www.nctu.edu.tw target=_blank align=bottom > 學校 </a>

<A href= "mailto:[email protected] ">

<img src= " 路徑 / 圖檔檔名 " alt= " 找不到圖檔時出現的文字 "

width= 寬度 height= 高度 border=" 邊框大小 "> <a name=Anchors> : Links within a page


Music and SoundMusic and Sound

<bgsound src="together.mid" LOOP=INFINITE >

<embed src="together.mid" LOOP=true>.

此語法用以設定背景音樂，此語法可放在 BODY 中任何位置，在放置的地方會出現一個播放音樂的小視窗。 WIDTH 用以設定小視窗之寬度， HEIGHT設定小視窗之高度，如果不要顯示小視窗，可設 WIDTH=2 HEIGHT=0 （最好不要設成 WIDTH=0 HEIGHT=0 ），或設 HIDDEN=TRUE 。AUTOSTART=TRUE 表示首頁一讀進來就播放背景音樂（相對值是 FALSE，待使用者按下 PLAY 之後才會播放音樂）。 LOOP=TRUE 表示循環播放不停止， LOOP=2 表示播放二次，其餘類推。


背景圖與表格背景圖與表格 (Table)(Table) <body background=" 路徑 / 圖檔檔名 ">

<table border=n bgcolor=pink><caption> 表格標題 </caption><TR><TH> 標題一 </TH><TH> 標題二 </TH></TR>

<tr><td> 列一行一 </td><td> 列一行二</td></tr><tr><td> 列二行一 </td><td> 列二行二</td></tr></table>


Tables againTables again <table> </table> defines a table

– <tr> </tr> - Table row– <td> </td> - Table column<table border> <tr>  <td colspan=3> If you have two <TR> tags in your table, you will have two rows in your table. </td> </tr> <tr> <td>If you have three <td> tags</td> <td>in a row, you will have</td> <td>three cells in the row.</td> </tr> </table>


Hover ButtonHover Button<a href="content.htm" onMouseOver='document.haha.src="http:

//www.csie.nctu.edu.tw/~tsaiwn/course/FLCS/images/button2.gif" '

onMouseOut=document.haha.src="http://www.csie.nctu.edu.tw/~tsaiwn/course/FLCS/images/button1.gif">

<img name=haha src= "http://www.csie.nctu.edu.tw/~tsaiwn/course/FLCS/images/but

ton1.gif" border=0> </a>


<HTML>

<HEAD>

<TITLE> 自動換頁 </TITLE>

<meta http-equiv="refresh" content="5;url=http://www.cwb.gov.tw/">

</HEAD>

<BODY>

五秒鐘後將自動連向中央氣象局全球資訊網；若五秒鐘後無法連結。

請按下列連結，謝謝！

<a href="http://www.cwb.gov.tw/">http://www.cwb.gov.tw/</a>

</BODY>

</HTML>

進階語法－自動換頁進階語法－自動換頁


<html>

<head>

<title>跑馬燈練習 </title>

</head>

<body>

<MARQUEE BEHAVIOR=ALTERNATE width=50%>

<IMG SRC="http://www.sinica.edu.tw/~nick/images/005.gif" border=0>

<FONT color=#0bcdef> 圖片和文字都可以喔！ </FONT></MARQUEE>

<MARQUEE DIRECTION=LEFT>我往左跑 </MARQUEE><P>

<MARQUEE DIRECTION=RIGHT>我往右跑 </MARQUEE><P>

</body>

</html>

進階語法－跑馬燈進階語法－跑馬燈


進階語法－加入進階語法－加入 JavaScriptJavaScript<html><head><title>最後更新日 </title></head><body><script language="JavaScript">

</script></body></html>


進階語法－進階語法－ FrameFrame


<HTML><HEAD>

<TITLE>Frame 框架實作 test 1</TITLE> </HEAD>

<FRAMESET COLS="120,*">

<FRAME SRC="http://www.sinica.edu.tw/" >

　 <FRAMESET ROWS="100,*">

　　 <FRAME SRC="http://www.pchome.com.tw">

　　 <FRAME SRC="http://www.yam.com">

　 </FRAMESET>

</FRAMESET>

<BODY>

</BODY>

</HTML>

Frame test 1Frame test 1


<html><head> <TITLE>Frame 框架實作 test 2</TITLE>

</head><frameset rows="30%,*"> <frame src="top.htm" ><frameset cols="30%,*"> <frame src="left.htm"><frame src="right.htm"></frameset></frameset></html>

Frame test2 --Frame test2 -- 多重頁框


進階語法－進階語法－ CSSCSS 介紹介紹超連結去底線【語法】 1. 在 <head>…</head>加入下列語法 <style> a{text-decoration:none} </style>

2. 在 <body>…</body>加入下列語法 <a style="text-decoration: none" href="網址 ">連結名稱 </a>


<html>

<head>

<title>CSS應用 </title>

<style>

a{text-decoration:none}

</style>

</head>

<body>

<a style="text-decoration: none"

href="http://www.sinica.edu.tw"> 中央研究院 </a>

</body>

</html>

進階語法－進階語法－ CSSCSS 介紹介紹 (co(cont)nt)


進階語法－進階語法－ FORMFORM

http://www.csie.nctu.edu.tw/~tsaiwn/sample/


善用善用 Browsers Browsers 的的 View SourceView Source能力能力 One of the most important thing is to look at

the source of a file. Explorer – View – Source Netscape – View – Page Source Helps to learn HTML Get new ideas from other guys’ Web pages..


Some Acronyms Some Acronyms 頭字語頭字語 WWW – World Wide Web URL – Uniform Resource Locator HTML – Hyper Text Markup Language HTTP – Hyper Text Transfer Protocol FTP – File Transfer Protocol BBS – Bulletin Board System


Tools to build a Web PageTools to build a Web Page You can just use NOTE PAD

– Write some bunch of code in a HTML file

Or you can use WYSIWYG (pronounced "wiz-ee-wig", means “What You See Is What You Get) editors.– Netscape Composer

– Microsoft Front Page

– Dreamweaver MX

– Hundreds of other Editors available on the Internet – the Cyber spaces


HTML editor? DreamWeaver? HTML editor? DreamWeaver? FrontPage? …FrontPage? …

Why do I need to know HTML when I have an html editor?– An HTML editor will work fine for what you want to do 99% of

time, but there are little ‘quirks’ to the GUI interface that will cause your webpage to look slightly different than what you intended. But if you know some html you can look at the ‘code’ of the html document and make simple adjustments.

So, why don’t you just write in HTML all the time?– Why don’t you walk to Taipei from hsinchu instead of drive? Be

cause it takes too long! Except for the occasional code tweak, you will design a website infi

nity faster in an HTML editor and with less errors.– I can’t type more than a line or two before I will mistype or misspell so

mething. If you do this in your ‘code’, the webpage will not work and/or will not look the way you intended.

– Trouble shooting a large page of code is tedious and difficult.


The Internet versus the WebThe Internet versus the Web

THE INTERNET

The Internet is a collection of interconnected networks.

THE WEB

The Web is a system that provides access to documents formatted in hypertext that uses languages such as HTML or XML.

Slide 5 of 30


進階課題進階課題 (Advanced Topics)(Advanced Topics)

CGI -- 在 Web Server 端執行但與 Browser互動的 program

JavaScripts (注意 JavaScript 不是 Java) ASP, ASP.NET (by MicroSoft) PHP JSP MS SQL, MySQL

– Structure Query Language


ISP: Internet Service ProvidersISP: Internet Service Providers

ISPs offer:– Linking consumers and businesses to Internet– Payment system for online purchases– Monitoring and maintaining a customer’s Web

site– Network management and system integration– Backbone access services for other ISPs


校外上網校外上網高速 56K 撥接

交大已不提供 ; 可自行用KKMAN或其它免費撥接。

ADSL

– 由 http://www.cc.nctu.edu.tw/network/

進入後選 ADSL 服務


The The WWorld orld WWide ide WWeb eb (WWW)(WWW)

The Year…1988

John Walker, founder of Autodesk, acquires Nelson’s technology and sinks $5 million into its development.

However, he is beaten to the race in 1989 by Tim Berners-Lee – a physicist at CERN (European Particle Physics Laboratory) – who proposed a global hypertext system that he named “WorldWideWeb.”

Berners-Lee specifically invented three things:– HyperText Transfer Protocol (HTTP) – a standard format for enabling all compu

ters to look up documents.– Universal Resource Locator (URL) – a standard for finding a document by typin

g in an address like http://www.webonomics.com/book.html– HyperText Markup Language (HTML) – a standard design for word processor-li

ke functions that enables people to add special codes to text. The Year…1991

– Berners-Lee makes his trio of programs available on the Internet.– Leads to a rapid growth in the number of web sites.


WWW WWW 發明人發明人 Tim Tim Berners-LeeBerners-Lee

Berners-Lee has software in his blood. Both his parents were programmers who worked for the British company Ferranti on one of the first commercial computers.

He read physics at Queen's College, Oxford, where he built his first computer with a soldering iron, a microprocessor chip and an old television set.

Graduating in 1976, he worked first for Plessey and later for a firm writing typesetting software.


A Web server is a software program rather than hardware http daemon in Unix; http service in Windows NT Functions:

– service HTTP requests– provide access control, determining who can access particular directories

or files on the Web server– run scripts and external programs to either add functionality to the Web

documents or provide real-time access to database and other dynamic data– enable management and administration of both the server functions and

the contents of the Web site– log transactions that the user makes

Distinguished by :– platforms, performance, security, and commerce

Web Servers


Web BrowsersWeb Browsers Lynx, Mosaic, Netscape, Internet Explorer, … Browser is independent: web servers don’t keep track of

who is using them. Each request is self-contained and treated independently of all others.– Cookies don’t count: they sit on your machine– And the database of account info doesn’t count either… this is

“ancient” history, nothing recent ... So the web has two network applications that talk to

each other– The browser on your machine– The web server it happens to connect with… which has a

database “behind” it


The actual The actual NeXT ComputerNeXT Computer that ran the that ran the original WWW server and browser at original WWW server and browser at CERNCERN


1993: 1993: MosaicMosaic was born was born One of these programmers was Marc Andreessen, who was

working for the NCSA in Urbana-Champaign, Illinois.

In January 1993, Andreessen released a version of his new, handsome, point-and-click graphical browser for the Web, designed to run on Unix machines.

In August, Andreessen and his co-workers at the center

released free versions for Macintosh and Windows.


MosiacMosiac Communications (N Communications (Netscape)etscape) December 1993 Andreersson left NCSA and foun

ded Mosiac Communications, now called Netscape.

Many of the key developers from NCSA went with him to work on a new browser.

July 1995: MS IE (Internet Explorer) Mozilla.org , Mozilla Firefox /Camino/Fennec

自 ICQ (I Seek You) 出現後 , 大家才發現弄個人潮很多的網站就可以賣很多錢


謝謝捧場http://www.csie.nctu.edu.tw/~tsaiwn/introcs/FL/

HTML 與網頁Reference: http://www.csie.nctu.edu.tw/~jglee/teacher/content.htm

Documents

An Introduction …