HTML, Part 3 : Tinkering |
by Evan Goer | |
April 25, 2003 | |
This 3rd part teaches you how to change the appearance of your page using bold and background colors. Adding Text Adding Text (source)
A Simple Webpage This is a simple webpage. And I mean really simple.
To view this alteration:
Adding Text (Results) This is a simple webpage. And I mean really simple. HTML and Whitespace What happened here? Why are the two sentences on the same line? HTML ignores whitespace (spaces, tabs, or carriage returns) in the source. It replaces all continuous chunks of whitespace with a single space: " ".
Of course, there are tags that adjust the whitespace. We'll talk about those later. The example below, "Scattered Text", has the same result as the previous example. Try it out. Scattered Text (source)
This is a
Making Text Bold Change the text of adding.html to the following: Bold Text (source)
This is a simple webpage.
Save your changes and view the file in your browser. Bold Text (Results) This is a simple webpage. And I mean really simple. As you can see, the text becomes bold, starting at the and ending at the . This is our first example of a physical style tag -- a tag that directly controls the physical appearance of the text. Changing the Background Color Let's do something a little more dramatic: Background Color (source)
A Simple Webpage style="background-color: yellow">
Background Color (Results) This is a simple webpage. And I mean really simple. A bit garish... but things could be worse. Try "red", for example. This is our first example of an attribute. We'll discuss attributes at some length in the next section, Tag Properties. For now, attributes modify the behavior of a tag. For some tags, like the tag, attributes are optional. For other tags, attributes are essential. Try some other color words: "blue", "teal", "limegreen", "papayawhip"... What works? What doesn't? (Feel free to skip ahead to the Colors section if you're interested.) |