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.
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts
Tuesday, April 17, 2012
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.
Wednesday, April 4, 2012
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.
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.
Tuesday, March 27, 2012
How to Display HTML Tags on a Web Page
HTML Tags are used to write web pages. Usually after a HTML tag added on your web page, it will be executed. But at some special occasions, you may want the HTML tag code is shown as it is in a text editor. For instance, when you write a HTML tutorial online, you may need to show examples about how to use HTML tags by showing the original HTML codes. Here I am going to show you several ways to display HTML codes on your web page.
How to display HTML tags on a webpage
1. Use <pre></pre> tag. The HTML <pre> tag is used to define preformatted text. And it is also used for displaying some kind of computer code. Let me give you an example. If you want to show how to show text in bold using HTML <b> tag, you can show the original code as <pre><b>text</b></pre>.
2. Similarly, the <xmp></xmp> tag and the <textarea></textarea> may also do the job.
3. Another way to display HTML code on a webpage is to convert the < into < 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.
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.
Monday, March 19, 2012
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/.
Subscribe to:
Posts (Atom)
