Download presentation
Presentation is loading. Please wait.
1
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
2
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
3
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
4
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
5
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
6
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 links Project 3: Creating Web Pages with Links, Images, and Formatted Text
7
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
8
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
9
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
10
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
11
Using Links on a Web Page
Project 3: Creating Web Pages with Links, Images, and Formatted Text
12
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
13
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
14
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 link, automatically opens new message in default program and inserts appropriate contact address in the To field Note: if browser not configured to send mail, link will not work Project 3: Creating Web Pages with Links, Images, and Formatted Text
15
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
16
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
17
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
18
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
19
Font Attributes and Values
Project 3: Creating Web Pages with Links, Images, and Formatted Text
20
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
21
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
22
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 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
23
Tag Attributes and Functions
Project 3: Creating Web Pages with Links, Images, and Formatted Text
24
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
25
Adding an Link mailto: identifies link as link to appear as clickable text for link address end link Project 3: Creating Web Pages with Links, Images, and Formatted Text
26
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
27
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
28
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
29
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
30
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
31
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
32
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
33
targets named locations
Setting Link Targets targets named locations Project 3: Creating Web Pages with Links, Images, and Formatted Text
34
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
35
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
36
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
37
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
38
Formatting Text Project 3: Creating Web Pages with Links, Images, and Formatted Text
39
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
40
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
41
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
42
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
43
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
44
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
45
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
46
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
47
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
48
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
49
Creating Web Pages with Links, Images, and Formatted Text
Project 3 Complete Creating Web Pages with Links, Images, and Formatted Text
Similar presentations
