Monday, April 30, 2012

Table attributes

The table tags have some attributes to give it a format.I made a list for you with all of them and their explanation :

-Tag: <table>
  
 "border":It will create a border around our cells and around all the table.
  
 "align":Aligns our table in relation to the object around.For example, imagine you've got a text and the table is on it's left side.If you know type align="right", it will appear on the right of the text.

 "background":Allows us to place a background picture.
                          Example:<table background="image1.jpg">

 "bgcolor":Gives the table a background color, using hexadecimal code system.
                   Example:<table bgcolor="#FF0000"> In this case we use red, look at the color codes.

 "bordercolor":Draws a border with the color you choose in hexadecimal code system.
                          Example:<table bordercolor"#0000FF">

 "height":We can adjust the height of our table defining it in pixels or percentage.
                 Example:<table height="100px">

 "width":The same as the previous one for the anchor of the table.

 "cellpadding": Defines the space between the border of a cell and it's content in pixels.
 
 "cellspacing":Defines the space between the borders of your table.

Now that you know all this about tables, why don't try creating your own table with some colors, header cells or maybe a background image?Remember that you can create a webpage with your simple notepad or wordpad.Simply save it as .html when finished and right click on it to open it in any wished browser.You can also download a free html editor or a trial version of coffecup or Dreamweaver.

 

Saturday, April 28, 2012

How to join table cells

Sometimes we will need to combine two or more different cells.For that we will use the <td></td> tag and the attribute 'colspan', to join horizontal cells or 'rowspan' for the vertical ones.
<td colspan="2"></td>.By changing the "2" to a wished number you can define how many cells you want to be joined.























Thursday, April 26, 2012

Tables with header cells.

So now we know how to create a basic table but sometimes you will need your elements in the table to be classified in different sections.For this we will use header cells.Header cells are very useful for creating categories, for example let's say we have got a car sale webpage.Our header cells could contain something like Mercedes or any other brand.In the cell below, we could type the car model and below that we can let the user know the price.To create the mentioned cell, use the tag <th></th>.For all the other ones just do the same as with a basic table.
Example:

Wednesday, April 25, 2012

How to create Html tables

The simple table Html tag is created using the tags <table> and </table>.To define the table content you use the <tr></tr> tags for the rows and <td></td> for columns.


























 Now you should get a simple table.


























By now it looks good, but lets add a border to the table to give it a little bit of life.
You can do this by giving the table definition the attribute "border='1'".The border size is all up to you, to define it just type the size you prefer instead of 1 (size in px).If wanting a blank, cell you should use a white space (&nbsp;).This is done, because some browsers don't recognize white spaces and always need some content.The following example has got a 1 px border and a blank cell.























Monday, April 23, 2012

Html titles

This tags are fundamental for the structure and comprehension of your webpage.The format of the title tag is <h1></h1>,<h2></h2>...And so on until the <h6></h6> tag, which will be the smallest heading.<h1></h1>should be the most important title on your page, because it will appear as a big, bold text.So imagine you have a web that sells computers, the <h1></h1> should be something like "Computer sales".And a <h2></h2> title could be "Second hand computers".
I hope you now got a clear idea of what html headings are.
Example:


Saturday, April 21, 2012

Subscript, superscript and strike in Html

Anytime you need one of those 3 elements, use the tags <sub></sub>, for the subscript; <sup></sup, for the superscript and <strike></strike> to cross out a word or phrase.
Another time, lets take an example with all 3 elements in one:
























 If done everything right your result will be the following:























Thursday, April 19, 2012

Bold, underlined and italic in Html

Sometimes,when creating a page, you want your text to be bold, underlined or with an italic style.The three tags which define these 3 styles are:<b> for bold, <u> for underlined and <i> for italic.
Try it yourself.Maybe create a sentence with all 3 styles in one?
























Easy?Isnt it?Lets see the result in the internet browser:

How to create Html Text indent

To create a text indent there is the <blockquote> tag.The text you insert in the tag will appear indented with a separation from the left border of the page:

Your indented text will look like this in your browser:




























 




Tuesday, April 17, 2012

Free Html tutorials

Most of the people think that creating a website is extremely difficult or that you have to buy expensive programs,but this is not true, because anyone can learn how to create a good looking website.There are some quite good website-designing programs but you basically only need your notepad.Later you can view your design by previewing it in any internet browser.On this website you will learn free html basics which you can try on your notepad at home.So if you want to build a business on the internet or just like to wright for fun, here are some tipps:
  • What is html?
  • Html basic elements.


What is html?:




Html literally means Hypertext Markup Language.Its a language used for the programation of websites.It is based on tags, which are commands that create different items on our website, such as tables, font size, font style...The html was born in 1980, when the physician Tim Berners Lee propose to use a new hypertext system to share documents.Later his program evoluted 4 version more until HTML 4 and now the version we are using XHTML.



Html basic elements:


 Paragraphs:

This element will be placed in betweeen the tags <p> and </p>.You can write whatever you want  and it will generate a paragraph and a newline, without indicating it.
So if you want to give it a try open up your notepad/wordpad or any other text-editing program.
Type the following:

























When finished save the document as a .html file, so you can open it in any Internet browser you wish (I am using Internet Explorer).Your result should look like this:

































Center:

Every text that we type on our web will be automatically aligned left.With the <center> </center> tags we can center our text.And again lets see how it looks like:
 Result:































Lines:

If we want to seperate something on our page (paragraphs, images..) you can do this with a simple line <hr>.
As you can see I used the line tag on this blog multiple times.Easy but often very usefull:
























And the line result: