What is the Internet

1
What is the Internet?

• Internet
• Interconnected network of computer networks
• ARPAnet
• Advanced Research Project Agency
• 1969 four computers connected
• Use of the Internet was originally limited to
  government, research and academic use
• 1991 Commercial ban lifted

2
Quick History

• Oct. 29, 1969 - The first message (the letters
  "l" and "o") is sent over ARPANET 2 host
  computers
• December 1969 - The University of Utah and
  University of California Santa Barbara now have
  ARPANET nodes, bringing the worldwide total to 4.
• 1970 - ARPANET has grown to 10 nodes and 19 host
  computers.
• 1977 - ARPANET grows to 111 hosts.
• 1982 - Transmission Control Protocol (TCP) and
  Internet Protocol (IP) established as system by
  which different networks can communicate. These
  linked networks come to be known as the internet.
• 1984 - ARPANET grows to 1,000 hosts.
• 1989 - the World Wide Web (WWW) is created by Tim
  Berners-Lee of the European Organization for
  Nuclear Research (CERN). There are 100,000
  internet hosts worldwide
• 1990 - ARPANET ceases to function, giving way to
  the internet.
• 1990 - Tim Berners-Lee authors Hypertext Transfer
  Protocol (HTTP) as well as the standard for
  Hypertext Markup Language (HTML).
• 1992 - The first audio and video are broadcast
  over the internet, which now has one million
  hosts.
• 1993 - There are 15 million people online
  worldwide
• 2002 - There are more than 150 million internet
  hosts and 840 million users worldwide
• 2005 - There are more than 353 million internet
  hosts worldwide

3
Why Has The Internet Grown So Fast

• Development of the World Wide Web (WWW) by Tim
  Berners-Lee at CERN
• Built on top of the Internet to make sharing
  information even easier
• Development of Mosaic, the first graphics-based
  web browser at NCSA
• This created an interface to the Web that was
  easy to use just point and click instead of
  remembering text commands.
• E-Commerce

4
HTML Web Pages

• The idea of the World Wide Web and HyperText
  Markup Language (HTML) was the brainchild of Tim
  Berners-Lee in the 1980s
• While working at the European Laboratory for
  Particle Physics (CERN), he saw that there was a
  need for CERN researchers all across Europe to
  share documents
• He came up with the idea of Web servers and using
  hypertext language
• In July 2004, he was knighted by Queen Elizabeth
  of England in recognition for his "services to
  the global development of the Internet" through
  his invention of the World Wide Web, a system to
  organize, link, and browse Internet pages.

5
The Future of the Web

• In Weaving the Web, the Web's creator speaks his
  mind about his invention how it evolved, what
  its untapped potential is, and what his own
  personal vision is for its future.
• His vision of the Web is something much more than
  a tool for research or communication it is a new
  way of thinking and a means to greater freedom
  and social growth than ever before possible.

6
HTML Web Pages

• A Web page is a text document that contains
  additional formatting information in the
  HyperText Markup Language (HTML)
• HTML specifies formatting within a page using
  tags
• in its simplest form, a tag is a word or symbol
  surrounded by brackets (ltgt)
• Heres one place of many that you learn more
  about using HTML with a tutorial
• http//www.w3schools.com/html/html_intro.asp

7
HTML Tags

• required tags in a Web page
• lthtmlgt and lt/htmlgt enclose the entire HTML
  document
• the HEAD section (enclosed between ltheadgt and
  lt/headgt) contains information that the browser
  uses to control the look of the page
• the HEAD can contain a title for the browser
  window, enclosed between lttitlegt and lt/titlegt
• the BODY section (enclosed between ltbodygt and
  lt/bodygt) contains the text that will appear in
  the page

8
HTML Tags
lthtmlgt lt!-- demo1.html Dave Reed --gt ltheadgt
lttitlegt Title of the Page lt/titlegt lt/headgt
ltbodygt Text that appears in the page.
lt/bodygt lt/htmlgt
9
HTML Elements

• tags and the text they enclose form an HTML
  element
• lttitlegt Title of the Page lt/titlegt is a TITLE
  element
• ltheadgt
• lttitlegt Title of the Page lt/titlegt
• lt/headgt
• is a HEAD element (which contains a nested
  TITLE element)

• most HTML elements have opening and closing tags,
  but not all
• lt!-- demo1.html Dave Reed --gt is a COMMENT
  element
• a comment is ignored by the browser (it is not
  displayed in the web browser)
• comments are used by the page developer to
  document page features

10
Text Layout

• white space (extra spaces, tabs and blank lines)
  are ignored by the browser
• this allows the browser to adjust the text to the
  window size
• you can control some of the text layout using
  HTML elements
• a PARAGRAPH element (ltpgtlt/pgt) specifies text
  surrounded by blank lines
• a BREAK element (ltbr /gt) causes text to be
  displayed on a new line
• the nbsp symbol forces a space to appear in the
  text

11
Text Layout
12
Headings Alignment

• in a large document, it is useful to divide the
  text into sections and then provide each with a
  heading describing the content that follows
• lth1gt lt/h1gt enclose a top-level heading (large
  and bold)
• lth2gt lt/h2gt enclose a sub-heading (slightly
  smaller and bold)
• . . .
• lth6gt lt/h6gt enclose the smallest sub-heading
• the HORIZONTAL-RULE element lthr /gt draws a
  dividing line in the page

13
Headings Alignment

• by default, headings and other elements are
  left-justified in the page
• can change the alignment of an element by adding
  a style attribute that qualifies the appearance
  of the element
• lth1 style"text-aligncenter"gt Centered Heading
  lt/h1gt
• ltp style"text-alignright"gt
• This paragraph is right justified. Each line
  will be shifted to line up at the right margin.
• lt/pgt

14
Headings Alignment

• the DIV element groups multiple elements, so can
  be formatted together

15
Font Formatting

• text can be formatted in a variety of ways
• bold (ltbgt lt/bgt),
• italics (ltigt lt/igt)
• underlined (ltugt lt/ugt)
• colored text is enclosed in
• ltspan style"color????"gt lt/spangt
• Where color can be any of the standard colors
• aqua, black, blue, fuchsia, gray, green, lime,
  maroon, navy, olive, purple, red, silver, teal,
  white, and yellow

16
Font Formatting
17
Hyperlinks

• a hyperlink, or just link, is a connection to
  another Web page
• by default, a link appears as underlined text in
  the page
• when the user clicks on the link, the
  corresponding page is retrieved and displayed
• a link is specified using ANCHOR tags ltagt and
  lt/agt
• text that appears within the tags is displayed as
  the link in the page
• must have an HREF attribute that specifies the
  associated Web address
• lta href"http//www.creighton.edu"gtCreighton
  Universitylt/agt
• lta href"personal.html"gtLocal Pagelt/agt
• note the browser displays links underlined and
  in color
• by default, links whose pages have not yet been
  visited are blue
• by default, links whose pages have previously
  been visited are purple

18
Hyperlinks
19
Images

• Web pages can contain other types of media
  besides text and links
• images are embedded in a page using an IMG tag (
  ltimg /gt )
• similar to ltbr /gt and lthr /gt, there is no closing
  tag so it ends with a slash
• IMG attributes
• SRC specifies the location of the image file
• ALT specifies alternate text that is displayed if
  the image fails to load

20
Images
21
Lists

• HTML lists organize items in sequence
• ltulgtlt/ulgt enclose an unordered list
• ltolgtlt/olgt enclose an ordered list
• ltligtlt/ligt enclose a list item

22
Lists
23
Lists

• a style attribute can be used to format the list
  elements

24
Lists
25
Setting the Webpage Background

• You can set the background color of your web page
  by including
• ltbody bgcolor colorgt
• ltHTMLgt
• ltHEADgt
• lt/HEADgt
• ltBODY bgcolor"aqua"gt
• lth1gt Here's a colorful backgroundlt/h1gt
• lt/BODYgt
• lt/HTMLgt

26
Setting the Webpage Background

• To set the background to a design
• First select the gif file that you like
• Checkout http//backgroundcity.com/
• Save the file to a directory. Its easiest to put
  it in the same directory as your html file
• Suppose you use a file named rainbow.gif
• Then include the following statement in your html
  file
• ltBODY BACKGROUNDrainbow.gif"gt

27
Setting the Webpage Background
ltHTMLgt ltHEADgt lt/HEADgt ltBODY background"rainbow.gi
f"gt lth1gt Here's a colorful backgroundlt/h1gt lt/BODYgt
lt/HTMLgt
28
Setting the Webpage Background

• Getting images from http/www.backgroundcity.com
• Select a category
• Decide which image you like
• Click once on the image and a new page will open
  showing the background on a full page
• Hit the right mouse button and select View
  Background Image
• A new page will open showing a small version of
  the image
• Do a right mouse click on the image and select
  Save Image As
• When the Save Image window pops up, save the
  image with any name you like in the same
  directory as the html file that will use it

29
Tables

• text can be aligned into rows and columns using a
  TABLE element
• lttablegt and lt/tablegt encapsulate the table data
• lttrgt and lt/trgt encapsulate a row within the table
• lttdgt and lt/tdgt encapsulate table data within a
  row (i.e., a column entry)

30
Tables with Borders

• borders can be added to tables using the border
  attribute
• the numeric value assigned to the attribute
  specifies thickness

31
Tables for Alignment

• tables are commonly used to align elements in the
  page
• here, an image is aligned to the left of some text

32
Designing Web Pages Using Tables

• Pick a layout for your website
• Keep it simple to avoid confusion to the person
  using it
• Then create a table with those sections
• Possible sections for the layout include
• Banner
• Links to navigate
• Main area with welcoming information

33
Designing Web Pages Using Tables
lthtmlgt lt!-- Using a table to help create a web
page ltheadgt lttitlegtWebpage Using a Table
lt/titlegt lt/headgt ltbodygt lttable border"0"
width"100"gt lttrgt lttd colspan"3"
bgcolor"blue"gtlth2gtltfont color"yellow"
size"5"gt ltcentergtWELCOME TO MY WEB
PAGElt/centergtlt/fontgtlt/h2gtlt/tdgt lt/trgt lttrgt
lttd width"20" valign"top"gt lta
href"http//www.brooklyn.cuny.edu"gtBrooklyn
Collegelt/agtltbr/gt lta href "http//www.cnn.com"
gtCNNlt/agtltbr/gt lta href "http//userhome.brookl
yn.cuny.edu/irudowsky"gtMy Home Pagelt/agtltbr/gt
lta href "http//bridges.brooklyn.cuny.edu"gtbridge
slt/agtltbr/gt lt/tdgt lttd width"10"gtnbsplt/tdgt
lttd gtltfont size"3" color"blue"
face"Verdana"gt ltimg src"rudowsky.jpg"gtltbr/gt
Prof. Ira Rudowsky ltbr/gt Brooklyn
Collegeltbr/gt 2900 Bedford Avenueltbr/gt
Brooklyn, NY 11220 lt/brgt lt/fontgt lt/tdgt
lt/trgt lt/tablegt lt/bodygt lt/htmlgt
34
Designing Web Pages Using Tables

• Web page with borders to show table outline

35
Designing Web Pages Using Tables

• Web page without borders

36
Using A Graphic As A Link

• I can change the code so that when I click on my
  picture I link to my Brooklyn College Home Page
• Note that there is a blue border around the
  picture similar to the links on the left

37
Heres the code
lthtmlgt lt!-- Using a table to help create a web
page This webpage uses my picture as a link
to my college web page --gt ltheadgt
lttitlegtWebpage Using a Table lt/titlegt
lt/headgt ltbodygt lttable border"1" width"100"gt
lttrgt lttd colspan"3" bgcolor"blue"gtlth2gtltfont
color"yellow" size"5"gt ltcentergtWELCOME TO
MY WEB PAGElt/centergtlt/fontgtlt/h2gtlt/tdgt lt/trgt
lttrgt lttd width"20" valign"top"gt lta
href"http//www.brooklyn.cuny.edu"gtBrooklyn
Collegelt/agtltbr/gt lta href "http//www.cnn.com"
gtCNNlt/agtltbr/gt lta href "http//userhome.brookl
yn.cuny.edu/irudowsky"gtMy Home Pagelt/agtltbr/gt
lta href "http//bridges.brooklyn.cuny.edu"gtbridge
slt/agtltbr/gt lt/tdgt lttd width"10"gtnbsplt/tdgt
lttd gtltfont size"3" color"blue"
face"Verdana"gt lta href "http//userhome.brook
lyn.cuny.edu/irudowsky"gt ltimg
src"rudowsky.jpg" alt"Click here for my BC
webpage"gtlt/agtltbr/gt Prof. Ira Rudowsky ltbr/gt
Brooklyn Collegeltbr/gt 2900 Bedford
Avenueltbr/gt Brooklyn, NY 11220 lt/brgt
lt/fontgt lt/tdgt lt/trgt lt/tablegt lt/bodygt
lt/htmlgt
38
Image Rollover

• You can display an image on the webpage but when
  you move you mouse over the image, it is replaced
  with another image
• When you move the mouse off the image the
  origianal image reappears
• This is called image rollover

39
Image Rollover
40
Image Rollover

• lthtmlgt
• lt!-- Using a table to help create a web page
• This webpage does image rollover with two
  images rudowsky.jpg and rudowsky2.jpg
• Note that I set the height and width so that
  both pictures take up the same amount of space
• --gt
• ltheadgt lttitlegtWebpage Using a Table lt/titlegt
  lt/headgt
• ltbodygt
• lttable border"1" width"100"gt
• lttrgt
• lttd colspan"3" bgcolor"blue"gtlth2gtltfont
  color"yellow" size"5"gt
• ltcentergtWELCOME TO MY WEB PAGElt/centergtlt/fontgt
  lt/h2gtlt/tdgt
• lt/trgt
• lttrgt
• lttd width"20" valign"top"gt
• lta href"http//www.brooklyn.cuny.edu"gtBrookly
  n Collegelt/agtltbr/gt
• lta href "http//www.cnn.com"gtCNNlt/agtltbr/gt
• lta href "http//userhome.brooklyn.cuny.edu/ir
  udowsky"gtMy Home Pagelt/agtltbr/gt
• lta href "http//bridges.brooklyn.cuny.edu"gtbr
  idgeslt/agtltbr/gt