Introduction to the Development of Personal Web Pages Speaker: Yao-Ting Huang Advisor: Kun-Mao Chao National Taiwan University Department of Computer Science & Information Engineering Algorithms and Computational Biology Lab. 2018/11/22
Introduction to Web Technologies World Wide Web (WWW) Integrate all the resources on the Internet and provide interfaces to be accessed through a Web browser. HyperText Markup Language (HTML) A kind of language that describes the components of a web page. Web server A kind of server that stores the resources (e.g., web pages) and can be accessed by the user. Web browser A kind of software that can download web pages from web server and display to the user (e.g., IE, Netscape). Uniform Resources Locator (URL) The address rule that describes the location of web resources. http://www.ntu.edu.tw/
Introduction to Web Technologies HyperText Transmission Protocol (HTTP) A network transmission protocol for the communication between the web server and web browser. Web browser Web server
The Tools You May Need FTP client: HTML editor: Telnet client: A kind of software for the connection to the FTP server. CuteFTP, LeapFTP, SmartFTP, etc. HTML editor: A kind of software for the development of web pages. FrontPage, Dreamwaver, etc. Telnet client: A text-mode software that can connect to a Telnet server. NetTerm, KKMAN, Windows Telnet, etc.
Introduction to HTML HTML is a kind of markup language It contains pairs of starting tags and end tags. Each tag may contain several attributes. <html> <head> <title>文件標題</title> : </head> <body Text = “#808080”> </body> </html> The starting tag Header Body The end tag
Introduction to HTML HTML tag:<HTML>…</HTML> Declare the beginning and end of this document. Head tag:<HEAD>…</HEAD> The header part of this document. Title tag:<TITLE>…</TITLE> The title of this page which will be displayed on top-left of the browser. Body tag:<BODY>…</BODY> Attributes Background figure:BACKGROUND=” URL of the figure” Background color:BGCOLOR=”#RRGGBB”,R、G、B=0~F Text Color:TEXT=”#RRGGBB”,R、G、B=0~F HyperLink Color:LINK=”#RRGGBB”,R、G、B=0~F
Introduction to HTML <HTML> <HEAD><TITLE>我是標題</TITLE></HEAD> <BODY TEXT="#808080" LINK="#008000" VLINK="blue" ALINK="yellow"> <Center>This is a test!!<br> <a href=http://www.ntu.edu.tw>to my homepage</a> </Center> </BODY> </HTML>
Introduction to HTML <HTML> <BODY> <CENTER> <FONT SIZE="1">一號字</FONT><BR> <FONT SIZE ="2">二號字</FONT><BR> <FONT SIZE ="3">三號字</FONT><BR> <FONT SIZE ="4">四號字</FONT><BR> <FONT SIZE ="5">五號字</FONT><BR> <FONT SIZE ="6">六號字</FONT><BR> <FONT SIZE ="7">七號字</FONT><BR> </CENTER> </BODY> </HTML>
Introduction to HTML <HTML> <head> <title>表格練習</title> </head> <BODY> <TABLE BORDER=5> <TR><TH>標題一</TH><TH>標題二</TH></TR> <TR><TD>第一格</TD><TD>第二格</TD></TR> <TR><TD>第三格</TD><TD>第四格</TD></TR> </TABLE> </BODY> </HTML>
Other Functions Other HTML tags Other advanced techniques Marquee, Frame, etc. Other advanced techniques Cascading Style Sheet (CSS) Java script Java Applet Flash PHP, ASP, JSP, etc.
Requirement 1. At least 5 web pages. 2. Your major, name, student ID. 3. Your autobiography. 4. Your picture. 5. Your email. 6. At least 5 hyperlinks. The grading will depend on how much efforts you spend on it.
Where to Store Your Web Pages Please use the web service provided by the NTU computer center. For the details, please refer to http://ccms.ntu.edu.tw/~jsc/ntucc/homepage/student-homepage.html Your URL will be like http://homepage.ntu.edu.tw/~b90123456 You have to use an FTP client to upload your web pages to the web server. Use the suggested FTP clients: SmartFTP or CuteFTP Pro. The TAs will check your URL by deadline 10/20.
Important Stuff Please email to TA 莊竣捷 by deadline 10/20 Email address: chemeng@ntu.edu.tw The email should contain subject formatted as CME_HOMEWORK_StudentID e.g., my student ID is b90123456, the email subject should be “CME_HOMEWORK_b90123456” The email content should be in the following format. Otherwise, TA won’t be able to receive your email and demo. 姓名: 黃小明 學號: b90123456 網址: http://homepage.ntu.edu.tw/~b90123456
References Google is your best TA 網頁製作教學 HTML教學目錄 FrontPage 教學 http://www.google.com 網頁製作教學 http://content1.edu.tw/publish/jackson/material/593084/webpg1203/ HTML教學目錄 http://www.csie.nctu.edu.tw/~jglee/teacher/content.htm FrontPage 教學 http://www.twbts.com/frontpage/
Outline of the Following Lecture Introduction to the usage of FrontPage. Build a simple web page by FrontPage. Upload the web page to the web server via an FTP client.