Tutorial 6 : HTML Creating a Table.

This tutorial will focus on creating a table for your site layout. This is incredibly useful as once you get your head around tables and how they work then you can create pretty complicated websites. Tables can also be used to add structure to your data and make the page look more organized.

Firstly we want to use the <table> tags to open up our table.

<table>


</table>

Secondly we shall start by adding a row to our page.

<table>

<tr>

</tr>

</table>

And thirdly to create your table we now need to add the following lines:

<table>

<tr>

<td>

Hello

</td>

</tr>

</table>

So as you can see tr starts and ends a row and td starts and ends a column. To see the results properly I want you to modify the table tags a bit.

Type the following:

<table width="200px" height="100px" border="1">

This should set the table's width and height appropriately and now that we entered the code: border="1"

We can now see the table with outlines. I myself use this to help me plot out websites that I am creating as it gives a clear picture as to where your columns and rows are.

Tasks:

1) Try adding some more rows and columns so that you can display the following.

hello1	hello2
hello1-2	hello2-2

Thanks for completing another HTML tutorial. Please remember to press the follow button and keep track of any new tutorials.

More Websites

So I have been busy creating more website layouts and experimenting with new things. I am going to start javascript really soon as I want to be able to create drop down menus and other cool features, which will hopefully all add value to the sites I create. Anyway I need to get back to programming, I am designing a cool new webpage which is a lot more intricate than the last one I did, This should hopefully be available to you by tuesday night latest.

More tutorials will be coming soon!

Tutorial 5 : CSS Basics and background color

Welcome to Tutorial 5 : CSS Basics. In this tutorial I shall show you how to use CSS files to make website creation easier and quicker. For example; It is far easier to write one piece of code once than have to write it 50 times for 50 webpages in a website.

Firstly I want you to open up Microsoft Visual Web Developer which is a free easy to use and powerful tool which will help you a lot in website creation. It can be downloaded from the Microsoft website.

I want you to start a new website. Make sure its an empty website, and then add both a HTML file and a Style sheet. Name them whatever you want.

Next I want you to open up the HTML file, as you can see the basic HTML structure is laid out for you already. Next in the head section I want you to type the following line

<link rel="stylesheet" type="text/css" href="StyleSheet.css" />

Make sure that you change StyleSheet.css to whatever you have named your style sheet.

Now we have a link to our style sheet from our HTML file.

Secondly I would like you to open up your Style sheet as we are now going to be writing some CSS!
If all goes to plan you should have something similar to this:

body{

}

This means that whatever you code into the brackets will directy effect whatever is in your &alt;body> tags which is your whole website.

Now I would like you to type in:

background-color:Red;

Now when you go back and preview your webpage it should have a Red background. As you can see this could be incredibly useful if you have hundreds of webpages all following the same design.

So congratulations you have completed Tutorial 5 : CSS Basics and background color.

Please stay tuned for more HTML and CSS tutorials and remember to follow my blog either view RSS or through blogger's follow function! Thanks!

Website Finished

I have finished my second website design. This one is a bit more bland than the first, but this one was all about coding in better functionality. For instance if you put in lots of text to your main column. Your sidebars adjust to the correct height. I will show you how to do it soon although for now I am still working on getting a couple more templates up so that you can have a look at the code and possibly use it for your own devices.

Anyway I will put another tutorial up tonight. And possibly another website. I have been having a few ideas as to what to add to my websites. Although I would like to find a suitable place that gives images for place holders. So that I can spice up my websites a bit.

I am also going to try a little javascript to spice up my navigation bars as well as add a bit more functionality to the sites I create.

Bye for now and please remember to click to follow me here on blogger!

Thanks.

Tutorial 3 : HTML Manipulating Text

So in this tutorial I will teach you how to change font size, color as well as how to use header tags. Such as <h1> through to <h6>

First of all lets start with font color. This is possibly the easiest to do and can sometimes make the biggest impact on any website. You want to choose colors that will contrast very vividly with the background of the text for instance a white background with black text is perfect a dark gray with black however will have your visitors struggling to extract any information from your webpage. We can change font color by using the following line:

<font color="red";>

Put this into your page and you will have red color. Colors can be set by using certain names, Red green blue values or hexadecimal values like #FF0000 place this in the quotation marks and you will have the same red. Many paint programs show hexadecimal values for colors, so if you see a color you would like to use in a paint program look around for the hexadecimal value.

Now we shall change the font size. We can do this by using the following line:

<font size="25px";>

This can be useful if you would like to have custom sized text. To change font size you could also put in large, small and other variations into the brackets to achieve different font size.

<h1> - <h6> tags are a great way to change the size of certain bits of text. h1 is the largest header size while h6 is at the opposite end of the spectrum. To use these tags we simply encapsulate them around the text we would like to make bigger. For instance:

<h1> Hello there! </h1> which produces the following results

Hello there!

Try different sizes of header tags to try and suit your needs.

Thank you for reading tutorial 3. Please follow me if you would like more html tutorials and articles, as well as any site template ready for download.

Thanks for now! Bye.

Website finished

So I took some time today to try and put some of the things I have learned together into one website. It took be about 2 hours and I am pretty pleased with the results. Heres a quick screenshot.

I went for a silver color scheme as I didn't want to waste time choosing what would go well with what. But I think I did a good. You can download this website from here

Anyway I need to start work on my next, even better website.

Anyway I need to get to work on my next website.

Please don't forget to become a follower here on blogger and keep up to date with any new tutorials and websites that I put up. Thanks.