Tinkering - HTML Tutorial
Let’s make a few changes to our “Simple Webpage” from “Diving In”.
<html>
<head>
<title>A Simple Webpage</title>
</head>
<body>
This is a simple webpage.
And I mean really simple.
</body>
</html>To see this change:
- Add the new text (And I mean really simple.) to your
simple.htmlfile. - Save the file as
adding.html. - Open
adding.htmlin your browser.
HTML and Whitespace
Notice that both sentences appear on the same line? That’s because HTML ignores extra spaces, tabs, and line breaks in your code. All consecutive whitespace is treated as a single space.
This behavior may feel odd at first, but it allows you to format your code for readability without affecting how it looks in the browser. The browser also adjusts line breaks automatically depending on window size and font.
Example 1.4, “Scattered Text” displays the same way as Example 1.3, even if the text in your code is spread across multiple lines. Try it out!
<html>
<head>
<title>A Simple Webpage</title>
</head>
<body>
This is a simple webpage. And I mean really simple.
</body>
</html>Note
To keep examples concise, we’ll omit the html, head, title, and body elements in future examples, focusing only on the content inside the body. We’ll include the full structure again when necessary.
HTML provides ways to control whitespace more explicitly. For example, see “Paragraphs” for simple examples.
Emphasizing Text
Let’s emphasize part of the text. Change your page to:
This is a simple webpage.
And I mean <em>really</em> simple.
Save and view your page. You’ll see that text inside the <em> element appears italicized. The em element marks text as emphasized - like stressing it when speaking. This is our first example of an element that affects text appearance.
For more text formatting elements, see “Font Styles”.
Changing the Background Color
Now let’s change the 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>Try changing the background color to red, blue, teal, or papayawhip to see what works. This demonstrates an attribute - a piece of information that modifies an element’s behavior. Some elements require attributes, while others make them optional. We’ll cover attributes in detail in “Attributes”.