Lesson 2 Basic Organization Techniques HTML and JavaScript BASICS, 4th Edition 1 Barksdale / Turner Objectives Lesson 2 2 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. Barksdale / Turner HTML and JavaScript BASICS 4E Objectives (continued) Lesson 2 3 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. Barksdale / Turner HTML and JavaScript BASICS 4E Vocabulary Lesson 2 attribute deprecated hexadecimal hyperlinks hypertext links 4 Barksdale / Turner Hypertext Transfer Protocol (HTTP) standards Uniform Resource Locator (URL) value HTML and JavaScript BASICS 4E Building Better Web Pages Lesson 2 5 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. Barksdale / Turner HTML and JavaScript BASICS 4E Building Better Web Pages (continued) Lesson 2 6 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. Barksdale / Turner HTML and JavaScript BASICS 4E Adding Lines and Background Colors Lesson 2 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 Barksdale / Turner HTML and JavaScript BASICS 4E Adding Lines and Background Colors (continued) Lesson 2 8 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. Barksdale / Turner HTML and JavaScript BASICS 4E Adding Lines and Background Colors (continued) Lesson 2 Color by Number in Hexadecimal (cont): In the chart below, color values are expressed as hexadecimal numbers. 9 Barksdale / Turner HTML and JavaScript BASICS 4E Adding Lines and Background Colors (continued) Lesson 2 10 Horizontal Rules Rule: The <hr /> tag creates a horizontal line across the page. An example of a Web page with horizontal rules Barksdale / Turner HTML and JavaScript BASICS 4E Placing Hyperlinks Inside Your Document Lesson 2 11 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 Barksdale / Turner HTML and JavaScript BASICS 4E Creating Hypertext Links to the Web Lesson 2 12 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. Barksdale / Turner HTML and JavaScript BASICS 4E Linking to Your Work Creating links to your work can serve as an online portfolio. Links to previously created Web pages Lesson 2 Creating links to Web pages you have created 13 Barksdale / Turner HTML and JavaScript BASICS 4E Coloring Text Lesson 2 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 Barksdale / Turner HTML and JavaScript BASICS 4E Coloring Text (continued) Lesson 2 Use CSS commands to change color attributes and values. Changing the text color on a Web page Text colors changed using CSS definitions 15 Barksdale / Turner HTML and JavaScript BASICS 4E Lesson 2 Summary 16 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. Barksdale / Turner HTML and JavaScript BASICS 4E Summary (continued) Lesson 2 17 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. Barksdale / Turner HTML and JavaScript BASICS 4E