Top Seven Tools For Budding Webmasters

You’ve finally finished building your very first website and whether you built it from scratch or used a template from Wordpress or Joomla or some other CMS source, unfortunately your work is still not complete. Even if you’ve packed the site with thrilling content and wonderful writing and the design is impeccable, you’re still going to have to wade into the somewhat murky world of search engine optimisation if you want people to actually read it. This article will look at the very best tools to help you tweak your site for the search engines.

Before you do anything however, you’ll need to look into what keywords you should be targeting to get your site to rank well in the search engines. Whether you intend to run your own organic SEO campaign or go for Pay Per Click advertising you’ll still need to choose the right keywords before you do anything else and this is best done, initially at least with a pen and paper. Take half an hour to quickly note down all the search phrases you would use and the words you would type in if you were searching for a site like your own. Repeat the process for your competitor’s site and you’ll very soon have a decent list of search terms that will bring the right kind of traffic to your site.

 
Now you’re ready to start working on search engine optimization you’ll need to get to grips with some of the tools that will make your day to day work a bit easier. Here are seven which are popular with webmasters:

Google Analytics – Google provide Google Analytics for free, allowing site owners and webmasters to track the activity on their website and to study certain categories such as average time spent on the site, bounce rate, pages viewed per visit, page views and page hits. Google Analytics is invaluable in helping you to make sense of your site’s search traffic, the value of your keywords and the performance of your content.

Link Diagnosis – A popular tool for analysing links and link competition. Link analysis reports on link competition by giving you details of a competitor’s links. Link Diagnosis lists page rank and anchor text amongst other things, but is limited to use with the Firefox browser.

 
SEO Logs – SEO Logs offers a wide range of tools such as Keyword difficulty check, SEO optimizer, on-page SEO and Google tools for detecting any fake PR results. Also useful are the included HTTP headers and status check features, the back link analyser, the domain age checker, Adsense profit calculator and the ability to compare Alexa rankings.

Alexa – Alexa is another tool you should get to grips with. Alexa is used as a way of measuring websites’ popularity by using browsers toolbars. 

 

Key Complete – Key Complete is best used for working out a competitor’s keywords when conducting a PPC campaign. A useful online tool.

 

SEO Moz – One of the main tasks performed by SEOmoz is to detect any errors on your site, monitor and track your traffic and research keywords. Receives reports from search engines including Yahoo, Google and Alexa.

Widexl – Widexl is useful to help you understand link popularity and the pages that link to your website. In addition there is a Meta tag analyser which looks at keyword density, meta tags, page loading time and other similar SEO related details.

Alex is a blogger and seo consultant. He currently writes for the Bedouin Group on finance and the contracting sector, covering everything from mortgages to umbrella companies.

 

Read And Make The Right Choice!

Web designing industry is faced with numerous changes on daily basis. The trends in the web designing change over the night. Currently website redesigning becomes the most valuable activity to increase more and more visitors to your website. For this, you have to update your website designing by taking the help of any professional web designer or web design company, if you wish to survive in the market.

If you want to keep yourself updated with the current trends, following links are worthy of being visited.

Design Meltdown

If you are looking for the latest and updated design elements, and if you wish to learn the latest trends in the market or you have some problems to be solved, simply log on to Design Meltdown. This is a tutorial specially designed to cater such issues with lot of chapters on design principles and the styling, plus the other elements like color or themes as well.

Red Acorn

This is the place where you can get maximum help in web designing. If you wish to learn how to plan or market out any website or even how to publish your website, there is no better option than Red Acorn.

Boogie Jack

It features tutorials to help you out with CSS and other resources with an HTML format. You can also get few tips for hosting and if you are looking for tips for SEO and easy website money, there is no better option than Boogie Jack.

Alertbox

Learn more about the top mistakes that web designers make from Alertbox. You will get many tips to improve your work here. This is being hosted by Jakob Neilsen.

Save The Pixel

This is a complete book for web designers and it is available now to be downloaded. The whole book might turn out to be costy, however, you can download the first chapter for free. The first chapter includes information on the designing, pixel usage and many more.

Network For Good

You can view different campaigns here for free. If you are looking for online tips and tricks of marketing, log onto it and get started with it instantly.

Designer Talk

This is the leading forum of web designers. You can get a lot of information on designing, advertising and marketing here.

Web Developer’s Handbook 2.0

If you enjoy designing and you have free time to experience with your designing tactics, this place is a paradise for you. Articles here range from quality and creativity to accessibility and CSS tools.

Web Design Trends for 2009

Find out more on the popular trends of the market through Web Design Trends for 2009.

javascript: Changing text

How to dynamically change text on HTML page with jscript? It is relatively easy to do this. Learn how to make web page where you can changing text with one click on link.

In this guide you will find how to:

• make a simple javascript function to change text after click on the link


• change text to two different words with click on first or second link with calling one javascript function


• change text of one link to "pressed" or "unpressed" after clicking that link


• hide and show text with changing link text to "show" or "hide"

In this samples text inside Div element is changed after click on link. You should know that it is possible to change text in various HTML elements such as buttons, paragraphs, text in drop down lists...

For more useful javascript effect tips follow the link.

Changing text with javascript after clicking a link

In this demo text will be changed after you click "Change text to AAA" link or another link "Change text to BBB". One link change text to first version ("Text changed to AAA") and a second link change text to another version ("Text changed to BBB").

Demo:

Change text to AAA Change text to BBB

This text will be changed

Here is a HTM/jscript code responsible for changing text demo:

<script language="javascript">
    function changeTextToAAA() 
    {
        document.getElementById("divA").innerHTML = 'Text changed to AAA';
    }

    function changeTextToBBB() 
    {
        document.getElementById("divA").innerHTML = 'Text changed to BBB';
    }
</script>

<a href="javascript:changeTextToAAA();">Change text to AAA</a>
<a href="javascript:changeTextToBBB();">Change text to BBB</a>

<div id="divA"><h4>This text will be changed</h4></div>

Explanation of code:

• Text is in the div element with id=divA


• when "Change text to AAA" link is clicked javascript function changeTextToAAA() is called


• In javascript function changeTextToAAA() innerHTML of divA (where text is stored) is changed to text "Text changed to AAA"


• Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag


• same principle for "Change text to BBB" link, when "Change text to BBB" is clicked it call function changeTextToBBB() which change text (innerHTML of divA to "Text changed to BBB")

Changing text with only one jscript function called from two links

Demo:

Change text to First Change text to Second

This text will be changed

In this demo text is changed to "First" or "Second" after clicking one of the links which call one jscript function with input parameter with text which appear.

Take a look at code:

<script language="javascript">
    function changeText(newText) 
    {
        document.getElementById("divB").innerHTML = newText;
    }
</script>

<a href="javascript:changeText('First');">Change text to First</a>
<a href="javascript:changeText('Second');">Change text to Second</a>

<div id="divB"><h4>This text will be changed</h4></div>

Explanation of code:

• Text is in the div element with id=divB


• when "Change text to First" link is clicked javascript function changeText() is called with parameter 'First' - so call to function look like changeText('First')


• word entered for input parameter is passed to jscript function which change text to this word - in this case this word is First but if jscript function changeText is called like changeText('MyText') then text will be changed to "MyText"


• In javascript function changeText() innerHTML of divB (where text is stored) is changed to text from input parameter 'First'


• same thing for "Change text to Second" link, when "Change text to Second" is clicked it call function changeText('Second') and changing text to "Second" (innerHTML of divB to "Second")

One link changing text to pressed or unpressed

Demo:

Unpressed

When page is loaded link text is "Unpressed". Press link and its text is updated to "Pressed". Click link again ant its text is changing to "Unpressed"...

Sample code:

<script language="javascript">
    function changeTextOfLink() 
    {
        var link = document.getElementById("linkClick");

        if (link.innerHTML == "Unpressed") 
        {
            link.innerHTML = 'Pressed';
        }
        else 
        {
            link.innerHTML = 'Unpressed';
        }
    }
</script>

<a href="javascript:changeTextOfLink();" id="linkClick">Unpressed</a>

Explanation of code:

• Link with id=linkClick have text "Unpressed", its innerHTML value is "Unpressed"


• when link linkClick is clicked jscript function changeTextOfLink() is called


• jscript function changeTextOfLink() check the innerHTML property of link id=linkClick, if link innerHTML property have value "Unpressed" it is changed to "Pressed"


• when link is clicked again (second time) it have innerHTML value set to "Pressed", then jscript function changeTextOfLink() change innerHTML value to "Unpressed"

Hide or show text in div and changing link text to "Hide" or "Show"

Hide

This div will be hidden

In this javascript demonstration div tag with text "This div will be hidden" is hided when use click link with "Hide" text. Link text is changed to "Show". When user click link again, div element with text "This div will be hidden" will be showed and link text is changing to "Hide".

Code:

<script language="javascript">
    function divToHide(divToHideOrShow) {
        var link = document.getElementById("linkId1");
        var div = document.getElementById(divToHideOrShow);

        if (div.style.display == "block") 
       {
            div.style.display = "none";
            link.innerHTML = 'Show'
        }
        else 
       {
            div.style.display = "block";
            link.innerHTML = 'Hide';
        }
    }
</script>

<a href="javascript:divToHide('divShowHide');" id="linkId1">Hide</a>
<div id="divShowHide" style="position:absolute; display: block"><h4>This div will be hidden</h4></div> 

What this code do:

• Link with id=linkId1 and text "Hide" on click call jscript function divToHide


• in div element with id=divShowHide is text "This div will be hidden"


• when link lnikId1 is clicked jscript function divToHide() is called


• jscript function divToHide check if div element divShowHide is hidden or showed


• if div element divShowHide is showed (div.style.display == "block") then div divShowHide is hided and text of link linkId1 is changing to "Show"


• if div element divShowHide is hided then div divShowHide is showed and text of link linkId1 is changing to "Hide"

Reasons The Web Designers Are Preferring CMS Over Other Options

The way web sites are designed has undergone significant changes in recent times, with the trend leaning towards more user friendly, interactive sites with social media integration. The web users now prefer the websites that offer them enhanced interaction facilities and are intuitive in nature. This trend has contributed in a way behind the rise of the CMS based websites. Using a CMS application to design a website helps the website design professionals to create websites that are user friendly, useful and presentable. That explains why CMS apps like WordPress and Joomla have become popular with website design companies.

There are various benefits of using a CMS based app to design a website. First of all, CMS apps make administering and maintaining a web site easier than ever before. Earlier, the web site developers had to spend a lot of time updating and maintaining website designed in conventional method. However, with CMS site administration and maintenance woes have become a thing of the past, literally. In fact, web developers with little HTML expertise can easily make professional looking websites using the CMS apps.

In a CMS based website, the website design professionals can change the template without bothering about the content. This is because content and template updating are two separate processes under CMS. This makes site updating a hassle free affair. Apart from that, website administration is very much flexible with CMS. From anywhere the developers can log in the web and make the modifications in the website. It also saves the developers a lot of time in the process. A number of developers can work on the same website running on CMS from various places which is a significant advantage.

CMS Web design is also ideal for making a website search engine friendly efficiently. It makes generating RSS feeds easier and the users can access these feeds according to their convenience.

For making a CMS based site, a website design company is not likely to run short on creative designs. The top CMS apps come with a huge number of layouts and templates meant for making various types of websites. These layouts can be heavily customized which reduces the chances of a site looking like a replica of another. The CMS apps also have a number of extensions and plug-in which come for free. These can be used by website developers to extend the capabilities significantly and offer more features to the users.

Pankaj has been working as an internet marketing expert in a leading website design company, for the past 2 years. He has also written articles on different topics such as website design, Search Engine Optimization, logo design, graphic design etc.

Show or hide multiple divs

In this tutorial you will learn how to hide multiple div elements with only one action (for example click on button). To hide or show HTML elements javascript is used. Usually for hiding and showing HTML elements, HTML elements are placed in one div tag and this div tag is hided or showed with a help of javascript.

Here you can find two demonstrations:

• how to make one jscript function which can be called from multiple places on web page


• how to hide multiple divs with only one click link

If you didn't find exactly what you need in this article try How to show or hide with jscript tips or javascript effects tutorials.

One javascript function which can be reused to hide multiple divs elements

Demonstration:

show/hide Div A

Div A

show/hide Div B

Div B

Here is a sample of javascript function divHideShow with one parameter - id of div you want to hide or show. This code hide or show divA with click on link show/hide Div A which call a function divHideShow. For link show/hide Div B same function divHideShow is called to hide divB (but with divB parameter).

<script language="javascript">
    function divHideShow(divToHideOrShow) 
    {
        var div = document.getElementById(divToHideOrShow);

        if (div.style.display == "block") 
        {

            div.style.display = "none";
        }
        else 
        {

            div.style.display = "block";
        }

        
    }         
</script>

    <a href="javascript:divHideShow('divA');">show/hide Div A</a>
    <div id="divA" style="position:absolute; display: block"><h4>Div A</h4></div>
    <br />  
    <a href="javascript:divHideShow('divB');">show/hide Div B</a>
    <div id="divB" style="display: block"><h4>Div B</h4></div>

In this example div elements are in two line. Sometimes you could find useful tutorial how to place div elements in one line side by side.

If you want to change text of link when you click on the link to "Show" or "Hide" check Show and hide with javascript summary.

Hide or show multiple divs with only one click

Demonstration

show/hide Div C and Div D

Div C

Div D

Here is a sample of code which hide two div tags with only one click on link show/hide Div C and Div D.

<script language="javascript">
    function divHideShow(divToHideOrShow) 
    {
        var div = document.getElementById(divToHideOrShow);

        if (div.style.display == "block") 
        {
            div.style.display = "none";
        }
        else 
        {
            div.style.display = "block";
        }
      
    }         
</script>

    <a href="javascript:divHideShow('divC');divHideShow('divD');">show/hide Div C and Div D</a>
    <div id="divC" style="position:absolute; display: block"><h4>Div C</h4></div>
    <br />
    <div id="divD" style="display: block"><h4>Div D</h4></div>

If you need to center div elements set margin-right and margin-left to auto.

Make Your Website a Magnet for Search Engine Spiders

After setting up your website, your next goal is to make it visible in search engines so that more people could visit it. But this cannot happen until you have made some modifications to make your website search engine friendly. If no search engine optimization strategies are applied in your site, you have poor chances of getting found on Google, MSN or Bing.

It is however not advisable to design the website based on search engine friendliness. You want it to be friendly both to users and search engines. Putting too much emphasis on search engine optimization could hurt your page rank later on.

Put it in Text

Websites pages need to be in HTML text format so the search engines can index them. Flash files, images and other non-text contents will not be visible to search engine spiders unless they are indexed within the content. So, when using images, be sure to include a written transcript or description so they can be picked up by search engines easily.

Creating Smart Link Structure

When it comes to website pages, it is important to put links within them so search engines can easily navigate on them. When picking a keyword for your links, be sure to use a user friendly description. Aside from benefits of getting indexed quickly, creating quality links also ensure good experience for users.

The Power of ‘alt’ Tags

An image alt tag is basically a keyword or description attached to an image. It is mainly used to tell users as well as the spiders to identify what the image is. While a complete description is not feasible, it will be best to have something in there. It is not necessary to put alt tags in all images but be sure to put one on your primary image such as your logo.

The Role of Keywords in Page Rank

Appropriate usage and placement of keywords in content is the key to effective search engine optimization. Since search engine spiders index and rank pages through keywords, it is important to use the right keywords in the description, URL and content.

It is best to use keywords at least three times on every page. Underlining or bolding of keywords will give spiders hints on which words to attach more importance to. If possible, include keywords on the title as well. Be careful however, not to overuse keywords as this may also have negative effects on your site. Search engine algorithms might identify your site as a spammer and ban you from search engines for good.

Watch Out for Black Hat Search Engine Optimization

Another practice you might want to avoid in search engine optimization is content duplication. Copying the contents of other sites could get your website penalized. Search engines don’t usually show duplicate content anyway. So, why bother taking risks?

Search engines also warn against doorway pages, shadow domains, scumware and spyware. These are not the way to go if you want to reach page one of Google. They may work for awhile but you will eventually get caught and disappear in the face of Google earth.

Making your site accessible for the major search engines is one of the basics of any search engine optimizaton strategy (interesting to know is that the Danish term is søgemaskineoptimering). You can read more useful SEO tips, from this great article.

Hide table row with javascript

Learn how to dynamically hide table row with a help of javascript! In this tutorial there are two samples:

• How to hide or show entire HTML table on the fly


• How to hide or show row in HTML table

To find more helpful javascript effect tutorials follow the link.

Hide HTML table on the fly with javascript

Demo:

show/hide Table

Simple table	Row 1 Column2
Row 2 Column1	Row 2 Column2

With a clik on link "show/hide Table" entire HTML table is hided or showed. When a link is clicked jscript function elementHideShow with parameter simpleTable which is id of table. Then function elementHideShow hide table if table is showed (display property is block) or show table if table is hided (display property of table is none and become block).

Here is a sample code:

<script language="javascript">
    function elementHideShow(elementToHideOrShow) 
    {
        var el = document.getElementById(elementToHideOrShow);
        if (el.style.display == "block") {

            el.style.display = "none";
        }
        else 
        {
            el.style.display = "block";
        }
    }         
</script>

    <a href="javascript:elementHideShow('simpleTable');">show/hide Table</a>
    
    <table style="width:300px; display:block;" id="simpleTable" border="1">
        <tr>
            <td>
                Simple table</td>
            <td>
                Row 1 Column2</td>

        </tr>
        <tr>
            <td>
                Row 2 Column1</td>
            <td>
                Row 2 Column2</td>

        </tr>      
    </table>

Hide table row with javascipt

Demo:

show/hide Row

Simple table	Row 1 Column2
Row 2 Column1	Row 2 Column2

In this case only table row is hided when a link "show/hide Row" is clicked. When use click this link a function elementHideShow is called with a parameter Row2Column1. This parameter is id of row in a table so entire row in HTML is hided (or showed if a row is already hided).

Here is a code:

<script language="javascript">
    function elementHideShow(elementToHideOrShow) 
    {
        var el = document.getElementById(elementToHideOrShow);
        if (el.style.display == "block") {

            el.style.display = "none";
        }
        else 
        {
            el.style.display = "block";
        }
    }         
</script>

    <a href="javascript:elementHideShow('Row2Column1');">show/hide Row 2</a>
    
    <table border="1">
        <tr style="width:300px; display:block;">
            <td style="width:50%" >
                Simple table</td>
            <td>
                Row 1 Column2</td>
        </tr>
        <tr id="Row2Column1" style="width:300px; display:block;">
            <td style="width:50%">
                Row 2 Column1</td>
            <td>
                Row 2 Column2</td>
        </tr>      
    </table>

Give New Heights To Your Web Designing Creativity – Useful Guide For Web Designers

Are you looking for some superb designs or just an inspiration to work on your own design? In this article you will come to know some best creativity works to serve as fuel for your website. In this collection you will come across some excellent work regarding logo designing, web designing, and some useful designing tips. These collections are from different galleries and also the best available over World Wide Web. Have a look and fine one best inspiration for your web designing effort.

Carbon Made Design Stock

This website is an excellent stock for web designers with its more than 174,00 master pieces specifically carrying web designing, and 3D animation background. You will get better insight after visiting this website.

Lemon Flip

This website is carries Slovakian collection of web designing to inspire designers who are involved in making posters, printed material, website designs, and logos.

CSS Mania

This gallery is more inspirational compared to previous one of CSS. This Drive equips designers with amazing color schemes along with a hover box. Designers can also get useful tips and tools for working in CSS environment.

CSS Elite

This gallery also contains CSS work. Designers can explore through different designs in accordance with their own preferences. They will get a variety of designs carrying features of

• • Uniqueness
• • Colorfulness
• • Dark layouts
• • Clean clutter free
• • For blogging websites

Minimalsites

This again is a CSS gallery of designs. These designs are excellent for designers who want to make simple websites with minimal use of CSS.

CSS Remix

Designers will find this website great while looking for best designs obtained after mixing different designs and them reaching the one they were dreaming.

Link Crème

This website has earned a good repute among others providing good websites portfolio. Here designers can find web design made by using Flash technology or CSS.

Design Snack

Here at this website, users categorize web designs of their choice. Therefore, this site provides good collection of best designs as preferred by users. Designers are provided with facility of sorting out web design depending on Flash, HTML, CSS, or by the design category they are looking for like they want to work for music website or for some charity based websites.

Logo Pond

This website provides superb logo designs made by professionally expert web designs. These designs are provided by users that may inspire you if you are looking for something unique.

Logo Sauce

This is another website that displays logo designs. Here the amazing thing is the competition held for users who come up with unique logo designs. There is also prize money for the winner of competition that has a minimal worth of $200. Competitions are held under strict control of site editors.

Logo Design Love

This website carries lots of logo designs to inspire designers for their own work. This website will actually increase your love for logo designing.

Get inspiration from these websites and give a new direction to your creative skills. Your clients will really love your work.

SEO Advice: Effective Site Structure & Content Building

In this article, we discuss two basic issues that effect many websites around the world; website structure and content building.

With more websites on the planet than ever before, finding the right website structure and having an appropriate architecture is paramount to a websites continual success. While it may seem like a common sense issue to have an easy navigation system and good interlinking in a website, many webmasters unfortunately fail to hit the target and although create beautifully well designed websites; these websites can be hard to navigate and hard to serve their given purpose

From Boutique (template) websites to large online databases and commerce sites, having an effective structure and navigation system is imperative.

In the case of small template websites (Boutique Sites) they are typically designed for displaying a companies business details and their core services. Simple in design and functionality, the idea is to direct users to a contact form, subscription page or services listed page by the company straight away.

The focus is on providing a direct targeted approach for the user, in terms of what they are looking to obtain. Each user should be able to find out exactly what there are searching for within one or two clicks.

As most website visitors browse a website homepage quite quickly, there should to be an immediate USP for them to dig deeper into your website. Generally, users will want to find information quickly and clearly without being confused by irrelevant distractions.

When a website visitor has progressed from the homepage, they need to be led to the next page that will either interest them or lead towards a point of action. If there is no such structure or focus, the chances are that the visitor will leave the website shortly after a couple of page views.

Overall, the following tips are recommended for small business websites:


• Ensure that the website is fresh and simple
• Use a standardised set of colours
• Keep the overall style and font standardised
• Try not to over complicate the site with too many graphics

Adding Extra Content to Websites

In general terms of SEO, with one of the core principles being that “content is King,” an average rule of thumb would indicate that the more relevant content you have on your site and the greater number of relevant pages indexed would therefore lead to a greater web presence.

Given the nature of which each company website is made, there are certain limitations to the choice of pages created, the topics / themes of discussion and the amount of content that can be made.

For new and developing websites, it is wise to consider how you could develop your website to x3 its current size. If you have plenty of content, design ideas on hand then you are heading in the right direction. If you are struggling with ways to increase your website size you should re-consider your site structure and its associated content and navigation system.

One simple tip if you are struggling with the current amount of space on your site is to set up sub categories, folders and sub domains as this will allow you as a webmaster to create more defined, targeted content pages to attract particular niches to your website.

5 easy website content building techniques


• Set up a blog
• Have testimonials / Reviews section
• Case studies / Application Stories
• Online Newsletter
• Online Press Releases

Overall, in terms of content building and effective website structure, the core principle of keeping user interest and leading users to a point of action should always be a priority.

By-line: Stephen McAllister is the Marketing Manager at More Control Ltd who specialise in bespoke Automation Solutions and Automation products.

A Writer's Guide to Formatting Blog Posts

Guest post by: Tavis J. Hampton

There is a certain art to writing for the web, and anyone who does it has developed a skill that took time to learn. From mastering search engine optimization (SEO) to understanding image copyright restrictions, one could probably develop an entire course on web writing. Formatting is unfortunately one that sometimes gets overlooked. How you format your blog posts or online articles can affect everything else: SEO, presentation, clarity, and ultimately your reputation as a professional.

The good news is that it is far easier to format web articles now than it was five, ten, or even fifteen years ago. With dynamic websites and content management systems, publishing is a cinch, but there are still possible hiccups along the way that can cost you. This quick guide should help you learn or remember some of the more critical aspects of web formatting.

1. Avoid the direct Microsoft Word copy and paste. If you must use something like Word, turn off your blog's WYSIWYG editor (select HTML in WordPress), and paste directly into the plain text box. Then, switch back to rich text and format the document. Pasting from Google Docs is also much cleaner than pasting from Word, but it does put a DIV tag around the text and also does not preserve bold and italics in the paste, meaning you will still need to do some formatting within your blog's backend.

2. Use an HTML Editor. A simple way to ensure you provide the clearest, unmolested text to your readers is to use an HTML editor from the beginning. Wordpress and other content management systems tend to use XHTML 1.0 or higher for formatting. That means that old HTML 4.0 editors will use deprecated tags for line breaks, images, and other tags. You can avoid this by using an HTML editor like Amaya. As HTML 5 becomes more prevalent, blogging tools may soon adapt.

3. Avoid inline styles and extra code. This point relates to the previous two. Many word processors can format HTML, but they often leave inline styles within paragraph and span tags. First of all, these make the document unnecessarily long, and secondly, they cause problems when you try to edit them within the content management system. If you absolutely cannot use an HTML editor before pasting text into your blog, paste plain text and do all of your formatting within the blog's editor.

4. Include alt attributes for images. For both SEO and accessibility, alt attributes in image tags are important. They describe images to non-visual browsers, both search engines and visually impaired humans. Wordpress and other blogging software include title and alternate text entries. Make them clear and descriptive but not too wordy.

5. Resize images to fit your blog. Some blogging systems will automatically resize to the dimensions you specify, but older systems may only set dimensions in HTML, leaving the actual file size larger than it should be. Furthermore, by resizing in your own image editing program, you can control the amount of compression and also tweak and crop the image. If you intend to show detailed screenshots, consider using thumbnails that will display larger versions of the images upon clicking.

6. Use CSS styles for frequent formatting. If you have a little knowledge of CSS, you can add styles that you know you will use frequently to your WordPress or other blogging CMS template. That way, whenever you need to apply a style, you can use a quick CSS class. many web hosts, such as dedicated hosting provider 34SP.com, will install WordPress for you, but you can still edit the theme's CSS file within the backend's theme editor.

7. Preview before posting. You may think your post is formatted correctly, but it is always better to double check to make sure it looks the way you expect. This is particularly important if you pasted from another editor. Wordpress, for example, removes some code and modifies others, which can sometimes lead to formatting problems.

Formatting your blog can often make or break your article. Text or images that are malformed or incorrectly displayed often turn readers off before they even start to read your work. No matter how good your writing skills are, it is the presentation and appearance that will make the first and often lasting impression.

Tavis J. Hampton is a seasoned writer with a decade of experience in IT, web publishing, and free and open source software. Some of his services include writing, web design, electronic publishing, and information management.

Hide or show div element

Want to learn how to hide div element on your HTML page with javascript? Or how to dynamically show div element? You are on right place. Here you will find simple tutorial, demo and code how to toggle (hide or show) <div> element with its content. With help of javascript div visibility is dynamically changed.

More article and samples how to hide or show HTML element find on Show and hide with javascript summary.
If you are interested in some other fancy javascript effects follow the link.

Demo for hiding and showing div element:

SHOW/HIDE <-- press here

Div is visible

Here is the sample HTML and Javascript code:

<script language="javascript">
    function showOrHide() 
    {
        var div = document.getElementById("showOrHideDiv");
        if (div.style.display == "block") 
        {
            div.style.display = "none";
        }
        else 
        {
            div.style.display = "block";
        }
    } 
</script>
 
<a href="javascript:showOrHide();">show/hide</a>
<div id="showOrHideDiv" style="display: none"><h4>Hello</h4></div>

What is happening in the code:


• When user click SHOW/HIDE link javascript showOrHide() function is called


• Method showOrHide() checks the value of the display style for the div showOrHideDiv


• If the display style of div is none (div is not visible) function will set div style to block - so the div will become visible


• If the display style of div is block (div is visible) function will set div style to none - so the div will be hidden

Demo for div element containing other HTML elements

The <div> tag is often used to group block-elements. You can put any HTML element inside div tag. In this example we put some text and two input HTML element. When user click link both textboxes are hided or showed.

SHOW/HIDE <-- press here

First name:
Last name:

This is a code:

 
<script language="javascript">
    function showOrHide() 
    {
        var div = document.getElementById("showOrHideDiv");
        if (div.style.display == "block") 
        {
            div.style.display = "none";
        }
        else 
        {
            div.style.display = "block";
        }
    }

</script>
<br/>
<a href="javascript:showOrHide();"><b>SHOW/HIDE</b></a> <-- press here
<br/><br/>
<div id="showOrHideDiv" style="display: none">
First name: <input type="text" name="FirstName" value="Donald" /><br />
Last name: <input type="text" name="LastName" value="Duck" /><br />
</div>

Purpose of this example is to demonstrate that in div tag can be many various HTML elements. So, when you hide div tag you hide all HTML element this div tag is contain. Same thing count for showing div.

If you want to change text of your link to Show or Hide when div tag is showed or hided take a look at change link text with javascript.

Demo of one javascript function for hiding various div elements

show/hide Div A	show/hide Div B
Div A	Div B

Here is a code of reusable javascript function divHideShow for hide div elements. This function can be called from various places. The input parameter in function divHideShow is id of <div> tag you want to hide or show.

<script language="javascript">

    function divHideShow(divToHideOrShow) 
    {
        var div = document.getElementById(divToHideOrShow);
        if (div.style.display == "block") {
            div.style.display = "none";
        }
        else {
            div.style.display = "block";
        }
    }
    
</script>
 

    <table style="width: 28%; height: 54px;">
        <tr>
            <td>
                <a href="javascript:divHideShow('divA');">hide DivA</a>
                </td>
            <td>
                <a href="javascript:divHideShow('divB');">hide DivB</a></td>
        </tr>
        <tr>
            <td>
                <div id="divA" style="display: block"><h4>Div A</h4></div></td>
            <td>
                <div id="divB" style="display: block"><h4>Div B</h4></div></td>
        </tr>
    </table>

In above code example same jscript function divHideShow(divToHideOrShow) is called from show/hide Div A link and from show/hide Div B.

One more thing, if you need here you can find instructions how to place two div elements in one line side by side.