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

Transcription

1 HTML5 & CSS 7 th 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 2

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 3

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 4

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 5

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 6

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

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

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 9

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

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

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 12

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

14 Adding Other Information to an Link You can add a default subject and message in an 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

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

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 16

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

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

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 19

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 20

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

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 22

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

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 24

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

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 26

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 27

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 28

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

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

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

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

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

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

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 35

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

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 37

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

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

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 40

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 41

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 42

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 43

44 HTML 7 th Edition Chapter 3 Complete