Key Elements All Websites Should Use

There are a lot of things to consider when you begin developing a website. First you need to plan out a rough draft of your website. Brainstorm ideas, write them down and draw it out. I always draw out my websites on paper before I begin. This way I can brainstorm and draw out what I want to do, what needs to go where, and what my website is based on..

Good Design

This all boils down to what kind of website you are going to have. If you are going to have something more professional for maybe news and media for example, you don’t want a crap load of funky images taking up all of your pages. You have to take the load time into consideration. When you have your page stuffed with graphics this can take for ever and will turn your visitors off. Try to substitute a lot of graphics, psd files and image sites with some css. Css does wonders when it comes to design and doesn’t take up a lot of time loading. When someone wants to read news, it can be overwhelming to find what they need when you page is flooded with too many graphics and links and such. Try to organize everything into categories and use images where needed. If you have a website lets say for a gears of war website, this is where your graphic design skills come into play. Make sure your website is always appealing to the human eye, if you need idea’s, look around for other websites similar to yours. Get some idea’s.

A clean simple design works perfect, if you need to touch it up more from there, then do so. Just don’t overstuff or over crowd your website with useless things. First impressions are the key.

Thoughtful User Interface

Along with good design comes a good user interface. The user interface is the foundation of any good functional web site. When designing a site, you’ll need to take into consideration your average user. Who is going to be visiting your web site — who is your ideal customer? Are they tech-savy? Are they computer illiterate?

It’s helpful to create an image of your ideal visitor and have them in mind when planning out the design for your site. Be sure you offer everything on your site that they would want to find before buying from you or becoming a subscriber.

You’ll want to be sure that your navigation is easy to spot and consistent throughout the entire web site. Make it obvious where the user should click both in terms of your primary navigation, as well as for links within your content areas.

Primary Navigation Above The Body

Part of having an easy to navigate web site is ensuring that the primary means of navigation — links to the key areas of your site — are kept above the fold. With today’s large computer monitors and growing screen resolutions “above the fold” is generally considered to be within the top 500-600 pixels of your site design.

Elements to include here are your logo (which should link back to your home page), as well as links to the main sections of your site. If you can link to sub-pages here that is great, but in most cases that will over-clutter your design.

For example put “Home | About | Services | FAQ | Contact” in a very easy to find location at the top of your site. You can place sub-links such as About-Bio / About-Resume somewhere else, such as in your sidebar or as sub-links under the main page title of that section, etc.

Consistency is key here — be sure to place both your primary and sub-navigational links in the same spot throughout the various pages of your web site.

Navigation in the Footer

For your navigation at the top of your page, it is always helpful to add it at the bottom of the page also. At the bottom of the page you can add more links then you would at the top for example, contact us, advertise, disclaimer, privacy policy, links to other websites and so on so forth.

These are things that are easy to find but what you don’t want to take up in the navigation at the top of your website.

Unique Content

If you have a website name that might catch the users attention, have the content to back it up. Meaningful content in other words. If I were to visit your site looking for information or just out of interest, I would like to see if your content was good and unique. So let’s say I am looking for information on SEO tips for instance, and you had something that no one else had, I would stick around and read it. Don’t copy off of others work or topics. Be creative, come up with a subject of your own that nobody else has. Try to get your readers to get into a discussion about it. Even reference some other articles in your topics that will get readers to check out. This will keep your readers and visitors coming back for more and sticking around.

A Good About Me Page

Among the top 10 most popular pages of a website, one of them is the About page.

It’s simply because people are curious. They want to know who is behind a company or a blog. I was personally quite shy about including a photo on my own bio page, but finally did it a few months ago. It’s amazing what the sense of curiosity does — I myself am always clicking on about pages too, trying to find out more about the designer or writer, etc.

Include information on your background and how it pertains to your own business and expertise, etc. The about page gives potential clients a little bit more information about you and can often help create a more personal bond. If they are reading your writing and know a bit more about you, they’ll have a better sense of connection and better be able to relate to you on another level.

Let people know that you are not just some company, that you listen, and you interact and connect with them.

Contact Information

Always have a page where visitors can contact you. Use more than one form of contact also. I use a forum, a contact form, I list my email and even all of my instant messenger screen names. I like to connect with my users and get to know them. Never act like you are too good or that your shit just don’t stink. You are human just like everyone else on this planet, show them that.

Search

You should always want to include a search on your page, especially if you have a bigger site. If people are looking for something, it is easier for them to just search for it than searching through links, pages and archives which could take a long time depending on the size of your website or blog.

What I also use is a search script in my control panel that show me what visitors are searching for. This way I can see If I need to add anything that I don’t have in which somebody was searching for. When I find this, I do something about it and make it available whether it is a download, tool, article or even tutorials on how to do something. When you add it make sure to make an announcement if you don’t have a recent posts feature going on. I use a featured script for this website and these articles get a lot of clicks and reads.

Signup/Subscribe

If your web site offers content on a consistent basis — such as with a blog — you’ll want to make it as easy as possible for people to sign up for updates.

Whether you have rss feeds, mailing lists, or even a forum, offer this so users know when ever you make an update to your website. This also keeps people coming back for more.

Sitemap

There are two kinds of sitemaps – one for humans and one for the search engines. An html (or php, etc.) sitemap meant for visitors to your site can be an invaluable tool for finding just what they are looking for.

Creating a sitemap – a structured list of all pages of a web site – is especially useful if you are unable to add a search feature to your site. A link to the sitemap is another item that is helpful to place down in the footer of your site, as well. A good sitemap will list out every page of your site in a hierarchial format – clearly showing the relationship of pages in terms of primary pages with sub-pages and sub-sub-pages, etc.

Separate Design from Content

Long gone are the days of using html tables for layout and design. The best developed sites use a combination of XHTML and CSS (Cascading Style Sheets), which create a separation of design vs content.

With use of <div> tags you can create containers for various areas of text and images on your page. Without a corresponding CSS file you’ll see just the basics – text – which is what the search engines want to see, too.

By linking to an external CSS file in order to separate your content from the design, it leaves your html page with mostly nothing but actual relevant text in your source code. The separate CSS file is what specifies the fonts, colors, background images, etc. for your site design.

What’s great about this is you can update just one CSS file and have the change made site-wide (no longer having to go into each and every html page of a static site, to change your main link color from blue to green, for example).

With this separation of content from design, the search engines no longer have to wade through all of the excess code to find out if your content is relevant, either. And with separate files, the content can load quicker, too – always a good thing in the mind of visitors to your site.

Cross Browser Compatibility

Say you just like firefox, well, a lot of your visitors may night and might use a different browser. Make sure to test out all of your pages in a few of the more popular and less popular browser before publishing it. Your website might look one way in firefox, but in internet explorer it will be out of place and ungodly.

Web Optimized Images

When designing for the web, it’s important that you save all your images in a compressed format. Not too much that your images become pixelated, but as much as possible while retaining quality.

If you’re accustomed to doing print work, you know that 300dpi is the standard. Not the case with web sites, though. When designing for the screen you’ll want to save your images at 72dpi which will make for a much smaller file size (aka quicker download time for your web visitors).

Statistics, Tracking and Analytics

This is pretty much in the background of your site but it is a must for a web site owner. There are many services that offer tracking of web site statistics which include information such as:

• How many hits does my site receive?
• How many of these are from unique visitors?
• How are people finding my web site?
• What search terms are they finding me under?
• What web sites link to me?
• What are the most popular pages on my site?
• Who is my average visitor (platform / browser / screen resolution)?

It is crazy what kind of information that you can keep track of with a analytics program. The most popular site for this is Google Analytics which offer awesome and free tracking.

This way you can monitor your websites states and performance. This can help you figure out a lot of different things you could change or add to your website even!

What Do You Find Most Important?

There are a lot more key elements than I listed in this article. So what do you find most important? What would you want to add to the list?

How to use links in HTML

How to create links to different pages in html?

How to use a image as link?

Link: <a> </a> <a href=” “></a>

Lets us consider you have two pages test.html and test1.html.
You want to give a link in test.html so that others can click on it and go to test1.html.
The tag used is “a” with attribute named “href”

Example Code:
<a href=”test1.html”> Click to test1.html </a>
Result:
Click to test1.html

So the tag should be used as above.
The text in between the tag will be displayed on the page.
On clicking the text the user will be taken to the page defined in the attribute href

---

Link using Images:

Even images can be used for creating links.
Its simple.
Give the image in between the “a” tags.

Example Code:
<a href=”test1.html”> <img src=”./test.jpg”> </a>
Result:

You can see. Its so simple.
In the previous case we gave the text as link.
Now we have given image as a linking code.

I want to create links that will open the pages in new window?

How can I link to website?

Opening link in new page:

Many a times we want to open the links in new window.
It’s simple.
Use the attribute “target=_blank” inside the tag “<a>”.

Example Code:
<a href=”test1.html” target=”_blank”> Click to test1.html </a>
Result:
Click to test1.html

Click on the link to test. It will open the page in new window.

---

How can I link to an external website?:

The tag is same as other, only thing is that we have to use “http://”.
So to link to google.com we have to use “http://www.google.com”.

Example Code:
<a href=”http://www.google.com”> Google </a>
Result:
Google

This will take you to the website.

I want to create links that can be used for mailing?

How to create a mailto link?

HTML Email:

Its simple.
In the href attribute we have to use the text “mailto”.
Format will be as “mailto:” then mailid.

Example Code:
<a href=”mailto:test@test.com“> Click to email </a>

Result:
Click to email

---

Creating a link that doesn’t go anywhere:

You can create a link that will not go to any page when you click on it

Example Code:
<a href=”#nowhere”> No Destination </a>

Result:
No Destination

Images

How to insert a image in html?

Tag to set image border html?

I want to set image in both left and right ends in the same line?:

Image Tag:
<img>

To insert a image in your a page we need to use the tag “img” with its attribute “src”
Example Code:
<img src=”test.jpg”>

Result:

Here we assume that we have the image file in the same directory of the html file.
We can also give the full path of the directory as
Example:
<img src=”C:\images\test.jpg”>

Width and Height:
We can resize images that are displayed in web pages using the attributes width and height.
Example Code:
<img src=”test.jpg” width=100 height=100>
Result:

Alignment:
We can align the image using the attribute “align”.
The attribute takes values left or right or center.
Example Code:
<img src=”test.jpg” align=left> <img src=”test.jpg” align=right>
Result:

Borders:
We can set border around images using the attribute “border”. This can be used to create a space around the picture.
Example Code:
<img src=”test.jpg” border=4>
Result:

Introduction to HTML

What is HTML?

HTML is a markup language for describing web pages.

• HTML stands for Hyper Text Markup Language
• HTML is not a programming language, it is a markup language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages

HTML Tags

HTML markup tags are usually called HTML tags

• HTML tags are keywords surrounded by angle brackets like <html>
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end tag
• Start and end tags are also called opening tags and closing tags.

HTML Documents are called Web Pages

• HTML documents describe web pages
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages

Here is an example of your basics to begin an HTML Page

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph</p>

</body>
</html>

Copy this into a notepad, rename the file to index.html and test it out in your favorite browser – Internet Explorer – FireFox

The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph