1. 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

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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.

8. 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

9. Entering HTML Tags to Define the Web Page Structure

10. Adding an Image Type: and then press the ENTER key

11. Adding an Image (cont.)

12. 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

13. Adding a Left-Aligned Heading with a Font Color Type: Welcome to Plant World! and then press the ENTER key

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

15. 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 the 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

16. Entering a Paragraph of Text Type: 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

17. Entering a Paragraph of Text (cont.)

18. Creating Unordered (Bulleted) Lists Type (bullets can be: disc, square or circle): Our Company Founded in 1999 by Jared Adam Smith Headquartered in Fairfield, Connecticut 38 Store locations throughout New England

19. Creating Unordered (Bulleted) Lists (cont.) Type: Our Services Landscape design Planting and maintenance Online information for all types of plants

20. Creating Unordered (Bulleted) Lists (cont.)

21. Adding a Background Image Click immediately to the right of the (>) in the tag press the SPACEBAR. Type: background=“greyback.jpg” as the attribute.

22. Adding a Background Image (cont.)

23. Adding a Text Link to Another Web Page within the Same Web Site Click immediately to the right of the tag, and then press the ENTER key twice. Type: 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.

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

25. 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.

26. 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.

27. Adding an E-Mail Link Type: Have a question or comment? Call us at (206) 555-PLANT or e-mail us at plantworld@isp.com. as a new paragraph of text. Click immediately before the ”plantworld@isp.com” word. Type: to start the e-mail link. Click immediately after the “ com” in the e-mail address text. Type to end the e-mail link.

28. Adding an E-Mail Link (cont)

29. 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.

30. 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.

31. Viewing a Web Page (cont.)

32. 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.

33. Testing Links in a Web Page (cont.)

34. Editing the Second Web Page The current version of the desertplants.htm web page lacks of style format.

35. 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.

36. Opening an HTML File (cont.)

37. 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

38. 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

39. Formatting Text in Bold Click immediately to the left of the B in Botanical. 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:.

40. Formatting Text in Bold (cont.)

41. Formatting Text in Italics Click immediately to the left of the Agavaceae. Type as the start tag. Click immediately to the right of the at the end of Agavaceae. Type as the end tag. Repeat the first two steps to italicize the other botanical names.

42. Formatting Text in Italics

43. Formatting Text with a Font Color Click immediately to the left of the word, DESERT. Type as the start tag. Click immediately to the right of the word, PLANTS. Type as the end tag.

44. Formatting Text with a Font Color (cont.)

45. Adding an Image with Wrapped Text Highlight the words Type and do not press the ENTER key Highlight the words Type to insert a left- aligned image with wrapped text

46. Adding an Image with Wrapped Text (cont.) Highlight the words Type to insert a right- aligned image with wrapped text Highlight the words Type to insert a left- aligned image with wrapped text

47. Adding an Image with Wrapped Text (cont.)

48. Clearing the Text Wrapping Highlight the words and then type as the tag

49. Clearing the Text Wrapping (cont.)

50. Adding a Text Link to a Web Page in Another Web Site Click immediately to the left of Arizona on and type to add the text link Click immediately to the right of Museum and type to end the tag

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

52. Setting Link Targets Click immediately to the left of the tag of the Agave Americana phrase Type to create a link target named agaveamericana Click immediately to the left of the tag of the Desert spoon phrase Type to create a link target named desertspoon

53. Setting Link Targets (cont.) Click immediately to the left of the tag of the Golden Barrel phrase Type to create a link target named goldenbarrel Click immediately to the left of the tag of the Prickly Pear phrase Type to create a link target named pricklypear

54. Setting Link Targets (cont.)

55. Adding Links to Link Targets within a Web Page Highlight the words 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

56. 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

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

58. Adding Links to a Target at the Top of the Page Click to the right of the init tag, and then press the ENTER key Type as the tag Before the, type To top as the tag Press the ENTER key

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

60. Copying and Pasting HTML Code Highlight the HTML code, To top (the previous text entered) Click Edit on the menu bar and then click Copy

61. 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

62. Copying and Pasting HTML Code (cont.)

63. Adding an Image Link to a Web Page Click immediately to the left of <img src="plantworldsm.jpg" Type as the tag and then press the ENTER key Click immediately to the right of alt=“ “ />

64. 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" Type border=“0” and then press the SPACEBAR

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

66. 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

67. Saving and Printing the HTML File (cont.)

68. Printing a Web Page