CSS for Beginners

HTML No Comments

If you’re new to HTML, you may or may not have heard of CSS. In short, Cascading Style Sheets (or CSS) is a web technology that can not only simply your site, but also reduce the size of your web pages.

Most people starting out, build each web page separately. Text color, fonts and sizes are all edit on individual pages. Each time you set an attribute, HTML code is generated (unless you manually create it). While this is fine, there are two inherent problems with this method.

The first problem is that if you decide to change your text on one page (make it bigger for example), you would have to make the same change on every page in your site to maintain consistency. This is time consuming. And if you have a large web site, it’s not uncommon to miss a change - creating inconsistencies in your site (and making it looks less professional).

Another problem is that every element on a web page, has HTML code behind it. The more HTML on a page, the bigger your file size - and the more stuff search engine spiders have to wade through to read your valuable content.

With CSS, you can configure basic text elements on your web pages (size, color, font, etc.). You can specify what size and color your different headlines should be. If you later decide you want your headlines bigger, you can change one line in a CSS file as opposed to having to change every single page on your site.

You can also configure other common elements on your web pages - such as the color of your navigation menu. Again, if you decide to change it later, you only have to change one file as opposed to every page on your site.

As you can see, there are a lot of advantages to using CSS. But like anything else, it takes a bit of time to learn how to use it. Like many folks, I learned how to create and edit CSS from a book. And my favorite book on the subject is called, Beginning CSS Web Development: From Novice to Professional

This book is extremely easy to understand and follow and is one of the best books in my library. I highly recommend it for everybody wanting to learn CSS!

How to Make Web Pages Open in a New Window

HTML No Comments

When building web pages, there’s a few unwritten rules you should follow.   Some of the deal with linking to other pages.

When you’re linking to  pages within your web site, you generally want them to open in the same window.  This usually makes it easier for folks to navigate your site.   It also means there’s less chance that one of your pages may be blocked by a pop-up blocker!

However, linking to pages on other web sites, it’s a good idea to have the page open in a new window.  The main reason for this is that it keeps your site open - so that when a person closes the new window, your site will still be visible (which gives you a better chance of keeping people on your web site).

While some web authoring programs make it easy to configure this setting, others don’t - and there are times you need to know how to manually configure web pages to open in a new window (like when you’re working in Blogger).

Here’s how you do it.

After creating your hyperlink, take a look at the HTML code.  Here’s an example:

<a href=”http://www.arizonafishingholes.com/gila-trout.php”>

 

To make this link open in a new page, all I have to do is add target=”blank” to the end of the link.  So the new link will look like this:

<a href=”http://www.arizonafishingholes.com/gila-trout.php” target=”blank”>

Notice that there is a space between .php” and target.  It’s also important to include the quotes around “blank”.

I mentioned blogger earlier.  When you create links in blogger, they are configured to open in the same window by default.  This means that when linking to pages on other sites, you’ll  have to edit the HTML so your links will open in a new window.

But now you know how to do it!

 

 

Adding the Date and Time to your Web Pages

HTML No Comments

date time scriptHave you noticed how all internet marketing sites display the current day and time near the top?

One of the reasons for doing this is that it shows the reader the information is current (and not some old abandoned web page that is still online).

It’s easy to add this bit of information to your web site.  All you need to do is copy and paste a bit of javascript into your HTML where you’d like the date and time to appear.  After you paste the code into your web page and upload it to your server, the date and time will automatically update each day.

Feel free to copy and past the script below into your web pages (there’s no need to change it).

—————————

<script><!–

var mydate=new Date()

var year=mydate.getYear()

if (year < 1000)

year+=1900

var day=mydate.getDay()

var month=mydate.getMonth()

var daym=mydate.getDate()

var dayarray=new Array(”Sunday”,”Monday”,”Tuesday”,”Wednesday”,”Thursday”,”Friday”,”Saturday”)

var montharray=new Array(”January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”,”September”,”October”,”November”,”December”)

document.write(”"+dayarray[day]+”, “+montharray[month]+” “+daym+”, “+year+”")

// –></script>

——————–

There’s no need to change any of the code above.  Just make sure your start copying  before <script> and end after </script>.

On most internet marketing web sites, this script is added between the <BODY> and </BODY> tags.   Click here for an example.

Learning HTML

HTML No Comments

One of the problems that a lot of new internet marketers face is the daunting task of learning HTML so they can build their web pages. Many fear that it’s too difficult for them.

If this sounds like you, then let me put those fears to rest. Learning HTML is not as hard as it sounds. Let me also assure you that you’re not alone. Every single person who has ever built a
web page has felt technically challenged when building web pages for the first time.

But, the trick is to get over that fear and just start doing. The majority of us have learned as we went along. We had the idea that we wanted to build a web page and just started doing it.

I built my first web site in the days when before Front Page and other software packages existed. So I learned to manually type each line of HTML in order to create my web page. But you no longer have to do this! Thanks to great WYSIWYG (or, “What You See is What You Get”) software programs, you can easily create a simple web site without needing to know much HTML!

If this is all new to you, I recommend downloading free web design software and just start playing with it. KompoZer is a great program for this. It’s a free WYSIWYG web authoring program.

While you don’t to know as much HTML to create web pages using these kinds of programs, learning some HTML is still a good idea - because it will give you a lot more control over your pages.

Here are some links to sites that offer free online HTML lessons.

W3 Schools
http://www.w3schools.com/html/default.asp

HTML Net (HTML and CSS lessons)

http://www.html.net/

Dave’s Interactive HTML lessons
http://www.davesite.com/webstation/html/

The sites above can help you learn HTML - and the best way to learn HTML is to learn as you go. In other words after downloading the KompoZer software and installing it on your computer, create a new blank page and just start creating text and then learn to “bold” it and make other changes to it. Learn to hyperlink the text to a web site.

The cool thing is that as you practice, you can preview your web pages (which is a way of seeing in advance how your web pages will look online.).

Learning HTML by doing is the best and quickest way to learn how to build web pages. It’s not as hard as it looks - so don’t put it off. Just do it!

What is CAPTCHA?

HTML No Comments

CAPTCHA is short for “Completely Automated Turing Test To Tell Computers and Humans Apart”. The goal behind CAPTCHA is to prevent automated spamming.

No doubt you’ve been to web sites that make you decipher the warped letters in those little boxes before you can complete your request - that’s CAPTCHA!

Over the years, CAPTCHA has been improved upon and you may sometimes hear people refer to “reCAPTCHA” (which is the new and improved version). Unless you like to understand the technical stuff, there’s no need to worry about differences. Everybody is using the new and improved version (reCAPTCHA) today on their web sites.

CAPTCHA can be used to help …

  • Prevent Comment Spam in Blogs
    Blogs using Black Hat tricks use automated computer programs to comment on other people’s blogs in order to get a link back to their site. CAPTCHA can help prevent this from happening by ensuring humans (not computers) are commenting on blogs.
  • Prevent Fraudulent Email Registrations
    Another black hat trick is to sign up for a bunch of free email accounts with free services like Yahoo and MSN and then use those free accounts to spam people. CAPTCHA can help prevent this from happening by ensuring humans (not computers) are completing registration forms.
  • Prevent Scraping of Email Addresses
    Ever wonder how spammers got hold your email address and started using it to send spam? Known as “spam harvesting”, spammer programs crawl the Web in search of email addresses posted in clear text. CAPTCHAs provide an effective mechanism to hide your email address from Web scrapers. The idea is to require users to solve a CAPTCHA before showing your email address. A free and secure implementation that uses CAPTCHAs to obfuscate an email address can be found at reCAPTCHA MailHide.
  • Prevent Stuffing the Ballot for Online Polls
    Why place nice when you can cheat, is the model of many. And folks have found a way to “stuff the ballot box” (so to speak) for online polls. CAPTCHA can help prevent this by ensuring that only humans (not computers) are voting.
  • Prevent Dictionary Attacks
    You’ve no doubt heard before that you’re not supposed to use words found in the dictionary in your passwords. That’s because aautomated password crackers check for words in the dictionary. Many computer systems will lock you out of your account after specified number of unsuccessful login attempts. We all make mistakes sometimes (for example not recognizing the caps-lock key is on) … and getting locked out our account is no fun. One way of working around this problem is to use CAPTCHA. The idea is simple. If you”re having trouble logging into your account, you’d be required to solve the CAPTCHA puzzle (rather than get locked out).
  • Prevent Search Engine Bots from Reading Non-Indexed Web Pages
    It’s sometimes desirable to keep web pages from being indexed to prevent others from finding them easily. There is an HTML tag to prevent search engine bots from reading web pages - but it doesn’t guarantee that bots won’t read the page (it only serves to say “no bots, please”). The only way to guarantee that bots won’t enter a web site is to use CAPTCHA.

As you can see, there are lot of good reasons to use CAPTCHA on your web sites! And it’s easy to do.

To use CAPTCHA, you must first sign up for an account (it’s free). Next , you’ll want to get a reCAPTCHA API key (also free). You’ll need this key for CAPTCHA to work correctly. Be sure to save this key in file for future use.

By the way, if you use WordPress, you’ll also want to download the free CAPTCHA plugin and install it on your blog. After you upload and activate it, you’ll be asked for your reCAPTCHA API key.

Building Sitemaps - and the Tools to Do It!

HTML No Comments

Sitemaps serve a couple of different functions and are a great component to have on your web site.

There are two different types of sitemaps - visible and invisible.

A visible sitemap is intended to help your web visitors. This kind of site map is a single web page that contains an organized listing to the different pages on your web site. The purpose is to make it easier for your visitors to find exactly what they need quickly.

Since visible sitemaps are web pages, somebody needs to actually create a web page containing the links and then upload it to the server. Microsoft has a good example of a visible sitemap on their site.

Invisible sitemaps are intended to help the search engines crawl and index your web site. These are not visible to your visitors.

These kind of sitemaps are usually a one-page XML document which contain a listing of all your web page URLs. This file is uploaded to your web server’s root folder.

They can be created by manually by hand or you can use an online sitemap generator to do it for you.

Even if you use an online sitemap generator, it’s a good idea to go back and manually edit the file as you add more pages to your web site and make changes (be sure to upload the updated file to your server).

Having this information in one file makes it a lot easier for search engines to crawl your site and to know which pages belong on your site (especially if you have broken links). So it’s a good idea to create one.

You can search Google for “Sitemap generator” to find a bunch of different ones available. One of the easiest ones to use is XML-Sitemaps.com (which is free to use if you have less than 500 pages).

Web Design Software With Trial Downloads

HTML No Comments

The easiest web design software with trial downloads are listed below. Keep in mind that the word “easy” means something slightly different for everybody.

Most professionals would agree that Dreamweaver is the best web design software available. And while those skilled in HTML will find it easy to use, newbie’s won’t.

Dreamweaver is favored among pro web designers because it is so powerful and flexible. It can handle all the major web technology (PHP, CSS, flash, java, XHTML, etc.). Dreamweaver can handle all aspects of web design. But it’s not cheap! It normally sells for around $400.

One of the easiest web design software programs to use is called, XSitePro. This program was designed for internet marketers and especially for those new to HTML. You don’t have to know anything about HTML to use XSitePro.

The really cool thing about this software package is all the built in internet marketing features - like the easy incorporation of Adsense. Another cool feature is the built in PHP-like features - like the ability to make site-wide changes to layout quickly and easily.

While XSitePro does not offer a free trial download, you can get a good idea of how it looks and feels by watching the video 7-reasons video.

Another web design software program you should be aware of is called NVU. It’s free and it can be installed on PC’s or MAC’s. It’s open source software, so getting help is pretty much limited to a forum of users. But when money is tight, this is software you should seriously consider looking at.

While there are other web design software programs out there, I would recommend sticking to one of these three. This is because you’re likely to find the most help for these programs and they are good programs for internet marketing.

Automatic Redirects to Another Page

HTML No Comments

As much as I love flash and cool technology, I’ve had to retrain myself to stay away from using flash on business web sites for SEO reason. But despite the SEO disadvantages of using Flash, some folks still insist on using it.

After you’ve created your flash intro and added it to your web page, it’ a good idea to set up an automatic redirect - so that when the flash intro is done playing, visitors will automatically be directed to your home page. This can be done easily with Java Script.

Here’s how you do it …..

The first step after creating your flash intro, is to create a web page for it. Be sure to uncheck any “loop” boxes you may see (you don’t want your flash intro to loop).

Next, you need to edit your HTML source code. You’ll want to insert the following text between your <HEAD> and </HEAD> tags.

<script language=”JavaScript”>
<!–Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development
var time = null
function move() {
window.location = ‘http://www.example.com’
}
//–>
</script>

Be sure to change the URL (shown in bold) to the page you want folks to be redirected to.

Next, insert this bit of code before the </BODY> tag.

<body onload=”timer=setTimeout(’move()’,27000)”>

You’ll want to change the number (shown in bold above) to whatever number of seconds you want (it must be seconds, not minutes). When changing this number, remember that 1000 is equal to 1 second.

So in the example code above, visitors will be automatically redirected to the page I specified in the earlier code after 27 seconds.

That’s all there is to it.

8 Ways to Improve Your Home Page Design

HTML No Comments

There are so many things you need to consider when designing home page (especially when it’s a long sales letter), that it can be hard sometimes to keep it all straight.

MarketingSherpa is a research firm specializing in tracking what works in all aspects of marketing (and what does not.)

They’ve recently written an article highlighting key elements that will help you make sure you design (or re-design) an effective home page that will not only look nice, but be more functional for your visitors - which in turn will result in higher conversions.

Click here to read the article,  8-Point Checklist & Useful Hotlinks — How to Improve Your Homepage Performance Significantly.

How to Create a Favorite’s Icon

HTML No Comments

Have you ever noticed that some web sites have a cute graphic next their address. When you save that web page to your favorites (or bookmark it), you’ll see the graphic in your list of favorites.

favorites icon

This graphic is called a “favorites icon” and it’s really easy to make (if you use Adobe Photoshop). But other graphics programs can use this technique too. It just requires installing a free plugin from Telegraphics.com.

I recommend downloading the free plugin from Telegraphics.com before starting.

Step 1 - Create the Graphic

Create a new blank image that is 16×16 pixels. Next create an image in this space. It can’t be too complicated because it’s such a small space to work in.And it’s best to stick with one or two colors max.

Step 2 - Save the newly created image in ICO format
(the free plugin lets you do this).

In most cases, you just have to click FILE on the menu and then SAVE AS - give the file a name and save it as a .ICO image.

Once the image is saved (and you’re happy with it), you have to upload it to your server (preferably in the root folder (same place you’ve saved your index.html page).

Next you have to edit your web pages so they display the favorite’s icon. You must be able to edit the HTML source code to do this.

Open your home page and view the HTML source code. You’ll want to insert the lines below before the </HEAD> tag.

<LINK REL=”SHORTCUT ICON” href=”http://www.yourweb.com/favicon.ico” type=”image/x-icon” />

 

LINK REL=”ICON” href=”http://www.yourweb.com/favicon.ico” type=”image/x-icon” />

Be sure to replace “yourweb.com” with your actual web page URL and “favicon” with the name of your image.

You’ll have to copy and paste these two lines of HTML into every web page you would like the icon to show up on.

But it’s worth it. Having a unique favorites icon helps make your web site stand out from the crowd - which makes it a lot easier for your loyal visitors to quickly identify your web page in their list of favorites.

For more information, on creating a favorite’s icon, visit: http://www.wilsonweb.com/design/favicon-shortcut-icon.htm

« Previous Entries