The SPAN TagThis lesson will introduce the very basic use of the SPAN tag. Here are some simple examples: ----------------------------- This section is written using a style which has been defined with the name one. If you look at the code for this section you will see that the tag surrounding it looks like this: <SPAN class=one> ----------------------------- This section is written using a style which has been defined with the name two. In the HEAD section of the page the STYLE tag was used to set up several styles to be used by SPAN. ----------------------------- This section is written using a style which has been defined with the name three. You should carefully inspect the syntax used in the style tag. In particular you should notice the use of curly braces, colons, and semi-colons. ---------------------------- That gives you an idea of how to use SPAN and STYLE, and now for another example: ---------------------------- The SPAN tag can be used to allow for a style to be used within another style. Here SPAN is used to change the background color from within another SPAN tag. Now that the SPAN tag is closed the first style is used. ---------------------------- NOTE: Not all attributes are supported in all browsers. At the time of the creation of this lesson, FireFox supported text-decoration-style and text-decoration-color, while Chrome did not support these two attributes. ---------------------------- ASSIGNMENT:You will set up five span styles and define them all in the head section of your web page. The example shown below only has four span styles for the following categories: AUTHOR, TITLE, SUMMARY, and PUBLISHER. You will create a fifth category for the YEAR. All your spans should use different color combinations and other interesting attributes. Make sure your font and background colors are either dark on light or light on dark so that the contents of each span are easy to read.
Here's an example:
|