1 / 45

Presenting Information on WWW using HTML

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.

zanthe
Download Presentation

Presenting Information on WWW using HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/MarkUp/Guide/

  6. 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>

  7. http://www.w3.org/TR/REC-html40/ Protocol Host Machine Name 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/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

  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. <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.

  13. <HEAD> and </HEAD> • <HEAD> Used to contain information such as title, style sheets • </HEAD>: This is the closing <HEAD> tag.

  14. <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>

  15. <BODY> and </BODY> • <BODY> and </BODY> We put all your text, images, and links between the opening and closing <BODY> 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 • <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

  18. 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.

  19. Lists Numbered <ol> <li> list item 1 <li> list item 2 <li> list item 3 </ol>

  20. Lists Unumbered: <ul> <li> list item 1 <li> list item 2 <li> list item 3 </ul>

  21. 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>

  22. 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.

  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. Lesson plan • Tables and Links • Practice

  26. 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" >

  27. 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>

  28. Tables (continue)

  29. 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>

  30. Table cell spading (continue)

  31. 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>

  32. Table width (continue)

  33. 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>

  34. Empty cells and Cell span Empty cells: <td>&nbsp;</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>

  35. Cell spans

  36. Coloring your tables Use Style sheet Use background color attribute Determine HEX value for color

  37. 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>

  38. 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)

  39. Color Example:

  40. Color • http://www.cookwood.com/html/colors/backflapcolors.html

  41. Example

  42. Linking • Linking to another web page: <A HREF = “http://www.cs.uwm.edu”> UW-Milwaukee Computer Science Department </A>

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

  44. 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>

  45. 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)

More Related