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 [email protected].</p>as a new paragraph of text.
Click immediately before the ”[email protected]” word. Type:
<a href="mailto: [email protected]"> 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, [email protected] Click [email protected] 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)
<sub> </sub> Displays text as subscript (below normal text)
<sup> </sup> 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
Top Related