Item 2
Nested Lists
List with in another list is called as nested list.
Tables
1. A large data stored in a table can be easily referred because
it provides an organized and systematic display of data.
2. Spanning of cells is possible that is you can merge some
sequence of rows or columns with the help of ROWSPAN or COLSPAN
attributes respectively.
Table TagsPurpose
Indicates start of table
Starts the header part of table and it should followed by
Used to give the table heading
Starts the main area of table, says actual data is started.
Indicates starting of a table row
Actual data for a cell, for each cell we should give
Used to define foot information of the table.
To insert caption in to table, inserts caption data directly
above the table caption text is used to help text-based browsers
interpret the table data.
----------------------Table Code----------------
1. Write a program to use all tags related to table.
Table
Student details
Name
Class
Branch
Roll no
a
1
cse
1
b
1
cse
2
Table Foot
2. Write a program for demonstration of ROWSPAN and COLSPAN.
Table
Features
Companies
Compaq
laser
price12
FORMS
1. Html provides several user interface elements to accept data
from user using Form.
I.e. Forms are the best way of adding interactivity of element
in a web page. They are
Usually used to let the user to send information back to the
server but can also be used to
Simplify navigation on complex web sites.
2. Html form is used to create user interface screens. Action
and method are the two attributes of form.
3. Multiple forms can be used in a single HTML document.
Form code
4. Attributes of form
a. Nameb. Action c. Method.
NAME
Any name can be given to form.
ACTION
It indicates path to the script.
I.e. when user submits the form where it should go is given in
action attribute.
METHOD
1. It specifies how the data entered in the form is sent to the
destination, which may be the web server.
2. There are two methods of sending of information.
a. Post.
b. Get.
POST METHOD
1. It sends the information along with the body of the html
page.
2. Data is not visible while sending.
3. Provides security.
4. Can send any number of characters can be send.
5. Special characters are also possible to send.
GET METHOD
1. It sends the data along with web page address that is
appended to the URL.
2. Data is visible in site address.
3. No security, because password also sent like this.
4. Only limited number of characters.
5. Special characters are not possible to send, only for
standard characters.
1. Write an html program, which uses form to add two
numbers.
my computer
function add ()
{
var a,b,sum;
a=parseInt(document.f1.n1.value);
b=parseInt(document.f1.n2.value);
sum=a+b;
document.f1.n3.value=sum;
}
Enter first integer
Enter second integer
Sum of two numbers
2. Write an html program which uses form attributes action and
method to open local drive c and add html page
form get and post methods
Note
1. 2. The attribute type is used to implement text, password,
checkbox, and radio and submit button e.t.c.
Tags used inside the form tagCHECKBOX
Used for simple Boolean attributes or for attributes that can
take multiple values at the same time. It is represented by a
number of check box fields, each of which has the same name. Each
selected check box generates a separate name/value pair in the
submitted data, even if this results in duplicate names. The
default value for check boxes is on.
FILEA file upload element.
HIDDEN
No field is presented to the user, but the content of the field
is sent with the submitted form. This value can be used to transmit
state information about client/server interaction.
IMAGE
An image field which you can click, causing the form to be
immediately submitted. The coordinates of the selected point are
measured in pixel units from the upper-left corner of the image,
and are returned (along with the other contents of the form) in two
name/value pairs. The x-coordinate is submitted under the name of
the field with .x appended, and the y-coordinate is submitted under
the name of the field with .y appended. Any VALUE=attribute is
ignored. The image itself is specified by the SRC= attribute,
exactly as for the Image element.
PASSWORD
The same as the TEXT attribute, except that text is not
displayed as the user enters it.
RADIO
Used for attributes that accept a single value from a set of
alternatives. Each radio-button field in the group should be given
the same name. Only the selected radio button in the group
generates a name/value pair in the submitted data. Radio buttons
require an explicit
Value attribute.
RESET
It is a button that when pressed resets the form's fields to
their specified initial values. The label to be displayed on the
button may be specified just as for the SUBMIT button.
SELECT-MULTIPLE
Specifies a multiple select list box.
SELECT-ONE
Specifies a single-select list box.
SUBMIT
It is a button, when it is pressed the form data is send to the
corresponding sever of that form.
TEXT
Used for a single-line text-entry field. Important Attributes of
text are SIZE= and MAXLENGTH=.
TEXTAREA
It is used to write the text. Used for multiple-line text-entry
fields. Use in conjunction with the size and maxlength
attributes.
.
This creates a free format of plain text into which the user can
enter anything they like. The area will be sized at rows by cols
but supports automatic scrolling.
LIST
It is used to have a list of item from which a user can choose.
The name of the particular select tag and the name of the chosen
option are returned.
The select statement will have several options from which the
user can choose. The values will be displayed as the user moves
through the list and the chosen one returned to the
server.Frames
1. Normally only one HTML page can be displayed in the web
browser at a time but using the concept of frames more than one
HTML page can be displayed on the browser at a time.
2. Window is logically called as frame in HTML.
3. Collection of frame into a set is called as frameset, which
provides facility to display more than one page at a time on the
browser.
I.e. frameset is collection of frames.
4. Web page that contains frame elements is called framed
page.
5. Framed page begins with tag and ends with .
6. Each individual frame is identified through tag.
7. Each HTML document is called a frame, and each frame is
independent of the others.
FRAMESET Tag
It defines how to divide the window into frames each frameset
defines a set of rows or columns. The values of the rows/columns
indicate the amount of screen area each row/column will occupy.
code
ROWS ATTRIBUTE
It takes as its value a comma separated list of values. These
values can be absolute pixel values, percentage values between 1
and 100, or relative scaling values. The number of rows is implicit
in the number of elements in the list.
Example
1. For 3 rows, the first and the last being smaller than the
center row:
2. For 3 rows, the first and the last being fixed height, with
the remaining space assigned to the middle row:
COLS ATTRIBUTE
It takes as its value a comma separated list of values that is
of the exact same syntax as the list described above for the ROWS
attribute.
BORDER ATTRIBUTE
It accepts a pixel value, which determines the thickness of any
borders used within the frame set.
FRAME TagThis tag defines a single frame in a frameset. It has 6
possible attributes.
SRC ATTRIBUTEIt takes as its value the URL of the document to be
displayed in this particular frame. Frames without SRC attributes
are displayed, as a blank space the size the frame would have
been.
NAME ATTRIBUTEIt is used to assign a name to a frame so it can
be targeted by links in other documents (These are usually from
other frames in the same document.) The NAME attribute is optional;
by default all windows are unnamed.
Names must begin with an alphanumeric character. However,
several reserved names have been defined, which start with an
underscore. These is currently:_Blank always load this link into a
new, unnamed window.
_Self always load this link over your self.
_Parent always load this link over your parent. (Becomes self if
you have no parent).
_Top always load this link at the top level. (Becomes self if
you are at the top).
MARGINWIDTH ATTRIBUTEIt is used when the document author wants
some control of the margins for this frame. If specified, the value
for MARGINWIDTH is in pixels. Margins can not be less than one-so
that frame objects will not touch frame edges-and can not be
specified so that there is no space for the document contents. The
MARGINWIDTH attribute is optional; by default, all frames default
to letting the browser decide on an appropriate margin width.
MARGINHEIGHT ATTRIBUTEIt is just like MARGINWIDTH above, except
it controls the upper and lower margins instead of the left and
right margins.
SCROLLING ATTRIBUTEIt is used to describe if the frame should
have a scrollbar or not. Yes results in scrollbars always being
visible on that frame. No results in scrollbars never being
visible. Auto instructs the browser to decide whether scrollbars
are needed, and place them where necessary. The SCROLLING attribute
is optional; the default value is auto.
NORESIZE ATTRIBUTEIt has no value. It is a flag that indicates
that the frame is not resizable by the user. Users typically resize
frames by dragging a frame edge to a new position. Note that if any
frame adjacent to an edge is not resizable, that entire edge will
be restricted from moving. This will affect the resizability of
other frames. The NORESIZE attribute is optional; by default all
frames are resizable.
Disadvantages of Frames
1. The web developer must keep track of more HTML documents
2. It is difficult to print the entire page
1. Write a program to divide a web page into two equal halfs and
divide the second half into two equal half using frames.
Open.html
frame1.html
Frame1
fc1.html
fc2.html
Frame column1
Frame column2
Output
Cascading Style sheets
1. It is used to change the style of the web page or pages or
web element.
Example:Changing the font color in a web page using style tag or
style element.
2. It is used in HTML to format the web page content.
3. It allows us to separate content from presentation that
simplifies maintaining web page.
4. CSS uses style tag or style element to change the style of
the web page or pages or web element.
5. A style is a set of formatting instructions that can be
applied to a piece of text.
The mechanisms by which we can apply styles to our HTML
documents are
a. Style can be defined within the basic HTML tag.
b. Style can be defined in the tag
c. Styles can be defined in external files called style sheets,
which can then be used in any document by including the style sheet
via a URL.
6. A style has two parts
a. Selector.b. Set of declarations.
Selector
It is used to create a link between the rule and the HTML tag.
The declaration has two parts: a property and a value. Declarations
must be separated using colons and terminated using
semicolons.Selector {property: value; property: value.}Properties
and values in styles
Backgrounds and ColorsFonts:
Color: valueFont-family:
