Plus Two Computer Science Notes Chapter 5 Web Designing Using HTML

by

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

  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 =Afor 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 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:”info@spark.gov.in”> 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

  1. none- display no rules
  2. cols – display rules between columns only(vertical lines)
  3. rows – display rules between rows only(horizontal lines)
  4. groups- display rules between row group and column groups only
  5. 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.

<No frame>

  • 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

  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.
    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
  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 for the <fieldset> section.