CMS

Content

HTML

Images

Monetizing

Home » HTML

Basic Text Formatting

Monday, 22 March 2010 · Print This Post Print This Post One Comment

Related Reading

This entry is part 1 of 5 in the series Basic Text Formatting

“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:

<html>
<head>

</head>
<body>

</body>
</html>

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

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!

Series NavigationBoldening, Italicising & Underlining Text»

Bookmark this Post Subscribe to Blog

Popular Tags

Adsense Background Cascading Style Sheets colors Content font Forms GIF Hex Codes HTML Hyperlinking Images IMeye JavaScript JPEG Keyword Research layout Merging meta PNG SEO Sizing spacer Tables text W3C
Comments
  • Scrappy

    I’m confused. The text that I typed between and DID show up when it opened in foxfire. I even went back and c/p yours in case I made an error and it did the same thing. Why did I have that text show up?

Leave a Comment

Threaded commenting powered by Spectacu.la code.