Embed Size (px)
Citation preview
Unit 1 — HTML BASICS
Lesson 2 — HTML Organization Techniques
HTML BASICS2
Objectives
Organize 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.
HTML BASICS3
Objectives (cont.)
Alter Web page text colors. Create a hyperlink to another spot within a
Web page. Create a hyperlink to an URL or Web page
anywhere on the World Wide Web. Create a hyperlink to another Web page on
your own computer.
HTML BASICS4
Creating Better Web Pages
Formatting tags can greatly improve the look of a Web page.
The page shown in Figure 2-2 is unorganized and needs reworking.
HTML BASICS5
Creating Better Web Pages
Two simple tags can make the changes in Figure 2-4:
– <P></P>– <BR>
The <P> tag creates a double-space. The <BR> tag creates a single-space. The close tag for the <P> tag is optional.
HTML BASICS6
Use tag attributes and values to format a Web page in a variety of ways.– The BACKGROUND
COLOR attribute– A BACKGROUND
COLOR value
<BODY BGCOLOR = YELLOW>
Lines and Background Colors
HTML BASICS7
You can use either names or hexadecimal numbers to define color values.
– White = #FFFFFF– Green = #00FF00– Black = #000000– Blue = #0000FF– Red = #FF0000– Yellow = #FFFF00
<BODY BGCOLOR = YELLOW>
Is the same as…
<BODY BGCOLOR = #FFFF00>
Lines and Background Colors (cont.)
HTML BASICS8
Lines and Background Colors (cont.)
The BACKGROUND COLOR attribute has been changed to yellow.
Horizontal rules, or lines, have been added through the use of the <PR> tag.
HTML BASICS9
Lines and Background Colors (cont.)
The WIDTH attribute changes the length or width of the line.
The SIZE attribute changes the size of the line.
HTML BASICS10
Hyperlinks Inside Your Document
Internal hyperlinks require two steps:– Enter an anchor tag
using a # before the name of the target location.
– Define where the link will take you (the target location) with the NAME attribute.
<HTML><TITLE>Text</TITLE><BODY><A HREF=“#POWERFUL”>Powerful Lines</A><P>Text</P><P>Text</P><P>Text</P><A NAME=“POWERFUL”>Powerful Lines</A></BODY></HTML>
HTML BASICS11
Hyperlinks Inside Your Document (cont.)
Internal hyperlinks jump from an index to content below in another area on a Web page.– Internal hyperlink– Jumps to content
below
HTML BASICS12
Web hyperlinks:
– Open anchor tag<A>– HREF= attribute– Full Web address in quotes– Name of the link between brackets– Close anchor tag </A>
<A HREF=“http://www.course.com”>Course</A>
Creating Hyperlinks to the Web
HTML BASICS13
Web hyperlinks:
– Break tag– Open anchor tag<A>– HREF= attribute– Filename in quotes– Name of the link between brackets– Close anchor tag </A>
<BR><A HREF=“one.html”>one</A>
Linking to Pages Already Created
HTML BASICS14
Linking to Pages Already Created (cont.)
Hyperlinks to the World Wide Web look exactly like hyperlinks to pages on the local computer.– Links to the Web– Links to files on the
local computer
HTML BASICS15
Coloring Text
You will use three separate attributes to color text:
– Use the text attribute to change color of text.
– Use the hypertext link color attribute to change color of hypertext links.
– Use the visited link attribute to change color of hypertext links that have been selected.
<HTML><TITLE>Text</TITLE>
<BODY TEXT=BLUE LINK=RED VLINK=GREEN>
<P>Text</P><P>Text</P><P>Text</P></BODY></HTML>
HTML BASICS16
Coloring Text (cont.)
<HTML><TITLE>Text</TITLE>
<BODY TEXT=BLUE LINK=RED VLINK=GREEN>
<P>Text</P><P>Text</P><P>Text</P></BODY></HTML>
HTML BASICS17
Summary
You can organize page information with single and double spacing.
You can organize page information with lines. You can use attributes and values to improve
Web page design. You can change color defaults, attributes, and
values.
HTML BASICS18
Summary (cont.)
You can create hypertext links to a spot in a Web document.
You can create hypertext links to another page on the World Wide Web.
You can create hypertext links to Web pages on your own computer.
