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.

Do you have more than one website or blog that you’d like to cross promote? Or perhaps one of your colleagues has an absolutely fantastic blog, and you would like to put some of their content on your own site. There is now a truly fantastic (and easy) way to do just that - actually, there are a few ways, depending on what your blog is made of.

Feevy -

Tags: feevy, simple pie, rss feeds, wordpress, blog

Today is Tipsy Tuesday (aka Tuesday Tips Day). I have to stop and remember that not everyone is experienced in HTML, and not everyone knows how to create links to other websites. So today we’re going to look at creating text links, as I’ve seen how-to requests on several lists lately.

Step 1 - Here’s a basic text link:

<A HREF="http://www.wahm-cafe.com">Click Here To Visit Wahm Cafe</a>

The above HTML code can be broken down as follows:

• A stands for Anchor, which begins every link.
• HREF is short for Hypertext Reference, which is what tells your browser what to open.
• http://www.wahm-cafe.com is the full internet url address. Note that the url begins with an = and is enclosed in ” “. Without these key ingredients, your link will not work.
• Click Here To Visit Wahm Cafe can be any text that relates to the link. In this case, I’m telling you to click there to be taken the the index (home) page of Wahm Cafe.
• Closes the link.

The finished HTML text link would appear like:

Click Here To Visit Wahm Cafe

Now, without clicking on the link, hover your pointer on the colored words. You’ll see the website address of the link you created come up along the bottom of the browser window, down where it usually reads “Done” (usually the bottom left corner of your browser window).

Step 2 - Adding ‘TITLE’ Text to your link:

Start off with your basic text link:

<A HREF="http://www.wahm-cafe.com">Click Here To Visit Wahm Cafe</a>

Now after the URL, we’re going to add in the following:

TITLE=”Resources For Work At Home Moms”

Putting it all together, your HTML link will look like this:

<A HREF="http://www.wahm-cafe.com" TITLE="Resources For Work At Home Moms">Click Here To Visit Wahm Cafe</a>

And here’s what your new text link with the TITLE tag will look like:

Click Here To Visit Wahm Cafe

Try the same thing that we did before, by hovering your mouse pointer over the colored text. You should still see the full website url appear in your browser, but the text that you used for your TITLE should also popup in a little box.

The only thing left that you may want to add to your text link, is to tell the browser where to open the URL. For example, you can have it open on the same page or in a new tab. Here’s how:

After your TITLE tag, you can add a TARGET tag:

TARGET=”_blank”
This target will cause the link to always be loaded in a new blank window. This window is not named.
TARGET=”_self”
This target causes the link to always load in the same window the anchor was clicked in. This is useful for overriding a globally assigned BASE target.
TARGET=”_parent”
This target makes the link load in the immediate FRAMESET parent of this document. This defaults to acting like “_self” if the document has no parent.
TARGET=”_top”
This target makes the link load in the full body of the window. This defaults to acting like “_self” if the document is already at the top. It is useful for breaking out of an arbitrarily deep FRAME nesting.

The most popular of the above TARGET attributes is _blank which causes the link to open a new window or tab.

Here’s how we add in the TARGET tag:

<A HREF="http://www.wahm-cafe.com" TITLE="Resources For Work At Home Moms" TARGET="_blank">Click Here To Visit Wahm Cafe</a>

**Note, it’s important to mention at this point that there is a great debate on whether or not you should have links opening in a new tab. As a Firefox user, I make use of my right click option to have links open in a new tab on a regular basis. Many people feel that it’s rather ’spammy’ to set all your links to open in a new window, and I tend to agree with them. It drives me rather nuts if I end up with 10 zillion windows open without my permission. This is especially true for internal links, or links that open a new page within the same website. For external links, or links that open new websites I will often use the _blank target attribute. If you`re interested in reading more about this debate, then I encourage you to take a look at Darren`s Pro Blogger discussion (and yes.. that link does open in a new window LOL).