Best html Tutorials

A website is an extremely  valuable tool that bolsters your existing marketing, sales, recruitment and  communications effort. So here are a few compelling reasons to put your  business on the Internet.

 
• The Internet functions 24 hours a day, seven days a week and has the most inexpensive and widespread marketing   capabilities.
 
• The Internet is an excellent way to market your business and sell your products and services as it has a broad audience base.
 
• More and more customers are logging on, making purchases, buying services and researching choices and information through the Internet.
 
• A good website will help you reach and retain customers; you can use it to interact with your customers send information to customers, reply to emails day and night.
 
• You can reply to your customers or potential customers automatically without you having to get involved at all with "autoresponders"

 
• It can be used simply to let potential customers know you are there instead to just sell, particularly those that rely on a local customer base this can be an invaluable source of additional customer enquiries.
 
• If your business needs to produce brochures or any kind of sales literature it is cheaper to have the customer download it to his machine and print it then you to produce a brochure which you then send
 
• You can use it to attract customers from outside you local area, you can take your products to totally new markets.
 
• Customers expect to see you on the Internet; if you cannot meet this expectation then they will go to someone else
 
• Many people prefer to search for a company on the Internet rather than search their local Yellow Pages or newspaper.  
 
• They are an effective and efficient way to communicate with potential customers, employees and suppliers.
 
• They can be easily updated, keeping your product listings and prices always accurate, everyone can see updated information without having to wait.
 
• Web sites offer an ideal way of showcasing your previous work and accomplishments to potential customers and you can build reputation, credibility and trust with potential customers. 
 
• No matter what your size, a website offers your business the same advantage as your biggest competitors so with a well designed website of even a one man operation can have the same presence as a multi-national corporation.
 
• It gives people the impression that you are savvy and smart enough to take your business to the next level.
 
• An interactive online catalogue makes your company's products accessible everywhere in the world, 24 hours a day, and 365 days a year.
 
• Selling online is a cost-effective way to sell as it comes without the customary overhead of a physical store, like building leases, employees
 
• You can put an  enormous amount of information onto your web site for only a little money; you  can have pages and pages of information about your company, products or  services 
 
• Your web site can help with improved customer service by providing information visitors can access, there  can be a list of 'frequently asked questions' about your service or product.
 
• You can test  out new services or products instantly and less  expensively, simply put up a new web page setting out the relevant information,  and sends an e-mail to your database of existing customers, and ask for their  views.
 
• You can combine  email marketing with your web site and save hundreds on advertisements.

Your business small or big,  local or international, if is not  online or your existing site is unprofessional  or ineffective, then you are losing business opportunities for  sure.

You have one chance to make a first impression. Potential customers will form an opinion of a business within seconds. A company's logo is therefore extremely influential, as it is almost always the first thing a customer will see. In addition, once a customer becomes familiar with a business, the company's logo will always be associated with that company name, and in turn, the company name will be associated with the logo. For these reasons, a considerable amount of thought should go into choosing a logo.

A logo should be simple, recognizable, and effective at conveying the desired message to the public. Each aspect of a logo's design should be carefully analyzed to ensure that it does in fact communicate the right message. The logo's colors, style, size, shape, font (if it is a logotype), and overall design each play a part in the logo's overall design, and are all important components to consider when creating an effective logo.
Color is immensely important, as color has a dramatic effect on an individual's reaction to almost anything. Restaurants not only carefully choose the colors of their logos, but also carefully select the colors of the restaurant interior. In their case, color affects how appetizing a potential customer views their restaurant, and in turn can have a dramatic affect on the amount of business they receive. The colors of the logo or restaurant can be the reason a hungry customer chooses one establishment over another. Financial businesses and banks tend to choose strong conservative colors such as darker blues and reds, to convey stability, trust and success. In some cases, a particular color itself often becomes associated with a business. As the background for their logo, UPS has used the color brown, which is now generally associated with their company. Since the color brown communicates stability, they have been able to use the association as a way of conveying a message of reliability to their customers.
In addition to color, the general style of a logo will determine the overall feeling conveyed to the public. The logo's style will determine whether people will view the business as conservative or trendy, casual or formal, expensive or low-priced, friendly or exclusive, etc. If a logo includes the actual company name, the font type used in the logo is part of its style as well, and will therefore also come into play by affecting an individual's overall response to the logo.
Size is also important to consider. A logo will be used in large-scale settings such as advertisements, store-fronts and billboards, but will also be used for small-scale needs like email communication, websites, business cards and corporate stationery. A logo should be designed so that it will be effective and recognizable regardless its size.
Overall, a good logo is a vital part of a successful business, and much more influential than many people realize. Since individuals are often unaware of the effect logos have on their own decisions, they may also be unaware of the influence a well designed logo will have on their own business. By taking time to evaluate the different aspects of a logo, business owners can ensure that their company logo will have a much greater impact.

Online marketers understand the importance of getting top search engine rankings in major search engines. Therefore, they spend many time in optimizing website content, seeking inbound links, and optimizing title and Meta Tags. However, many of them ignore the fact that web design structure has a role in search engine optimization (SEO). Sometimes, you cannot just rely on web designers because they could be good at web design but not good at SEO.
This article reveals several important web design elements you must consider:
1. CSS Stylesheet
It is good to use CSS stylesheet to format your web design because it can standardize the appearance of your website. For the sake of convenience, some web designers use internal CSS. It is no good! You should use external CSS stylesheet so that your HTML coding becomes consise. It is an essential SEO practice.
2. Content Management Software (CMS)
If you use CMS to manage your website, make sure your CMS provides these features:
a. Allows you to define different templates for different sections/pages. It gives you flexibility in optimizing website content.
b. Allows you to define Title and Meta tags for different web pages. Again, it gives you flexibility in optimizing every web page.
c. Allows you to generate static HTML pages instead of dynamic pages. Search engines are not good at reading dynamic web page. Accoding to Google webmaster guideline, Google may not index dynamic URL with more than 2 parameters within the URL.
If your web pages cannot get indexed, you definitely get no rankings no matter how many SEO effort you make.
3. HTML Code Compliance
As a good web design practice, make sure your HTML coding is compliant to some well recognized HTML standards such as W3C standard. Some search engine optimizers reported that non-compliant web design could cause difficulties for search engines
to index and analyze your website. It hinders your website to get top search engine ranking.
4. Use of Graphics
You must optimize the file size of your images. As search engines like to read text, you should consider avoiding the use of graphics near top of your website, whenever it is possible.
5. Multiple-level Navigation Menu
Many websites use multiple-level navigation menu in Javascript. However, the coding usually leaves in the HTML body. This is no good in terms of SEO. I recommend seperate Javascrpt from HTML coding by using external Javascript file.
6. Bad Web Design
To make your web design search engine friendly, you must consider avoiding:
a. Use of frame. Search engines have difficulties to index all your frameset. Even though they can index some frame pages, users would only access to part of your webpages only in case they can find your website from search engines, e.g., only see a left-hand side navigation menu with a blank page on the right-hand side.
b. Re-direct techniques. For some reasons, web designers may make some re-direct pages or adopt Javascript re-direct techniques and re-direct visitors from one page to another content pages. Since search engine spammers usually use this technique, search engines could penalize your website.
7. Flash
Web designers may sell you to build a flash website or make a flash intro page as your home page. Their point is that flash makes your website more appealing and it would improve effectiveness of your website. However, it is not always the case.
Visitors want to find information fast. Flash sometimes could make your website slow and require visitors to install plugins before they can see your website. In terms of SEO, simply speaking, search engines treat flash as a graphic and cannot analyze content inside a flash file. The implication means a flash website is hard to get top search engine ranking.
Conclusion:
For small business to succeed online, you must strike a balance between SEO and fancy web design. A too fancy web design, in many cases, cannot give you any business as no one can find your website from search engines and if it annoys your visitors.

A website is created by a language code called HTML. It has two main parts - a head and a body.
The head consists of the webpage title, meta tags (which are used so that search engines
can find your site), and other things that are hidden to the visitors of the site because
they don't really need to know them.

The body is the main part of a website. This is the part where the webmaster codes what he or
she wants the visitor to see.

A sample head might look something like this:



My website



A sample body looks like this:


This website is about ....



Notice that the codes have "". The word inside the symbols "" tells the browser
what you want for them to do. These are called tags. So My website means that you are
telling the browser that you want the title of your website to be "My website".

Another thing you should notice is that the beginning tag (such as ) does not contain a
slash "/" while the ending tag does.

One thing to remember is that you must put html tags at your code. Now if you combine the html
tags, the head part, and the body part, you'll get this code:



My website




This website is about ....



Note about spaces:
It does not matter if there are spaces between tags. For example, in the code above, there
are spaces between "" and "

We are consistently working towards improving the look of our web pages so that they look attractive and pleasant so that more and more surfers could stay on our pages. The improvements goes on and on and we are in constant search for new techniques to make the web pages more appealing. But lets not forget one important aspect of the web page layouts and that is the use of fonts. It is a common understanding that the use of fancy or artistic fonts improves the look of the site as well as gets more public attention. So far this has proven to be a myth and use of such fonts have only worked in reverse. So what are the best methods to use the fonts in html pages. In this article we will discuss the html fonts and provide you with some essential tips on this

Tip#1
Most people go to the WebPages to access and read the information. This goal must be satisfied by the correct use of fonts. In cases where the information is crucial for the web pages user then the web page should be designed using the most readable font like Verdana or Arial with the correct font size and color.

Tip#2
Fonts are made up of many properties but considering a web page the most important of these are size, type and color. Choosing these properties wisely adds value to your website.

Tip#3
The best font is the one which is easy to read. It is always better to use on your web pages fonts like Arial or Times New Roman as they are very clear and easy to read. Compared to these fonts, the fancy fonts like the calligraphic ones are very difficult to read distracting the user from the page.

Tip#4
It is not at all forbidden to use the fancy fonts. It is necessary to use such fonts if your website demands or deals into such categories. For ex. If you have a website dealing into flowers then definitely you would like to use some artistic fonts on it. But in such cases it is better to use the special fonts on the logo or title and not on the information. In such a way you can make the design good and the information readable.

Tip#5
The second important issue is about the size of the fonts. Not everyone who is visiting the page has got a correct vision. It is therefore recommended not to use very small fonts and ideally the font size between 12-14 points is readable and should be used for the content. A bit bigger font size can be used for the titles. Also make sure that you are not using too big fonts which make your user scroll too much which also distracts tem from the page.

Tip#6
The last but not the list factor is about the font color. Do use gentle colors ad use as much as black fonts as you can. The black fonts are easily readable and do not affect the color blinds as well. The last thing you want to do is put a light colored font on a light colored background, like pink on yellow.

Using such tips you are sure to benefit your users and make them stay on the page for a longer time.

Meta Tags are HTML tags which provide information to the search engines, describing the content of the webpages a user is likely to view. Search engines have recognized that website owners and administrators can use this resource to control their positioning and descriptions in search engine results. The three types of Meta tags are:

• Title- The text that appears on the title bar of the web browser
• Description- The quick summary of what the page is all about
• Keywords- The important words on the page

Meta tags add information to the HTTP header of the page as well as contain hidden information of the coding that the Search engines are likely to pick upon.

Meta tags are of great significance as they boost the overall performance of the webpage. Meta tags are useful in enhancing the placement of your webpage in various Search engines such as Yahoo, Google, and MSN thereby increasing the traffic to your site. Webmasters need to stiff a number of keywords in their Meta tags in order to improve the search engine rankings of their webpages for a particular context.

Webmasters need to lay great emphasis on stuffing appropriate keywords in the header. If the keywords are absent from the header of your html code, the search engines will be unable to find your website/webpage.
Even more important to getting noticed by search engines, are back links back to a website with targeted text. In other words, the text used over the hyperlink from another site gives a search engine a good idea of what the site is about. This factor may be as important as the actual text on the website. It highlights the really important pages of the website, and shows what other web masters think is worth linking back to.

Choosing the right keywords for the Meta tags needs expert advice. One needs to be extremely careful while selecting the keywords for the Meta tags as they act as major factors in determining how a visitor will locate your website in the search engines.

Title and Meta tag structure formation is the most important aspect and is known as the beginning of website promotion. It is very important to keep track of the number of keywords as most search engine spiders only use the information available in the title tags to locate the webpage. Using high quality Meta tags rich in keywords ensures increased traffic to your webpage.

The core purpose of Meta tags is to guide the search engine spiders enabling them to reach a specific webpage. Thus, it is very important to use Meta tags and not drop them as they ensure effective Search Engine Optimization.

Search engine optimization means ensuring that your web pages are accessible to search engines and focused in ways that help improve the chances they will be found. Search engine optimization (SEO) changes your web pages so search engines can index and rank them better. You do this by modifying the HTML (the code) so search engines can easily navigate the page and identify significant words. You also add content (pages of text) so the search engines have something to index and rank. Thus your target audience will be able to find you when they are researching their interests. The goal is not just to get #1 ranking. The goal is sales. You measure success by showing an increase in leads, conversions, or sales.

If you're like me (stubborn), you've probably been dodging HTML for many years. All that code mushed together... it's distressing to look at! But here's the thing: HTML is your friend. He might be ugly, but he's a good guy to have on your side.
Once you get a basic understanding of how HTML works, the gibberish starts to make sense. And that's when you'll realize how easy it is to create web pages for your own business without having to 1. pay a designer thousands of dollars, or 2. purchase one of those expensive web design programs.
Let's start with a general explanation. HTML stands for Hyper Text Markup Language. It's the basis for every single design element you see on a web page: layout, copy, image placement, links, music, animation, etc. People who design their sites using fancy web page creators with buttons and copy/paste features are merely controlling the HTML code via the program's graphic overlay. Underneath it all, the code's still there in its pure form. You can see it if you go to a webpage and then click View>Source from the top menu.
Easy Web Page Creation
You can create a professional-looking web page using HTML and the bare minimum of tools: a text program (such as Notepad) to write and save files in, a Web browser to view the files, and a photo-editing program such as Photoshop.
Ever visit a webpage and then click View>Source so you can stare at the "guts" and try to make sense of it? The text program that opens that page is the same one you'll use to create your own web page from scratch. Keep in mind, a text program is NOT the same as a word-processing program, such as Microsoft Word. If you use Word, you may accidentally save your file as a .DOC, and in doing so, create all kinds of coding problems that make your page look crazy. NEVER create web pages in Word!
Here are three salient points about writing HTML code.
1. Your text editing program does not recognize paragraph returns when you type them with the Enter key. You will separate your text manually, using HTML tags such as < P > and < BR >.
2. HTML code does not differentiate between capitals and lowercase. Your tags can be typed either way and they'll still work no matter what.
3. HTML doesn't recognize Smart Quotes- those curly quote marks that Word and other word processing programs like to convert your straight quotes (or inch marks) into when you least expect it. HTML also doesn't recognize "curly" apostrophes (as opposed to straight ones, or footmarks). If you use these in your web documents, the computer will interpret them as code and fill your web page with gibberish. So DON'T USE SMART QUOTES OR CURVED APOSTROPHES!
Creating a Text Document: the Basis for Your Web Page
Start a new file in your text program such as Notepad, then save it with the .html extension. For example, you might name your file, "myfirstwebpage.html". Later, after you've entered your code into the text program, view the page as it will appear on the web by using a web browser such as Explorer or Netscape. Click File>Open, and then enter the name of your file. Viola! There's the web page that YOU created! The great thing about this feature is that you can keep on saving your text file and refreshing the browser page to track your progress.
Keep in mind that the pages you create and save as .html files won't be available for viewing on the internet until you publish them. This is done by purchasing a web hosting package through one of the major web hosting companies; for example, GoDaddy.com. You're required to "rent a space" for each web domain you own. But that's a topic for another article entirely.
Now comes the fun part: uncovering the "secret" to HTML! HTML is logic-based; and for those of us who love a good logic puzzle, this is truly a beautiful thing.
HTML Tags at Work
In viewing the source of web pages, you may have noticed a lot of these things: < >. They're called HTML tags, and they're what the computer uses to interpret the HTML code.
NOTE: in this article I had to add spaces to all of my HTML tags so that I could display them without actually having them work. There are two HTML tricks to actually "shutting off" HTML tags, but neither of them function properly in this submission box.
The HTML tags shown here will display like so: < FAKE TAG > but in reality you're supposed to type them like so:
.
Moving along, a friend of mine describes HTML tags as "on/off switches." An easy example which you may be well-familiar with, is the Bold command. To "turn on" Bold, type < B > (but with no spaces). All of the text that comes after the Bold tag, will then be Bolded. To "turn off" the bold characteristic, type < /B >. Any text that comes after the "bold off" tag will unbolded.
It's worth mentioning that in all cases, all text that falls between an "on" or "off" HTML tag will take on the characteristic of that tag descriptor. How much text can you put in between two HTML tags? As much or as little as you want. That means, you can use just a couple of HTML tags to design paragraphs and paragraphs of text.
What are some other HTML tags that web designers frequently use?
< I > and < /I > (for italics)
< U > and < /U > (for underline)
< BR > (to create a single line break).
In most but not all cases, if you activate an HTML tag by enclosing it in these: < >s, you must also deactivate it at some point, as in < I > and < /I > for italics shown above. An exception to this rule is < P >, or paragraph separator tags, and < BR > or line breaks.
Specifying Multiple Text Characteristics Within a Single HTML Tag
HTML tags work in different ways, depending on the aspect of the design they're controlling. As I mentioned above, you can control all elements of web design via HTML code—page separation, text formatting, image placement, design layout, and hyperlink insertion. For this reason, one HTML tag can include multiple variables. This sounds a lot trickier than it is.
For example, a tag with multiple variables enclosed all in one of these: < >, can be used to format text. An equals (=) sign is used to specify multiple characteristics within a single HTML tag. To tag a section of text for font specs, begin with:
< FONT FACE=
Using no spaces after the equals (=) sign, type your font name in quotes, as so: "arial". You can also specify the size and color here. In the same tag that says to close. Your font tag will now look like this:
< FONT FACE="arial" SIZE="2" > (but with no end spaces).
If you wanted to, you could also include a color for the text within that tag. The color is entered in the same way as the font face and size, and is named within its own set of quotation marks either in a basic name such as "black" or "red", or a 6-digit numerical code that begins with a number sign.
So, an HTML tag that designates a paragraph typed in Arial font at the 2nd smallest size of type, in the color black, would look like this:
< FONT FACE="arial SIZE="2" COLOR="black" >
All of the type that came after this HTML tag would take on the characteristics above. Once you wanted to "shut off" the font characteristics of that blurb of text, you would type the tag < /FONT >.
Using HTML Tags to Add Images to Your Web Page
Now suppose you wanted to add an image to your webpage. And let's assume the image was already located in the folder of your website where images are stored. In order to make the image appear in your NEW web page, you need:
1. the complete web address of your website (such as http://www.wordfeeder.com),
2. the folder (or subdirectory) on your server where images are kept, and
3. the file name of the image (ends in .jpg).
The HTML code used to "pick up" an image from a source is IMG SRC. As always, it belongs inside those handy bracket-things. So your tag would begin:
< IMG SRC=
Without typing any spaces before or after the = (equals) sign, you'd then paste the URL of where the image is located (as explained in examples 1, 2 and 3 above), and follow with the filename and .jpg ending. I'll illustrate this with an example from my own web collection of images:
< IMG SRC="http://www.wordfeeder.com/sitebuildercontent/sitebuilderpictures/wordfeederlogox.jpg" >
By typing that HTML tag with the specific web address and folder information/filename within quotation marks, the computer knows the origin of the image, and will then "hyperlink it" into your web page.
If you're ever unsure of the filepath of an image you need, go to the webpage where it's located and then right-click the image. Under "properties", you'll find the complete URL path that must be typed in between the two quotation marks that fall inside your Image Source tag.
Note: you do not need to "shut off" an image tag.
You can also include multiple variables within a single image tag. For example, if you wanted to left-align the above image, you'd edit the above tag to look like this:
< IMG SRC="http://www.wordfeeder.com/sitebuildercontent/sitebuilderpictures/wordfeederlogox.jpg" ALIGN=left >
Hyperlink Tags for Email and Website Addresses
Ever wonder how webmasters create live links? A live link might say something like, "Click here for more info!" and then when you click there, you're suddenly transported to a new web page. A live link is simply type covering a website address. Check it out:
< A HREF="http://wordfeeder.com" >Visit Wordfeeder for more info!< /A >
That's HTML code for "hyperlinked text". It looks weird, but think about it this way. The first part in that's enclosed in these: < >, is what turns on the "make the following words into a link that leads to the address I am typing here" function. The end tag, < /A > is what "shuts off" the "hypertext linking" feature and will then let you resume typing in normal, unlinked text.
As you can see, by typing a few simple HTML tags, you can create some pretty amazing things. This article is just the tip of the iceberg. I hope that the explanations and examples shown have at least provided a basic understanding of HTML for you. A great way to learn is by "studying" other people's web page code from the View>Source window. You practice by copying their HTML code into your own fake pages, and filling in the "meat" between their "on" and "off" tags with text and images that suit your own purposes. But be careful. If you paste HTML incorrectly, you can totally wreck and corrupt your document.

Making your Web Pages Download Fast is the Most Effective way of Keeping Visitors Browsing your Website.

With the Web being the all encompassing, slightly anarchic, global phenomenon that it is, there are no set standards about how to design Web pages. But there is one overriding principle that every Web designer should chant like a mantra as soon as they awake in the morning. ‘Speed is everything’.


Getting your website’s information on to the browsers of your visitors as quickly as possible is still the number one skill to learn when it comes to building web pages, but it often gets overlooked because it doesn’t seem as much fun as fooling around with Java applets or animated GIFs. But don’t be swayed by such fripperies – master the art of building sites that download super-fast and you’ll get people coming back again and again.

With the arrival of broadband, it’s tempting to think that designing web pages to download fast won’t be a concern. People will multitask on the Net as they do with their computers, pushing their internet access connections to the extreme and cursing your Web page if it doesn’t appear instantly. The need for speed is here to stay, so knowing how to optimize your HTML code and graphics will never go out of fashion.
Here are some Tips to help make your Web pages Thunder down the Information Highway

While understanding how to make your HTML super-sleek is vital to streamlining your Web pages, graphics are the single biggest culprit for slow loading websites. The hard and fast rule has to be, if you don’t need a graphic, don’t use it. For example, using graphics for text is a no-no – HTML text looks great if you use a bit of color and judgment.
Try to rescue the graphics you do need on your site throughout your pages. That way, the image gets cached in the user’s web browser and the image isn’t downloaded again. Don’t be afraid of repetition – for example, if you have a groovy logo to use on your site then put it in the same place on every page. It reassures the visitor that they are still on your site.
You should ensure that the full size of the graphics you use are as small as possible. Imaging editing programs will deal with this for you to an extent, but you can’t beat running an image through an online graphic compression tool to get the lowest possible image size.


When it comes down to HTML code, the first thing to do is design a look and feel for your site that isn’t massively complex. Simple layout equals slimline code. Ask yourself if you really need that scrolling ticker or Java applet – chances are you don’t.
Frames are also a bad idea for fast pages. Every frame within a frameset is effectively adding another page to load simultaneously when the user arrives at your site, rather than just one page. Coupled with the navigation, search engine and bookmarking nightmares that frames can cause, they’re best avoided.
Nested tables – that is, putting one table inside another – are the main way diligent designers achieve a good layout to their Web page, but be wary of overdoing it. As long as the tables are simple, with only three or four cells, nesting is fine. If you find yourself nesting the equivalent of a chessboard, it might be wiser to start again. Tables take a while to load in Web browsers, and the more complex the code, the longer your visitors will be staring at a blank screen.    
Remember that just because your Web page might look simple doesn’t mean that it was simple to put together. Simplicity is not only good for speed but also ease of use which has to be the other design concern.
WYSIWYG Weirdness
WYSIWYG editors are great for quickly assembling Web pages without the chore of typing HTML code by hand. However, these editors often add lots of extraneous code which is not actually needed to make the page display correctly. This is why it’s important to have at least a basic grasp of HTML even if you do use a WYSIWYG editor. Knowing what’s going on under the bonnet means you can spot a multitude of sins and streamline your code so it runs faster.

Times New Roman is the Web’s default font, but Verdana and Arial have become extremely popular too. If you like these fonts enough to want to use them throughout your site, a nifty way on cutting down on coding every paragraph is to use the tag. This changes the default font of your pages.
For example, will make all the text on your page appear as size 2 Verdana, unless you specify otherwise using the usual tags that doesn’t have a closing tag, so you don’t need to insert a tag anywhere. Best of all, you can avoid the hassle of having to format the majority of your text in one fell swoop, saving coding time and keeping your HTML streamlined.

This is possibly the easiest way of improving an existing site’s download time. Every space in your HTML code isn’t empty spaces to a browser – it’s another bit of info it needs to interpret and process. Many WYSIWYG editors generate indented code with line breaks. Removing all those indents and line breaks will shave several K off the size of your page so it loads much quicker.
It’s here that a half decent Web page editor comes into its own. Using the search and replace function, you should be able to do a sitewide search for spaces. Type several spaces into the Find box, make sure the replace box is empty and it’ll whiz through the whole site eliminating any spaces it finds.

Tips and tricks on effective web design

The Number 1 rule that every web designer should follow is to create a fast loading web site. You might have a great design but very few people are going to see it if it takes a long time to load. While designing a web site always think about how long it will take to load. Try out our tips to build a great looking web site that also loads fast.



Minimize the use of images - The key to a fast loading web site is to minimize the use of images. Images do enhance a page but don't make 80% of your web site only images. Instead break it down as much as possible to simple HTML. Notice the popular sites like Yahoo, Google, Ebay, Amazon etc., they have very few images because the load time is more important. Very often simple designs are the best.

Optimize images for the web  - Once you have decided on the images that you need on your site, make sure that it is optimized for the web. They should be in the gif or jpeg format. You can also minimize the size of the image by choosing the number of colors you need, from the color palette. The less the colors you choose, the less the size of the image. You can also use online tools like Gif Wizard to optimize your images or to get a recommendation on how to cut down the size of an image.
Use Tables creatively - You can get some great looking designs by using tables creatively . Tables load very fast because it is just HTML code. Tables can be used in the homepage, menus or anywhere you like. Check out our homepage and our menus to see how we have used tables in our site.

Cut down the use of animated gifs - Don't use animated gifs unless it is necessary. Animated gifs take a long time to load and can also be very irritating. But since they catch your attention you could use small animated gifs to draw a visitor's attention to a particular section of your site.

Design simple icons - Instead of using big, bulky images use simple and small icons that add a little color and draw the attention of a visitor. We have used small icons in our homepage to highlight the main sections of our site.

Use background images instead of big images whenever possible - Use background images whenever possible. This is usually a very useful tip for headers and footers. Instead of using an image of width 580 which is a uniform design you can use just a part of that as a background fill. This reduces the size of the web page as the image is small. The code will look like this :
Try out CSS Styles - Have fun with CSS styles to get some cool text effects. Again, a CSS Style is simple HTML code so it loads very fast. You can create cool rollovers using CSS Styles.
Rollover the text on the right menu to see how we have used CSS Styles to get a simple but nice text effect.

Use Flash sparingly - There seems to be a lot of hype about Flash but I recommend that you minimize the use of Flash on a site. Don't make entire sites using Flash. It may look great but it takes hours to load and can really put off visitors. If you do want to use Flash use it within an HTML site and make sure it loads fast.

Design most of your site in HTML - As much as possible try to design your site using HTML. You can create great designs by just using HTML code. Use tables, CSS Styles and simple fonts to design your site. Minimize the use of animated gifs, Flash, bulky images etc.

Keep checking your load time - Last but not least, before you decide on the final design of your web site, check its load time


We learnt these tips while building our web site. We've enjoyed sharing them with you and hope that you found them useful.

Seems that you have decided to create web pages yourself!
Good! So let's begin quickly.
Web pages are basically files with .htm or .html file extensions. They contain a code named "Hyper Text Mark-up Language" or HTML. These codes when viewed in a browser like Mozilla Firefox or Internet Explorer will be seen as cool web pages no matter how complicated the underlying code is.

• Tools you will need:

You will need a simple text editor to write html codes. For example you can use vi in Unix/Linux based operating systems or

notepad in windows. You will also need a browser like Mozilla Firefox or Internet Explorer. In this Tutorial we assume that you

are working in any of the popular Linux Distro or Windows 9X/NT/2000/XP.

Now open your text editor and type the following code:

<html>
Hello world!
</html>

Now save the text as "page1.html". Now Open the file. Congratulations! What You see is your first web page opened in your web browser.
and are called tags. First one is a start tag and second is an end tag. Tags are something like commands in programming languages. tag tells the browser that this is start of the HTML and marks its end.
mark start and end of an HTML page.

• HTML code headers:

• Page Title:

• Web page body:

• Enhanced <BODY> tag:

Most of html tags we will learn have optional parameters and extensions. Here we will learn to
extensions for <BODY> tag.
1-9 Background color for body of web page
If you want you can change background color of your web page by extending <body> tag as
below.
Example:
" <HTML>
<HEAD>
<TITLE>Page with Back Color</TITLE>
</HEAD>
<BODY BGCOLOR="#00FF00">
Page with Back Color
</BODY>
</HTML>
This will change your background color to green. Format of color number is RRGGBB. You know
that each color is a combination of three main colors: Red, Green and Blue. In color format RR is
value of red component of the main color in hexadecimal format. GG is value of green
component and BB is the value of blue component.
Two digit hexadecimal number can be anything between 00 to FF i.e. 0 to 255 in decimal format.
So if we write 00FF00 we mean (red=0, green=255, blue=0) so the result is a pure green color.
You can produce 16 million colors in this way but pay attention that not all of the browsers will be
capable to show all these colors. So test your web page in 256 colors mode.

• Background Image:

We can use a background picture for web page instead of background color. You must have a
ready image file in .gif or .jpg formats. Now you must extend <BODY> tag as below. "image1.gif"
is file name of he image we want to use as background image.
<BODY BACKGROUND="image1.gif">
Example:
<HTML>
<HEAD>
<TITLE>Page with background image</TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
<B>Page with background image.</B>
</BODY>
</HTML>
Image file must be in the same folder as your html file. Otherwise browser will not be able to find it.

• Exercises:

1- Write your web page code with image1.gif as its background picture.

2- Write above code with a blue color instead of image as its background.

3- List tags you learned in this lesson with a small description.


In the next section we will get into text manipulation and formatting.

• Text Formatting:

Until now we have learned to insert simple text into our web pages. In this lesson we will learn
text formatting
techniques. This part of html writing skills is the most important part of our whole web design
course. So you must learn it word by word.
Changing text font style
We can make a text bold, italic or underlined. If you want to make a text bold, you must inclose it
in <B>...</B> tags.
<BODY>
This is very <B> important </B>
</BODY>
In above text the word "important" is typed bold. You can make a text italic by inclosing it in
<I>...</I> tags.
And finally you can make some text underlined by inclosing it in <U>...</U> tags.
Example:
<HTML>
<HEAD>
<TITLE>Example 1, Lesson 2</TITLE>
</HEAD>
<BODY>
<B>This text is bold</B><br>
<I>While this one is Italic</I><br>
<U>and this text is underlined</U><br>
<B><I>Look at this, this is both bold and italic</I></B>
</BODY>
</HTML>
In above example you can see that how we can make a text both bold and italic or any other
combination.
You may notice the tag <BR> in the end of each line. Let's see what is this tag. If you insert enter
keys (new line characters) at the end of each line and wish that it will make new lines in your
output page you will soon be
disappointed.
All lines will be in a single line in output web page. No matter how html code is written in separate
lines. To break lines in output web page you must insert <BR> tags in breaking points. Also pay
attention that <BR> tag is one of few single tags in html language . It has not an ending tag.

Nested Tags
In previous section we saw a line of code with nested tags.
<B><I>This is both bold and italic</I></B>
When you use nested tags you must be sure that they do not overlap each other. They must be
nested exactly. For example some part of text may change to bold although it is not desired.

Text with fixed width font
As you may know, regular fonts use different horizontal space. For example letter 'w' uses more
space than the letter 'i'. Sometimes we need a font with exactly the same width for all letters . For
example if you want to make a table of numbers and you want the columns to be exactly under
each other in different rows, we will need this kind of text.
To specify this kind of text you must use <TT>...</TT> tags. TT means Typewriter Text.

Changing size and face of fonts
We can change face and size of fonts using <FONT>...</FONT> tags. Also using this tag alone will
not change the text. You need to use parameters for this tag. This parameters specify what kind of
change you need in text font.

Size of font
To change size of font in a part of text, inclose it with a <FONT> tag as below:
<FONT SIZE=n>...,</font>
n is size of font. size of font must be a number between 1 and 7. If you insert some text without
determining its size default size will be 3.

<HTML>
<HEAD>
<TITLE>Example 2, Lesson 2</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>1This text is bold</FONT><br>
<FONT SIZE=2>2This text is bold</FONT><br>
<FONT SIZE=3>3This text is bold</FONT><br>
<FONT SIZE=4>4This text is bold</FONT><br>
<FONT SIZE=5>5This text is bold</FONT><br>
<FONT SIZE=6>6This text is bold</FONT><br>
<FONT SIZE=7>7This text is bold</FONT><br>
</BODY>
</HTML>

• Face of Fonts:

We can use a font for a part of text by specifying its name.
<FONT FACE="Font Name Here">...</FONT>
You must insert font name in double quotes in above tag.
Example:
<HTML>
<HEAD>
<TITLE>Example Illustrating Font Manipulation</TITLE>
</HEAD>
<BODY>
<FONT FACE="ARIAL">This text is in ARIAL font</FONT><br>
<FONT FACE="IMPACT">This text is in IMPACT font</FONT><br>
</BODY>
</HTML>
In above example we have used Arial and Impact fonts while you can use any font you want.
Warning: Fonts will be displayed on your viewer only if specified font is installed on your computer. So
be careful while using new fonts. It's better to use native windows fonts in your pages. Windows is
used by about %95 of web surfers.
Alternatively you can use several font faces for each part of your text. In this way your browser
will try alternative fonts if it can not find primary font.
<FONT Face="Arial,HELVATICA">...</FONT>

• Changing Font Colours:

In previous lesson you learned how to change web page background color. Here we will learn how
to change text
color. Look at this example:
<HTML>
<HEAD>
<TITLE>Example illustrating Font colour change </TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000">This text is in red color.</FONT><br>
<FONT COLOR="#00FF00">This text is in green color.</FONT><br>
<FONT COLOR="#0000FF">This text is in blue color.</FONT><br>
</BODY>
</HTML>
In above text different colors are used. You can change text color by changing color number. If
you don't remember how to specify color numbers return to previous lesson and review section on
"web page background color".

• Combining Font attributes:

We can obviously combine <FONT> tag parameters as we wish. In this way we will be able to
have text with different colors, font faces and font sizes.
You can even use text styles with <FONT> tag by nesting style and font tags.
<B><I><FONT SIZE="5" FACE="IMPACT" COLOR="#00FF00">
How is this ?
</FONT></I></B>
2-10 Changing default font colors in a web page
Each browser has its own default settings for text color, link color, visited link color and active link
color.
Text color default is black. Links are usually blue. To change default settings for these values you
must use <BODY> tag with more parameters.
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF"
VLINK="#00FF00" ALINK="#FF0000">Some Text </BODY>
BGCOLOR: Web page background
TEXT: Text Color
LINK: Link Color
VLINK: Visited link
ALINK: Active link
This lesson included some of the most important techniques in html writing. Now you must be able
to use any kind of text in your web pages.
As remembering so much tags and parameters is difficult, you must use them repeatedly so that
you can remember them.

"No one becomes a programmer without programming"


Exercises:
1- Write a html page that uses lines with these styles in separate output lines:
italic and bold
italic and underlined
bold and underlined
2- Make a web page with a banner text on it. Our banner is made of characters in increasing sizes
to banner's middle and then decreasing size to its end. First character starts with the size 1,
middle character size is 7 and last character size is 1 again. Banner text is "mylonglongname".
3- Write a html page with 9 separate lines in different colors. State color of each line in its text.

• Line Breaks, Paragraphs

As we saw in previous lesson if we break lines in HTML code by simply inserting enter keys (new line characters) ,lines will not break in output result in browser. They will be printed in a single line in browser. We must use <BR> tag to do this as you used it in previous lesson. You can also divide text using paragraphs. A paragraph starts on a new line with one blank line after previous line.
Paragraph tag is <p> </p>
<p>First paragraph</p>
<p>Second paragraph</p>
You will nest other tags inside paragraph tag for fonts, styles and other tags that will be used inside a paragraph.
There is another option in forming text that is using <PRE> tag. Text between <PRE> </PRE> tags will be displayed exactly
as it is typed in html source. Therefore you will not need <BR> tags to break lines. It is enough to
enter text in separate lines with enter key (new line character) at their end.
Space between texts
Browser does not show more than one space between to words even if you have entered a hundred spaces between them in
HTML source. If you want to enter more than one blank character between two words you will need to use a small code for this purpose. It is "&nbsp;" without the quotes.

<BODY>
Here we insert 5 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; extra spaces.
</BODY>

• Paragraph alignments in your web page

You can determine how a paragraph will be aligned in a web page. You can align text in left, right or center of a web page. To specify alignment for a paragraph you must use an extra parameter for your paragraph tag.You can use one of these combinations:
<P ALIGN="left"> </P>
<P ALIGN="center"> </P>
<P ALIGN="right"> </P>
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY>
<P ALIGN="left">You can align text in left.</P>
<P ALIGN="center">You can align text in center.</P>
<P ALIGN="right">You can align text in right.</P>
</BODY>
</HTML>

• Indented Text

If you need a text that is indented from both sides of web page you can use <BLOCKQUOTE> tag.
Text that is enclosed in this tag will have a margin from left and right of your web page.
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY>
We see block quotes here:<BR><BR>
<BLOCKQUOTE>
In cases that you want to emphasis on a paragraph in your
text you can use this tag. It will indent your text from
both sides.
</BLOCKQUOTE>
</BODY>
</HTML>

In the next session we are going to see how we can add images in your web pages.

• Images in your web page:

In previous lesson you learned how to use an image as a background for web pages. It was:
<BODY BACKGROUND="image.gif">
</BODY>
Here we want to learn how to add an image in a web page. Tag that will be used for this purpose
is <IMG> tag.
Actually we will need parameters for this tag that specify image file location, file name and other
optional parameters.
Look at this example:
Example:
<HTML>
<HEAD>
<TITLE>Example </TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
<B>This is an image:</B><BR>
<IMG SRC="abanner.gif">
</BODY>
</HTML>
In this example We have used both a background image and an image between text.Also you may have noticed that this tag is also a single tag that does not need an ending tag.
If you want to show your image in a different size than its real size, you can specify its size as below.
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
This is an image:<BR>
<IMG SRC="abanner.gif" WIDTH=234 HEIGHT=30>
</BODY>
</HTML>
Alignment and border size for images
You can align image in your web page by inclosing it in a paragraph that is aligned as aligned to left, right or center.
See example below.
Example:
<HTML>
<HEAD>
<TITLE>Example showing change in image attributes </TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
This is an image:<BR>
<P ALIGN="center">
<IMG SRC="abanner.gif">
</P>
</BODY>
</HTML>
You can add a border to an image by adding a border parameter to <IMG> tag. See the results of this html code.
You can see examples of this lesson in our site. Go to email course section in our site to see ready examples.
Example:
<HTML>
<HEAD>
<TITLE>Example 3-6</TITLE>
</HEAD>
<P ALIGN="center">
<IMG SRC="abanner.gif" border=3>
</P>
</HTML>
Some of options we use may not be supported on other browsers. As most of web surfers use "MS
Internet Explorer"
we will work around this browser.

• Alternative text for images:

Some web surfers may use browsers that do not support graphics. An example is lynx browser that is used in Unix text environments. If you want to consider these users, you can enter a text as an alternative to each image in your web page. In this way image will be replaced by its alternative text.
It is very easy. Just add an ALT parameter to <IMG> tag.
<IMG SRC="abanner.gif" ALT="Learning Online">
You see it does not cost too much.

• Path of image file:

In above examples, image file must be located in the same directory that html file is located.If our
image file resides in other directory , we must add a relational path or a complete URL to this
image.
See examples below:
<IMG SRC="images/abanner.gif"> Image is located in "images" directory below the directory that html file resides.
<IMG SRC="../abanner.gif"> Image is located in parent directory of the directory of html file.

In this lesson you learned more text formatting techniques. You also learned how to include images in your web pages.
In next lesson we will learn about links, image links and more.
Until then I suggest you to start designing a web page using the knowledge you have from these three lessons.