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.
Monday, April 30, 2012
Tuesday, April 17, 2012
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 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 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.
Sunday, April 15, 2012
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.
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.
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.
Thursday, April 12, 2012
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.
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.
Friday, April 6, 2012
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.
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 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
Wednesday, April 4, 2012
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.
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.
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 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.
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 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:
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.
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 == "index "'>
<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 == "item"'>
<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!
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 == "index "'>
<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 == "item"'>
<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.
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.
Subscribe to:
Posts (Atom)
