My first webpage

A basic introduction to HTML

HTML is the language used to create websites. It stands for HyperText Markup Language. And that is exactly what it is: a markup language for hypertexts. A 'hypertext' is a text in which some of the words are linked to other parts within the text or linked to other (related) pages. A 'hypertext' basically means that the text allows you to jump to other texts or other pages, by just clicking on a word or phrase inside the text. In this way the text no longer has a linear structure like a book, but becomes part of complex collection of texts.

HTML is a simple computer language which enables you to present your texts and information on the world wide web. On this page I will give a basic introduction to HTML. If you follow all the steps in this tutorial you will have your own first webpage ready at the end of the page. This hub only explains the basics of HTML. Check my other hubs for more tutorials and information.

HTML 3.2

In this hub I am using HTML 3.2. This is the version of HTML which was used when I started doing webdesign, in 1996. Many things since then have changed and HTML 3.2 is no longer the standard to use. But I will anyway start with this old version, because, if you start at the beginning, it will make it easier for you to understand changes to the language and later versions of HTML.

'It really works now!' - Cym in 1999
'It really works now!' - Cym in 1999

A simple text editor

The best is to use a very simple text editor for your first introduction to HTML. I have written a short paragraph about using a simple text editor in my hub My first website. To keep it short in this hub: if you are working on windows, start Notepad. You can usually find this program under Start -> All programs -> Accessories -> Notepad

If you are working on Macintosh you can use SimpleText. (Is that program still part of the macintosh system?) On Linux you can use gedit, kedit, jed, vim or any other simple text editor. The basic rule is: the simpler, the better. We will do the design of the page with the HTML code which we are going to type. The design is not done in the editor. The editor is just used to type the HTML code.

Start typing at the top of the empty file in your text editor.
Start typing at the top of the empty file in your text editor.

And now... here it goes!

Probably the two most important characters which we are going to use to create our first webpage in HTML are the signs < and >. These two signs are inequality signs and are known as 'smaller than' (lt - less than) and 'bigger than' (gt - greater than). In HTML they are used together as brackets: < >.

All the commands in HTML are written between these two signs. Anything written between these two characters is interpreted as HTML-code. These commands, written between < and > are typically called 'tags'.


The first command

The first command of our webpage is:

<html>

This command comes at the top of the empty page in the text editor. Simply type it as the first word on the first line. Make sure that the brackets are exactly like I've typed it here.

This command basically means that from now on we are talking in HTML language. Everything after this command is written in HTML language.

Type the first command for the webpage at the top of the file.
Type the first command for the webpage at the top of the file.

The last command

The very last command of our webpage is:

 </html>

Type this command completely at the bottom of the file in the text editor. You will have to press return a couple of times to get to the bottom of the document.

The last command of the page goes at the bottom of the file.
The last command of the page goes at the bottom of the file.

HTML commands come in pairs

HTML commands almost always come together as a pair. There is a command which marks the beginning and there is a command which marks the ending. In the file we have so far typed <html> and </html>. The command <html> marks the beginning. It means that here the HTML language starts. The command </html> marks the end. It means that this is the end of the section with HTML language.

The closing command is always the same as the opening command, but with a slash / at the beginning, after the bracket. You will see this structure repeated again and again in HTML. It is important that you recognize this pattern:

<command>     </command>
 


A webpage as a human being

A webpage has the shape of a human being, in other words, it has a head and a body. The part of the webpage which is defined as the 'head' is the part which holds general information about the page. The part which is defined as the 'body' is the visible part of the website. This is the part which you will see when you view the page in a web browser. This is also the part of the webpage which can be designed.


First the head

First we add the 'head' to the webpage. This is done by adding the commands <head> and </head> after the first command <html>.

A webpage has a head and a body. First type the commands which define the head.
A webpage has a head and a body. First type the commands which define the head.

and then the body

The body comes after the head. Add the commands <body> and </body> after the commands for head, but before the last command </html>.

Type the commands which define the body. Type them AFTER the commands for the head and BEFORE the last command of the page.
Type the commands which define the body. Type them AFTER the commands for the head and BEFORE the last command of the page.

The title

The head is used for general information about the page. At this moment the only information which we will add here, is a title for the webpage. The command for the title is 'title'. The HTML commands look like this: <title> and </title>

Place those two commands between the commands for the head.

Type the commands for the title between the commands for the head.
Type the commands for the title between the commands for the head.

A title for your webpage

Between the commands <title> and </title> comes the title for your page. At this moment it is not so important what you call your first page. Since this is our very first attempt to create a webpage, let's give it the title: My first webpage

These words go between the commands for the title.

Type a title for your page between the commands for the title. You can choose any title you like, for example 'My first webpage'
Type a title for your page between the commands for the title. You can choose any title you like, for example 'My first webpage'

A special title

A title can be anything you like, but it should be typed in normal, plain text. It cannot contain HTML commands. You can type anything you like, using both lowercase characters and CAPITALS. You can also use punctuation as in a normal sentence. And you can use numbers and specials characters. However I would advice for now to stick to the basic 26 characters from the english alphabet, together with the digits 0 to 9 and the characters . , - _ ! and ?

Make sure to type everything AFTER the command <title> and BEFORE the command </title>. Don't mix the words with the brackets > and < from the commands.

You could, for example, put an exclamation mark at the end of the title:
My first webpage!

The title can be a normal sentence with capitals and lower case characters. This example has an exclamation mark at the end of the title.
The title can be a normal sentence with capitals and lowercase characters. This example has an exclamation mark at the end of the title.

A head and a body

It may sound strange, but this is it! This is all we need for our first webpage. These few lines of code form the basic structure for every single webpage on the Internet. The code which we have typed, divides the file into a section where information for the head can go and into a section where information for the body can go. The image below with the coloured block highlights the two different sections. Inside the head is the section which defines the title.

The two main parts, the head and the body, are enclosed by the commands <html> and </html>.

This coloured image is just here to make the structure of the code more visual. Don't worry if all this still sounds very abstract. Just continue with the next steps and come back to this page again at some time in the future. All this will make much more sense when you have successfully made your first few webpages.

The code divides the page into a head and a body. Inside the head is the title.
The code divides the page into a head and a body. Inside the head is the title.

Save as

Now comes the part which is probably the most complicated in the beginning. We are going to save the file and then open it in another program to view it. To save the file, simply click on

File -> Save as

Choose 'File -  Save as' to save the file.
Choose 'File - Save as' to save the file.

Saving the page

When you click on 'File -> Save as' a new window will open where you can save the file. But don't save it too quickly! There are many things to take care about when saving your file if it is going to be used as a webpage. I can write a separate HUB with all the details to be aware of. For now, I will just keep it short.

We are going to save the file as: first.html

You can type this name, exactly like I put it here, in the field 'File name'.

If you are using Notepad, the simple text editor on Windows, you will also need to change the file type. Notepad usually automatically adds '.txt' at the end of the filename. In order to avoid this, you should click on the tab 'File type' and select 'All files'.

Choose 'All files' from the menu at 'File type'.
Choose 'All files' from the menu at 'File type'.

Where do you save your file?

It is important that you know where you are saving your file on your computer. When you click on 'File -> Save as', the computer offers you a possible location on the system where you can save your file. Very often this will be inside the folder 'My documents'. But it can also be some other location. It is important that you know where you are saving the file. You can save it right there in the folder which the program suggests to you, but you have to be able to later find back your file.

As a general rule, it is a good idea to create a new folder for your webpage. Right now your website is just one page, but soon enough there will be more pages, which should be together in the same folder. An important detail of good webdesign is to keep a good overview of the structure of your website. This starts with creating a separate folder for the project.

Press the button 'New folder' to create a new folder for your website.
Press the button 'New folder' to create a new folder for your website.

The file system

You can create a new folder by clicking on the button 'New folder'. After you have created the folder you should change the name, for example to: web

Create the new folder on a location on your hard drive which you can easily find back. For example, you can create a folder inside the folder 'My documents'. But you can also create a new folder directly on the drive C. The path would then be Computer -> C: -> web

It doesn't matter where you save the file on your computer. The only rule is, that you KNOW where you saved it and that you are able to find it again.

Create a new folder and change the name, for example, to: web
Create a new folder and change the name, for example, to: web

Saving the file

After you have created a new folder, open this new folder by double clicking it. We are now ready to save the file inside this new folder. Before you click 'Save', check one more time if the name of the file ends with .html and if the file type is set to 'All files'.

When everything looks okay, click 'Save'.

Remember, it doesn't matter where you save the file on your computer. The only rule is, that you KNOW where you have saved it and that you are able to find it again in the file system.

Open the new folder you just created and click 'Save' to save the file inside this folder.
Open the new folder you just created and click 'Save' to save the file inside this folder.

The HTML file

After you have saved the file, you will see the name, which you typed to save the file, at the top of the editor window. In the picture below it is inside the blue bar at the top of the window. It now says: first.html - Editor

'Editor' is the name of the program. It could also say: first.html - Notepad

If you are using a different text editor, of course these details will be different!

The file after you saved it. You can now see the file name in the top of the window.
The file after you saved it. You can now see the file name in the top of the window.

View your first webpage in a browser

And now comes the big moment! After you have saved the page, you can now view it in a browser, to see what your first webpage looks like. To do this, you first need to start the browser. You can open your favourite browser, Firefox, Internet Explorer, Opera, Safari, which one you prefer. Most likely you already have an open browser window, because you are reading this website right now in a browser window!

In the browser go to the top left part of the window and click on 'File'. You will now see a menu similar to the File-menu in any other program. Click on 'Open' or 'Open File' inside the menu that shows up under 'File'.

If you are using Firefox you will immediately come to a window where you can select a file from your file system. If you are using Internet Explorer you will see a small window with an empty field. Click on 'Browse' below that field, in the right bottom of the window. You will now also come to a window where you can select a file from your file system.


Choose 'File -  Open File' to open a file from the local file system.
Choose 'File - Open File' to open a file from the local file system.

Find the file

You can use a browser to view websites online, but you can also use a browser to view webpages on your own computer. You don't even need to be connected to the Internet to view webpages if they are saved on your own hard drive. You can open a webpage via the menu 'File -> Open', just like you can open documents in any other program on your computer.

To view the webpage which we created, you need to find back the file which we saved before in the editor. Find back the folder which you created in your file system, open that folder and look for the file called 'first.html', the file which you saved just before in the text editor.

When you have successfully located the file, select it and click 'open'. In Internet Explorer you will have to click 'OK' one more time in the small window after first selecting the file.

If you now see something like the image below, congratulations! You have successfully made your very first webpage!

My first webpage displayed in Mozilla Firefox
My first webpage displayed in Mozilla Firefox
My first webpage displayed in Internet Explorer
My first webpage displayed in Internet Explorer

But there is nothing to see?

At this point, it might seem a bit disappointing. We put all this work and now there is nothing to see? If you look carefully, there is something to see. In the top bar of the browser window, you can see the title which we gave to the page. In this case: My first webpage

The title is displayed in the top bar of the program. It is also visible on the tab, if you have more pages opened simultaneously in different tabs.

The main part of the page is empty. This is correct. This part of the webpage is the part which is defined as the body of the page. And until now, we didn't put any content in the body, we only added a title to our page. So it is correct that the page is completely empty.

If your page looks like this, with the title displayed in the top of the browser window and with the main part of the browser all empty, then you have successfully created your first webpage. You are now ready to fill your page with content!

Add some content in the body, between the two commands which define the body.
Add some content in the body, between the two commands which define the body.

Adding content to the web page

Some might say, that webdesign only starts here, from the point where we start adding some content to the page. Personally I think that is not true. I think that it is very important that you understand the basics of creating a file in a text editor, saving it and then opening the same file a web browser to view it. I will write more about this process, as I have noticed that for many people this is not so easy to understand.

In the next step of this tutorial I will show you how to add text to the page. After you have added text to the page, the tutorial will continue to show you how to design the text in a very simple way.

This tutorial and also the next steps might seem very simple. However, I think that it is very important that you understand every step. So don't feel silly, start with the basics and you will make much greater steps in the end than when you start somewhere in the middle with very complicated things without understanding the basics.

The next part of the tutorial is here:
http://hubpages.com/_cym/hub/how-to-add-content-to-the-body

Leave a comment if you have any feedback. If you become a follower you will automatically know when there is a new part of the tutorial online.

More by this Author


Feedback - Leave a comment! 19 comments

Mark - NH 7 years ago

Thank you for creating this tutorial !!!

You are an excellent teacher, and this is an excellent way to learn.

If there is any justice, hubpages.com will be a tremendous success !!!


cym profile image

cym 7 years ago from Europe Author

Hello Mark, thank you so much for your beautiful comment!


otacon 7 years ago

first i must 2 say thx ..

but .. how can add a URL .. or add a color on the page ?!

please message me at lazy-genius AT live DOT com


cym profile image

cym 7 years ago from Europe Author

Hello otacon

I will try to add a second part to this hub soon, which will explain how to add some color to your page. If you join my fanclub you will automatically be updated when I add a new hub, in case I forget to message you when I've added the second lesson...


Killian  7 years ago

Thanks for adding color to this resentation is colorfull


SAJAG 6 years ago from INDIA

hello guys,

i m teachin html from very scratch n every day u will be provided a small task:

http://hubpages.com/education/MAKING-A-NEW-WEBSITE


adorababy profile image

adorababy 6 years ago from Syracuse, NY

For a time HTML coding was so overwhelming to me but then when I started reading more about it on the net, it's not so impossible after all. Patience is indeed a virtue.


Barbi 6 years ago

I just want to say THANK-YOU SOOOO MUCH! You have the magic! I have tried and tried to learn what you have just taught me (in such a short amount of time!!),but would end up getting so frustrated because I didn't know a single thing about where to even start! Fortunately,you know just how to explain everything so that it really clicks! I needed to have a basic foundation established before I could even think about building on!

Thanks for taking the time to help others learn...you are a wonderful teacher!


Shiva 6 years ago

Thanks Man this was awesome, goona search for more now to take it to the level!!


cym profile image

cym 6 years ago from Europe Author

Thanks a lot for your comments Barbi and Shiva!

Your comments mean a lot to me and I will try to write some more tutorials to take you to the next level. Thanks!


Jacqui 5 years ago

Hi Cym, thank you for your tutorial, very simple and clear!

I have a couple of questions.

I have a 




 

 in the body of my website? Why is this? Also, how do I get back into the file to add more to the website? Now that it is in .HTML I can't open it to see the code in text edit? It displays like a webpage in text edit.

Thank you

Jacqui


cym profile image

cym 5 years ago from Europe Author

Hello Jacqui

Are you working in Text Edit on a Macintosh?

If you want to open the .HTML file as code in Text Edit on a Mac, you need to do it like this:

- First start the program Text Edit.

- Then from the program Text Edit choose: file -> open file

- And then, before you open the .HTML file that you want to edit, it is very important that you tag the box 'Ignore rich text commands'

You must check the box with this option!

Sometimes the option is also called:

'Ignore rich text commands in HTML files'

After checking the box, open the .HTML file

It should now display as code.


Louise 5 years ago

I have got to say cym, this is brilliant, i really appreciate the time and effort you have put into this just to help ppl like myself.

i have just done my first webpage following your steps. i done it for the first time with no mistakes as its that easy to follow.

many thanks



Cam 5 years ago

Thank you! This tutorial is so easy to understand. Very well written.


cym profile image

cym 5 years ago from Europe Author

Thank you Cam and Louise, for your nice comments!


adomcruze profile image

adomcruze 4 years ago

Great Execution, step by step knowledge. Thanks for sharing..


HenryDwan 4 years ago

Thanks this was helpful


hotwebideas profile image

hotwebideas 4 years ago from New York

Hey Cym, thanks for this tutorial. I am adding some HTML 5 video hubs to my Hubpages profile, but this was a great tutorial for beginners although I cannot read German. LOL

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working