Step-by-Step Instructions on How to Build a Website
While numerous websites and computer programs exist to guide you through the process of building a website, the best way to learn is through a text editor. A text editor will give you the most control over your website. Websites essentially are HTML documents that use markup tags (keywords surrounded by angle brackets, such as <p>) to describe the features on each page of the site. To create a web page, you do not need a hosting service, but to make your page available on the web, you will need such a service.
Other People Are Reading
Instructions
-
-
1
Open a text editor, such as Notepad. Create the elements needed for your web page by typing the following code into your text editor:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>My First Heading</h1>
<p>Write text in this section to create a paragraph.</p>
<a href="http://www.example.com">This is a link to an example page on the web.</a>
<p>Below is a small picture.</p>
<img src="a_picture.jpg" width="250" height="200" />
</body>
</html>
Replace the words inside <title>, <h1>, <p> and <a> tags with the text of your choice. Repeat the <p> and </p> tags around each additional paragraph.
-
2
Add style to your page by inserting it into the HTML document. This is accomplished by using the "style" attribute. If you want to add color and change the font of your text, add style="font-family:Helvetica; color:orange; font-size:30px" to the <p> tag. You can also add a different background color by adding style="background-color:gray" to the <body> tag. Note that you can use hexadecimal color codes for more variety of colors; charts containing this information are readily available on the Web. Your HTML code now should look like this:
<html>
<head>
<title>My Web Page</title>
</head>
<body style="background-color:gray">
<h1>My First Heading</h1>
<p style="font-family:Helvetica; color:orange; font-size:30px;">Write text in this section to create a paragraph.</p>
<a href="http://www.example.com">This is a link to an example page on the web.</a>
<p>Below is a small picture.</p>
<img src="a_picture.jpg" width="250" height="200" />
</body>
</html>
-
-
3
Save your HTML document using a ".html" or ".htm" extension (e.g. "example.htm"). Both extensions will serve the same purpose; one is not better than the other.
-
4
Load the files used to create your website (your HTML document and images) to your hosting provider's server. This is generally not difficult; simply find the section of your provider's website that says something like "file manager," and use the provided application to upload your files.
-
5
Open your preferred web browser and view your web page. You can do this by going to your website or simply opening your HTML document in a web browser. It is important to check your web page in a browser to view your changes. You also should check your web pages in different browsers (e.g. Firefox, Internet Explorer, Safari and Chrome) and with different platforms (e.g. Microsoft Windows, Mac OS X and Linux Ubuntu). Different browsers and platforms display web pages differently.
-
1
Tips & Warnings
Learn CSS to create style using a different document. This will allow you to create multiple pages with similar style without retyping every line of style.
Learn PHP and Javascript to add interest and functionality to your page.
If you do not want to learn HTML, look into hosting services that provide a website building tool or use a WYSIWYG program.
Your homepage most likely will need to be named "index.htm," "index.html" or "index.php" for it to properly display on the web.
The image used in this example must be uploaded to the same directory for it to load on your website. It must be saved in the same folder or directory (for example, "My Documents") for it to display in your browser when viewing HTML files.
References
Resources
- Photo Credit computer image by michele goglio from Fotolia.com
