Thursday, February 9, 2012

Create your first website!


Thanks to what you learned in previous lessons, you are now about to create your first website.

How?

In Lesson 1 we looked at what we need to create web pages: browser and Notepad (or similar text editor). Since you are reading this, it is highly likely that you already have your browser open. The only thing you need to do is to open an additional browser window (open the browser again) so you can read this tutorial and look at their new website at the same time.

So, open Notepad (in Accessories under Programs in the Start menu):


Now we are ready!

What can I do?

Let's start with something simple. Maybe on the side with the inscription: "Hurrah! This is my first page." Read on and see how simple it is.

HTML is simple and logical. Browser reads HTML like you read from top to bottom from left to right. Thus, an HTML document starts with what should be first on the page and ends with what should be displayed on the page as the last.

The first thing you need to do is tell the browser that you will "talk" to the HTML language. You do so by inserting a tag (no surprises). So before you do anything else, type "" in the first line of your document in Notepad.

Referring to the first lesson, is an opening tag should also be a closing tag, which we put at the end of the HTML document. So, not to forget the HTML close tag now type "" a few lines down and the rest of the document between and .

The next thing you need in your document is the "head", which provides information about the document, and the "body", which is the content of the document.

Your document should now look like this:


<html>

     <head>
     </head>

     <body>
     </body>

</html>

Notice how the tags are arranged in a structure with the use of new lines and spaces. In principle, no matter how you structure your HTML document. But to help you, and others reading your code, it is highly recommended that you structure your HTML in a neat manner by indentation and new lines, as in the example above.

If your document looks like the above example, created its first website - boring website and probably not what you dreamed about starting this course, but still some sort of website. This is what you have done will help us to create all the subsequent HTML documents.

So far so good, but how to add content to my website?

As previously noticed, your HTML document has two parts: header and body. In the head section of your important information on hand, while the body of the document contains information that constitutes the site.

For example, if you want to give the page title that appears at the top of your browser, you should do it in the header section. The element used to determine the title to title. ie, save the page title between the <title> and </title> :


<title> My first web page </title>


Note that this title does not appear on the site. Everything that is to appear on the site is between the "body".

As promised, we want the page to say "Hurrah! This is my first website." This is the text that we want to show so it must contain in the body of the page. In the section of the body, enter the following code:


<p> Hurrah! This is my first website. </p>


P in <p> tag is short for paragraph of text.

Your HTML document should look like this:


<html>

<head>
<title> My first web page </title>
</head>

<body>
<p> Hurrah! This is my first website. </p>
</body>

</html>


Finished! You have now made your first real website!

Then all you have to do is save it to your hard drive and then open the browser:

In Notepad, select "Save As ..." in the "File" menu in the upper part of the program.
Select "All Files" in the "Save as type". It is very important - otherwise, save the document in text format rather than as HTML.
Now save your document as "page1.htm" (the ending. "Htm" specifies the type of file, in this case an HTML document.. "Html" gives the same result. I always use. "Htm", but you can select the second option). It does not matter where you save the document on your hard drive - until you remember where you saved it so later to find it.

Save document.

Now open the browser:

In the top menu, select "Open" in "File" (Ctrl + O).
Click "Browse" in the open window.
Now find your document, select it and click "Open".

Open document.

It now should say "Hurrah! This is my first website." in your browser. Congratulations!

No comments:

Post a Comment