Where to Find Experts on Javascript On the Web?

To build a basic webpage, you need to know HTML. To make your webpage beautiful, you may use CSS. Two good online HTML resources are w3schools.com/html/default.asp and pageresource.com/html.
On W3schools, you can also learn CSS at w3schools.com/css/css_intro.asp.

If you want to make your site even more fancy, you may need to use Javascript.

Javascript is a scripting language which can help you create a variety of effects on a webpage and make your webpage more interactive.
When building your own website, you may use Javascript. If you have Javascript questions,
you can find experst on the web. They may help you to solve your problem. One place to meet
Javascript experts online is a forum at www.webxpertz.net/forums.

In addition, http://www.javascriptkit.com/ is a site where you can find Javascript tutorials.

46 Useful HTML and CSS Online Resources

http://www.htmlandcssbook.com/code/
On this webpage, you can find the code examples shown in the book:
HTML&CSS Design and Build Websites.

http://www.osflv.com/
http://www.longtailvideo.com/
On these two websites, you will find flash players to play FLV files.

http://soundcloud.com/
http://www.myspace.com/
On these two sites, you can host your audio files.

http://flash-mp3-player.net/
http://musicplayer.sourceforge.net/
http://www.wimpyplayer.com/
These 3 websites are for people who need a free flash MP3 player for their websites.

http://www.browsercam.com/
https://browserlab.adobe.com
http://browsershots.org/
http://crossbrowsertesting.com/
These 4 websites allow you to see how your website looks like in different web browsers.

http://positioniseverything.net/
http://quirksmode.org/
These websites may have solutions for your CSS bug.

http://colorschemedesigner.com/
This site provides an color picking tool.

http://www.fontsquirrel.com/
http://www.fontex.org/
http://openfontlibrary.org/
www.google.com/webfonts
They have open source free fonts.

https://typekit.com/
http://www.fontspring.com/
These are online places where you can find paid commercial fonts.

www.fontsquirrel.com/fontface/generator
This tool can convert your font into different font formats for different web browsers.

http://formalize.me/
If you want to have your forms look consistent across web browsers, you can download
the CSS files from this website.

http://chrispederick.com/work/web-developer/
On this site, you will find a web developer toolbar for Firefox and Chrome. Using this toolbar, you
can easily find out the CSS styles that apply to a web element.

http://960.gs/
This site is for the famous 960 CSS framework. They have two types of grid: 12 column grid and 16 column grid.
You can download the style sheet and use it on your HTML site.

http://blueprintcss.org/
http://lessframework.com/
http://developer.yahoo.com/yui/grids/
On these websites, you will find several grid-based CSS framework.

adwords.google.co.uk
www.wordtracker.com
www.keyworddiscovery.com
These 3 websites are for keyword research.

filezilla.project.org
fireftp.mozdev.org
cuteftp.com
smartftp.com
panic.com/transmit
You can find FTP applications on these 5 sites.

wordpress.com
tumblr.com
Posterous.com
These sites provide services to host your blog.

shopify.com
bigcartel.com
go.magento.com
These sites have tools for your e-commerce sites.

Campaignmonitor.com
mailchimp.com
These sites are for your email newsletters needs.

addthis.com
addtoany.com
If you want to add social networks buttons on your site, you can check out these two websites.



All the websites listed above may not be the best one for the purpose. But I would like to check them out when I have chances.

How to Add Comments in HTML Code

The HTML code used for a webpage can be very long. In order to easily remember the purpose of each line of code, you should add comments in HTML code. There are many benefits to adding comments in HTML file. It can not only remind the webpage creator the function of the commented code, but it is also beneficial to readers who view the webpage source code.

How to Add Comments in HTML Code

To add a comment in HTML, you need to use <!--add your comment-->.
What you have to do is just insert this line into the code and replace "add your comment" with your real comment.

The content inside the <!-- --> tags will not be executed by web browser. That is why you cannot see comments on the web browser. If you want to view comments, you have view the webpage source code.

The invisible property of <!-- --> gives it a useful function. You can not only use it to add comments, you can also use it to comment out some HTML code that you don't want the web browser to execute. For instance, sometimes you don't want the browser to execute some HTML code but you don't want to permanently remove them from your file. What you can do is to add them into the <!-- --> and make them something like <!-- HTML code example-->.

Overall it is very easy to add comments in HTML code. And it is a good habit as well.

How to Find Out the Version of HTML on a Web Page

There are several versions of HTML. All of them can be used to code a web page. Two web pages that are displayed similarly on a web browser may be created using different versions of HTML. But before a web browser can display a webpage, the browser must know the version of HTML code used on the page. It is also beneficial for the webpage developer to know the HTML version before they can modify the code.

How to Find Out the Version of HTML on a Web Page

It is a very simple task. What you need to do is just to view the source code of the webpage that you are interested in. Then you need to pay attention to the <!DOCTYPE> at the beginning of the source code.

In general, there are 5 types of HTML commonly seen : HTML5, HTML4, XML, Strict XHTML 1.0 and Transitional XHTML 1.0. Different versions of HTML should be shown in the <!DOCTYPE> correspondingly. For instance, if the file is written in XML, you will find the line <?xml version="1.0" ?> in the source code. If it is using HTML5, you will see <!DOCTYPE html> instead.

So in order to change a webpage content or format properly, you have to know the version of HTML the webpage is using. Most web browsers are compatible with old versions of HTML. Newer versions of HTML like HTML5 may not be handled properly on all browsers. But fortunately all the browsers are constantly updated and the latest versions should be capable of handling the new HTML versions. As a result in the near future the old versions of HTML
will be phased out. That is why in order to build a free website now, you should learn to use HTML5 and stop using old HTML code.

How to Make Tables Using HTML Code

To display data clearly on your website, you need to use tables. Usually a table contains multiple rows and multiple columns. When drawing a table using HTML code, you have to draw the table row by row, and not column by column.

The HTML elements commonly used for creating tables are

<table></table>
<tr></tr>
<td></td>

The <table> element is for making a table.
The <tr> is for making a row inside a table.
The <td> is for making a cell inside a row.

Here is an example of HTML code for creating a simple table.

<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<td>C</td>
<td>D</td>
<tr>
</tr>
</table>

You can also use HTML code to build fancy-looking tables. Let me show you some example below.

To make a table with headings, you need to use the <th></th> element. The use of the <th> element is similar to that of the <td> element. You have to use it inside the <tr> element. In order to show whether the heading is meant for the row or for the column, you have to use the scope attribute with the <th> element. If the value of the scope attribute is col, it is for the column; if it is row, it is for the row. See the example below.

<table>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
</tr>
<tr>
<th>Price</th>
<td>$10</td>
<td>$15</td>
</tr>
<tr>
<th>Total</th>
<td>$20</td>
<td>$25</td>
</tr>
</table>

Tip: If the cell is empty, you still have to use either <td></td> or <th></th>, but you just leave the content blank as shown in the example above.

If you need to create a table containing cells spanning multiple rows or columns, you can use the colspan or rowspan attribute with the <th> or the <td> element.
For example, colspan="2" means the cell spanning 2 columns; rowspan="3" means the cell spanning 3 rows.

To make a very long table, you need to use <thead></thead>, <tbody></tbody> and <tfoot></tfoot> elements to divide your table into header, body and footer sections. Let us see an example.

<table>
<thead>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
</tr>
</thead>
<tbody>
<tr>
<th>Price 1</th>
<td>$10</td>
<td>$15</td>
</tr>
<tr>
<th>price 2</th>
<td>$20</td>
<td>$25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>$30</td>
<td>$40</td>
</tr>
</tfoot>
</table>

You can also use attributes like bgcolor, width, cellpadding, cell spacing to control the format of the table. However, it is more efficient to control your site's appearance using CSS than HTML attributes. So when building your website, you should avoid using these attributes. Instead, you should use CSS to control the appearance of any element on your site.

How to Associate a Caption with an Image in HTML5

Images can make your website more attractive. A caption can explain what you want to show on the image. That is why it is a good idea to associate a caption with the corresponding image on your website or blog. Here, I show you how to use HTML5 code to achieve this.

In HTML5, there are two new HTML elements introduced. One is <figure></figure>, and the other is <figcaption></figcaption>. With these new HTML5 elements, you can easily add a caption to one image or a group of images grouped into one figure.

How to add a figure caption to a figure in HTML5

First, you need to add the <figure></figure> element to your file.
Second, inside this <figure> element, you can add the <img src> element to include your image, use <br/> to break and then add the figure caption using <figcaption></figcaption>.

Let me give you an example. I think after taking a look of the example code, you can figure things out by yourself.

<figure>
<img src="your image link" alt="image alt text">
<br/>
<figcaption> figure caption</figcaption>
</figure>

A final thing that I want to mention here is that you can use more than one images in a figure. And the figure caption should be associated with the whole figure instead of individual images inside the figure. In other words, one figure can only have one caption, but one figure can contain multiple images.

6 Free Image Hosting Websites

There are many reasons to use free image hosting websites. For instance, you can upload your favorite image to these sites, and use it as your avatar on web 2.0 sites or online forums.
If you are an ebay seller, you can also store your products' photos on free image hosting sites and then load these photos to your ebay store. If you have your own free website on free website hosting sites, you can add a photo gallery that you created on image hosting sites to your websites. In short, there are many ways to enjoy free image hosting services. Here I made a list of free image hosting websites. Hopefully you will find some of them useful.

6 Free Image Hosting Websites

http://alkaspace.com
With the free plan, users will get 50 MB storage space, and 500MB bandwidth per month.
Alkaspace will add their watermark on your images and web pages. They provide tools for users to create image portfolios, slideshows and image galleries. If you are an eBay seller, you will find alkaspace.com quite useful. Alkaspace also provides paid plans to meet your professional image hosting needs.

http://inselpix.com/
Inselpix.com is a website offering free photo hosting services. No matter if you want to use images on social network websites like Twitter or Facebook, or use images for auction sites like ebay, you can host your images absolutely free on inselpix.com.They allow 1 account per person. If you want advanced features such as unlimited storage capacity or unlimited bandwidth, you can pay money to upgrade to a premium account.

http://www.freeimagehosting.net/
Need an affordable image hosting service to host your blog photos online? If so, you may want to try freeimagehosting.net. The free photo hosting service offered on freeimagehosting.net will help you share your photos online with your friends and family easily. You can also use their site to host your Ebay auction photos. Multiple file formats are allowed including gif, jpg, bmp and png. For free users, they limit the file size to 3 MB per file.

http://www.imagevenue.com/
Imagevenue.com is a free image host site. On this site, you can upload your images to use on eBay like auctions sites, message boards, and your own blogs or websites without registering an account. They support two types of images: jpg and jpeg. You can store your images on imagevenue as long as you want. You can also get unlimited bandwidth. But the maximum file size that you can upload to their site is 3 MB. To load a large number of images, you can try their bulk uploader.

http://www.imageshack.us/
Imageshack.us is a website where you can store your images or video online for free of charge.They support multiple formats of images and videos. They limit 500 files per free account. If you need unlimited storage, you have to upgrade to a paid customer.
The maximum file size for image is 5 MB and the maximum file size for video is 15 minutes.

http://photobucket.com/
Photobucket.com is the one the more famous free media hosting website. You can store your photos or videos on photobucket.com. Now free members can get unlimited photo uploading. When signing up, you have the option to use your Twitter account or Facebook account.

How to Turn Images into Videos Easily

It is a lot of fun to turn your images into videos. During the process, you can be very creative and make your photo presentation more vivid. Here I am going to tell several tools that you can use to make videos from your images or photos.

These software is for people who want to know how to turn images into videos easily.

PhotoShow.com
On this photoshow site, you can join as a free member and use their free tools to turn your photos into slideshow. They will provide limited number of themes and allow you to insert music to your show. If you want to enjoy more features, you can pay money and upgrade to become a pro member.

SlideRoll.com
Upload your images to slideroll.com and use their slideshow creator to create your own slideshows. On this site, both free and paid membership accounts are available. You can start as a free member and give it a try.

You may also like: Free screen recording software.

Picasa http://picasa.google.com/
Many people may have already know that Picasa is a free image editing software, but do you know you can also use it to turn your photos into videos?

Windows Movie Maker
Windows movie maker is a default program installed in your Windows XP and Windows Vista system. This program allows you to create a video clip by dragging a stack of photos, add transitions and integrating sounds.

Microsoft Photostory
This is the best program in this category for people using Windows XP. It can help you create a video clip from your images.

If you use the correct image or video editing tool, it is really not that hard to convert your photos or images in to videos.

19 Free Screen Recording Software | Make a Video Tutorial Easily

One way to keep your visitors on your site longer is to add a video clip on your site. You can want to know how to make a video tutorial. You can shoot videos using your camcorder, but that will take a lot of time and sometimes that quality of the video is not high. The easy way to create a video tutorial is to use a screen capture software, also known as screen recording software.

What is the best screencast software available on the market?
I can tell you that many people recommend Camtasia, a product brought to you by Techsmith. But here I am not going to talk about Camtasia, because it is not a free software. If you want to use it, you have to pay $299 to buy it.

What is the free screen recording software alternative to Camtasia Studio?
There are open source free screen recording software that can serve similar function as Camtasia, even though the free ones may not be as powerful as the professional version. But for your casual use, the free screen capture software should be good enough. You can download them and install on your computer, record what you see on your computer, save and share it with your friends or family.

Jing
The first one I want to mention here is Jing that is a free version screen capture software also developed by Techsmith, the developer of Camtasia. Here is their official website: http://www.techsmith.com/jing.html. You can use Jing to take screenshot or screencast. It is both PC and Mac compatible, so both PC and Mac users will like it. But one caveat for Jing is that you can only use it to create maximum 5 min video clip. If you want to record a long video episode, I am afraid that Jing is not good enough for you.

Wink
Wink is another freeware that can help you capture screen shots and make tutorials, particularly if you want to show other people how to use a software. Right Wink can only be used on Windows and Linux systems. If you are a Mac user, this one is not for you. Here is the site to learn more about Wink: http://www.debugmode.com/wink/ .

Also check out Free Video Editing Software.
CamStudio
CamStudio is the best available free screencast software alternative to Camtasia in my humble opinion. It can not only save your video in format AVI format, but also allows you to convert it to SWFs that is a bandwidth-friendly format. To learn all the features offered by CamStudio, visit http://camstudio.org/.

So with these free screencast software, you can easily make demonstrations or how tutorials on your computer. You can turn your images or photos into video shows easily. Check them out, when you need them.

Tip:
Some of these software may not be good at recording sound. If you need to record sound at better quality, consider use Audacity, a free audio editor and recorder with the screen capture applications.

Update:
For me, Camstudio is good enough. But if you like to compare more free screencasting programs before making your final decision, you may find the list below useful.
List of related free screen recording tools:
http://www.screencast-o-matic.com/
http://taksi.sourceforge.net/
https://github.com/nullkey/glc
http://recordmydesktop.sourceforge.net/about.php
https://launchpad.net/kazam
http://www.uvnc.com/screenrecorder/index.html
http://xvidcap.sourceforge.net/
http://www.microsoft.com/expression/products/EncoderPro_Overview.aspx
http://www.virtualdub.org/
http://ffmpeg.mplayerhq.hu/index.html
http://www.hyperionics.com/hc/
http://www.smallvideosoft.com/download.php
http://www.nbxsoft.com/screen-recorder.php
http://www.unixuser.org/~euske/vnc2swf/pyvnc2swf.html
http://live.gnome.org/Istanbul
http://www.tortall.net/mu/wiki/Cankiri

What is the Difference between Vector Images and Bitmap Images

Three types of images that are commonly used on websites are JPEG, GIF and PNG. All of them are belong to the bitmap images. But sometimes we also need to use vector images on our sites. For example, we may use vector images to create illustrations or logos. Many people may want to know: what is the difference between vector images and bitmap images.

They are quite different to each other. Vector images are resolution-independent, therefore you can increase the size of a vector image without affecting its quality. Bitmap images, composing tons of small squares, are resolution-dependent. When increase the size of a bitmap image, you may decrease its quality.

To show a vector image on your site, you can save it into a format known as SVG that stands for scalable vector graphics. Alternatively, you can save a vector image as a bitmap image and then display on your site.

If you need to design a logo for your website by creating a vector image, you can use Adobe illustrator.

4 Online Image Editors | Photo Editing Online

To get your job done, you need the powerful tools. To make sure your images are displayed at the correct size, format and resolution, you need to use good image-editing software. Previously we have mentioned several free image-editing software. But most of them are desktop applications, and it means that you have to download and install them on your computer before using them. Here I will tell you 4 online image editors. With these photo editors, you can edit your photos online from any computer with an Internet connection.

www.photoshop.com
On photoshop.com, users can add it organized and share photos on the web. But before you in July always the free benefits of this site, you need to get the Adobe ID by creating an account on the website. By signing up a free account, you can get 2 GB storage capacity to store you images online for free. They also allow you to store videos on the site. Most importantly by becoming a member of the site, you gain the access to all their online photo editing tools to create and share your work.

www.pixlr.com
On pixlr.com, visitors can enjoy the free online photo editing services provided. To use the pixlr editor, you don't need to create and login to your account on the site. You can directly use it by creating a new image or uploading an existing imager from your computer or from a web page. But if you want to load the major from the pixlr gallery, you need to log into your account the first. It is one of the most of popular online photo editing sites.

www.splashup.com
Splashup is another good online image editing tool, and it is also free. The splashup editor comes with many powerful features, and it allows you to work on several images at the same time. You don't need to log into your account to use this free photo editing tool.

www.ipiccy.com
Ipiccy.com is another website offering online free photo editors Internet users. Similar to pixlr and splashup, they don’t require visitors to register to use their editor. Now ipiccy is still in Beta version.

If you want to do some photo editing online, you can try these online image editing sites.If you are a professional web designer and need a professional software for your project, you may consider paid software like Adobe Photoshop, Adobe fireworks, pixelmator and paintshop Pro. If the full version of Photoshop is too expensive for you, you can try their cheaper alternative: Photoshop elements.

HTML Code for Adding Images to Your Website

Sometimes an image is better than 1000 words. Believe it or not, images can make your website looks better. So it is a good idea to add images to your website. Here you will learn what HTML code you need for adding images to your site.

HTML code for adding images to your website

The element you need here is <img>. It is an open HTML element, which means you don’t need to close it.

When adding images to your site, you also need to let the web browser know where to find them, and let the search engines know what the images are about. To make sure the images are displayed in the way you like, you also need to specify their sizes and alignments. These are the reasons why you need to use several attributes with the <img> HTML tag.

The attribute src can help you define the pathway where the image is located.

The alt attribute should be used when you try to describe the image. By using alt text, you can make your image more search engine friendly and vision-impaired people friendly.

If you want your visitors to learn more information about the image, you can use the title attribute. The title text will be shown on the screen when your visitors use mouse to hover over the image.

To specify the size of an image, you should use “height” and “width”. But if you use CSS on your site, you’d better adjust your image size using CSS instead of HTML, because it is more convenient.

When defining how the image should be displayed relative to its surrounding text, you need to use the align attribute. But the align attribute is phased out in HTML5. In HTML5, you need to use CSS to do the task.

Tip:
You can also use <hr /> to add a line in between of two images.

To increase the performance of images on your site, you need to use images in correct format, correct size and at correct resolution. Usually we use jpeg, png and gif image format. You should save the image at the same size as it is shown on your site. To make sure your image shown properly, you have to save it at least at 72 pixels per inch resolution, because it is the resolution for most computer screens. Of course to get better effects on high definition monitors, you need higher resolution. But higher resolution means larger file and longer download time.

HTML Code for Linking to a Specific Part of a Web Page

When designing a website, you should make the navigation on the site easy. When writing a long article for your site, you may start with a brief introduction summarizing what you are going to say in the article. You may list your post subtitles into bulletin points and link them to the corresponding parts of your content correspondingly. Here I am going to show you how to link to a specific part of a web page using HTML code.

HTML code for linking to a specific part of a web page
First, let us see how to link to a specific part of the same webpage.
You need to do two things: identify the part that you want to link to by using the id attribute and link to the part by using the href attribute starting with the symbol #.
Let me show you an example:
<a href=”#sub_title1”>Sub-title 1</a>
<a href=”#sub_title2”>Sub-title 2</a>
<h2 id=”sub_title1”>Sub-title 1</h2>
<p>Here is the content of the first section.</p>
<h2 id=”sub_title2”>Sub-title 2</h2>
<p>Here is the content of the second section.</p>


Second, let us see how to link to a specific part of another webpage.
It is simple. What you need to do is just to identify the part on the webpage that you want to link to using the id attribute, and add the webpage’s url in the href attribute right before the symbol #. For example, you identify a part on yourdomain.com using id=”top”, and when linking to it, you need to use href=”http://yourdomain.com/#top” in the element.

How to Link an Email Address to Text Using HTML code

When you want to leave your email address on a website, but you don’t want to post your email directly onto the site, you can link your email address with some text. For instance, you can say: “contact me by email” and then add your email as a link to the text. When someone clicks on the link, his email program will pop up and your email will be inserted into the address line.

How to link an email address to text using HTML code

What you need for this purpose is to use <a></a> element and the href attribute.

Let me give you an example.

Here is the HTML code:
<a href=”mailto:yourname@yoursite.com”>contact by email</a>

And here is the result:
contact by email

You just need to replace yourname@yoursite.com with your real email. Of course, you can change the text to whatever you like.

How to Format a List of Definitions Using HTML Tags

Sometimes when writing an article online, you may need to display a definition list of terms. To show the list clearly, you should format it properly. Here I am going to show you how to format a list of definitions using HTML tags.

The HTML tags that you need are <dl></dl>, <dt></dt> and <dd></dd>.

The <dl></dl> tag is for the definition list containing terms and corresponding definitions.

The <dt></dt> tag is for the term.

The <dd></dd> tag is for the definition.

Let me give you an example.
Here are the original HTML codes:
<dl>
<dt>black</dt>
<dd>It is a color.</dd>
<dt>red</dt>
<dd>It is another color.</dd>
</dl>
Here is the result:

black

It is a color.

red

It is another color.

Now you know what HTML tags to use when building a definition list on your site next time.

For your information, there are 3 types of list that can be shown using HTML tags. The definition list that is used to define terminology is just one of them. The other two are ordered list (using <ol></ol>and <li></li> tags) and unordered list (using<ul></ul>and <li></li> tags). And you should also know that these lists can be included in one another.

How to Remove Blog Name from Post Title on Blogger Templates

Blogger.com is a website where you can build a website for free. After creating your first blog and publishing your posts, you find there is no much search engine traffic to your blog. There are many reasons for your problem. One of them is that your blog post titles are not displayed in attractive ways on the result page of search engines. Usually you want to show your post title only, but the default blogger templates are set to show both your blog name and your post title. The question is “How can you remove the blog name from your blog post titles?”

How to remove blog name from your post title on blogger templates

Login to your blogger account and view your blog;

Click on the link “design” located on the top right corner of your blog;

On the design page, you will see the link “edit HTML” on the top left and click it;

On the next page, you will see the “edit template” window containing all the XML codes for your blogger template;

Use the search function “Ctrl + F” to find the line: <title><data:blog.title/></title>

And replace it with the following XML codes:
<b:if cond='data:blog.pageType == &quot;index &quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pagename/></title>
</b:if>

Click on the “save template” to save the change you have made.

If the above code doesn't work, use following code please.
My update:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Tip:
Before making the change, you should backup your original template first.
Before saving the change, you may want to use the preview function to see whether you XML codes can be implemented.

To confirm whether your blog name has been removed from your blog post title, you can check the title displayed on the top left corner of your web browser or you can run a quick search in Google or Bing.

Happy blogging!

5 Tips for Using HTML Tags | Several Basic HTML Elements that You Must Know

You may already know how to use <b></b> and <i></i> HTML tags. But actually you want to some elements shown in bold, you can also use <strong></strong> tag. The <strong></strong> tag is just to show the content strong important. Similarly, if you want to show content in italic, you can also use <em></em> tag. By using this emphasis element, you can slightly change the meaning of the sentence.

To make quotations, you may need <blockquote></blockquote> and <q></q> tags. What is the difference between <blockquote></blockquote> and <q></q> tags? The first one is for long quotes and the second one is for short quotes. If you want to show where the quote comes from, you can use “cite” attribute with these two tags.

Many people may want to know how to show a book title using HTML elements? What you need is <cite></cite> tag, and the book title will be shown in italic.

If you want to define a phrase in your article, you need to use <dfn></dfn> tag. But you only need to use it when you make the definition the first time.

Sometimes you may want to display some text with a line through the center. For instance, you may want to cross out the old price but you don’t want to completely delete it. At situation like this, you need to use <s></s> tag.

How to Display HTML Tags on a Web Page

HTML Tags are used to write web pages. Usually after a HTML tag added on your web page, it will be executed. But at some special occasions, you may want the HTML tag code is shown as it is in a text editor. For instance, when you write a HTML tutorial online, you may need to show examples about how to use HTML tags by showing the original HTML codes. Here I am going to show you several ways to display HTML codes on your web page.

How to display HTML tags on a webpage
1. Use <pre></pre> tag. The HTML <pre> tag is used to define preformatted text. And it is also used for displaying some kind of computer code. Let me give you an example. If you want to show how to show text in bold using HTML <b> tag, you can show the original code as <pre><b>text</b></pre>.

2. Similarly, the <xmp></xmp> tag and the <textarea></textarea> may also do the job.

3. Another way to display HTML code on a webpage is to convert the < into &lt; and > into &gt;. If you need to convert a lot of code, you can use the find and replace function in the text editor or use online free HTML code converter.

So, it is not difficult to display HTML tags on a web page. What you need to do is just to use correct tools and do it in a correct way.

How to Track Your Website Visitors | Free Tools

After building, testing and promoting your new website, you now have to face another issue: tracking your website traffics. Have you wondered how many visitors your website has and where they are from? To answer these questions, you need to actively monitor your website traffics. There are many advantages to do website analytics. By collecting your site traffic data, you will gain more information about your site’s audience. The more you know your audience, the better you will serve them better in the future.

Usually your web server should have features for basic web analytics. If they are not available to you for some reason, you can use some third party service to get the job done. For example, I found Google Analytics (www.google.com/analytics/) is a free and nice tool for analyzing websites. To use Google Analytics, you have to create a free account on their site. After logging into your account, you can add your site, generate a tracking code, and add the tracking code to your website. After the code has been successfully installed, your website traffic data will be collected and shown as a report in your Google Analytics account. With this service, you can easily know how many people have visited your site, where they are located, how they came to your site and what kind of web browser they used to access your website.

If for some reason that you don’t want to use the Google Analytics service, you may try the following services instead:
Piwik
http://piwik.org/
Clicky
www.clicky.com/
MyBlogLog
www.mybloglog.com/

You may need to pay to access their full services but their basic features are free to use.

There are more and more web analytics sites offering free services. If you need free tools to keep tracking your site, you should try several of them and find the best one to fit your needs.

A Website Testing Checklist: 7 Things to Check before Launching Your Site

Usually it takes hours to set up a new website. Before inviting your friends to visit your site, you’d better test your website for errors.

What should you test on your site? Here is my website testing checklist.
1.Test HTML and/or markup languages and scripts.
2.Test browser compatibility.
3.Check the content on your site: spelling, grammar, text and graphics display.
4.Check the functionality of your site, particularly the links including internal links, external links and emails. Make sure there are no 404 errors.
5.Test website navigation.
6.Test your website to see whether the web design is consistent.
7.Test your website security. For more information you can visit the following sites:
www.owasp.org,
www.w3.org/security/faq
www.w3.org/security/security-resource

If you need tools to test your website automatically, you may want to visit http://uitest.com/ where you will find a set of website testing tools.

When testing your site’s accessibility, you want to make sure that it is accessible not only to regular people using regular computers but also to handicapped people and people using mobile devices.

How to Test a Website’s Browser Compatibility Online

Before launching your website, you have to test whether your new site can be displayed correctly in most popular web browsers such as Internet Explorer, Firefox, Chrome, Safari, Opera and Flock.

One way to test your website’s browser compatibility is to install all the latest versions of these browsers and open your site in them one by one. But it is going to take you a lot of time.

The other way is to run the test online, which will save you time and effort. One website that I find useful for the browser compatibility test is http://browsershots.org/. On this site, you can test your website on major browsers. They list the web browsers’ name and version under their operating systems including Linux, Windows, Mac and BSD. The list is pretty long, but you really don’t need to test all of them. You can make your own choices by your needs.

Similar to the markup validator on W3.org, the BrowerShots is also a free tool for testing your website.

Check HTML Code Online: A Free Tool for Testing Your Website

Before launching your new website, you should run a thorough test on your site to see whether there are errors. You want to make sure that all the text, graphics, links and HTML codes are correct on your site.

To check HTML code online, you can use a free tool provided by W3C at http://validator.w3.org/. This markup validation service allows you to check the markup of web documents online. It is free and easy to use. What you need to do is just go to their site, choose the validate methods, and validate your document online. For instance, when using validate by URL, you need to put in your web address. If you don’t have a URL yet, you can validate HTML codes by uploading the file or pasting your markup directly on the site. This markup checking tool can be used to validate not only HTML but also other languages such as XHTML, SML, and so on.

If the report returned on http://validator.w3.org/ showed some errors or warnings, you can make changes correspondingly on your site. After making big changes to your site, you can run the markup test again on the same website. After repeating this process several times, you will make your site better for sure.

Besides, HTML Tidy (www.w3.org/People/Raggett/tidy/)is another useful tool for checking HTML codes. You can also find an online version of HTML Tidy at http://infohound.net/tidy/.

How to Detect Mobile Browser and Redirect the Traffic to Your Mobile Website

Nowadays more and more people use mobile devices to access internet. To make these people’s life easy, you may consider having a mobile version of your website. When your website is opened in a mobile browser, the mobile traffic will be automatically redirected to your mobile website. To achieve this goal, you may need to add a script on your site.

How to detect mobile browser and redirect the traffic to your mobile website
In the article How to redirect mobile phones and handhelds to your mobile website, Ross Dunn gave your several options for mobile browser detection. For instance, you can employ a PHP script for the mobile traffic detection and redirection.

Here is another article which might be useful for your research on this topic:
Detecting Mobile Browsers

3 Free Video Editing Software You Should Know

To build a website, you need good content. Web content includes not only articles but also images, audio and/or video clips. If you want to make a video clip and put it onto your site to impress your visitor, you may need video editing software for your job.

Here is a list of free video editing software:
Avidemux
Avidemux can handle many simple video editing tasks such as cutting, encoding and filtering. This free video editor supports many video formats and is compatible with many operating systems such as Mac OS X, Windows, Linux and so on.
http://fixounet.free.fr/avidemux/

Blender
If you are looking for a free tool for 3D content creation, Blender might be what you need. This freeware is under the GNU General Public License and works on major operating systems.
http://www.blender.org/

Cinelerra
For people who are using Linux, they may also try Cinelerra, an open source non-linear video editor.
http://cinelerra.org

4 Free Image Editor Software You Don't Want to Miss

Graphics can make your website vivid. To make a beautiful website, you may need image editor software.

Here is a list of free image editing software:
Gimp
http://www.gimp.org/
Gimp is the most popular graphic editor available nowadays. It supports many languages and works on several operating systems including Windows, Mac and Linux.

Inkscape
http://inkscape.org/
If you are looking for a free alternative for Coredraw or Xara X, you may like to know Inkscape. It is a versatile image editor compatible on operating systems like Windows, Mac and Linux.

Paint.Net
http://www.getpaint.net/
If you are a PC user, here is another free graphic editor for you: Paint.Net. Currently they don’t have a Mac version.
If you want to know whether Pain.Net is as good as Adobe Photoshop, Corel Paint Shop Pro or Gimp, you have to give it try by yourself.

Seashore
http://seashore.sourceforge.net/
For people who are looking for an open source image editor to use on Mac OS X, they may be glad to know Seashore, a free image editor coming with many great features.

4 Free File Transfer Software for Mac | FTP Applications You Have to Know

When building a website, you need to transfer files from your local computer to a web server. That is why you need file transfer software to perform this task.

The most famous free FTP solution is FileZilla, which works on Windows, Linux and Mac.
Here is the link to download FileZilla: http://filezilla-project.org/

In addition, there are several other free file transfer software for Mac, including Fetch, Cyberduck and OneButton FTP. If you are interested in any of them, you may want to learn more by visiting their websites listed below.

Fetch
http://fetchsoftworks.com/

Cyberduck
http://cyberduck.ch/

OneButton FTP
http://onebutton.org/

The last one I want to mention here is Net2ftp, a web-based ftp client. If you want to try their service or want to learn more features of Net2ftp, pay a visit to http://www.net2ftp.com/.

Best 3 Free Text Editors: HTML Editing

Notepad ++
Notepad ++ is a Notepad alternative and a free source code text editor. It supports multiple languages. You can use it on Windows. If you need a free text editor for HTML editing or web code editing, try it. To learn more visit http://notepad-plus-plus.org/

TextWrangler
TextWrangler is a HTML and text editor for Mac users. If you want to download it and give it a try, here is their link: http://www.barebones.com/products/textwrangler/

XEmacs
XEmacs is another open source text editor, and it compatible with the following operating systems: Windows, Linux and UNIX. To find out more about this free text editor, visit www.xemacs.org/index.html.

3 Free WYSIWYG Editors for Building Websites

Do you need to pay to use WYSIWYG editors for your HTML editing tasks? The answer is no.
There are several open source software available and you can use them for free. If you want to support them, you can make some donation but it is optional.

Let me tell you several free WYSIWYG editors that you can use to create your own website.

KompoZer
Compatible operating systems: Windows, Mac, Linux
The official website: www.kompozer.net

Bluefish
Bluefish is for Windows, Mac and Linux.
The official web site: http://bluefish.openoffice.nl

OpenLaszlo
OpenLaszle can be used on Windows, Mac and Linux.
Their website: www.openlaszlo.org

update:
If you want to buy a HTML editor, Adobe Dreamweaver and Softpress Freeway are two candidates.

How to Make Web Badges (Buttons) Easily

You built a website, and you want other people to link to your site. Then you may need a web badge or a web button for your site.

How to make a web button easily
If you only need a very simple button, you can use the online free button generator: the brilliant button maker (80X15).

If you want to learn more, you can check the tutorial for making web badges.
Here is the link: http://www.zwahlendesign.ch/en...

6 Firefox Web Browser Add-On for Web Development

One reason I like using Firefox web browser is that it has a lot of useful extensions. These add-ons have different functions. You can make your choice according to your needs. For instance, if you are building a website or you are interested in learning what codes are used on other people’s websites, you may find a handy Firefox add-on in the Web Development section.
Here is the link:
https://addons.mozilla.org/...

Here are several add-ons recommended:

Web developer

Firebug
With the Firebug add-on, you can view a web page and its source at the same time.

IE tab
If you want to see how a web page is displayed in Internet Explorer and Firefox browser, you may need this IE Tab extension.

ColorZilla
Are you curious to know what colors are used on a web page? You will get your answer with the ColorZilla Firefox add-on instantly. It can show both RGB and HTML hex code.

Yslow
To see whether your site meets the Yahoo high performance standards, you may want to analyze your site using the Yslow web analyzer.

Measureit
As its name indicates, the Measureit add-on can help you measure the dimension of any website element in pixels.

CSSViewer
CSSViewer is a Firefox add-on for people to check a website’s cascading style
sheet.

What are the Most Popular Web Browsers? 6 Browsers You Must Know

If you want to do some web surfing on your computer, you may need a web browser installed on your machine. If you use a windows operating system, there is probably an Internet Explorer installed on your PC. If you are Mac user, you may be using Safari. Internet Explorer is a web browser developed by Microsoft, and Safari is developed by Apple. That is why these web browsers are default ones on the machines which run operating systems made by these two companies.

Some people may be interested to know: Are there any other common web browsers around? The answer is yes. There are another 4 browsers in addition to IE and Safari, including Chrome, Firefox, Opera and Flock.

Chrome is a product from Google, the company famous for their Google search engine. Firefox is brought to you by Mozilla.

The following is a list of these 6 most popular web browsers mentioned above, and their corresponding web addresses are listed as well.

Internet Explorer: http://Microsoft.com/ie
Chrome: http://chrome.google.com
Firefox: http://www.firefox.com
Safari: http://www.apple.com/safari
Opera: http://www.opera.com
Flock: http://www.flock.com

If you are interested in learning more about these web browsers, you may want to visit these websites. Before choosing the browser for your desktop or laptop, you should know that different websites may be displayed differently on these browsers. Bearing this in mind, you should pay some attention to this issue when you build a free website.