Beginner's Web Site Creating Guide

Welcome to Thesharath.com's introduction to HTML and web design. This short tutorial is aimed to give newbie's a little experience in writing HTML code, saving their files correctly, and viewing the completed works in a web browser. Regrettably this tutorial cannot teach you the basics of using a computer, so please be sure that you meet the following requirements:

Know what notepad is and how to use it
Are able to open up a file using Internet Explorer (or the browser of your choice)
Know how to copy and paste text from a webpage (important!).

If you are lacking the ability of the aforementioned items please contact a local geek and ask nicely for a quick lesson.

Tutorial Overview

In this tutorial you will be transcribing code into notepad and then viewing it with a web browser. The code is called HTML (Hyper Text Markup Language) and notepad is a commonly used text editor on Window PCs. HTML may seem confusing at first, but we will help you understand how it works in this step-by-step tutorial of how to make your first web page.

Your First Web Page

To start off with copy the following HTML code into notepad. Be sure to copy the code exactly, otherwise your web page may not function correctly.

HTML Code:

<html>

<head>

</head>

<body>

<h2>My first webpage!</h2>

</body>
</html>

The above code is all that is required to create a basic web page! Now save your file in notepad by selecting Menu and then Save. Click on the Save as Type drop down box and select the option All Files.

When asked to name your file, type "index.html", without the quotes. Double check that you did everything correctly and then press save. Remember where it was saved to because you will need to open this file, soon!

Viewing Your Web Page - Web Browsers

To view your web page, you are going to have to use a web browser (of course). Web browsers are programs that interpret HTML, like what you have just copied into notepad, and transform that code into a visual representation, or a web page. Common web browsers include:

Viewing your page

To view your web page, you must open the "index.html" file inside of a web browser. Open up another browser window and then follow these instruction.

In the new browser window, select File then Open
Then click Browse to enter Windows Explorer
Do you remember where you file is? Good, then navigate to its location
When you find your file, index.html, double-click the file to open it inside your web browser

Success! You have just viewed your very first webpage.

If this did not work for you, please go through the steps again and follow the directions closely. If you still can't get this to work, please Contact Us and we will get you up and running.

First Web Page - Review

Very good! Now let's be sure that you remember what you learned in this lesson.

how to copy some weird looking text (HTML) into notepad
how to correctly save this weird text in notepad
how to open your saved file and view the your webpage

Continue

Tips

mYpassion Editor is a small, simple-text program that has features notepad does not. Such features include: spellcheck, code highlighting (you'll like this!), ability to open multiple files, and a more sophisticated undo feature. It is easy to set up and it is free! Visit http://www.thesharath.com/editor (However, using notepad is also OK).

You may have heard of FrontPage, Dreamweaver, and other WYSIWYG programs (What You See Is What You Get). Though these programs will let you create pages quickly, you will soon learn there are many advantages to knowing how to code HTML. Spicing up or polishing up HTML effects can only be done manually.

Ever wonder what a website's designer did to get that awesome look it has? You can view a websites source (HTML) and if you know HTML you'll understand how they did it. On any browser, select the view command, scroll down and select 'view source' to see the HTML code for the site you are currently viewing.