Creating Web Pages with Links, Images, and Formatted Text Chapter 3 Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 1
Project Objectives Describe linking terms and definitions Create a home page and enhance a Web page using images Align and add bold, italics, and color to text Change the bullet type used in an unordered list Add a text link to a Web page in the same Web site Project 3: Creating Web Pages with Links, Images, and Formatted Text
Project Objectives Add an e-mail link Use absolute and relative paths Save and view an HTML file and test the links Open an HTML file Add an image with wrapped text Project 3: Creating Web Pages with Links, Images, and Formatted Text
Project Objectives 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 Project 3: Creating Web Pages with Links, Images, and Formatted Text
Plan Ahead Plan the Web site Analyze the need Choose the content for the Web page Determine how the pages will link to one another Establish what other links are necessary Create the Web page and links Test all Web pages within the Web site Project 3: Creating Web Pages with Links, Images, and Formatted Text Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 5
Introduction Project uses the following types of links text and image links to another Web page in the same Web site text links to another Web page in a different Web site text links within a Web page e-mail links Project 3: Creating Web Pages with Links, Images, and Formatted Text
Entering HTML Tags to Define the Web Page Structure Use the HTML template on the In-Chapter HTML Chapter 2 Web page to create the code listed here Chapter 3: Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 7 7
Using Links on a Web Page moving mouse pointer over a link causes mouse pointer to change to a pointing hand displays URL of linked page on the status bar of browser use descriptive text as the clickable word “Click here” – does not explain purpose of link “Save up to 60% on airfare” better choice default color of links set by browser unless coded in <body> tag in HTML code same color defaults apply to border color around an image link Project 3: Creating Web Pages with Links, Images, and Formatted Text
Using Links on a Web Page image link text link URL on status bar Project 3: Creating Web Pages with Links, Images, and Formatted Text
Using Links on a Web Page normal link visited link active link More on Web Project 3: Creating Web Pages with Links, Images, and Formatted Text
Using Links on a Web Page Project 3: Creating Web Pages with Links, Images, and Formatted Text
Using Links on a Web Page image with border and normal link image with border and visited link image with border and no link Project 3: Creating Web Pages with Links, Images, and Formatted Text
Linking within a Web Page allows user to move quickly from one section of a long Web page to another move directly to a section of interest rather than scrolling through a document use list of links like a menu or table of contents at the top of the page Project 3: Creating Web Pages with Links, Images, and Formatted Text
Linking to an E-Mail Address home page provides a way for visitors to contact person at company responsible for maintaining Web site or addressing customer questions or comments when visitor clicks e-mail link, automatically opens new message in default e-mail program and inserts appropriate contact e-mail address in the To field Note: if browser not configured to send mail, e-mail link will not work Project 3: Creating Web Pages with Links, Images, and Formatted Text
Using Absolute and Relative Paths All projects in book both HTML code and graphical images saved in the same folder more appropriate to separate HTML code files and graphical images files into different folders create folder structure in which each functional area has its own folder path describes the location (folder or external Web site) where the files can be found Project 3: Creating Web Pages with Links, Images, and Formatted Text
Using Absolute and Relative Paths 2 Kinds of Paths Absolute specifies exact address for the file E:\HTML\ChapterFiles\Chapter03\pastadivine.html cumbersome – if files are moved to different folder or Web server all absolute paths would have to change Relative specify location of a file, relative to location of current file utilizes double period (..) symbol to move up or down the folder structure ..\images\pastadivine.html relative path better choice offers more flexibility if root folder must change would not have change the addressing Project 3: Creating Web Pages with Links, Images, and Formatted Text
Adding an Image Pasta Divine home page includes an image logo to provide visual appeal, catch visitor’s interest and promote company brand. logo image is same image found in print on company stationary, cards, and other promotional materials consistent visual and brand message including width and height of logo image will improve load time alt attribute appears when page is loading and when user moves mouse over image Project 3: Creating Web Pages with Links, Images, and Formatted Text
Adding an Image width attribute and value alt attribute and value end img tag img tag to insert image src attribute used to specify the name and location of image height attribute and value Project 3: Creating Web Pages with Links, Images, and Formatted Text
Font Attributes and Values Project 3: Creating Web Pages with Links, Images, and Formatted Text
Adding a Left-Aligned Heading with a Font Color start h1 heading tag end h1 heading tag start font tag font color attribute and color code end font tag Project 3: Creating Web Pages with Links, Images, and Formatted Text
Creating Unordered (Bulleted) Lists start ul tag with square bullets h2 heading line items end ul tag Project 3: Creating Web Pages with Links, Images, and Formatted Text
Adding a Text Link <a> and </a> tags used to create links in a Web page. <a> tag also is called the anchor tag because it is used to create anchors for links to another page in same Web site, to an external Web site, within same Web page, or an e-mail link. basic format: <a href=“URL”>linktext</a> linktext is clickable word or phrase on Web page href (hypertext reference) name or URL of linked page or file Project 3: Creating Web Pages with Links, Images, and Formatted Text
Tag Attributes and Functions Project 3: Creating Web Pages with Links, Images, and Formatted Text
Adding a Text Link to Another Web Page within the Same Web Site end <a> tag start <a> tag link to Web page specials.html monthly specials to appear as text link Project 3: Creating Web Pages with Links, Images, and Formatted Text
Adding an E-Mail Link mailto: identifies link as e-mail link pastadivine@isp.com to appear as clickable text for e-mail link e-mail address end link Project 3: Creating Web Pages with Links, Images, and Formatted Text
Adding a Text Link to a Web Page in Another Web Site end <a> tag start <a> tag link to Web page wikipedia.org history of pasta to appear as text link Project 3: Creating Web Pages with Links, Images, and Formatted Text Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 26
Validating a Web Page Click the Start button on the Windows Vista taskbar to display the Start menu Click the Internet icon in the pinned items list on the Start menu to start Internet Explorer. If necessary, click the Maximize button to maximize the browser window Click the Address bar to select the URL in the Address bar Type validator.w3.org to replace the current entry then press the ENTER key. Click the Validate by File Upload tab Project 3: Creating Web Pages with Links, Images, and Formatted Text Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 27
Validating a Web Page Click the Browse button Locate the pastadivine.html file on your storage device and click the file name Click the Open button in the Choose file dialog box and the file name will be inserted into the File box Click the Check button. The resulting validation should be displayed as shown on the following slide Chapter 3: Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 28 28
Validating a Web Page Project 3: Creating Web Pages with Links, Images, and Formatted Text Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 29
bulleted list with square bullet type Viewing a Web Page h1 heading h2 heading bulleted list with square bullet type Project 3: Creating Web Pages with Links, Images, and Formatted Text
Testing Links in a Web Page Pasta divine Web page prior to editing More on Web Project 3: Creating Web Pages with Links, Images, and Formatted Text
Setting Link Targets target – named location, link within the same Web page or file in project a bulleted list is added as links to the targets links are directed to the heading at the top of each major section when clicked links will move Web page visitor to the targets users will not have to scroll to topics or sections four text links names “To Top” will return users to top of document More on Web Project 3: Creating Web Pages with Links, Images, and Formatted Text
targets named locations Setting Link Targets targets named locations Project 3: Creating Web Pages with Links, Images, and Formatted Text
Adding Links to Link Targets within a Web Page Links to link targets named locations Project 3: Creating Web Pages with Links, Images, and Formatted Text
Adding Links to a Target at the Top of the Page HTML Code to setup target (top location) at beginning of document <a name="top"></a> as the tag HTML Code to use the target link (top) to return to the beginning of document <p><a href="#top"><font size=-1>To top</font> </a></p> as the tag Project 3: Creating Web Pages with Links, Images, and Formatted Text
Adding Links to a Target at the Top of the Page More on Web Links to top target named location Project 3: Creating Web Pages with Links, Images, and Formatted Text
Formatting Text More on Web logical style tags allow browser to interpret tag based on browser settings, relative to other text in a Web page <h2> heading tag larger than regular text yet smaller than <h1> <strong> text should have a strong emphasis most browsers interpret as bold physical style tags specify a particular font change interpreted strictly by all browsers <b> bold tag in practice, <strong> and <b> tags have same result when Web page displayed Project 3: Creating Web Pages with Links, Images, and Formatted Text
Formatting Text Project 3: Creating Web Pages with Links, Images, and Formatted Text
Adding an Image with Wrapped Text Alignment is a key consideration when inserting an image horizontal – values can be left or right vertical – values can be top, middle, or bottom of image alignment can give an image and the surrounding text completely different looks <img src=“agave.jpg” align=“right” alt=“Agave” width=“212” height=“203” /> must enter a break <br /> tag to stop text wrapping <br clear=“right” /> <br clear=“all” /> clears both left and right alignments More on Web Project 3: Creating Web Pages with Links, Images, and Formatted Text
Adding an Image with Wrapped Text Chapter 3: Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 40 40
Clearing the Text Wrapping Clearing Wrapped Text Chapter 3: Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 41 41
Using Horizontal and Vertical Spacing Using spacing between and around images can make the Web page easier to read hspace attribute of <img> tag controls amount of horizontal space around an image hspace=“20” vspace attribute of <img> tag controls amount of vertical space around an image vspace=“20” Project 3: Creating Web Pages with Links, Images, and Formatted Text
Using Thumbnail Images developers use thumbnail images to improve loading time thumbnail image is a smaller version of the image itself used as a link, when clicked loads full-sized image gives visitor opportunity to decide whether to view full-sized image create thumbnail version of image, image is resized to smaller size using a paint or image-editing application, then saved to a different file name <a href=“largeimage.gif”><img src=“thumbnail.gif” /></a> use Back button on browser to return to original Web page displaying the thumbnail Project 3: Creating Web Pages with Links, Images, and Formatted Text
Obtaining Images Web sites – downloaded free for noncommercial purposes (copyright rules) use search engine key words “free GIFs” or “free Web images” right-click image, click Save Picture As, save image to your computer clip art – found in applications scanner or digital camera create images – using paint or image-editing program Project 3: Creating Web Pages with Links, Images, and Formatted Text
Chapter Summary Describe linking terms and definitions Create a home page and enhance a Web page using images Align and add bold, italics, and color to text Change the bullet type used in an unordered list Add a text link to a Web page in the same Web site Chapter 3: Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 45 45
Chapter Summary Add an e-mail link Use absolute and relative paths Save and view an HTML file and test the links Open an HTML file Add an image with wrapped text Chapter 3: Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 46 46
Chapter Summary 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 Chapter 3: Creating Web Pages with Links, Images, and Formatted Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 47 47
Homework # 6 In the Lab 3 page HTML 140-141 Creating Two Linked Web Pages See INF 186 Computer Assignment 6 Web page for details, hints, and requirements for the assignment Project 3: Creating Web Pages with Links, Images, and Formatted Text
Creating Web Pages with Links, Images, and Formatted Text Project 3 Complete Creating Web Pages with Links, Images, and Formatted Text