Download presentation
Presentation is loading. Please wait.
1
HTML 與網頁 Wen-Nung Tsai Ref:
2
What is an 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, …. We will see what are mark up tags.
3
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.
4
HTML Page (Web Page) 外觀 <html> <head> <title>名稱</title> </head> <body> 內容 <tag attribute=val … > … </tag> </body> </html> Titile讓首頁製作者以簡短的文字表達此一首頁之內容。 Title的內容會出現在瀏覽器的頂端。 若將某個首頁加入書籤，則Title內容變成該書籤名稱。
5
HTML Elements Headings, Font Sizes, Color Comments Backgrounds
Links and hyperlinks Pictures Lists Tables, Frames, …
6
Some 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 information 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
7
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 As we have already seen in class the internet has a lot of arcane terminology, which one must wade through, to get at its true spirit. We shall look at some such terms before we start working on project two.
9
The World Wide Web (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.
10
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.
11
WWW-related Events Date 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
12
Head裡可強制用中文 big5 編碼 <meta http-equiv="Content-Type" content="text/html; charset=big5">
13
置中與標題 <center>內容會置中</center>
<h1>第一級標題</h1>正常文字 <h2>第二級標題</h2>正常文字 <h3>第三級標題</h3>正常文字 <h4>第四級標題</h4>正常文字 <h5>第五級標題</h5>正常文字 <h6>第六級標題</h6>正常文字
14
<h1>第一級標題</h1>
15
常用控制用的 tag <font size=n color=顏色>字串 </font>
<br>換列 new Line <p>段落開始 <pre> 文件照所寫樣子顯示, 包括換列 </pre> < b>粗體字</b> 標準<sup>上標</sup>標準<sub>下標</sub>標準
16
常用語法－水平線 <HTML> <head> <title>水平線練習</title> </head> <BODY> <HR ALIGN="left" WIDTH=60% SIZE=3> <hr width=50 size=5 align="right"> </BODY> </HTML>
17
常用語法介紹－段落 <P ALIGN = LEFT>該段內文靠左對齊...該段內文靠左對齊.. 該段內文靠左對齊:該段內文靠左對齊: (預設值) </P> <P ALIGN = CENTER>該段內文置中對齊...該段內文置中對齊..該段內文置中對齊: </P> <P ALIGN = RIGHT>該段內文靠右對齊 ...該段內文靠右對齊:..該段內文靠右對齊: </P>
18
<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> 排版結果在下頁
24
註解 (comments) 在C語言裡面： /*…註解…*/ 在C++語言裡面： // …註解…
ＨＴＭＬ語言： <! …註解… --> 註解的意識是說：這段文字是給人看的，所以電腦不會去理會該段文字。 畫線 ：<hr size=XX width=XX% align=XX>
25
特殊符號 < & > " < 來顯示小於符號 > 來顯示大於符號 & 來顯示＆符號 " 來顯示雙引號 是一個空白
26
參照(Links) <a href="URL">超鏈結文字</a>
<a href= target=_blank align=bottom >學校</a> <A href= "> <img src= "路徑/圖檔檔名" alt= "找不到圖檔時出現的 文字" width=寬度 height=高度 border="邊框大小"> <a name=Anchors> : Links within a page
27
Music 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表示播放二次，其餘類推。
28
背景圖 與表格(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>
29
Tables again <table> </table> defines a table
<tr> </tr> - Table row <td> </td> - Table column <table border> <tr> <!-- start a table row --> <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> </table>
30
Hover Button <a href="content.htm" onMouseOver='document.haha.src=" ' onMouseOut=document.haha.src=" <img name=haha src= " border=0> </a>
31
進階語法－自動換頁 <HTML> <HEAD> <TITLE>自動換頁</TITLE>
<meta http-equiv="refresh" content="5;url= </HEAD> <BODY> 五秒鐘後將自動連向中央氣象局全球資訊網；若五秒鐘後無法連結。 請按下列連結，謝謝！ <a href=" </BODY> </HTML>
32
進階語法－跑馬燈 <html> <head> <title>跑馬燈練習</title>
<body> <MARQUEE BEHAVIOR=ALTERNATE width=50%> <IMG SRC=" border=0> <FONT color=#0bcdef>圖片和文字都可以喔！</FONT></MARQUEE> <MARQUEE DIRECTION=LEFT>我往左跑</MARQUEE><P> <MARQUEE DIRECTION=RIGHT>我往右跑</MARQUEE><P> </body> </html>
33
進階語法－加入JavaScript <html> <head>
<title>最後更新日</title> </head> <body> <script language="JavaScript"> <!-- document.write(“最後更新日期: " + document.lastModified); //--> </script> </body> </html>
34
進階語法－ Frame
35
Frame test 1 <HTML><HEAD>
<TITLE>Frame框架實作 test 1</TITLE> </HEAD> <FRAMESET COLS="120,*"> <FRAME SRC=" > <FRAMESET ROWS="100,*"> <FRAME SRC=" <FRAME SRC=" </FRAMESET> </FRAMESET> <BODY> </BODY> </HTML>
36
Frame test2 --多重頁框 <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>
37
進階語法－CSS介紹 超連結去底線 【語法】 1.在<head>…</head>加入下列語法
<style> a{text-decoration:none} </style> 2.在<body>…</body>加入下列語法 <a style="text-decoration: none" href="網址">連結名稱</a>
38
進階語法－CSS介紹 (cont) <html> <head>
<title>CSS應用</title> <style> a{text-decoration:none} </style> </head> <body> <a style="text-decoration: none" href=" </body> </html>
39
進階語法－ FORM
40
善用 Browsers 的 View 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..
41
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
42
Tools 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 There are plenty of editors that you can use. Geocities is the most simplest in the fact that it does everything for you. You just need to say where you want the pictures, where the text etc, and it does them for you. However, if you want to be more versatile, have more options, you can look at Dreamweaver, or Netscape Composer or Microsoft Frontpage. They are also very simple to use. You just need to get the hang of the drop down menus. Also by just browsing them, you can easily identify many interesting options available. The editors in the increasing order of options are Dreamweaver, Microsoft Frontpage and Netscape Composer. Moreover, these editors will be much more useful to you in the long run. Dreamweaver and Netscape Composer are available in the CATS lab, in 1st Floor Baskin Engg. Microsoft Frontpage I guess you can obtain for free, as somone already pointed out in the Newsgroup on how to obtain Microsoft Products if you are a UCSC student.... Read the previous posting. Also with Geocities, you will have crazy advertisements popping withinyour webpage. Well, the compromise between simplicty and uglines...:) If you do not want such ads to pop up, either you can use another software, but again when somelse views your webpage they will not be able to stop the ads. The best option out is to use Microsoft Frontpage, Netscape Composer or Dreamweaver. However, if you want to get complete control, write your own HTML code. For starters, I would recommend using a HTML editor.
43
HTML editor? DreamWeaver? 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? Because it takes too long! Except for the occasional code tweak, you will design a website infinity 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 something. 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.
44
The Internet versus the Web
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. versus Slide 5 of 30
45
進階課題(Advanced Topics)
CGI JavaScripts (注意 JavaScript 不是 Java) ASP, ASP.NET PHP JSP MS SQL, MySQL Structure Query Language
46
ISP: 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
47
校外上網 高速 56K 撥接 ADSL 交大已不提供; 可自行用KKMAN或其它免費 撥接。
由 進入後選 ADSL 服務
48
The World Wide Web (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 computers to look up documents. Universal Resource Locator (URL) – a standard for finding a document by typing in an address like HyperText Markup Language (HTML) – a standard design for word processor-like 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.
49
WWW 發明人 Tim Berners-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.
50
Web Servers Functions: Distinguished by :
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
51
Web 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
52
The actual NeXT Computer that ran the original WWW server and browser at CERN
53
1993: Mosaic 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.
54
Mosiac Communications (Netscape)
December 1993 Andreersson left NCSA and founded Mosiac Communications, now called Netscape. Many of the key developers from NCSA went with him to work on a new browser.
55
名詞補充解釋 (1/4) Internet vs. internet
Internet是指網際網路，提供全世界所有的使用者使用網路資源，特點是完全沒有國境的限制；最早在60年代由美國國防部贊助規定不可有商業活動，1992美國副總統高爾提出NII計畫後改為商業化後就大為流行！ WWW(World Wide Web)全球資訊網 全球資訊網服務，使用http協定， WWW不但結合了Internet上的所有資源外，它的多媒體表現方式更讓人目不暇給！ HTML(Hyper Text Markup Language.超文件標註語言） 製作Homepage網頁的語言，是一種標記語言(排版語言)。
56
名詞補充解釋 (2/4) Hypertext 超文件 Hyperlink 超連結
超文件是指在文件中包含有鏈結到其他文件的能力，通常是利用不同 顏色或加底線的字，此外當滑鼠移到這些字上時會由箭頭變成手指狀 ，使用者只需經由滑鼠點取，便可鏈結到其他相關的文件。除了超文 件的鏈結外，ＨＴＭＬ編輯出來的超文件同時具備展現多媒體的能力 ，因為文件可加入圖片、聲音、及動畫及等效果。 Hyperlink 超連結 即「超鏈結」，是將滑鼠移到在附有超連結的圖片或文字上，按一下 左鍵，就可立刻連到這個超連結所指定的內部網頁或者是其他網站上的位置去瀏覽。 HomePage 利用ＨＴＭＬ寫成，可以用瀏覽器看到的超文件。中文翻做【首頁】、【家頁】、【烘培雞】、【烘培機】、或【烘培姬】。 Browser 瀏覽器(IE、Netscape)
57
名詞補充解釋 (3/4) HTTP (Hyper Text Transmission Protocol.超文件傳輸協定）
ISP (Internet Service Provider) 網路服務公司的統稱，以出租數據線路的方式提供使用者使用國際網路的服務；目前國內較著名的廠商有Hinet，Seednet等等． FTP (File Transfer Protocol)： TCP/IP 用來做檔案傳輸的一種應用層的通信協定 TCP/IP 控制協定/網際網路協定(Transmission Control Protocol/Internet Protocol)是目前Internet所使用的網路通訊協定標準， 包括TCP 、 IP 、 FTP 、 HTTP, …等等。
58
名詞補充解釋 (4/4) URL(Uniform Resource Locator)
在ＷＷＷ的世界裡，大家統一都用ＵＲＬ來說明地址。Ｕniform Ｒesource Ｌocator 中文翻成『一致資源定位器』。 ＵＲＬ格式分成兩部份，第一個部份用來指定存取方式，第二個部份用來指定位址，兩者之間以：//符號隔開。如下所示: scheme://host.domain[:port]/path/filenam 以下是一常見的ＵＲＬ格式。 ftp://nctuccca.nctu.edu.tw telnet://bbs.csie.nctu.edu.tw/ news:tw.bbs.comp.www
59
HTML 與網頁 謝謝捧場 http://www.csie.nctu.edu.tw/~tsaiwn/course/introcs/
Similar presentations
