Thursday, 2 February 2012

HTML Table Tags

HTML Table Tags Web Design Page Layout For Beginners

Now you know how to put together the basic tags, it's time to start learning about layouts within those tags and the most basic of which is the <table> TAG </table>

Now table tags unlike most others contain several elements
<table> The opening of the initial tag
<tr> The Return putting all you do on the next level of the table
<td> Where your text or pictures would reside

As with all the other tags we have looked at, each of these opening tags, needs a corresponding closing tag.  So the basic table layout would look like

<table>
<tr>
<td>
Some Content May Go Here
</td>
</tr>
</table>

Now once again, as we showed with the <p> Tag, this will just put you basic text on your web page.  But as with the <p> Tag, we can change the layout of this by using attributes.  For Example

<table align="center"> will put the whole table on the ceneter of the page.

To restrict the width of everything that goes in that table you could use

<table width="100%"> or <table width="200px"> which will determind the size of that table.

You can also do the same with one of the internal table elements, the <td> Tag For example

<table align="center" width="200px">
<tr>
<td align="right">
Then put some text here and close the table tags as below
</td>
</tr>
</table>

This example will put the table in the middle of the page but align all the text you put between the tags to the right so your page would end up looking like:


Content By Web Connections - Web Design - Software Design

Basic Display Tags

The Basic HTML Web Page Display Tags

So we know how to start a basic HTML Webpage and get some text on the screen lets face it, it doesn't look that pretty.

There are of course a million ways to format text and a few of the most basic are shown below.

The <p> Paragraph Tag
As always the <p> Paragraph tag needs to both open and close so the layout would normall be
<p> Your Text Here Then </p>

But all that will do when you put it into your HTML Page is give you the same results as before putting basic text onto the screen.

To start changing the way the <p> Tag deals with that text, you would need to add some more attributes.

Example:
<p align="center"> Will align all your text in the middle of the page
<p align="left"> Will align all your text to the left of the page
<p align="right"> Will align all your text to the right of the page.

So for example you may have

<p align="right">This is the text on my web page</p> (Don't forget to close the tag)

Which would look like

This is the text on my web page

Putting all this together your page would now look something like

<html>
<body>
<p align="right">
This is the text for my web page
</p>
</body>
</html>

This of course works OK for a basic start but to get a little more out of your web page lets move onto something that will give you a little more flexibility.  The Table Tags and Elements.



Content By Web Connections - Web Design - Software Design

Basic Page Construction Tags

Start A Basic HTML Web Page

You will here a lot of designers talk about "tags" when you come to web design and build.  It may of course put you off before you start but it really is quite simple to understand when you are talking about web page construction.

Let Start at The BeginningWith the HTML Tag
<html> Opens the Tag
</html> Closes the tag

And of course you need a matching set of virtually every tage you create.  One to open and one to close.

Next comes the Body Tag
Directly under the first <HTML> Tag you would have
<body> Which opens the tag
and directly before the second </HTML> tag you would have
</body> Which closes the tag

So in other words, you page now looks like this:
<html>
<body>
</body>
</html>

From here, everything you put into your webpage that you want your site visitor to see, will go inbetween the two <body> TAGS </body>

For example
<html>
<body>This is a piece of text that I want to appear on my webpage.
</body>
</html>




To see the next tutorial which looks at basic layout go to HTML Basics In Web Design Page Two.



Content By Web Connections - Web Design - Software Design