![Page 1: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/1.jpg)
Presenting Information on WWW using HTML
![Page 2: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/2.jpg)
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
![Page 3: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/3.jpg)
The Architecture of Web Sites
http://www.web4data.com/index.html
www.web4data.com
<html><head>... </html>
Files
<html><head>... </html>
/index.html
WebServer
WebBrowser
Request frombrowser forWeb page
HTMLdocument onits way to the
browser
HTMLdocument
stored in a file
FileName
Servername
![Page 4: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/4.jpg)
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
![Page 5: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/5.jpg)
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/
![Page 6: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/6.jpg)
A Closer Look at HTML Documents
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>
![Page 7: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/7.jpg)
URLs, Anchor Tags, and Document References
http://www.w3.org/TR/REC-html40/
Protocol HostMachine
Name
![Page 8: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/8.jpg)
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/.
![Page 9: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/9.jpg)
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/
![Page 10: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/10.jpg)
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
![Page 11: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/11.jpg)
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
![Page 12: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/12.jpg)
<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.
![Page 13: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/13.jpg)
<HEAD> and </HEAD>
<HEAD>Used to contain information such as title, style
sheets </HEAD>: This is the closing <HEAD> tag.
![Page 14: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/14.jpg)
<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>
![Page 15: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/15.jpg)
<BODY> and </BODY>
<BODY> and </BODY>We put all your text, images, and links between the opening and closing <BODY> tags.
![Page 16: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/16.jpg)
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.
![Page 17: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/17.jpg)
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
![Page 18: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/18.jpg)
Add emphasis to your text
BoldfaceThis is a <b>boldface</b> tag.
This is a boldface tag.
• Italics
This is an <i>italic</i> tag.
This is an italic tag.
![Page 19: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/19.jpg)
Lists
Numbered
<ol>
<li> list item 1
<li> list item 2
<li> list item 3
</ol>
![Page 20: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/20.jpg)
Lists
Unumbered:
<ul>
<li> list item 1
<li> list item 2
<li> list item 3
</ul>
![Page 21: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/21.jpg)
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>
![Page 22: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/22.jpg)
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.
![Page 23: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/23.jpg)
File names
Use lowercase file names User proper extension:
– *.html or *.htm
![Page 24: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/24.jpg)
Designing a web site
Determine the purpose of the web site Determine the target audience Determine numbers of pages Sketch the site on paper
![Page 25: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/25.jpg)
Lesson plan
Tables and Links Practice
![Page 26: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/26.jpg)
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" >
![Page 27: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/27.jpg)
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>
![Page 28: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/28.jpg)
Tables (continue)
![Page 29: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/29.jpg)
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>
![Page 30: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/30.jpg)
Table cell spading (continue)
![Page 31: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/31.jpg)
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>
![Page 32: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/32.jpg)
Table width (continue)
![Page 33: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/33.jpg)
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>
![Page 34: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/34.jpg)
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>
![Page 35: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/35.jpg)
Cell spans
![Page 36: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/36.jpg)
Coloring your tables
Use Style sheet
Use background color attribute
Determine HEX value for color
![Page 37: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/37.jpg)
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>
![Page 38: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/38.jpg)
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)
![Page 39: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/39.jpg)
Color
Example:
![Page 40: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/40.jpg)
Color
http://www.cookwood.com/html/colors/backflapcolors.html
![Page 41: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/41.jpg)
Example
![Page 42: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/42.jpg)
Linking
Linking to another web page:
<A HREF = “http://www.cs.uwm.edu”> UW-Milwaukee Computer Science Department </A>
![Page 43: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/43.jpg)
Practice
Open TextPad
for editor Create a Web page Save as index.html Open IE File -> Open the file
![Page 44: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/44.jpg)
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>
![Page 45: Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddf5503460f94ad97df/html5/thumbnails/45.jpg)
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)