HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.

Slides:



Advertisements
Similar presentations
Creating a Dreamweaver Web Page and Local Site
Advertisements

Creating Tables in a Web Site
HTML Concepts and Techniques Fourth Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.
Project 8 Creating Style Sheets.
Creating and Editing a Web Page Using Inline Styles
Using Advanced Cascading Style Sheets
Chapter 8 Creating Style Sheets.
Chapter 5 Creating an Image Map
Office 2003 Introductory Concepts and Techniques M i c r o s o f t Excel Web Feature Creating Static and Dynamic Web Pages Using Excel.
Creating and Editing a Web Page
Creating a Form on a Web Page
Office 2003 Introductory Concepts and Techniques M i c r o s o f t PowerPoint Web Feature Creating a Presentation on the Web Using PowerPoint.
CIS101 Introduction to Computing HTML Project Two.
Office 2003 Introductory Concepts and Techniques M i c r o s o f t Word Web Feature Creating Web Pages Using Word.
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
Creating Tables in a Web Site.  Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize.
Creating Web Pages with Links, Images, and Formatted Text.
HTML Concepts and Techniques Fourth Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.
Adding an Inline Style Sheet Page without Inline Style Sheet Page with Inline Style Sheet.
HTML Concepts and Techniques Fourth Edition Project 8 Creating Style Sheets.
Creating Tables in a Web Site
HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.
Project 1: Creating a Dreamweaver Web Page and Local Site 1 Project Objectives Add a background image Open and close panels Display and describe the Property.
Creating and Editing a Web Page using HTML IMED1316.
Creating and Editing a Web Page Project 2. Project Objectives Project 2: Creating and Editing a Web Page 2 Identify elements of a Web page Start Notepad.
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.
9 April 2008 Creating Web Pages with Links, Images, and Formatted Text WEB 101 – HTML Prof: Mariana Mendoza-Botero Escuela de Administración de Empresas.
9 April 2008 Creating Web Pages with Links, Images, and Formatted Text WEB 101 – HTML Prof: Mariana Mendoza-Botero Escuela de Administración de Empresas.
Creating Web Pages with Links, Images, and Formatted Text
HTML Concepts and Techniques Fourth Edition Project 6 Using Frames in a Web Site.
HTML, XHTML, and CSS Chapter 8 Adding Multimedia Content to Web Pages.
Project 2 Adding Web Pages, Links, and Images Dreamweaver MX 2004 Concepts and Techniques.
Writing a JavaScript User-Defined Function  A function is JavaScript code written to perform certain tasks repeatedly  Built-in functions.
HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.
HTML Concepts and Techniques Fourth Edition Project 12 Creating and Using XML Documents.
Creating a Form on a Web Page
Dreamweaver CS4 Concepts and Techniques Chapter 9 Using Spry to Create Interactive Web Pages.
Windows Internet Explorer 7 Chapter 1 Introduction to Windows Internet Explorer.
1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.
Dreamweaver CS4 Concepts and Techniques Chapter 2 Adding Web Pages, Links, and Images.
Chapter 1 Creating a Dreamweaver Web Page and Local Site
1 Creating Links within a Web Page  These links are especially useful on long Web pages  Links at the top of the page point to areas further down the.
1 Creating the Header Page The header frame always displays on the AHS Web site The image (screagle.gif) that will go in the header is contained on the.
HTML Comprehensive Concepts and Techniques Third Edition 2 nd Project Creating and Editing a Web Page.
HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.
Using Frames in a Web Site Project 6. Project Objectives Project 6: Using Frames in a Web Site 2 Define terms related to frames Describe the steps used.
HTML Concepts and Techniques Fifth Edition Chapter 4 Creating Tables in a Web Site.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
Creating and Editing a Web Page
1 Start TextEdit. 2 Creating a Home Page  A home page is the main page of a Web site –Visitors usually view the home page first –Identify the purpose.
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
Creating and Editing a Web Page Using Inline Styles
1 Your Web Page title body of Web page main heading H2 heading bulleted list paragraph.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Project 02 Creating and Editing a Web Page Concept Map of Unit Creating and Editing a Web Page Key Learning Understand the elements to create a web page.
XP New Perspectives on Creating Web Pages With Word Tutorial 1 1 Creating Web Pages With Word Tutorial 1.
Project 1 Creating a Dreamweaver Web Page and Local Site.
Project 8 Creating Style Sheets.
Creating Tables in a Web Site Using an External Style Sheet
Dreamweaver – Project #1
Creating a Web Site with Links
Using Frames in a Web Site
Creating Web Pages with Links, Images, and Formatted Text
Creating Tables in a Web Site
Project 5 Creating an Image Map.
Project 4 Creating an Image Map.
Creating and Editing a Web Page
DREAMWEAVER 8 Creating a Dreamweaver Web Page and Local Site.
Presentation transcript:

HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 3 Project Objectives 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 Add an image with wrapped text

HTML 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

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

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 7 Adding an Image Type and then press the ENTER key

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

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 10 Adding a Left-Aligned Heading with a Font Color

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 12 Entering a Paragraph of Text

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 14 Creating Unordered (Bulleted) Lists

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 16 Adding a Background Image

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 17 Adding a Text Link to Another Web Page within the Same Web Site Click immediately to the right of the 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, where 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 landscape! and then press the ENTER key Click immediately to the left of the d in desert on line 32 Type to start the link Click immediately to the right of the s in plants on line 33. Type to end the link and then press the ENTER key

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 18 Adding a Text Link to Another Web Page within the Same Web Site

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 19 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 to start the link Click immediately after the m in com in the e- mail address text. Type to end the link

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 21 Saving and Printing an HTML File With a floppy disk in drive A, click File on the menu bar and then click Save As. Type plantworld.htm in the File name text box If necessary, click 31⁄2 Floppy (A:) 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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 22 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 a:\Project03\ProjectFiles\plantworld.htm in the Address text box Press the ENTER key

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 24 Testing Links in a Web Page Point to the link, Click Click the Close button in the New Message window With the HTML Data Disk in drive A, point to the link, desert plants Click desert plants

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 25 Opening an HTML File Click the Notepad button on the taskbar With the HTML Data Disk in drive A, 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 31⁄2 Floppy (A:). Click the Project03 folder and then click the Project Files 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

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

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 28 Formatting Text in Bold

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 30 Formatting Text in Italics

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 32 Formatting Text with a Font Color

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 33 Adding an Image with Wrapped Text Highlight the words on line 31 Type and do not press the ENTER key Highlight the words on line 44 Type to insert a left-aligned image with wrapped text

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 34 Adding an Image with Wrapped Text Highlight the words on line 56 Type to insert a right-aligned image with wrapped text Highlight the words on line 68 Type to insert a left-aligned image with wrapped text

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

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 37 Clearing the Text Wrapping

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 39 Adding a Text Link to a Web Page in Another Web Site

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

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

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 43 Adding Links to Link Targets within a Web Page Highlight the words on line 28 Type and then press the ENTER key Type Agave Americana and then press the ENTER key Type Desert Spoon and then press the ENTER key

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 44 Adding Links to Link Targets within a Web Page Type Golden Barrel and then press the ENTER key Type Prickly Pear and then press the ENTER key Type and then press the ENTER key

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 45 Adding Links to Link Targets within a Web Page

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 47 Adding Links to a Target at the Top of the Page

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

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 50 Copying and Pasting HTML Code

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

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 53 Adding an Image Link to a Web Page

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

HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text 55 Project Summary 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 Add an image with wrapped text

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

HTML Comprehensive Concepts and Techniques Third Edition Project 3 Complete