Lesson 2 HTML Organization Techniques
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. Step-by-Step 2.1
Open Notepad! Page 33 Save as six.html <TITLE>HTML and JavaScript<TITLE> <BODY> <CENTER><H1>Organizing Tags</H1><CENTER> There are many ways to organize a Web page. This Web page will organize text, hypertext links, colors, and fonts. You’ll also demonstrate single spacing, double spacing, and the use of line breaks. This Web page will display how to organize Web pages in a number of ways using: Powerful Lines Hyperlinks to HTML and Java Script Sources Hyperlinks to Previously Created Web Pages Fancy Fonts Perfect Pictures Orderly Tables Extraordinary Extras </BODY> </HTML
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. Step-by-Step 2.1
Open your file. Enter the changes from page 35. Save your file as seven.html View your page.
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> Step-by-Step 2.2
Lines and Background Colors 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> Step-by-Step 2.2
Go back to notepad and open your page 37. Enter BGCOLOR=YELLOW to change the color of the background. Save your file as eight.html View your page in the browser. Experiment and change to different colors Blue, Green, Red, White, etc.
Lines and Background Colors The background color attribute has been changed to yellow Horizontal rules, or lines, have been added through the use of the <PR> tag The WIDTH attribute changes the length or width of the line. The SIZE attribute changes the height of the line Step-by-Step 2.2
Next Step! Page 38 Switch back to your eight.html and enter the new coding from that page. Don’t forget to save your changes as nine.html
Hyperlinks Inside Your Document Internal hyperlinks required 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> Step-by-Step 2.3
Hyperlinks Inside Your Document Internal hyperlinks jump from an index to content below, in another spot on a Web page. Internal hyperlink Jumps to content below Step-by-Step 2.3
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> Step-by-Step 2.4
<BR><A HREF=“one.html”>one</A> Already Created <BR><A HREF=“one.html”>one</A> Web hyperlinks: Break tag Open anchor tag<A> HREF= attribute File name in quotes Name of the link between brackets Close Anchor tag </A> Step-by-Step 2.5
Already Created 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 Step-by-Step 2.5
Next Step! Open your nine.html and make the changes from page 42 to 52. Don’t forget to save your changes as ten.html,eleven.html, and twelve.html
Coloring Text Step-by-Step 2.6 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> Step-by-Step 2.6
Coloring Text <BODY TEXT=BLUE LINK=RED VLINK=GREEN> <HTML> <TITLE>Text</TITLE> <BODY TEXT=BLUE LINK=RED VLINK=GREEN> <P>Text</P> </BODY> </HTML> Step-by-Step 2.6
Next step! Open twelve.html and make changes from page 53. Don’t forget to save your work as thirteen.html
Homework Re-read lesson two. Define the vocabulary words on page 55. Be ready to turn your vocabulary into a web page tomorrow!