1

What is HTML?
HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else
connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and
quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and
requirements of the growing Internet audience under the direction of the W3C, the organisation charged with designing
and maintaining the language.
The definition of HTML is HyperText Markup Language.

HyperText is the method by which you move around on the web by clicking on special text
called hyperlinks which bring you to the next page. The fact that it ishyper just means it is not linear i.e. you
can go to any place on the Internet whenever you want by clicking on links there is no set order to do things
in.

Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for
example).

HTML is a Language, as it has code-words and syntax like any other language.

How does it work?

HTML consists of a series of short codes typed into a text-file by the site author these are the tags. The text is
then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser
reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing
your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to
a powerful graphical editor to create HTML pages.

What are the tags up to?

The tags are what separate normal text from HTML code. You might know them as the words between the <anglebrackets>. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the

page. Different tags will perform different functions. The tags themselves dont appear when you view your page through
a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this:

<b>These words will be bold</b>, and these will not.

In the example above, the <b> tags were wrapped around some text, and their effect will be that the contained text will
be bolded when viewed through an ordinary web browser.
If you want to see a list of a load of tags to see whats ahead of you, look at this tag reference. Learning the tags
themselves is dealt with in the next section of this website, My First Site.

Is this going to take long?

Well, it depends on what you want from it. Knowing HTML will take only a few days of reading and learning the codes for
what you want. You can have the basics down in an hour. Once you know the tags you can create HTML pages.
However, using HTML and designing good websites is a different story, which is why I try to do more than just teach you
code here at HTML Source I like to add in as much advice as possible too. Good website design is half skill and half
talent, I reckon. Learning techniques and correct use of your tag knowledge will improve your work immensely, and a
good understanding of general design and the audience youre trying to reach will improve your websites chances of
success. Luckily, these things can be researched and understood, as long as youre willing to work at it so you can output
better websites.
The range of skills you will learn as a result of running your own website is impressive. Youll learn about aspects of
graphic design, typography and computer programming. Your efficiency with computers in general increases.Youll also
learn about promotion and your writing will probably improve too, as you adapt to write for certain audiences.

Do I have to be online all the time?

Not at all. You can code your entire website offline, storing it all on your own computer, and then just transfer all the files
onto the web. Then whenever you have new content, you just add that to the existing online version of your site. Its really
quite simple.

Is there anything HTML cant do?

Of course, but since making websites became more popular and needs increased many other supporting languages
have been created to allow new stuff to happen, plus HTML ismodified every few years to make way for improvements.
Cascading Stylesheets are used to control how your pages are presented, and make pages more accessible. Basic
special effects and interaction is provided by JavaScript, which adds a lot of power to basic HTML. Most of this
advanced stuff is for later down the road, but when using all of these technologies together, you have a lot of power at
your disposal.

TML Example
A small HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

HTML Tags

3
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>

HTML tags normally come in pairs like <p> and </p>

The first tag in a pair is the start tag, the second tag is the end tag

The end tag is written like the start tag, but with a slash before the tag name

Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML
documents and display them.
The browser does not display the HTML tags, but uses them to determine how to
display the document:

----------------------------------------------------------------------------------------------------------------------------------------------------------

HTML (Hypertext Markup Language) is the set of markup symbols or codes

inserted in a file intended for display on a World Wide Web browser page.
The markup tells the Web browser how to display a Web page's words and
images for the user. Each individual markup code is referred to as an element

(but many people also refer to it as a tag). Some elements come in pairs that
indicate when some display effect is to begin and when it is to end.
HTML is a formal Recommendation by the World Wide Web Consortium
(W3C) and is generally adhered to by the major browsers, Microsoft's Internet
Explorer and Netscape's Navigator, which also provide some additional nonstandard codes. The current version of HTML is HTML 4.0. However, both
Internet Explorer and Netscape implement some features differently and
provide non-standard extensions. Web developers using the more advanced
features of HTML 4 may have to design pages for both browsers and send
out the appropriate version to a user. Significant features in HTML 4 are
sometimes described in general as dynamic HTML. What is sometimes
referred to as HTML 5 is an extensible form of HTML called Extensible
Hypertext Markup Language (XHTML).

What is HTML?
Firstly, HTML is short for "HyperText Markup Language". That may sound scary, but it simply
means it is a language for describing web-pages using ordinary text. HTML is not a complex
programming language.

HTML Tags
HTML tags are the hidden keywords within a web page that define how the browser must
format and display the content.
Most tags must have two parts, an opening and a closing part. For example, <html> is the
opening tag and </html> is the closing tag. Note that the closing tag has the same text as the
opening tag, but has an additional forward-slash ( / ) character. I tend to interperet this as the
"end" or "close" character.
There are some tags that are an exception to this rule, and where a closing tag is not required.
The<img> tag for showing images is one example of this.
Each HTML file must have the essential tags for it to be valid, so that web browsers can
understand it and display it correctly.
The rest of the HTML file can contain as little or as many tags as you want to display your
content.

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Only the <body> area (the white area) is displayed by the browser.

HTML Editors
Write HTML Using Notepad or TextEdit
HTML can be edited by using professional HTML editors like:

Microsoft WebMatrix

Sublime Text

However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit
(Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the 4 steps below to create your first web page with Notepad.

Step 1: Open Notepad

To open Notepad in Windows 7 or earlier:

6
Click Start (bottom left on your screen). Click All Programs. Click Accessories.
Click Notepad.
To open Notepad in Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.

Step 2: Write Some HTML

Write or copy some HTML into Notepad.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Step 3: Save the HTML Page

Save the file on your computer.

7
Select File > Save as in the Notepad menu.
Name the file "index.html" or any other name ending with html or htm.
UTF-8 is the preferred encoding for HTML files.
ANSI encoding covers US and Western European characters only.

You can use either .htm or .html as file extension. There is no difference, it is up to you.

Step 4: View HTML Page in Your Browser

Open the saved HTML file in your favorite browser. The result will look much like this:

To open a file in a browser, double click on the file, or right-click, and choose open with.

What is my browser?
A browser is software that is used to access the internet. A browser lets you visit
websites and do activities within them like login, view multimedia, link from one site
to another, visit one page from another, print, send and receive email, among many
other activities. The most common browser software titles on the market are:
Microsoft Internet Explorer, Google's Chrome, Mozilla Firefox, Apple's Safari, and
Opera. Browser availability depends on the operating system your computer is
using (for example: Microsoft Windows, Linux, Ubuntu, Mac OS, among others).
-------------------------------------------------------------------------------------------A browser is an application program that provides a way to look at and interact with all the
information on the World Wide Web. The word "browser" seems to have originated prior to the Web
as a generic term for user interfaces that let you browse (navigate through and read) text files
online.

9
Technically, a Web browser is a client program that uses HTTP (Hypertext Transfer Protocol) to
make requests of Web servers throughout the Internet on behalf of the browser user. Most
browsers support e-mail and the File Transfer Protocol (FTP) but a Web browser is not required for
those Internet protocols and more specialized client programs are more popular.
-->

The first Web browser, called WorldWideWeb,

-------------------------------------------------------------------------

Browser= Computer program (such as Internet

Explorer or Mozilla Firefox) that enables internet users to access,
navigate, and search World Wide Web sites. Browsers
interpret hypertext links ('hotlinks') and allow documents formatted
in hypertext markup language (HTML) to be viewed on
the computer screen, and provide many
otherservices including email and downloading and uploading
of data, audio, and video files. Also called web browser.

10

Introduction to the structure of an HTML document

An HTML 4 document is composed of three parts:
1.

a line containing HTML version information,

2.

a declarative header section (delimited by the HEAD element),

3. a body, which contains the document's actual content. The body may be implemented by
the BODY element or the FRAMESET element.
White space (spaces, newlines, tabs, and comments) may appear before or after each section.
Sections 2 and 3 should be delimited by the HTML element.
Here's an example of a simple HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<P>Hello world!
</BODY>
</HTML>
------------------------------------------------------------------------------------------------------------------------

11
HTML Basics :
PAGE STRUCTURE

All normal webpages consist of a head and a body.

Head
Body

The head is used for text and tags that do not show directly on the page.

The body is used for text and tags that are shown directly on the page.

Finally, all webpages have an <html> tag at the beginning and the end, telling
the browser where the document starts and where it stops.
The most basic code - the code you will use for any page you make, is shown
below:
<html>
<head>
<!Thissectionisforthetitleandtechnicalinfoofthepage.>
</head>
<body>
<!Thissectionisforallthatyouwanttoshowonthepage.>
</body>
</html>
TAGS

Basically, a computer sees an "A" as simply an "A" - whether it is bold, italic,

big or small.
To tell the browser that an "A" should be bold we need to put a markup in front
of the A.
Such a markup is called a Tag.
All HTML tags are enclosed in < and >.
Example: a piece of text as it appears on the screen.
This is an example of bold text.

HTML: the HTML for the above example:

Thisisanexampleof<b>bold</b>text.

As you can see, the start tag <b> indicates that whatever follows should be

12
written in bold. The corresponding end tag </b> indicates that the browser
should stop writing text in bold.
INTRODUCTION

Webpages are written in HTML - a simple scripting language.

HTML is short for HyperText Markup Language.
Hypertext is simply a piece of text that works as a link.

MarkupLanguage is a way of writing layout information within

documents.

Basically an HTML document is a plain text file that contains text and nothing
else.
When a browser opens an HTML file, the browser will look for HTML codes in
the text and use them to change the layout, insert images, or create links to
other pages.
Since HTML documents are just text files they can be written in even the
simplest text editor.
A more popular choice is to use a special HTML editor - maybe even one that
puts focus on the visual result rather than the codes - a so-called WYSIWYG
editor ("What You See Is What You Get").
Some of the most popular HTML editors, such as FrontPage or Dreamweaver
will let you create pages more or less as you write documents in Word or
whatever text editor you're using.
However, there are some very good reasons to create your own pages - or
parts of them - by hand...
WHY LEARN HTML?

It is possible to create webpages without knowing anything about the HTML

source behind the page.
There are excellent editors on the market that will take care of the HTML parts.
All you need to do is layout the page.
However, if you want to make it above average in webdesign, it is strongly
recommended that you understand these tags.
The most important benefits are:
You can use tags the editor does not support.

You can read the code of other people's pages, and "borrow" the cool
effects.

You can do the work yourself, when the editor simply refuses to create

13
the effects you want.
You can write your HTML by hand with almost any available text editor,
including notepad that comes as a standard program with Windows.
All you need to do is type in the code, then save the document, making sure to
put an .html extension or an .htm extension to the file (for instance
"mypage.html").
HEAD SECTION

The head section of the webpage includes all the stuff that does not show
directly on the resulting page.
The <title> and </title> tags encapsulate the title of your page. The title is what
shows in the top of your browser window when the page is loaded.
Right now it should say something like "Basics - Html Tutorial" on top of the
window containing this text.
Another thing you will often see in the head section is metatags. Metatags are
used for, among other things, to improve the rankings in search engines.
Quite often the head section contains javascript which is a programming
language for more complex HTML pages.
Finally, more and more pages contain codes for cascading style sheets (CSS).
CSS is a rather new technique for optimizing the layout of major websites.
Since these aspects are way out of reach at this stage we will proceed with
explaining the body section.
HTML Basics :
BODY SECTION

The body of the document contains all that can be seen when the user loads
the page.
In the rest of this tutorial you can learn in detail about all the different aspects of
HTML, including:

Text
o

Formatting

Resizing

Layout

Listing

Links

14

To local pages

To pages at other sites

o To bookmarks
Images
o

Inserting images (GIF and jpg)

Adding a link to an image

Backgrounds
o

Colors

Images

Fixed Image

Tables

Frames

Forms

Metatags

Hexadecimal Colors

The last page in this introduction will give you an overview of how to proceed
with the HTML tutorial (and beyond).