lesson 2 basic organization techniques

1

Lesson 2Basic Organization Techniques

HTML and JavaScript BASICS, 4th Edition

Barksdale / Turner

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E22

Objectives

Format page information with single and double spacing.

Organize page information with lines. Implement attributes and values. Change Web page color defaults by altering

attributes and values with both HTML and CSS.

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E33

Objectives (continued)

Create a hyperlink to another location within a Web page.

Make a hyperlink to a URL or Web page on the Web.

Link to another Web page on your own computer.

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E44

Vocabulary

attribute deprecated hexadecimal hyperlinks hypertext links

Hypertext Transfer Protocol (HTTP) standards Uniform Resource Locator (URL) value

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E55

Building Better Web Pages

Hypertext links help make Web pages interesting and easy to navigate.

Hyperlinks can be clicked to allow users to navigate to another Web site, to another Web page at the current Web site, or to a specific location within the current document.

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E66

Building Better Web Pages (continued)

Deprecation: HTML is changing, and with new XHTML

standards emerging, many HTML tags are being deprecated, which means they are being downgraded or becoming obsolete.

Single and Double Spacing: You can organize text with the tags: <p></p>

for paragraph and <br/> for break.

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E77

Adding Lines and Background Colors

HTML and XHTML tags can be enhanced. To change the background color of your page,

you can add the background attribute (or special quality) and give the tag a color value (or a definition of the attribute).

Changing background colors

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E88

Adding Lines and Background Colors (continued)

Named Colors: Color names can be entered as text values such

as red, blue, or yellow. You can also enter color variations such as cornflowerblue.

Color by Number in Hexadecimal: Color text values are converted into a

hexadecimal value. Hexadecimal digits operate on a base-16, not a base-10 numbering system.

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E99

Adding Lines and Background Colors (continued)

Color by Number in Hexadecimal (cont): In the chart below, color values are expressed as

hexadecimal numbers.

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E1010

Adding Lines and Background Colors (continued)

Horizontal Rules Rule: The <hr /> tag creates a

horizontal line across the page.

An example of a Web page with horizontal rules

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E1111

Placing Hyperlinks Inside Your Document

Hyperlinks are created with special tags called anchor tags.

<a href=“insert location of file”></a> With anchor tags you can:

– Link to another place within your own document– Link to a Web page anywhere on the Web– Link to another Web page on your computer

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E1212

Creating Hypertext Links to the Web

URL stands for Uniform Resource Locator. URLs allow a Web browser to pinpoint an

exact file on a Web server, or computer, on the Web.

HTTP stands for Hypertext Transfer Protocol.

HTTP is a digital language that Web servers use to communicate with Web browsers.

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E

Linking to Your Work

13

Creating links to Web pages you have created

Links to previously created Web pages

Creating links to your work can serve as an online portfolio.

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E1414

Coloring Text

With CSS, you define your styles in advance between the style tags.

For text color, the values appear in curly brackets.

Parts of a document you can change using CSS

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E

Use CSS commands to change color attributes and values.

Coloring Text (continued)

Changing the text color on a Web page

Text colors changed using CSS definitions

15

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E1616

Summary

In this lesson, you learned: How to organize page information with single

and double spacing. How to organize page information with lines. How to use attributes and values to improve

Web page design. How to change color style defaults,

attributes, and values with CSS styles.

Le

sso

n 2

Barksdale / Turner HTML and JavaScript BASICS 4E1717

Summary (continued)

How to create hypertext links to a spot in a Web document.

How to create hypertext links to another page on the World Wide Web.

How to create hypertext links to Web pages on your own computer.