Transcript Chapter 3

HTML5 & CSS
7th 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:[email protected]
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
th
7
Edition
Chapter 3 Complete