Creating Web Pages with Links, Images, and Formatted Text

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

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 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Project Objectives Add a background image
Add a text link to a Web page in the same Web site Add an link View the HTML file and test the links Open an HTML file Project 3: Creating Web Pages with Links, Images, and Formatted Text

Project Objectives 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 Project 3: Creating Web Pages with Links, Images, and Formatted Text

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 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Entering HTML Tags to Define the Web Page Structure
Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Image Type <img src="plantworldlg.jpg“ width="720“ height="84“ alt="Plant World logo" /> and then press the ENTER key Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Image Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding a Left-Aligned Heading with a Font Color
With the insertion point on line 11, type <h1>Welcome to Plant World!</h1> and then press the ENTER key Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding a Left-Aligned Heading with a Font Color

Entering a Paragraph of Text
With the insertion point on line 12, 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 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Entering a Paragraph of Text

Creating Unordered (Bulleted) Lists
If necessary, click line 16 Enter the HTML code shown in Table 3-3 on page HTM 85 Press the ENTER key twice to insert a blank line on line 29, after the second </ul> in the HTML code Project 3: Creating Web Pages with Links, Images, and Formatted Text

Creating Unordered (Bulleted) Lists

Adding a Background Image
Click immediately to the right of the y in the <body> tag on line 9 and then press the SPACEBAR Type background=“greyback.jpg” as the attribute Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding a Background Image

Adding a Text Link to Another Web Page within the Same Web Site
Click immediately to the right of the </ul> tag on line 28 and then press the DOWN ARROW key twice With the insertion point on line 30, 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 d in desert on line 32 Type <a href="desertplants.htm"> to start the link Click immediately to the right of the s in plants on line 33. Type </a> to close the link Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Adding an Link With the insertion point on line 34, type Have a question or comment? Call us at (206) 555-PLANT or us at as a new paragraph of text. Click immediately before the p in plantworld on line 34. Type <a href="mailto: to start the link Click immediately after the m in com in the address text. Type </a> to end the link Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Link Project 3: Creating Web Pages with Links, Images, and Formatted Text

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 (G:) 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 Project 3: Creating Web Pages with Links, Images, and Formatted Text

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 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Viewing a Web Page Project 3: Creating Web Pages with Links, Images, and Formatted Text

Testing Links in a Web Page
Point to the link, Click 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 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Testing Links in a Web Page

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 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Opening an HTML File Project 3: Creating Web Pages with Links, Images, and Formatted Text

Formatting Text in Bold
Click immediately to the left of the B in Botanical on line 32. Type as the start tag Click immediately to the right of the colon (:) in Botanical name: on line 32, and then type as the end tag Repeat the first two steps to bold the other three occurrences of the phrase, Botanical name:, on lines 45, 57, and 69 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Formatting Text in Bold

Formatting Text in Italics
Click immediately to the right of the on line 32. Type as the start tag Click immediately to the right of the at the end of Agavaceae on line 32. Type as the end tag Repeat the first two steps to italicize the other botanical names on lines 45, 57, and 69 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Formatting Text in Italics

Formatting Text with a Font Color
Click immediately to the left of the word, DESERT, on line 11. Type as the start tag Click immediately to the right of the word, PLANTS, on line 11. Type as the end tag Project 3: Creating Web Pages with Links, Images, and Formatted Text

Formatting Text with a Font Color

Adding an Image with Wrapped Text
Highlight the words  on line 31 Type <img src="agave.jpg“ align="right" alt="Agave" width="212“ height="203" /> and do not press the ENTER key Highlight the words  on line 44 Type <img src=“desertspoon.jpg" align=“left" alt=“Desert Spoon“ width="245" height="198" /> to insert a left-aligned image with wrapped text Project 3: Creating Web Pages with Links, Images, and Formatted Text

Highlight the words  on line 56 Type <img src="goldenbarrel.jpg" align="right" alt= "Golden Barrel“ width="292" height="197" /> to insert a right-aligned image with wrapped text Highlight the words <!– Insert Prickly Pear image here --> on line 68 Type <img src= "pricklypear.jpg“ align="left“ alt= "Prickly Pear" width="250“ height="255" /> to insert a left-aligned image with wrapped text Project 3: Creating Web Pages with Links, Images, and Formatted Text

Clearing the Text Wrapping
Highlight the words  on line 41 and then type as the tag Highlight the words  on line 65 and then type as the tag Highlight the words  on line 53 and then type as the tag Highlight the words  on line 77 and then type as the tag Project 3: Creating Web Pages with Links, Images, and Formatted Text

Clearing the Text Wrapping

Adding a Text Link to a Web Page in Another Web Site
Click immediately to the left of Arizona on line 80 and type <a href=" to add the text link Click immediately to the right of Museum on line 81 and type </a> to end the tag Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Setting Link Targets Click immediately to the left of the tag on line 30 Type <a name="agaveamericana"></a> to create a link target named agaveamericana Click immediately to the left of the tag on line 43 Type <a name="desertspoon"></a> to create a link target named desertspoon Project 3: Creating Web Pages with Links, Images, and Formatted Text

Setting Link Targets Click immediately to the left of the tag on line 55 Type <a name="goldenbarrel"></a> to create a link target named goldenbarrel Click immediately to the left of the tag on line 67 Type <a name="pricklypear"></a> to create a link target named pricklypear Project 3: Creating Web Pages with Links, Images, and Formatted Text

Setting Link Targets Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding Links to Link Targets within a Web Page
Highlight the words  on line 28 Type <ul type="square"> and then press the ENTER key Type <li><a href="#agaveamericana"> Agave Americana </a></li> and then press the ENTER key Type <li><a href="#desertspoon"> Desert Spoon</a></li> and then press the ENTER key Project 3: Creating Web Pages with Links, Images, and Formatted Text

Type <li><a href= "#goldenbarrel">Golden Barrel</a></li> and then press the ENTER key Type <li><a href="#pricklypear"> Prickly Pear</a></li> and then press the ENTER key Type </ul> and then press the ENTER key Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding Links to a Target at the Top of the Page
Click to the left of the > symbol on line 9, and then press the ENTER key Position the insertion point on line 10 and type <a name="top"></a> as the tag Position the insertion point on the blank line 48 and then type <a href="#top">To top </a> as the tag Press the ENTER key Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding Links to a Target at the Top of the Page

Copying and Pasting HTML Code
Highlight the HTML code, <a href="#top"> To top </a>, on line 48 Click Edit on the menu bar and then click Copy Position the insertion point on line 61 Project 3: Creating Web Pages with Links, Images, and Formatted Text

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 on lines 74 and 88 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Image Link to a Web Page
Click immediately to the left of <img on line 11 Type <a href="plantworld.htm"> as the tag and then press the ENTER key Click immediately to the right of alt=“ “ /> on line 12 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Type </a> as the tag Click immediately to the left of alt=“ “ /> on line 12 Type border=“0” and then press the SPACEBAR Project 3: Creating Web Pages with Links, Images, and Formatted Text

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 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Saving and Printing the HTML File

Viewing and Testing a Web Page
Click the Desert Plants button on the taskbar to view the page in your browser Click the Refresh button on the Standard toolbar Project 3: Creating Web Pages with Links, Images, and Formatted Text

Printing a Web Page Click the Print button on the Standard toolbar

Quitting Notepad and a Browser
Click the Close button on the browser title bar Click the Close button on the Notepad window title bar Project 3: Creating Web Pages with Links, Images, and Formatted Text

Project Summary 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 Project 3: Creating Web Pages with Links, Images, and Formatted Text

Project Summary Add a background image
Add a text link to a Web page in the same Web site Add an link View the HTML file and test the links Open an HTML file Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Creating Web Pages with Links, Images, and Formatted Text

Similar presentations

Presentation on theme: "Creating Web Pages with Links, Images, and Formatted Text"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Creating Web Pages with Links, Images, and Formatted Text

Similar presentations

Presentation on theme: "Creating Web Pages with Links, Images, and Formatted Text"— Presentation transcript:

Similar presentations

About project

Feedback