Slide 1

Download Report

Transcript Slide 1 

Your Name Here
I suggest modifying URLs to use your local Web site
instead of web4data
Presenting Information on the
Web with HTML
• Chapter overview
–
–
–
–
–
–
–
–
How Web sites are organized and implemented
A brief introduction to HTML
A Closer Look at HTML Documents
How to use URLs, Anchor Tags, and Document References
How to present information in HTML tables
How to control HTML table format with style sheets
How to use external style sheets and style classes
An example of using style sheets and tables to define a style for
BigHit Online
The Architecture of Web Sites
Request from
browser for
Web page
Web
Server
http://www.web4data.com/index.html
Server
name
<html><head>... </html>
Web
Browser
HT ML
document on
its way to the
browser
www.web4data.com
/index.html
<html><head>... </html>
HT ML
document
stored in a file
Files
File
Name
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
• 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 4.0
– http://www.w3c.org/TR/html4/
A Closer Look at HTML Documents
• Consider the Web page of Fig. 10.2
• Source code
• HTML documents are structured using tags, attributes, and nesting
– Tag with text: <tagname attr=“value” >text</tagname>
• <title>BigHit Video Online Reservation System</title>
• <a href="reservation.html">Enter Video Reservation System</a>
– Tag with no text: <tagname attr=“value” />
• <img src="images/bighit.jpg" alt="BigHit Video logo“/>
– Nested tags: <tag1><tag2></tag2><tag3></tag3></tag1>
• <table border="0">
<tr> <!-- this is a comment -->
<td><img src="images/bighit.jpg" alt="BigHit Video
logo"/></td>
<td valign="middle">
<font face="Arial" size="24pt">BigHit Video, Inc.</font>
<br><h1><em>Online Reservation System</em></h1>
</td>
</tr>
</table>
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.
http://www.w3.org/TR/REC-html40/
• In this case, /TR/REC-html40/.
• Anchor tag <a href=url>link text </a>
– <a href="http://localhost/bighit/">
BigHit Video home page </a>
• Image tag with reference to document
– <img src="images/bar2.gif"/>
Protocol
Host
Machine
Name
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/
• 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/bighit.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
Presenting Information in HTML
Tables
• Table tags provide the primary method of organizing information on
pages
–
–
–
–
Example page of Figure 10.5
Table tags create a regular, rectangular layout
Table tags present tabular information
Source for page shows layout
• Table is surrounded by <table> </table>
– Attributes border and bgcolor
– <table border=“2” bgcolor="lightcyan" >
•
•
•
•
Row is surrounded by <tr> </tr>
Header element <th> </th> formatted in boldface
Data element <td> </td>
<font> tag controls font style (“Arial”) size (“+2px”) and color
(“midnightblue”) of table element
Controlling HTML Table Format
with Style Sheets
• Cascading Style Sheets (CSS) improve format control
– Specify a common look and feel to all pages in a site
– Easy to control, easy to modify
– Example of Figure 10.8 and its source code (Figure 10.7)
• Style tags specify styles for other tags
– <style type="text/css">
body {font-family: Arial}
table {caption-side:right; border-collapse:collapse;
background-color: lightcyan}
caption {color:midnightblue; background-color:beige;
font:bold; font-size:24px }
th { color:midnightblue; border:ridge; background-color: beige}
td { color:midnightblue; border:ridge;
background-color: lightcyan}
</style>
• Note that CSS table styles do not work properly in Netscape 4.X
Some Style Attributes
Font Properties
font-family
Allow the browser to choose the first font in the
list that it supports
font-family: Arial, Helvetica, sans-serif
font-size
Determine the font size
font-size: 14pt; font-size: +2;
font-size: medium
font-style
Specify the slant
font-style: normal; font-style: italic
font-weight
Specify bold or normal
font-weight: bold
font
Specify all font attributes at once
font: bold 12pt Arial, Helvetica
background-color
Specify color behind the text
background-color: blue
background-color: transparent
background-color: #FF0000
background-image
Put an image in the background
background-image: url(images/bighit.jpg)
color
Specify foreground color
color: black; color: rgb(255, 0,0)
color: rgb(100%, 0, 0)
caption-side
Positions the caption at top, bottom, or either
side
caption-side: top; caption-side left
border-collapse
Specifies whether the table cell borders are
combined
border-collapse: collapse
border-collapse: separate
border-style
Specifies the style of cell borders
border-style: ridge; border-style: groove
border-style: none
border-width
Specifies width of cell borders
border-width: 3px
Color and Background Properties
Table Properties
Using External Style Sheets and
Style Classes
• External style sheets can specify format for many pages
–
–
–
–
Style specifications put together in a file
Example of bighit1.css of the BigHit Video Web site
Example of Figure 10.7 using external style sheet
Use link tag to reference style sheet file
• <link rel="stylesheet" type="text/css" href="bighit1.css">
• Style sheets can use classes to define multiple styles for tags
– Example Figure 10.11 with data table and header and footer
– Style sheet bighit2.css includes style classes
• Example applies to all tags with class=“bighit”
.bighit {font-family: Arial; font-weight:bold}
• <span class="bighit">BigHit Video, Inc.</span>
• Span tag used for containing text that is not otherwise included in a
single tag
Case in Point: Defining a Style for
BigHit Online
Page title
Page subtitle
Header
background
image
BigHit
Online logo
Table data
elements
Navigation
hyperlinks
Table header
elements
Visited link
Footer
Unvisited link
Style Classes and Definitions for
BigHit Online
• Basic elements of BigHit Online format shown in
– Sample customer page for BigHit Online note the footer is
different than the one in Figure 10.14 (previous slide)
– Its source code
– And its style sheet
• Header formatting
– Includes carefully formatted image and header table
– Uses width in pixels to correspond to image size
– Page sampleheader.html shows header with visible table
borders
– Page source for sampleheader.html
• Lots of details to be explored in the source code and
style sheet