Formatting - Your First $1000 online (2014)

Your First $1000 online (2014)

Chapter 3: Formatting

“It's okay to figure out murder mysteries, but you shouldn't need to figure out code. You should be able to read it.” -Steve McConnell

When making a structured document web developers also have to insert HTML elements, tags and codes to italicize, underline or make certain parts of the document bold.

In order to italicize any part of the text you need to type it between <i> (which is the starting tag) and </i> (the ending tag).

Look at the following example:

<!DOCTYPE html>

<html>

<head>

<title>Italic Text Example</title>

</head>

<body>

<p>The following word uses a <i>italicized</i> typeface.</p>

</body>

</html>

Once you do this you would get this result: The following word uses a italicized typeface.

You could use this to italicize a part of the text.

Let’s use our own example now.

<!DOCTYPE html>

<html>

<head>

<title>Italic Text Example</title>

</head>

<body>

<p>The following word uses a <i>italicized</i> typeface.</p>

</body>

</html>

Here’s how this would look: My birthday is on the 25th of November, yes.

So, any text that needs to be italicized should go between the <i> and </i> tags.

Now, if you would like to make a specific part of the text bold, you would enter it between <b> (the starting tag) and </b> (the closing/ending tag).

Here’s the HTML template to show you how this works:

<!DOCTYPE html>

<html>

<head>

<title>Bold Text Example</title>

</head>

<body>

<p>The following word uses a <b>bold</b> typeface.</p>

</body>

</html>

The result would look like this: The following word uses a bold typeface.

Similarly, you can also control the size of the text. If you want to go for larger texts type your text between the <big> and </big> tags and change the <title> to Larger Text Example. On the other hand if you want to reduce the size of your text, type your text between the <small> and </small> tags and change the <title> to Small Text Example.

You can also use HTML texts in order to group various elements together. For this you need to use the <div> and <span> elements. Here’s an example:

<!DOCTYPE html>

<html>

<head>

<title>Div Tag Example</title>

</head>

<body>

<div id="menu" align="middle">

<a href="/index.htm">HOME</a> |

<a href="/about/contact_us.htm">CONTACT</a> |

<a href="/about/index.htm">ABOUT</a>

</div>

<div id="content" align="left" bgcolor="white">

<h5>Content Articles</h5>

<p>Actual content goes here.....</p>

</div>

</body>

</html>

If you were to use the HTML elements above, this would be the result:

HOME | CONTACT | ABOUT

Content Articles

Actual content goes here.....

You could also use the <span> element to group inline elements together. Inline elements are elements that do not begin from a new line. Here’s the HTML text that would enable you to group inline elements together:

<!DOCTYPE html>

<html>

<head>

<title>Span Tag Example</title>

</head>

<body>

<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> along with CSS</p>

</body>

</html>

This will produce the following result: This is the example of span tag and the div tag along with CSS.

As can be seen from the HTML text, you can determine the color of the text, too. Mostly the tags are used with CSS style sheets.

Read the following website if you want to know more about HTML formatting: http://www.tutorialspoint.com/html/html_formatting.htm.

Summary

HTML formatting is important. It enables web page developers to format a page in a certain way. This chapter teaches you how to use different codes to make structured documents bold or how to italicize certain parts of the text, too.

Questions

1. What are inline elements?

2. How do you introduce inline elements in your code?