Hackers create special software to take over your computer called virus. They can corrupt system files or completely deny you access to your own computer.

Computers without antivirus software on the internet can be infected within seconds of visiting an infected or malicious website or minutes without doing anything else. A special kind of virus called a worm can spread itself to another computer including yours. Some types of viruses install other viruses or programs to inflict even more damage.

Anti-Virus software provides a layer of protection between a virus and your computer. If you don’t have an anti-virus program installed on your computer then I recommend installing AVG Free.

Download AVG Free

Install Anti-Spyware/Malware Software

Spyware and malware programs are separate from viruses. These types of programs are designed to create pop-ups, steal personal information and passwords or assist with identity theft.

Spyware programs are exactly as they sound. These programs are designed to spy on you and transmit their activities to the person or group which created the program.

Malware is software which mimics removal programs which will tell you that you have numerous virus, Trojans, worms or malware installed on your computer. They are often more intrusive than normal detection software. The intent of these programs is to get money from you.

I recommend using Lavasoft’s Ad-Aware and SpyBot.

Download Lavasoft Ad-Aware
Download SpyBot

Install a Firewall

Firewalls are designed to prevent unauthorized access from hackers or software to your computer. The majority of versions of Microsoft Windows already come with firewall software. All you have to do is make sure they are turned on and configured properly.
I recommend using ZoneAlarm as a firewall. It will detect if something is trying to get into your computer and ask you whether you want to block it or not while giving details of what is trying to get into your computer.

Download ZoneAlarm

Turn on Windows Update

Every month, Microsoft releases updates which are designed to fix security threats or provide updates to programs installed on your computer. This will provide the most up to date protection from hackers trying to exploit vulnerabilities in your system. Updates from Microsoft are FREE.

Update Microsoft Windows

Install a Second Internet Browser

The default browser installed by Microsoft Windows is Internet Explorer. However, it is the browser that majority of browser attacks target. If infected, Internet Explorer may be prevented from accessing the internet which will limit your ability to remedy the problem or find solutions.

Installing Mozilla Firefox, Google Chrome, Safari or Opera will give you another way to access the internet.

Mozilla Firefox
Google Chrome
Apple Safari
Opera

Backup Your Important Files

If you have important tax documents, pictures of your family, school work or other important documents stored on your computer, it is strongly recommended that you create a backup copy.

If you don’t have a backup copy, what happens if your computer crashes, your hard drive fails or a virus infects files on your computer? If you don’t have a backup, you will most likely lose those important documents.

You can use an external hard drive, a flash drive, burn the files to a DVD or CD or upload your files to an online storage location. You can even using backup software such as Mozy to do the work for you.

Pay Attention to Email

A ton of viruses spread through email and come in the form of email attachments. If you get an attachment from someone you don’t know, do not open it.

Also watch out for emails that look like they come from legitimate people or companies. Hackers will usually change just one character from an email address or change the destination of a link to trick you into visiting their website.

Be Careful When Downloading Programs

Only download and install programs from websites which you know and trust. If you receive a popup from a random website asking you to install a program, game or screensaver, decline the invitation. The majority of these programs it is prompting you to download contain viruses or spyware.

A form contains one or more of the following: text boxes, text areas, password fields, check boxes, list boxes, drop down lists, radio buttons, submit buttons and hidden fields.  The form can also contain fieldsets, legends and labels for each form item.

The <form> tag is used to define a form.  There is one required attribute that must be added to the form.

<form>
</form>

The action attribute is required because it tells the form what page or program will process the information it gathers.  Otherwise, the form would be pretty useless.

<form action="processingpage.php">
</form>

There are mainly two ways forms can send their data.  One of the ways is in the URL.  Another way, and a more secure way, is the form can send the form data within the page header.

The optional method attribute defines which way the form sends its data.  A value of get tells the form to send the information within the URL.  A value a post tells the from to send the data within the page header.  If you don’t provide the method, it is automatically set to get.

<form action="processingpage.php" method="post">
</form>

The <input> tag is the user input tag within the form you will use the post.  Each <input> tag has two required fields.  The type attribute specifies which kind of input you want to use.

The input tag does not have a closing tag and must be closed with />.

The name attribute is used as the key when the server processes the form and retrieves the information.

<form id="form1" name="form1" method="post" action="processingpage.php">
    Name: <input type="text" name="name" /><br />
    Email Address: <input type="text" name="email" />
    <input type="submit" name="Submit" value="Submit" />
</form>

The <textarea> tag is used to provide a multiline textbox.  The rows and cols attributes are required to tell the textbox how many rows and columns to display.

<form id="form1" name="form1" method="post" action="processingpage.php">
    Name: <input type="text" name="name" /><br />
    Email Address: <input type="text" name="email" />
    <p>
    Comments:<br />
    <textarea name="comments" cols="50" rows="5"></textarea>
    </p>
    <input type="submit" name="Submit" value="Submit" />
</form>

The <select> tag defines a drop down list.  Each item in the list is contained within a <option> tag.

<form id="form1" name="form1" method="post" action="processingpage.php">
    <p>Name:
      <input type="text" name="name" />
      <br />
    Email Address:
    <input type="text" name="email" />
    </p>
    <p>
    Comments:<br />
    <textarea name="comments" cols="50" rows="5"></textarea>
    </p>
    <p>Gender:
      <select name="gender" id="gender">
        <option value="-" selected="selected">-Choose Your Gender -</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option>-Choose Your Gender -</option>
      </select>
     </p>
    <input type="submit" name="Submit" value="Submit" />
</form>

A complete sample form page:

<html>
<head>
<title>Creating Forms</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="processingpage.php">
    <p>Name:
      <input type="text" name="name" />
      <br />
    Email Address:
    <input type="text" name="email" />
    </p>
    <p>
    Comments:<br />
    <textarea name="comments" cols="50" rows="5"></textarea>
    </p>
    <p>Gender:
      <select name="gender" id="gender">
        <option value="-" selected="selected">-Choose Your Gender -</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option>-Choose Your Gender -</option>
      </select>
    </p>
    <input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>

Tables take a little while getting used to.  They become even more complicated when combining rows and columns and adding a header row to the table.

Let’s start with an example:

<html>
<head>
<title>Advanced Tables</title>
</head>
<body>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
  <tr>
    <td>Row 1 Col 1 </td>
    <td colspan="2">Row 1 Col 2 </td>
  </tr>
  <tr>
    <td rowspan="2">Row 2 Col 1 </td>
    <td>Row 2 Col 2 </td>
    <td>Row 2 Col 3 </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>

The attributes colspan and rowspan on table cells are used to merge columns and rows together repectively.  For each, you provide the number of columns or rows you want merged together.

In the example, there is a 3×3 table.  In the first row, cells 2 and 3 are merged together.  In the second row, the first cell is merged with the cell right below it.  In third row, there are only two cells because the first cell is merged with the first cell of the second row.  I know..it’s a little tricky but after playing with rowspan and colspan, you’ll get the hang of it.

Header Rows

In addition to rowspan and colspan, you can define the cells in the first row in the table as the header row.  The is done by changing the <td> tag to a <th> or table header tag.

<html>
<head>
<title>Table Headers</title>
</head>
<body>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
  <tr>
    <th>Row 1 Col 1 </th>
    <th>Row 1 Col 2 </th>
    <th>Row 1 Col 3 </th>
  </tr>
  <tr>
    <td>Row 2 Col 1 </td>
    <td>Row 2 Col 2 </td>
    <td>Row 2 Col 3 </td>
  </tr>
  <tr>
    <td>Row 3 Col 1 </td>
    <td>Row 3 Col 2 </td>
    <td>Row 3 Col 3 </td>
  </tr>
</table>
</body>
</html>

The <th> tags makes the text bold and centered.

To create a table which has 2 rows and 3 columns it would be created as:

<html>
<head>
<title>Tables</title>
</head>
<body>
<table>
  <tr>
    <td>Row 1 Col 1 </td>
    <td>Row 1 Col 2 </td>
    <td>Row 1 Col 3 </td>
  </tr>
  <tr>
    <td>Row 2 Col 1 </td>
    <td>Row 2 Col 2 </td>
    <td>Row 2 Col 3 </td>
  </tr>
</table>
</body>
</html>

Just remember that each row is defined as <tr> and is nested inside the <table> tag.  Each column is defined as cells (<td>) within each row and the number of cells within each row must equal the same amount.

Here is a listing of a few attributes you can add to the <table> tag.

<html>
<head>
<title>Table Attributes</title>
</head>
<body>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
  <tr>
    <td>Row 1 Col 1 </td>
    <td>Row 1 Col 2 </td>
    <td>Row 1 Col 3 </td>
  </tr>
  <tr>
    <td>Row 2 Col 1 </td>
    <td>Row 2 Col 2 </td>
    <td>Row 2 Col 3 </td>
  </tr>
</table>
</body>
</html>

There are three types of lists in HTML: unordered lists, ordered lists and definitions lists.  Unordered and ordered lists are the two simplier lists of the three.  They work the same way except for unordered lists uses bullets on the left of each item and ordered lists uses numbers.

Unordered and Ordered Lists

Unordered lists uses the <ul> tag and the ordered lists use the <ol> tags.  To define each item within the lists, the <li> tag is used.

Create a new HTML documents called lists.htm and put the following code as it’s content.

<html>
<head>
<title>Learning Lists</title>
</head>
<body>
<ul>
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
</ul>
<ol>
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
</ol>
</body>
</html>

A cool aspect of lists is that they can be nested within each other.

<html>
<head>
<title>Learning Lists</title>
</head>
<body>
<ul>
    <li>First List Item
      <ul>
        <li>Child Item 1 </li>
        <li>Child Item 2 </li>
      </ul>
    </li>
    <li>Second List Item</li>
    <li>Third List Item</li>
</ul>
</body>
</html>

Definition Lists

Definition lists use the <dl> tag.  The items in a definition list work a little bit differently than a ordered or unordered list.  Definition lists use the <dt> tag which is a definition term and the <dd> tag which is a definition description.

For each item in the list, the <dt> tags comes first, followed by <dd> tags.  I used the plural forms because you can put multple <dt> tags together and multiple <dd> tags together.

Simple Example

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Learning Lists</title>
</head>
<body>
<dl>
    <dt>Title 1</dt>
    <dd>Definition 2</dd> 

    <dt>Title 2</dt>
    <dd>Definition 2</dd>
</dl>
</body>
</html>

Complex Example

<html>
<head>
<title>Learning Lists</title>
</head>
<body>
<dl>
    <dt>Title 1</dt>
    <dd>Definition 1-1</dd>
    <dd>Definition 1-2</dd> 

    <dt>Title 2</dt>
    <dt>A Sub-Title</dt>
    <dd>Definition 2-1</dd>
    <dd>Definition 2-2</dd>
</dl>
</body>
</html>

To create an image, we use the <img> tag.  The src attribute of the <img> tag tells the browser where it can find the image.

<img src="http://www.yourwebsite.com/images/imagename.jpg" />

Notice that just like the <br /> tag the <img> tag does not have a closing tag and must be closed with a />.  Just like the <a> tag, the src attribute can be absolute or relative.

You can use  JPEG (.jpg or .jpeg), GIF (.gif) or PNG (.png) files in the image tag.  Typically JPEG files are used for pictures or photographs and GIF files are typically used for simple graphics.  The PNG format is mostly the combination of the JPG and GIF.  It also supports alpha transparency.

The images you include do not have to be the exact size of the image you include.  You an adjust the width and height of the image using the width and height attributes of the <img> tag.

<img src="http://www.yourwebsite.com/images/imagename.jpg" width="150" height="100" />

Another very important attribute of the <img> tag you should always use is the alt attribute.  The alt attribute is the alternate description of the image which is essential for people who cannot see or if someone has images turned off in their browser.

<img src="http://www.yourwebsite.com/images/imagename.jpg" alt="A sample image" width="150" height="100"/>

We can create the linking of page using the <a> tag or anchor tag.

<html>
<head>
   <title>Learning Links</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>First Topic</h2>
<p>Text of the first topic</p>
<h2>Second Topic</h2>
<p>Text of the second topic</p>
<p><a href="http://www.johnschilling.com">a link to my website</a></p>
</body>
</html>

In the above HTML code, I created a link to my website using the <a> tag.  The href attribute stands for hypertext reference.  The href attribute tells the link where to go.  The text within the opening and closing tags is the text which appears on the page.

This is what the link will look like:

a link to my website

Links can either be absolute like “http://www.johnschilling.com/” or relative to the current page like “anotherpage.htm”.

Relative Links

If you want to create links within your website, you don’t need to include the full URL for the page.  If the page you are linking to is in the same folder you would write the link like this:

<a href="page2.htm">Second Page</a>

If the page is in a subfolder, the link would look like this:

<a href="subfolder/page2.htm">Sample Page</a>

If the page is in a parent folder it would look like this:

<a href="../page2.htm">Sample Page</a>

The reference ../ points to the parent folder.  The reference ../../ points to the parent folder of the parent folder.  Just as you can go up multiple folders, you can also go down multiple folders like this:

<a href="category/subfolder/page.htm">Sample Page</a>

Absolute Links

A type of absolute link is:

<a href="http://www.johnschilling.com">a link to my website</a>

You use absolute links just as you would put them in the browser’s address bar.  Instead of the address bar, put them in the href attribute.

Linking to Files

Links can not only can be linked to other pages, they can also be linked to files.  The same rules for relative links apply but instead of a page name, you would but the location of the file.

<a href="files/sample.pdf">Download Sample PDF</a>

You can also write an absolute link to the file:

<a href="http://www.yourwebsite.com/files/sample.pdf">Download Sample PDF</a>

Linking to Another Location on the Page

Another type of link is a internal page link.  You may have seen them before in pages that have a table of contents.

These types of links is a two step process.  First you have to define where the link will go to.  Just give the element an id:

<div id="jumptothis"></div>

To create the link to the element you would put a # and the name of the id in the href attribute.

<a href="#jumptothis">Link to jumptothis</a>

You could even write the link like this:

<a href="http://www.yourwebsite.com/page.htm#jumptothis">Link to jumptothis</a>

We have already discussed the concept of elements.  Elements are sections of code on the site.  Two of the types of elements are block and inline elements.  Block elements take up the full width of it’s parent tag and wraps everything that follows to the next line while inline elements are only wide enough to fit the content they hold.

The <div> tag is a block element and the <span> tag is a inline element.  The <div> and <span> tags are typically used to define sections of HTML which can later be styled using CSS (Cascading Style Sheets).   The most common attributes that are used with these tags are id and class.

<div id="maincontent">
    <span class="normaltext">Text within span tags</span>
</div>

In older versions of  HTML, the <font> tag was used along with the face, color and size attributes was used to modify the way text looked.  Since then, they have been deprecated and are no longer supported in favor of CSS styles.

Styles was introduced in HTML 4 and is now the preferred, and easier way to define and manage, the styling of HTML elements.

Inline Styles

To add styles to your text, you add the style attribute to the tag that surrounds your text.  If the text has no tag that solely surrounds it, you can use the <span> tag to surround your text and then add the style attribute to it.

To add the font face, size and a color to the text, you use the style tag like this:

<span style="font-family: Arial, Helvetica, sans-serif; size: 12px; color: red;">Sample Text</span>

Each style applied is in the format: style: value;.  A colon separates the name of the style from the value and a semi-colon is added after the value.

There are numerous other styles you can use like adding a background color:

<span style="font-family: Arial, Helvetica, sans-serif; size: 12px; color: red; background-color: yellow;">Sample Text</span>

Although you can use this method and it works, it is not recommended.  The purpose of styles is they can be used multiple places so your site will have a common look and feel.

Internal Style Sheet

A better way to define styles is to move the styles from the tag and move them into a more central location.  A better way, which I use on pages where the styles won’t be usable elsewhere, is in the page header:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Internal Style Sheets</title>
<style type="text/css">
span {
	font-face:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: red;
	background: yellow;
}
</style>
</head>

<body>
	<span>Sample Text</span>
</body>
</html>

Here, I’ve defined a style, which targets all span tags on the page, in the head section of the page.  If I add another <span> tag to the page, the style will automatically apply to that style as well.  Cool, huh?

External Style Sheets

The absolute best way to define styles is to create a file with a .css extension and link to it from each page where you want to use the style.  If you need to change the design of an element or tag that you intend to apply across your whole site, you only have to modify it in one place.  You would include the .css file in your page like this:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>External Style Sheets</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<span>Sample Text</span>
</body>
</html>

There is so much more to learn about how to create styles.  I great resource to learn about CSS Styles is at w3school.com.

This is an example of how they should be used.

<html>
<head>
   <title>Learning Headings</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>First Topic</h2>
<p>Text of the first topic</p>
<h2>Second Topic</h2>
<p>Text of the second topic</p>
</body>
</html>

<h1> is typically used for the page title and should only be used once.  The other header tags, <h2> through <h6> can be used as much as you wish.

The general rule when using header tags is <h2> is the sub-heading of <h1>, <h3> is the sub-heading of <h2>.. and so on.