9 April 2008

Creating Web Pages with Links, Images, and Formatted Text

WEB 101 – HTML

Prof: Mariana Mendoza-Botero

Escuela de Administración de Empresas

Content

Project Using Links on a Web Page Creating a Home Page Adding a Text Link Adding a E-mail Link Viewing, Testing Links, and Printing a Web Page Editing the Second Web Page Adding an Image with Wrapped Text Adding a Text Link to Another Web Site Adding Links within a Web Page

Project

Plant World web site that will display information about Plant World and its services.

Includes:– A logo image– Headings– Two unordered (bulleted) lists– And e-mail link– A link to the Desert Plants web page

Project Objectives

Describe linking terms and definitions Create a home page and enhance a Web

page using images Use absolute and relative paths Align and add bold, italics, and color to text Change the bullet type used in an unordered

list

Project Objectives (cont.)

Add a background image Add a text link to a Web page in the same

Web site Add an e-mail link View the HTML file and test the links Open an HTML file

Project Objectives (cont.)

Add an image with wrapped text Add a text link to a Web page on another

Web site Add links to targets within a Web page Copy and paste HTML code Add an image link to a Web page in the

same Web site

Creating a Home Page

The first web page developed in this project is the home page of the Plant World web site.

A home page is the main page of a web site, which visitors to a web site generally will view first.

A web site home page should identify the purpose of the web site by briefly stating what content, services, or features it provides.

The home page also should indicate clearly what links the visitors should click to move from one page on the site to another.

Starting Notepad

Click the Start button on the taskbar and then point to All Programs on the Start menu

Point to Accessories on the All Programs submenu, and then click Notepad on the Accessories submenu

If the Notepad window is not maximized, click the Maximize button on the Notepad title bar to maximize it

Click Format on the menu bar If Word Wrap is not checked, click Word Wrap

Entering HTML Tags to Define the Web Page Structure

Adding an Image

Type:

<img src=“plantworldlg.jpg” width=“720” height=“84” alt=“Plant World logo”/>

and then press the ENTER key

Adding an Image (cont.)

Adding an Image (cont.)

Image Attributes

ATTRIBUTE FUNCTION

align Controls alignmentCan be set to bottom, middle, top, left, or right

alt Alternative text to display when an image is being loaded

border Defines the border width

height Defines the height of the imageimproves loading time

width Defines the width of the imageImproves loading time

hspace Defines the horizontal space that separates the image from the text

vspace Defines the vertical space that separates the image from the text

src Defines the URL of the image to be loaded

Adding a Left-Aligned Heading with a Font Color

Type:

<h1>

<font color="#000066">Welcome to Plant World!</font>

</h1>

and then press the ENTER key

Adding a Left-Aligned Heading with a Font Color (cont.)

Adding a Left-Aligned Heading with a Font Color (cont.)

Font Attributes and Values

ATTRIBUTE AND VALUE

FUNCTION

color=“#xxxxxx” Changes the font colorValue inside quotation marks is a six-digit color code or color name

face=“fontname” Changes the font face or nameValue inside quotation marks is the name of a font, such as Verdana or Arial; text appears using the default font if the font face is not specified

size=“x” Changes the font sizeValue inside quotation marks is a number that represents sizeValues can be an actual font size of 1 (smallest) to 7 (largest) or a relative font size, such as +2 or -1, which specifies a number of sizes larger or smaller than the present font size

Entering a Paragraph of Text

Type: <p>For the finest in indoor and outdoor plants, come to Plant World! Plant World is the premier nursery for all of your planting needs. Our professional landscape design artists can visit your home and make recommendations for plants to use in your home or your yard.</p> as the first paragraph in the HTML file

Press the ENTER key twice

Entering a Paragraph of Text (cont.)

Creating Unordered (Bulleted) Lists

Type (bullets can be: disc, square or circle):

<h2>Our Company</h2>

<ul type="square">

<li>Founded in 1999 by Jared Adam Smith</li> <li>Headquartered in Fairfield, Connecticut</li> <li>38 Store locations throughout New England</li>

</ul>

Creating Unordered (Bulleted) Lists (cont.)

Type:

<h2>Our Services</h2><ul type="square">

<li>Landscape design</li> <li>Planting and maintenance</li>

<li>Online information for all types of plants</li>

</ul>

Creating Unordered (Bulleted) Lists (cont.)

Adding a Background Image

Click immediately to the right of the (>) in the <body> tag press the SPACEBAR.

Type:

background=“greyback.jpg”

as the attribute.

Adding a Background Image (cont.)

Adding a Text Link to Another Web Page within the Same Web Site

Click immediately to the right of the </ul> tag, and then press the ENTER key twice.

Type:<p>To learn more about the Plant World products and services, please browse the Plant World Web site You can find information on all types of plants, both for indoor and outdoor use. You also can learn about this month's featured desert plants, which have a natural beauty that can enhance any Southwest landscape!</p>and then press the ENTER key.

Click immediately to the left of the “desert” word. Type <a href="desertplants.htm"> to start the link. Click immediately to the right of the “plants” word. Type </a> to close the link.

Adding a Text Link to Another Web Page within the Same Web Site (cont.)

Adding a Text Link to Another Web Page within the Same Web Site (cont.)

<a> Tag Attributes and Functions

ATTRIBUTE FUNCTION

href Specifies the URL of the linked page or file

name Defines a name for the current anchor so it may be the target or destination or another link. Each anchor in a Web page must use a unique name.

rel Indicates a forward relationship from the current document to the linked document. The value of the rel attribute is a link type, such as prev, next, index, or copyright. For example, the chapter5.htm web page might include the tag <a rel=“next” href=“chapter6.htm”> to indicate a link to the web page for the next chapter, chapter6.htm.

Adding a Text Link to Another Web Page within the Same Web Site (cont.)

<a> Tag Attributes and Functions (cont.)

ATTRIBUTE FUNCTION

rev Indicates a reverse (backward) relationship from the current document to the linked document. The value of the rev attribute is a link type, such as prev, next, index, or copyright. For example, the chapter5.htm web page might include the tag <a rev=“next” href=“chapter4.htm”> to indicate a link to the web page for the previous chapter, chapter4.htm.

type Specifies the content type (also known as media types or MIME types) of the linked page or file to help a browser determine if it can handle the resource type. Examples of content types include: text/html, image/jpeg, video/quicktime, application/java, text/css, and text/javascript.

Adding an E-Mail Link

Type:<p>Have a question or comment? Call us at (206) 555-PLANT or e-mail us at plantworld@isp.com.</p>as a new paragraph of text.

Click immediately before the ”plantworld@isp.com” word. Type:

<a href="mailto: plantworld@isp.com"> to start the e-mail link.

Click immediately after the “com” in the e-mail address text. Type </a> to end the e-mail link.

Adding an E-Mail Link (cont)

Saving and Printing an HTML File

With a USB drive plugged into your computer, click File on the menu bar and then click Save As. Type plantworld.htm in the File name text box.

If necessary, click USB in the Save in list. Click the Project03 folder and then click the ProjectFiles folder in the list of available folders. Click the Save button in the Save As dialog box.

Click File on the menu bar, and then click Print on the File menu.

Viewing a Web Page

Click the Start button on the Windows taskbar and then point to All Programs on the Start menu. Click Internet Explorer (or another browser command) on the All Programs submenu.

If necessary, click the Maximize button to maximize the browser window.

When the browser window appears, click the Address bar.

Type: g:\Project03\ProjectFiles\plantworld.htm in the Address text box.

Press the ENTER key.

Viewing a Web Page (cont.)

Testing Links in a Web Page

Point to the e-mail link, plantworld@isp.com Click plantworld@isp.com Click the Close button in the New Message

window With the USB drive in drive G, point to the

link desert plants. Click desert plants.

Testing Links in a Web Page (cont.)

Editing the Second Web Page

The current version of the desertplants.htm web page lacks of style format.

Opening an HTML File

Click the Notepad button on the taskbar. With the USB drive plugged into your computer, click File on

the menu bar, and then click Open on the File menu. If necessary, click the Look in box arrow, and then click USB

drive (G:). Click the Project03 folder, and then click the ProjectFiles folder in the list of available folders.

If necessary, click the Files of type box arrow, and then click All Files. Click desertplants.htm in the list of files.

Click the Open button in the Open dialog box.

Opening an HTML File (cont.)

Formatting Text

Text Formatting Tags

HTML TAG FUNCTION

<b> </b> Physical style tag that displays text as bold

<big> </big> Increases the font size in comparison to the surrounding text

<blockquote>

</blockquote>

Designates a long quotation; indents margins on sections of text

<em> </em> Logical style tag that display text with emphasis (italicized)

<i> </i> Physical stile tag that displays text as italicized

<pre> </pre> Sets enclosed text as preformatted material, meaning it preserves spaces and line breaks; often used for text in column format in another document pasted into HTML code

<small></small> Decreases the font size in comparison to the surrounding text

Formatting Text (cont.)

Text Formatting Tags (cont.)

HTML TAG FUNCTION

<strong> </strong>

Logical style tag that displays text with strong emphasis (bold)

 Displays text as subscript (below normal text)

 Displays text as superscript (above normal text)

<tt> </tt> Displays text as teletype or monospace text

<u> </u> Displays text as underlined

Formatting Text in Bold

Click immediately to the left of the B in Botanical. Type <b> as the start tag.

Click immediately to the right of the colon (:) in Botanical name: and then type </b> as the end tag.

Repeat the first two steps to bold the other three occurrences of the phrase, Botanical name:.

Formatting Text in Bold (cont.)

Formatting Text in Italics

Click immediately to the left of the Agavaceae . Type <em> as the start tag.

Click immediately to the right of the at the end of Agavaceae. Type </em> as the end tag.

Repeat the first two steps to italicize the other botanical names.

Formatting Text in Italics

Formatting Text with a Font Color

Click immediately to the left of the word, DESERT. Type <font color="#000099"> as the start tag.

Click immediately to the right of the word, PLANTS. Type </font> as the end tag.

Formatting Text with a Font Color (cont.)

Adding an Image with Wrapped Text

Highlight the words <!--Insert Agave image here --> Type <img src="agave.jpg“ align="right" alt="Agave" width="212“ height="203" /> and do not press the ENTER key

Highlight the words <!--Insert Desert Spoon image here -->

Type <img src=“desertspoon.jpg" align=“left" alt=“Desert Spoon“ width="245" height="198" /> to insert a left-aligned image with wrapped text

Adding an Image with Wrapped Text (cont.)

Highlight the words <!--Insert Golden Barrel image here -->

Type <img src="goldenbarrel.jpg" align="right" alt= "Golden Barrel“ width="292" height="197" /> to insert a right-aligned image with wrapped text

Highlight the words <!– Insert Prickly Pear image here -->

Type <img src= "pricklypear.jpg“ align="left“ alt= "Prickly Pear" width="250“ height="255" /> to insert a left-aligned image with wrapped text

Adding an Image with Wrapped Text (cont.)

Clearing the Text Wrapping

Highlight the words <!--Insert right break clear here --> and then type <br clear="right" /> as the tag

Highlight the words <!--Insert right break clear here --> and then type <br clear="right" /> as the tag

Highlight the words <!--Insert left break clear here --> and then type <br clear="left" /> as the tag

Highlight the words <!--Insert left break clear here --> and then type <br clear="left" /> as the tag

Clearing the Text Wrapping (cont.)

Adding a Text Link to a Web Page in Another Web Site

Click immediately to the left of Arizona on and type

<a href="http://www.desertmuseum.org">

to add the text link Click immediately to the right of Museum and

type </a> to end the tag

Adding a Text Link to a Web Page in Another Web Site (cont.)

Setting Link Targets

Click immediately to the left of the <font> tag of the Agave Americana phrase

Type <a name="agaveamericana"></a> to create a link target named agaveamericana

Click immediately to the left of the <font> tag of the Desert spoon phrase

Type <a name="desertspoon"></a> to create a link target named desertspoon

Setting Link Targets (cont.)

Click immediately to the left of the <font> tag of the Golden Barrel phrase

Type <a name="goldenbarrel"></a> to create a link target named goldenbarrel

Click immediately to the left of the <font> tag of the Prickly Pear phrase

Type <a name="pricklypear"></a> to create a link target named pricklypear

Setting Link Targets (cont.)

Adding Links to Link Targets within a Web Page

Highlight the words <!--Start unordered list here --> Type <ul type="square"> and then press the

ENTER key Type <li><a href="#agaveamericana"> Agave Americana </a></li> and then press the ENTER key

Type <li><a href="#desertspoon"> Desert Spoon</a></li> and then press the ENTER key

Adding Links to Link Targets within a Web Page (cont.)

Type <li><a href= "#goldenbarrel">Golden Barrel</a></li> and then press the ENTER key

Type <li><a href="#pricklypear"> Prickly Pear</a></li> and then press the ENTER key

Type </ul> and then press the ENTER key

Adding Links to Link Targets within a Web Page (cont.)

Adding Links to a Target at the Top of the Page

Click to the right of the <body> init tag, and then press the ENTER key

Type <a name="top"></a> as the tag Before the <a name="desertspoon"></a>, type <p><a href="#top"><font size=-1>To top</font></a></p>as the tag

Press the ENTER key

Adding Links to a Target at the Top of the Page (cont.)

Copying and Pasting HTML Code

Highlight the HTML code, <p><a href="#top"><font size= -1> To top </font> </a></p> (the previous text entered)

Click Edit on the menu bar and then click Copy

Copying and Pasting HTML Code (cont.)

Click Edit on the menu bar and then click Paste

Press the ENTER key Repeat the second step on the previous slide

to paste the HTML code to the end of each plant name description

Copying and Pasting HTML Code (cont.)

Adding an Image Link to a Web Page

Click immediately to the left of <img src="plantworldsm.jpg"

Type <a href="plantworld.htm"> as the tag and then press the ENTER key

Click immediately to the right of alt=“ “ />

Adding an Image Link to a Web Page (cont.)

Type </a> as the tag Click immediately to the left of alt=“ “ /> on

<img src="plantworldsm.jpg" Type border=“0” and then press the

SPACEBAR

Adding an Image Link to a Web Page (cont.)

Saving and Printing the HTML File

Save the HTML file by clicking File on the menu bar, and then clicking Save on the File menu

Click File on the menu bar, and then click Print on the File menu

Saving and Printing the HTML File (cont.)

Printing a Web Page