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
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-expressThis 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.
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.
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
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.
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">
<html xmlns=http://www.w3.org/1999/xhtml>
if you used notepad or wordpad, then you can simply retype these lines or better yet copy and paste from this blog.
<head>
<title>Untitled Page</title>
<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.
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>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</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.
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">
<html xmlns=http://www.w3.org/1999/xhtml>
</body>
<head>
<title>Untitled Page</title>
</head>
<body>
<table>
<tr>
<td> <img src="mylogo.jpg" alt="My Logo" /></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</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.
</table>
</body>
</html>
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.
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:
<a href="http:\\www.bing.com">Bing Link</a>
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>
<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
DD55QCZ5ATPR
yahoo metatag
bing metatag
Hey,
ReplyDeleteThis post is very informative. it content great and unique information. I enjoyed to visiting your blog. It's just fantastic.... Thanks for the share. visit my site- Website Hosting & Design
Thanks
Alex Walker
A web design is the soul of a site. The performance and success of a website depends on a web design. It is the design that attracts the visitors and helps in retaining them.
ReplyDeleteweb design durham