Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Module 2 Lesson 2

306 views

Published on

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

Module 2 Lesson 2

  1. 1. More Basic HTML Module 2: HTML Basics LESSON 2
  2. 2. <ul><li>Lesson Overview </li></ul><ul><li>In this lesson, you will learn to: </li></ul><ul><li>Manipulate HTML code using a text editor application such as Notepad. </li></ul><ul><li>View Web pages created using HTML code using a browser. </li></ul><ul><li>Change text within a Web page using HTML coding. </li></ul><ul><li>Alignment text within an HTML document. </li></ul><ul><li>Set the background color of a Web page. </li></ul><ul><li>Set the text color within a Web page. </li></ul>
  3. 3. <ul><li>Guiding Questions for Lesson 2 </li></ul><ul><li>What is text alignment and what are some examples of it? </li></ul><ul><li>What colors do you like to see when viewing a Web page? </li></ul><ul><li>How can a choice of color affect the message on a Web page? </li></ul>
  4. 4. <ul><li>Text color </li></ul><ul><li>How did the code </li></ul><ul><ul><li><body text=red>How would this attribute change things?<body> </li></ul></ul><ul><ul><li>change the text? </li></ul></ul><ul><li>Web colors can be defined in three ways: </li></ul><ul><ul><ul><li>Color name </li></ul></ul></ul><ul><ul><ul><li>Hexadecimal code </li></ul></ul></ul><ul><ul><ul><li>RGB code </li></ul></ul></ul>
  5. 5. <ul><li>Defining Color </li></ul><ul><li>Hexadecimal Color Chart - http://www.funky-chickens.com/hex.html </li></ul><ul><li>Visibone Hexadecimal Color Chart - http://html-color-codes.com/ </li></ul><ul><li>216 Web Safe Color Chart (Hexadecimal and RGB) - http://www.web-source.net/216_color_chart.htm </li></ul><ul><li>Color Names and Hexadecimal Code - http://www.w3schools.com/Html/html_colornames.asp </li></ul><ul><li>RGB, Hexadecimal and Color Names - http://web.njit.edu/~kevin/rgb.txt.html </li></ul><ul><li>RGB, Hexadecimal and Color Names - http://www.tayloredmktg.com/rgb/#BR </li></ul>
  6. 6. <ul><li>Background Color </li></ul><ul><li>Background color is defined using an attribute </li></ul><ul><li>The attribute to define background color is placed in the opening body tag. </li></ul><ul><li><body bgcolor=“33ff33”> </li></ul><ul><li>What color will the background be using this code? </li></ul>
  7. 7. <ul><li>Writing Code for Background color and Text color </li></ul><ul><li>Write the code that would display the following: </li></ul><ul><li>White text on a black background </li></ul>
  8. 8. <ul><li>Check your work: </li></ul><ul><li>Does your answer look like this: </li></ul><ul><li><body bgcolor=#000000 text=#FFFFFF> </li></ul>
  9. 9. <ul><li>Text Alignment </li></ul><ul><li>Alignment refers to how the text is oriented on the page </li></ul><ul><ul><li>Left </li></ul></ul><ul><ul><li>Right </li></ul></ul><ul><ul><li>Center </li></ul></ul>
  10. 10. <ul><li>Horizontal Rule </li></ul><ul><li>A horizontal rule is a horizontal line across the Web page </li></ul><ul><li>Created with the tag <hr> </li></ul><ul><li>Attributes can be added to the <hr> tag such as: </li></ul><ul><ul><li>Width or how far the line extends across the page, defined by a percent </li></ul></ul><ul><ul><li>Size or how thick the line is, defined by an integer </li></ul></ul><ul><ul><li>Color, defined by a hexadecimal code </li></ul></ul><ul><li><hr width=90% size=10 color=#0000FF </li></ul><ul><ul><li>Creates a line that extends 90 percent across the Web page which is 10 pixels thick and the line is blue </li></ul></ul>
  11. 11. <ul><li>Lesson Review </li></ul><ul><li>Explain how to write the code and attributes for each of the following situations: </li></ul><ul><ul><li>Text color </li></ul></ul><ul><ul><li>Background color </li></ul></ul><ul><ul><li>Alignment </li></ul></ul>
  12. 12. <ul><li>Practice: Beginning HTML </li></ul><ul><li>Create the following changes in your “Tags and Attributes” Web page: </li></ul><ul><li>Center the title “Tags and Attributes” </li></ul><ul><li>Make the background of the Web page green (Hint: The hexadecimal code for green is 008000). </li></ul><ul><li>Make the text color red (Hint: The hexadecimal code for red is FF0000). </li></ul>

×