The <a> tag is called the anchor tag
and it is most commonly used with the href attribute to create a
hypertext link (usually referred to as just a link). By simply clicking on the
link with a mouse or using a keyboard command, you can travel from one page to
another page on the same web site or a different one. By default, the new pages
is normally displayed in the same window or frame, unless you specify otherwise
using the target attribute.
The target attribute specifies the name of
the frame or window in which the target page should appear when a link is
clicked. The four reserved names are _blank, _parent, _self, and _top.
Code:
<a
href="http://jaipur.sancharnet.in/vbguru/index.htm " target="_blank">Visit
my site</a>
<a href="mailto:yss32@rediff.com">Yogendra
Sisodia</a>
The <p> tag is used to signify the
beginning of a paragraph and is analogous to having both a line break and a
carriage return occur. The flow of the display of the text and any images is
halted on the current line, an entire line is skipped (or a certain amount of
white vertical space), and then the flow resumes starting at the left margin
(by default).
Code:
My favorite PL is
!
<p align="center">
Java
<p align="right">
I love VB too</p>
<p>
Do you have favorites?
Output:
My favorite PL is !
Java
I love VB too.
Do you have favorites?
FONT
The font
tag is used to set the face (type), color, and size of the characters in a
text.
The closing tag is mandatory.
color
The color attribute is used to set the color of the text. It can be
either a named color (such as red) or a six character hexadecimal RGB color
code (such as #e26fa9).
face
The face attribute sets the font face (type) of the text, such as Arial
or Courier. You can specify alternate faces by using a comma separated list. If
a browser does not recognize the specified face, it will display the
alternate face in the list or the default.
size
The size attribute is used to set the size of the text. The range is 1
to 7, and the default is 3. When you use + or - values to set the size using
the font tag, the new size will be relative to the default value of 3,
or to the value set using this attribute.
Code:
<font face="Verdana"
color="red" size="1">1</font>
<font face="Verdana"
color="red" size="2">2</font>
<font face="Verdana"
color="red" size="3">3</font>
<font face="Verdana"
color="red" size="4">4</font>
<font face="Verdana"
color="red" size="5">5</font>
<font face="Verdana"
color="red" size="6">6</font>
<font face="Verdana"
color="red" size="7">7</font>
Output:
1 2 3 4 5 6 7
The <b>
tag causes the designated text to be displayed in a bold weight. If bold is not
available for a particular font, the browser may impose some other physical change
to the text, such as underline.
Code:
<b>Java Classes</b> are
intersting!
Output:
Java Classes are intersting!
The <i>
tag causes the designated text to be displayed as an italic or oblique font
style. If italic or oblique is not available for a particular font, the browser
may impose some other physical change to the text, such as underline.
Code:
Yogendra is <b>
21</b> <i> years old</i>?
<br>
Yogendra is <b> 21</b>
<em>years old</em>?
Output:
Yogendra is 21 years old?
Yogendra is 21 years old?
The <u>
tag causes the designated text to be underlined.
The closing tag is mandatory.
Code:
Remember, the default for
<u>hyperlinks</u> is to be <u>underlined</u>.
Output:
Remember, the default for hyperlinks
is to be underlined.
The <center>
tag is used to align the selected element in the center of the window with
respect to the right and left borders. This is a very easy way to center text,
tables, and images.
Code:
<center>
<b>Yogendra is VB Guru</b>
</center>
Output:
Yogendra is VB Guru
The <img>
tag is used to insert a graphic or photographic image directly into the flow of
text and other images. No line breaks or carriage returns are automatically
inserted before or after the image. You can use of attributes and style sheets
to effect an appearance and presentation of images and text that suits your
needs.
align
The align attribute is used to control the position of the image with
respect to the text and other elements. The permitted values are absbottom,
absmiddle, baseline, bottom, left, middle, right, texttop, and top.
This attribute is deprecated effective with new versions. However, most
browsers continue to recognize this attribute.
src
The src attribute is used to control the flow of text around images.
alt
The alt attribute provides a text message that will be displayed (in
place of the image) on browsers that cannot display a graphic image or picture.
Code:
<img src="images/guru.gif"
align="middle" alt="VB Guru" border="2">
The <table>
tag is used to designate that this element is a table. A table is a structural
presentation of data or information using rows and columns.
The default is that the flow of any text and images is stopped in the HTML
document, the table element is inserted starting on the next line, and
after the end of the table element is reached, the flow of text and
images resumes on the following line. However, the use of attributes and style
sheet properties will allow you to embed the table element within the
text and images.
The insides of the table are constructed using the tr, th, td,
and the caption tags. There are also three new table tags that were
released with new version . They are tbody, tfoot, and thead.
Code:
<table
width="80%" border="10" cellpadding="3"
cellspacing="5" align="center">
<caption>
<center><b>How To
Code A Table</b></center>
<br>
Use the caption tag to name
the table and to provide useful information about the contents
</caption>
<tr>
<th
colspan'"2">Use the <b>th</b> tag to create the header
which will display in bold</th>
</tr>
<tr>
<td
width="50%">The <b>tr</b> tag creates the
row</td>
<td
width="50%">The <b>td</b> tag creates individual cells
for each row</td>
</tr>
<tr>
<td
width="50%">You should always use the closing tags</td>
<td
width="50%">You can use a variety of HTML tags inside the
cell</td>
</tr>
<tr>
<td width="50%">The
three new version table tags are <b>tbody, tfoot,</b> and
<b>thead</b></td>
<td
width="50%">The <b>colspan</b> attribute allows you
span more than one cell</td>
</tr>
</table>
Output:
|
How To Code A Table
|
|
|
Use the th tag to create the header
which will display in bold |
|
|
The tr
tag creates the row |
The td
tag creates individual cells for each row |
|
You should
always use the closing tags |
You can
use a variety of HTML tags inside the cell |
|
The three
new version table tags are tbody, tfoot, and thead |
Setting colspan
allows you span more than one cell |
The <ul>
tag is used to delimit the start and stop of an unordered list. An unordered
list is a collection of items (typically related somehow) that are in no
particular order. Each item in the list is preceded by a bullet with the default
being a round disc: •
Most browsers separate the list from any preceding and following text by
paragraph breaks. You can nest unordered lists and each nested list can have a
different bullet.
You must use the li tag to display an item in the list.
Code:
Three Major Types Of Lists:
<ul>
<li> Definition List
<ul
type="square">
<li> dd tag
<li> dl tag
<li> dt tag
</ul>
<li> Ordered List
<ul
type="circle">
<li> ol tag
<li> li tag
</ul>
<li> Unordered List
<ul
type="disc">
<li> ul tag
<li> li tag
</ul>
</ul>
Output:
Three Major Types Of Lists:
The <ol>
tag is used to delimit the start and stop of an ordered list. An ordered list
is a collection of items (typically related somehow) that need to be listed in
particular order. For example, an ordered list could be an index, table of
contents, or a set of instructions. The default is to list each item in numeric
order (starting with the number 1). However, you can also specify Roman
numerals or alphabetic characters.
Code:
Three Major Types Of Lists:
<ol>
<li> Definition List
<ol type="A"
start="5">
<li> dd tag
<li> dl tag
<li> dt tag
</ol>
<li> Ordered List
<ol type="i">
<li> ol tag
<li> li tag
</ol>
<li> Unordered List
<ol type="1">
<li> ul tag
<li> li tag
</ol>
</ol>
Output:
Three Major Types Of Lists:
The <html>
tag informs the browser that this is an HTML encoded program. The html
opening and closing tags delimit the start and stop of the HTML document.
The ending tag is optional. However, it is recommended that it be included.
The <head>
tag is the HTML document header. It serves as a container for other tags that
control the contents and appearance of the main body of the document.
Therefore, its use is optional.
The <body>
tag is used to signify the start of the contents of your HTML document.
If you are using frames, then you use the frameset tag in place of the body
tag.
Code:
<html>
<head>
<title>Tile for Yogendra’s
site</title>
</head>
<body>
body content goes here...
</body>
</html>
Output:
body content goes here...
The <form>
tag is used to delimit the start and stop of a form element and serves as a
container for form controls (fields). Control is a technical term which refers
to the various elements that can be used inside a form to gather
information. The information gathered is referred to as the contents or
parameters of the form and is a collection of name/value pairs.
The four tags that can be used to build a form are:
button
input
select
textarea
The general concept is that the user fills out the appropriate sections of the form
as a response to a request for information (such as a shipping address). The
user then clicks the submit button. The contents of the form are then
submitted for processing, usually to another page on the web site. However, you
can also submit to the same page, or to a window or frame.
This ability to use a web site to display products and information, to gather a
response via a form from a user, to store and manipulate the gathered
information, and then to have the web site respond dynamically to the user
input, is the heart of the e-commerce/e-business industry.
The <button>
tag is used to create a button form control (field). Control is a technical
term which refers to the various elements (buttons, check boxes, radio buttons,
text areas) that can be used inside a form to gather information
Code :
<input type = ”Submit”
action="YogendraPage.jsp">
<input type = “Reset”>
Output:
The <input>
tag is used to create individual form controls (fields). Control is a technical
term which refers to the various elements (buttons, check boxes, radio buttons,
text areas) that can be used inside a form to gather information.
Code:
<input
type="checkbox" name="ckbx1" value="false">
Output:
Code:
<input type="radio"
name="radio1" value="one" checked>
<input type="radio"
name="radio1" value="two">
<input type="radio"
name="radio1" value="three">
<input type="radio"
name="radio1" value="four">
Output:
The <select>
tag is used to create a pull-down list form control (field).
Code:
Who is Creative?
<select size = “4”>
<option selected>Yogendra
Sisodia</option>
<option>Arvind Mohan</option>
<option>Gaurav Bansal</option>
<option>Vibhor Mehrotra</option>
</select>
Output:
Who is Creative?
The <textarea>
tag is used to create a multi-line text input window form control (field).
Control is a technical term which refers to the various elements (buttons,
check boxes, radio buttons, text areas) that can be used inside a form to
gather information.
Code:
<form action="/TomCat/YogendraServlet"
method="post">
<textarea cols="45"
rows="4" name="yss32textarea">Hello Iam Yogendra
</textarea>
</form>
Output :
