How to Code in HTML

 

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

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>
text being displayed with various<br>
line breaks. The text will<br>
break to the next line each time the <br>
tag is used.

Specifies a line break.

This is an example of
text being displayed with various
line breaks. The text will
break to the next line each time the break tag is used.

<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.

blockquote

<hx>heading X</hx>

<h1>heading 1 Text</h1>
<h2>heading 2 Text</h2>
<h3>heading 3 Text</h3>
<h4>heading 4 Text</h4>
<h5>heading 5 Text</h5>
<h6>heading 6 Text</h6>

Specifies a heading.

<pre>Text</pre>

pre1

pre2
<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> globe
<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

globe

 

Unordered list

HTML Code

<ul>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

Browser View

unordered-list

 

Ordered list

HTML Code

<ol>
  <li>First List Item</li>
  <li>Second List Item</li>
  <li>Third List Item</li>
</ol>

Browser View

  1. First List Item
  2. Second List Item
  3. Third List Item

 

Definition list

HTML Code

<dl>
  <dt>First List Item</dt>
    <dd>First List Item Description</dd>
  <dt>Second List Item</dt>
    <dd>Second List Item Description</dd>
  <dt>Third List Item</dt>
    <dd>Third List Item Description</dd>
</dl>

Browser View

First List Item
First List Item Description
Second List Item
Second List Item Description
Third List Item
Third List Item Description

 

Tables

HTML Code

<table width="300" border="1">
  <tr>
    <th>Table Header</th>
    <th>Table Header</th>
  </tr>
  <tr>
    <td>Table Data</td>
    <td>Table Data</td>
  </tr>
  <tr>
    <td>Table Data</td>
    <td>Table Data</td>
  </tr>
</table>

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.