Kerala Plus Two Computer Application Notes Chapter 5 Web Designing Using HTML
3 types of Lists in HTML.
1. Unordered List (<UL>) – Items are displayed with square, circle or disc in front.
2. 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 = A for A, B, C, …………
3. 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 types of URL
a) Relative URL – Here we explicitly give the web site address
Eg: <A href=http://www.hscap.kerala.gov.in>
b) Absolute URL – Here we implicitly give the website address. The path is not specified here.
Eg: Consider the web pages index.html and school.html saved in the folder C:\BVM.
The file indexs.html contains the following.
<A href=”school.html”>.
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=”schoo|.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 the page
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>
- <Table> 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 borderlines.
- Bordercolor – Color for borderlines.
- 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 the 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 overrides 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 a 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 – Specifiesthenumberofcolumnsspan for the cell.
- Rowspan – Specifies the number of rows span for the cell.
Frameset – It is used to divide the window into 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 the frame border.
- bordercolor – specifies the color of the 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 – To give a name for the frame.
- Target – specifies the target.
<Noframe> – 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 the type attribute are given below.
- Text – To create a text box.
- Password – To create a password text box.
- Checkbox – Tq^teate a check box.
- Radio – To create a radio button.
- Reset – To create a Reset button.
- Submit-To creates a submit button.
- Button – To create a button
To create a group of radio buttons, then the name attribute must be the same.
<Textarea> is used to create a multiline text box. <Label> It is used to give labels.
<Select> It is used to create a 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 a combo box otherwise it is a list box.
Multiple – Allows selecting multiple items
<Form> attributes
1) Action – Here we give the name of the program (including the path) stored in the Webserver.
2) Method – There are 2 types of methods get and post.
3) 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 forthe <fieldset> section.