Download pptx - Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Project 3: Creating Web Pages with Links, Images, and Formatted Text 1

Chapter 3

Creating Web Pages with Links, Images, and Formatted Text

http://www.course.com/

http://www.scseries.com/


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




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

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




Entering HTML Tags to Define the Web Page Structure


Use the HTML templateon the In-Chapter HTML

Chapter 2 Web pageto create the code

listed here

http://access.nku.edu/djmanning/webfiles/zipped/webdesign/html/project2/hch2.exe




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





image link

text link

URL onstatus bar





More on Web

normal link

visited link

active link



http://www.w3.org/TR/REC-html40/struct/links.html

http://www.w3.org/TR/REC-html40/struct/links.html







image withborder and

no link

image withborder and normal link

image withborder and visited link




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




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




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




Using Absolute and Relative Paths

2 Kinds of Paths1. 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

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




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




Adding an Image

img tag toinsert image

src attribute usedto specify the

name andlocation of image

end imgtag

width attributeand value

height attributeand value

alt attributeand value




Font Attributes and Values




Adding a Left-Aligned Heading with a Font Color

start h1heading tag

start font tag

font colorattribute andcolor code

end fonttag

end h1heading tag




Creating Unordered (Bulleted) Lists

start ul tagwith square

bullets

h2 headingline items

end ul tag




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




Tag Attributes and Functions




Adding a Text Link to Another Web Page within the Same Web Site

start<a> tag

link to Web pagespecials.html

monthly specials toappear as text link

end<a> tag




Adding an E-Mail Link

mailto:identifies linkas e-mail link

[email protected] appear as

clickable text fore-mail link

e-mailaddress

endlink




Adding a Text Link to a Web Page in Another Web Site


start<a> tag

link to Web pagewikipedia.org

history of pasta toappear as text link

end<a> tag




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


http://validator.w3.org/

http://validator.w3.org/#validate_by_upload



Project 3: Creating Web Pages with Links, Images, and Formatted Text 28Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 28


• 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









Viewing a Web Page

h2 heading

h1 heading

bulleted listwith squarebullet type




Testing Links in a Web Page

More on Web

Pasta divineWeb page prior

to editing



http://www.pantos.org/atw/testing.html

http://www.pantos.org/atw/testing.html


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



http://www.awesomelibrary.org/faster2.html

http://www.awesomelibrary.org/faster2.html


Setting Link Targets

targetsnamed locations




Adding Links to Link Targets within a Web Page

Links to link targets

named locations




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 – <a href="#top">To top </a> as the tag




Adding Links to a Target at the Top of the Page

Links to top target

named location

More on Web



http://www.lynda.com/hex.asp

http://www.lynda.com/hex.asp


Formatting Text

• 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> – text should have a strong emphasis

• most browsers interpret as bold • physical style tags specify a particular font

change interpreted strictly by all browsers– bold tag

• in practice, and tags have same result when Web page displayed

More on Web



http://www.goer.org/HTML/

http://www.goer.org/HTML/


Formatting 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 tag to stop text wrapping• • clears both left and right alignments

More on Web



http://www.backgroundcity.com/

http://www.backgroundcity.com/


Adding an Image with Wrapped Text

Image with Wrapped Text




Clearing the Text Wrapping

ClearingWrapped Text




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”




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




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




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




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

http://www.w3.org/MarkUp/

http://access.nku.edu/djmanning/webfiles/i186ass6.htm



HTMLConcepts and Techniques

Fourth Edition

Project 3 Complete

Creating Web Pages with Links, Images, and Formatted Text