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.