From OST
Revision as of 05:18, 10 December 2009 by Twhite (Talk | contribs) (Body)

Jump to: navigation, search

This is a simple guide you can use to build your first website.

Setting The HTML Version Standard

Setting your HTML version standard is the first step in creating a website. Setting the version tells your web browser how to process the information in the web page. Use the <!DOCTYPE> tag to set the document type for your web page. This is an example of seting the doctype to HTML transitional:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML tags

The easiest way to understand web design is to think of your website as a human being. HTML is the skeleton of that human being. Start your website by opening notepad (or your favorite text editor) and type in these tags.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 <html>
 </html>

Everything that you will see on your web page will be written inbetween the <html> tags.

Head

The Head of your website is where the logic your website goes. Everything within the head of your website goes inside of <head> tags. Here you can set the title of your website with the <title> tags within the <head>:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head> 
 <title> This is where the title of my website goes </title>
 </head>
  </html>

Body

The body is where the flesh of your website goes. Everything that you see on your web page, including text, pictures, audio, and video, go inside of the body of the document. The body uses <body> tags. Here is an example of some simple text in the body of our website.


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head> 
 <title> This is where the title of my website goes </title>
 </head>
 
 <body>
 Welcome to my website.
 </body>
 </html>
You can add headings to you web site by using the

tax. For example:
<body> <h1> Welcome to my website

  </body>
You should also use the

tag for general text in your site:

<body>

Welcome to my website

<p> This is my general text

   </body>

Saving your Webpage

To this point you just have a text document. We want to save this code so that it can be reopened as a web page. Save your picture as an html document. Now when you open it, your page will appear in a browser. If you want to edit your web page, you can always re-open that file with your favorite text editor. Many web servers recognize index.html as the main homepage for a web site, so consider using that name.

Inserting a Picture into your website

Pictures can be added anywhere into your website. In order to add a picture you must put in some code that will link to that picture. You can use the <img src=> tag to link to a picture, so that it will appear in your web page. Let's say you had picture file with the name mypic.jpg. You could put that picture into the website like this:


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head> 
 <title> This is where the title of my website goes </title>
 </head>
 <body>
 Welcome to my website.
 <img src="mypic.jpg">
  </body>
  </html>

If the picture is not saved in same directory as the web page, you will need to link the page to that directory in order to see the picture. This is how the code would look if the picture was saved in a directory (in the same path as your web page) called images.

 <img src="images/mypic.jpg">

Linking Pages

You can use the following code to link your web page to another page that you built, or else where on the internet.

 <a href="my other page.html">  This link will take you to my other page.  </a>

or

  <a href="http://www.google.com">  This link will take you to the Google website. </a>

Formatting Your Website with CSS files

You can add many design features your website using a single CSS files. CSS stands for cascading style sheets.

Getting Your website Online

There are many servers out there that will host your website for free. There also pay services where you can post your website. Here is a couple of links you can check out so that you can get your website on the Internet.

http://www.000webhost.com/

http://www.godaddy.com/Hosting/Legacy.aspx?ci=8971&isc=goaz2001cq

Other Resources

There are many resources on the web that can help you create web sites. Check out some of these websites to help you learn more about web design.

http://www.w3schools.com/html/

http://www.htmlcodetutorial.com/

http://www.echoecho.com/html.htm