More Basic XHTML Module 2: XHTML Basics LESSON 2

Module 2: XHTML Basics LESSON 2 Lesson Overview In this lesson, you will learn to:  Manipulate XHTML code using a text editor application such as Notepad.  View Web pages created using XHTML code using a browser.  Change text within a Web page using XHTML coding.  Alignment text within an XHTML document.  Set the background color of a Web page.  Set the text color within a Web page.

Module 2: XHTML Basics LESSON 2 Guiding Questions for Lesson 2  What is text alignment and what are some examples of it?  What colors do you like to see when viewing a Web page?  How can a choice of color affect the message on a Web page?

Module 2: XHTML Basics LESSON 2 Text color  How did the code How would this attribute change things? change the text?  Web colors can be defined in three ways: 1.Color name 2.Hexadecimal code 3.RGB code

Module 2: XHTML Basics LESSON 2 Defining Color  Hexadecimal Color Chart - chickens.com/hex.htmlhttp:// chickens.com/hex.html  Visibone Hexadecimal Color Chart - codes.com/ codes.com/  216 Web Safe Color Chart (Hexadecimal and RGB)  Color Names and Hexadecimal Code  RGB, Hexadecimal and Color Names  RGB, Hexadecimal and Color Names -

Module 2: XHTML Basics LESSON 2 Background Color  Background color is defined using an attribute  The attribute to define background color is placed in the opening body tag.   What color will the background be using this code?

Module 2: XHTML Basics LESSON 2 Writing Code for Background color and Text color  Write the code that would display the following: White text on a black background

Module 2: XHTML Basics LESSON 2 Check your work:  Does your answer look like this:

Module 2: XHTML Basics LESSON 2 Text Alignment  Alignment refers to how the text is oriented on the page  Left  Right  Center

Module 2: XHTML Basics LESSON 2 Horizontal Rule  A horizontal rule is a horizontal line across the Web page  Created with the tag  Attributes can be added to the tag such as:  Width or how far the line extends across the page, defined by a percent  Size or how thick the line is, defined by an integer  Color, defined by a hexadecimal code   Creates a line that extends 90 percent across the Web page which is 10 pixels thick and the line is blue

Module 2: XHTML Basics LESSON 2 Lesson Review  Explain how to write the code and attributes for each of the following situations:  Text color  Background color  Alignment

Module 2: XHTML Basics LESSON 2 Practice: Beginning XHTML Create the following changes in your “Tags and Attributes” Web page:  Center the title “Tags and Attributes”  Make the background of the Web page green (Hint: The hexadecimal code for green is ).  Make the text color red (Hint: The hexadecimal code for red is FF0000).