Tinkering
Let’s make a few alterations to our “Simple Webpage” from “Diving In”.
Example 1.3. Adding Text
<html> <head> <title>A Simple Webpage</title> </head> <body> This is a simple webpage. And I mean really simple. </body> </html>
To view this alteration:
-
Add the text in bold to your
simple.htmlfile. -
Save the file as
adding.html. -
Open the
adding.htmlfile in your browser.
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: ” “. Although it might take you a while to get used to this behavior, the advantage is that that you can use whitespace to make your code more readable, and the browser can freely adjust line breaks for each user’s window size and font size.
Example 1.4, “Scattered Text” displays in the browser identically to Example 1.3, “Adding Text”. Try it out.
Example 1.4. Scattered Text
<html> <head> <title>A Simple Webpage</title> </head> <body> This is a simple webpage. And I mean really simple. </body> </html>
Note
For brevity, subsequent examples will leave out the html, head, title, and body elements, since we’re just changing the body content. If the head content becomes important again, we’ll add it back.
Of course, HTML provides many ways to control whitespace. For a couple of simple examples, refer to “Paragraph Breaks”.
Emphasizing Text
Now change the text of your simple web page to:
Example 1.5. Emphasized Text
This is a simple webpage. And I mean <em>really</em> simple.
Save your changes and view the file in your browser.
As you can see, the text becomes italic, starting at the <em> and ending at the </em>. The em element represents emphasized text — text that you would stress when speaking. The em element is our first example of an element that can affect the physical appearance of the text.
For more examples of elements that can affect the appearance of text, refer to “Font Styles”.
Changing the Background Color
Let’s do something a little more dramatic:
Example 1.6. Background Color
<html> <head> <title>A Simple Webpage</title> </head> <body style="background: yellow"> This is a simple webpage. And I mean <em>really</em> simple. </body> </html>
A bit garish… but things could be worse. Try background: red, for example.
This is our first example of an attribute, a component of an element that modifies that element’s behavior. For some elements, like the body element, attributes are optional. For other elements, attributes are essential. We’ll discuss attributes at some length later, in “Attributes”.
Try some other color words: blue, teal, limegreen, papayawhip… What works? What doesn’t? (If you’re interested, feel free to skip ahead to the section called “Colors”.)