Beginners Guide to HTML
By: Jool
A step-by-step guide to making your first HTML page.
1. What is HTML?
HTML stands for 'Hyper-Text Markup Language'. It is the code which makes up
pretty much every page you see and read on the internet. Many other languages
are based around HTML, so you can think of it kind of like the building blocks
of the web.
2. Basics
There are a few basic things you absolutely have to know before we even start
our first line of code. 'Tags' are commands that your browser reads, they always
start with '<' and end with '>'. Now, tags must have an opening tag and
a closing tag so that the desired result is obtained. For this example I'll
use the bold tag (<b>).
<b>Text in here is bolded!</b>
Notice that '/' in the closing tag? That tells the browser that the bolded
text should end where that closing tag is.
3. Your First Page
There are many HTML editors available out there, but for now to code our first
page, I suggest using notepad. It comes standard on almost every windows computer.
Any other word processor should do fine as well.
Ok, so you get the concept of opening and closing tags. That's just the beginning.
Now, you're going to make your first page. Before we do anything, type
'<html>', then skip a line and type '</html>'.
All of our code will go between these two tags, this tells the browser we are
using html for our page's code. Then, right under or beside our '<html>' tag we need to type '<head>' and '</head>'.
This is where later on, we can place scripts which we don't want to display
on the page, but still have them included in the page. Anyway, moving on, next,
in between the '<head>
tags, we need to type '<title> and </title>'.
In between these tags we can place our site's name, which will appear in the
browsers title bar (up above File, View, Etc - the same bar that has maximize,
minimize and resize buttons in the right hand side). Go ahead and type in our
page's name, you can always change it later.
Skip down, so that we are one line below the '</head>' tag. Now type'
'<body>' and '</body>'.
In between these tags will be where all our sites content goes! Type in a random
comment for now, like "Hey! This page is made with html!". If you
followed everything correctly, your notepad or word processor screen should
now look something like this:
<html>
<head>
<title>Web page title</title>
</head>
<body>
Hey! This page is made in html!
</body>
</html>
Great! You've just created a web page that almost any computer can read! Now
we have to save it correctly.
To save the file so the internet can understand it, bring up for save screen,
then at the bottom under "Save as type:", hit 'All files'. Then, choose
the folder you wish to save it in (ex. My Documents), and in the file name type:
'index.html' (no quotes). It is very important to save it as a .html file, not
.txt or anything else. It is named 'index', since on your web space, index.html
is he home file, or the file in which the address points to by default.
Now we have that done, you should be able to open it up in Internet Explorer
or any other browser and see the end result!
Congratulations on your first html page!
4. This is too easy for me!
Some simple text too easy for you? Try adding images using the
<img src="url here">
tag to add images to your web page. Of course you have to change the url in
between the quotes so that it points to your image. You can also check out tables,
which enable some very advanced code to be displayed easily on your page in
an organized and function fashion (be sure to check out our tables tutorial).
There are many other functions to html, this covers all the basic knowledge
needed. For more advanced html tags and concepts, please read one of our many
other html tutorials.
|
