HTML FRAMES :
- A method to display more than one document at once , the term frame is used.
- Frame allow to split browser screen into multiple windows .
- <frameset> tag is used for making frame .
- Rows and cols attributes are used inside <frameset> tag .
<!DOCTYPE html>
<html>
<head>
<title>frameset attribute</title>
</head>
<frameset rows = "30%, 30%, 40%">
<frame name = "top" src = "img1.png" />
<frame name = "main" src = "img2.png" />
<frame name = "bottom" src = "img3.png" />
</frameset>
</html>
HTML FORM :
- HTML form allows user to full-fill data in form and submit it to server for output or result.
- Form is a group of controls and its form elements .
- HTML provides the selection controls and test base for creating a form in html .
FORM - ELEMENTS :
- Form elements are specified within form layout .
- Form elements are most efficient parts in every html form .
FORM ATTRIBUTES :
It specifies the form elements .
Most used form attributes : -
- Name : form name
- Method : Which method we want to use , GET method or POST method .
- Action : Script URL for receiving submitted data .
- Target : It targets the page where result data will be displayed .It takes the values like _blank , _cell , _parent .
- Enctype : Before sending data to server ,it tells that how data should be encoded .
CONTROLS IN FORM :-
- Text input controls
- File select boxes
- Check boxes
- Select boxes
- Hidden controls
- Radio buttons
- Submit and reset button
1. <input> CONTROL :
<input> is the most important form element .It is used to select user information. It can be type of text field , password , checkbox , radio button , submit button , etc.
Syntax :
<html>
<head>
<body>
<form>
First name :<input type="text" name="first_name"/>
Last name :<input type="text" name="last_name"/>
</form>
</body>
</head>
</html>
Output :
INPUT ATTRIBUTES :
Attribute | value | Use |
---|---|---|
Accept | Image, Audio, Video | shows the type of file |
align | Left, right, top, bottom, middle | shows alignment of input |
name | name | shows name of input element |
scr | URL | shows url of input |
type | text, button, password, radio, reset, submit, checkbox, file | shows type of input element |
value | text | shows value of input element |
size | number | shows width of input element |
readonly | read only | shows that input element should be only readonly |
alt | text | shows alternate text for image |
checked | checked | when page loads , input element should be preselected |
maxlength | number | shows maximum limit for characters allowed in input element |
disable | disable | input element should be disable |
- PASSWORD KEY :-
Password key shows input data in the form of dots for security and password key is like text input .
Attributes :- 1. Size2. Maxlength3. Name4. Value5.Align6. tabindex
example :-
<input type="password" size="25">
- RADIO BUTTON :-
Radio buttons are used when we want to choose only one option .Attributes :-
1.Type2. Name3. Value4. Check
EXAMPLE :-
<html><form><input type="radio" name="course" value="BCA">BCA<input type="radio" name="course" value="BSC">BSC<input type="radio" name="course" value="MCA">MCA<input type="radio" name="course" value="MBA">MBA</form></html>
Output :-
HTML IMAGE MAPPING :
- Image mapping means giving linking to an image in html document.
- Client side image mapping
- Server side image mapping
- In server side image mapping we uses ' ismap ' attribute .
- In client side image mapping we uses ' usemap ' attribute .
CLIENT SIDE IAMGE MAPPING :-
SYNTAX :
<body>
<img src="source_name" alt="alternate_name" usemap="#name_of_image">
<map name="test">
<area shape="clickable_area_shape" coords="value" href="discription of hotspot">
</map>
</body>
</html>
- The source of image and usemap attribute is defined inside image tag
- The hotspot (clickable area) is defines here .
- Selectable area should defines inside <area> tag .
- The value of usemap attribute and name attribute in map tag always should be same .
EXAMPLE :-
<html>
<body>
<img src="flower.jpg" alt="flower" usemap="#check">
<map name="check">
<area shape="rectangle" cords="20,70,145,146" href="flower.html">
</map>
</body>
</html>
Two ways to create client side image mapping :-
- Define pixels location
- create a map file within the html document that contains your image map .
HTML LINKS :
Linking in html is done by ' Anchor Tag '.
ANCHOR TAG :-
- The anchor tag in html is used give linking to image , text , tab , etc.
- It creates link to another document .
- By adding anchor tag ,when click on that linked element we jumps to another document .
- It uses href attribute .
- href attribute is used give source or url of the destination page .
<a href="destination url" >
</a>
EXAMPLE :-
<html>
<body>
<a href="list.html"><p>enter your shopping list .</p></a>
</body>
</html>
list.html
<html>
<body>
- oil
- fruits
- butter
- veggies
- milk
</html>
APPEARANCE OF HTML LINKS :
- active link - underline and red
- visited link - underline and purple
- unvisited link - underline and blue