Lesson 2: Formatting with HTML

In the previous lesson, you wrote a very basic web page using simple tags. Now let's format the elements to make the page more appealing. You'll use formatting tags to display some special types of text and add the style attribute to format other elements. The structure or syntax of these tags and attributes is very specific. You'll also learn a bit about how computers create colors and how to name those colors using hexadecimal code.

Essential Questions

1. How can I make the content of an html page more attractive when displayed in a web browser?

Key Terms

• Attribute - a characteristic or property of an element; added to the opening tag, attributes provide additional information about an element; attributes are entered as a name/value pair like name="value"
• Element - a component or part of a whole
• Format - to change the style or appearance of text and other elements on the web page
• Format Tags - some special elements (or tags) are used for formatting output and were designed to display special types of text; for example, <strong>text</strong> displays as text
• Hexadecimal - a numbering system based on 16; (our decimal system is based on 10)
• Syntax - the structure of a language

Bold, Italic, and Other Special Formatting Tags

When you're writing a paper for class or even an email to a friend, you probably use bold or italic text to emphasize certain words. Using special formatting like bold and italic draws your reader's attention to those important words. You see this on lots of websites, too. In fact, those types of formatting are used in this web page to draw your attention to Key Terms, Essential Questions, and other text that you need to notice!

In HTML, the <strong> tag is used to make text bold and the <em> tag is used to emphasize text with italics. Take a look at this example:

The paragraph tags (<p>  </p>) determine the layout of the text on the page. The strong (<strong> </strong>) and emphasis (<em> </em>) tags format the text within those paragraphs. It's good coding practice to start and end formatting tags within the layout tags.

You Try It: Bold and Italic Formatting Tags

• Log in to Repl.it and open the You Try It - practice space repl.

• Add these two paragraphs to your html code just below the closing paragraph tag for 'My first paragraph':

<p>When formatting text on a web page, I can use strong and emphasis formatting tags
to draw attention to a certain word or groups of words. Even full sentences can be emphasized.</p>
<p>These formatting tags can also be used together for major emphasis.</p>

• Now add formatting tags to the paragraphs so that your finished paragraphs look like this when viewed in a browser:

When formatting text on a web page, I can use strong and emphasis formatting tags
to draw attention to a certain word or groups of words. Even full sentences can be emphasized.

These formatting tags can also be used together for major emphasis.

• See if you can figure out how to place the tags to make the text display correctly. Be sure to include opening and closing tags. If you have trouble with the code or just want to check your solution, click here to reveal the code that created the text displayed above.

• Be sure to run your code to see how it looks as a web page. Your page should now look like this:

If it doesn't look like this, go back and edit the code. Run the code again. Keep working until the display is exactly correct!

Formatting with the Style Attribute

Every HTML element has a default style which is used when displaying the element on the web page. For example, a paragraph by default displays black text on a white background. To change the default style of an element, the style attribute is defined within the element tag.

You Try It: Style Attribute

• Let's look at one attribute - color. Click here to open the Try-It Editor and  . . . try it!
• Look carefully at the code on the left side of the editor. Notice that the style attribute is within the opening tag and works in both a heading tag and a paragraph tag. Change the color value to display the text in purple or green or any other colors you might want to try.
• The style attribute has this syntax or structure:  style="name:value"  and is placed within an element tag. Notice that the syntax of the attribute uses a colon, an equal sign, and quotation marks. This syntax is required for the browser to be able to read and format the web page correctly.

Besides color, there are a number of other elements which can be styled using the style attribute. Think about some of the formatting you might do in a word processing document - changing the font, for example, or centering a title on a page. These can be controlled in html using the style attribute. Let's use the Try-It Editor again to do some additional formatting with the style attribute. Click the name of each attribute in this list and experiment with the style attributes:

• Font: try various font names and see what works. Some common web-safe fonts can be found here. What happens if you try a font that isn't recognized?
• Font-size: the sizes are expressed here in percentage of the default size. In word processing, we size fonts in pixels (px) or points (pt), so you're more used to seeing font sizes as 12, 16, or 32, for example. In web documents, though, we'll use the percentages. For more information about why, check out the sidebar.
• Text-align: on a web page, text can be left-aligned, right-aligned or centered. Try adding the text-align element to the paragraph tag on the Try-It Editor - does it work?
• Background-color: in this Try-It Editor the background-color element is styled in the body tag so it affects the entire page. Do you think it will work on the heading and paragraph tags? Try It!
  HINT: if you leave the style element for background-color in the body tag, be sure to change the background color in the paragraph and heading tags; otherwise, you won't be able to see if it's working.
• String Multiple Style Attributes Together: Often times you will need to apply multiple attributes. You can easily string multiple attributes together and save yourself some time. Example <p style="color: red; font-size: 20px; font-family: Comic Sans MS; background-color: yellow;">This is a paragraph.</p>

A Deeper Look at Color

When you tried the color and background-color attributes to style your html code, did you find some color names that didn't work? What happens if you try a color like 'hotpink'? or 'neonyellow'? or 'bluegreen'? And how does the computer know what we mean by these color names, anyway? The answer is hexadecimal!

All colors are actually coded for the computer using hexadecimal number codes. Let's see how the hexadecimal number system works and then we'll see how it relates to web colors.

The Hexadecimal System

The easiest way to understand the hexadecimal system is to compare it to the number system you already know - the decimal system.

It's not critical for you to be able to convert values between decimal and hexadecimal notation; but knowing that FF represents 'two hundred fifty-six' will be helpful in looking at html color codes

Color Codes, RGB, and Hexadecimal

All colors on a computer monitor are created by mixing Red, Green, and Blue light. The varying intensities of those three colors is what creates the millions of colors your eye can detect. To describe those varying colors, the html hexadecimal color codes are made up of six-digits - two for Red, two for Green, and two for Blue. Since the largest two-digit hexadecimal number is FF (or two hundred fifty-six), there are two hundred fifty-six possibilities for each of the three colors in any color code. (In case you're interested, that means that there are 256*256*256 unique possibilities for colors or 16,777, 216!) Only 140 color names are recognized by browsers (here's the list if you want to take a look) but you can indicate over 16 million colors using RGB color codes!

The RGB color system is used to designate color values like this:

You Try It! Using Color Codes

To experiment with color codes, go to the html color codes website and scroll down to the HTML Color Picker. You can click a color and see the code or type in a code to see the color.

Now let's practice designating the color value of an element using color codes instead of color names.

Click here to open the Try-It Editor. Replace the color names with their equivalent color codes in the left side of the editor. Click See Results to refresh the right side of the editor to view the result.

Experiment with other color codes to change the text color.