html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
Html-Hyper Text Markup Language: For E.G. Information
Html-Hyper Text Markup Language: For E.G. Information
Html-Hyper Text Markup Language: For E.G. Information
<HTML>
<HEAD>
<TITLE>
WELCOME TO IT
</TITLE>
</HEAD>
</HTML>
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.
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. <!--- This text will not be rendered in the browser window ---->
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>
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."
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>
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>
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.
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 second 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 second item
<LI> the third item
</UL>
This will be rendered as follows
. 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>
This will be rendered as follows
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>
This will be rendered as follows
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.
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.
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>
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.
<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.
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.