Lesson 2 Basic Organization Techniques

1. Lesson 2Basic Organization Techniques HTML and JavaScript BASICS, 4th Edition Barksdale / Turner

2. 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. 2

3. 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. 3

4. attribute deprecated hexadecimal hyperlinks hypertext links Hypertext Transfer Protocol (HTTP) standards Uniform Resource Locator (URL) value Vocabulary 4

5. 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. 5

6. 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. 6

7. 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 7

8. 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. 8

9. Adding Lines and Background Colors (continued) • Color by Number in Hexadecimal (cont): • In the chart below, color values are expressed as hexadecimal numbers. 9

10. 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 10

11. 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 11 11

12. 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. 12 12

13. Linking to Your Work • Creating links to your work can serve as an online portfolio. Links to previously created Web pages Creating links to Web pages you have created 13

14. 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 14 14

15. Coloring Text (continued) • Use CSS commands to change color attributes and values. Changing the text color on a Web page Text colors changed using CSS definitions 15

16. 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. 16 16

17. 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. 17 17