EECC200 Fall 2001

1

• EECC200 Fall 2001
• Course Home Page
• http//www.rit.edu/meseec/eecc200-fall2001
• Importance of computer networks and applications.
• A brief history overview of the Internet.
• Introduction to the language of the Web HTML
• Basic document structure.
• Important HTML tags.
• Examples.
• How to put your home page files on Grace.
• Assignment Create your own WWW home page, due
  11/7.

2
Computer Networks

• A computer network is an interconnected
  collection of computers able to exchange
  information.
• A computer network usually require users to
• Explicitly login onto one machine,
• Explicitly submit information requests to remote
  computers,
• Explicitly move files/data around the network.

3
Motivation for Computer Network Applications

• Motivation for business network applications
• Resource sharing Data, programs, equipment are
  available to users regardless of their physical
  location.
• High reliability Files and databases could be
  duplicated on multiple machines. Multiple CPUs
  prevent total system loss.
• Economically sound Networked micro computers
  using the client-server model offer better
  price/performance ratio than mainframes.
• Motivation for personal network applications
• Access to remote information Financial
  information, database access, the Web,
  newsgroups.
• Person to person communication Email, voice,
  videoconferencing.
• Interactive entertainment Video on demand,
  interactive TV, and networked games.

4
The Client-Server Model
Web server, etc.
FTP web browser etc
5
The Internet

• Evolved from the ARPANET (the Advanced Research
  Projects Agency Network), a project funded by The
  U.S. Department of Defense (DOD) in 1969.
• ARPANET's purpose was to provide the U.S. Defense
  Network (DDN) with redundant links between its
  sites and the Pentagon, relying on intelligent
  data packets that could automatically route
  themselves around failed network routers and
  links.
• During the 1970s, the ARPANET gradually
  transformed and expanded into the current
  Internet as new protocols and technologies became
  available, and as additional defense, research,
  scientific, commercial and development
  organizations were added to the network.
• At the network layer level
• The Internet is a global collection of
  networks held together by a common main network
  layer protocol IP (Internet Protocol).

6
Origin of the Internet Growth of ARPANET
July 1970
March 1971
Dec. 1969
April 1972
Sept. 1972
7
The Interconnection Structure of The Internet
8
Network Applications Application Layer Protocols

• The development of numerous network applications
  and the associated application-layer protocols
  has been a major driving force for computer
  network advancements over the past 30 years.
• The range of such diverse applications include
• Text-based applications such as telnet,
  electronic mail, file transfer, newsgroups, most
  popular in the 70s-80s.
• More recent graphics- and multimedia-based
  applications such as the World Wide Web, WWW (the
  Internets killer-app), Internet telephony,
  video conferencing, and streaming audio/video on
  demand, and interactive games.

9
The World Wide Web (WWW) HyperText Transfer
Protocol (HTTP)

• The WWW was practically invented at CERN by Tim
  Berners-Lee and associates in 1989-1991 when
  initial versions of HTML, HTTP, a Web server and
  a crude text-based browser (Web client) were
  developed.
• Marc Andreeseen, who helped to develop the
  popular GUI browser Mosaic for X at The National
  Center for Supercomputing Applications (NCSA),
  released an alpha version of his browser in 1993,
  and in 1994 formed Mosaic Communications which
  later became Netscape.
• The Hypertext Transfer Protocol (HTTP) the Web's
  main application-layer protocol although current
  browsers can access other types of servers.
• As are most application-layer protocols, HTTP is
  implemented in two programs a client program
  Web browser and server program Web server that
  talk to each other by exchanging HTTP messages.

10
Components of The Web Model
HTML Document
HTTP HTML Web Servers Web Clients
Web Clients
Web Server
e.g. jasmine.isc.rit.edu8000 Web server
running on non-standard port
11
Uniform Resource Locators (URLs)

• Web browsers may utilize several high level
  protocols to request data from a variety of
  servers in addition to HTTP servers.
• A uniform source locator (URL) specifies the
  following
• Protocol used.
• Host name, alias, or IP address.
• Port number (if different from the default
  protocol port).
• Path to data requested.
• Resource requested (usually a file name).
• A few types of URLs
• http http//hostnameport/path/res
  ource
• e.g. http//www.rit.edu/meseec/
  eecc200-fall2001/200-9-19-2001.ppt
• FTP ftp//hostnameport/path/file
  e.g. ftp//beast.isc.rit.edu25
• Local file file///path/file
  e.g. file///my_files/file1.tx
  t
• Telnet telnet//hostnameport
  e.g. telnet// jasmine.isc.rit.edu
• gopher gopher//hostname/path/
• news news//hostnameport
  

12
The World Wide Web (WWW) Language HyperText
Markup Language (HTML)

• HTML is a collection of instructions (markup
  tags) that define the various components
  (elements) and format of a WWW document.
• An element is a component of the structure of a
  text document. e.g. heads, paragraphs, links,
  images, tables, lists etc.
• HTML documents are ASCII files that conform to
  HTML specifications (with the extenstion .htm
  or .html).
• Usual start HTML document naming index.html
• In UNIX, HTML documents must have read
  permission by all to be accessed by a Web server
  (e.g chmod 644 file.html).
• Directories containing HTML documents accessed by
  a Web server must readable and executable by all
  (e.g in UNIX chmod 755 www)
• HTML is interpreted by Web browsers to view the
  formatted document.

13
HTML Tags and Elements

• An HTML tag denotes or marks an element of the
  document.
• HTML tags are not case-sensitive
• HTML tags take the form
• ltTAG_NAMEgt
• Most tags apply to a block of text in the
  document and must have a start tag and an end
  tag
• ltTAG_NAMEgt .... block of text ... lt/TAG_NAMEgt

14
HTML Document Structure and Required Tags

• Every HTML document usually has the following
  structure
• ltHTMLgt
• ltHEADgt
• ltTITLEgt
• Document Title Goes Here
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ...
• The content of the document goes here
• .......
• lt/BODYgt
• lt/HTMLgt

15
Required HTML Structure Tags

• ltHTMLgt .... lt/HTMLgt
• Tells the browser that the file is HTML-coded
• ltHEADgt .. lt/HEADgt
• Identifies the part of the document that contains
  the title.
• ltTITLEgt . lt/TITLEgt
• Contains the document title usually displayed at
  the top of
• the browser window
• ltBODYgt .... lt/BODYgt
• Contains the content of the document

16
The Hyper-link or Anchor Tag ltAgt . lt/Agt

• Indicates the start/destination of a hyper-link
• Indicates that the text between ltA ..gt and
  lt/Agt is HyperText
• The tag takes the form
• ltA HREF"URL"gt HyperText lt/Agt
• Example
• ltA HREF"http//dumbo.isc.rit.edu/"gt
  Computer Engineering Home
  Page lt/Agt
• Clicking on the HyperText
• Computer Engineering Home Page
• takes the user to the URL
• http//dumbo.isc.rit.edu/

17
Character Block Formatting Tags

• Headings
• ltH1gt ltH2gt ltH3gt ltH4gt ltH5gt ltH6gt Larger
• ltH1gt ... Heading Text ... lt/H1gt
• H1 Heading
• H2 Heading
• H3 Heading
• H4 Heading
• H5 Heading
• H6 Heading

18
Character Block Formatting Tags

• Center
• ltCENTERgt ... Centered Text ... lt/CENTERgt
• Paragraph (line break and blank line)
• ltPgt ... Paragraph Text ...
• Forced Line Break ltBRgt
• Bold Face ltBgt ... Bold Face
  Text lt/Bgt
• Italic ltIgt ... Italic Text
  lt/Igt
• Typewriter ltTTgt ... Fixed-Width
  Font lt/TTgt
• Pre-formatted text
• ltPREgt ... Text to appear
  exactly as typed lt/PREgt

19
Character Block Formatting Tags

• List Tags
• Ordered List
• ltOLgt ltLIgt First Item ltLIgt Second Item
  .... ltLIgt Last Item
• lt/OLgt
• Unordered List
• ltULgt ltLIgt First Item ltLIgt Second Item
  ....
• lt/ULgt

1. First Item 2. Second Item ..

• First Item
• Second Item
• ..

20
Horizontal Ruler Tag ltHRgt

• Horizontal rulers of varying lengths and widths
  create visual and logical breaks in a page. They
  are made with the ltHGgt
• Examples
• ltHRgt thin line that goes across the page
• ltHR size5gt line across the page with width size
  5
• ltHR size5 width 75gt line 75 across the page
  with width size 5
• ltHR size15 width65 aligncentergt line 65
  across the page, centered with width size 15
• ltHR noshadegt solid black line across the page

21
Text and Background Colors

• Text and background colors are specified in HTML
  documents using ltBODYgt tag attributes
• ltBODY BGCOLOR"rrggbb" TEXTrrggbb
  LINK"rrggbb" VLINK"rrggbb" ALINK"rrggbb"gt
• Content of the document
• lt/BODYgt
• BGCOLOR background color
• TEXT color of regular text
• LINK color of unvisited links
• VLINK color of visited links
• ALINK color of active links
• rrggbb red-green-blue hexadecimal color triplet
• A GIF or JPEG file can also be used as a document
  background using the ltBODYgt attribute BACKGROUND
• ltBODY BACKGROUND"file.GIF"gt

22
Text Font/Size/Color ltFONTgt Tag

• The color and size of regular text in the
  document is specified by using the size and color
  attributes of the ltFONTgt tag
• e.g. ltFONT size2 colorff0000gt
• This is red text and is two
• sizes larger than default size
  lt/FONTgt
• Where the default size is usually 3

23
Example 1

• ltHTMLgt
• ltHEADgt
• ltTITLEgtEECC 200 Introduction to Computer
  Engineering Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODY BACKGROUND"whitepaper.gif" BGCOLORFFFFFF
  LINK0000FF VLINKFF0000 TEXT000000gt
• ltCENTERgt
• ltH2gtEECC 200 Introduction to Computer Engineering
  ltPgt
• Course Outline ltBRgt
• Fall Quarter, 1999
• lt/H2gt ltH3gt
• Department of Computer Engineering ltBRgt
• ltA HREF"http//www.rit.edu/"gt Rochester
  Institute of Technology lt/Agt ltBRgt
• Voice [phone] ltBRgt
• FAX [phone] ltPgt
• ltHR SIZE6 WIDTH30gt ltPgt
• ltA HREF"http//dumbo.isc.rit.edu/faculty/hsu.htm
  l"gt Dr. Kenneth W. Hsu lt/AgtltBRgt
• E-mail ltA HREF"mailtokwheec_at_rit.edu"gt ltIgt
  kwheec_at_rit.edu lt/Igt lt/Agt
• lt/H3gt ltH4gt

http//www.rit.edu/meseec/eecc200-fall99/ce1.html
24
(No Transcript)
25
ltCENTERgt ltH2gt
ltPgt
ltBRgt
lt/H2gt ltH3gt
lt/Agt
ltA HREF"http//www..."gt
ltPgt
ltHR SIZE6 WIDTH30gt
ltA HREF"http//www.."gt
lt/H3gt ltH3gt
lt/CENTERgt ltBgt
http//meseec.ce.rit.edu/eecc200-fall2000/ce1.html
26
Images in HTML Documents ltIMGgt Tag

• The ltIMGgt tag can take the following
  attributes
• SRC
  
  specifies the image file to be displayed ltIMG
• e.g. lt IMG
  SRC"file_name.jpggt
• ALT Specifies text used be instead of the image
• e.g. lt IMG SRC"file_name.jpg
  ALTImage Namegt
• BORDER Specifies the image border
• HSCAPE Space to the left and right of the image
• VSPACE Vertical space above and below the image

27
Image Alignment ltIMG ALIGN..gt

• align text to top of
  image
• Tagltimg aligntop src"construction.gif"
  alt"Page Under Construction"gtalign text to top
  of image
• align text to
  middle of image
• Tagltimg alignmiddle src"construction.gif"
  alt"Page Under Construction"gtalign text to
  middle of image
• align text to bottom of image
• Tagltimg alignbottom src"construction.gif"
  alt"Page Under Construction"gtalign text to
  bottom of image

28
Example 2 Adding Images

• ltHTMLgt
• ltHEADgt
• ltTITLEgtEECC 200 Introduction to Computer
  Engineering Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODY BACKGROUND"whitepaper.gif" BGCOLORFFFFFF
  LINK0000FF VLINKFF0000 TEXT000000gt
• ltCENTERgt
• ltH2gtEECC 200 Introduction to Computer Engineering
  ltPgt
• Course Outline ltBRgt Fall Quarter, 1999
• lt/H2gt
• ltH3gt
• ltA HREF"http//dumbo.isc.rit.edu/"gt ltIMG
  SRC"rit_ce.jpg" BORDER0gtltBRgt
• Department of Computer EngineeringltBRgt
• ltA HREF"http//www.rit.edu/"gt Rochester
  Institute of Technology lt/Agt ltBRgt
• Voice [phone] ltBRgt FAX [phone]
  ltPgt
• ltHR SIZE6 WIDTH30gt ltPgt
• ltA HREF"http//dumbo.isc.rit.edu/faculty/hsu.htm
  l"gt Dr. Kenneth W. Hsu
• ltIMG SRChsu.jpg ALIGNMIDDLE BORDER0gt lt/Agt
  ltBRgt
• E-mail ltA HREF"mailtokwheec_at_rit.edu"gt ltIgt
  kwheec_at_rit.edu lt/Igt lt/Agt
• lt/H3gt

http//meseec.ce.rit.edu/eecc200-fall2000/ce2.html
29
ltA HREF"http..gt
ltIMG SRC"rit_ce.jpg" BORDER0gtltBRgt
lt/Agt
ltIMG SRChsu.jpg ALIGNMIDDLE BORDER0gt
lt/Agt
ltA HREF"http//dumbo..
http//www.rit.edu/meseec/eecc200-fall99/ce2.html
30
Example 3 Unordered List

• . The objectives of
• this course are to introduce the Computer
  Engineering students to
• ltULgt
• ltLIgt Build a personal web page for personal
  electronic communications
• ltLIgt Do time management and use a time planner
  effectively
• ltLIgt Study engineering Ethics
• ltLIgt Study logic circuits and their simulation
• ltLIgt Learn Power Point, Excel, and MS Words
  (Students get helps CBT, and Mentors)
• ltLIgtBuild team work through fun Red Barn
  experience
• ltLIgt Tour of Computer Engineering labs Computer
  Architecture lab, Real time
• lab, DCO lab, and VLSI lab
• ltLIgt Seek help from Mentors in studying CS1 and
  Calculus
• ltLIgt Understand the computer engineering and the
  curriculum
• ltLIgt Learn about career opportunities through the
  presentation by a distinguished alumnus.
• who will inspire the freshmen to see their
  future career, as well as coop experience
• ltLIgt Write an essay about a famous person in the
  computing history.
• lt/ULgt

http//meseec.ce.rit.edu/eecc200-fall2000/ce3.html
31
ltULgt
ltLIgt
lt/ULgt
http//meseec.ce.rit.edu/eecc200-fall2000/ce3.html
32
Example 4 Ordered List

• ltPgt
• ltH3gt Textbook Nonelt/H3gt
• ltH3gt Reference Bookslt/H3gt
• The following books are placed in the two-hour
  reserve in the RIT Wallace Memorial Library
• for your use.
• ltOLgt
• ltLIgt Mark W. Greenia, History of
  Computing/Computers and Computing A Chronology
  of the People and Machines That Made Computer
  History, Lecikon Services, 1992
• ltLIgt Paul E. Ceruzzi, A History of Modern
  Computing, the MIT Press, 1998
• ltLIgt Jeffrey Hsu and Joseph Kusnan, The Fifth
  Generation, Windcrest Books, 1989
• ltLIgt Malcolm J. Shute, Fifth Generation Wafer
  Architecture, Prentice Hall, 1988
• ltLIgt Alan W. Biermann, Great Ideas in Computer
  Science, (2nd ed.), the MIT Press, 1997
• ltLIgt Stephen G. Nash (ed.), A History of
  Scientific Computing, ACM Press, and
  Addison-Wesley Publishing, 1990.
• ltLIgt Adele Goldberg (ed.), A History of
  Workstations, ACM Press, and Addison-Wesley
  Publishing, 1988.
• ltLIgt Edward Yourdon, Decline Fall of the
  American Programmer,Yourdon Press, 1992
• lt/OLgt

http//meseec.ce.rit.edu/eecc200-fall2000/ce4.html
33
ltOLgt
ltLIgt
lt/ULgt
http//meseec.ce.rit.edu/eecc200-fall2000/ce4.html
34
Basic Table Tags

• ltTABLEgt lt/TABLEgt Start and end of table
• ltTRgt lt/TRgt
• Table Row includes a number of TD cell tags
  that are in the same row
• ltTDgt lt/TDgt
• Table Data cell creates a data cell or
  table entry.
• Example A basic 2x2 table

ltTABLE BORDERgt ltTRgt
ltTDgtAlt/TDgt ltTDgtBlt/TDgt
lt/TRgt ltTRgt ltTDgtClt/TDgt
ltTDgtDlt/TDgt lt/TRgt lt/TABLEgt
Note The BORDER attribute in ltTABLEgt
makes the table visible. Without it the table
borders are invisible
35
Example 5 Tables
ltTDgt A list of faculty and staffltBRgt Form a
team of twoltBRgt Time plannerltBRgt One page on a
key eventltBRgt (Due 10/3) lt/TDgt ltTRgt ltTDgt
Week 2 (9/19) lt/TDgt ltTDgt Dr. Shaaban
lt/TDgt ltTDgt Web Page HTML Basics lt/TDgt ltTDgt
Build a personal web page lt/TDgt lt/TABLEgt

• ltTABLE BORDER2 cellspacing2 cellpadding4gt
• ltTRgt
• ltTDgt ltBgt Date lt/TDgt
• ltTDgt ltBgt Presentor(s) lt/TDgt
• ltTDgt ltBgtLecture Topic lt/TDgt
• ltTDgt ltBgtAssignment lt/TDgt
• ltTRgt
• ltTDgt Week 1 (9/12) lt/TDgt
• ltTDgt Dr. Hsu lt/TDgt
• ltTDgt
• Introduction of faculty members,ltBRgt
• Objectives of the course,ltBRgt
• Study Partners (two)ltBRgt
• Time ManagementltBRgt
• Computing History writingltBRgt
• By two co-authors
• lt/TDgt

36
ltTABLE BORDER2 cellspacing2 cellpadding4gt ltTRgt
ltTDgt
lt/TDgt
ltTRgt
ltTDgt
ltTDgt
lt/TDgt
lt/TDgt
ltTRgt
ltTDgt
lt/TDgt
lt/TABLEgt
37
Putting Your Web Page Online Using The RIT DCE
(grace) Account

• Step 1 Setting permissions to make files world
  readable
• 1. Run Telnet (Open connection Host
  grace.rit.edu) or on a terminal at the Localgtc
  grace, or connect to the VAX as usual and telnet
  grace.rit.edu from the .
• 2. Login with your DCE username and password to
  grace. Note ofw will only work on grace. On
  other UNIX machines you must set UNIX
  protections.
• 3. If this is the first time into your grace
  account, type mkdir www at the
• 4. Type ofw at the prompt to get a prompt
• 5. This will open your account for WEB access
• Is this what you want to do? y,n Type the
  letter y
• 6. If you do not get the open for web prompt
  type /usr/local/bin/ofw at the .
• Step 2 Moving files (HTML, images etc.) to
  your account in the directory
• www using FTP if needed.
• (consult RIT Start Page http//wally.rit.edu/pub
  s/starts/isc/personal-home-page.html
• for more information and detailed instructions
  on using FTP)

38
Assignment Create Your Own
Home Page Due November 7th.

• Include the following in your home page on grace
• Your photo.
• Information about yourself.
• The current courses you are currently taking with
  details of each course.
• Some of your favorite web links.
• An initial short version of your resume.
• Resume Writing at RIT Co-Op Career Services
• http//www.rit.edu/964www/student/JobSearchIn
  fo/ResumeContent.htm
• Use a standard file name for your main page
  (i.e. index.html).
• This page must be completed and accessible at
• http//www.rit.edu/your_user
  _name/

39
Useful Links

• Department of Computer Engineering Home Page
• http//www.ce.rit.edu/
• NCSAs Beginner's Guide to HTML
• http//www.ncsa.uiuc.edu/General/Internet/WWW/HTML
  PrimerAll.html
• RIT Web developer's page
• http//wally.rit.edu/instruction/web/
• RIT Learning HTML by the Tags Tutorial
• http//wally.rit.edu/instruction/web/htmltags/tu
  torial.html
• Instructions for Publishing your RIT web page
• http//wally.rit.edu/instruction/web/drw3/permissi
  ons.html