What Is the Internet

1
What Is the Internet?

• The Internet is a worldwide collection of
  computer networks that links together millions of
  computers used by businesses, the government,
  educational institutions, organizations, and
  individuals using modems, telephone lines,
  television cables, and other communications
  devices and media
• A network is a group of two or more computers
  that are connected together to share resources
  and information
• The Internet backbone is a collection of
  high-speed data lines that connect major computer
  systems located around the world
• An Internet Service Provider (ISP) is a company
  that has a permanent connection to the Internet
  backbone

2
What Is the Internet?
3
What is the World Wide Web?

• The World Wide Web, also called the Web, is the
  part of the Internet that supports multimedia and
  consists of a collection of linked documents
• Hypertext Transfer Protocol (HTTP) is a set of
  rules for exchanging text, graphics, sound, and
  other multimedia files
• Web pages are pages of information on the Web
• A Web site is a related collection of Web pages
• A home page is the first document users see when
  they access a Web site

4
What is the World Wide Web?
5
Web Servers

• Web pages are stored on a Web server, or host,
  which is a computer that stores and sends
  (serves) requested Web pages and other files
• Publishing is copying Web pages and other files
  to a Web server

6
Web Browsers

• A Web browser, also called a browser, is a
  program that interprets and displays Web pages
  and enables you to view and interact with a Web
  page
• Firefox Mozilla (formerly Netscape Navigator)
• Microsoft Internet Explorer
• A Uniform Resource Locator (URL) is the address
  of a document or other file accessible on the
  Internet
• http//www.scsite.com/html3e/index.htm
• Web addresses begin with http//
• A hyperlink, also called a link, is an element
  used to connect one Web page to another

7
What is Hypertext Markup Language (HTML)?

• Web pages are created using Hypertext Markup
  Language (HTML), which is the authoring language
  used to create documents on the World Wide Web
• HTML uses a set of special instructions called
  tags or markup to define the structure and layout
  of a Web document and specify how the page is
  displayed in a browser
• HTML is platform independent, meaning you can
  create, or code, an HTML file on one type of
  computer and then use a browser on another type
  of computer to view that file as a Web page

8
What is Hypertext Markup Language (HTML)?
HTML written in Notepad text editor
Same HTML as displayed in web browser
9
What is Hypertext Markup Language (HTML)?

• Is the language used to write web pages
• Describes the structure of a document
• Defines a set of common styles
• Defines character styles
• Each element has a name
• Each element is contained in a tag.
• Label the different elements of your page with
  tags that say this is a heading or this is a
  list.

10
HTML (generally) does not define page layout
(appearance)

• HTML describes only basics about how a page looks
  on screen.
• The browser has settings for actual styles on the
  screen.
• Different browsers have different settings.
• The user can apply their own settings.

11
Writing an HTML Document

• Writing in a markup language means that you
• start with the text/content
• then add special tags around words and
  paragraphs.
• HTML has a defined set of tags to use.
• Browsers have proprietary tags
• blink (Firefox, Netscape) very annoying!
• marquee (IE) not used much

12
Adding in HTML Tags

• HTML tags are a little like the codes which you
  can view in a WordPerfect document
• Reveal Codes is a command unique to
  WordPerfect.
• When you view the codes, then the structure and
  formatting controls on the page are made visible
  in a special window

13
Reveal Codes in WordPerfect
14
This document . . .
15
. . . has these codes
16
And this WordPerfect document . . .
17
. . . has these codes
18
HTML Tags

• Just as WordPerfect adds in these codes, we
  will type in HTML tags to structure our pages and
  to add formatting (color, underscore,
  italicization) and images to pages.

19
How do we write HTML documents?

• We will not need any special software (although
  WordPerfect and Word, and many other programs can
  create web pages).
• We will use only Notepad on PCs to
• write our documents, and to
• add HTML mark-up tags into the document

20
Tools for Creating HTML Documents

• We will use only two tools in this class to write
  our HTML documents
• Our text editor will be Notepad
• Our tool for viewing the web pages we have
  written is a web browser
• I will be using the Firefox browser during class,
  and so recommend you use it too in order to avoid
  confusion
• You may use Microsofts Internet Explorer, or any
  other browser, outside of class
• You do not need a connection to the Internet to
  write web pages!

21
Tools for Creating HTML Documents

• A text editor is a program that allows a user to
  enter, change, save, and print text, such as HTML
• A text editor permits almost no formatting of
  text, that is, adding bolding, color,
  underscoring or use of different fonts
• An HTML editor is a program that provides basic
  text-editing functions, as well as more advanced
  features, such as color-coding for various HTML
  tags, menus to insert HTML tags, and spell
  checkers
• A WYSIWYG editor is a program that provides a
  graphical user interface that allows a developer
  to preview the Web page during its development

22
Step 1 Open Notepad
23
Step 2 Type in Notepad

• lthtmlgt
• ltheadgt
• lttitlegtTemplatelt/titlegt
• lt/headgt
• ltbodygt
• lth1gtThis is an HTML Documentlt/h1gt
• lt/bodygt
• lt/htmlgt

24
Step 3 Save the File

• File extension (be consistent)
• .htm
• .html
• Example template.htm
• Use short, descriptive names
• Preferably lt 15 characters
• No spaces or special characters
• Use letters and numbers
• Start with letter
• Use underscore _ instead of a space

25
Step 4 View the Document

• Launch the Web browser
• From the menu bar, select File gt Open Page (or
  similar command) and navigate to the folder
  containing the file saved from Notepad
• Click Open and view

26
Step 5 If you page didnt work!

• Check your code
• Check that opening and closing tags are present
• If the source code appears in the browser window,
  make sure the file was saved with the .htm or
  .html extension.
• After making corrections, save the file, and try
  viewing it again.

27
Tag Summary HTML lthtmlgt lt/htmlgt Head
ltheadgt lt/headgt Title lttitlegt lt/titlegt Body
ltbodygt lt/bodygt Paragraph ltpgt lt/pgt Line
Break ltbr /gt Horizontal Rule lthr
/gt Headings lth1gt. . .lt/h1gt lth2gt. .
.lt/h2gt lth3gt . . .lt/h3gt lth4gt. .
.lt/h4gt lth5gt . . .lt/h5gt lth6gt. . .lt/h6gt
28
The lthtmlgt Tag

• The lthtmlgt tag is a paired tag
• It indicates that the content of this file is in
  the HTML language.
• All the text and all other HTML tags and commands
  should be placed within beginning and ending html
  tags.
• Example
• lthtmlgt
• ...Web page...
• lt/htmlgt

29
The ltheadgt Tag

• The ltheadgt tag is a paired tag
• It specifies that the lines within the beginning
  and ending tag are prologue to the rest of the
  file.
• Only a few tags go into the ltheadgt portion (for
  example, lttitlegt ).
• You should never put any of the text of your page
  head section.
• In other words, anything which you want to appear
  in the main window of the browser should not be
  placed up in the head section.

30
The lttitlegt Tag

• The lttitlegt tag is paired
• It is placed inside the ltheadgt tags
• The contents of the title tag are displayed in
  the blue stripe at the top of the browser window
• So you may have only one title per page

31
Example with lttitlegt Tag

• lthtmlgt
• ltheadgt
• lttitlegtMy First Pagelt/titlegt
• lt/headgt
• lt/htmlgt

32
The lttitlegt Tag

• Indicates what your Web page is about.
• Used by
• the browsers bookmarks or favorites
• And by Search Engines
• Browsers put the title in the title bar of the
  browser window.

33
The lttitlegt Tag

• Only plain text can be displayed in the title
  bar we cannot format this text in any way
• Choose a title that is short yet descriptive

34
The ltbodygt Tag

• The ltbodygt tag is paired
• Contains everything you want to display in the
  browser window
• Text
• Images
• Lists
• Tables

35
Example with the ltbodygt Tag

• lthtmlgt
• ltheadgt
• lttitlegtMy First Pagelt/titlegt
• lt/headgt
• ltbodygt
• This is my first web page!
• lt/bodygt
• lt/htmlgt

36
Headings lth1gtlt/h1gt

• There are six different heading tags, and they
  are all paired
• lth1gtlt/h1gt
• lth2gtlt/h2gt
• lth3gtlt/h3gt
• lth4gtlt/h4gt
• lth5gtlt/h5
• lth6gtlt/h6gt

37
Headings lth1gtlt/h1gt

• Headings are used to highlight certain text
  within a long document
• HTML defines six levels of headings
• h1 (largest) to h6 (smallest)
• The contents of a heading may be any length
• But note the purpose of headings is to set off a
  short block of text from surrouding text
• More than one line long? Is it a paragraph?
  Better not use a heading tag!

38

• lthtmlgt
• ltheadgt
• lttitlegtMy First Pagelt/titlegt
• lt/headgt
• ltbodygt
• lth1gtState of the Union Speechlt/h1gt
• This draft of the State of the Union speech
• delivered by Pres. Geo. W. Bush on . . .
• lth2gtAll 131 Students awarded cars of
• their choicelt/h2gt
• Bob, James, Jan, Janice, Nisarg, Ruth
• lth3gtDomestic Carslt/h3gt
• Buick, Cadillac, Hummer, Isuzu, Lexus, .
  . .
• lth3gtForeign Carslt/h3gt
• Mercedes, Lamborghini, Rolls-Royce, . . .
• lt/bodygt
• lt/htmlgt

39
Example with Heading Tags
h1
h2
h3
h3
40
The ltpgt Tag

• The ltpgt tag is paired
• This tag introduces a new paragraph
• Browsers will forgive you if you omit the
  closing tag but I wont! Omitting the closing p
  tag (lt/pgt) is sloppy!
• We need a ltpgt tag because text that is not in any
  HTML tag is simply dumped on to browser window
  without any spacing.

41
The ltpgt Tag

• We need a ltpgt tag because text that is not in any
  HTML tag is simply dumped on to browser window
  without any spacing.

42
Example without the ltpgt Tag

• lthtmlgt
• ltheadgt
• lttitlegtText with no p tagslt/titlegt
• lt/headgt
• ltbodygt
• Lorem ipsum dolor sit amet . . .
• Sed ut perspiciatis unde omnis. . .
• Lorem ipsum dolor sit amet . . .
• Sed ut perspiciatis unde omnis. . .
• lt/bodygt
• lt/htmlgt

43
Example without the ltpgt Tag
What happened to the nice paragraphing in our
HTML code??
44
Example without the ltpgt Tag

• The answer is it was ignored!
• The browser ignores all white space other than
  1 blank space.
• White space is empty spaces, empty lines, tab
  indentations and the like
• Thus the blank lines we typed into our HTML code
  were ignored!
• In order to get paragraphs to appear, we need to
  use the ltpgt tag

45
Example with the ltpgt Tag

• lthtmlgt
• ltheadgt
• lttitlegtText with no p tagslt/titlegt
• lt/headgt
• ltbodygt
• ltpgtLorem ipsum dolor sit ametlt/pgt
• ltpgtSed ut perspiciatis unde omnislt/pgt
• ltpgtLorem ipsum dolor sit ametlt/pgt
• ltpgtSed ut perspiciatis unde omnislt/pgt
• lt/bodygt
• lt/htmlgt

46
Example with the ltpgt Tag
47
The Line Break Tag ltbr /gt

• The ltbr /gt is not paired!
• It breaks a line, forcing text in a line to stop
  printing on one line and to re-commence at the
  left hand margin on the next line down.
• It is often used within other elements
• headings
• paragraphs
• list items
• after ltimg /gt tag
• Since it is not a paired tag, the ltbr /gt requires
  the closing forward slash

48
Important Indent your HTML!

• It is imporant to indent your HTML to make the
  code readable.
• The browser does not need any indentation we
  could write all our HTML on a single line and the
  browser program would have no trouble reading it
• But in order to make our HTML more readable, we
  will indent our HTML, generally indenting
  subsections a bit more than the parent section.

49
Structure of HTML Tags

• Most HTML tags look something like this
• ltthe tagnamegt content lt/the tagnamegt
• Most HTML tags have both an opening Tag ltthe
  tagnamegt and a closing Tag lt/the tagnamegt so we
  call them paired tags
• Paired tags surround material contained within
  tags
• The paired tags work on or affect the material
  it contains.

50
Structure of HTML Tags

• There are a few HTML tags which are not paired.
• In earlier versions of HTML, we wrote these as
  follows
• ltHRgt, ltBRgt
• However, in the XHTML standard, we write them as
  lthr /gt, ltbr /gt
• I recommend placing a space between the name of
  the tag and the closing forward slash.

51
Structure of HTML Tags

• It will be important to write all our HTML tags
  in lower case.
• The old practice was to write HTML tag names in
  capital letters, to make clear they were markup
  and not document content.
• However, under the XHTML standard, tags are to be
  in lower case
• If we fail to follow this standard, our web pages
  may work in a browser on a computer, but not on
  cell phones, PDAs, etc.

52
World Wide Web History

• The Internet is a network of computer networks
  these networks do not need to using the same
  operating systems in order to co-operate.
• The Internet had existed since about 1975,
  resulting from the collaboration of hundreds,
  then thousands, of American computer scientists.
• For many years, it consisted mainly of electronic
  mail (e-mail), file transfer protocol (FTP) and a
  few other tools allowing computers on different
  networks to communicate.

53
World Wide Web History

• In 1989-90, while working as a physicist at CERN,
  the Centre européenne pour la recherche nucléaire
  (or European Center for Nuclear Research) in
  Geneva, Switzerland, Tim Berners-Lee invented the
  World Wide Web.

54
World Wide Web History

• You can see a picture of Dr. Tim Berners-Lee here
• He was knighted by the Queen in 1993
• He won 1.2 million with the first Millennium
  Technology Prize

55
World Wide Web History

• Berners-Lee strongly felt from the beginning that
  the Web should be free and open for all to use
• He helped found the World Wide Web Consortium to
• further this end, and
• to get the help of other computer scientists to
• continue improving Web technology and
• maximize the benefits the Web could bring to all
• Berners-Lee is currently the Director of the
  World Wide Web Consortium (W3C)
• Here is the W3C home page

56
World Wide Web History
57
World Wide Web History

• The World Wide Web Consortium is also an industry
  consortium that seeks to promote standards for
  the evolution of the Web and Web technologies
• To do this, members of the consortium, drawn from
  across academia and business, draw up technology
  standards to be used for the Web.
• One of these technology standards is the HTML
  language.

58
World Wide Web History

• A copy of the original first webpage, created by
  Berners-Lee, is kept at http//www.w3.org/History/
  19921103-hypertext/hypertext/WWW/TheProject.html
  and it looks like this

59
(No Transcript)
60
HTML Versions

• HTML has gone through several versions, each of
  which expands the capabilities of HTML
• The most recent version of HTML is XHTML 1.0
• Earlier standards were named HTML 4.01, HTML 4.0,
  HTML 3.2 and HTML 2.0

61
HTML and XHTML

• XHTML is simply an extension of HTML with a few
  simple syntax rules from the XML language (hence
  the X in XHTML).
• We will learn XHTML in this class so that you can
  write HTML documents in the most up to date form.
• But since there is little difference between
  XHTML and the earlier HTML standards, you will
  also be able to understand pages written in HTML.

62
HTML and XHTML

• Here are a few of the differences between HTML
  and XHTML

63
Web Site Types and Purposes

• Electronic commerce (e-commerce) is the buying
  and selling of goods and services on the Internet