What is HTML and how do I use it to create HTML pages?
HTML is Hypertext Markup Language using which only your web pages(posts) will be displayed on the web browsers such as Internet Explorer, Mozilla Firefox etc. HTML is a set of tags that use to format/display the content in whatever the way you wanted.
All the tags, with some exceptions, will have Start Tag and End Tag. The tags are nothing but a special notation of discriminating from the other content. For example, below is the way of making your content bold.
This content is in bold.
The and are the start and end tags respectively. The end tag will have same keyword with an extra back slash ("/"). Here is the output of the above code.
This content is in bold.
Typical categories of HTML tags that I can use for my posts
Formatting Tags:
Mostly you will use formatting tags as you require formatting of the content most of the times. The various types of formatting you can use are bold, italic, underline, Strike Through etc. Here is the examples of using them.
Usage
This is in bold
This is in bold
This is in Italic
This is in Italic
This is underlined text
Thus is underlined text
This is strike through text
This is strike through text
U can nested one or more tags within other tags to archive the combination like bold and Italic, bold and underline, Italic and underline etc.
Paragraph Tag & Alignment Attribute
As you write paragraphs in your notebooks, you can define the paragraphs for your content in HTML as well. Use
tag to achieve this. You can make the text align in left, right, center or justified. One of the easiest way to achieve these alignments is use align attribute of the paragraph tag. See below example.
This text is aligned left side.
This text is aligned left side.
What are attributes?
Attributes are nothing but the add on types for the original tags through which we can add additional functionality to the tag and in turn to the content. Attributes will be specified in side a tag and the types of attributes vary from tag to tag. For example, the align attribute which is available with the paragraph tag may not available with other tags.
Ordered List & Unordered List
Often you find interested to present some content in terms of points. For that purpose, the Ordered list and Unordered lists are useful. Ordered list will automatically adds the numbers starting from 1 to your points. You can alter this behavior which is an advanced topic and is out of scope of this topic. Unordered list will present the points in bullet list. See the examples below.
- This is first point of ordered list.
- This is second point of ordered list.
- This is third point of ordered list.
- This is first point of unordered list
- This is second point of unordered list.
- This is third point of unordered list.
To create an ordered list, you need to use <
-
-
tag. Each of the point inside, either ordered or unordered list, should be specified by the
- tag. You can use any other formatting or alignment tag inside the tag.The HTML code to produce the above lists is shown below.
tag and for an unordered list, you need to use
<ol>
<li>This is first point of <b>Orderedb> list.li>
<li> This is second point of <b>Orderedb> list.li>
<li> This is third point of <b>Orderedb> list.li>
<ol>
<ul>
<li>This is first point of <b>Un Orderedb> list.li>
<li> This is second point of <b>Un Orderedb> list.li>
<li> This is third point of <b>Un Orderedb> list.li>
<ul>
The blockquote tag
When you want to give some indent to the paragraph you are writing blockquote tag will be used to achieve it. You can use as many blockquote tags to give as many indents. You can nest one in other as well. See the example for blockquote tag below.
<blockquote>
This is indent in one tab
<blockquote> This is indent text with two tabs
The output would be as shown below.
This is indent in one tabThis is indent text with two tabsThis is again one tab indent text
The FONT tag
The next tag which is most important tag which is Font tag. All of us know what font is. Font tells the format of the text like style, color etc. Using the attributes of the Font tag you can format the text in whatever the way you wanted. For instance, you can colorize the text,align the text in whatever the direction you want, apply styles etc.
You can use the color codes or color names to give the color to the text.
<font color="red">This is colored in redfont>
Below is the output:
This is colored in red
This is also colored in red using color code
The Anchor link tag
Confused of creating hyperlinks within your content? Its very much simple. Creating the hyperlinks or simply links in HTML can be done using the anchor() tag. You can specify the attributes to the anchor tag which will add special properties like styles etc.
<a href="http://www.boddunan.com"><b>A world of technical informationb>a>
The output would be as shown below.
A world of technical information
<a href="http://www.boddunan.com" target="_blank">This will open in new window. Try it.a>
The output of the above code will be as shown below.
This will open in new window. Try it.
Subscripts & SuperscriptsTo create subscripts you can use the tag.
e.g.
log<sub>esub>10=1
The output of the html text
loge10=1
Similarly, you can use tag to format the text as superscripts
e.g.
28<sup>thsup> Mar, 2009
The output of the html text
28th Mar, 2009.
Tables are most useful components that can be used to display the data in rows and columns. Ofter we use the tables to position the text in the proper alignment. You can display the border along with the text or simply the text. You can color each cell in different color, you can color background of each cell etc. All these can be possible with the use of table, tr and td tags. These tags refer Table, Table Row and Table Column respectively. See the example below.
<table>
<tr>
<td>This is the first cell of first row.</td>
<td>This is the second cell of the first row.</td>
<tr>
<tr>
<td>This is the first cell of second row.</td>
<td>This is the second cell of the second row.</td>
<tr>
</table>
The output of the above code will be as follows:
This is the first cell of first row. | This is the second cell of the first row. |
This is the first cell of second row. | This is the second cell of the second row. |
Please note that there is no formatting used till now. Now we will make this more beautiful by using the colors and borders.
Output
This is the first cell of first row. | This is the second cell of the first row. |
This is the first cell of second row. | This is the second cell of the second row. |
Now in the above table, you can see the background color and the border for the table. Remember, you can format the text in the TD tags using any formatting tags you like. However, if you want to apply similar formatting to the entire content in a particular cell, you can use the style tag of that particular TD tag. To apply the formatting for the entire table as shown above, use the style tag for the TABLE tag.
We will see the formatting tips in the STYLE tag later.Next thing is spanning the rows and columns. For example you require only one cell in the first row and two cells in the second row, you must use spanning to achive this. This is because the table tag require as many cells in all rows as in first row. That means all the rows should be properly divided in to same number of cells. To overcome this we can use the rowspan and colspan attributes on the TD tag.
<table border="1" style="background-color: #f5f5dc">
<tr>
<td colspan="2" align="center">
<b>This is the heading spanned over two columns.</b>
</td>
<tr>
<tr>
<td>This is the first cell of second row.</td>
<td>This is the second cell of the second row.</td>
<tr>
</table>
Output
This is the heading spanned over two columns. | |
This is the first cell of second row. | This is the second cell of the second row. |
<table border="1" style="background-color: #f5f5dc">
<tr>
<td rowspan="2" align="left">
<b>This is the heading spanned over two rows.</b>
</td>
<td>This is another cell in first row.</td>
<tr>
<tr>
<td>This is another cell in second row.</td>
<tr>
</table>
Output
This is the heading spanned over two rows. | This is the another cell in first row. |
This is the another cell in second row. |
Now another feature in tables is Table HEAD and Table BODY. If you see the above tables you can easily notice the head row which will contain the captions or headings and the body which will contain the actual data rows. If you separate in this way it will become easier to apply proper formatting to header as well as data.
e.g.
<table border="1" style="background-color: #f5f5dc">
<thead>
<tr>
<td colspan="2" align="center">
<b>This is the heading spanned over two columns.</b>
</td>
<tr>
</thead>
<tbody>
<tr>
<td>This is the first cell of second row.</td>
<td>This is the second cell of the second row.</td>
<tr>
</tbody>
</table>