- Internet & the Web
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.
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.
- My first website
I have written a short paragraph about using a simple text editor for your first website in my hub 'My first website'. Visit that hub for more information about why to use a simple text editor for your first web page.
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.
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:
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.
The last command
The very last command of our webpage is:
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.
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:
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>.
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>.
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.
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.
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!
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.
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
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'.
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.
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.
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.
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!
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.
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!
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!
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:
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.
- My first website
This hub offers general information about creating your first website. It is very good to read this hub parallel to this hub, as it explains many of the words used in this hub more in detail, such as text editor and web browser.
- My first webpage - adding content to the body
This is part two of the tutorial HTML. It will show you how to add text to a basic HTML page.
- My first webpage - designing your text using bold and italic
This is part three of the tutorial. It shows you how to use simple HTML commands to make texts appear bold and italic.