Chapter 3 Notes
advertisement
Project 3, Creating Web Pages with Links, Images, and Embedded Style Sheets
Notes
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
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
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.
Introduction
One of the most useful and important aspects of the World Wide Web is the ability to connect (link) one
web page to other web pages – on the same web server or on different web servers – located anywhere
in the world. In the last project, you used inline styles to change the appearance of individual elements
or HTML tags. In this project, you will also use embedded style sheets (also called internal style sheets)
to set the appearance of elements such as headings and body text for the entire web page.
Using Links on a Web Page
I.
Many different elements, including text, images, and animations, can serve as links. Text and images are
the elements most widely used as links.
a. Descriptive – When using links on a web page, use descriptive text as the clickable word or phrase
such as “SAVE MONEY.”
b. Color & Underline– When a link is identified with text, it often appears as underlined text, in a color
different from the main web page text. Unless changed in the anchor <a> or <body> tags, the
browser settings define the colors of text links throughout a web apge. In IE, the default color for a
normal link that has not been clicked is blue, a visited link in purple, and an active link varies in color.
The same color defaults apply to the border color around an image link.
c. Examples:
i. <a href=”samplephotos.html”>sample photographs</a>
Examples
ii. <a href=http://www.nps.gov/state/hi/index.htm>one of our fabulous tour destinations</a>
iii. Changing color in external style sheet: a {color: black;}
iv. Changing color in internal style sheet: <a style=”color: black”>
v. Remove underline from links in external sheet: a {text-decoration: none;}
vi. Remove underline from links in internal style sheet: <a style=”text-decoration: none”>
HTML5 Notes, Project 3
page 1
II.
Examples
III.
Examples
IV.
Examples
V.
Links Within a Web Page
a. Making links within a web page allows visitors to move quickly from one section of the web page to
another. This is especially important in web pages that are long and require a visitor to scroll down
to see all of the content.
b. It is a two-step: first you have to set a target using a name that makes sense to the purpose of the
link. Then, you create a link to that target using the name given.
c. Examples:
i. <a id=”fish”></a>
ii. <a href=”#fish”>Frog Fish</a>
Links to an E-mail Address
a. Examples:
i. <a href=”mailto:underwatertourbyeloise@isp.com”>E-mail Eloise
ii. <a href=”mailto:underwatertourbyeloise@isp.com?subject=Mauitours”></a>
iii. <a href=”mailto:underwatertourbyeloise@isp.com?subject=Mauitours&body=Do you have
half-day group tours?”>
Absolute & Relative Paths –A path describes the location (folder or external web site) where the files
can be found, beginning with the g:\drive (or another drive on your computer). This beginning location
is also known as the root location. You can use either an absolute or relative path when identifying the
location of the files. An absolute path specifies the exact address for the file to which you are linking or
displaying a graphic. The other option is a relative path. This specifies the location of a file, relative to
the location of the file that is currently is use.
a. Examples:
i. <a href=”http://www.nps.gov/state/hi/index.htm”>one of our fabulous tour
destinations</a>
ii. \images\underwaterlogo.jpg (goes into a folder called images)
iii. ..\underwaterlog.jpg (backs up and out of a folder)
iv. ..\..\underwaterlog.jpg (backs up and out of two folders)
Adding Interest and Focus with Styles & HTML tags – In chapter 2 we learned how to vary size of
headings with the <h1> through <h6> tags. Any text on a web page, including headings, can be
formatted with a different color or style to make it stand out by using style properties. You can also
format text using HTML elements and attributes.
a. Logical style tags – allow a browser to interpret the tag based on browser settings, relative to other
text on the page. The <h2> for example, is a logical style that indicates the heading text should be
larger than regular text but smaller than text formatted using an <h1> tag.
b. Physical style tags- these specify a particular font change that is interpreted strictly by all browsers.
For example, to ensure that text appears as bold font, you would enclose it between a start <b> and
a </b> tag. The <strong> tag is a better fit because it does not dictate how the browser displays the
text; it just says that it should be more noticeable than the normal text.
HTML5 Notes, Project 3
page 2
VI.
Precedence of Style Sheets – If you use a combination of style types the order of precedence is
important to understand.
a. External Style Sheet – this is the broadest level and has the least precedence
b. Embedded Style Sheet – this is the next broadest, it will change what the external has applied if
there is a difference.
c. Inline Style – this is typically used to change one or a few elements of the page. It will overrule what
both the external and embedded style sheets have specified.
Font Properties and Values
Color
Changes the font color
Values include six-digit (hexadecimal) color codes, color names, or RGB values
Font-family
Changes the font face or type
Values include fonts, such as verdana or arial; text appears using the default font if the font face
is not specified
Font-size
Changes the font size
Value can be an actual numeric size, a percentage, or values such as large, medium, small, etc.
Font-style
Changes the style of a font
Values include normal, italic, and oblique
Font-weight
Change the weight of a font
Values include normal, bold, bolder, and lighter
Text-decoration
Change the “look” of a font, Values include: none, line-through, overline, underline
Text Formatting Tags
<b> </b>
<blockquote> </blockquote>
<em> </em>
<i> </i>
<pre> </pre>
<small> </small>
<strong> </strong>
<sub> </sub>
<sup> </sup>
VII.
Physical styles tag that displays text as bold
Designates a long quotation, indents margins on section of text
Logical style tag that displays text with emphasis (usually appears as italicized>
Physical style tag that displays text as italicized
Sets enclosed text as preformatted material, meaning it preserves spaces and line
breaks, often used for text in column format in another document pasted into
HTML code
Decreases the font-size in comparison to the surrounding text
Logical style tag that displays text with strong emphasis (usually appears as bold)
Displays text as subscript (below normal text)
Displays text as superscript (above normal text)
Code for Embedded Style sheet – The following code shows an example of an embedded style sheet to
set the h1 heading to the Garamond font-family, point size 32. This code would be added between the
<head> and the </head> tags within <style> </style> tags.
Examples
HTML5 Notes, Project 3
<style type=”text/css”>
<!-h1 {font-family: Garamond;
font-size: 32pt;}
-->
</style>
Note: the h1 is called the selector, and the
remainder of the code is the declaration. The
declaration sets the values for two different
properties. (font-family and font-size)
page 3
CSS Properties and Options
Background
Border
Font
List
Margin
Text
Examples
Color
Image
Position
Color
Style
Width
Family
Size
Style
Variant
Weight
Image
Position
Type
Length
Percentage
Alignment
Color
Decoration
Indentation
Spacing
White space
<style type=”text/css”>
<!-body
{font-family: arial, verdana, garamond;
Font-size: 11pt;}
h1, h2, h3
{color: #020390;}
This embedded sheet defines four elements on
a
{text-decoration: none;
the page: body, headings, links, and the linkhover property. The a:hover is considered a
color: #020390}
pseudo-class statement You separate the
a:hover
{background: #020390;
selector and the pseudo—class with a colon.
color: #01d3ff;}
The 4 pseudo-classes that can be used when
-->
applied to the anchor or link selector are: link,
</style>
visited, active and hover.
HTML5 Notes, Project 3
page 4
VIII.
Working with Classes in Style Statements – Using classes in your style sheets adds another whole level
of control to the styles. For example you have the ability to apply one style to a beginning paragraph
and a different style to a closing paragraph on the same web page. Defining and using classes in CSS is a
two-step process.
a. First – any elements that belong to the class are marked by adding the tag below:
Class=”classname”
Any word can be used as a class name, as long as it does not contain spaces. In general, however,
you should use descriptive names that illustrate the purpose of a class (for example, beginning).
After you have named the classes, you can use the class names in a selector and define a specific
style for the class. For example, within the <style> and comment tags in an embedded or internal
style sheet, you must enter a style statement in the format:
p.beginning
Examples
{color: red;
font-size: 20pt;}
The p indicates that the class applies to a specific category of
the paragraph tag and beginning is the class name.
b. Second – to use this class name in an HTML tag, you would type:
<p class=”beginning”> as the code.
IX.
Examples
Examples
Examples
Adding an Image with Wrapped Text – The float property indicates in which direction (in this case left
and right) to display (or float) an element being inserted on a web page. Floating an element like an
image allows the element to move to the side indicated in the float statement. In addition to floating
the element, you should also provide some space around the image. The margin-left and margin-right
properties indicate how many pixels of space to put around each element.
Examples using an inline style sheet:
<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” />
Examples using an embedded style sheet:
<img class=”align-left” src=”fish.jpg” width=”259” height=”387” alt=”Frog fish” />
<img class=”align-right” src=”lobster.jpg” width=”387” height=”359” alt=”Lobster” />
In the embedded style sheet you must add:
img.align-left {float: left;
margin-left: 5px;
margin-right: 5px;}
img.align-right {float: right;
margin-left: 5px;
margin-right: 5px;}
HTML5 Notes, Project 3
page 5
X.
Examples
Using Thumbnail Images – Many web developers use thumbnail images to improve page loading time.
A thumbnail image is a smaller version of the image itself. The thumbnail is used as a link that, when
clicked, will load the full-sized image. To create a thumbnail version of an image, the image can be
resized to a smaller size in a paint or image-editing program and then saved with a different file name.
Example: <a href=”largeimage.gif”><img src=”thumbnail.gif” /></a>
XI.
To Clear Text Wrapping – after specifying an image alignment and defining how text wraps, you must
enter a break <br /> tag to stop the text wrapping. You use the tag below to stop the wrapping.
Example: <br style=”clear: left” /> or <br style=”clear: right” />
XII.
Examples
Adding Links Within a Web Page – To add links within a web page so that users may move from one
spot to another by clicking the link is a final way to make web pages more useable.
Examples
First step – the targets for the links must be created.
<a id=”targetname”></a> This will mark a specific area of the web page, to which a link can be directed
Second step – create the link.
<a href=”#targetname”> This would surround text or an image. Anything that may normally be a link.
HTML5 Notes, Project 3
page 6
