Lesson 1 - Text

During your first lesson you will learn how to create and format simple text on your website. As the purpose of this website is to give you a brief overview of creating and editing web pages I will only be discussing what I deem to be the most important tags involved with creating text, and how to implement them. Look to the Advanced Topics page in the future for potentially more complex text topics.

The text tags we will be discussing are all listed below with a brief description of each. Beware that not all of this tags will work on all browsers, so make sure you Test your pages before you post them to a server or else some people may not be able to see your text (testing locally using the appropriate doctype discussed in the Getting Started section could catch potential problems as well).

<p>
This is definitely the most common tag that you will see for formatting and displaying text. Most of the text on this website is formatted using this simple tag, including the text you are reading now. The way that it is displayed to each individual is dependant upon the browser they are using and the browsers settings. The paragraph tag also has an align attribute which we will see in the example at the end of this lesson.

<br>
This is the line break tag, it does not require a closing tag. The paragraph and header tags use a line break at the end of a line without the need for this tag, but if you want a line break somewhere else you have to specify it with this tag. You can use the br tag inside of a paragraph as well. If you use it in a paragraph it will insert a line break, but with no extra space above or below the text before and after it.

<h1> through <h6>
These six tags are for heading purposes. They are bold and designed to stand out better than the paragraph tag. The page heading on this page is enclosed in an h1 tag and each of the headings on these subsections is enclosed in an h3 tag.

<b>, <i> and <u>
These three tags are used to display text in bold, italics and underline. The underline tag is deprecated so watch out if you are using it, because it could lose support in the next version of HTML. We will learn alternate ways of implementing all of these styles when we get into Cascading Style Sheets. There is also <strong> tag which usually renders the same as the bold tag.

<div>
This tag is used to format an entire block of text, images, etc. It has four attributes; align, class, id and style. HTML offers a deprecated <center> tag for centering entire portions of pages it is better substitute this with a <div align="center">.

<blink>
This tag is used to make the contained text flash on and off in most browsers.

<ol>
This tag is used to create an ordered (numbered) list. It has three attributes; compact, start and type. The compact attribute is deprecated and not supported by many browsers. The start attribute is used to provide a starting number other than 1. The type attribute must be "1" for Arabic numerals, "A" for Uppercase letters, "a" for Lowercase letters, "I" for Uppercase Roman numerals, and "i" for Lowercase Roman numerals.

<ul>
This is the unordered list tag; it creates a bulleted list instead of a numerically ordered one like the ol tag. The ul tag has two attributes compact and type. The compact attribute which is the same as the ol. The type attribute is different and can have values of disc, circle or square this attribute is deprecated as well.

<li>
This is the list item tag, it is enclosed within ol and ul tags. Each item within the list is enclosed in opening and closing li tags.

Example:
Before we begin I should show you the comment tag. Throughout this example and other examples you may see it appear in the page source code. The markup for this tag is . The advantages of the comment tag are that it allows you to place comments directly into your source code that will not be displayed on your page, and that it can help you to organize your pages and give yourself and future programmers of that page reminders as to why things were done the way they were.

This example will walk you through using each of these tags to format and display text elements. Before we get started you need to open the folder you will be saving your examples to and the text editor you have chosen to use (we discussed these in the Getting Started page). Start a new blank document in the text editor that you have chosen and save it as TextExample.html, if you have forgotten, we learned how to do this on the Getting Started page as well.

Below are two links, one to the formatted page and one to the source code. Please look over each, and feel free to copy and paste the source code, edit it, and save it as an HTML file to practice manipulating these tags.

View Source
View Formatted Page

Now that you have completed this lesson you should be able to display and edit these simple text elements. Note two things. 1) These are not the only ways to edit text, we will get into more in Cascading Style Sheets and there are also other tags that you can use to edit text that we did not discuss here. 2) Don't forget that you can mix and match these tags simply by nesting them inside of each other. (example: if you want bold and underline you can use <b><u>content</u></b>