Build Your Web Page 01. HTML Coding: Getting Started

Robert Ramstetter By Robert Ramstetter, 6th Mar 2015 | Follow this author | RSS Feed | Short URL http://nut.bz/1rmubfoh/
Posted in Wikinut>Guides>Internet

HTML is the coding language of web pages. While HTML Coding can seem daunting, it is not so hard if you break it down into small steps. Anyone with minimal computer skills can learn how to code in HTML in its most simple and basic form. This document will get you started so that even the novice can write their own code. Try it!

Getting Started: You need this first.

HTML coding can seem impossibly complex at first glance. This series will introduce you to the coding process in small increments so you can begin building your web page a little at a time. The first thing that you need is a text editor. These come in all platforms and your computer most likely already has one.
A simple text editor should not be confused with the more complex word processing documents, such as Microsoft Word, Open Office, etc. These programs save the text of your document along with all of the formatting code. Your HTML document will not process all of the ancillary code that accompanies such documents. A simple text editor will store only the text that is written.
To begin, open your text editor to a new document and immediately save it in a location that you want. In Windows, use “Notepad”. Give it a name and save it as an .html document. The default that the program will try to save it is likely a .txt file. You must save it as an html document so it will be recognized as a web page when you open it.
Now that you have saved your HTML document, you can get started coding your first web page. Before we begin, you need to understand the two different ways of opening your document. If you simply wish to open it as a web page, you double click the document, just like you would for anything else. This will open it using your default web browser. If you wish to edit the document, right click and choose "open with", and choose your text editor. You may have to browse through the “Other Programs” if it is not displayed by default.

The basic layout and your first web page.

Now you are ready to code a simple web page. The first thing to know is that everything must have a beginning and an end. the “/” signifies the end. To start, type the following in your text editor:

<html>
</html>

This shows the beginning and the end. From here on, everything will be in between those two lines. If you save your document and open it in a web browser by double clicking it, you will see the web page that you created. It is not much to see, but you have to start somewhere. Actually, if you do not see a blank page, you did something wrong. From here on, leave the web page open. After saving your changes, you can just refresh the web page.
Leave that page open for a moment and notice the top of the page. If you are using Internet Explorer, you will see the location that the page is stored. Chrome will not display that. Instead, it will show the title of your document on the tab.
Next, you will want to give your document a head and a body. These two separate parts of the web page each play an important role. The web page is divided this way for two reasons.
1. Typically, the head contains information about the page and the body contains the actual viewing section of the page.
2. Javascript in the head is executed before anything else, whereas Javascript in the body of the document is executed as it is read. In other words, Javascript in the body will not necessarily affect the entire page, whereas Javascript in the head will.

The Head and the body.

Lets add a head and a body to our document.

<html>
<head>
</head>
<body>
</body>
</html>

If you save your file and open it as a web page again, you still see a plain white page. Notice how everything is contained between the <html> and the </html>. When we add a title to our head and text to our body, we will follow the same protocol.

The Title.

Now we will add a title to or page. The title command is: <title>
Try it:

<html>
<head>
<title>
My Page
</title>
</head>
<body>
</body>
</html>


.If you are using Internet Explorer, you will see “My Page” across the top in the blue bar. This now replaces the path of the file that was previously shown. If you are using Chrome, the tab for your page previously listed the file name. It will now list the title. You still, however, have a plain white web page. Let’s fix that.

The Body

To add simple text to the body, all you have to do is add it within the body.

<html>
<head>
<title>
My Page
</title>
</head>
<body>
Add your text here.
</body>
</html>

This will only work for one line of text. Try multiple lines and see what happens.


Multiple lines and learning from mistakes.

<html>
<head>
<title>
My Page
</title>
</head>
<body>
Add your text here.
This is line two.
This is line 3.
</body>
</html>

Notice how all of the lines are displayed on the same line when it is run as a web page?
There are several ways to change this. Again, this module is the basic beginning lesson, so we will keep it simple.

The Paragraph

Here is the paragraph designation: <p> </p>
Let’s add this to our page of code:

<html>
<head>
<title>
My Page
</title>
</head>
<body>
<p>Add your text here. </p>
<p>This is line two. </p>
<p>This is line 3. </p>
</body>
</html>

Now, you can see that the text is displayed as you want it.

Congratulations!

That is the conclusion of the first lesson in HTML programming. Before moving on to the next module, take some time to learn the basics. If you do not have a firm understanding of the coding structure, your web page will not turn out the way you want it to turn out, and troubleshooting will be next to impossible.

Tags

Coding, How To, Html, Internet

Meet the author

author avatar Robert Ramstetter
Robert Ramstetter is a world traveler and writer of short stories, full length novels, and a vast array of technical articles.

Share this page

moderator Steve Kinsman moderated this page.
If you have any complaints about this content, please let us know

Comments

author avatar Carol Roach
10th Mar 2015 (#)

wonderful series thank you, my son is going to start a webpage this will be handy for him

Reply to this comment

author avatar Robert Ramstetter
12th Mar 2015 (#)

Thank you for the input. I will have more soon.

Reply to this comment

Add a comment
Username
Can't login?
Password