Introduction to HTML

Introduction to
HTML

2013/02/20 1

Agenda

1. Brief history of HTML
2. What is HTML?
3. How they use tags?
4. Single tags
5. Getting started
6. What is a web browser
7. How a web browser works
8. How does basic HTML looks like
9. Recommended text editors
10. Creating the HTML layout
11. What are the basic things we can include in a HTML page
12. Manipulating Text
13. Creating tables
14. Creating lists
15. Inserting images
16. Hyper links
17. How Beautiful HTML code looks like?
18. Advantages of HTML

2013/02/20 2

Brief history of HTML
• Tim berners-Lee, a British physicist working at Switzerland at
the time of 1989 is the inventor of HTML.And is often credited
as the inventor of www.
• HTML is based on SGML (Standard Generalized Markup
Language) which exists since 1940s, but with out the ability to
link.
• He proposed it as way of enabling researches from remote
sites of the world to organize and pool together information.
• He suggested that you could link text in the files themselves,
through an agreed upon markup language.

2013/02/20 3

What is HTML?
• Hyper Text Markup Language
• Hyper : you can go anywhere and everywhere on a browser.
Document with links.
• Text : you are working primarily using text.
• Markup : The code necessary for making the HTML readable by a
browser. Markup refers to the sequence of characters or other symbols
that you insert at certain places in a text or word processing file to indicate
how the file should look when it is printed or displayed or to describe the
document's logical structure. The markup indicators are often called
"tags."
• Language : Syntax of a programming or scripting language
2013/02/20 4

What is HTML?
• HTML is a markup/scripting language and not a programming
language.
• In today's world, it is commonly used along with JavaScript and
Cascading Style Sheets (CSS) to give web pages the look and feel we
desire.
• Just as SQL is a data query language, HTML is simply a text
formatting language.
• Through HTML, the look and appearance of images, links, headings,
text, page layout and just about every element of a web page can
be formatted.
• Markup language contains markup Tags that describes how the text
is to be formatted.
• The website you view on the internet are actually text files that
consists of HTML tags.

2013/02/20 5

Difference Between Markup and programming
language
Markup Language – A language designed to format text. It does the
transition of raw text into structured documents by using markup tags into
the raw text. The text given inside the tags are structured by the browsers
depending on the markup. Programming languages are compiled. But in
markup language is just interpreted by the browser.
Programming Language - It is an set of instructions to the computer to
perform. It is coded, compiled and interpreted before it gets executed.
Some languages require compiler and some others require interpreter and
the rest requires both. The source code converted into machine readable
form and then executed. The computer hardware is responsible to
execute an programming language and browser is needed for an markup
language.
Few Programming Languages are JAVA,C++,COBOL,C++ and VB

2013/02/20 6

How they use TAGs?
• Tags are instructions that tell your web browser
what to show on the page.
• HTML tags are keywords (tag names) surrounded
by angle brackets like <html>
• All tags begins with less than sign “<” and ends
with the greater than sign “>”. So anything inside
< > is a tag.
• Each tag must accomplished with a closing tag,
which is exactly the same as except it includes a
slash after the less than sign </>.
2013/02/20 7

Single Tags

2013/02/20 8

Getting Started
What you need
• A computer
• A web browser
• A word processor like windows
notepad/WordPad or Mac textedit or other
editing programs.
And you are ready to make websites 

2013/02/20 9

What is a web browser?
• Web browser is a computer application that
does two things;
– It goes to a web server on the internet and
request a page, so it can pull the page through the
network and into your machine.
– It interrupts the HTML elements and tags within
the page in order to display it on the screen as the
page’s creator intended.

2013/02/20 10

How a web browser works?

2013/02/20 11

What does basic HTML look like?
<html> This is a TAG

<head>
<title> Your Title</title>
</head>
<body> This is a ELEMENT
This is where your content goes.
</body>
</html>

2013/02/20 12

Elements
• Elements are made up of two tags, with an
open tag and close tag. Between these tags is
the element content.

<TITLE> This is the Home page</TITLE>

Start tag End tag

2013/02/20 13

• Most Elements will contain multiple elements.
An element that contains another element
looks like this.

<head>
<title> The document title <title>
</head>

2013/02/20 14

Recommended text editors
(Windows)
1. Notepad ++
2. Caditor
3. Jedit
4. conTEXT
5. Komodo EDIT
6. sciTE

2013/02/20 15

Recommended text editors
(MAC)

• Bluefish Editor
• Text Wrangler
• Smultron
• Komodo Edit
• jEdit

2013/02/20 16

Creating the HTML layout
<html>
<head> All the information relevant to
<title> Home page</title> the web page , title , java
scripts are located inside the
HEAD element.
</head>
<body> The website which is viewing
by people.
</body>
</html>

2013/02/20 17

Open Notepad

2013/02/20 18

How to save the HTML page
• Web page always think the home page is
default/index.
• When you save your HTML page every time main
page has to name as index or default.
• When you save an HTML file, you can use either the
.htm or the .html file extension. It will shows as
below
index.html , index.htm /
default.html , default.htm
2013/02/20 19

Guidelines
• If you are using windows web server it does
not matter Home page is index.html
,INDEX.html But if you are using Linux web
server every page has to name in simple
letters.
• Windows is not Case sensitive.
• Linux is Case sensitive.

2013/02/20 20

What are the basic things we can include in a
HTML page

1. Text
2. Tables
3. List
4. Images
5. Hyper links

2013/02/20 21

Manipulating Text
• Heading commands is used to create header text.
<h1></h1>
• There is a range of header tags such as ,
<h1> to <h6>

Is the Highest Is the Lowest

• H1 headings should be used as main headings, followed by H2
headings, then the less important H3 headings, and so on.
• Heading commands create nice , bold text and are quite easy
to use. It is a simple command
2013/02/20 22

• To align text we use <p> </p> elements.
• Use the <br> tag if you want a line break (a
new line) without starting a new paragraph:

Tips
– Web browser will not show the spaces which we use
in the HTML code, so we need to use separate tags to
align text in the HTML page.
Ex:- <br> <span>
– Never use Capital letters in the HTML page.

2013/02/20 23

Sample HTML code
<html>
<head>
<title> This is my title</title>
</head>
<body>
Header
<h1> Hello World!!</h1>
<p> I am a very basic page.</p> Paragraph
</body>
</html>

2013/02/20 24

Lists
• We have two common types of lists

1. Ordered List -
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.

Ex: 1. one
2. two
3. three

• Un ordered list –
An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag. The list items are marked with bullets (typically small black
circles).

• One
• Two
• three

2013/02/20 25

Ordered list
<html>
<head>
</head>
<body>
<ol> List element
<li>one </li>
<li>two </li>
<li>three</li>
</ol>
</body>
</html>

2013/02/20 26

Un ordered list
<html>
<head>
</head>
<body>
<ul>
<li>one </li> List element
<li>two </li>
<li>three</li>
</ul>
</body>
</html>

2013/02/20 27

Creating Table
• Ex : 1 2 3

4 5 6

7 8 9

2013/02/20 28

<html>
<head>
</head>
<body>
<table border=“1”>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>

</table>
</body>
</html>

2013/02/20 29

Inserting Images
• Save the image inside the same folder where
index/default.html is located.

<img src =“ smile.jpg”/>

2013/02/20 30

<html>
<head>
</head>
<body>
<img src =“smile.jpg”/>

</table>
</body>
</html>

2013/02/20 31

Hyper links
• The HTML <a> tag defines a hyperlink.
• When you move the cursor over a link in a Web page, the arrow will turn
into a little hand.
• The most important attribute of the <a> element is the href attribute,
which indicates the link’s destination.
• The HTML code for a link is simple.
-<a href="url">Link text</a>

• Open link in a new window or tab
<a href=“index.html” target = “_blank” >HOME </a>

2013/02/20 32

How Beautiful HTML code looks like?

• Proper ending tags
• Code is tabbed in to sections.
• Hierarchy of header tags
• No styling leave it to CSS!!!

2013/02/20 33

Advantages of HTML

1. HTML is easy to use and understand.
2. All browsers support HTML.
3. Syntax are very similar.
4. HTML is free.
5. Most development tools support HTML.
6. It is user friendly with most search engines.

2013/02/20 35

Thank you


2013/02/20 36

Introduction to HTML

More Related Content

What's hot (20)

Similar to Introduction to HTML (20)

Recently uploaded (20)

Introduction to HTML