 HTML

HTML CONTENTS
 INTRODUCTION OF HTML
 HOW TO CREATE AN HTML DOCUMENT
 SAVING AND VIEWING A HTML
DOCUMENT
 TEXT TAGS
 ADVANTAGES OF HTML
 DISADVANTAGES OF HTML
INTRODUCTION OF HTML
 HTML is a language for describing web
pages.
 HTML stands

for Hyper Text Markup Language

 HTML is not a programming language, it is

a markup language
 A markup language is a set of markup

tags
 HTML uses markup tags to describe web

pages
INTRODUCTION OF HTML
 HTML (Hypertext Markup Language) is used to create document on the World
Wide Web.
 It is simply a collection of certain key words called ‘Tags’ that are helpful in
writing the document to be displayed using a browser on Internet.
 It is a platform independent language that can be used on any platform such
as Windows, Linux, Macintosh, and so on.
 To display a document in web it is essential to mark-up the different e l eme n
ts (headings, paragraphs, tables, and so on) of t
h e document with the HTML tags.
 To view amark-up document u s e r h a s t o o p e n t h e d
ocument in a browser.
 A b r o w s e r understands and interpret the HTML tags,
identifies the structure of the document (which part are which) and makes
decision about presentation (how the parts look) of the document.
 HTML also provides tags to make the document look attractive using graphics,
font size and colors.
 User can make a link to the other document or the different section of the
same document by creating Hypertext Links also known as Hyperlinks
HTML Editors/web authoring
tools
 Web pages can be created and modified by
using professional HTML editors.
 The Editors can be divided into:
 Plain text:
 WYSIWYG
WYSIWYG
 WYSIWYG is an acronym for "what you see is
what you get". A WYSIWYG editor shows
content (text and images) displayed onscreen
during editing roughly how it would appear
when displayed as a finished product.
so the user as the user edits content their changes
are reflected immediately visually. The main benefits
of this type of editor are:
1. Allows you to do certain tasks more quickly than by
hand for example tables
2. Easier for novice users to learn
Example: word press, dreamweaver macromedia
Text editor

 In contrast a text editor allows the user to directly

edit the HTML tags with no visual guide. This can be
more difficult to get to grips with for new users but
overall gives you a better understanding of HTML.
 The main benefits of a text editor are:

1. gives the user more control over the website

2. gives user a greater understanding of HTML
allowing them to fix errors caused by WYSIWYG editors
 the main disadvantage of a text editor is can be

difficult for beginners.

Example: Notepad
ADVANTAGES OF HTML

 Easy to use
 Supported on almost every browser, if not

all browsers.
 Widely used; established on almost every

website, if not all websites.

 Free - You need not buy any software.
 Easy to learn & code even for novice

programmers.
DISADVANTAGES OF HTML

 It cannot produce dynamic output alone,

since it is a static language
 Sometimes, the structuring of HTML
documents is hard to grasp
 You have to keep up with tags, and make
sure not to use them
 Security features offered by HTML are
limited
HTML TAGS
 HTML documents contains “TAGS”, that are used
to make web documents that are displayed using
browsers on internet.
 "Tags" provide web browsers with instructions about
the web page, such as where to display images, and
how the document is structured.
 Tags are always enclosed in angle brackets: < >.
<element_name>
 Tags are comprised of elements and attributes.
 An element is an object on a page (such as a heading,
paragraph, or image), and attributes are qualities that
describe that element (such as width and height).
HTML Tags

◦ Tags usually travel in pairs. An opening tag begins

a section of page content, and a closing tag ends
it.
◦ 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
◦ Tags are used to represent various elements of
web page like Header, Footer, Title, Images etc.
Tags are of two types:
Container Tags, Empty Tags.
Container Tags:

o Tags which have both the opening and closing i.e.

<TAG> and </TAG>. For example <B> tag starts bold
effect for text and its companion tag </B> ends the
bold effect.
o Statement like: <B> How </B>
o Will have word How in bold. The <HTML>,
<HEAD>, <TITLE> and <BODY> <SCRIPT> <FONT>
<A> etc. tags are all container tags.
Empty Tags:

 Tags, which have only opening and no

ending, are called empty tags/ standalone
tag.
 The <HR>, which is used to draw

horizontal, rule across the width of the

document, and line break <BR> tags are
empty tags.
STRUCTURE OF HTML CODE
 HTML documents are structured into two parts,
the HEAD, and the BODY.
 Both of these are contained within the HTML
element – it simply denotes its HTML document
 The head contains information about the
document that is not generally displayed with
the document, such as its TITLE.
 The BODY contains the main content of the page
 Elements allowed inside the HEAD, such as
TITLE, are not allowed inside the BODY, and vice
versa
An HTML document has two distinct parts HEAD and BODY

 <HTML>
 <HEAD>
 .............
 .............
 .............
 </HEAD>
 <BODY>
 .............
 .............
 .............
 </BODY>
 </HTML>
Attributes used with
<BODY>
 BGCOLOR: u s e d t o s e t t h e b a c k g r o
u n d c o l o r f o r t h e document Example:
<BODY BGCOLOR="yellow">
Your document text goes here.
</BODY>
 TEXT: used to set the color of the text of the

document Example:
<BODY TEXT="red">Introduction to HTML:: 77
Document text changed to red color
</BODY>
Document text changed to red color
Attributes used with
<BODY>
 MARGINS: set the left hand/right hand margin of the
document LEFTMARGIN: set the left hand margin of the
document Example:
<BODY LEFTMARGIN="60">
This document is indented 60 pixels from the left hand side
of the page.
</BODY>
 TOPMARGIN: set the left hand margin of the document

Example:
<BODY TOPMARGIN="60">
This document is indented 60 pixels from the top of the page.
</BODY>
HTML

The HTML document itself begins with <html> and ends

with </html>.
The visible part of the HTML document is
between <body> and </body>.
Example
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
A Simple HTML File –
ex1.html
<html>
<head>
<title>A Simple HTML Example</title>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML.</P>
</body>
</html>
Headings <h1> to <h6>

 HTML supports six levels of headings. Each

heading uses a large, usually bold character-
formatting style to identify itself as a heading.
The following HTML example produces the
output shown in Figure :
<html>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
Example: An HTML document,
headings.html shows the different
section headings
.
<HTML>
<HEAD>
<TITLE>
Section Heading
</TITLE>
</HEAD>
<BODY>
<H1> This is Section Heading 1 </H1>
<H2> This is Section Heading 2 </H2>
<H3> This is Section Heading 3 </H3>
<H4> This is Section Heading 4 </H4>
<H5> This is Section Heading 5 </H5>
<H6> This is Section Heading 6 </H6>
</BODY>
</HTML>
Viewing output of HTML document
headings.html in browse

This is Section Heading 1

This is Section Heading 2
This is Section Heading 3
This is Section Heading 4
This is Section Heading 5
This is Section Heading 6
Line Breaks <br>

 Inserts the line break in documents.

 Example:

<html>
<body>
This is the first statement. <br> this is the second
statements.
</body>
</html>
Horizontal Rules <hr>

 Horizontal rules are used to visually break

up sections of a document. The <hr> tag
creates a line from the current position in
the document to the right margin and
breaks the line accordingly.
<HR> accepts following
attributes
 SIZE: Determines the thickness of the horizontal rule. The value is
given as a pixel value.
Example: <HR SIZE="3">
 WIDTH: Specifies an exact width of HR in pixels, or arelative width as

percentage of the document width.

Example: <HR WIDTH="50%">, horizontal rule a width a 50 percent of
the page width.
 ALIGN: Set the alignment of the rule to LEFT, RIGHT and CENTER. It

is applicable if it is not equal to width of the page.

 NOSHADE: If a solid bar is required, this attribute is used; it specifies

that the horizontal rule should not be shaded at all.

 COLOR: Set the color of the Horizontal rule.

Example: <HR COLOR="BLUE“>

Example of <HR> with its attribute:
<HR ALIGN=' 'CENTER' ' WIDTH=' '50%' ' SIZE=' '3" NOSHADE
COLOR="BLUE“>
Paragraphs
 Paragraphs mark a block of text. They can
be aligned left, centre, right or justified
 <p><centre> </centre></p>

Or
<p align=“centre”></p>
 Formatting
<p>An example of <b>Bold Text</b> </p>
<p>An example of <em>Emphasized Text</em> </p>
<p>An example of <strong>Strong Text</strong> </p>
<p>An example of <i>Italic Text</i> </p>
<p>An example of ^{superscripted Text} </p>
<p>An example of _{subscripted Text} </p>
<p>An example of <del>struckthrough Text</del> </p>
<p>An example of <code>Computer Code Text</code> </p
<center>Centering of text in page</center>
Text Formatting
 Font name= <p><font
face=“Arial”>….</font/>
 Font size= <p><font size=“12”>…</font>
 Font color=<font color=“black”>…</font>
 Text style=<b>…</b>
An HTML document formatText.html shows the
use of
Character Formatting Tags.
<HTML>
<HEAD>
<TITLE>
Use of Character Formatting Text Tags
</TITLE>
</HEAD>
<BODY>
<H1><I> Welcome to the world of Internet</I></H1>
It is a
<FONT COLOR="BLUE" SIZE="4">
<U>Network of Networks</U>
</FONT>
</BODY>
</HTML>
OUTPUT
Welcome to the world of Internet

It is a Network of Networks
MARQUEE TAG
 This tag is used text horizontally across the
screen.it is mainly used to deliver a specfic
message to the visitor or to scroll Ads on a
page.
 Example: <marquee> hello

world></marquee>
Blockquote
 The <blockquote> element adds an indent
to the element
Images
 Images can improve the design and the
appearance of a web page.
 Example
 <img src="pic_trulli.jpg" alt="Italian Trulli">