Archive for the ‘Learn Web Design’ Category

Using Image Tag Border Attribute To Prevent The Blue Halo Effect

Tuesday, November 11th, 2008

Depending on how far along you are in your study and practice of HTML, you may or may not be ready to add images to your Web pages. This quick tip is being posted to answer one of our more common questions regarding image display.

A quick refresher for those who are not up to speed on the use of image tags: To add an image into your HTML document, you must reference the location of the image on your server (or elsewhere on the Web) using an image tag.

For example:

< IMG src=”/images/picture.gif” >

The above sample tag tells a browser to look in the images directory of the site being viewed, then find and display the graphic named picture.gif If you wanted the image to link to another Web page you would simply integrate the anchor tag into the process as follows:

< A href=”page.com” > < IMG src=”/images/picture.gif” > </A>

The very common problem new Webmasters encounter when adding hyperlinked images to their pages is a bright blue or purple “halo” effect around their images. You may have run into this yourself or seen it on other Web pages.

By default, when you add a link to an image display, the browser will interpret and display the linked image with the standard blue underscore for links, or purple underscore for visited links.

The way to correct this is to use the attribute border= within your IMG tag, and set border to ‘0′ :

< A href=”page.com” > < IMG border=0 src=”/images/picture.gif” > </A>

 This tells the browser to omit the border display. In the case of a linked image, the blue/purple halo will disappear.

It’s amazing how many sites I see with this glaring, unattractive hyperlinked border still in place. What this tells me is simple: Most new Webmasters aren’t using a comprehensive Web design guide to master the basics.

As you can see from this example, the common problems we all face in the beginning are easily corrected, if you know how to go about doing so.

Basic Web Design: What You Should Know Before You Start

Thursday, October 30th, 2008

Basic Web design is a critical skill to understand if you plan to run an efficient online business. You can hire a pro to do most of the work if you like, but understanding the basics yourself will allow you to have more control over your business.

Even if you plan to outsource the Web design process, you should be able to make small changes and handle emergency updates on your own. Being completely at the mercy of hired help is bad for business.

Whether you want to learn basic Web design so you can tackle the job yourself, or you’d just like to be able to handle minor adjustments without having to call your designer, this article will prepare you for your first lessons.

What Is A Website In Technical Terms?

Technically speaking, a Website is a system of interconnected files and data that work together under a specific set of rules. These essential parts combine to make the unified whole you see when you access a domain with your Web browser.

The files and data that join to make a Website are stored on a server, or host machine. This host is then synchronized with the selected domain name, so that when an Internet user types the domain into his or her address bar, he or she is able to connect remotely to the server machine and thus view the site through a Web browser.

Basic Web Design Building Blocks

So basic Web design is the process of formatting and arranging information that a Web browser can understand and translate for human viewing. In order to do this effectively you’ll need a fundamental understanding of HTML and CSS, which are the basic codes used for Web page construction.

Also, a prelim grasp of PHP and database technology is helpful. PHP is a dynamic script, or programming language and databases store additional information that allows a site to function in one or more specific ways.

Building the code for your Web pages is a lot like creating and saving any other document, such as word processing files and spreadsheets. You can use a plain text editor, or purchase an HTML editor for this process.

Both HTML and CSS are alphanumeric code languages. Each language is built on a predefined set of commands that are called tags.

To build a complete Web page using HTML and/or CSS, you simply arrange the desired commands in order within the document and save as .HTML. Some basic Web design techniques allow you to build a complete page within a single file, and other approaches require two or more separate files working together to create one functional Web page.

Many people are intimidated by the thought of learning the code required for basic Web design. At first glance it can seem like an extremely technical process.

But the truth is, learning HTML and/or CSS is not as difficult as learning the English language. If you are reading this article it’s safe to assume you’ve mastered the alphabet, basic vowel sounds, and common sentence structure, all of which are considerably harder to learn than basic Web design.

Your first step in mastering Web design code is to learn what the various tags mean. Once you have a basic understanding of this you’ll need to practice organizing these tags within a document to create the desired look and format.

Again, this process is a lot like learning to write. You simply add lines of code to your page until you have the arrangement you want, and then you save the document.

Website Management Basics

Once you are able to work fluidly with the basic Web design code languages to create exactly the kind of Web pages you want, you’ll need to learn how to move your finished pages to the Web server. This process is called FTP, which stands for File Transfer Protocol.

You’ll use a software device called an FTP client to establish a connection from your desktop to the host machine. These tools are fairly easy to use, and allow you to move files from your hard drive to the Web server within a matter of seconds.

Of course you can also move files from the host machine to your computer. This is useful when you need to backup copies of a Website, or when you need to pull a page down for quick editing.

To be an effective Website manager you also need to familiarize yourself with the hosting control panel your Web host provides. You should seek out a host that offers Cpanel technology, as this interface is the most flexible and comprehensive control panel software available.

A great deal of information has been referenced in this article. But don’t be intimidated.

Once you get in a little hands-on practice time you’ll find none of these Web design basics are difficult to learn. In fact most people who are proficient Internet users can expect to become proficient at basic Web design within 30 days.

At this point you should be ready to dive right into your first real lesson on Web design. Remember, it’s not as hard as it looks, and if you have the brainpower to read this article you are most certainly equipped to become an ace Webmaster.

Quickly and easily learn Web design with the author’s amazing online course. You’ll be an ace Webmaster in no time with this full-blown Web design course at your disposal.

CSS Buttons Instead of Image Files

Thursday, October 9th, 2008

Often a Website owner decides to “dress up” their menu display by using button graphics instead of plain text links. It’s a great idea to give your navigation more punch, but I recommend you avoid going with image files for your buttons and instead choose a simple CSS (Cascading Style Sheets) layout.

Here are my reasons:

Graphic files can increase the time it takes your site to load into a browser.

Search engines cannot read images.

CSS, when used properly, will give you far more control without the need for java script.

Using a little bit of CSS, you can create a very nice menu array that your visitors will think are dynamic image files. When you hover over any part of this kind of CSS menu you can even watch the buttons change color and seem to depress into the page.

Pretty cool huh?

CSS menus require no heavy java script code that could slow your load time. You simply add a short section to your external style sheet to tell a browser how to display the buttons in terms of size, colors, font style, etc. and then reference these specs in the HTML document where the menus reside.

In simplest terms this is a two-step process that takes all of ten minutes to complete.

And search engine spiders will read the anchor links placed in this sort of menu as direct text linkage. What’s more, you can apply the title= attribute to further enhance your onsite SEO.

Here is the code you’ll need to add to your external CSS to fly this sort of menu:

.buttonscontainer {width: 120px;}

.buttons a {color: #;<BR>
border: 1px solid;<BR>
background-color: #;<BR>
padding: 0px;<BR>
padding-left: 0px;<BR>
font: 12px Arial, sans-serif;<BR>
font-weight: bold;<BR>
text-decoration: none;<BR>
border-color: # # # #;<BR>
display: block;<BR>
margin: 3px;<BR>
width: 100%;<BR>
text-align: center;}

.buttons a:hover {border: 1px solid;<BR>
padding-left: 0px;<BR>
padding-top: 0px;<BR>
padding-bottom: 0px;<BR>
padding-right: 0px;<BR>
background-color: #;<BR>
border-color: # # # #;<BR>
color: #;<BR>
text-decoration: none;}

Click Here to see what the above menu codes look like in a browser.

Of course you’ll need to edit the color specs above, in addition to changing any borders, margins, etc. as you see fit.

Open your HTML pages and, exactly where you need to define your slick new menu buttons, open two divs with class=”buttonscontainer” and class=”buttons”, add your button text and anchor, and close both divs.

Play around with this coding in your own design scheme. The sample menus I showed you are really only the beginning of what you can do with this foundation.

For more great tips be sure to check out our complete Web Design Course.