Presenting Information on WWW

1
Presenting Information on WWW using HTML
2
Presenting Information on the Web with HTML

• How Web sites are organized and implemented
• A brief introduction to HTML
• A Closer Look at HTML Document
• How to use URLs, Anchor Tags, and Document
  References
• Tables, Lists, Forms

3
The Architecture of Web Sites
4
Introduction to HTML

• An HTML document consists of lines of text with
  embedded markup tags that specify Web-page
  formatting and links to other pages
• Invented by Tim Berners-Lee at CERN 1989
• The birth of the World Wide Web

5
Introduction to HTML

• In 1993, students, faculty, and staff of the
  National Center for Supercomputing Applications
  (NCSA) developed the first graphical browser
• Mosaic Web browser and Web server
• Became Netscape
• Current version is HTML (HTML 4.01
• http//www.w3.org/TR/html401/
• 10 minutes for new commers http//www.w3.org/Mark
  Up/Guide/

6
A Closer Look at HTML Documents

• HTML documents are structured using tags,
  attributes, and nesting
• Tag with text lttagname attrvalue
  gttextlt/tagnamegt
• lttitlegtBigHit Video Online Reservation
  Systemlt/titlegt
• lta href"reservation.html"gtEnter Video
  Reservation Systemlt/agt
• Tag with no text lttagname attrvalue /gt
• ltimg src"images/bighit.jpg" alt"BigHit Video
  logo/gt
• Nested tags lttag1gtlttag2gtlt/tag2gtlttag3gtlt/tag3gtlt/tag
  1gt
• lttable border"0"gt lttrgt lt!-- this is a
  comment --gt lttdgtltimg src"images/bighit.j
  pg" alt"BigHit Video logo"/gtlt/tdgt

7
URLs, Anchor Tags, and Document References
8
URLs, Anchor Tags, and Document References

• URL (Uniform Resource Locator)
• A protocol, a mechanism used to fetch the desired
  object.
• In this case http (Hypertext Transfer
  Protocol).
• The host machine, the computer that contains the
  requested object.
• In this case, the host computer is www.w3.org.
• Special host name for browser computer localhost
• The object name.
• In this case, /TR/REC-html40/.

9
Relative URLs

• Relative URL contains only object name
• Refers to object on the same server as the page
  with the reference
• For page URL http//www.web4data.com/dbmgmt/bighit
  /fig1002.html
• Base URL is http//www.web4data.com/dbmgmt/bighit/
  
• Protocol http, host machine www.web4data.com,
  directory /dbmgmt/bighit/

10
Relative URLs

• Relative URL not starting with /
• Refers to object relative to directory containing
  the page
• Create full URL by appending relative URL to base
  URL
• images/bighit.jpg becomes
• http//www.web4data.com/dbmgmt/bighit/images/bighi
  t.jpg
• Relative URL starting with /
• Refers to object relative to home directory of
  server
• Create full URL by appending the relative URL to
  the protocol and host machine
• /dbmgt/bighit/index.html becomes
• http//www.web4data.com/dbmgmt/bighit/index.html

11
Fundamentals of HTML

• HTML, HEAD, Title, Body
• Headings and paragraphs
• Add emphasis to your text
• Use various kinds of lists
• Add links to other pages
• Add images
• Add links to other pages

12
ltHTMLgt and lt/HTMLgt

• ltHTMLgt
• The ltHTMLgt tag is the first tag in your
  document. It tells the Internet browser that it
  is reading an HTML document (without it, the
  browser would think it was viewing a text
  document).
• lt/HTMLgt This is the closing tag for the ltHTMLgt
  tag. This should be the last line in your HTML
  document.

13
ltHEADgt and lt/HEADgt

• ltHEADgt
• Used to contain information such as title, style
  sheets
• lt/HEADgt This is the closing ltHEADgt tag.

14
ltTITLEgt and lt/TITLEgt

• ltTITLEgt and lt/TITLEgt
• It is used to make the title of the page. The
  title of the page will appear in the blue bar
  across the top of your active window
• Example
• ltTITLEgt Basic HTML lt/TITLEgt

15
ltBODYgt and lt/BODYgt

• ltBODYgt and lt/BODYgt
• We put all your text, images, and links between
  the opening and closing ltBODYgt tags.

16
Headings and paragraphs

• There are up to six levels of headers that can be
  used in your document, H1 through H6. Header 1 is
  the largest header and they get progressively
  smaller through header 6.

17
Example

• lth1gtThis is a header 1 taglt/h1gt
• This is a header 1 tag
• lth2gtThis is a header 2 taglt/h2gt
• This is a header 2 tag

18
Add emphasis to your text

• Boldface
• This is a ltbgtboldfacelt/bgt tag.
• This is a boldface tag.
• Italics
• This is an ltigtitaliclt/igt tag.
• This is an italic tag.

19
Lists

• Numbered
• ltolgt
• ltligt list item 1
• ltligt list item 2
• ltligt list item 3
• lt/olgt

20
Lists

• Unumbered
• ltulgt
• ltligt list item 1
• ltligt list item 2
• ltligt list item 3
• lt/ulgt

21
Lists

• Definition lists allow you to indent without
  necessarily having to use bullets.
• ltdlgt
• ltdtgt This is a term
• ltddgt This is a definition
• ltddgt And yet another definition
• ltdtgt Another term
• ltddgt Another definition
• lt/dlgt

22
Center

• You can center text, images, and headings with
  the center tag
• ltcentergtThis is a centered sentencelt/centergt
• The center tag automatically inserts a line break
  after the closing center tag.

23
File names

• Use lowercase file names
• User proper extension
• .html or .htm

24
Designing a web site

• Determine the purpose of the web site
• Determine the target audience
• Determine numbers of pages
• Sketch the site on paper

25
Practice

• Open TextPad
• for editor
• Create a Web page
• Save as index.html
• Open IE
• File -gt Open the file

26
Project 1 (parts 4-5-6)

• Avg 132 (88)

27
Lesson plan

• Tables and Links
• Practice

28
Presenting Information in HTML Tables

• Table tags provide the primary method of
  organizing information on pages
• Table tags create a regular, rectangular layout
• Table tags present tabular information
• Table is surrounded by lttablegt lt/tablegt
• Attributes border and bgcolor
• lttable border1 bgcolor"lightcyan" gt

29
Table tags (continue)

• Row is surrounded by lttrgt lt/trgt
• Data cell is surrounded by lttdgt lt/tdgt
• Table heading is surrounded by ltthgt lt/thgt
• Example
• lttable border"1"gt lttrgtltthgtYearlt/thgtltthgtSaleslt/thgt
  lt/trgt lttrgtlttdgt2000lt/tdgtlttdgt18Mlt/tdgtlt/trgt
  lttrgtlttdgt2001lt/tdgtlttdgt25Mlt/tdgtlt/trgt
  lttrgtlttdgt2002lt/tdgtlttdgt36Mlt/tdgtlt/trgt
• lt/tablegt

30
Tables (continue)
31
Cell spading

• You can increase the amount of padding for all
  cells using the cellpadding attribute on the
  table element
• lttable border"1" cellpadding"10"gt
• lttrgtltthgtYearlt/thgtltthgtSaleslt/thgtlt/trgt
  lttrgtlttdgt2000lt/tdgtlttdgt18Mlt/tdgtlt/trgt
  lttrgtlttdgt2001lt/tdgtlttdgt25Mlt/tdgtlt/trgt
  lttrgtlttdgt2002lt/tdgtlttdgt36Mlt/tdgtlt/trgt
• lt/tablegt

32
Table cell spading (continue)
33
Table width

• The value is either the width in pixels or a
  percentage value representing the percentage of
  the space available between the left and right
  margins
• Example
• lttable border"1" cellpadding"10" width"80"gt
• lt/tablegt

34
Table width (continue)
35
Text Alignment within Cells

• lttable border"1" cellpadding"10" width"80"gt
• lttr align"center"gtltthgtYearlt/thgtltthgtSaleslt/thgtlt/tr
  gt
• lttr align"center"gtlttdgt2000lt/tdgtlttdgt18Mlt/tdgtlt/trgt
  
• lttr align"center"gtlttdgt2001lt/tdgtlttdgt25Mlt/tdgtlt/trgt
  
• lttr align"center"gtlttdgt2002lt/tdgtlttdgt36Mlt/tdgtlt/trgt
  
• lt/tablegt

36
Empty cells and Cell span

• Empty cells
• lttdgtnbsplt/tdgt
• Cell span
• lttable border"1" cellpadding"10" width"80"gt
• lttr align"center"gtltth rowspan"2"gtYearlt/thgtltthcol
  span"3"gtSaleslt/thgtlt/trgt
• lttr align"center"gtltthgtNorthlt/thgtltthgtSouthlt/thgtltt
  hgtTotallt/thgtlt/trgt
• lttr align"center"gtlttdgt2000lt/tdgtlttdgt10Mlt/tdgtlttdgt
  8Mlt/tdgtlttdgt18Mlt/tdgtlt/trgt
• lttralign"center"gtlttdgt2001lt/tdgtlttdgt14Mlt/tdgtlttdgt1
  1Mlt/tdgtlttdgt25Mlt/tdgtlt/trgt
• lt/tablegt

37
Cell spans
38
Coloring your tables

• Use Style sheet
• Use background color attribute
• Determine HEX value for color

39
Coloring a table

• lttable border"0" cellspacing"0"
  cellpadding"10"gt
• lttrgt ltth bgcolor"CCCC99"gtYearlt/thgt
• ltth bgcolor"CCCC99"gtSaleslt/thgt lt/trgt
• lttrgt lttd bgcolor"FFFF66"gt2000lt/tdgt
• lttd bgcolor"FFFF66"gt18Mlt/tdgt
• lt/trgt
• lttrgt lttd bgcolor"FFFF66"gt2001lt/tdgt
• lttd bgcolor"FFFF66"gt25Mlt/tdgt
• lt/trgt
• lt/tablegt

40
Color

• Each color is identified by its
• Red- Green- Blue (RGB) values,
• three numbers that range from 0 to 255, each of
  which represents the intensity of the Red, Green,
  or Blue component of the desired color.
• We need to represent each color in hexadecimal
  (0-F)

41
Color

• Example

42
Color

• http//www.cookwood.com/html/colors/backflapcolors
  .html

43
Example
44
Linking

• Linking to another web page
• ltA HREF http//www.cs.uwm.edugt UW-Milwaukee
  Computer Science Department lt/Agt

45
Practice

• 1. Open TextPad for editor.
• 2. Cut and paste (or type) the following
  codelthtmlgt ltheadgt
• lttitlegt Sample HTML file with table lt/titlegt
• lt/headgt
• ltbodygt
• lt! Please insert your HTML code here --gt
• lt/bodygt
• lt/htmlgt

46
Practice

• 3. Insert the HTML code so that it
• Display the link to Math and CS department in
  the center of the page
• Then create a table
• (see picture below)