Week 10 slides
Download
Report
Transcript Week 10 slides
Presenting Information on WWW
using HTML
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
The Architecture of Web Sites
Request from
brow ser for
Web page
Web
Server
http://w w w .w eb4data.com/index.html
Server
name
<html><head>... </html>
Web
Brow ser
HTML
document on
its w ay to the
brow ser
w w w .w eb4data.com
/index.html
<html><head>... </html>
HTML
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
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/MarkUp/Guide/
A Closer Look at HTML Documents
HTML documents are structured using tags,
attributes, and nesting
–
Tag with text: <tagname attr=“value” >text</tagname>
–
Tag with no text: <tagname attr=“value” />
–
<title>BigHit Video Online Reservation System</title>
<a href="reservation.html">Enter Video Reservation
System</a>
<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>
URLs, Anchor Tags, and Document
References
http://www.w3.org/TR/REC-html40/
Protocol
Host
Machine
Name
URLs, Anchor Tags, and Document
References
URL (Uniform Resource Locator)
–
A protocol, a mechanism used to fetch the
desired object.
–
The host machine, the computer that contains
the requested object.
–
In this case: http (Hypertext Transfer Protocol).
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/.
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.htm
l
–
–
Base URL is http://www.web4data.com/dbmgmt/bighit/
Protocol http, host machine www.web4data.com, directory
/dbmgmt/bighit/
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/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
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
<HTML> and </HTML>
•
<HTML>
The <HTML> 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).
</HTML> This is the closing tag for the
<HTML> tag. This should be the last line in
your HTML document.
<HEAD> and </HEAD>
<HEAD>
Used to contain information such as title, style
sheets
</HEAD>: This is the closing <HEAD> tag.
<TITLE> and </TITLE>
<TITLE> and </TITLE>
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:
<TITLE> Basic HTML </TITLE>
–
<BODY> and </BODY>
<BODY> and </BODY>
We put all your text, images, and links between
the opening and closing <BODY> tags.
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.
Example
<h1>This is a header 1 tag</h1>
This is a header 1 tag
<h2>This is a header 2 tag</h2>
This is a header 2 tag
Add emphasis to your text
Boldface
This is a <b>boldface</b> tag.
This is a boldface tag.
• Italics
This is an <i>italic</i> tag.
This is an italic tag.
Lists
Numbered
<ol>
<li> list item 1
<li> list item 2
<li> list item 3
</ol>
Lists
Unumbered:
<ul>
<li> list item 1
<li> list item 2
<li> list item 3
</ul>
Lists
Definition lists allow you to indent without
necessarily having to use bullets.
<dl>
<dt> This is a term
<dd> This is a definition
<dd> And yet another definition
<dt> Another term
<dd> Another definition
</dl>
Center
You can center text, images, and headings
with the center tag:
<center>This is a centered sentence</center>
The center tag automatically inserts a line
break after the closing center tag.
File names
Use lowercase file names
User proper extension:
–
*.html or *.htm
Designing a web site
Determine the purpose of the web site
Determine the target audience
Determine numbers of pages
Sketch the site on paper
Practice
Open TextPad
for editor
Create a Web page
Save as index.html
Open IE
File -> Open the file
Project 1 (parts 4-5-6)
Avg = 132 (88%)
CS 181 Project 1 (4-5-6)
160
140
120
100
80
60
Series1
40
20
0
0
10
20
30
40
Lesson plan
Tables and Links
Practice
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 <table> </table>
–
–
Attributes border and bgcolor
<table border=“1” bgcolor="lightcyan" >
Table tags (continue)
Row is surrounded by <tr> </tr>
Data cell is surrounded by <td> </td>
Table heading is surrounded by <th> </th>
Example:
<table border="1"> <tr><th>Year</th><th>Sales</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>
Tables (continue)
Cell spading
You can increase the amount of padding for all cells
using the cellpadding attribute on the table element
<table border="1" cellpadding="10">
<tr><th>Year</th><th>Sales</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>
Table cell spading (continue)
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:
<table border="1" cellpadding="10" width="80%">
…
</table>
Table width (continue)
Text Alignment within Cells
<table border="1" cellpadding="10" width="80%">
<tr align="center"><th>Year</th><th>Sales</th></tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
<tr align="center"><td>2002</td><td>$36M</td></tr>
</table>
Empty cells and Cell span
Empty cells:
<td> </td>
Cell span
<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Year</th><thcolspan="3">Sales</th></tr>
<tr align="center"><th>North</th><th>South</th><th>Total</th></tr>
<tr align="center"><td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td></tr>
<tralign="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M</td></tr>
</table>
Cell spans
Coloring your tables
Use Style sheet
Use background color attribute
Determine HEX value for color
Coloring a table
<table border="0" cellspacing="0" cellpadding="10">
<tr> <th bgcolor="#CCCC99">Year</th>
<th bgcolor="#CCCC99">Sales</th> </tr>
<tr> <td bgcolor="#FFFF66">2000</td>
<td bgcolor="#FFFF66">$18M</td>
</tr>
<tr> <td bgcolor="#FFFF66">2001</td>
<td bgcolor="#FFFF66">$25M</td>
</tr>
</table>
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)
Color
Example:
Color
http://www.cookwood.com/html/colors/backfla
pcolors.html
Example
Linking
Linking to another web page:
<A HREF = “http://www.cs.uwm.edu”> UWMilwaukee Computer Science Department
</A>
Practice
1. Open TextPad for editor.
2. Cut and paste (or type) the following code
<html> <head>
<title> Sample HTML file with table </title>
</head>
<body>
<!– Please insert your HTML code here -->
</body>
</html>
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)