Basics: Creating Your Very Own HTML Document

This brief tutorial will guide you through creating your first web page.

What is HTML, and What Do I Need?

In order to create an HTML document you have to understand that HTML is the language of the Net. It’s a simple yet universal mark-up language that gives web developers and designers the ability to create complex pages of text that turn into images, styles, and valuable content that can be viewed by any one person using any sort of computer or browser on the web.

Some of you may have heard that you need some sort of special software in order to publish your own HTML page, however that is a blatantly false statement.

Here’s a small list of all the tools you need:

-A word processor (such as SimpleText, BBEdit, Notepad, or Microsoft Word)

-A simple working knowledge of HTML. (Fortunately HTML is easy and fun to learn!)

Yup! Thats it! These are all the tools you need as of now, told you it was small list.

Tags

Hyper Text Mark-up-Language mostly consists of several tags that are embedded into a simple text document. They are really just hidden behind the scenes, controlling most of what it lets you view, and what it wants you to view at the designated time. Hm, kind of reminds me of the parental control feature on the tv a bit.

HTML tags heavily take into account the existance of the English language. As most of the tags are words (such as blockquote) or abbreviations (such as “p” for paragraph), but they’re uniquely separated from the regular text since they’re placed in small angle brackets (such as these < >). Therefore the bold tag would look like <b>, and the blockquote tag is <blockquote>.

There are certain tags that will have the most influence on how the page will be formatted (for example; <p> begins a new paragraph, and <br> can break the last line within the paragraph to allow a space), and others differentiate how the words appear (<i> makes text italic). Most others provide information — such as the title — that doesn’t appear on the page itself.

One very important thing you must remember about tags is that for every one tag there is another one paired along with it. Every time you use a tag – say <br> – you must also add and close it off with another tag – in this case, </br>. Note the slash – / – before the tag “br”; that’s what keeps in contrast the closing tag from the opening tag.

A basic HTML page always begins with the tag <html> and ends with </html>. In between, the file has two sections – the header and the body.

The header enclosed by the <head> and </head> tags – contains information about your page that won’t be visible on the final page, for example the title. The body enclosed by <body> and </body> – is where the real HTML action takes place. Every thing that appears on the page is contained within these tags.

Now On To The HTML Document

I think we’re ready to start creating a simple page. Right?  Ok the first step, of course, is to create a new text document (remember, it should be saved as “Text Only” or “Plain Text” if you’re using a word processor that’s fancier than, say, SimpleText or NotePad) and name it “anything.html” where “anything” is, um, well basically anything at all.

Your basic document should look something like this:

<html>
 <head>
 <title>SimpleHelp.Net</title>
 </head>

 <body>
 <h1>HTML Basics</h1>

 <p>This is a simple article to help you create a working HTML page on SimpleHelp.Net!</p>

 <p>Simple helping on SimpleHelp.Net :)</p>

 </body>
 </html>

Within the <head> tags, we have the title “SimpleHelp.Net” which will appear in the bar across the top of your browser.

Within the body tags, you should have everything that will be clearly visible on the page. With what we’ve written above it will look something like this:

HTML Basics

This is a simple article to help you create a working HTML page on SimpleHelp.Net.

Simple helping on SimpleHelp.Net :)

As you might have guessed, <h1> is the tag for a headline (the largest headline, in fact compared to <h2>, <h3>, and so on) and <p>, of course, marks the beginning of a new paragraph. Each paragraph is closed off by a corresponding </p> tag. As should every other tag be closed off by their correspondant tags that include a “/”.

Does “HTML-ing” seem pretty simple? Well guess what? It sure is!

Every page has a source code and this can with this you can view every web pages HTML code by accessing it through your browsers menu options. And best of all, you don’t need your own homepage to practice! You can save HTML documents on your local or portable drives and then have them open up using the Open option under the File menu within your browser.

I wish you all the best of luck as hopefully this has helped a couple novice readers create an HTML page and maybe even helped refresh a few of the more intermediate developers minds as well.

Feel free to comment!

{ 7 comments… add one }
  • nicolas December 6, 2008, 3:45 pm

    You cannot close a br tag.

    Also, any plain text file with html extension is enough.

  • Joel Reyes December 8, 2008, 8:48 am

    To clarify a bit, it’s true a br tag shouldn’t be closed as it is one of the two existing tags that are self-closing, the other tag is the tag. In this article the closing of the br tag was only an example.

    Yes this is correct, any plain text file saved with the extension .html is suffice.

    Thank you Nicolas for your comment. We appreciate your additional information.

  • Joel Reyes December 8, 2008, 8:51 am

    The two self-closing tags are the br and img tags.

  • zandra January 17, 2009, 1:03 pm

    hej här ägger man bild om,djur,hus,strand,vänner,självpoträt,och mera,

  • Jose Reyes May 17, 2009, 10:36 am

    according to w3c , you have to use
    when adding a line break

  • angelo August 24, 2009, 12:56 am

    hmtn

  • cseyceecuece April 1, 2012, 8:50 pm

    Комнатные растения

Leave a Comment