Using tables for your content

J-Henderson — Sun, 24 Jan 2010 14:09:26 +0000

In more traditional websites tables were used to layout the entire website. This method of using tables has now been replaced with CSS, even though CSS is very powerful there are some things you will want to use tables for.

Lets have a quick look and see what the code for a standard table will look like.


  
    
      First Table cell
    
    
      Second Table cell
    
  
  
    
      2nd Row, First Table cell
    
    
      2nd Row, Second Table cell

The Code above will produce the table below:

First Table cell	Second Table cell
2nd Row, First Table cell	2nd Row, Second Table cell

Now there is quite a bit here lets take a look at our tags:

: The begining of our table, within this tag we can set a few variables such as border, cellspacing and cellpadding, in this example we have set the border to a width of 1 pixel.

: This tag is used to mark the begining of a row.

: End our cell.

: End of our Row.

: Begining of a table cell, traditionally our content that we wish to display will go after this tag before the end of the cell.

: And finally the end of our table.

There are a few more things you can do with tables, what if you wish for part of your content to span accross your table? well we can use a colspan value, as demonstrated below:


  
    
      First Table cell
    
  
  
    
      2nd Row, First Table cell
    
    
      2nd Row, Second Table cell

The above code will give us the following result:

First Table cell
2nd Row, First Table cell	2nd Row, Second Table cell

The colspan attribute tells your browser that the cell should span by a specified amount, the easiest way to think of this is to think of the “merge cell” feature in Microsoft Excel. There are a few other tags you can use with tables i will very quickly go over them here:

& : These tags are used in place of the & tags, and denote a Table Header.

we also have the use of , and , these tags are used after

but before , each marks what content should go where, top of the table, main content or the foot of the table, each tag has its corresponding end tag , and .

Meta tags – Making your webpage search engine friendly

J-Henderson — Thu, 21 Jan 2010 21:43:49 +0000

By now you should have created your first web page and be ready to post this online, however you may be wondering how to go about making your site search engine friendly? Well your anwser is META tags. Lets take a look at a simple HTML page with some meta tags.


  
    

    
    

    My First Page

  
    My header
      a paragraph

For the most part these are pretty self explanatory:

meta name=”description”: This is the description for your website, you may not realise that this description is shown to the user whenever they use a search engine, the description is normally shown under the main link to your website, and only contains a few paragraphs detailing your site.

meta name=”keywords”: Keywords are what a search engine uses to index your site, using the keywords in the code above if you were to goto your favourite search engine such as google and type in the keywords above this site would show up pretty near the top of the results.

The less obvious meta tag, tells our browser what character encoding to use, to be able to validate your web code you will need to tell the browser what character encoding to use, ISO-8859-1 is pretty much the standard encoding you want to use.

Your first HTML page

J-Henderson — Thu, 21 Jan 2010 20:27:28 +0000

Hello and welcome to the first tutorial for this site, here i will be delving into what i consider to be the foundation of all web design, HTML.

What is HTML?

HTML Stands for HyperText Markup Language. This language is interpreted by Web Browsers and is the main backbone of the internet, You can view the HTML in this page by right-clicking and choosing ‘View Source Code’. If you wish to know more about HTML you can find more information here.

Your First Page

Now since your here im guessing you cant wait to get your feet wet. Well all you need to start learning html is this guide and Notepad, now open a new notepad document and copy the code below.


  
    My Page 
  

  
    My first webpage!
      Main content.

Now to save your text document simply goto ‘file > save as’ then make sure that the drop down box ‘Save as Type’ has ‘All Files’ selected. Now just save the document as ‘index.html’ without the quotes. Now if you double click the file you just created you will see the page you just created in your default web browser.

Now then what exactly does the code mean?

well denotes the begining of our html page, this tag also tells the browser that this is a Hypertext Markup Language document, next we have the tag this does not show any content on the page however this is where our Meta Information, title and javascript would go. The </code> tag denotes the begining of our title which will show on the title bar of the browser, the <code> tag simply tells the browser where the title ends. next we need to end the head using and start the main body of the page using the body will contain all of the important stuff that we want to show on our page. Inside the body we have created a header for our content using the

and
tags, next we have a paragraph denoted by
and
, and eventually we simply end the body and our page using the and tags.

J-Henderson » HTML

Using tables for your content

Meta tags – Making your webpage search engine friendly

My header

Your first HTML page

My first webpage!

and tags, next we have a paragraph denoted by and , and eventually we simply end the body and our page using the and tags.

tags, next we have a paragraph denoted by and , and eventually we simply end the body and our page using the and tags.

and
tags, next we have a paragraph denoted by
and
, and eventually we simply end the body and our page using the and tags.

tags, next we have a paragraph denoted by
and
, and eventually we simply end the body and our page using the and tags.