Sunday, May 20, 2012

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.

Monday, April 30, 2012

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.

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 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.

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.

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.

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.
Search & Win