Module 2 Lesson 2
- 1. More Basic HTML Module 2: HTML Basics LESSON 2
- 2. Lesson Overview In this lesson, you will learn to: Manipulate HTML code using a text editor application such as Notepad. View Web pages created using HTML code using a browser. Change text within a Web page using HTML coding. Alignment text within an HTML document. Set the background color of a Web page. Set the text color within a Web page.
- 3. 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?
- 4. 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: Color name Hexadecimal code RGB code
- 5. 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
- 6. 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?
- 7. Writing Code for Background color and Text color Write the code that would display the following: White text on a black background
- 8. Check your work: Does your answer look like this: <body bgcolor=#000000 text=#FFFFFF>
- 9. Text Alignment Alignment refers to how the text is oriented on the page Left Right Center
- 10. 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
- 11. Lesson Review Explain how to write the code and attributes for each of the following situations: Text color Background color Alignment
- 12. Practice: Beginning HTML 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 008000). Make the text color red (Hint: The hexadecimal code for red is FF0000).
Editor's Notes
- #3: Lesson 2 Overview
- #4: Post one or more of these questions in an area where students can read them and allow time for students to respond to the questions. Discuss the student answers these questions.
- #5: Discuss the idea of attributes. Attributes are information which alters the look of the page and when they are included within the opening body tag affect the entire document. Students have already been given an example of this through the code <body text=red>How would this attribute change things?</body>. Students should realize that this attribute sets the text to the color red. Using the word “red” is one way of defining color. Students should realize that two other ways exist; one being a hexadecimal code and the other being an RGB code. Explain that these methods will be discussed later in Module 3. At this time, students need to understand that colors can be identified by their word name, hexadecimal code or their RGB code.
- #6: Show students some of the Web sites which display colors with their color name, hexadecimal code, and RGB code.
- #7: Color may also be used in the background of a Web page. The attribute to define the background color is also placed in the opening body tag. An example of this code defining this attribute is <body bgcolor=”33ff33”>. Ask students to identify the color 33ff33 before displaying the page. Can they use one of the color charts to identify the hexadecimal color code?
- #8: Ask the students to attempt to write the code and attributes for the following: Black background and White text
- #9: Have them check their answers with the following: <body bgcolor=000000 text=#FFFFFF>
- #10: Discuss that text can also be altered by alignment. Alignment is how the text is oriented on the page. For example, text can be aligned in three ways on a Web page; left, right and centered. Text is automatically set to left alignment unless the designer changes this alignment.
- #11: Discuss that sometimes there is a need to separate text from other parts of the Web page. This can be done horizontally by using a horizontal rule (a horizontal line). To create a horizontal rule, the tag <hr> is used. To this tag, the attributes of width (how far the line extends across the page represented by a percent), size (thickness of the line represented by an integer) and color can be added. An example of a horizontal rule tag would look something like this <hr width=90% size=10 bcolor=#0000FF>. This tag would create a line which extends across 90 percent of the Web page and is 10 pixels thick. The color of the line will be blue.
- #12: Review concepts covered if needed with the students and discuss the practice activity.
- #13: This is the last slide of the presentation.