UNIT 2. Creating Web Pages with Links, Images, and Formatted Text

Size: px

Start display at page:

Download "UNIT 2. Creating Web Pages with Links, Images, and Formatted Text"

Cori Conley
5 years ago
Views:

1 UNIT 2 Creating Web Pages with Links, Images, and Formatted Text

2 DAY 1 Types of Links!

3 LESSON LEARNING TARGETS I can describe hyperlink elements and their associated terms. I can describe the different types of link locations. I can describe the paths needed for absolute and relative paths.

4 Project Overview: Plant World Web Site

5 5 Plant World Home Page Project 3: Creating Web Pages with Links, Images, and Formatted Text

6 Desert Plant Page

7 Desert Plant Page (continued)

8 Using Links on a Web Page

9 HYPERLINK ELEMENTS Hyperlink (or Link) Text, images, animations, or other Web page elements that you click to tell the browser to go to a different location in the page, to a new page, or a new Web site Used to navigate within, around, and between Web sites

10 HYPERLINK ELEMENTS Hyperlink (or Link ) Can link to graphics, sound, video, programs, etc. Text and graphics - the most common types of links used in a Web page

11 HYPERLINK ELEMENTS Hyperlink (or Link) Usually, when moving the mouse over a link: Pointer changes from arrow to pointing hand symbol URL of linked file is displayed on the bottom status bar of the browser

12 HYPERLINK ELEMENTS Hyperlink (or Link) When creating a link on a page avoid generic phrases like Click here use descriptive phrases indicating the purpose of the link

13 HYPERLINK ELEMENTS Hyperlink (or Link) Typical Color Schemes for Text Links Normal (unvisited) link: blue underlined Visited link: purple underlined Active (currently selected) link: underlined; color varies (usually red) Same color scheme applies to the borders of image links (if borders are being displayed)

14 HYPERLINK ELEMENTS Hyperlink (or Link) Colors for links can be set in browser Example: Internet Explorer using the Tools Menu

15 HYPERLINK ELEMENTS Hyperlink (or Link) Colors for links can also be manually set to override browser defaults: In <body> tag: <body link= color1 vlink= color2 alink= color3 > Note: color is any designated color (hexadecimal) code or predefined constant

16 Attribute Function link = In body tag Controls color of normal, unvisited link Default is usually blue vlink = In body tag Controls color of link that has been visited/clicked Default is usually purple alink = In body tag Controls color of link immediately after mouse clicks the hyper link Default color is red

17 TYPES OF LINK LOCATIONS Linking to Another Page within the Same Web Site Allows a user to move from one page to another within a Web site with multiple pages

18 Plant World Home Page Desert Plants Page Project 3: Creating Web Pages with Links, Images, and Formatted Text

19 TYPES OF LINK LOCATIONS Linking to a Web Page in Another Web Site A most important aspect of the Web! Allows users to connect to other Web pages with related information Allows the Web to be an interconnected resource

20 Home Page from Another Web Site Desert Plants Page

21 TYPES OF LINK LOCATIONS Linking within a Web Page Allows users to move quickly from one section of the Web page to another Especially important for Web pages that are long and require visitor to scroll down to see all of its content Often will appear in a menu of links at top of page

22 Project 3: Creating Web Pages with Links, Images, and Formatted Text Desert Plants Page

23 Linking to an Address Called an Link TYPES OF LINK LOCATIONS Allows users an opportunity to contact someone at the company for questions or more information

24 TYPES OF LINK LOCATIONS Linking to an Address Usually found on the home page, but often on other pages as well Automatically opens a blank new message, with contact address filled in; may also indicate the subject automatically

25 Plant World Home Page

26 PATHS OF LINKS ON A WEB PAGE Files and Folder Structure For smaller Web sites, it is easiest to keep all files related to the Web site within the same folder (image and HTML files)

27 PATHS OF LINKS ON A WEB PAGE Files and Folder Structure For larger Web sites, it is common to separate HTML code files in one folder, and graphical images into another sometimes, even large sections of Web pages will be kept in separate folders

28 PATHS OF LINKS ON A WEB PAGE Files and Folder Structure Problem: How to access files in various folders when all the files are not in the same folder??

29 Path: PATHS OF LINKS ON A WEB PAGE describes the location (folder or external Web site) where the files can be found lists the folders and subfolders in which the file resides Example: a:\proj3files\images\picture.jpg

30 PATHS OF LINKS ON A WEB PAGE Absolute Link Specifies the exact address for the file to which you are linking or displaying a graphic Starts with the root directory and lists all the subdirectories it takes to get to the file Example: a:\proj3files\images\picture.jpg

31 PATHS OF LINKS ON A WEB PAGE Absolute Link Advantage: you will always find the file you want, provided the path is correct Disadvantages: cumbersome to use and type in need to manually change all absolute links when a file is moved to a different folder or a different Web site server Example: Uploading a Web site

32 PATHS OF LINKS ON A WEB PAGE Relative Link Specifies the location of a file relative to the location of the file that is currently in use Doesn t take you back to the root directory, but starts specifying location based on where you are right now Uses double period (..) to move up or down the folder structure Example:..\images\picture.jpg

33 Relative Link Advantage: allows for flexibility PATHS OF LINKS ON A WEB PAGE if the root folder must change for some reason, you will not have to change all the links Example: Uploading a Web site Disadvantages: exact path may not be easily known Bottom line: use relative links whenever possible!

34 Creating the Plant World Home Page

35 SKELETON Type normal starting HTML tags into Notepad: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN xhtml1-transitional.dtd >

36 Type: <html> SKELETON <head> <title>plant World Home Page</title> </head> <body> </body> </html>

38 SAVING YOUR FILE Save your HTML document as: plantworld.htm Be sure to save in the a:\proj2files folder! View the file in your browser Should be blank except for title bar!

39 ADDING AN IMAGE Using a company logo on a Web site helps users to more readily relate to the Web site Type (after the <body> tag) <img src="plantworldlg.jpg width="720 height="84 alt="plant World logo" />

41 HOMEWORK Worksheet 2A Experiment Can you add your own images?!?!?!

43 DAY 2 Changing Fonts, Background IMAGES, and Hyperlinks!

44 LESSON LEARNING TARGETS I can use the tag to format text. I can add a background image to a Web page. I can use the <a> tag to create links between Web pages and with an link.

45 Text and Background Attributes

46 CHANGING TEXT FONT ATTRIBUTES Font Attributes Any text (paragraphs, headings, etc.) can be formatted using: different colors different font faces different sizes

47 Font Attributes Uses the Font tag: CHANGING TEXT FONT ATTRIBUTES and often used as a nested tag (i.e. used within another tag, such as a heading tag or a paragraph tag)

48 Attribute Function color = Changes the font color Inside quotations is a 6-digit color code OR color name face = Changes the font face or type Inside quotations is font name (Arial, Verdana, etc) If no font default font is used size = Changes the font size Inside quotations is a number that represents font size Value can be font size: 1(smallest) to 7 (largest) Value also be relative compared to previous cont +2 = 2 sizes bigger than preset font -3 = 3 sizes smaller than preset font

49 ADDING A LEFT-ALIGNED HEADING WITH A FONT COLOR After image tag, type: <h1>welcome to Plant World!</h1> Notice: Nested tags A set of tags inside of other tags Must be closed in the opposite order they were started!

51 ENTERING A PARAGRAPH OF TEXT After the heading tag, 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.

53 CHANGING FONT ATTRIBUTES To change the (actual) size of part of the text, insert the colored code: 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.

54 CHANGING FONT ATTRIBUTES To change the color of part of the text, insert the colored code: 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.

55 CHANGING FONT ATTRIBUTES To change the font face of part of the text, insert the colored code: 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.

56 CHANGING FONT ATTRIBUTES To change the (relative) size of part of the text, insert the colored code: 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.

57 CREATING UNORDERED (BULLETED) LISTS After the paragraph, enter the code to produce the unordered list at the left; use <h2> for the headings

59 BACKGROUND ATTRIBUTES Recall: Background Color Attribute bgcolor=... Sets the Web page s background color Use either 6-digit hexadecimal code for color Name of one of the standard 16 colors Used in the <body> tag

60 BACKGROUND ATTRIBUTES Background Images Used to set the Web page s background as an image, not just a color background= imagefile.jpg Also used in the <body> tag

61 ADDING A BACKGROUND IMAGE In the Body tag, add the following <body background= greyback.jpg >

63 Creating Hyperlinks

64 CREATING HYPERLINKS Anchor Tag Used to create links in a Web page <a> and </a> Tag Function End Tag <a> Creates anchors for links to Another page in the same web site A location within the same web page A page in an external web site For links </a>

65 CREATING HYPERLINKS Anchor Tag General Format: <a href= URL >LinkText</a> href: hypertext reference URL: the location of the linked page or file LinkText: the clickable word or phrase that appears on the Web page should be descriptive word or phrase, such as the name of the content, or could be actual URL

66 <a> Tag Attributes Attribute Function href = Specifies the URL of the linked page name = Gives name so the link may be the target or destination of another link Each anchor must have its own unique name type = Specifies the type of file of the linked document Examples: Text html, css, or javascript Image jpg Video quicktime Application java

67 ADDING A TEXT LINK TO ANOTHER WEB PAGE WITHIN THE SAME WEB SITE Immediately after the second unordered list, 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!

68 ADDING A TEXT LINK TO ANOTHER WEB PAGE WITHIN THE SAME WEB SITE Insert the following code directly before and after desert plants in the last sentence of the paragraph: <a href="desertplants.htm">desert plants</a>

70 USING LINKS Links General Format: <a href= > LinkText</a> mailto: indicates an link automatically opens a new message in the default program inserts the contact address into the can also be given a subject line for the message

71 ADDING AN LINK After the last paragraph, type have a question or comment? Call us at (206) 555-PLANT or us at plantworld@isp.com.

72 ADDING AN LINK Type right before and after the address: <a </a>.

74 Save your HTML document as: SAVING AND PRINTING AN HTML FILE plantworld.htm Be sure to save in the Proj2Files folder! 74 Print the file using the File menu

75 VIEWING A WEB PAGE Open the file in your Web browser: View the Web page to be sure all the elements appear as desired

76 76 VIEWING A WEB PAGE Project 3: Creating Web Pages with Links, Images, and Formatted Text

77 TESTING LINKS IN A WEB PAGE Test the links to verify that they work correctly: Point to the link, plantworld@isp.com Click plantworld@isp.com Click the Close button in the New Message window Click desert plants link

78 78 DESERT PAGE NOT CURRENTLY THERE! Go to my classroom Website download the deserts.htm file Make sure to save it in the Proj2Files folder with the current homepage file!

79 The Desert Plants Web Page should open when you click on the link in the home page

80 Worksheet 2B HOMEWORK

Creating Web Pages with Links, Images, and Embedded Style Sheets

HTML 3 Creating Web Pages with Links, Images, and Embedded Style Sheets Objectives You will have mastered the material in this chapter when you can: Describe linking terms and definitions Create a home