In this tutorial we will discuss what HTML is and what it is used for, also some examples that you can use to code your first page!
HTML (Hyper-Text Markup Language) is a web programming language, the building blocks of any website. You could think of it like the alphabet of the english language.
It is used to tell the Web Browser (Internet Explorer, Firefox, Netscape etc.) how the website should look.
HTML is just one of many web languages used in websites, but it is the only language which is used in every web page. Meaning learning HTML is a must!
How to view HTML
Every web page on the World Wide Web uses HTML, you can view this HTML with a few simple clicks of the button, for example if you:
Right click with your mouse on this page.
Click view source.
It will bring up notepad or whatever your preferred editor is. On this page you will notice lots of code that will mean nothing to you except jargon.
At the very top of the jargon you will see the text:
<HTML>
How do I make HTML?
You can make HTML with notepad or any other wordpad you may have downloaded. You may have or have seen many of these WYSIWYG programs which input all the HTML for you and you just have to tell the program what you want it to look like, while these are great they can generate bad code and slow your site down. Learning HTML is the preferred method of web design even so all code outputted by these programs can be checked over and validated.
To make HTML in your notepad you just have to type in the code (examples will be stated further along in this tutorial) and click 'save as' choose a file name and at the end add a .html or .htm make sure to include the dot for example webpage.html this will enable the saved file to be viewed by your browser can you can see the output effects of your work.
What is HTML made up of?
The HTML language is made up of 'tags'. Tags are functions such as the above <HTML> example which are enclosed in < and > arrows. All tags open and close, for example our <HTML> tag this is called the open tag, the closed version of this tag would be </HTML> all tags in the HTML language open and close like this. (with a few exceptions which you needn't bother with at this time)
What are tags used for?
Tags are used to start a function and close it with the text inside these tags effected by the tags function. For example if we use our <HTML> tag:
<HTML>
your website text here
</HTML>
Notice on our example how the tag opens the information is entered then when all information has been entered the tags closed with the / slash.
There are four tags that are necessary to make a web page, these are:
<HTML>
<HEAD>
<TITLE>
<BODY>The above tags represent different parts of the web page. The <HTML> tags always comes first and should always be at the top of your code. Followed by the <HEAD> tag then inside the <HEAD> tag is the <TITLE> tag. The <TITLE> tag is then closed (remember all tags close with a / symbol) followed by the <HEAD> tag. Next the <BODY> tag is opened then it is closed. And finally the <HTML> tag is closed. If you have followed this you should have the example below:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>What are these tags used for?
The above tags make-up the structure of your webpage like the skeleton of the human body, now I shall discuss which each tag is used for.
<HTML>
This tag tells the browser that the following code is HTML and should be treated by the browser as such.
<HEAD>
This tag not only stores the <TITLE> tag but it also stores the information for search engine descriptions and javascript functions but are outside the scope of this tutorial.
<TITLE>
Inside this tag you can name the title of your web page, for example if i was doing a website about dogs i could name it Dog information and pictures.
<BODY>
Inside this tag is all the site content, content is what you wish to display to the viewer of the web page.
Creating my first web page
Okay now that you know what HTML makes up a web page its time to make your first web page!
Open up notepad or your preferred text editor.
Input the following code:
<HTML>
<HEAD>
<TITLE>Welcome to my web page!</TITLE>
</HEAD>
<BODY>
Hi, this is my web page what do you think?
</BODY>
</HTML>
Pick a place to save it such as My Documents and name it: Webpage.html
Remember to add the .html to the end.
Now go to my documents and click the Webpage file.
Congratulations! you have just made your first webpage.
discuss this topic to forum
