Html-Hyper Text Markup Language: For E.G. Information

HTML- HYPER TEXT MARKUP LANGUAGE
HTML is made up of tags and attributes, which work together to identify

document parts and tell the browser how to display them. Tags identify document
parts by specifying that part of information be displayed as heading, paragraph or
something else. Attributes are optional parts of tags such as color, alignment,
height, width, etc.
All tags are composed of elements that are contained within angle
brackets<>. Angle brackets tell browsers that the text between them is a html
command. Most of the tags are paired with an opening tag <tag> and a closing tag
</tag>. Both tags look alike except the closing tag also includes a forward slash (/).
To apply tags to information in your document place the opening tag before
information and place the closing tag after the information. For e.g. <tag> put the
information here </tag>.
To apply more than 1 tag the same information, nesting is required. Nesting
means placing 1 set of the tags inside the other set of the tag.
For e.g. <tag1><tag2> information </tag1></tag2>
When you nest tags, the first tag is also the last tag and the second tag to
the last tag and so on.
While typing tags do not include extra spaces. If you include extra space, a
browser may not recognize the tag and will not display the information the
information correctly.
Attributes provide extra information about a tag. All attributes go in opening
tag and are separated from other attributes and tags itself by a space. Some
attributes require codes while other don't you can include multiple attributed in a
tag by using a space between each attribute.
In HTML tags, the attributes can go in other order after the tag. But the tag must
always go first.
For e.g. <tag attrib1="vi" attrib="v2"> Information </tag>
BASIC HTML DOCUMENT STRUCTURE

Every HTML document should include following 5 structure tags in the order
given below
< document type ...>
<html>
<head>
<title>
title of document
</title>
</head>
<body>
This is where you write the information.
</body>
</html>
The structure tags provide browsers with the information about document
characteristics such as the version of HTML used, introductory information about
the document, title of the document, etc. Most structure tags do not appear in the
browser window. These structure tags work "behind the scenes". Essentially, tell
the browser which elements to include and how to display them. These tags are
essential to tell the browser how to interpret the document.
1. THE <! DOC TYPE ...> TAG

This is also called as prologue identifier, which can be used in the HTML
document and is optional for 4.0. But we should use this prologue identifier
because this is essential for higher versions including XHTML 1.0. With the
identifier is the name of the HTML DTD (document type definition) that the
prologue identifier labels the HTML document as adhering to.
For e.g.
</!doc type HTML public +-//IETE//DTD//HTML level1// EN//">
Should adhere to the HTML!.

The document prologue identifiers should be included before<HTML> tag of
the HTML document. Infact it should be the first line of nay HTML document.
Following prologue identifier refers to HTML 4.0 specification. <! DOC TYPE HTML
PUBLIC "-//W3C//DTD HTML 4.0 FINAL//EM1">
2. THE <HTML> TAG

This element identifies the document containing HTML elements. It should
immediately follow the prologue identifier and serves to surround all of the
remaining tags including all other elements. The start tag <HTML> is placed at the
beginning of the HTML document to tell the browser that the language used is
HTML and it should display it as such. The end tag </HTML> is placed at the end
of the HTML document.
3. THE <HEAD> TAG
This is the header section of the page. It can include a whole lot of
information about it. You can specify the title of the page keywords for the search
engines, scripts used, style definitions and document is not displayed on the web
page itself.
4. THE <TITLE> TAG

Every HTML document should have a title tag. The title should identify the
contents of the document and may be used in history lists and as a label for the
windows displaying the document. The titles are not rendered in the text of the
document itself. Normally, browser will render the text contained within the
<title>....... </title> elements in the title bar of the browser window.
The title element must occur within the head of the document and does not
contain anchors, paragraphs elements, highlighting etc. Only one title is allowed in
a document. The length of the title is not limited, however, long title may be
truncated in some applications. Also, keep in the mind that a short title such as
“introduction" may be meaningless. An example of meaningful title may be
"introduction to HTML".
This is the only element i.e. required in the head element, other elements are
optional and can be implemented when appropriate <!doctype HTML
public"-//w3s//DTD HTML 4.0 final//EM">
<HTML>
<HEAD>
<TITLE>
WELCOME TO IT
</TITLE>
</HEAD>
</HTML>
WHY DO YOU NEED A PAGE TITLE?

The title appears in browser bookmarks/favorites. Something like "guide to
the HTML coding" is certainly much more informative than index-htm, which is
what bookmark will be, if you don't give a title.
The title is also used by search engines to describe your page. So, it makes
good sense to have a meaningful tag.
5. <BODY> TAG
The body of the html document contains all the text and images that make
up the page, together with all the elements that provide the control or formatting of
the page. The body element contains the document contents i.e the information
that is shown in the browser window. The body takes number of attributes for
specifying the background and colors of the documents on graphical browsers.
HEADING TAGS
HTML defines six levels of headings. H1, H2, H3, H4, H5, H6 tags are used
to make headings which are usually rendered in a large bold font. The highest level
of heading is <H1>, followed by <H2>, <H3>, <H4>, <H5>, <H6>, the smallest one.
Using a header tag one line is automatically added before and after the heading. It
is a fairly a common practice to use level 5 and level 6 headings for copying notices
and disclaimers. These headings are usually too small for anything else.
ATTRIBUTES OF HEADING
By default all browsers align headings on the left attribute "align" specifies
the horizontal alignment of the text contained in heading.
HEADING ATTRIBUTE EFFECT

Align = left Aligns the heading on the left
(default)
Align = right Aligns the heading on right
Align = center Aligned the heading on center
e.g. <h1 align = "center"> This will be aligned on center </h1>
THE PARAGRAPH TAG

The <P> tag is a paragraph tag. Think a paragraph as a block of text! The
<P> tag by itself does not do much. Although with most browsers, starting a new
paragraph does not have the effect of skipping a line.
The end tag for <P> is optional when the paragraph is followed bu another
paragraph. If <P> is omitted, the paragraph is not followed by the blank line.
ATTRIBUTE
The "align" is the attribute which can be used to align the paragraphs
horizontal.
ATTRIBUTE EFFECT
align = "left" aligns the paragraph on the left (default)
align = "right" aligns the paragraph on the right
align = "center" aligns the paragraph on the center
align = "justify" aligns the paragraph justified i.e. the text
continues
upto both margins.
LINE BREAK
A line break in the html file (for e.g. xyz.html) does not cause a browser to
display a line break. In other words, the browser does not recognize formatting.
Unless, you tell it otherwise, it just displays the characters in the steady stream. If
you want to start a new line, you have to use a line break. The <BR> tag forces a
break in the current line of the text. The line break tag <BR> specifies that anew
line must be started at that point. The amount of line space used is independent on
the particular browser, but us generally the same as it would use when wrapping a
paragraph of text over multiple lines.
In other words, <BR> tag is same as clicking the RETURN or ENTER key on
your keyboard in a word processor. It causes the browser to stop printing tags on
that line and drop down on the next line on same page.
E.g. Notepad
<body>
<p>
Twinkle twinkle little star<br>
How I wonder what you are?<br>
</p>
</body>
Browser
Twinkle twinkle little star
How I wonder what you are?
ADDING COMMENTS
Sometimes you might not want visitors to your website to see comments or
note, you need to add to your web pages. These noted might be directions to
another person or remainders to yourself.
Syntax

E.g. 
A space should appear after the opening comment or before the closing
comment. Comments are not restricted in size and can cover many lines at a time.
Comments are often used to exclude contents from older browsers, particularly
those that do not understand client slide scripting or style sheets.
<DIV> TAG
The <DIV> tag is used to structure HTML documents into unique sections or
divisions. This tag does not have any formatting properties of its own. But carries
the properties of the attribute used with it. This means that placing a <DIV> tag in
your page won't affect the look of it in the browser. But placing <DIV align =
"right"> aligns the elements after that tag to the right margin. By default, contents
of the DIV tag are left aligned.
One significant benefit of the DIV tag as compare to using the align attribute
with the <P> or <HR> tag is that it can be used to align many different types of the
elements o n your page. With the single DIV tag, you can align paragraphs
horizontal rules and many other page elements.
Divisions are also useful when used in combination with the style sheets.
E.g.
<div align = "right" >
<h1> example </h1>
<p> This paragraph will be aligned to the right </p>
<hr>
</div>
<CENTER> TAG
The center tag defines a block, whose contents are centered horizontally on
visual browser window. You can center one word, one line, one paragraph or full
web page using this tag.
Everything between the center tag gets centered. All lines of text between the
begin and end of center tag are centered between the current left and right margin.
E.g.
<center>
<h1> example </h1>
<p> This paragraph will be aligned to the center</p>
<hr>
</center>
<BLOCK QUOTE> TAG

The <block quote> tag is used to contain text quoted from another source.
Typically the block quote rendering is slight extra left and rights intend and
generally rendered in an italic font. The browser determines the exact amount of
indentation and it may vary from browser to browser. The block code element
causes a paragraph break and typically provides space above and below the quote.
You can nest <blockquote> tags to indent text further.
The HTML specification implies that rendering on single font systems (for
e.g. on non- graphical browsers) may reflect the quotation style of Internet mail,
which is normally represented by putting a vertical line of graphic characters such
as (>) symbol, in the left margin.
E.g.
<P> In our annual gathering function our principal said,
<blockquote> "Everybody should work hard. Hard work can lead to success
in any field.
Wish you all the best.
</blockquote>
</p>
Browser
In our annual gathering function our principal said,
"Everybody should work hard. Hard work can lead to success in any field.
Wish you all the best."
PREFORMATTED TEXT <PRE>

Occasionally, spacing, tabs, and returns are so important in text that
HTML's default behavior of disregarding them could ruin the meaning of the text. In
such cases, you may want to preserve the intended formatting by specifying the
text to be pre formatted. Consider, that programming source code or poetry needs
to be inserted in to a web page. In both cases, the spacing, returns and tabs in the
document must be preserved to ensure proper meaning. This situation requires an
HTML directive that indicates the preservation of format. The <PRE> tag can be
used to surround the text that should not be formatted by the browser. The text
enclosed within the <PRE> tag retains the spacing and returns.
E.g.
<PRE> This is pre formatted
T
E
X
T
</pre>
<p> This is not pre formatted T
E
X
T
</p>
Browser
This is pre formatted T
E
X
T
This is not pre formatted TEXT.
THE <ADDRESS> TAG

The address tag is used to surround information such as signature of the
person who created the web page or address of an organization who is responsible
for that web page.
E.g.
<address>
Institute of technology<br>
opp. unr railway station<br>
unr-3<br>
itunr@vsnl.com<br>
</address>
The above address might be inserted towards the bottom of every web page
throughout the website.
The <address> tag renders the text in italic. It inserts the blank before and
after the block. It may enclose many lines of text formatting tags to change font
characteristic and even images. It is not supported to enclose other block level
elements.
THE <FONT> TAG

The font tag element changes face, color and size of the font. The major
attributed of the font tag are color, face and size.
SIZE--- Most of the browsers support different sized fonts within HTML documents.
The element is <font size = "value">.
Valid values range from 1 to 7, where 1 is the smallest tag in the document
and 7 is the largest. The default font size is 3. The value given to the size can
optionally have '+' or '-' character in front of it. To specify that it is relative to the
document base-font. The default base-font is 3 and can changed with the tag <base
font size-"value">. The value for this form of size attribute should range from +1 to
+6 and -1 to -6.
E.g.
<font size="4"> will change the font size to 4 </font>
<font size =="+2"> will change to the basefont size +2. </font>.
COLOR
Most of the browsers support the ability to change the font color by using
<font color ="value">
In this case, the value can be represented either as "#rrggbb" or "color name". The
color attribute set the color which text will appear on the screen. #rrggbb is
hexadecimal color denoting a RGB color value. Alternately, the color can be set to
one of the available predefined colors.
E.g.
<font color="#ff0000">. This text will be red </font>
<font color = red> this text will be also in red.</font>
FACE
<font face="value1 [value2][value3]">
In this case, the value will be name of the font. The browser Checks to see, if
the first specified font is installed on the user's computer and if not, it checks for
the second and so on. The text is displayed with the first installed font specified in
the list. If all the listed fonts are installed on the viewer's computer, the browser
user the default font.
E.g.
<font face ="courier"> this text will be displayed in courier .</font>
TEXT LEVEL TAGS

The text level tags are used for character level formatting. This formatting
applies emphasis on individual letters or words. For e.g. you can make a word
appearing italic, bold, superscript or subscript. The text level tags are used within
the block level tags such as paragraphs <P>.
THE <B> TAG

This is the bold tag i.e. used to render the text enclosed in<B> tag in bold
face.
THE <I> TAG

This is the italic tag, which specifies that the text should be rendered in
italic font.
THE <U> TAG

This underlined tag states the enclosed tag should be rendered underline.
THE <STRIKE> OR <S> TAG

This strike through tag states the enclosed tags should be displayed with a
horizontal line striking through the text.
THE <SUB> TAG

This tag formats the tag as a subscript.
THE <SUP> TAG

This tag formats the tag as superscript.
THE <TT> TAG
This tag applies the fixed width font also called as mono space. The text
rendered same as that of typewriter text.
E.g. Write a HTML code to create web page to display following
This is important formula
a2=b2c.
<body>
<P> this is important formula<br>
a<sub>2</sub>=b<sup>2</sup>c</p>
</body>
HORIZONTAL RULE
To draw a horizontal rule the <HR> tag is used. It is a divider between
sections of text such as full width horizontal rule or equivalent graphic. The <HR>
tag specifies that a horizontal rule of some sort be drawn across the page. The
default is shaded line.
The common attributes used with <hr> tag are size, width, align, noshade.
SIZE
The size attribute allows the web author to give an indication of how thick
they wish the horizontal rule to be. In other words, size attributes defines, the
thickness of horizontal rule.
E.g.
<hr size="3">
Because of above tag, the horizontal rule will be rendered with the
thickness of 4 pixels.
WIDTH
The default horizontal rule is always as wide as the page. With the width attribute,
the author can specify, the exact width in pixels or relative width measured in
percent of document width.
E.g.
<hr width=50%>
The above tag will cause to render a horizontal rule of the width of 50%
of the page.
ALIGN
With the width attribute, the horizontal rules do not have to be the width of
the alignment of the horizontal rule as a left aligned, right aligned or center aligned.
E.g.
<hr align = center>
This will cause the center aligned horizontal rule.
NOSHADE
When a solid bar is required the NOSHADE attribute allows the author to
specify that the horizontal rule should not be shaded at all. To summarize
E.g.
<hr size = number width = number"/ "percentage" align =
"left"/"right"/"center" NOSHADE>
COLORS IN WEB PAGES

It is possible to control the document ‘color’ scheme and background by
specifying certain attributes in the <body> tag.
BACKGROUND
The background attribute can be used to point to an image file that will be
filled across the browser window to provide a background for the document. For ex
<body background = ”imagename.gif”>
Rest of the text goes here.
</body>
The above HTML code would cause whatever text, images, etc appeared in
that document to be placed on a background consisting of the “imagename.gif”
graphical file. Being filled to cover the viewing area, much like bit maps that are
used for windows wallpaper.
BGCOLOR
This attribute allows setting of the background color for the following
document example
<body bgcolor = “#RRGGBB”>
Rest of the text goes here.
</body>
where ‘#RRGGBB’ is the hexadecimal red – green – blue (RGB) triplate used
to specify the background color. Once the background colors and patterns have
been changed, it is necessary to control the foreground to establish a proper
display contrast.
TEXT
This attribute is used to control all the normal text in the document. This
basically consists of all text i.e. not specially a color.
LINK, VLINK, ALINK

These attributes allow you to control the coloring of the link text. Vlink
stands for visited link and Alink stands for active link. The active link is the link
when the mouse pointer is on that link. The default coloring of these links are
1. link = blue
2. Vlink = purple
3. Alink = red
LISTS
Three primary types of lists are available in HTML
1. Ordered lists
2. Unordered lists
3. Definition lists
Each list environment is well suited for one or more specific type of writing.
The entire list is surrounded by a beginning and ending list tag which varies
depending on the type of the list. In addition, list item tags are used to identify each
entry in the list. The list item tag also depends on the type of list you are using.
ORDERED LISTS
In an ordered list, the elements are prefixed by a symbol that denotes their
relative order within the list. The most commonly used symbols for marking the
elements of an ordered lists are Arabic numbers, letters and roman numerals. An
ordered list is used for a series of sequential steps or specifically ordered items. The
beginning and ending tags for an ordered list are <OL> and </OL> respectively. The
beginning tag for each list item is <LI>. No ending tag is necessary for an item,
since the browser can determine the end of a list item by encountering either
another item tag<LI> or an ending tag for the list </OL>. By default, the items in
the ordered lists are numbered using Arabic’s numbers.
The following HTML code illustrates the use of an ordered list. To describe
the process of saving a Microsoft word file.
<H3> To save file in Microsoft word </H3>
<ol>
<li>click on file
<li>select save as option
<li> in the presented dialog box enter the name.
<li> click 'ok' to save file.
</ol>
This would render as follows
To save in Microsoft word
1. Click a file
2. Select save as option
3. In the presented dialog box, enter the name.
4. Click 'ok' to save file.
TYPE ATTRIBUTE
The TYPE attribute allows the author to specify whether the list items should
be marked with Arabic numbers, letters or roman numerals.
TYPE = "A" marks the list items using capitals letters A,B,C,---
TYPE = "a" marks the list items with small letters a,b,c,----
TYPE = "I" marks the list items with large roman numerals I,II,III,---
TYPE = "i" marks the list items with small roman numerals i,ii,iii,----
TYPE = "1" marks the list items with Arabic nos 1,2,3,---(default)
START
For lists that are required to start at values other than 1, then the another
attribute start is used.
START is always specified in the default number. This will be converted
based on TYPE before displaying. Thus start=5 would display either E,e,V,v,5
depending on the type attribute.
E.g.
<H3> To save file in Microsoft word </H3>
<ol type ="a" start="3">
<li>click on file
<li>select save as option
<li> in the presented dialog box. enter the name.
<li> click 'ok' to save file.
</ol>
O/p
To save in Microsoft word
c. Click a file
d. Select save as option
e. In the presented dialog box, enter the name.
f. Click 'ok' to save file.
Note that the TYPE attribute within the <ol> tag sets the numbering scheme.
For the whole list, unless it is overridden by TYPE value in the <li> tag. Each <li>
tag may have a local type attribute set to A, a, I, i, 1. Once <li> tag is set with a new
TYPE, it overrides the numbers style for the rest of list, unless another LI sets the
TYPE attribute.
E.g.
<p> you can override the TYPE set in OL tag by using local. TYPE attribute
</P>
<ol>
<LI>the first item
<LI> the second item
<LI> the third item
<LI TYPE= "A"> the fourth item
<LI> the fifth item
<LI>the seventh item
<LI TYPE = "a'> the eight item
</OL>
This will be rendered as follows
You can override the TYPE set in OL tag by using local.
TYPE attribute
1. The first item
2. The second item
3. The third item
4. The fourth item
5. The fifth item
6. The seventh item
7. The eight item
A <LI> tag within an ordered list can override the current numbering with
the VALUE attribute which is set to a numeric value. Numbering of the list should
continue from the value set.
E.g.
<P> This example explains effect of VALUE attribute </P>
<OL TYPE = "A" START = "5">
<LI>the first item
<LI> the third item
<LI VALUE= "2"> the fourth item
<LI> the fifth item
</OL>
This will render as follows
E. The first item
F. The second item
G. The third item
B. The fourth item
C. The fifth item
UNORDERED LISTS
The ordered list is used when the order in which the item appears is
significant. If the order is not important you can use unordered lists. Rather than
being numbered, the items are usually marked with bullets.
The beginning and ending tags for unordered tags are <UL> and</UL>
respectively. Each item in an unordered list is identified by list item tag <LI>.
E.g.
<UL>
<LI> the first item
<LI> the third item
</UL>
. The first item
. The second item
. The third item
TYPE ATTRIBUTE
Each item is prefaced by a bullet is disk as shown above the TYPE attribute
can be used to change the style of bullets. The possible options existing for bulleted
style are as follows
TYPE EFFECT
disc usually displayed as small filled in circle
circle usually displayed as an open circle or empty
circle
square usually displayed as an open square.
NOTE: If you nest unordered list the default values changes from disc to circle to
square.
To give more flexibility to the list the TYPE attribute to the <LI> tag is also
allowed. It changes the list type for that item and subsequent items.
DEFINITION LISTS
Definition lists are unordered lists in which each item has two parts
1. A data term
2. It’s corresponding definition.
The beginning and ending tags for definition list are <DL> and </DL>
respectively.
Instead of using a <LIST> item tag for each item, the term tag <DT>, the
definition portion uses data definition tag <DD>, the corresponding ending tags for
definition, definition term and data definition are </DT> and </DD> respectively.
NOTE Both the ending tags </DT> and </DD> are optional and generally not used.
E.g.
<DL>
<DT>HSNCB
<DD> Hyderabad Sind National Collegiate Board was established in
1948 in India.
<DT> IT
<DD> Institute of technology was established in 1985.
</DL>
HSNCB
Hyderabad Sind National Collegiate Board was established in 1948 in India.
IT
Institute of technology was established in 1985.
NOTE: Each item is rendered on its own line, and the definition is on succeeding
line and is slightly intended. The definition list environment is often used for
displaying a glossary or for defining a group of terms. Another common use of the
definition list atg is the presentation of group of items with custom bullets.
NESTED LISTS
It is possible to nest the different types of lists within one another or to nest
multiple list of same type.
E.g.
<OL>
<LI>MIT
<LI> PAM
<LI> OOPS
<LI> INTERNET
<OL TYPE= "A">
<LI> INTRODUCTION
<LI> VARIOUS WAYS TO CONNECT
<LI> HTML
<UL>
<LI> INTRODUCTION TO HTML
<LI> TABLES, FORMS, FRAMES
</UL>
<LI> EMAIL
</OL>
<LI> DCC
</OL>
1.MIT
2. PAM
3. OOPS
4. INTERNET
A. INTRODUCTION
B. VARIOUS WAYS TO CONNECT
C. HTML
. INTRODUCTION TO HTML
. TABLES, FORMS, FRAMES
D. EMAIL
5. DCC
NOTE: When nesting different types of lists, make sure to close them off properly.
LINKS
HYPERLINK
Hyperlink is an element in HTML document that links to another place in
the same document or entirely in different document. It is usually a text
description, image or other object, that when clicked, will take the visitor to another
page or allow them to download a file.
The text or an image when used as a hyperlink then mouse pointer changes
to hand over it. Typically, we click on the hyperlink to follow the link.
THE <A> TAG

The <A> tag denotes the anchor i.e. a hypertext link or the destination of a
link. The <A> tag denoted the hypertext link it HREF attribute is used. The <A> tag
denotes the destination of a link it is the name of an attribute.
ATTRIBUTES
HREF
Many times we need to use hyperlink REFERENCE i.e reference to the link
address. In such cases, we use HREF attribute, If the HREF attribute is present,
the text between the opening and closing anchor tags becomes a hypertext link. If
the link is selected by visitors, they move to the document or location specified by
the value of the attribute. You can like any type of the file on the web including
image, sound and movies. For the HREF, value is URL. Types of the URLs vary
depending upon the location of the document to which you are linking. Basically,
URLs fall into two categories
1.Absolute URLs
2.Relative URLs
1. ABSOLUTE URLs
An absolute URL contains the protocol indicate, host name and may be the
folder name and filename. For e.g.- http//www.yahoo.com. If we want to use such
type of absolute URL, the anchor tag would be look like as follows
<a href = "http//www.yahoo.com"> visit yahoo </a>
2.RELATIVE URLs
A relative URL usually contains only filename or folder name. You can use
these partial URLs when you are pointing to the file that is located within the same
folder or the same server as an originating file. In these cases, browser doesn't need
the server name or protocol indicator because it assumes the files are located in the
folder or on a server that is relative to the originating document.
E.g.
<a href="index.html"> index </a>
In this example only the filename is used. It tells the browser that the file
index.html is available in the same folder.
Another e.g.
<a herf= "cm\index.html"> cm</a>
It tells the browser to request for a file "index.html" which is available in
another folder "cm".
While using the absolute URLs several protocols are permitted by the
browsers.
PROTOCOL LINK TO
http// document located on www
ftp// link ftp site
gopher// gopher server
mailto// brings up browser mailing dialog box.
INSERTING E-MAIL LINKS

E-mail links can be inserted into the web page by using anchor tag in
combination with mail to protocol.
For e.g.
<a href ="mailtoitunr@vsnl.com"> contact</a>
Activating above link will bring the browser's mailing dialog box or default
mail client allowing the user to send the mail messages to the address that follows
the mailto attribute. In this case, the address is itunr@vsnl.com.
You can use the title attribute for mailto link. It allows the author to specify
the subject of the mail message that will be send.
NAME ATTRIBUTE
The name attribute allows the author to specify the target of the link. The
value of the name attribute is an identifier for the anchor.
Identifiers are arbitrary strings, but must be unique within the HTML
document. Also, note that the identifiers are case sensitive in the HTML document
and cannot contain spaces.
e.g.
<a name = "introduction"> introduction </a>
-----------------
-----------------
-----------------
<a href ="# introduction"> introduction </a>
The above example can be represented as follows
e.g.
<a name = "abc"> introduction </a>
-----------------
-----------------
-----------------
<a href ="# abc"> top </a>
This refers to the anchor in the same document. When you activate the link,
it will take you to the "introduction" on the same web page.
3. TARGET ATTRIBUTE
The TARGET attribute is used combination with frames. To target a link so
that, the result loads in a particular frame, the target attribute is added to the
anchor tag. For ex suppose you want to offer visitors to your site a link to yahoo!
but you do not want to encourage them to leave the site. If you use "_blank" as a
value of a TARGET attribute in your link to yahoo, the browser will launch a new
window to load "http//www.yahoo.com".
E.g.
<a href = http//ww.yahoo.com" target ="_balnk"> visit yahoo</a>
TARGET VALUE DESCRIPTION

_blank opens a link in new unnamed browser's window.
_self opens the link in same window currently being used
(default)
name opens the link in the window of that name, if no window
is currently opened by that name, the
browser launches a new
window and gives it a name specified.
HTML TABLES
Tables are commonly used as a lay out device for organizing text and images.
The TABLE tag defines a table for multi dimensional data arranged in rows and
columns. The <TABLE> tag contains CAPTION, TR, TH, TD tags. Following is the
syntax of TABLE tag with commonly used attributes
<TABLE
ALIGH="LEFT\RIGHT\CENTER"
BGCOLOR="COLOR"
BORDER="PIXELS"
CELLPADDING="PIXELS"
CELLSPACING="PIXELS"
HEIGHT="HEIGHT"
WIDTH="WIDTH">
------
-----
------
</TABLE>
ALIGN
It allows a table to be aligned to the left or right or center of the page.
Allowing the text to flow around the table.
BGCOLOR
It allows the BGCOLOR of the table to be specified, using either color names
or #rrggbb.
<table bgcolor="#ff0000">
This will set the background color of the table as red.
BORDER
This attribute can be used to control and set the borders to be displayed for
table.
If border is present, then border will be drawn around all data cells. The
exact thickness and display of default border depends on the individual browsers.
If the attribute is not present, then the border is not displayed. But, the table is
rendered at the same position as if there were a border. (I.e. allowing room for the
border). Border = pixel specifies the thickness of the border for the table. The
border value can be set to 0, then no border will be drawn.
You can specify the border color by using attribute "border color". This
attribute sets the border color of the table. You can use predefined color names or
rrggbb hex triplet as a value for this attribute. Note that bg color and border color
attributes can be used in <TH>, <TR>, <TD> tags.
CELLPADDING
The cell padding is the amount of white space between the border of table
cell and the actual cell data i.e. whatever is to be displayed in the cell. It defaults to
an effective value of 1.
CELLSPACING
The cell spacing is the amount of space inserted between individual table
data cells.
HEIGHT AND WIDTH

Height and Width of the table can be specified using HEIGHT and WIDTH
attributes in the table. The value for HEIGHT and WIDTH can be given either in
pixels or in percentage.
For ex
<table
height="100"
width="100">
will set the height and width of the table as 100 pixel by 100 pixels.
E.g.
<Table
height="10%"
width="40%">
will set the height of the table 70% of the browser window and the width of the
table to 40% of the browser window.
<TR> TAG
The <TR> tag defines table row. TR must be contained within table. TR
contains TH and TD. The commonly used attributes are
ALIGN, VALIGN and BGCOLOR.
ALIGN
The align attribute can take 3 values i.e. left, center and right. This attribute
specifies the horizontal alignment for each cell in the row. The default is left.
VALIGN
This attribute specifies the vertical position of the cells content. It can take 3
different values
1. top
2. middle
3. bottom
Top positions the cell data at the top of the cell, middle centers the cell data
vertically while bottom positions the data at the bottom of the cell.
BGCOLOR
This attribute specifies the Background colour of the row of the table. The
Background colour of the specific cell may differ if specified by the attribute bgcolor
in the element TH & TD.
<TH> & <TD> Tag

TH stands for table Header & TD stands for Table data. The <TH> defines
the data cell in the table. TH & TD are contained within the TR. The browser
displays the text contained in TH element as a bold and centered. This is the only
difference between TH and TD. The commonly used attributes are
ALIGN, VALIGN, BGCOLOR, COLSPAN & ROW SPAN.
COLSPAN
COLSPAN specifies the no of columns that are spanned by the cell.
ROWSPAN
ROWSPAN specifies the no of the rows that are spanned by the cell.
For e.g.
ROWSPAN = 2 will cause the cell to span over 2 rows.
COLSPAN = 3 will cause the cell to span over 3 columns.
CAPTION
This represents the captain for the table. The caption tag should appear
inside the table tag but not inside table rows or cells. The CAPTION accepts an
alignment attribute by default ALIGN = TOP which causes the CAPTION of the table
to be rendered on the top of the table. ALIGN = BOTTOM will cause the caption to
appear at the bottom of the table.

Html-Hyper Text Markup Language: For E.G. Information

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Html-Hyper Text Markup Language: For E.G. Information

Uploaded by

Copyright:

Available Formats

HTML- HYPER TEXT MARKUP LANGUAGE

HTML is made up of tags and attributes, which work together to identify

BASIC HTML DOCUMENT STRUCTURE

1. THE <! DOC TYPE ...> TAG

Should adhere to the HTML!.

2. THE <HTML> TAG

4. THE <TITLE> TAG

WHY DO YOU NEED A PAGE TITLE?

HEADING ATTRIBUTE EFFECT

e.g. <h1 align = "center"> This will be aligned on center </h1>

THE PARAGRAPH TAG

<BLOCK QUOTE> TAG

PREFORMATTED TEXT <PRE>

This is not pre formatted TEXT.

THE <ADDRESS> TAG

THE <FONT> TAG

TEXT LEVEL TAGS

THE <B> TAG

THE <I> TAG

THE <U> TAG

THE <STRIKE> OR <S> TAG

THE <SUB> TAG

THE <SUP> TAG

COLORS IN WEB PAGES

LINK, VLINK, ALINK

THE <A> TAG

INSERTING E-MAIL LINKS

TARGET VALUE DESCRIPTION

HEIGHT AND WIDTH

<TH> & <TD> Tag

You might also like