Creating Web Pages

with Links, Images,

and Embedded Style
Sheets
th
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
Chapter Objectives
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
Plan Ahead
When using links on a web page use descriptive text as
the clickable word or phrase
When a link is identified with text it often appears as
underline text in a color different from the main web
page text
IE - default color for a normal link that has not been visited is
blue, a visited link is purple and an active link varies in color
Generally moving the mouse pointer over a link causes the
mouse pointer to change to a pointing hand notifies the
user that a link is available from that text/image
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 6
Using Links on a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 7
Using Links on a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 8
Using Links on a Web Page
<a> tag = anchor tag is used to create anchors for links to
another page in the same web site, to a web page in an
external web site, within the same web page and for e-mail
links
a {color: black; }
<a style=color: black >

a {text-decoration: none;}
<a style=text-decoration: none>
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 9
Using Links on a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 10
Link to Another Web page Within the
Same Web Site
<a href=samplephotos.html> sample photographs</a>
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 11
Link to a Web Page in Another Web Site
<a href=http://www.nps.gov/state/hi/index.htm>
one of our fabulous tour destinations</a>
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 12
Link Within a Web Page
<a id=fish> </a>
<a href=#fish>Frog Fish</a>
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 13
Link to an E-mail Address
<a href=mailto:underwatertoursbyeloise@isp.com>
underwatertoursbyeloise@isp.com</a>
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 14
Starting Notepad++
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 15
Starting Notepad++
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 16
Entering HTML Tags to Define
the Web Page Structure
With a USB flash drive connected to one of the
computers 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 17
Saving an HTML File
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 18
Adding a Banner Image
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 19
Entering Paragraphs of Text
How and where to use the four types of links
Identify how to link from the home page to another
page in the same web site
Use an e-mail link on the home page
Determine external links for the home page
Use internal links on long web pages
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 20
Plan Ahead
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 21
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 22
<a> tag Attributes and Functions
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 23
Adding 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 half-
day group tours?">
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 24
Adding Other Information to an E-mail
Link
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 25
Adding Other Information to an E-mail
Link
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 26
Adding a Text Link to a Web Page in
Another Web Site
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 27
Use Absolute and relative Paths
path describes the location (folder or external site)
where the files can be found beginning with the root
location

absolute path specifies the exact address for the file
to which you are linking or displaying a graphic
relative paths - specify the location of a file relative to
the location of the file that is currently in use
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 28
Use Absolute and relative Paths
\Images\underwaterlogo.jpg

..\underwaterlogo.jpg

<img src=underwaterlogo.jpg width=581
height=450 alt=Underwater Tours Logo />

<img src=fis.jpg width=259 height=387
Alt=Frog Fish />
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 29
Add Interest and Focus with Styles
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 30
Add Interest and Focus with HTML Tags
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 31
HTML Text Formatting Tags
Logical style tags allow a browser to interpret the
tag based on browser settings relative to other text
on a web page
<h2>, <h1> and <strong> are examples of logical styles
Physical style tags specify a particular font change
that is interpreted strictly by all browsers
to ensure that a text appears as bold font you can use
<b> and </b> tags but the <strong> tag is a better fit
because it does not dictate how the browser will display
the text
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 32
Examples of Various Font Styles
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 33
Using Embedded Style Sheets
Add a start <style> tag at the top of the web page
within the <head> & after adding the desired style
statements end with </style> tag

< style type=text/css>
<!-
h1 {font-family: Garamond;
font-size: 32pt; }
-->
</style>



Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 34
Embedded Style Sheet Example
< style type=text/css>
<!-
body {font-family:Arial,Verdana, Garamond;
font-size: 11pt;}
h1, h2,h3 {color: #020390;}
a {text-decoration:none;
color: #020390;}
a:hover {background: #020390;
color: #01d3ff;}
-->
</style>

selector:pseudo-class {property: value;}
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 35
Embedded Style Sheets - CSS Properties and
Options
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 36
Adding Embedded Style Sheet
Statements
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 37
Adding an Inline Style for Color
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 38
Saving an HTML File
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 39
Validating HTML Code
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 40
Validating HTML Code
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 41
Printing an HTML File
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 42
Printing an HTML File
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 43
Viewing a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 44
Viewing 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 45
Testing Links in 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 46
Printing a Web Page
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 47
Opening an HTML File
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 48
Opening an HTML File
A style statement is made up of a selector and a
declaration
The part of the style statement is that identifies the
page elements = selector
a {text-decoration: none; color: #020390;}
You can also define specific elements of an HTML files
as a category or class & then you can create a specific
style for each class class=clasename
p.beginning {color: red; font-size: 20 pt;}
<p class=beginning>
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 49
Work with Classes in Style Statements
Alignment = key consideration when inserting an
image & can give the image and surrounding text
completely different looks use float & margin
properties
Float property indicates in which direction (left/right)
to display/float an element inserted on a web page
Floating an image allows the element to move to the
side indicated in the flow statement result the
repositioning of other elements = text to move up
and allow to wrap next to the floated element
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 50
Add an Image with Wrapped Text
using inline style

<img style=float: left; margin-left: 5px; margin-right:
5px; src=fish.jpg width=259 height=387 alt=Frog
fish />

<img style=float:right; margin-left: 5px; margin-right:
5px; src=lobster.jpg width=387 height=259
alt=Lobster align=right />

Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 51
Add an Image with Wrapped Text
using embedded style sheet

<img class=align-left src=fish.jpg width=259
height=387 alt=Frog fish />
<img class=align-left; src=lobster.jpg
width=387 height=259 alt=Lobster />

img.align-left {float: left;
margin-left: 5px;
margin-right: 5px;}
img.align-right {float: right;
margin-left: 5px;
margin-right: 5px;}
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 52
Add an Image with Wrapped Text
thumbnail images are used to improve page loading
time
thumbnail image = smaller version of the image itself
& is used as a link and when you click it loads the full-
sized image
using a thumbnail gives the visitor the opportunity to
decide whether to view or not the full size image
create a thumbnail image= use paint or image editor
program and resize the real image to a smaller size
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 53
Using Thumbnail Images
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 54
Using Thumbnail Images
<a href=largeimg.gif><img src=thumbnail.gif /></a>
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 55
Wrapping Text Around Images Using CSS
Classes
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 56
Wrapping Text Around Images Using CSS
Classes
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 57
Clearing the Text Wrapping
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 58
Setting Link Targets
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 59
Adding Links to Link Targets
within a Web 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 60
Adding Links to a Target
at the Top of the Page
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 61
Adding Links to a Target
at the Top of the Page
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 62
Copying and Pasting HTML Code
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 63
Copying and Pasting HTML Code
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 64
Adding an Image Link to a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 65
Adding an Image Link to a Web Page
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 66
Quitting Notepad++ and a Browser
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 67
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 68
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 69
Chapter Summary
Chapter 3 Complete
th