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 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 link – A link to the Desert Plants web page
File Structure Disk Drive Project03 ProjectFile s HTMLcode (.htm files) HTMLcode (.htm files) images plantworld.htmdesertplants.htm plantworld.jpg
Using Absolute and Relative Paths To understand how to use the file structure, you need to identify the folder location (path) to the files. A path describes the location (folder or external web site) where the files (that is, a linked web page or a graphical image) can be found, beginning the Disk drive or root.
Using Absolute and Relative Paths (cont) A absolute path specifies the exact address for the file to which you are linking or displaying a graphic. To display the plantworld.jpg image: – Project03_v2\ProjectFiles\HTMLcode\plantworld.htm Relatives paths specify the location of a file relative to the location of the file that is currently in use: –..\images\plantworld.htm
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 Add a background image Add a text link to a Web page in the same Web site Add an link View the HTML file and test the links Open an HTML file 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 FrontPage Click the Start button All Programs Microsoft Office Microsoft FrontPage
Entering HTML Tags to Define the Web Page Structure Type on line 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Plant World Home Page
Adding an Image Type on line 10: and then press the ENTER key
Adding an Image (cont.) Image Attributes ATTRIBUTEFUNCTION align Controls alignment Can 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 image improves loading time width Defines the width of the image Improves 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 on line 11: Welcome to Plant World! and then press the ENTER key
Adding a Left-Aligned Heading with a Font Color (cont.) Font Attributes and Values ATTRIBUTE AND VALUE FUNCTION color=“#xxxxxx” Changes the font color Value inside quotation marks is a six-digit color code or color name face=“fontname” Changes the font face or name Value inside quotation marks is the name of a font, such as Verdana or Arial; text appears using th0e default font if the font face is not specified size=“x” Changes the font size Value inside quotation marks is a number that represents size Values 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 on line 12: 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. as the first paragraph in the HTML file Press the ENTER key twice
Creating Unordered (Bulleted) Lists Type (bullets can be: disc, square or circle) on line 16: Our Company Founded in 1999 by Jared Adam Smith Headquartered in Fairfield, Connecticut 38 Store locations throughout New England
Creating Unordered (Bulleted) Lists (cont.) Type: Our Services Landscape design Planting and maintenance Online information for all types of plants
Adding a Background Image Click immediately to the right of the (>) in the tag on line 9 and press the SPACEBAR. Type within on line 9: background=“greyback.jpg” as the attribute.
Adding a Text Link to Another Web Page within the Same Web Site Click immediately to the right of the tag on line 28, and then press the ENTER key twice. Type on line 30: 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! and then press the ENTER key. Click immediately to the left of the “desert” word. Type to start the link. Click immediately to the right of the “plants” word. Type to close the link.
Adding a Text Link to Another Web Page within the Same Web Site (cont.) Tag Attributes and Functions ATTRIBUTEFUNCTION 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 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.) Tag Attributes and Functions (cont.) ATTRIBUTEFUNCTION 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 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 Link Type on line 34: Have a question or comment? Call us at (206) 555-PLANT or us at as a new paragraph of text. Click immediately before the word on line 34 and type: to start the link. Click immediately after the “com” in the address text. Type to end the link.
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_v2 folder and then click the ProjectFiles, then HTMLcode 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_v2\ProjectFiles\HTMLcode\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 link, Click 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 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_v2 folder, then click the ProjectFiles folder, and then HTMLcode 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.
Formatting Text Text Formatting Tags HTML TAGFUNCTION Physical style tag that displays text as bold Increases the font size in comparison to the surrounding text Designates a long quotation; indents margins on sections of text Logical style tag that display text with emphasis (italicized) Physical stile tag that displays text as italicized 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 Decreases the font size in comparison to the surrounding text
Formatting Text (cont.) Text Formatting Tags (cont.) HTML TAGFUNCTION Logical style tag that displays text with strong emphasis (bold) Displays text as subscript (below normal text) Displays text as superscript (above normal text) Displays text as teletype or monospace text Displays text as underlined
Formatting Text in Bold Click immediately to the left of the B in Botanical on line 32. Type as the start tag. Click immediately to the right of the colon (:) in Botanical name: and then type as the end tag. Repeat the first two steps to bold the other three occurrences of the phrase, Botanical name:.
Formatting Text in Italics Click immediately to the right of the on line 32. Type as the start tag. Click immediately to the right of the e at the end of Agavaceae on line 32. Type as the end tag. Repeat the Steps 1 and 2 to italicize the other botanical names on lines 45, 57 and 69.
Formatting Text with a Font Color Click immediately to the left of the word, DESERT on line 11. Type as the start tag. Click immediately to the right of the word, PLANTS on line 11. Type as the end tag.
Adding an Image with Wrapped Text Highlight the words on line 31. Type and do not press the ENTER key. Highlight the words on line 44. Type to insert a left-aligned image with wrapped text.
Adding an Image with Wrapped Text (cont.) Highlight the words on line 56. Type to insert a right-aligned image with wrapped text Highlight the words on line 68. Type to insert a left-aligned image with wrapped text.
Clearing the Text Wrapping Highlight the words on line 41 and then type as the tag Highlight the words on line 65 and then type as the tag Highlight the words on line 53 and then type as the tag Highlight the words on line 77 and then type as the tag
Adding a Text Link to a Web Page in Another Web Site Click immediately to the left of Arizona on line 80 and type to add the text link Click immediately to the right of Museum and type to end the tag
Setting Link Targets Click immediately to the left of the tag of the Agave Americana phrase on line 30. Type to create a link target named agaveamericana Click immediately to the left of the tag of the Desert spoon phrase on line 43. Type to create a link target named desertspoon
Setting Link Targets (cont.) Click immediately to the left of the tag of the Golden Barrel phrase on line 55 Type to create a link target named goldenbarrel Click immediately to the left of the tag of the Prickly Pear phrase on line 67 Type to create a link target named pricklypear
Adding Links to Link Targets within a Web Page Highlight the words on line 28 Type and then press the ENTER key Type Agave Americana and then press the ENTER key Type Desert Spoon and then press the ENTER key
Adding Links to Link Targets within a Web Page (cont.) Type Golden Barrel and then press the ENTER key Type Prickly Pear and then press the ENTER key Type and then press the ENTER key
Adding Links to a Target at the Top of the Page Click to the right of the init tag on line 9, and then press the ENTER key On line 10, type as the tag On line 48, Before the, type To top as the tag Press the ENTER key
Copying and Pasting HTML Code Highlight the HTML code on line 48, To top (the previous text entered) Click Edit on the menu bar and then click Copy
Copying and Pasting HTML Code (cont.) On line 61, click Edit on the menu bar and then click Paste Press the ENTER key Repeat the second step 2 to paste the HTML code to the end of each plant name description (on lines 61, 74 and 88)
Adding an Image Link to a Web Page Click immediately to the left of <img src="plantworldsm.jpg“ on line 11 Type as the tag and then press the ENTER key Click immediately to the right of alt=“ “ /> on line 12
Adding an Image Link to a Web Page (cont.) Type as the tag Click immediately to the left of alt=“ “ /> on <img src="plantworldsm.jpg“ on line 12 Type border=“0” and then press the SPACEBAR
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