If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

You’ll find that once you familiarize yourself working with HTML, you’ll be able to control the look and feel of your web site. It won’t be long before you’re a whiz at HTML

Platform Independant:
HTML is ‘Platform Independant’, which basically means ‘universal’. It doesn’t matter what kind of computer you have, what operating system you use or what server you host your website on. Windows, Mac, UNIX/Linux, they will all preform equally providing your HTML files are saved in ‘Standard Text Format’, otherwise known as ASCII. The only thing that may vary is what type of HTML editing software will work on your computer.

Basic Anatomy of a Web Page:
Every web page consists of a text file (your HTML file) and image files (pictures or graphics) used on the page. The HTML file contains all the text, and gives your website browser instructions on how the page should be displayed to the viewers.

Before I jump the gun too much, you need to know that each HTML page created has a special extension. For example, this name of this page is ‘Introduction’ but it ends in the extension of ‘.html’. By looking at the extension of the page displayed in your web browser, you can tell what type of code was used to create that page. We’re learning about .html, but there is also .php, .asp and .. well, let’s just stop there for now

Tags
Tags tell the web browser what to do. A tag is comprised of a < character at the beginning and a closing > at the end. These tags can contain information on what font should be displayed (ie Times New Roman) or how that font should look (ie Italic or Bold) which are some of the common tags used. Tags are also used to display images and to create hyperlinks (links to other pages or even other websites). We’ll be learning about many of the common HTML tags, but for now it’s more important that you understand what they are.

One easy way to learn about tags is by viewing the ‘Source Code’ of other HTML websites. This is one of the tricks I’ve used to learn about HTML myself! Viewing the source code is easy to do although the steps may differ between browsers. For example, in Mozilla FireFox, simply click on “View/Page Source”. You’ll then see all of the HTML code used to create that one web page.

Try it now..

Let’s have a peak at Google.. www.google.com and then view the source code in your browser. (Try View >> Page Source).

Cool huh?!

Question:
You’ve explained to me that every page ends with an extension like .html, but when the link above to Google’s web site doesn’t have that.. now I’m confused!

Answer:
When you type www.google.com in your web browser, your browser actually see’s www.google.com/ <-- note the / at the end. When a browser see's the / with nothing after it, it automatically looks for an index page, which in the case of html will be 'index.html'. Try entering www.google.com/index.html and you’ll see that you end up at the very same page.

When viewing the source code of websites, it’s important to note that no two are the same - and never will be. Some sites make use of website builders which automatically create its own code, and though it may look much like regular HTML, it may also insert some program specific code as well. Microsoft Front Page is one such culprit, and even my beloved XSite Pro has it’s own signature. Websites also make use of Content Management Systems such as Joomla, or blogging scripts such as WordPress. You have probably come across all of these various types of websites though you may not have realized it.

In the coming lessons we’ll talk about images, meta tags, and yes, even the dreaded tables. I say dreaded as the code can be really heavy, and there are much better ways to accomplish the same things (aka CSS - Cascading Style Sheets). I’ll touch on CSS later on, but it’s truly become it’s own language and I can only show you the basics.

There are a lot of women out there who have websites, but have no clue how to edit them or do much with them as someone else created the site and you’ll have to fork out additional cash just to have minor changes made.

Well, that sucks!  And although you’ll here tons and tons on PHP, Javascript and all kinds of other crazy lingo, the bottom line is that without knowing the basics of HTML you’ll never really ‘get’ any other programming language (at least, that’s been my own personal experience lol).

So, I’ve put together a bunch of mini tutorials that should help out with some of the basics.

There are several tags that every HTML document must have before it can be viewed in a web browser. Tags are commands that tell the website browser what to do with the text contained within the tags.

It’s important to note that HTML is simply text - and it’s read from left to right just like we would read a book.

Text contain within HTML tags are not visible on the actual webpage that visitors view. The result of those tags will be visible however.

Let’s take a look:

These tags are <html>, <head>, and <body>

<HTML> <–opening tag
<HEAD> <–opening tag
This is where special information about
Your webpage will go, known as Meta Tags

</HEAD> <–closing tag
<BODY> <–opening tag

Your document text goes here

</BODY> <–closing tag
</HTML> <–closing tag

Note that each tag used has an opening tag < > and a closing tag </ >. This is very important to remember. Every tag you use must have a starting spot (opening tag) and and ending spot (closing tag).

As you can see above, the <html></html> tags are placed at the very beginning and very end of the document. The HTML tags tell web browsers that the entire page is HTML.

Your content is all placed between the <body></body> tags. The <head></head> tags will be discussed separately as this is where special notes are place, including your page title, page description, page keywords, and some other fun stuff.

For now, we’re going to concentrate on what goes in between the <body></body> tags. (For a in depth list of tags that can be used within the Body tags, visit HTML Tag Directory). For now, let’s play with some common font attributes:

<i>Italic</i>
<b>Bold</b>
<u>Underline</u>

Let’s look at an example. Copy & paste the following into your HTML Editor. Don’t worry about the lack of information in the <head></head> tags right now, we’ll fill that in later on.

<html>
<head>
</head>

<body>

This is where all of our content goes. From here I can <u>Underline text</u> or perhaps this isn’t dark enough for you, so we can <b>make the text darker by using the Bold tags</b> or if you’d like to see some fancier text, <i>we can use the Italic tags</i>.

</body>
</html>

When you preview this document in your HTML editor, you’ll see the following:

This is where all of our content goes. From here I can Underline text or perhaps this isn’t dark enough for you, so we can make the text darker by using the Bold tags or if you’d like to see some fancier text, we can use the Italic tags.

That’s it for the first part of this lesson. Congratulations! You’ve just written your very first HTML page

One important note when creating a website:  The first (or main) page of your website must be named ‘index’.  Browsers automatically recognize the index page as the first page to display when some enters your url (domain) into their web browser.

Finally, it’s HERE! Yes, Paul Smithson and the gang over at XSite Pro have finally released the much anticipated XSite Pro Version 2, and let me tell you, the new version really ROCKS! I think it’s safe to say now that I’ve been beta testing V2 for several months now, and the changes and improvements and features that I’ve seen added in, changed and revamped are amazing.

In fact, there are so many new features included that it will be hard to go through them all!

Have a look at the new Right Click Menu:

• Headings Design Wizard
• Sub-Headings Design Wizard
• Boxes and Frames Design Wizard
• Bullets Design Wizard
• Graphics Design Wizard
• Buttons Design Wizard
• Highlighted text
• Snippets
• Image Library
• AdSense Advertising
• Amazon Advertising
• Oxado Advertising
• PayPal Advertising
• Audio Wizard
• Video Wizard
• Widget Wizard
• RSS Feed Wizard
• XML Syndication Links
• Social Networking Links
• Forms Wizard
• Site Search Form Tool
• Page Breaks Tool
• Link Insertion Tools
• And more…

As you can see, there have been a ton of additions in just this one area alone. We’re not limited to including Google AdSense ads anymore… we can now automatically insert Amazon Ads, Oxado Ads, and even PayPal buttons with just a click of the mouse.

The RSS Feed wizard is very, very cool too. Import and display an RSS Feed on any page of your website, or include it in one of the template layout positions (sidebars, footer, main page footer etc), to have your feeds displayed on every page. The feed settings are also highly customizable too.

For all of us social networking fans, we can now also automatically insert links to our favorite social networking sites, and to push this one step further, we can even schedule content to be added to our sites at a specific time and date. This is a terrific feature for everyone who understands the importance of consistently adding in new content.

The Links Manager has been totally re-written and is now an extremely powerful addition to XSP. There are several options to choose from, including a basic links page (similar to V1), to a complex multi-page system complete with categories. Way Cool!

Quick Pages:

Create different types of page content for your site in a couple of minutes using these powerful design templates, including:

• Articles Pages
• Product pages
• Press Release Pages
• Contact Pages
• Privacy Policy Pages

Gone are the days of all the files being dumped into the root directory. With XSite Pro Version 2, we can now set up and create an optional folder system to store all of our images, media files, pdf’s etc.

One of my favorite features by far is the new and totally re-designed menu systems. Create a drop down menu across the top, a fly out menu in either sidebar, make them dynamic or static, add another menu in the footer area.. the options are really mind boggling. There are tons of menu templates included, and of course you can change all of the settings like color, width, font etc. with ease. No more messing around with CSS outside of XSite Pro - now it’s all handled efficiently within the software.

Oh, and did I mention the templates that are included? Gone are the traditional simple themes and wow, the new themes are terrific! Oh, and the Clipart and Image libraries? Oh man, I could go on and on and on… hehe.

Now for the nuts and bolts: You want to know how much right?

Here’s the scoop…

1. If you purchase the original XSite Pro any time between May 2007 and today, you get to upgrade to XSite Pro Version 2 absolutely, 100 % FREE!
2. If you purchased XSite Pro Version 1 prior to May 2007, you can upgrade to V2 for just $97.00 until the end of May 2008, and then the price goes up to $127.
3. If you want to jump onto the XSite Pro Bandwagon today (and if you’re not already an XSP fanatic, I guarantee you will be!), you can purchase it for $297.00.

According to surveys, here are top 12 reasons why visitors want to go back to your site:

• Easy navigation 74%

• Quick download time 65%

• Frequently updated information 58%

• Content quality 57%

• Content quantity 30%

• Content organization 40%

• Prompt customer service 40%

• Website search tools 25%

• Layout of homepage 20%

• Enjoyment 19%

• Website appearance 18%

• Inclusion of animated graphics 9%

Basing from these reasons, here are usability tips to help you design your website:

1. Become familiar with your visitors based on their preferences. You need a website with personality as well as content quality that accommodates your visitor’s taste; you should understand and recognize their color choices, technical skills, etc.

2. Create an obvious and simple interface. The more apparent and recognizable the web interface is, then your visitors never have to undergo frustration in guessing how your site really works, and instead on concentrating on the interface, they should be concentrating on your site’s content.

3. Website readability. Create “easy to read” paragraphs, not using small text or font size.

4. Quick loading. You need a fast downloadable page as visitors hate to wait.

5. Avoid hidden navigation, as your visitors need to know where and what to click in order to go someplace.

6. Get visitor feedbacks so you will know what is working and what does not. Learn from your prospects.

7. Investigate on website visitor performance. Determine how long it takes to perform a certain task. It should not take too long, the faster the better. If not, work on your user interaction to improve performance.

8. Provide a help section. If your website visitor does make a certain mistake, then they truly will appreciate it if you provide ways to assist them. Custom 404 error pages are great for directing “spiders” to crawl into your website.

Testing for usability

Testing for usability is not complicated and very inexpensive to carry out. The easiest answer is to design a simple sequence of undertakings for web users to carry out trials.

Invite people or friends to visit your website, then request they look around, watching and observing while they surf. Pay particular attention to areas where they may seem to get lost and have to use their browser’s back button etc. Do not wait when your website is done before you test it; test it now.  If it’s not possible to have someone close to you go through your site, ask some fellow online friends or associates to browse through it and then ask them to report back to you any difficulties they may have encountered.

The work can be simple like finding out a product’s information or finding out how a certain firm can be contacted or one can order a product and finding shipping policies information.

After testing, fix any problem and test it again. Continue testing and refining web usability of your website until such time that there are no problems found, that the experience is efficient and pleasant.

Remember that website usability is not just about the appearance of a site, but more importantly how your site performs and particularly, it gives emphasis on the experience of your visitors.