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 < and > into >. 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.
Tuesday, March 27, 2012
Monday, March 19, 2012
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.
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.
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.
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/.
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/.
Friday, March 16, 2012
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
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
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.
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/.
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.
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.
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...
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.
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.
Friday, March 2, 2012
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.
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.
Subscribe to:
Posts (Atom)
