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.

Congratulations goes out to Lindsey from Art For Hair as the winner of our July eBook Cover contest winner!

I’ll be contacting Lindsey today about her new ebook cover design and will post the cover here as soon as it’s finished

Thanks to all our participants!

Greetings Friends! It’s been several weeks since my last post. My time off has ranged from extreme pain to downright fun. Here’s the quick scoop on what happened:

On July 23rd (Wed), I finally started the work on my teeth. I made the trip into the city where my dentist made molds of my teeth. Unfortunately though, I think when he pulled the top mold down that he loosened off one of my teeth, and that set off an infection that knocked me off my feet for a week. By Thursday the left side of my face was so swollen it wasn’t funny. And talk about pain.. oh my. I phoned my dentist and they phoned in a prescription for painkillers to my local pharmacy right away but still, the pain was unreal.

Thankfully I had another appointment on Friday, and though we were supposed to be doing some other work, instead I ended up having 3 extractions done. My hubby had driven me into the city which I’m very thankful for as there was no way I could have driven back home again considering the pain I was still in. By Saturday morning my face was so swollen even my left eye had started to swell shut. Over the next few days the swelling went down, and the pain diminished but it wasn’t until about the following Wednesday that I started feeling like myself again.

On Monday, Aug. 4th, we packed up the family and one of my daughters friends and went camping for a few days. It was so nice to get away. We only went an hour north, but we were right on Lake Huron at a place called Ipperwash Beach. The campground we stayed at was Our Ponderosa which had tons of stuff for the kids to do including a salt water pool with a 78′ waterslide. The water slide was great because it was big enough for the big kids to have some fun on, yet small enough that toddlers could go down with life jackets or water wings on. There was also horseshoe pits, playgrounds and a splash pad too.

I haven’t even unpacked my camera yet, which I’ll do shortly and then post some pictures

For the moment at least I’m happy and healthy and not so tired after a good nights sleep in my own bed lol. Next week I’ll be around and then we’re hoping to sneak in another 3 day camping trip the following week.

I hope everyone else is having a great August so far