1. Creating Web Pages with Links, Images, and Embedded Style Sheets
HTML5 & CSS 7th Edition
Creating Web Pages with Links, Images, and Embedded Style Sheets

2. Chapter Objectives Describe linking terms and definitions
Create a home page and enhance a Web page using images
Change body and heading format using embedded (internal) style sheets
Align and add color to text using embedded and inline styles
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

3. Chapter Objectives Add a text link to a Web page in the same Web site
Add an link
Add a text link to a Web page on another Web site
Use absolute and relative paths
Save, validate, and view an HTML file and test the links
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

4. Chapter Objectives Use style classes to add an image with wrapped text
Add links to targets within a Web page
Use an inline style to change the default bullet list type to square bullets
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 Embedded Style Sheets

5. Plan Ahead Plan the Web site Analyze the need Design the Web site
Choose the content for the Web pages
Determine the types of Cascading Style Sheets (CSS) that you will use
Determine how the pages will link to one another
Establish what other links are necessary
Develop the Web page(s) and insert all links
Test all Web pages within the Web site
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

6. Starting Notepad++
Click the Start button on the Windows taskbar to display the Start menu
Click All Programs at the bottom of the left pane on the Start menu to display the All Programs list
Click Notepad++ in the All Programs list
Click Notepad++ in the list to display the Notepad++ window. If there are files already open in Notepad from previous projects, close them all now by clicking the Close button on each open file
If the Notepad++ window is not maximized, click the Maximize button on the Notepad++ title bar to maximize it
Click View on the menu bar. If the Word wrap command does not have a check mark next to it, click Word wrap
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

7. Starting Notepad++
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

8. Entering HTML Tags to Define the Web Page Structure
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

9. Saving an HTML File
With a USB flash drive connected to one of the computer’s USB ports, click File on the Notepad++ menu bar and then click Save
Type the desired file name in the File name text box (do not press ENTER)
Navigate to the desired location to save the file
Click the Save button in the Save As dialog box to save the file with the name you entered to the desired save location
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

10. Adding a Banner Image
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

11. Entering Paragraphs of Text
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

12. Adding a Text Link to Another Web Page within the Same Web Site
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

13. Adding an Link
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

14. Adding Other Information to an E-mail Link
You can add a default subject and message in an link
Example:
<a tours&body=Do you have half-day group tours?">
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

15. Adding Other Information to an E-mail Link
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

16. Adding a Text Link to a Web Page in Another Web Site
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

17. Adding Embedded Style Sheet Statements
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

18. Adding an Inline Style for Color
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

19. Saving an HTML File
Click the Save button on the Notepad++ toolbar to save the most recent version of the file on the same storage device and in the same folder as the last time you saved it
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

20. Validating HTML Code Open Internet Explorer
Navigate to the Web site validator.w3.org
Click the Validate by File Upload tab
Click the Browse button
Locate and click to select the desired file to validate
Click the Open button
Click the Check button
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

21. Validating HTML Code
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

22. Printing an HTML File
Click the Notepad++ button on the taskbar to activate the Notepad++ window
Click File on the menu bar, click Print, and then click the Print button to print a hard copy of the HTML code
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

23. Printing an HTML File
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

24. Viewing a Web Page Open Internet Explorer
In Internet Explorer, click the Address bar to select the URL in the Address bar
Type the specific path to your file to display the new URL in the Address bar and then press the ENTER key
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

25. Viewing a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

26. Testing Links in a Web Page
Click all links to make sure they act as intended
Links to pages on the same Web site
Links to pages on a different Web site
links
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

27. Printing a Web Page Navigate to the desired Web page to print
Click the Print icon on the Command bar
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

28. Opening an HTML File Click the Notepad++ button on the taskbar
Navigate to the location containing the desired file to open
Click the Open button in the Open dialog box to display the HTML code for the desired Web page
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

29. Opening an HTML File
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

30. Wrapping Text Around Images Using CSS Classes
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

31. Wrapping Text Around Images Using CSS Classes
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

32. Clearing the Text Wrapping
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

33. Setting Link Targets
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

34. Adding Links to Link Targets within a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

35. Adding Links to a Target at the Top of the Page
At the top of the page (under the body tag), type <a id=“top”> as the tag
Create a “To Top” link on the page that points to the tag
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

36. Adding Links to a Target at the Top of the Page
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

37. Copying and Pasting HTML Code
Highlight the desired code to copy
Click Edit on the menu bar and then click copy
Position the pointer where you want to paste the code
Click Edit on the menu bar and then click Paste to paste the HTML code that you copied
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

38. Copying and Pasting HTML Code
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

39. Adding an Image Link to a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

40. Quitting Notepad++ and a Browser
In Notepad++, click the File menu, then Close All
Click the Close button on the Notepad++ title bar
Click the Close button on all open browser windows
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

41. Chapter Summary Describe linking terms and definitions
Create a home page and enhance a Web page using images
Change body and heading format using embedded (internal) style sheets
Align and add color to text using embedded and inline styles
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

42. Chapter Summary Add a text link to a Web page in the same Web site
Add an link
Add a text link to a Web page on another Web site
Use absolute and relative paths
Save, validate, and view an HTML file and test the links
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets

43. Chapter Summary Use style classes to add an image with wrapped text
Add links to targets within a Web page
Use an inline style to change the default bullet list type to square bullets
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 Embedded Style Sheets

44. HTML 7th Edition
Chapter 3 Complete