more basic xhtml module 2: xhtml basics lesson 2

More Basic XHTMLMore Basic XHTML

Module 2: XHTML Basics

LESSON 2LESSON 2LESSON 2LESSON 2



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



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?



Text color How did the code

<body text=“red”>How would this attribute change things?<body>

change the text? Web colors can be defined in three ways:

1. Color name

2. Hexadecimal code

3. RGB code



Defining Color Hexadecimal Color Chart -

http://www.funky-chickens.com/hex.html Visibone Hexadecimal Color Chart -

http://html-color-codes.com/ 216 Web Safe Color Chart (Hexadecimal and RGB) -

http://www.web-source.net/216_color_chart.htm Color Names and Hexadecimal Code -

http://www.w3schools.com/Html/html_colornames.asp RGB, Hexadecimal and Color Names -

http://web.njit.edu/~kevin/rgb.txt.html RGB, Hexadecimal and Color Names -

http://www.tayloredmktg.com/rgb/#BR



Background Color Background color is defined using an attribute The attribute to define background color is placed in the opening

body tag. <body bgcolor=“33ff33”> What color will the background be using this code?



Writing Code for Background color and Text color Write the code that would display the following:

White text on a black background



Check your work: Does your answer look like this:

<body bgcolor=“#000000” text=“#FFFFFF”>



Text Alignment Alignment refers to how the text is oriented on the page

Left

Right

Center



Horizontal Rule A horizontal rule is a horizontal line across the Web page Created with the tag <hr /> Attributes can be added to the <hr /> 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 <hr width=“90%” size=“10” color=“#0000FF” />

Creates a line that extends 90 percent across the Web page which is 10 pixels thick and the line is blue



Lesson Review Explain how to write the code and attributes for each of the following

situations:

Text color

Background color

Alignment



Practice: Beginning XHTMLCreate 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 008000). Make the text color red (Hint: The hexadecimal code for red is

FF0000).

more basic xhtml module 2: xhtml basics lesson 2

Documents