Basic HTML or My First Web Page

In this section we are going to take the sentence we used as an earlier example and turn it into a proper HTML file and then view it in a web browser.

Creating your file

  1. First make a folder on the desktop and give it a name you will remember [HINT: right-click on desktop and choose New and then Folder]. This is where you will be storing your web page.
  2. Go to Start, Run and then type notepad and press ok. Alternatively you will find it under Accessories in the Programs section on the Start menu.
  3. Save the new blank file as example.html to your folder. [NOTE: Be careful to change the option Save as Type from Text Documents (*.txt) to All Files before you press Save]
  4. If you now look in the folder you will notice that Windows has automatically recognised the file as a web page.

Where do I start?

Although Windows has recognised the file as HTML because of it's ending it is still only a text file.  There are a few basic elements which are essential to set the framework for our HTML.

Have a look at, but do not copy, the following code and see if you can identify the important elements;

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
UNSW Science Communication is a great degree.
</body>
</html>

Can you see a structure to the HTML?  What do you think the title does? This might look easier.

<html>

<head>
<title>My First Web Page</title>
</head>

<body>
UNSW Science Communication is a great degree.
</body>

</html>

The <html> and </html> tags are used to tell the web browser that the information between in HTML.
The <head> and </head> tags are used for information about the web page.  This includes keywords and descriptions for search engines. It also includes the <title> and </title> tags which are for the title which appears in the top toolbar of the window.  Can you see the title for this page?
The <body> and </body> tags are for the information which will actually appear on the page.

What will it look like?

  1. Type the above code into your notepad file and save it.
  2. Open the file in your web browser.
  3. Did it look like you expected?

Can you create your own HTML?

  1. Change the title of the webpage to your name.
  2. Change the HTML so that our sentence will look like the one below.

UNSW Science Communication is a great degree.

  1. Save your changes and open the file in your web browser. [HINT: If you leave the web browser open you can just hit refresh each time to see what your changes look like]

The following HTML tag information may make this easier;

Bold <b> & </b> [or <strong> & </strong>]
Italic <i> & </i> [or <em> & </em>]
Underline <u> & </u>

Once you think you have finished open your page in your web browser to show the people next to you. Do they look the same?

Finished?

Congratulations you have just created your first web page.
While you are waiting for others to finish go to http://www.ncdesign.org/html/index.htm and have a look at other HTML tags and what they can be used for.  There are too many tags to remember.  You might want to keep this guide open for reference, especially when you are creating your own pages at home.

 

Next: Advanced HTML