Getting Started

2011-08-28T15:40:00.000-07:00

Step 1: Tools for website editing are free and easy

Truth is that to design your website you do not need a lot of fancy tools.
You can start creating your website with notepad.
Benefit of using html editor is to make your code easily readable, since html editor tools indent and color-code the code and you can drag and drop elements so you do not have to remember the syntax.
I recommend you find and download good html editor. Here are some of my favorites

Microsoft Visual Studio 2010 Express

If you have Windows 7 download Microsoft Web Developer Express 2010 from this link http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-web-developer-express
This is pretty cool tool to use with your web site designing adventures however it installs many other components you will never use. so make sure to uncheck everything other than Microsoft Visual Studio 2010 Express during your install.

HTML Editor from coffee cup

http://www.coffeecup.com/free-editor
Lighter version of the html editor

I used to like Microsoft SharePoint Designer 2007 since it was free, however you cannot edit html files using SharePoint Designer 2010 anymore, so Microsoft Visual Studio 2010 Express is the new way to go

Step 2: Select web hosting service and register domain for your site

The next step will be to choose your provider.

Listed below 2 web hosing services sites I considered.

ARVIVE
This site offeres asp.NET hosting if you planning to expand your skills in Microsoft world
https://www.arvixe.com/order.php

iPage
This website offers HTML hosting for very competative price
http://www.ipage.com/ipage/index.html

Check out http://www.top-10-web-hosting.com/ for list of ongoing promotions

Most web hosting companies offer to register your domain. Some of them register for specific period of time and some of them register for life.
You can really wait with this step until you finish designing the website, but it will not hurt to look around. If you lerning html for blogging or ebay listing, you can skip this step.

Step 3: Getting ready to write code for your first web page

In the step 2 I signed up for a service to host my website. However I do not quite need the service just yet. First I will design the site on my computer and only then I will try to move my code to the host server.

So today I will open windows explorer and I will create a directory under C: drive. I will call it myfirstwebsite. All files I need and create for my website will reside in that directory C:\myfirstwebsite from now on.

Then I will open notepad or web designer and I will create blank file and I will call it default.html and save it in C:\myfirstwebsite. So if I use windows explore I should have C:\myfirstwebsite\default.html

If you used web editor to create a file, sometimes following lines will be inserted for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<title>Untitled Page</title>

</head>

<body>

</body>

</html>

if you used notepad or wordpad, then you can simply retype these lines or better yet copy and paste from this blog.

Step 4: My first html element!

When writing a code for html it is important to understand how to write html elements. It is very important to have open (<) and close (>) symbols for every element components. You have begining element and ending element and element body in the middle.

For example:<title>Untitled Page</title>
For my website:<title>How I designed my first website</title>
<title> is begining element </title> is ending element and Untitled Page in the middle. It is impotant to provide good title element, since this title will be displayed on the browser tab.

Step 5: Let us talk about layouts

There are many layouts for the page, However I used basic simple layout using table.

Here is visual representation of my layout

------------------------------------------------------------------------------------------

! Logo here ! Web Page title ! buzz news

------------------------------------------------------------------------------------------

! left side menu ! Body of the Page ! snippets

------------------------------------------------------------------------------------------

! ! footer ! footer

-------------------------------------------------------------------------------------------

as you can see I have one table, 3 rows and 3 columns

here is how I would define this in html

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Elements to define table <table> </table>

Elements to define row <tr></tr>

Elements to define column <td></td>

Please note that columns need to be included in the row and row needs to be included in the table

For beginners let us keep same number of columns in each row

Step 6: Adding logo to the web site

Today I added my first logo image to the website.

If you click on Accessories, then Paint you should be able to find paint.
Create fancy or not all that fancy image with logo and save the image with *.jpg format to directory C:\myfirstwebsite.

Now add following code <img src="mylogo.jpg" alt="My Logo" /> inside first column. This is how would you add any image to the site src is file name or relative path and alt is what will be displayed if you mouse over on the image.

Now save default.html, navigate to default.html file and right click to open the file in the Internet Explorer or Firefox. Internet browser should open and you should be able to see your first website with your first image!!!! Now for, only you can see your website since it is on your computer.

here is how your html code will look like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Page</title>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Step 7: We have a header!

Today we will add a header to a site

First add header text in second column elements as following

<td>I designed my first webpage</td>

Next I added some styling to the column content

<td style="font-family: Arial, Helvetica, sans-serif; font-size: xx-large; font-weight: bold; font-style: normal; color: #0000FF">How I designed my first webpage</td>

Font-Family is the name of the font you would like to use. Please select something standard or a lot of browsers will not find it.

Step 8: Add background color to your website

Today I decided to make my website fun and colorful and I added green background by inserting attribute to my body tag

Here how my body tag looks now <body bgcolor="#99ccff">

You are limited to the web colors. Each web color has a number. You can Google web color wheel and select color you link.

Step 9: It is all about links

Today I will add left hand side navigation to my website.
I will add links to yahoo, google and bing websites.
Some day, when I have many websites I will add links to my websites, but today is not that day.

Here how you add a link to the site:

in quotes href=URL, so in this case it is href="http:\\www.bing.com"

Text in green is wording you would like your link to say, in my case it is Bing Link

So after adding some formatting discussed in the step 7 and links in step 8 here is how my html looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body   bgcolor="#99ccff">
<table>
<tr>
<td><img src="mylogo.jpg" alt="My Logo" /></td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: xx-large; font-weight: bold; font-style: normal; color: #0000FF">How I designed my first webpage</td>
<td></td>
</tr>
<tr><td style="font-family: Arial, Helvetica, sans-serif; font-size: large">
       <br />
        <br />
     <a href="http:\\www.yahoo.com">Yahoo Link</a>
      <br />
      <br />
     <a href="http:\\www.google.com">Google Link</a>
      <br />
      <br />
    <a href="http:\\www.bing.com">Bing Link</a>
    </td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td>
</tr>

</table>
</body>
</html>

Step 10: It is all about html headers

Today I decided to add headers to my blog.

All I had to do is Use <H1></H1> element

For largest header

<H1>H1 Header </H1>

For medium header

<H2>H2 Header </H2>

For smaller header

<H3>H3 Header </H3>

Even smaller header

<h4> H4 Header </h4>

Smaller than smaller

<h5> H5 Header </h5>

Smallest

<h6> H6 Header </h6>

Step 11: Add some content

Step 12: Post your web page on web hosting server or blog and celebrate

Dreamhost discount code
DD55QCZ5ATPR
yahoo metatag

bing metatag

How I Designed My First Website (free and easy web design)

Getting Started

Step 1: Tools for website editing are free and easy

Microsoft Visual Studio 2010 Express

HTML Editor from coffee cup

Step 2: Select web hosting service and register domain for your site

Step 3: Getting ready to write code for your first web page

Step 4: My first html element!

Step 5: Let us talk about layouts

Step 6: Adding logo to the web site

Step 7: We have a header!

Step 8: Add background color to your website

Step 9: It is all about links

Step 10: It is all about html headers

Step 11: Add some content

Step 12: Post your web page on web hosting server or blog and celebrate