The Tutorial-Wizards Easiest Tutorials On The Web

HTML Basic – How to make a website Part 1 ‘Hello World’

Author: Dan1601

Aim: To learn simple tags, and create a basic 'hello world' file.

Requirements: Notepad or equivalent.

Howto:

    • The first thing you should know about HTML, is that it uses tags to tell your browser what to display, and how to display it. Tags are usually enclosed in < and >. These tags are also used in pairs - the first one is used to open a statement, and declare any terms. The second is simply used to end the statement. This will be discussed later in the tutorial.
    • The tags that we will be using in this tutorial are:
      • <html> - The <html> tags tell your browser that what it's reading is a HTML file.
      • <head> - The <head> tags are used to enclose any statements that aren't displayed on the page. Eg, the title bar.
      • <title> - The <title> tag is used to tell your browser what to display in the title bar. This tag is usually nested inbetween the <head> tags.
      • <body> - The <body> tag is used to tell your browser what to display in the body of your page.

Note that each of these have a corresponding 'close' tag. They are usually the same as the open tag, but with a forward slash (/) before the tag name. Eg, </html>

  • The basic structure of a HTML document is as follows:
    <html>
    <head><title></title>
    </head>
    <body>
    </body>
    </html>
    Notice how each tag has a corresponding close tag?
  • Since this is a basic tutorial, we will just add some simple text -- nothing too fancy ;)
    First of all, we would like the title of our page to show 'My First Hello World File'. All we need to do to make that happen, is write that in between the <title>and </title> tags. The reason we put it before the close tag, is because the close tag tells the browser where that field stops. If we write that after the close tag, the browser doesn't think that it's a part of the title, since it has already ended its reading of the title.
  • To make something appear in the body of the page, you simply need to write it inbetween the <body> and </body> tags. Let's use a simple 'Hello World' statement for this example.
  • So far our html document should look like this:
    <html>
    <head><title>My First Hello World File</title>
    </head>
    <body>
    Hello World
    </body>
    </html>
  • To preview our file, we have to save it as a .html file. To do this, go to File>Save As, or simply press Ctrl + S, and save the file as Hello World.html. Go to where you saved the file, and open it in your internet browser. You should see a white page with the text 'Hello World' with the page title as 'My First Hello World File'.
  • In the next HTML tutorial, we will learn how to make our page prettier and more interesting using some new tags.
  • You can download the file we created from this link.

Troubleshooting:

  • The file I saved won't open in my browser! - Chances are it didn't save as a .html file correctly. When you save it, make sure the 'Save Type' is set to 'All Files', and not to anything else.

 

Comments (0) Trackbacks (0)

No comments yet.


Leave a comment

Trackbacks are disabled.