Introduction to HTML

(HTML)
Hyper text markup language

TERMS TO KNOW BEFORE STARTING HTML:
 Internet
 Web page
 Websites
 Web browser

INTERNET:
The Internet is a
global network
connecting millions
of computers.
All countries are
linked into exchanges
of data, news and
opinions.

Web page
 A file usually written in HTML that can be read by a
Web browser.

A WEB BROWSER
 Browsers are basically software programs that allow
you to search for and view various kinds of
information on the Web, such as web sites, video,
audio, etc.

A WEBSITE :
A Website is a
collection of
documents known as
webpages.
The main page in a
website is called a
homepage, and other
pages in a website are
called subpages.
These are connected
by hyperlinks.

HTML(Hypertext Markup Language)
 HTML is a language for describing web pages.
 HTML is the language which browser understands.
Intro:

Hyper text markup language
Hypertext is simply a
piece of text that works
as a link.
A Markup Language is a
set of markup tags

HTML is “Interpreted” by your browser
 The browser reads and interprets the HTML text
(code) in real time
 Not all browsers interpret EXACTLY the same way,
so results may vary!
 However, it is very easy to make changes to the
HTML code and immediately see the effect….very
nice for debugging!

Remember!
 HTML tags are keywords surrounded by angle brackets
like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the
end tag
 Start and end tags are also called opening tags and
closing tags

Structure and Syntax
 HTML has a very particular structure and
syntax
 The HTML Section
 The Header Section
 The BODY Section

Basic structure of HTML document
Contains information
which is not directly
displayed in the
browser, but browsers
may use it in other
ways.
Contains the content
to be displayed in the
browser and also the
code that tells the
browser how to render
the content.
head
body

Basic Document Structure
<HTML>
<HEAD>
<Title> </Title>
</HEAD>
<BODY>
</BODY>
</HTML>
signifies an HTML document
instructions about the document
visible pages elements go here
end of the HTML document

Common Tags
 Always include the <HTML>…</HTML> tags
 HTML documents
 HEAD section
 Information about the document
 Information in header not generally rendered in display window
 TITLE element names your Web page
 BODY section
 Page content
 Includes text, images, links, forms, etc.
 Elements include backgrounds, link colors and font faces
 P element forms a paragraph, blank line before and after

<Head> Section:
<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
</body>
</html>

Titles in HTML
 titles appear in the title bar of the page
 titles create a frame of reference for the user
example:
<TITLE>My First Web Page</TITLE>

<BODY> Section:
 Paragraphs:
 HTML documents are divided into paragraphs.
 <P> tag forms a paragraph, blank line before and after.
 Headings
 Simple form of text formatting
 Vary text size based on the header’s
“level”(h1,h2,h3,h4,h5,h6).
 Can vary significantly between browsers

Simple HTML Commands
 HTML commands (also called “tags”) are always
enclosed in angle brackets. E.g., <title>
 Tags are case insensitive, so <title> and <TITLE>
mean the same thing.

Location of HTML Tags
 The effect of an HTML tag is usually independent of
where it appears when you are editing the HTML file
(e.g., does it appear at the start of a line, in the
middle, end of a line). So this is just as good.
<title>
War and Peace
</title>

A Simple HTML Example
<html>
<head>
<title> War and Peace </title>
</head>
<body>
<h1> Chapter 1 </h1> The end.
</body>
</html>
Says this is a HTML document
The following goes in the header
Start the main body
Chapter 1 gets made into a main heading
Close the main body, and the html document

Empty HTML Elements
 HTML elements with no content are called empty
elements.
 A very few elements are declared as EMPTY. This means
three things:
 They do not contain any text. They are used simply as
markers.
 EMPTY elements are not permitted to have an end-
tag.
 They are closed in start tag.
For Example :
 <br/> and <hr/>

<BODY> Section:
<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
<h1> Hello World!!!</h1>
<p> This is my first WEB PAGE</p>
</body>
</html>

Levels of Heading tag:
 <h1> .. </h1>
 <h2 > .. </ h2>
 <h3 > .. </ h3>
 <h4 > .. </ h4>
 <h5 >.. </ h5>
 <h6 > .. </ h6>

<html>
<head>
</head>
<body>
<center>
<h1> Level 1 Header </h1>
<h2 > Level 2 Header </ h2>
<h4 > Level 4Header </ h4>
</center>
</body>
</html>
EXAMPLE:

Text Styling
 Underline style
 <U>…</U>
 Align elements with ALIGN attribute
 right, left or center
 Close nested tags in the reverse order from which they
were opened
 Emphasis (italics) style
 <EM>…</EM>
 Strong (bold) style
 <STRONG>…</STRONG>

Example:
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
</body>
</html>

HTML Text Formatting Tags
Tag Description
<b> </b> bold text
<big> </big>
big text.(causes the size of text
to be increased by one font
size. )
<em> </em> emphasized text
<i> </i> italic text
<small> </small>
small text(causes the size of text
to be decreased by one font size)
<strong> </strong> strong text
<sub> </sub> subscripted text
<sup> </sup> superscripted text
<ins> </ins> inserted text
<del> </del> deleted text

Example:
Example:
<html>
<body>
<p><big>This text is big</big> </p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> </p>
<p>This is<sup>superscript</sup></p>
<p>This is<del>deleted</del></p>
<p>This is<del>deleted</del> but <ins> insert
</ins> is used</p>
</body>
</html>
 Output:

Text in HTML
 simple text is enclosed in paragraph tags
example:
<P>The rain in Spain <P>stays mainly
only the plain.
appears as:
The rain in Spain
stays mainly on the plain.
The closing </p> tag is optional.

Text in HTML
 break tags help to format lines
example:
<P>Roses are red,<BR/>
violets are blue,<BR/>
sugar is sweet . . .
</P>
appears as:
Roses are red,
violets are blue,
sugar is sweet . . .

Attributes of Tags:
“Attributes are the properties of tag.”
 Attributes give certain characteristics to a tag
(e.g., height, width, color, etc.
 Attributes are always specified in the start tag.
 Attribute values should always be enclosed in
quotes.

Syntax:
The general syntax is as follows:
<tag attribute1 = "value" attribute2 = "value" ... >
</tag>

Text in HTML
 font faces and other attributes may be specified
example:
<P><FONT FACE=“Arial”>
The rain in Spain stays mainly
on the plain.
</FONT></P>
appears as: (in Arial)
The rain in Spain stays mainly on the plain.

Words To Know:
HTML Tag :
 Tags are elements of the HTML document used to specify how the
document should be displayed by the browser. Tags look like this:
<tag>
Elements:
 Tags are also called element.
 An HTML element starts with a start tag / opening <tag> An HTML
element ends with an end tag / closing </tag>. .
 The element content is everything between the start and the end tag.
Attribute :
 Used to modify the value of the HTML element. Elements will often
have multiple attributes.
For now just know that a tag is a command the web browser interprets,
an element is a complete tag, and an attribute customizes or modifies
HTML elements.

HTML Comments
 Comments can be inserted into the HTML code
to make it more readable and understandable.
Comments are ignored by the browser and are
not displayed.
 Comments are written like this:

Editing HTML
 HTML files or documents
 Written in source-code form using text editor
 Notepad: Start-Programs-Accessories
 HTML files
 .htm or .html extensions
 Name your files to describe their functionality
 File name of your home page should be index.html
 Errors in HTML
 Usually not fatal

Introduction to HTML

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (8)

Similar to Introduction to HTML

Similar to Introduction to HTML (20)

Recently uploaded

Recently uploaded (20)

Introduction to HTML