Tutorial on HTML
Learning HTML is really easy and you do not require any previous knowledge of web
designing or programming.
HTML Basics
HTML - Hyper Text Markup Language (Not a programming
language, but a mark-up language) for creating web pages.
HTML is just a simple text file which is read by web browsers (like Internet Explorer
and google Chrome) and displayed as web page.
With HTML, you can create your own website. This tutorial on html is intended for
beginners.
Software Requirements:
You do not need any special software or web server to follow this tutorial on html.
For creating simple, static websites, there is no need of any special software.
Although there are several software like Visual Web Developer, Dream weaver, FrontPage,
etc. available for generating HTML codes; I strongly recommend that you start with
notepad for writing and editing HTML files. Alternatively, you may use any
other text editor of your choice.
Go to start >> All Programs >> Accessories >> Notepad (In windows operating
systems)
Optionally, You may also use our
HTML Tester for testing your HTML codes.
We will recommend to use other software at right time once you progress. Start by
creating a new folder at any place in your computer for storing html codes (preferably
on desktop for easy access).
Rename it as 'html' for clarity. Keep all the codes you learn in this tutorial on
html to this folder for your ready reference.
Make sure you save the files with either '.html' or '.htm' extension (in place of
default '.txt' for text files). Both these extensions are one and the same; you
may use whatever you like!
HTML Code for your first web page!
Type the following code in notepad or
HTML Tester. I recommend that you actually type (no copy-paste here!).
These HTML codes may look like a little bit strange to you. But don't worry; we
will come back to that just in a moment.
My First Webpage!
Save the text file as 'myfirstwebpage.html' or 'myfirstwebpage.htm' in html
folder. Remember to change the extension as '.html' or '.htm' in place of default
'.txt' or your html code will not work! Now go to 'html' folder where you have just
saved your web page and double click to open it. Alternatively, if you are using
HTML Code Tester, you can view the result instantly.
Wow! You have just created your first web page. Congratulations...!
HTML Tags & Elements
Now let's get into the
html codes and learn some interesting things.
This is the start of the
basic tutorial on html, so I need your
focus here!
HTML Tags Example
In the example above, <html>, <head>, <title> and <body>
are all HTML tags. HTML tags are code words surrounded by angle brackets. Tags are
used by web browsers to mark-up the web pages. There are many types of tags nested
in HTML document, each having different meanings. Most of these tags come in pair
- starting tag and end tag. End tag is different from starting tag by a forward
slash "/".
Web pages are made of a series of elements. Elements consist of start tag, end tag
and some content in between. In the example above, "<title>My First Web Page</title>"
is an element. At this time, the things may look a little difficult to you, but
keep Reading on!
HTML Tags
As of now, treat <html> tag as the starting and end tag of any HTML document.
The html codes between <html> and </html> makes the web page. All other
tags come in between these parent tags.
<title> tag describes the web page title. The content between these tags appear
at the title bar of the page.
Putting right and appropriate title for your web page is very important. Search engines
like 'Google' and 'Bing' give a lot of importance to the title of the page in their
search results. Make sure to put an appropriate title to all of your web pages.
<title> tags are put in between <head> tags. The content between the
<head> tags does not directly appear in the main content of web page. However,
it is primarily used for providing information about the page apart from some other
functions (we will come back to this later). <head> tags are placed before
<body> tags in html structure.
The text between <body> and </body> tags are the main contents visible
on the web page.
Tutorial on HTML - Notes
- The tags used in this example will be used in almost all your HTML documents. Make
yourself familiar with these html codes.
- Starting tags must be accompanied with respective end tags. It is a good idea to
write starting tag and end tag first and then add content in between.
- HTML tags are not case-sensitive. It means browser will equally treat <html>
and <HTML>. However, the correct practice is to always use lower-cases for
html codes.
Well....it was a lot of theory. However, these are basic tutorial on html and must
be understood clearly for building strong foundation. Repeat from top, unless you
are comfortable before moving ahead!
HTML Headings
HTML Headings are just the same as you have expected - 'Heading' or 'Title' of the
webpage.
Headings are defined with <h1> to <h6> tags, 'h1' being the most important
and prominent. The size of the text between these tags reduces with 'h2', 'h3' and
so on. By default, headings are displayed in bold text.
Now let's write some HTML codes to test the headings in browser. Open notepad or
any other text-editor and type the following html codes. Alternatively as usual,
you can use HTML Code Tester.
HTML Headings Example
Save this webpage as 'headings.html' in html folder. Open this file in your web
browser to see the difference between various html headings. Did you notice the
gap between the html headings? This is because browsers add some empty space just
before and after headings to make these more prominent.
Tutorial on HTML - Notes
- HTML headings are important part of the web page and should be used only when actually
required.
- Most prominent heading i.e. 'h1' should ideally be used only once in a web page,
other may be used multiple times.
- As far as possible, less prominent headings should be nested within the more prominent
headings.
- Headings are used by search engines to correctly index the structure of your page.
Don't use headings to merely make text bold or prominent.
HTML Paragraphs
Now that you know how to put a heading, its time now to know about the HTML paragraphs!
Both html headings and html paragraphs are put in between <body> tags. These
are used to publish your written contents.
HTML paragraph is defined with <p> and </p> tags. As with heading tag,
some gap is left before and after the paragraph tag.
Modify your html code to the following:
HTML Paragraphs Example
Save the file and open in your web browser. As you can see, it is pretty simple
to use the html paragraphs!
You may have expected a line break in the second line of the paragraph; however,
web browsers will eliminate all line breaks and extra spaces automatically when
the page is displayed. So what to do?
HTML - <br /> tag
To introduce a line break, use <br /> tag. You may use two or more <br
/> tags for more spacing between the lines. As you have noticed, 'br' tag does
not come in pair, only <br /> is used. To test <br /> tag, change the
html codes between paragraph by inserting a <br /> tag as following and test
in your web browser:
HTML 'br' tag example
You may use <br> in place of <br /> to get the line break, however,
it is not the right practice.
HTML - Horizontal Lines
<hr /> is used to introduce a horizontal line inside the page. Its primary
use is to separate two contents. Like <br /> tag, <hr /> also does not
come in pair. Use of 'hr' tags at appropriate place makes your web page more readable
and professional! Try with the following modification in your code:
HTML 'hr' tag example
Viewing HTML Source Code
We now know that the websites are made in HTML. So, how do you see the HTML source
code of any web page?
It's really simple. Just right click on the web page you are currently viewing and
select 'view source' or 'view page source' or anything similar. If you see the HTML
source codes of large web pages, it may seem to be little complicated and confusing.
But don't worry; as you progress you will start understanding it easily.
For HTML documents stored locally (without web server) like yours; you can edit
and save the source code file directly. After that just click 'Refresh' or press
'F5' in your web browser to view the changed content.
Well, its time to have a break! This is the end of first part of basic tutorial
on html.
You need to do lots of practice with the tags you have just learnt. Try to create
multiple web pages to experiment with and learn. You should move to next chapter
only when you are fully confident!
Basic HTML Tutorial
|
Intermediate HTML Tutorial
|
Advanced HTML Tutorial
|