Project 3, Creating Web Pages with Links, Images, and Embedded Style Sheets
Objectives:
Describe linking terms and definitions Use absolute and relative paths Save, validate, and view an HTML file and Create a home page and enhance a web test the links page using images Use style classes to add an image with Change body and heading format using wrapped text embedded (internal style sheets) Add links to targets within a web page Align and add color to text using embedded and inline styles Use an inline style to change the default bullet list type to square bullets Add a text link to a web page in the same web site Copy and paste HTML code
Add an e-mail link Add an image link to a web page in the same web site. Add a text link to a web page on another 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.
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 or 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:
c.i. sample photographs HTML5 Notes, Project 3 page 1 c.ii. one of our fabulous tour destinations
c.iii. Changing color in external style sheet: a {color: black;}
c.iv. Changing color in internal style sheet:
c.v. Remove underline from links in external sheet: a {text-decoration: none;}
c.vi. Remove underline from links in internal style sheet:
HTML5 Notes, Project 3 page 2 II. 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:
c.ii. Frog Fish
III. Links to an E-mail Address
a. Examples:
a.i. E-mail Eloise
IV. 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:
a.i. one of our fabulous tour destinations
a.ii. \images\underwaterlogo.jpg (goes into a folder called images)
a.iii. ..\underwaterlog.jpg (backs up and out of a folder)
a.iv. ..\..\underwaterlog.jpg (backs up and out of two folders)
V. Adding Interest and Focus with Styles & HTML tags – In chapter 2 we learned how to vary size of headings with the
through 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.
HTML5 Notes, Project 3 page 3 a. Logical style tags – allow a browser to interpret the tag based on browser settings, relative to other text on the page. The
for example, is a logical style that indicates the heading text should be larger than regular text but smaller than text formatted using an 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 and a tag. The 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 4 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.
HTML5 Notes, Project 3 page 5 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 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)
VII. 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
and the tags within tags.HTML5 Notes, Project 3 page 6 CSS Properties and Options Background Color Image Position Border Color Style Width Font Family Size Style Variant Weight List Image Position Type Margin Length Percentage Text Alignment Color Decoration Indentation Spacing White space
HTML5 Notes, Project 3 page 7 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