Plus Two Computer Science Notes Chapter 5 Web Designing Using HTML

Kerala State Board New Syllabus Plus Two Computer Science Notes Chapter 5 Web Designing Using HTML.

Kerala Plus Two Computer Science Notes Chapter 5 Web Designing Using HTML

3 types of Lists in HTML

Unordered List (<UL>) – Items are displayed with square, circle or disc in front
Ordered List (<OL>) – Items are displayed with the following type values.
Type = 1 for 1,2, 3, ………..
Type = i for i, ii, iii, ………..
Type = I for I, II, III, ………..
Type = a for a, b, c, ………..
Type =Afor A,B,C, ………..
Definition List (<DL>) – It is formed by definitions.
- <L/> – It is used to specify List items.
- <DT> – It is used to specify Definition Term.
- <DD> – Used to specify the description
- <A> is used to provide hyperlinks. Two types of linking. Its attribute is HREF.

1) External link – Used to connect 2 different web . pages.
2) Internal link – Used to connect different locations of same page.

Concept of URL

URL means uniform Resource Locator.
Two type of URL
a) Relative URL – Here we explicitly give the web site address
Eg: <Ahref=http://www.hscap.kerala.gov.in>

b) Absolute URL – Here we implicitly give the web site address. The path is not specified here.
Eg: Consider the web pages index.html and school.htmi saved in the folder C:\BVM. The file indexs.html contains the following.

<A href=”school.htmr>. Here we did not specify the full path of the file school.html. But this implicitly points to the file stored in C:\BVM

Creating Graphical hyperlinks

It can be achieved by using the <img> tag inside the <a>tag.
Eg:
<A href=”school.html”><img src=”school.jpg”></A>

Creating E- mail linking
It can be achieved by using the key word mailto as a value to href attribute
Eg:
<A href=mailto:”[email protected]”> SPARK</A>

Insert music and videos
<embed> tag is used to add music or video to

Attributes

src- specifies the file to play
width – Specifies the width of the player
height-Specifies the height of the player
hidden – Used to specifies the player is visible or not
<noembed> – Used to specifies an alternate when the browser does not support the <embed> tag.

Attribute

src-Used to specify the image file
alt – Used to specify the alternate text Eg:
<html>
<head>
</head>
<body>
Here is a tag embed to play music
<embed src=”c:\alvis.wma” width=”500″ height=”500″ hidden=”true”> </embed>
</body>
</html>

<bgsound>tag
This tag is used to play back ground song or music Eg:
<html>
<head>
</head>
<body>
<bgsound src=”c:\alvis.wma” loop=”infinite”> </body>
</html>

<Tabie> is used to create a table.
<TR> is used to create a row.
<TH> is used to create heading cells.
<TD> is used to create data cells.

<Table> Attributes

Border – It specifies the thickness of the border lines.
Bordercolor- Color for border lines.
Align – Specifies the table alignment in the window.
Bgcolor – Specifies background colour.
Cellspacing- Specifies space between table cells.
Cellpadding – Specifies space between cell border and content.
Cols – Specifies number.of columns in the table.
Width – Specifies the table width.
Frame – Specifies the border lines around the table.
Rules – Specifies the rules (lines) and it over rides the border attribute.

Values are given below

none- display no rules
cols – display rules between columns only(vertical lines)
rows – display rules between rows only(horizontal lines)
groups- display rules between row group and column groups only
all – rules between all rows and columns.

<TR> attributes

align – specifies the horizontal alignment. Its val- . ues are left, right, centre or justify.
Valign- Specifies the vertical alignment. Its values are top, middle, bottom or baseline.
Bgcolor – Used to set background color

<TH> and <TD> attributes

Align – specifies horizontal alignment. Its values are left, right, centre or justify.
Valign – Specifies vertical alignment. Its values are top, middle, bottom or baseline.
Bgcolor- Specifies border color for the cell.
Colspan – Specifies the number of columns span forthecell.
Rowspan – Specifies the number of rows span forthecell.

Frameset:

It is used to divide the window more than one pane. It has no body section.

<Frameset> attributes

cols – It is used to divide the window vertically.
rows – It is used to divide the window horizontally.
border-specifies the thickness of frame border.
bordercolor – specifies the color of frame border.

Frame:

It specifies the pages within a frameset.

<Frame> attributes

SRC – specifies the web page.
Scrolling – Scroll bar is needed or not its values are yes, no or auto.
Noresize – It stops the resizing of the frame.
Margin width and Marginheight – Sets margins
Name- Togivenameforthefratne.
Target – specifies the target.

It is used to give content when some browsers that do not support frameset.
Nesting of framesets Step 6: Finally execute the frame.html file
<Form> It is used to take data from the users and send to the server.
<Input> It is used to create input controls. Its type attribute determines the control type.

Main values of type attribute is given below.

Text – To create a text box.
Password – To create a password text box.
Checkbox – To create a check box.
Radio – To create a radio button.
Reset – To create a Reset button.
Submit – To create a submit button.
Button-To create a button
To create a group of radio button, then the name attribute must be same.
<Textarea> is used to create a multiline text box.
<Label> It is used to give labels.
<Select> It is used to create list box or combo box. The items must be given by using <option> tag. Attribute
Name – Specifies the name of the object to identify
Size – If it is 1, the object is combo box otherwise it is a list box
Multiple – Allows to select multiple items

<Form> attributes

Action – Here we give the name of the program (including the path) stored in the Webserver.

Method – There are 2 types of methods get and post.

Get method	Post method
1. Faster	1. Slower
2. To send a small volume of data	2. To send a large volume of data
3. Less secure	3. More secure
4. Data visible during submission	4. Data not visible during submission

Target – Specifies the target window for displaying the result. Values are given below.
- blank – Opens in a new window
- self-Opens in the same frame
- parent – Opens in the parent frameset
- top – Opens in the main browser window
- name – Opens in the window with the specified name.
- <Fieldset> tag

This tag is helpful to divide a form into different subsections and form groups. <legend> tag used to give a caption for the <fieldset> section.