HTML color codes

HTML color codes

For the purposes of blogging, sometimes we need the HTML color codes.
There are many software options that we can use to find out this html color codes.

1. You can use the following software, easy way of working life. Just click the color that we want, then pick a color code listed.
See the picture below.

You can download free here. 317 KB only.


2. Or if you have pictures and want to know the color code, you can use this software. The trick, put the mouse on the color you want, copy the color code.
Example, looking at pictures of butterflies below.

You can download HTML color code here. Less than 200 KB.

Read More

Adding Tables in HTML

Creating tables with HTML

Topics

I. Introduction
II. Creating a basic table
III. Adding a border, title, and headings
IV. Polishing your table
V. Creating links
Full Document

I. Introduction

You may want to consider using HTML tables in your website. In addition to creating HTML tables to present data in rows and columns, you can also create HTML tables to organize information on your web page.

The process of creating an HTML table is similar to the process that you used to create your web page and any elements that you may have already included in your page, such as links or frames. Coding HTML tables into your web page is fairly easy since you need only understand a few basic table codes.

II. Creating a basic table

The basic structure of an HTML table consists of the following tags:

Table tags:
Row tags:
Cell tags:
Constructing an HTML table consists of describing the table between the beginning table tag, , and the ending table table tag, . Between these tags, you then construct each row and each cell in the row. To do this, you would first start the row with the beginning row tag, , and then build the row by creating each cell with the beginning cell tag, , adding the data for that cell, and then closing the cell with the ending cell tag, . When you finish all of the cells for a row, you would then close the row with the ending row tag, .Then, for each new row, you would repeat the process of beginning the row, building each cell in the row, and closing the row.

The following table is an example of a basic table with three rows and two columns of data.

Data 1 Data 2
Data 3 Data 4
Data 5 Data 6
The codes that generated this table look like this:

Data 1	Data 2
Data 3	Data 4
Data 5	Data 6

This table contains no border, title, or headings. If you wish to add any of these elements to your table, you need to include additional HTML codes. The codes for these elements are explained in the next section.

III. Adding a border, title, and headings

In addition to the basic table tags, several options are available for adding additional elements to your table. For example, if you add a border, title, and column headings to the table in the previous section, the table would then resemble the following:


TABLE TITLE

Column A Column B
Data 1 Data 2
Data 3 Data 4
Data 5 Data 6
The following codes generated the border, TABLE TITLE, and Column A and Column B headings for this table:

Note: If you wish to view the codes that generated the Data 1 through Data 6 cells, refer to the previous section. Notice that the beginning table tag,

TABLE TITLE
Column A	Column B

, now includes the border tag, BORDER="5", which places a border around the table and frames each cell. The number that you ascribe to the border tag, BORDER=n, sets the width of the table border. Depending on how you design your table, you can then determine the border size that best suits your table and the overall design of your web page. To add a title to your table, you would place the title and the attributes of that title between the row commands, and . The heading codes, , define a heading cell and, by default, these codes center the heading and set it in bold type. However, if you want the title to span across the columns below it, you need to include the COLSPAN=n code. Since this table has two columns, the COLSPAN="2" code was necessary. To add emphasis to the header, you can use the header commands to make the text larger. In this table, notice that the

and

commands made the title larger. Finally, the
tag created a space above the title. The individual column headings are also described by the heading codes, . Since these codes, by default, center the heading and set it in bold type, no additional commands or attributes were included in the heading commands. IV. Polishing your table To give your table a more polished look, you can include commands that will adjust the size of your table, add space in the cell, add space between rows, and align the data in a cell. Working with these commands is basically a process of trial and error to create the most appealing presentation of your information. The type of table that you create and the overall design of your web site will help you determine what works best for your table. Some of the commands that enable you to customize your table include: The WIDTH=n% command sets the width of your table as a percentage of the screen. The letter n designates the percentage that you assign to this command. For example, if you want the width of your table to be one half the width of the screen, you would include the WIDTH="50%" command in the beginning table command. The CELLPADDING=n command adjusts the vertical dimension of the cells. The letter n designates the numerical value that you assign to this command. The CELLSPACING=n command sets the space or border around the cells. The letter n designates the numerical value that you assign to this command. The ALIGN=(LEFT, RIGHT, or CENTER) command will horizontally align the data in a cell. For example, if you wish to place the data in the center of each cell in a row, you would include the ALIGN=CENTER command within the row command. The VALIGN=(TOP, MIDDLE, or BOTTOM) command will vertically align the data in a cell. For example, if you wish to place the data in the center of each cell in a row, you would include the ALIGN=MIDDLE command within the row command. In addition to the codes that were explained in the previous sections, the table below now includes some of these commands. TABLE TITLE Column A Column B Data 1 Data 2 The following codes, along with codes previously discussed, created this table:

and	and

TABLE TITLE
Column A	Column B
Data 1	Data 2

Notice that the TABLE command now includes the WIDTH="50%" command. This command extends the table across one half of the width of the text. Also, the CELLPADDING="4" command increases the vertical dimension of the cells, and the CELLSPACING="3" command increases the border around the cells. Finally, the ALIGN="CENTER" command places Data 1 and Data 2 in the center of the cell.

Read More

How to create HTML List | Unordered/Ordered/Definition Lists

To create/add Ordered list/Unordered list/Definition list in HTML for Websites, Blogger

HTML Unordered/Ordered Lists

HTMLordered and unordered list. In this post I will cover that how to create or add ordered and unordered list in HTML and how to merge order list to unordered list or unordered list to ordered list. Basically the most common HTML tags for creating lists are ordered lists and unordered list. The HTML tag for unordered list is <ul> and the HTML tag for ordered list is <ol>. In both lists as ordered list and unordered listeach list item will be start with <li> tag. Firstly introduce with some HTML lists.

Take a look of an unordered list as below,

• HTML Ordered Lists
• HTML Unordered Lists
• HTML Definition Lists

The HTML code for above unordered list is,

<ul>
<li>HTML Ordered Lists</li>
<li>HTML Unordered Lists</li>
<li>HTML Definition Lists</li>
</ul>

Take a look of an ordered list as below,

1. HTML Ordered Lists
2. HTML Unordered Lists
3. HTML Definition Lists

The HTML code for above ordered list is,

<ol>
<li>HTML Ordered Lists</li>
<li>HTML Unordered Lists</li>
<li>HTML Definition Lists</li>
</ol>

Now above we have taken an example of ordered list and unordered list we will discuss more about that lists but before that we will talk about HTML definition lists. Basically HTML definition list is a list of items  and each item has it's description. Definition list start from <dl> and in that list define item as <dt> and  each item  define description as <dd>. Take a look of a definition listas below,

Blogger

- A blogging platform run by Google

Wordpress

- Another blogging platform

The HTML code for above definition list is,

<dl>
<dt>Blogger</dt>
<dd>- A blogging platform run by Google</dd>
<dt>Wordpress</dt>
<dd>- Another blogging platform</dd>
</dl>

Now move further for better understanding,

How to create/add unordered list in HTML for Blogger, websites

A simple unordered list you have been created before as an in example above. Here we will discuss about the type of unordered list. Basically there are three type of unordered list as disc,circle and square these are also called as bullets so by default if you don't mention any type then it will set in the disc mode.  If you want to change your bullets then just you need to add an attribute type and set a value in that attribute as disc, circle or square in <ul> tag. Below are the previews of each type of unordered list and the HTML codes corresponding to them. 

List Type	Preview	HTML Code
Disc list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ul type="disc"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ul>
Circle list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ul type="circle"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ul>
Square list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ul type="square"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ul>

How to add/create ordered list in HTML for websites, Blogger

You have been created a simple ordered list as in the example above. Now we are talking about the type of ordered list. Basically the ordered list have five type of version such as numbered list,uppercase letters list, lowercase letters list, uppercase roman numbers list and lowercase roman numbers list. Only just you need to add some attribute as type in <ol> tag and you have to set the value of that attribute as your need. If you do not use any attribute then ordered list will set as default by numbered list. Below are the preview of these ordered lists and the HTML codescorresponding to them.

List Type	Preview	HTML Code
Numbered list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ol type="1"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol>
Uppercase letters list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ol type="A"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol>
Lowercase letters list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ol type="a"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol>
Uppercase Roman list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ol type="I"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol>
Lowercase Roman list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ol type="i"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol>

How to Merge Ordered list/Unordered list to Unordered list/Ordered list

Now we are trying to use unordered list into ordered list. Why do we have to need merge both lists? It is basically suppose you have three items in any ordered or unordered lists and suppose some items contains another items so it is better to change ordering of your child items or if you do not want to merge both list then simply you can change the type of any particular list in child items. Below are some examples with previews and their HTML codes. Here in the column of Methods in the table below we will use "O" for Ordered lists and "U" for Unordered lists.

Methods	Preview	HTML Code
O in U lists	HTML Ordered Lists Numbered Lists Uppercase letters lists Lowercase letters lists Uppercase Roman lists Lowercase Roman lists HTML Unordered Lists disc Lists Circle Lists Square Lists HTML Definition Lists	<ul type="disc"> <li>HTML Ordered Lists <ol  type="1"> <li>Numbered Lists</li> <li>Uppercase letters lists</li> <li>Lowercase letters lists</li> <li>Uppercase Roman lists</li> <li>Lowercase Roman lists</li> </ol> </li> <li>HTML Unordered Lists <ol type="1"> <li>disc Lists</li> <li>Circle Lists</li> <li>Square Lists</li> </ol> </li> <li>HTML Definition Lists</li> </ul>
U in O list	HTML Ordered Lists Numbered Lists Uppercase letters lists Lowercase letters lists Uppercase Roman lists Lowercase Roman lists HTML Unordered Lists disc Lists Circle Lists Square Lists HTML Definition Lists	<ol type="I"> <li>HTML Ordered Lists <ul type="square"> <li>Numbered Lists</li> <li>Uppercase letters lists</li> <li>Lowercase letters lists</li> <li>Uppercase Roman lists</li> <li>Lowercase Roman lists</li> </ul> </li> <li>HTML Unordered Lists <ul type="disc"> <li>disc Lists</li> <li>Circle Lists</li> <li>Square Lists</li> </ul> </li> <li>HTML Definition Lists</li> </ol>

Similarly you can use different type of Unordered lists in the singe Unordered lists just you need to change the type for child lists of that Unordered lists items and so for Ordered lists. So you can use and merge these lists to another one as by changing Unordered to Ordered lists or change in type of that lists so do what do you want to do.

You done!

Read More