building a web page with html

McGraw-Hill/Irwin © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.

Building A Web Page with HTML

Barry SosinskyValda Hilley

Programming the Web

Chapter 2

2-2

Learning Objectives

• To understand how HTML is used to create pages on the World Wide Web.

• To learn the basic tags, and how they are used.

• To appreciate how attributes can modify tags for more powerful control of your content.

• To use different kinds of hyperlinks to create an interactive medium.

• To explore the use of images, tables, frames, and other elements that help make the Web a visual medium.

2-3

Using HTML

• HTML is the underlying set of instructions that makes it possible for a browser to render a Web page.

• HTML also allows further extension to run scripts, provide calls to external programs, work with dynamic dynamic data and multimedia extensions to HML (such as Active Server Pages and Java Server Pages, Dynamic HTML, Flash, and so forth).

2-4

Using Web Browsers to View and Test Your Web Pages

• To access and display HTML documents, you must use a browser program. The two most common browsers are Microsoft’s Internet Explorer or Netscape Navigator.

• Until you actually put your page on the Internet for public viewing, you can work locally on your own machine while your page is under construction and you are testing it.

• Knowing HTML is a major aid when things go wrong, when you want to insert a special feature, or when you need to optimize your pages.

2-5

Building a Web Page

• In order to write an HTML document, you need a text editor that can save your work in ASCII text format.

• Any word processing application such as WordPerfect, WordPad, or Word will also do, as long as you remember to save your results in TEXT only. The resulting file should have a .TXT, and not a .DOC extension, and should display Notepad’s icon on the PC or a Text icon on the Macintosh.

2-6

Creating Your First Web Page

• In order to create an HTML document that your browser can recognize, you need to declare that this is an HTML document by embedding all text and tags within the <html> starting tag and the </html> closing tag.

• When you put the <html>…</html> tags into your file you are telling the application that reads this file to start its HTML parser, and when to stop running the parser.

2-7

Figure 2.1 My First HTML document



<html>

<head>

<title>My first HTML document</title>

</head>

<body>

<h2>First attempt at HTML</h2>

This is my first attempt at writing HTML. Doesn't it look <I>great</I>? This is easier than I thought!



<p>

<hr/>

Written by:

<cite>(insert your name here)</cite>

<br>©2003</br>



For more information, contact us at:<br></br>

<a href="http://www.mycompany.com">My Company Inc.</a>

</body>

</html>

2-8

Formatting Text with Tags

• Only a small amount of the information in your HTML documents actually appears in the browser window. This is because the information that’s bracketed by the less than (<) and greater than (>) symbols does not appear.

• All the data in between these symbols are the instructions to the browser on how to display or treat the content of your document. These instructions are known as tags.

2-9

Formatting Text with Tags (2)

• Many HTML tags are written with an opening, or start tag, and a closing, or end tag.

• There are also single HTML tags that don’t require a closing tag.

• In addition to actual single tags, there are also several tags where the insertion of the closing tag is optional.

• Additional information within tags indicates special attributes that further define or modify a tag's actions.

2-10

Figure 2.2 Revised MyFirst.htm Document As Rendered in Internet Explorer



<html>

<head>

<title>My first HTML document</title>

</head>

<body>

<h2>First attempt at HTML</h2>

This is my first attempt at writing HTML. Doesn't it look <I>great</I>? This is easier than I thought!



<p>

<hr width=“300”/>

Written by:

<cite>(insert your name here)</cite>

<br>©2003</br>



For more information, contact us at:<br></br>

<a href="http://www.mycompany.com">My Company Inc.</a>

</body>

</html>

2-11

Head and Body Elements

• The two basic structures of HTML are the head and body elements.

– The <head> section contains information that isn’t displayed in the browser but can be used by search engines to identify and classify the page, such as keywords. The basic purpose of the head, however, is to contain the title of the document.

– The opening and closing <body> tags set the parameters of the body section. Between these two tags is where most of your content goes: Text, headlines, graphics, and so forth.

2-12

Establishing Hypertext Links

• Hyperlinks in an HTML document allow you to access and display other HTML documents on your own or others’ servers by clicking on the associated word or phrase.

• In order to create a hyperlink, you enclose the linked text with opening and closing <a> tags. The “a” stands for anchor.

• Within these tags, the HREF attribute contains the address of the page to be linked to the current one.

2-13

Defining Relative and Absolute Anchors

• To create a hyperlink to another document you need to know the document’s address so you can provide an anchor for it on your page. Links can either be absolute or relative.

– Absolute links provide the full web address (URL) including the document’s name, the pathname, the domain name of the server that hosts the file, and the protocol.

– With relative links, the browser assumes when you link a file name that the link will use the same protocol, that the destination file is located on the same server and in the same directory as the current HTML document.

2-14

Figure 2.3 and 2.4 Adding links

<A HREF="page2.htm">Look before you leap but…</A>

<A HREF="page1.htm">he who hesitates is lost</A>

page1.htm

page2.htm

2-15

Lists in HTML

• Several different types of lists are supported by HTML.

– Ordered lists duplicate a style in word processor that are typically called numbered lists.

– Unordered lists place bullets instead of numbers in front of each listed item. Another name for an unordered list is a bulleted list.

– Definition lists pair the contents of the tag as a title with a description, the result of which is a listing that looks a lot like a glossary or dictionary.

2-16

Figure 2.5 An Ordered List Sequentially Numbers the Items You Enter

<html>

<head>

<title>Favorite Trumpet Players</title>

</head>

<body>

<ol>

<li/> Louis Armstrong

<li/> Miles Davis

<li/> Clifford Brown

<li/> Dizzy Gillespie

<li/> Chet Baker

</ol>

</body>

</html>

2-17

Applying Background Colors and Patterns

• Most browsers display white or gray as the default background color of a web page. Depending on your needs, however, different background colors can be used.

• The background color is determined by an attribute of the <body> tag, bgcolor. The value for this attribute can be either expressed as a color name or a hexadecimal color value.

2-18

Changing Text Sizes and Fonts

• Manipulating fonts and sizes involves using the font tag <font>, and its attributes size and face.

• The size attribute has values from 1 to 7, from smallest to largest.

• The default font size is 3. The face attribute contains the actual name of the typeface you wish to use.

2-19

Figure 2.6 The fontsize Attribute Changes the Font Size of Your Displayed Text

<html>

<head>

</head>

<body>

<font size="1">Despite numerous technical hurdles, sales have remained strong in major regions this fiscal year.</font>

<font size="2">As we head into the New Year, we are anticipating a net sales increase of 10% due to several new products.</font>

<font size="3">These products have been through multiple trial stages and the outstanding results bode well for expanding market share.</font>

<font size="4">In addition, our new ad campaign, to which the company has committed an unprecedented amount of funding, debuts in the spring.</font>

</body>

</html>

2-20

Figure 2.7 The Effect of the size and face Attributes on Text

<html>

<head>

</head>

<body>

<font size="1" face="Springfield, Extra Bold">Despite numerous

technical hurdles, sales have remained strong in major regions this

fiscal year.</font>

<font size="2" face="Arial">As we head into the New Year, we are anticipating a net sales increase of 10% due to

several new products.</font>

<font size="3" face="Verdana ">These

products have been through multiple trial stages and the outstanding

results bode well for expanding market share. </font>

<font size="4" face="Times New Roman ">In addition, our new ad campaign, to which the

company has committed an unprecedented amount of funding, debuts in the

spring.</font>

</body>

</html>

2-21

Figure 2.8 Changing the Text Color

<html>

<head>

</head>

<body>

<font size="1" face="Springfield, Extra Bold" color="red">Despite

numerous technical hurdles, sales have remained strong in major regions

this fiscal year. </font><font size="2" face="Arial" color="mediumvioletred">As we head into the New Year, we are

anticipating a net sales increase of 10% due to several new products.

</font><font size="3" face="Verdana" color="royalblue">These products

have been through multiple trial stages and the outstanding results

bode well for expanding market share. </font><font size="4" face="Times

New Roman" color="saddlebrown">In addition, our new ad campaign, to

which the company has committed an unprecedented amount of funding,

debuts in the spring. </font>

</body>

</html>

2-22

Basefont and Blockquote Tags

• You can create a default text by replacing the font tags <font> and </font> with a single base font tag <basefont/>. Insert the desired attributes, for example, size, font, and/or color in between the BASEFONT name and the forward slash. Unless indicated otherwise, all text will then conform to this style.

• One nice effect for making text or a paragraph stand out on the page is through the use of callouts or block quotes. Any text enclosed within <blockquote> tags is indented on both sides in some browsers and italicized in others.

2-23

Adding Graphic Elements

• Besides texts and links, one of the most common contents of web pages are graphic elements.

• There are three types of bitmapped or painted image types that all browsers recognize:

– GIF (Graphic Interchange Format).

– JPEG (Joint Photographic Experts Group).

– PNG (Portable Network Graphics).

2-24

Embedded Images

• The image tag <img/> is used to add an image to a web page.

• The actual image used is defined by using the source attribute (SRC), which specifies the location of the image file to be used.

• As with a link to another page, the location of the image is set by typing its URL.

2-25

Figure 2.9 Inserting a Basic Image in a Web Page

<html>

<head>

</head>

<body>

<img src= "industry_main.jpg"/>

</body>

</html>

2-26

Figure 2.10 Resizing <img> Tags with width and height Attributes

<html>

<head>

</head>

<body>

<img src="industry_main.jpg" width="600" height="250"/>

</body>

</html>

2-27

Figure 2.11 The effect of the position attribute on an image

<html>

<head>

</head>

<body>

<img src="industry_main.jpg" align="right" />

</body>

</html>

2-28

Figure 2.12 Wrapping Text Around an Image

<html>

<head>

</head>

<body>

<img src="industry_main.jpg" align="right" hspace="20" vspace="40"/>

Despite numerous technical hurdles, sales have remained strong in major regions

this fiscal year. As we head into the New Year, we are


These products have been through multiple trial stages and the outstanding results

bode well for expanding market share. In addition, our new ad campaign, to


debuts in the spring.

</body>

</html>

2-29

Figure 2.13 Creating an Image Border

<html>

<head>

</head>

<body>

<img src="industry_main.jpg" align="right" hspace="20" vspace="40" border="25"/>








</body>

</html>

2-30

Figure 2.14 Clickable Images

<html>

<head>

</head>

<body>

<a href="http://www.mcgraw-hill.com/utility/shop/industry.html">

<img src="industry_main.jpg" align="right" hspace="20" vspace="40" border="25"/>

</a>








</body>

</html>

2-31

Figure 2.15 Animated GIFs

The famous animated Internet Dancing Baby siteprovides an example of the impact that animated images can have.

2-32

Navigational Toolbars and Image Maps

• Image maps link many pages to one image. This is accomplished by assigning hotspots within the image, which, when clicked, take you to the desired page.

• An image map has multiple hotspots, each of which takes the visitor to a different page, image, or file.

• A common use of this technique is to allow the user to select from a larger image a particular aspect of that image that he or she wants more information about.

2-33

Figure 2.16 Image Maps

The coordinates are in pixels, and these can be determined easily by pasting the image on any image editors like Photoshop, Microsoft Paint, or Paint Shop Pro). If you hover your mouse over the image, these software usually display the XY coordinates of the mouse pointer in the status bar (at the bottom of the screen).

2-34

Organizing information Using Frames

• By using frames, you can display multiple pages in the same browser window.

• Frames are also dynamic in the sense that users can scroll through them if the entire window can not been seen within the established size parameters.

• Frames are commonly used in order to specify a fixed section of a page and a scrolling one, or a fixed list of contents on the left and a scrollable information text on the right.

2-35

Figure 2.17 Framesets: Creating Two Columns of Equal Size



<html><head></head>

<frameset cols="50%,50%">



<frame/>

<frame/>

</frameset>

</html>

2-36

Figure 2.18 Framesets: Creating Rows in a Frameset


<html><head></head>

<frameset rows="25%,50%,25%">

<frame/>

<frame/>

<frame/>

</frameset>

</html>

2-37

Frame Attributes

• There are seven attributes that frames can have, as follows:

– source (src)– name– frame border (frameborder)– margin width (marginwidth)– margin height (marginheight)– scrolling– no re-sizing of frames allowed (noresize)

2-38

Figure 2.19 Adding Name Text to Frames


<html><head></head>

<frameset cols="50%,50%">

<frame name="west" src="west.htm"/>

<frame name="east" src="east.htm"/>

</frameset>

</html>

2-39

Figure 2.20 Linking Between Frames Using the Target Attribute

<html><head></head><body>We are the Hobbies'R us. We carry the finest fishing and gardening products.</body></html>

<html><head></head><body>We carry the following fishing products ----</body></html>

<html><head></head><body>Here are our gardening products ----</body></html>

2-40

Tables

• Tables are used to present data and to position objects on a web page.

• To display information, a standard table has elements such as rows and columns, cells, borders, headings and captions.

• All these elements are defined by attribute tags placed within the basic table tags <table>…</table>.

2-41

Figure 2.21 A Basic Table



<html><head></head><body>

<table>

<tr>

<td>1,387 tons</td>

<td>435 tons </td>

<td>829 tons </td>

</tr>

<tr>

<td>3,116 tons </td>



</tr>

<tr>


<td>894 tons </tD>

<td>982 tons </td>

</tr>

</table>

</body></html>

2-42

Figure 2.22 Adding a Border to a Table




<table border="3">

<tr>

<td>1,387 tons</td>

<td>435 tons </td>

<td>829 tons </td>

</tr>

<tr>




</tr>

<tr>


<td>894 tons </tD>

<td>982 tons </td>

</tr>

</table>

</body></html>

2-43

Figure 2.23 Tables and Text Wrapping




<table border="3" align="right" >

<tr>

<td>1,387 tons</td>

<td>435 tons </td>

<td>829 tons </td>

</tr>

<tr>




</tr>

<tr>


<td>894 tons </tD>

<td>982 tons </td>

</tr>

</table>

Despite numerous technical hurdles, sales have remained…

…

</body></html>

2-44

Figure 2.24 Adding Column and Row Headings to a Table

<html><head></head><body><table border="3" align="right" > <tr> <th></th> <th>West</th> <th>East</th> <th>South</th> </tr> <tr> <th>Strawberries</th> <td>1,387 tons</td> <td>435 tons </td> <td>829 tons </td> </tr> <tr> <th>Blackberries</th> <td>3,116 tons </td> <td>1,023 tons </td> <td>1,957 tons </td> </tr> <tr> <th>Raspberries</th> <td>1,874 tons </td> <td>894 tons </tD> <td>982 tons </td> </tr></table>. . . </body></html>

2-45

Figure 2.25 Using the COLSPAN Attribute in a Table to Span Multiple Columns

<html><head></head><body><table border="3" align="right" > <tr> <th></th> <th colspan="3">Regions</th> </tr> <tr> <th></th> <th>West</th> <th>East</th> <th>South</th> </tr> <tr> <th>Strawberries</th> <td>1,387 tons</td> <td>435 tons </td> <td>829 tons </td> </tr> <tr> <th>Blackberries</th> <td>3,116 tons </td> <td>1,023 tons </td> <td>1,957 tons </td> </tr> <tr> <th>Raspberries</th> <td>1,874 tons </td> <td>894 tons </tD> <td>982 tons </td> </tr></table>. . .</body></html>

Note: ROWSPAN is a similar attribute to span multiple rows in a column

building a web page with html

Documents