WEB PROGRAMMING- Web page creation using HTML Tags

WEB PROGRAMMING
Mrs.R.SABITHA .,M.Sc.,M.Phil.,
Assistant Professor,
Department of Computer Science(SF)
V.V.Vanniaperumal College for Women,
Virudhunagar.

TOPICS
• Introduction to HTML
• Heading Tags
• Formatting Tags
• Order and Unorder list creation

Introduction to 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

HTML TERMINOLGY
Some commonly used terms in HTML are:
Tags: Tags are always written within angles brackets
e.g.<HTML> tag indicates the start of an HTML document .
HTML tag can be two types.
They are
 Paired Tags : A tag is said to be a paired tag if text is placed between a
tag and its companions tag.In paired tag ,the first tag is referred to as
opening tag and the second tag is referred to as closing tag.
 Unpaired Tags: An unpaired tag does not have a companion tag
.unpaired tag also known as singular or Stand-Alone tags
e.g:<br>,<hr> etc.

HOW TO CREATE AN HTML DOCUMENT
The essential tags that are required to create a HTML document are:
• <HTML>.............</HTML>
• <HEAD>.............</HEAD>
• <BODY>.............</BODY>

• <HTML>
• <HEAD>
• .............
• .............
• .............
• </HEAD>
• <BODY>
• .............
• .............
• .............
• </BODY>
• </HTML>
An HTML document has two distinct parts HEAD
and BODY

HEAD Tag <HEAD>
• HEAD tag comes after the HTML start tag. It
contains TITLE tag to give the document a title
that displays on the browsers title bar at the
top. The Format is:
<HEAD>
<TITLE>
Your title goes here
</TITLE>
</HEAD>

BODY Tag <BODY>
• The BODY tag contains all the text and graphics of the
document with all the HTML tags that are used for control
and formatting of the page.
The Format is:
<BODY>
Your Document goes here
</BODY>
An HTML document, web page can be created using a text
editor,
Notepad or WordPad. All the HTML documents should have the
extension .htm or html. It require a web browser like Internet
Explorer or Netscape Navigator/Communicator to view the
document.

Attributes used with <BODY>
• BGCOLOR: used to set the background color for the 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
Introduction to HTML:: 77

Follow the steps to create and
view in browser
Step-1: Open Notepad
Step-2: Enter the following lines of code:
<HTML>
<HEAD>
<TITLE>
My first Page
</TITLE>
</HEAD>
<BODY>
WELCOME TO MY FIRST WEB PAGE
</BODY>
</HTML>

Saving and Viewing a HTML
Document
• Step-3: Save the file as myfirstpage.html (go to
File-Save As give File name: myfirstpage.html-
choose save as type: All Files-click save)
• Step-4: Viewing document in web browser
(open Internet Explorer-click on File-Open-
Browse-select the file myfirstpage.html-click
open-click ok

Formatting Tags
Boldface <B>: displays text in BOLD
Example: Welcome to the <B> Internet World </B>
Output: Welcome to the Internet World
Italics <I>: displays text in Italic
Example: Welcome to the <I> Internet World </I>
Output: Welcome to the Internet World

Formatting Tags
• Subscript <SUB>: displays text in Subscript
• Superscript <SUP>: displays text in Superscript
• Small <SMALL>: displays text in smaller font as
compared to normal font
• Big <BIG>: displays text in larger font as compared
to normal font
• Underline<U>specifies that the enclosed text be
underline
Example:<U> hello</U>
Output: hello

MARQUEE TAG
• This tag is used text horizontally across the
screen.it is mainly used to deliver a specific
message to the visitor or to scroll Ads on a
page.
Example:
• <marquee> hello world </marquee>

Attributes of Marquee tag
• Bgcolor : Sets the background color of the
marquee.
• Direction :Sets the direction of the marquee box
to either left-to-right, right-to-left, up-to-down
and down-to-up.
• Width: This sets how wide the marquee should
be.
• Loop: This sets how many times the marquee
should 'Loop' its text. Each trip counts as one
loop.

HEADING: <H1>.............<H6>tags
HTML has six header tags
<H1>, <H2>...........<H6> used to specify
section headings. Text with header tags is
displayed in larger and bolder fonts than
the normal body text by a web browser.
Every .header leaves a blank line above
and below it when displayed in browse.

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>
</BODY>
</HTML>

Output of HTML document
This is Section Heading 1

List Creation
Unorder LIST
Lists – un-numbered
• Unnumbered Lists:
<UL>
<LI> apples </LI>
<LI> bananas </LI>
<LI> grapefruit </LI>
</UL>
• Unnumbered Lists with
different pointer types:
<UL type="square">
<LI> oranges </LI>
<LI> peaches </LI>
<LI> grapes </LI>
</UL>
type="square"
type="disc"
type="circle"

Output
 apples
 bananas
 grapefruit

List Creation
• Lists - numbered
• Numbered Lists:
<OL>
<LI> oranges </LI>
<LI> peaches </LI>
<LI> grapes </LI>
</OL>
Output
4. oranges
5. peaches
6. grapes
• Numbered Lists that
starts with 4:
<OL start="4">
<LI> oranges </LI>
<LI> peaches </LI>
<LI> grapes </LI>
</OL>

Order and Unorder List
Note :
• Use the start and type attributes to
customize your lists. It is possible to make
lists of lists, which is helpful for creating
some items, such as outlines.

WEB PROGRAMMING- Web page creation using HTML Tags

Recommended

More Related Content

Similar to WEB PROGRAMMING- Web page creation using HTML Tags (20)

Recently uploaded (20)

WEB PROGRAMMING- Web page creation using HTML Tags