HTML TAGS
HTML
•
HTML – Hypertext Markup
Language.
•
It is the language used for
creating web pages.
•
Used for specifying the
structure and format of web page.
•
Also used for organizing the
web pages.
TAGS
•
Text enclosed within angle
brackets < > are called tags.
•
Two types of tags used are
Opening tag and Closing tag.
•
Closing tag is always the same
as opening tag, but with a / .
Ex- <HTML> </HTML>
•
A starting tag, an ending tag
and everything between them is collectively called an HTML element.
•
Web pages have two
sections - HEAD section
- BODY section
•
HEAD section includes
information about how the web page should be displayed.
•
BODY section includes the
actual material to display.
•
<TITLE> tag indicates the
text that the web browser should display in its title bar.
•
<H1> tag indicates the
text that the web browser should display in the actual page.
<HTML>
<HEAD>
<TITLE>
Web
Page
</TITLE>
</HEAD>
<BODY>
<H1>
Welcome
to HTML
</H1>
</BODY>
</HTML>
Attributes
•
An attribute is a keyword that is used in an opening tag to
give more information to the web browser.
•
<TAGNAME ATTRIBUTE1 = VALUE1 ATTRIBUTE2 = VALUE2>
•
<FONT COLOR=RED SIZE=10>
•
<MARQUEE BGCOLOR=YELLOW HEIGHT=100>
Headings
- Creates heading in the web
page, like a headline, using bold font and various sizes.
- <H1> creates largest text and <H6> the
smallest
- Align is the attribute used with heading tag.
• <H1>text</H1>
• <H2>text</H2>
• <H3>text</H3>
• <H4>text</H4>
• <H5>text</H5>
• <H6>text</H6>
• <H1 ALIGN=“CENTER” OR “RIGHT”OR
“LEFT”>
Text formatting
•
<P>
•
<B></B>
•
<I></I>
•
<U></U>
•
<S></S>
•
<BIG></BIG>
•
<SMALL></SMALL>
•
<SUB></SUB>
•
<SUP></SUP>
•
<MARQUEE></MARQUEE>
•
<FONT SIZE=6 COLOR=“RED” FACE=“ARIAL”></FONT>
•
<DIV ALIGN=RIGHT></DIV>
•
<hr>
•
<ABBR></ABBR>
•
<ACRONYM></ACRONYM>
• <HR SIZE=3
WIDTH=800
ALIGN=RIGHT
COLOR=YELLOW>
•
<B> -
displays the text bold.
•
<I> -
displays the text italics.
•
<u> - displays
underline.
•
<big> -
displays text bigger than usual.
•
<small>- displays text smaller than usual.
•
<sub> - displays
a subscript.
•
<sup>- displays
a superscript.
•
<s>-
displays strikethrough
•
<HR>-
Horizontal rules. Draws a horizontal line to separate or group elements
vertically. Has no end tag. Attributes used are width, align and color.
• <marquee>- displays text in a
scrolling marquee.
• <div>- to select a block of text.
•
<font>- lets us to select text size, color and face.
•
<abbr> - displays text as an abbreviation. Attribute
used is Title.
•
<acronym> - used to display acronym. Attribute used is
title.
• <del>
- tag defines text that has been deleted from a document.
• <ins> tag defines a text that has been inserted into
a document.
• <em> tag is a phrase tag. It renders as emphasized
text.
•
<strong> tag is a
phrase tag. It defines important text.
Hyperlinks
- The HTML <A>
tag defines a hyperlink.
- A hyperlink (or
link) is a word, group of words, or image that you can click on to jump to
another document.
- 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.
- By default, links
will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
• <A>- creates a hyperlink or an
anchor.
• HREF- holds the file names or URL of the
resource.
Text as a Link to other html files
<A
HREF=“greet.html”>greeting</A>
<A
HREF="MARQUEE.HTML"> LINK1 </A>
Text as a Link to web site
<A
HREF=“http://www.vit.ac.in”>VIT</A>
<A
HREF=“http://www.google.com”>GOOGLE</A>
Text as a Link to Image
<A
HREF="sunset.jpg"> IMAGE </A>
<A HREF=“http://www.vit.ac.in”><img
src=“flower.jpg” height=“120” width=“120”>picture</A>
Image as a link to HTML file
<A
HREF="MARQUEE.HTML"><img
src="flower.jpg"></A>
Image as a link to search engine or web site
<A
HREF="http://www.google.com"><img src="flower.jpg"></A>
Image as a link to another image
<A
HREF="sunset.jpg"><img src="flower.jpg"></A>
•
<BODY LINK=“GREEN” VLINK=“BLUE” ALINK=“RED”>
•
ALINK- active link and VLINK- visited link. These are used
for providing colors for the link, active link and visited link.
Lists
•
Used for displaying bullets and numbering.
•
Unordered list- presents the items in bulleted format.
•
Ordered list- presents the items in numerical or
alphabetical.
•
Type attributes used in UL are disc, square or circle.
•
Type attributes used in OL are A, a, I, i or 1.
•
<LI>- List Items. For creating a list which can be
ordered or unordered.
<UL>
<LI>COMPUTER
<LI>COMMERCE
<LI>ECONOMICS
<LI>ENGLISH
</UL>
<OL>
<LI>COMPUTER
<LI>COMMERCE
<LI>ECONOMICS
<LI>ENGLISH
</OL>
For defining terms and their definitions DL, DT and DD
tags are used.
•
<DL>- Definition List. Creates a definition list and it
is embedded with <DT> and <DD>.
•
<DT>- Definition Term. For specifying the term.
•
<DD>- Definition Description. For specifying the
definition.
<DL>
<DT>DATABASE<DD>This
is computer science paper deals with databases.
<DT>COMMERCE<DD>This
is commerce paper.
<DT>ECONOMICS<DD>This
is economics paper.
</DL>
NESTED LIST
For having a list inside another list, nested list is used.
<UL>
<LI>COMMERCE
<LI>ECONOMICS
<LI>COMPUTER
<UL>
<LI>INTRO
TO COMPUTER
<LI>INTERNET
AND WEB DEVELOPMENT
<LI>DATABASE
</UL>
</LI>
<LI>ENGLISH
</UL>
IMAGE TAG
• <IMG SRC=“filename.jpg”>- Inserts an
image into a web page.
• Attributes used are
<HEIGHT>- specifies the height of an image.
<WIDTH>- specifies the width of an image.
<HSPACE>- sets the horizontal spacing around the
image (left and right sides)
<VSPACE>- sets the vertical spacing around the
image (top and bottom sides)
<ALT>- specifies the alternate text to be
displayed when image is not found.
<BORDER>- adds border to the images.
<ALIGN>- Sets the alignment of text that follows
the image.
<ALIGN=“BOTTOM”>- positions the text next to
bottom of the image.
<ALIGN=“TOP”>- positions the text next to top of
the image.
<ALIGN=“MIDDLE”>- positions the text next to
middle of the image.
<ALIGN=“LEFT”>- aligns the image to the current
left margin.
<ALIGN=“RIGHT”>- aligns the image to the current
right margin.
<img src=“flower.jpg”
height=100
width=100
border=10
align=“middle”
alt=“image of a flower”
hspace=12
vspace=12> flower
Background
Images
•
Displays an image as a background of your web page.
•
Background is an attribute of body tag.
• <BODY BACKGROUND=“BLUE HILLS.JPG”>
Watermark
•
Displays an image as a background of your web page.
•
While scrolling down through the web page, the text alone
will move leaving the background image fixed.
• <BODY BACKGROUND=SUNSET.JPG
BGPROPERTIES=FIXED>
Marquee tag
• Displays scrolling text.
• Attributes used are
<BGCOLOR>
<BEHAVIOR>
<DIRECTION>
<LOOP>
<HEIGHT>
<WIDTH>
<HSPACE>
<VSPACE>
•
<BEHAVIOR=“scroll” (or) “slide” (or) “alternate”>
Sets how the
text in the marquee should move.
Scroll- text scrolls
across the marquee. Enters from one side and leaves at the other side.
Slide- text
enters from one side and stops at the other side.
Alternate-
text bounce back and forth.
•
<DIRECTION=“left” (or) “right” (or) “down” (or) “up”>
Sets the
direction the text should scroll.
•
<BGCOLOR=“yellow”>
Sets the
background color for the marquee box.
•
<LOOP=5>
Sets how many times you
want the marquee to cycle.
•
<HSPACE=10>
Sets the horizontal
spacing around the marquee (left and right sides)
•
<VSPACE=10>
Sets the vertical
spacing around the marquee (top and bottom sides)
<MARQUEE
LOOP=“5”
BEHAVIOR=“SCROLL”
BGCOLOR=“YELLOW”
HEIGHT=50
WIDTH=200
DIRECTION=“DOWN”>
WELCOME
</MARQUEE>
Meta
Tag
- Includes metadata about your web page. Consists of
keywords for search engines, refresh rates.
- Metadata is passed as name/value pairs.
<HEAD>
<META
NAME="AUTHOR" CONTENT="Steve">
<META NAME="DESCRIPTION" CONTENT="My web
page">
<META
NAME="COPYRIGHT" CONTENT="copyright 2000 by steve" HTTP-EQUIV=”refresh” CONTENT=”5”>
<TITLE>
Web Page
</TITLE>
</HEAD>
