Introduction to the Development of Personal Web Pages

1
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.
2
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/

3
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
4
The Tools You May Need

• FTP 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.

5
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.

lthtmlgt ltheadgt lttitlegt????lt/titlegt
lt/headgt ltbody Text 808080gt
lt/bodygt lt/htmlgt
The starting tag
Header
Body
The end tag
6
Introduction to HTML

• HTML tagltHTMLgtlt/HTMLgt
• Declare the beginning and end of this document.
• Head tagltHEADgtlt/HEADgt
• The header part of this document.
• Title tagltTITLEgtlt/TITLEgt
• The title of this page which will be displayed on
  top-left of the browser.
• Body tagltBODYgtlt/BODYgt
• Attributes
• Background figureBACKGROUND URL of the figure
• Background colorBGCOLORRRGGBB,R?G?B0F
• Text ColorTEXTRRGGBB,R?G?B0F
• HyperLink ColorLINKRRGGBB,R?G?B0F

7
Introduction to HTML

• ltHTMLgt
• ltHEADgtltTITLEgt????lt/TITLEgtlt/HEADgt
• ltBODY TEXT"808080" LINK"008000" VLINK"blue"
  ALINK"yellow"gt
• ltCentergtThis is a test!!ltbrgt
• lta hrefhttp//www.ntu.edu.twgtto my homepagelt/agt
• lt/Centergt
• lt/BODYgt
• lt/HTMLgt

8
Introduction to HTML

• ltHTMLgt
• ltBODYgt
• ltCENTERgt
• ltFONT SIZE"1"gt???lt/FONTgtltBRgt
• ltFONT SIZE "2"gt???lt/FONTgtltBRgt
• ltFONT SIZE "3"gt???lt/FONTgtltBRgt
• ltFONT SIZE "4"gt???lt/FONTgtltBRgt
• ltFONT SIZE "5"gt???lt/FONTgtltBRgt
• ltFONT SIZE "6"gt???lt/FONTgtltBRgt
• ltFONT SIZE "7"gt???lt/FONTgtltBRgt
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

9
Introduction to HTML

• ltHTMLgt
• ltheadgt
• lttitlegt????lt/titlegt
• lt/headgt
• ltBODYgt
• ltTABLE BORDER5gtltTRgtltTHgt???lt/THgtltTHgt???lt/THgtlt/TRgt
  ltTRgtltTDgt???lt/TDgtltTDgt???lt/TDgtlt/TRgtltTRgtltTDgt???lt/TD
  gtltTDgt???lt/TDgtlt/TRgtlt/TABLEgt
• lt/BODYgt
• lt/HTMLgt

10
Other Functions

• Other HTML tags
• Marquee, Frame, etc.
• Other advanced techniques
• Cascading Style Sheet (CSS)
• Java script
• Java Applet
• Flash
• PHP, ASP, JSP, etc.

11
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.

12
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.

13
Important Stuff

• Please email to TA ??? by deadline 10/20
• Email address chemeng_at_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 wont be able to receive your email
  and demo.

?? ??? ?? b90123456 ?? http//homepage.ntu.edu.
tw/b90123456
14
References

• Google is your best TA
• http//www.google.com
• ??????
• http//content1.edu.tw/publish/jackson/material/59
  3084/webpg1203/
• HTML????
• http//www.csie.nctu.edu.tw/jglee/teacher/content
  .htm
• FrontPage ??
• http//www.twbts.com/frontpage/

15
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.