Step 1: Tools for website editing are free and easy
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
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.
Step 2: Select web hosting service and register domain for your site
Listed below 2 web hosing services sites I considered.
This site offeres asp.NET hosting if you planning to expand your skills in Microsoft world
This website offers HTML hosting for very competative price
Check out http://www.top-10-web-hosting.com/ for list of ongoing promotions
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
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 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
Step 6: Adding logo to the web site
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.
Step 7: We have a header!
Step 8: Add background color to your website
Step 9: It is all about links
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.
<html xmlns="http://www.w3.org/1999/xhtml" >
<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>
<tr><td style="font-family: Arial, Helvetica, sans-serif; font-size: large">
<a href="http:\\www.yahoo.com">Yahoo Link</a>
<a href="http:\\www.google.com">Google Link</a>
<a href="http:\\www.bing.com">Bing Link</a>
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