Upload File

presenting information on www using html. presenting information on the web with html how web sites...

  • Home
  • Documents
  • Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction
45
Presenting Information on WWW using HTML

Upload: posy-newman

Post on 25-Dec-2015

218 views

Category:

Documents


1 download

Report

Tags:

TRANSCRIPT

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

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

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

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

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

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

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

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

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

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

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

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

<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

<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

<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

<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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

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

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

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

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

Color

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

http://www.cookwood.com/html/colors/backflapcolors.html
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

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

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

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

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

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)


CS120 The Information Era Chapter 5 – Advanced HTML

Evaluating Information and Presenting Risk Today’s Class Fact Sheet Assignment Review Evaluating Information Presenting Risk In-class Activity This week’s

Presenting Monitoring and Assessment Information

Presenting ideas and information better

the basics HTML, beyondww2.cs.fsu.edu/~faizian/cgs3066/resources/Lecture5-HTML beyond … · HTML, beyond the basics. HTML Classes and IDs Classes are attributes that attach information

Presenting ideas, information with claritycampusconnect.infosys.com/homedownloads/BE_old... · Presenting ideas, information and ... • the art of making effective presentations

Presenting Information with Speech

Using HTML Tables Presenting Information & Layout Control

Presenting Noise Mapping Information to the Public

Multimedia Information extraction from HTML product catalogues

Chapter 5 Presenting Information - Ibrahim Sameer · PDF fileChapter 5 Presenting Information Ibrahim Sameer (MBA - Specialized in Finance, B.Com – Specialized in Accounting & Marketing)

Introduction to XML ISYS 573. HTML vs XML HTML is a language specifically designed for displaying information in browser. It doesn’t carry information

Presenting Business Information

Erythema nodosum as the first presenting complaint of ...hkcem.com/html/publications/Journal/2001-4/166-168.pdf · Erythema nodosum as the first presenting complaint of asymptomatic

Marisa Mendez-Brady's Presenting Information Slide Deck

Presenting Quality Information : From Dataset Quality to ...inspire.ec.europa.eu/events/conferences/inspire_2013/pdfs...2013/06/23  · Presenting Quality Information : From Dataset

Presenting Difficult/Complex Information Clearly

Using HTML Access - VMware Docs Home HTML Access This guide, Using HTML Access, provides information about installing and using the HTML Access feature of VMware Horizon 7 to connect

Learning Skills 4 Presenting Information Slides

Chapter 5 Presenting Information

Information Visualization: Analyzing and Presenting Data

Oracle E-Business Suite Order Management: Presenting the HTML and Mobile User Experience Durgaprasad Bodapati Director, Product Management Bhavana Sharma

Presenting Visual Information(Notes)

Sharing and Presenting Information

English Level 2 Presenting information clearly (in a ... · English Level 2 Presenting information clearly (in a report) FS (Present information on complex subjects clearly and concisely;

Getting Information through HTML Forms

Web Information Systems Html and css

Presenting information; infographics

Task 4 PPM - Group 2 - Presenting Information

Presenting Information in Sound -S. Bly

PRESENTING INFORMATION PEOPLE UNDERSTAND AND USE

Task 4 PPM - Group 1 - Presenting Information

Presenting Risk Information in Prescription Drug and Medical

World Wide Web (WWW) Hypertext Transfer Protocol (HTTP) E ...dfitzpat/content/CA106/ComponentsOfInter… · Hypertext and HTML • Hypertext – method of presenting information

HTML BTEC National in Computing Section5. Create Information “HTML: defining HTML, discussing HTML uses and demonstrating HTML basics, HTML structure…