1 / 12

Mastering XHTML Basics: Text, Color, and Alignment

Learn how to manipulate XHTML code, change text and colors, align content, and set background color in this comprehensive lesson. Practice with real-world examples included.

ellischavez
Download Presentation

Mastering XHTML Basics: Text, Color, and Alignment

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. More Basic XHTML LESSON 2 Module 2: XHTML Basics

  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. • Align text within an XHTML document. • Set the background color of a Web page. • Set the text color within a Web page. • Create tags with attributes.

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

More Related