Important for you to know the answer to this question: What is HTML?

It’s important for you to know the answer on that question before starting learning HTML. OK let’s start and answer the question “What is HTML?”

Web pages are written in HTML. It stands for HyperText Markup Language. HyperText is simply a piece of text that works as a link. Via such links you can go anywhere on the World Wide Web, any time you want. The word text in HTML is important: HTML documents MUST be text-only. Since HTML documents are just text files you can use the simplest text editor such as Notepad (for PC users) or SimpleText (for MAC users) to start writing your web pages.

If you prefer to use the online HTML editor you MUST save your document as .html document not as .doc document. If you save your HTML documents in a format other than text then you save a lot more than only the text. You save also the font settings, margin settings, … That is not what you need, you need only the text.

Of course today there are a lot of editors out there that let you create web pages without knowing anything about HTML. You only have to create the layout of your web pages and the editor creates the HTML for you. These editors are called WYSIWYG editors (What You See Is What You Get). It’s however important to learn and understand HTML so you know what you’re doing and you’re able to edit and correct bugs in your web pages.

The Markup Language stands for the set of codes (called tags) that enables you to format text on web pages. For example is the bold tag. It puts text between the bold tags in bold. All tags begin with a less-than sign < and end with a greater-than sign >. The tags are not case-sensitive meaning that and do both the same thing. Most tags have a corresponding end tag. It’s always the begin tag with a slash after the less-than sign like .

Example:

This text will appear in bold

becomes in browser

This text will appear in bold

Sometimes a tag contains more than one word. Words that follow the tag are called attributes and are only put in the begin tag. An attribute is followed by an equal sign = and a value contained in quotes. A tag can contain more than one attribute. The attributes are then separated by a space. In the example below COLOR is an attribute of the FONT tag and has the value BLUE contained in quotes. In the second example COLOR and SIZE are used as attributes of the FONT tag.

Example 1:

This text will appear in blue

becomes in browser

This text will appear in blue

Example 2:

This text will appear in blue

becomes in browser

This text will appear in blue

Creating web pages

Creating web pages is not difficult at all. Every web page has always the same basic structure. When creating web pages you start always with the <HTML> tag end end with the </HTML> tag, telling the browser where the document starts and where it stops. There are 2 main sections: a HEAD and a BODY section.
Creating web pages starts with the HEAD section. This section is placed after the <HTML> tag. It starts with the <HEAD> tag and ends with the </HEAD> tag. It includes heading information that does not show directly on the web page. The most important tag in this section is the <TITLE> and </TITLE> tags containing the title of your webpage. The title is what appears in the top of your browser window above the FILE–EDIT–VIEW– menubar. Other things you will often see in the HEAD section are metatags, cascading style sheets, Javascript, … all invisible for visitors.
The BODY section is placed after the HEAD section. It starts with the <BODY> tag and ends with the </BODY> tag. It contains the contents of your web page like the text, images, forms, … visitors can see when they launch your webpage in their browser.
Just follow the global structure below when creating web pages.

<HTML>

<HEAD>

<TITLE>Title of the page</TITLE>

</HEAD>

<BODY>

Text Text Text Text Text Text Text

</BODY>

</HTML>

See how the above looks in your browser. You will see the title “Title of the page” in the top of your browser window and the text that appears between the BODY tags.

Follow the steps below to create a web page.

Open your favorite text editor. NotePad is fine. This is the standard text editor that comes with the Microsoft Windows operating system. Of course you can choose any other text editor on any platform. Just remember save the document always as text file.

Copy the above web page structure into your text editor. Replace the title and add some text between the BODY tags. There is no limit how much text you can add.

Save your file as .htm or .html file. Select the “Save As” option in the “File” menu. In the “File Name” box insert a name and add a .htm or .html suffix to it like test.htm or test.html for example. Browsers are able to read both extensions. If you still have a computer running on Windows 3.x you will only be able to use the .htm extension because Windows 3.x only allows three letters after the dot. MAC OS and Windows 9x allow more.

Launch your document in the browser to preview it. Locate now on your computer the .htm(l) document that you just saved and double click on it. Your browser will automatically launch the web page you just have created.

Repeat eventually the process. If you want to update your web page, just open your .htm(l) document in NotePad and do the necessary changes, save it and launch your document again in your browser.

Setting web page properties

You can set properties for your web page by inserting attributes in the BODY tag. When you do not specify these attributes web browsers will use the default values. Below you find an overview of some important attributes you can use in the BODY tag.
BGCOLOR – TEXT
The BGCOLOR attribute let you specify the background color of the web page. The TEXT attribute let you specify a text color.
To specify colors you need the hexadecimal RGB value or name of the color. RGB stands for the Red,Green,Blue value of a color varying from 0 to 255. Each color contains a specific amount red, green and blue value. For example white has a RGB value 255 255 255. The hexadecimal RGB value of white is FFFFFF.
To help you determine the right hexadecimal RGB value or name of a color click here to find different color charts, a color text on background tool, a Red/Green/Blue to Hexadecimal Converter. Excellent free resource!
When using the hexadecimal color value you need to insert first a # sign as you can see in the example below.

Example:

In this example the color gray will be used as the web page background color and a lightblue as text color. Click here to see how a web page looks with these background and text colors.

BACKGROUND
Instead of using a background color you can also use a background image. When using an image as background this image is repeated until the browser screen is filled. It’s important that the image you use is seamless so when the images are placed below and beside each other the seams are invisible. When using an image as background it’s important to know that the text comes on top of the background image. Choose your image wisely so your text remains readable.

Example:

In this example the image back.gif is used as background image. This is the image: It’s the same image that is used at this webpage. to see how a webpage looks with this background image.

LINK – VLINK – ALINK
With these attributes you can specify the colors of the different link states.

LINK : defines the initial color of an unvisited link, when you don’t specify a color, blue is used as default.
VLINK : defines the color of a visited link, when you don’t specify a color, purple is used as default.
ALINK : defines the color to which links briefly change when clicked, when you don’t specify a color, red is used as default.

Example:

In this example the link color is orange and the visited link color is light yellow. For the active link the default red is used because no color is specified.

Source of the article: Learning-html