Basic Text Formatting @ OWDC

LESSON 1-03: Basic Text Formatting

Web Design Lessons > Lesson 1-03: Basic Text Formatting

Previous Lesson | Lesson Index | Next Lesson

"Text Formatting" is the term that defines the process of transforming plain text into a visually more attractive text by adding formatting elements such as emphasis, paragraphs, headings, etc. where applicable. HTML has a wide variety of tags specifically created for text formatting purposes. We'll get to that in a minute.

The first thing I want you to do is to open a simple text editor (i.e. "notepad" in Windows - you can open it by clicking on "Start" then hovering your mouse on "Programs" and then "Accessories" and finally clicking on "Notepad" found under the Accessories menu). Now, type in the fundamental HTML structure we have seen in the previous lesson of our web design course. You can simply copy and paste the HTML code below into your notepad, or type it in manually:

In the previous lesson of your free online web design course, we've learned that this is the basic structure for EVERY web page on the web. If you save this file with a ".htm" or ".html" extension, you can create a blank web page written in HTML. Click on the "File" menu of your notepad and select "Save As...". Type in "blankpage.htm" as the filename, select "Desktop" as the destination to save and click on "Save." Now, you should have a blank web page sitting on the desktop of Windows. If you double-click on "blankpage.htm", it will be opened inside a web browser (i.e. Internet Explorer) and present a totally blank document.

We will now try to add some content to see if it will appear. Write down something simple like "Hello!" or "My first web page" between the <head> and </head> tags like this:

<html>
<head>

My first web page

</head>
<body>

</body>
</html>

Now save the document again (make sure you save it with a .htm or .html extension) and double-click it.

What did you get? A blank screen again! What could be wrong?

Don't worry, I've made you make a mistake on purpose. In the previous lesson of our course, we made a distinction between the "body" and "head" parts of an HTML document. The "head" part can not contain any content that is supposed to be visible to the reader. It contains information such as the keywords and character set used in the document, the language the document is written in, the author and the description of the document, etc. In short, if you want to add content, you need to write it inside the "body" part (i.e. between the <body> and the </body> tags). Let's rewrite our web page, and this time, correctly:

<html>
<head>

</head>
<body>

My first web page

</body>
</html>

If you save this page and double-click it, you'll see your message displayed on the screen:

My first web page

Now that we have our first text output, we can finally start learning how to format it! Lesson 1-03-01 of your web design course will show you how to bolden, italicise and underline your text.

Below Are The Subsections Of Lesson 1-03:

• Web Design Lesson 1-03-01
Boldening, italicising & underlining text
• Web Design Lesson 1-03-02
Adding line breaks, paragraphs & headings
• Web Design Lesson 1-03-03
Creating ordered / unordered lists
• Web Design Lesson 1-03-04
Changing text size, text color & font face

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

The first subsection of Online Web Design Course Lesson 1.03 is about boldening, italicising and underlining your text. So let's head there now!

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-01 Introduction To HTML
• Lesson 1-02 Fundamental HTML Tags
• Lesson 1-03 Basic Text Formatting
• Lesson 1-04 Web Colors Unleashed
• Lesson 1-05 HTML Tables

Back To Top

BASIC TEXT FORMATTING!