How to Code in HTML
In this section, you will find a free HTML lesson that will teach you basic HTML. You will learn the basics of how to code in HTML, exactly what HTML code is, how to write it and see several examples.
If you’d like to learn how to create a web page, taking the time to learn how to code in HTML (hypertext markup language) will not only provide you with the freedom to update your own web pages, but it will also save you some money, as you will be able to avoid hiring a professional web designer.
What is HTML Code?
A web page is created using a language called, Hypertext Markup Language, better known as HTML Code. You can write your own coding within a plain text editor, such as Note Pad, or use an HTML editor, which will write the code for you.
HTML codes, also referred to as HTML tags, are enclosed by the lesser than (<) and greater than (>) brackets and may be written in capital or lower case letters.
The opening bracket is followed by an element, which is a browser command, and ends with the closing bracket.
<p align="left">
An element may also be followed by attributes, which are words describing the properties of the element, and further instruct the browser.
<p align="left">
Attributes are only contained in the opening HTML tags to the right of the element and are separated by a space and followed by an equal (=) sign.
The value follows the equal sign and is enclosed in quotes.
<p align="left">
Basic HTML Document
Begin writing your HTML tags by creating your document’s basic layout.
HTML Code |
Browser View |
<html> | Begins your HTML document. |
<head> | Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects. |
<title> The TITLE of your page </title> | Your title should contain the page’s most relevant keyword phrase, which are words that best describe your web page. It will also be displayed within the search results of the search engines. |
</head> | Closes the head section. |
<body> </body> |
The area between the opening and closing body tags will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded. |
</html> | Closes the <html> tag. |
Text
Formatting
HTML Code |
Browser View |
<p>text</p>
<p>This is an example of text being displayed within a paragraph tags. When you place a paragraph within the paragraph tags, a space will automatically be placed between the paragraphs. </p> <p>This is an example of text being displayed within a paragraph tags. When you place a paragraph within the paragraph tags, a space will automatically be placed between the paragraphs. </p> |
Specifies a paragraph.
This is an example of text being displayed within a paragraph tags. When you place a paragraph within the paragraph tags, a space will automatically be placed between the paragraphs. This is an example of text being displayed within a paragraph tags. When you place a paragraph within the paragraph tags, a space will automatically be placed between the paragraphs. |
<br>
This is an example of<br> |
Specifies a line break.
This is an example of |
<blockquote>text</blockquote>
<blockquote>This is an example of text being displayed within the blockquote tags. The text is indented on both the left and the right sides.</blockquote> |
Indents a block of text from both sides.
|
<hx>heading X</hx>
<h1>heading 1 Text</h1> |
Specifies a heading. |
<pre>Text</pre> | |
<hr /> | Inserts a horizontal rule.
|
Links
HTML Code |
Browser View |
<a href="http://www.domain.com">Linked Text </a> | Linked Text |
<a href="mailto:you@yourdomain.com">Email Link </a> | Email Link |
<a href="http://www.domain.com"><img src="http://www.domain.com/image.gif"></a> | |
<a name="NAME"></a> Specifies a target location within a web page. | The target location is located below. You won’t see anything. However, when you click on the link below, you will be taken to it. |
<a href="#NAME">Text</a> Link leading to the target location with the same web page. |
Text Link leading to the target location within the same web page. |
Images
HTML Code <img src="http://www.yourdomain.com/image.gif" alt="Alternate Textv height="41" width="41"> |
Browser View |
Unordered list
<ul> |
Browser View |
Ordered list
HTML Code <ol> |
Browser View
|
Definition list
HTML Code <dl> |
Browser View
|
Tables
HTML Code <table width="300" border="1"> |
Browser View |
Forms
HTML Code |
Browser View |
<form method=post action="/cgi-bin/example.cgi"> | Specifies a form, which will require the use of a form processing script that resides on a web server. |
<input type="text" size="10" maxlength="30"> | |
<textarea name="comments" rows="6" cols="20"></textarea> | |
<input type="radio" name="option1"> Option 1 <input type="radio" name="option2" checked> Option 2 <input type="radio" name="option3"> Option 3 |
Option 1 Option 2 Option 3 |
<input type="checkbox" name="selection1"> Selection 1 <input type="checkbox" name="selection2" checked> Selection 2 <input type="checkbox" name="selection3"> Selection 3 |
Selection 1 Selection 2 Selection 3 |
<select> <option>option 1</option> <option selected>option 2</option> <option>option 3</option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select> |
|
<input type="password"> | |
<input type="Submit" value="Submit"> <input type="reset"> |
|
<input type="hidden"> | Nothing will display. |
</form> |
Specifies the end of a form. |
If you’re looking for additional examples of coding in HTML for just about every part of your web page, visit the HTML Codes Chart section.