Lesson_2

advertisement
Lesson 2
Basic Organization Techniques
HTML and JavaScript
BASICS, 4th Edition
1
Barksdale / Turner
Objectives


Lesson 2

2

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.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Objectives (continued)

Lesson 2

3

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.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Vocabulary



Lesson 2

attribute
deprecated
hexadecimal
hyperlinks
hypertext links

4
Barksdale / Turner




Hypertext Transfer
Protocol (HTTP)
standards
Uniform Resource
Locator (URL)
value
HTML and JavaScript BASICS 4E
Building Better Web Pages

Lesson 2

5
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.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Building Better Web Pages
(continued)

Lesson 2

6


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.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Adding Lines and Background
Colors

Lesson 2

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
7
Barksdale / Turner
HTML and JavaScript BASICS 4E
Adding Lines and Background
Colors (continued)

Lesson 2

8


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.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Adding Lines and Background
Colors (continued)

Lesson 2

Color by Number in Hexadecimal (cont):
In the chart below, color values are expressed as
hexadecimal numbers.
9
Barksdale / Turner
HTML and JavaScript BASICS 4E
Adding Lines and Background
Colors (continued)

Lesson 2

10
Horizontal Rules Rule:
The <hr /> tag creates a
horizontal line across
the page.
An example of a Web page
with horizontal rules
Barksdale / Turner
HTML and JavaScript BASICS 4E
Placing Hyperlinks Inside Your
Document

Lesson 2

11
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
Barksdale / Turner
HTML and JavaScript BASICS 4E
Creating Hypertext Links to the
Web

Lesson 2

12


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.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Linking to Your Work

Creating links to your work can serve as an online
portfolio.
Links to previously created
Web pages
Lesson 2
Creating links to Web pages
you have created
13
Barksdale / Turner
HTML and JavaScript BASICS 4E
Coloring Text

Lesson 2

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
14
Barksdale / Turner
HTML and JavaScript BASICS 4E
Coloring Text (continued)
Lesson 2

Use CSS commands to change color attributes and
values.
Changing the text color on a
Web page
Text colors changed using CSS definitions
15
Barksdale / Turner
HTML and JavaScript BASICS 4E
Lesson 2
Summary
16
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.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Summary (continued)

Lesson 2

17

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.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Download