html-guide

Why Website Templates Make Being A Webmaster More Efficient

by: John Hammon


The acceptance of website templates as an alternative to website designing can be attributed to the ability of templates in improving the work efficiency of the webmaster. Of course, they also reduce the costs involved in setting up a website.

Website templates have evolved over the years from simple HTML web page templates to the Flash template designs that allow for dynamic and customized websites. Getting a website designed from scratch is an expensive and time-consuming process. Moreover, it is not easy to get the right web designer, very often projects get delayed because of difference in opinion between the web designer and the webmaster and delay usually implies escalating costs. Website templates help to solve this problem by offering a selection of web page designs at a fraction of the cost of a professionally designed web page.

Multimedia Flash and other professionally designed templates enable webmasters to select from millions of permutations and combinations without having to approach a web designer. Inexperienced webmasters benefit more from using website templates as it frees their time and allows them to concentrate on other issues regarding the development of their website. There are many websites that offer templates that can easily be customized to a webmaster’s requirements.

Arriving at the right website design can speed up the website development process as after freezing the design, adding content to the website is not very time consuming and can be accomplished relatively easily. Website templates allow webmasters to pay more attention to this critical aspect of website development, and thus are more likely to receive traffic from search engines.

As website templates provide a readymade and consistent design for each page; they help in binding a website together, giving it uniformity and coherence, and in facilitating smooth browsing. Templates are available with editable and uneditable regions so chances of content getting erased are reduced. An important advantage that website templates offer is the ease with which they can be modified, the HTML and CSS components are not very difficult to master and once the basic website is in place and online, a webmaster can crystallize his concepts and customize the website to suit his business needs by fine tuning the content or adding JavaScript, if required.


Thus, website templates, that cost round $50 - $200, are of great help to webmasters in running the website more efficiently. They also allow the site to generate revenue quickly by allowing the webmaster to sooner focus on producing content, and implementing marketing activities such as web page optimization and competitor analysis.

Why CSS Is Good For Your Web Site
by: Paul Silver and David Rosam

Cascading Style Sheets (CSS) are used within the HTML behind your Web site as a way of controlling how each page is laid out and what elements on it look like. For instance, you can use CSS to make headings in your copy a standard size across the whole of your site.

CSS has been around for several years and is supported by all the major browsers available today, including Internet Explorer for the PC and Mac, Firefox, Safari and Opera.



Using CSS to control your Web site will give you several benefits:

Makes your Web pages snappier

By using CSS and writing your HTML code to match standards like 'XHTML Transitional' or 'XHTML Strict' you can decrease the 'render time' of your pages. This is the time it takes between downloading the page and actually showing it on screen to your Web site visitor.

When using tables for layout - the traditional alternative to using CSS - and 'font' tags to control how the text on the page looks, the browsers have a lot more work to do before they show the page. Using CSS and the proper DocType for the pages means the browser knows what to expect from the code and can display it much more quickly.

In practice, converting to a standards based CSS layout on one client's Web site reduced the time it took the page to display by almost a quarter of a second. Although this is a very small amount of time, it is more than enough to make a Web site feel much more snappy and responsive, helping it give a good impression to your potential customers.

Makes your Web site quicker to update

As well as making your pages display quicker, CSS makes it easier to make global updates to your Web site. Say you're having a minor change in corporate image and want all your page headings changed from blue to green. With CSS controlling how your headings look, that means changing the colour in one file and the whole site shows the change - a two minute job rather than having to edit every page on the site.

This flexibility gives you the opportunity to do more with your Web site. Want to show your support for Red Nose Day? Again, one file change can put a little red nose next to all of your headers, turn the text red and even make them display in a silly typeface. Turning them back to normal for the next day is, once again, a single file change.

Good for Search Engine Optimization

Because using CSS removes lots of HTML from your pages as layout and the look of text is controlled through the CSS file, it makes your textual content much more prominent within your HTML. This means the search engine spiders can easily find your textual content, and that your content is generally displayed in one block, rather than being split up into less readable chunks by HTML just to fit it in to your design.

Using 'semantically correct XHTML' - ie heading tags around the headings and sub-headings in your copy, and bold or strong tags around content you wish to highlight - tells the search engines those words are the most important on the page. This helps give the page a boost for searches which match the words which are marked as more important in this way.

Helps in passing the Disability Discrimination Act

Using good CSS and XHTML makes it easy for people with disabilities to change your pages the way they may need to for easy reading. This may be through increasing or decreasing the font size, or having it read to them through a screen reader. The clean page coding that goes along with using CSS means screen readers can easily navigate through your page and find the content, giving a good experience to visually impaired users.

Using CSS and XHTML also helps you comply with the UK Disability Discrimination Act rules for accessible Web sites. This is a valuable side-effect of using this kind of coding and takes no extra development time to be compliant.

Helps browsing from different devices

As well as helping screen readers, using CSS means alternative devices like mobile phones and PDAs can show your content effectively and easily. Although the current market in the West for browsing the Web through mobiles is small, it is growing and by using CSS you can create a Web site which is easily viewable on these devices with little extra effort,. So as more people use them it will be simple to convert your site to work with current or future devices..

Downsides

Currently, Web browsers treat CSS slightly differently, so when your Web site is created you may need slightly more cross-browser testing, and you will need to find a Web designer who understands how to build a site in CSS correctly. Most professional designers and developers are now seeing the benefits of creating standards based CSS sites, but it is worth ensuring that anyone you hire to make your Web site does know CSS before starting a project.

But the downsides are small when compared to the immediate and ongoing benefits of a CSS-based Web site.

Why You Should Learn HTML
by: Debra Hamer

Do you have a website or are you planning on creating a website in the near future? You owe it to yourself to at least learn some basic HTML (HyperText Mark-up Language). Even if someone else is creating and maintaining your website there are some basics you should know. What if that person is not available and you need to add or make changes to your website? I’ve always believed if you have a business, computer, website, or whatever, you need to know how it works. Don’t depend on someone else. Besides why pay someone else when you can do it yourself free of charge.

In this article I will explain some basic HTML formats for you. Believe me it will come in handy at one point or another. I, myself, have only learned some of the basics and I have been able to add, change, and make corrections on my own website by myself.

When you come across a website you like and would like to use a similar layout or text pattern, look at the page in HTML code. You can do this by clicking on “View” at the top of the screen, then choose “Document Source” or “Source” and you can see the page as a HTML document. If you are using AOL then right click on any area on the page without any text or images, then select “View Source”. At first it will look like Greek to you but after learning some basic HTML it will start to make sense.

First you will need a word processor program such as Windows “Notepad” or any other word processor you might have. You are working with simple text. You will need to save your document using the “save as” command and give it an html suffix, ex: Mynewdocument.html or Mynewdocument.htm (you can use either suffix html or htm).

HTML works in a simple, logical format. It reads top to bottom and left to right. What are used to set sections apart like bigger text, smaller text, bold text, underlined text are tags. Tags are commands. If you wanted a line of text to be bold you will place a tag at the point you want the bold text to start and a tag at the end of where you want the bold text to stop.

All tags start with the less-than sign , always. What is between these signs is the tag or command. You will need to learn what tag does what. Let’s first learn the bold command. The following is an example of making your text bold. The tag for bold is “B”. You can use uppercase or lowercase, it doesn’t matter. Here is an example:

Note: Due to the HTML codes in the article being formatted and possibly not showing up on the page in normal view I have replaced the signs with the bracket characters [ and ]. Just remember to use the signs and not the [ and ] signs in your document.

This is how it will look in HTML format - [B]This text needs to be bold[/B]

Here is how it will look when converted to normal view – This text needs to be bold

Did you notice the slight difference in the ending tag? There is a slash / before the B. That means it is the end tag. Only the text between the start and end tags will be in bold. Now let’s add a twist by putting one of the words in italics.

This is how it will look in HTML format - [B] This [I]text[/I] needs to be bold[/B]

Here is how it will look in normal view – This text needs to be bold

There are some tags that are an exception to the rule about having to have a start and end tag. You don’t have to have an end tag when using these tags. Here are some examples.

[HR] this command places a line across the page. HR stands for “horizontal reference”.

[BR] this command breaks the text and jumps to the next line, like the return key.

[P] this command stand for “paragraph”, it does the same thing as the [BR] command but skips a line.

Every page you create with HTML will need the HTML tag [HTML] which denotes it is an HTML document and the end HTML tag [/HTML] will be at the end of your document. The next tags will be your start Title tag [TITLE] and your end Title tag [/TITLE]. The title of your document will go in between these two tags. The title will show up in the title bar on your browser when you are looking at the page in normal view.

The following are some tags for Headings (there are 6 heading commands) and Font size (there are 12 font size commands):

[H1]This is Heading 1[/H1] – H1 is the largest heading

[H6]This is Heading 6[/H6] - H6 is the smallest heading

So, by using H1 through H6 you can change the size of your heading. Same applies to your font size. You will use [font size =”+1”] through [font size=”+12] and don’t forget your end tags!

You may notice that your text always starts at the left of the page. If you want your text to start in the center or to the right you will need to specify where you want your text to start. Here are some examples of aligning text:

[CENTER]Center this Text![/CENTER] - your text will be centered on the page.

Center this Text!

To align to the right you need to set the text as a paragraph unto itself by using the [P] tag and adding an attribute to it.

[P ALIGN=”right”]Text here will align on the right of the page[/P]

Text here will align on the right of the page

Why did I put an end tag [/p] since the paragraph command does not require an end tag (remember exceptions to the rule?) Anytime you use an attribute tag, as in the above example, you will need to have an end tag, whether you’re using the paragraph command [P] or the return command [BR]. Using the [P] or [BR] command by itself does not require an end tag, but if you are adding an attribute then an end tag must be used.

Adding an image to your page would require the following tag:

[IMG SRC=”image.jpg”] -you would replace “image.jpg” with your own image file. IMG stands for image and SRC stands for source. You’re telling your browser where to find your image file. Your image file could have a gif, jpg, or a bmp association.

Ok now let’s get a little more complicated and create a hyperlink on your document. This creates blue underlined words on the page that someone can click on and go to another location. An example is you’re creating a link to another website.

[A HREF=http://www.profitfromhomebiz.com"]Profit From Home Biz[/A] - this is what in looks like in HTML code. Note you are adding a description of the link that will be underlined, see the example below.

Profit From Home Biz – what it looks like in normal view. When someone clicks on this link they would be taken to my website.

This is a very important HTML format for when you need to add links onto your webpage. You may already know or will learn that reciprocal linking is very important in promoting your website and obtaining a higher page rank with the search engines. Sometimes the HTML code is provided for you and all you have to do is “copy and paste” the code into your webpage. Often it is not, so you have to figure out how to put the information into HTML code yourself. Just learning this HTML command has been a timesaver for me.

I hope this article has helped you learn some basic HTML and how it can benefit you. I know, I know there are HTML text editors out there you can use and they can do all of this for you. I have used a couple myself, but I still like to know how to do things on my own. I bet you do too! Sometimes it’s just faster and easier to do it yourself.

I’ve just given you some very basic formats in using HTML, but you can find a lot more resources and information about learning HTML on the internet. Just do a search and I’m sure you will be overwhelmed at what’s out there.