Lesson 2 — HTML Organization Techniques Unit 1 — HTML BASICS Lesson 2 — HTML Organization Techniques
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 BASICS
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 BASICS
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 BASICS
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 BASICS
Lines and Background Colors 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> HTML BASICS
Lines and Background Colors (cont.) 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> HTML BASICS
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 BASICS
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 BASICS
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> <A NAME=“POWERFUL”> </BODY> </HTML> HTML BASICS
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 BASICS
Creating Hyperlinks to the Web <A HREF=“http://www.course.com”>Course</A> Web hyperlinks: Open anchor tag<A> HREF= attribute Full Web address in quotes Name of the link between brackets Close anchor tag </A> HTML BASICS
Linking to Pages Already Created <BR><A HREF=“one.html”>one</A> Web hyperlinks: Break tag Open anchor tag<A> HREF= attribute Filename in quotes Name of the link between brackets Close anchor tag </A> HTML BASICS
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 BASICS
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> </BODY> </HTML> HTML BASICS
Coloring Text (cont.) <BODY TEXT=BLUE LINK=RED VLINK=GREEN> <HTML> <TITLE>Text</TITLE> <BODY TEXT=BLUE LINK=RED VLINK=GREEN> <P>Text</P> </BODY> </HTML> HTML BASICS
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 BASICS
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. HTML BASICS