HTML5 & CSS 7 th Edition Creating Web Pages with Links, Images, and Embedded Style Sheets
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 2
Chapter Objectives Add a text link to a Web page in the same Web site Add an e-mail 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 3
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 4
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 5
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 6
Starting Notepad++ Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 7
Entering HTML Tags to Define the Web Page Structure Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 8
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 9
Adding a Banner Image Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 10
Entering Paragraphs of Text Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 11
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 12
Adding an E-Mail Link Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 13
Adding Other Information to an E-mail Link You can add a default subject and message in an e-mail link Example: <a href="mailto:underwatertoursbyeloise@isp.co m?subject=maui tours&body=do you have halfday group tours?"> Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 14
Adding Other Information to an E-mail Link Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 15
Adding a Text Link to a Web Page in Another Web Site Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 16
Adding Embedded Style Sheet Statements Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 17
Adding an Inline Style for Color Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 18
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 19
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 20
Validating HTML Code Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 21
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 22
Printing an HTML File Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 23
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 24
Viewing a Web Page Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 25
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 E-mail links Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 26
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 27
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 28
Opening an HTML File Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 29
Wrapping Text Around Images Using CSS Classes 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
Clearing the Text Wrapping Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 32
Setting Link Targets Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 33
Adding Links to Link Targets within a Web Page Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 34
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 35
Adding Links to a Target at the Top of the Page Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 36
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 37
Copying and Pasting HTML Code Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 38
Adding an Image Link to a Web Page Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 39
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 40
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 41
Chapter Summary Add a text link to a Web page in the same Web site Add an e-mail 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 42
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 43
HTML 7 th Edition Chapter 3 Complete