Scribd
Upload
3 views

3 Web Desgining Using HTML-5

The document provides a comprehensive guide on web designing using HTML5, covering the basics of websites, webpages, web browsers, and the development process. It explains HTML5, its tags, and how to create structured HTML documents, including various formatting and list tags. Additionally, it includes practical examples and code snippets for creating webpages with different features and styles.

Uploaded by

mandharearyan123
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

3 Web Desgining Using HTML-5

The document provides a comprehensive guide on web designing using HTML5, covering the basics of websites, webpages, web browsers, and the development process. It explains HTML5, its tags, and how to create structured HTML documents, including various formatting and list tags. Additionally, it includes practical examples and code snippets for creating webpages with different features and styles.

Uploaded by

mandharearyan123
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

Impressive Web Designing Using HTML5

 Introduction to Website
- Website is group of Linked webpage’s which is used to Display/Store information about
particular Subject over internet.
- For ex. www.iplt20.com website over internet provide information about Indian Premier
League

 Webpage
- Webpage is used to store/display information in website.
- Webpage’s are linked to each other so it is called website.
- Each Website over internet has more than one webpage.

 Web Browser
- Web browser is application software used for to open or view websites or webpage on
computer or mobile.
- Internet Explorer, Google Chrome, Opera etc are web browser.

 Where this Websites are Developed?


- Websites are developed in Software Company.

 Who Developed the Websites?


- Software Developer(Web Developer) Develop the websites in Software Company
-
 Which Software languages used to develop the Websites in Software Company?
- Java, ASP.net, PHP, Python, HTML5, JavaScript Etc.

 What is website creation?


1. Create Webpage’s.
2. Store or Display various types of information over webpage’s.
3. Design the webpage for better look and feel.
4. Link all the webpage to each other.

HTML5
 Introduction to HTML5
- HTML stands for Hyper Text Markup Language.
- HTML programming language introduced by Tim Burners Lee.
- HTML very simple programming language used for Create and Develop Websites.

 Use of HTML
- Create WebPages.
- Display/Store various information on WebPages.
- Design / Decorate Webpage for Look and Feel. Creating Website
- Link WebPages to each other.

 Introduction to Tag
- To Write HTML programs to Create Website , We should know Instructions in HTML
- INSTRUCTIONS USED IN HTML TO WRITE PROGRAM CALLED AS “TAG”
- TAG is “heart” and “soul” of HTML programming language.
- Without TAGS you can’t do anything in HTML.
 Syntax of Tag

Syntax of Tag - <TAG_NAME>

For Example - <B>, <U>, <IMG>, <FONT> etc.

 Types of Tag

1. Paired Tag
2. Singular Tag

 Paired Tag
Welcome to <B> HTML </B> Students

Opening Tag Closing Tag

- Opening Tag : Opening tag start the effect of tag


- Closing Tag : Closing tag end the effect of tag

 Singular Tag
Hi Students <BR> Welcome to College

Singular Tag

- Singular Tags: only Opening tag is used, No need to use closing tag.

 Where to Write HTML Program in Computer


- Open Notepad
- Type the Program
 Where to and How to Save Program
- Open D/E/F drive
- Save Program with .html Extension for Ex. Pawar.html
 How to Run Program / How to View Your Created Webpage
- Open Web browser [ internet explorer , Google chrome etc]
- Type the address of your Webpage in Address bar (D:\pawar.html)
- Hit enter key

 Basic Structure of HTML5 Program


<!doctype html> Head Section
<html>
<head>
<title> ----------------- </title>
</head>
<body>
------------ Body Section
------------
------------
</body>
</html>

(Important: Basic structure of HTML program remain same for all HTML program )
 Basic Structure Tags
1. <HTML> Tag
- HTML program must start and end with <HTML> tag.
- <HTML> tags create/read webpage into web browser.

2. <HEAD> Tag
- <Head> tag creates head section of webpage.
- Head section display title of webpage.
- <Head> tag must close before <BODY> tag.

3. <TITLE> Tag
- <Title> tag used to gives title to webpage.
- <title> tag must used opened and closed in <HEAD> tag

4. <BODY> Tag
- <Body> tag creates body section of webpage.
- Body section display or store information of webpage .
- 80% of tag used in Body section of webpage.
1. Heading Tags
 Use
- Heading tags are used to display information in headings on webpage.
- <h1> to <h6> tags used to display headings on webpage.
- <h1> tag display largest level heading
- <h6> tag display smallest level heading.

 Attributes of Heading tag

1. Align
- Align attribute is used to change alignment of heading
- Value=left (d) / right / center

 How to use Heading Tags

<h1 align=center> Display Headings </h1> largest heading level


<h6 align=right> Display Headings </h6> smallest heading level

 Write HTML program to create webpage which display your full name in 6
Heading levels at different alignment

<!doctype html>
<html>
<head>
<title> My Name in Heading </title>
</head>
<body>
<h1 align=center> MS DHONI </h1>
<h2 align=right> MS DHONI </h2>
<h3 align=center> MS DHONI </h3>
<h4 align=right> MS DHONI </h4>
<h5 align=center> MS DHONI </h5>
<h6 align=right> MS DHONI </h6>
</body>
</html>
 Superscript Text

o <Sup> Tag

 Use
- <Sup> tag is used to display superscript text.
- Superscript text means small letters above the line of text.
- <Sup> tag is used to display mathematical equations on webpage
- For ex. A2, 1st , 10th , A2+B2

 How to use <Sup>

Code : A<sup>2</sup>+B<sup>2</sup>
Output : A2+ B2

 Write HTML program to create webpage which display following maths


equation on WebPages A2+2AB+B2

<!doctype html>
<html>
<head>
<title> Superscript text </title>
</head>
<body>

<h1> Superscript text </h1>

A<sup>2</sup>+2AB+B<sup>2</sup>

</body>
</html>

 Output Webpage

 Subscript Text
o <Sub> Tag

 Use

- <Sub> tag is used to display subscript text.


- Subscript text means small letters below the line of text base.
- <Sub> tag is used to display chemical reactions.
- For ex. H2SO4
 How to use <Sup>

Code : H<sub>2</sub>SO<sub>4</sub>
Output : H2SO4

 Write HTML program to create webpage which display following chemical


reaction on WebPages Cu + So4 ------ CuSo4

<!doctype html>
<html>
<head>
<title> Subscript text </title>
</head>
<body>

<h1> Subscript text </h1>

Cu+So<sub>4</sub>-----------Cuso<sub>4</sub>

</body>
</html>

 Output webpage
2. Text Formatting Tags

o <B> Tag

 Use
- <B> tag is used to make text bold on webpage

 How to use <B> tag

Code : Today is <B> Saturday </B>. Today is Holiday.


Output : Today is Saturday. Today is Holiday.

o <U> Tag

 Use
- <U> tag is used to underline the text on webpage

 How to use <U> tag

Code : Today is <U> Saturday </U>. Today is Holiday.


Output : Today is Saturday. Today is Holiday.

o <I> Tag

 Use
- <I> tag is used to display text in italic on webpage

 How to use <I> tag

Code : Today is <I> Saturday </I>. Today is Holiday.


Output : Today is Saturday. Today is Holiday.

o <Small> Tag

 Use
- <Small> tag is used to Display text in small size on webpage

 How to use <Small> tag

Code : Today is <small> Saturday </small>. Today is Holiday.


Output : Today is Saturday. Today is Holiday

o <Big> Tag

 Use
- <Big> tag is used to Display text in big size on webpage

 How to use <Big> tag

Code : Today is <big> Saturday </big>. Today is Holiday.


Output : Today is Saturday. Today is Holiday.

o <Mark> Tag

 Use
- <Mark> tag is used to Highlight the text on webpage

 How to use <Mark> tag

Code : Today is <Mark> Saturday </Mark>. Today is Holiday.


Output : Today is Saturday. Today is Holiday.
o Write html program to create webpage which display your personal information on
webpage (Use text formatting tags wherever required)

<!doctype html>
<html>
<head>
<title> My Personal Information </title>
</head>
<body>
My self <b> Rohan Vivek Nikam </b> <br>
I am from <U> satara </U> <br>
<big> Satara </big> is District in <i> Maharashtra </i> <br>
I work at <mark> Infosys company </mark> <br>
</body>
</html>

o Output Webpage
 <Font> tag

 Use
- <Font> tag is used to Change color , size and face of text
- <Font> tag is paired tag.

 Attributes of <Font> tag


1. Color - Color attribute is used to change the color of text
2. Size - Size attribute is used to change the font size of text [Font size : 1-7]
3. Face - Face attribute is used to change font type of text

 How to use <Font> tag

Code : <Font color=red size=5 face=”centaur”> Information Technology </Font>


Output: Information Technology

 Write html program to create webpage which display Your Village information on
webpage. Use <font> tag wherever required.
<!doctype html>
<html>
<head>
<title> My Personal Information </title>
</head>
<body>
My self <font color=red size=5> Rohan Vivek Nikam </font> <br>
I am from satara <br>
Satara is District in <font face=”Chiller” size=7 color=green> Maharashtra </font> <br>
I work at Infosys company <br>
</body>
</html>

 Webpage output
 <HR> Tag

 Use
- <HR> tag is used to Display Horizontal Ruler[Line] on webpage
- <HR> tag is Singular tag.
-
 Attributes of <HR > tag

1. Color - Color attribute is used to change the color of Line


2. Size - Size attribute is used to change the thickness of Line
3. Width - Width attribute is used to change width of Line [ Length]

 How to use <HR> tag

Code : <hr color=orange size=20 width=300>

 Write html program to create webpage which display your personal information
in 2-3 statement on webpage & draw lines between every statement

<!doctype html>
<html>
<head>
<title> Horizontal Ruler </title>
</head>
<body bgcolor=black text=red>
<h1> Use of Horizontal Ruler </h1>
My Self Soham Wable
<hr color=orange size=5 width=2000>
I am From Pune
<hr color=white size=5 width=2000>
Pune is Educational & IT Hub
<hr color=green size=5 width=2000>
</body>
</html>

 Webpage Output
 <PRE> tag

 Use

- <Pre> tag is used to display pre-formatted text on webpage


- Pre-Formatted Text means text with character spacing and line spacing
- <Pre> tag display information as it is from program
- <Pre> tag is paired tag.

 Sample program of <pre> tag

<!doctype html>
<html>
<head>
<title> Pre formatted text </title>
</head>
<body>
<h1> Pre formatted text </h1>

<pre>
*
* *
* * *
* * * *
</pre>

</body>
</html>

 Webpage Output
 Ordered List in HTML5

- Ordered list means list in which list items (options) display along with
specific order/sequence.
- Order of list item may be numeric, alphabetical or roman number
- For example

1. Sachin A. India I. Bhosale


2. Sehwag B. Pakistan II. Dhamal
3. Ganguly C. England III. Gadhave
4. Yuvraj D. Srilanka IV. Khandagale

 <OL> tag
- <OL> tag is used to define/create ordered list on webpage
- <OL> tag is paired tag
- All list items in Ordered list added inside <OL> tag

 Attributes of <OL> tag

1. Type
- Type attribute is used to change type of order
- Value=1(D)/A/I/a/I
- <OL type=A> will display list items in alphabetical order

2. Start
- Start attribute is used to change starting of first list item
- <OL type=A start=3> will display first list with C & so on

3. Reversed
- Reversed attribute will display order in reverse
- <OL type=A reversed>

 <LI> tag
- <LI> tag is used to add list items in ordered list
- <LI> tag is singular tag

 Write html program to create webpage which display following list on


webpage

1. India
2. Pakistan
3. England
4. Sri Lanka
<!doctype html>
<html>
<head>
<title> List of Country </title>
</head>
<body>
<h1> List of country </h1>
<OL>
<LI>India
<LI>Pakistan
<LI>England
<LI>Sri Lanka
</OL>
</body>
</html>

 Write html program to create webpage which display following order list
on webpage

V. Mango
IV. Orange
III. Apple
II. Pine Apple

<!doctype html>
<html>
<head>
<title> List of Fruits </title>
</head>
<body>
<h1> List of Fruits </h1>
<OL type=I start=5 reversed>
<LI>Mango
<LI>Orange
<LI>Apple
<LI>Pine Apple
</OL>
</body>
</html>
 Write html program to create webpage which display following ordered list
on webpage

K. Bhosale
J. Dhamal
I. Gadhave
H. Khandagale

<!doctype html>
<html>
<head>
<title> List of Students </title>
</head>
<body>
<h1> List of Fruits </h1>
<OL type=A start=11 reversed>
<LI>Bhosale
<LI>Dhamal
<LI>Gadhave
<LI>Khandagale
</OL>
</body>
</html>
 Unordered List in HTML5

- Unordered list means list in which list items (options) display along
with specific bullets/symbol.
- Bullets of list item may be disc, square or circle
- For example

 Sachin . India Bhosale


 Sehwag Pakistan Dhamal
 Ganguly England Gadhave
 Yuvraj Srilanka Khandagale

- <UL> tag & <LI> tag used to create & display ordered list

 <UL> tag
- <UL> tag is used to define/create Unordered list on webpage
- <UL> tag is paired tag
- All list items in Unordered list added inside <UL> tag

 Attributes of <UL> tag

1. Type
- Type attribute is used to change type of bullet/symbol
- Value=Disc(D)/Circle/Square
- <UL type=circle> will display list items along with circle symbol

 <LI> tag
- <LI> tag is used to add list items in unordered list
- <LI> tag is singular tag

 Write html program to create webpage which display following list on


webpage

 India
 Pakistan
 England
 Sri Lanka

<!doctype html>
<html>
<head>
<title> List of Country </title>
</head>
<body>
<h1> List of country </h1>
<UL>
<LI>India
<LI>Pakistan
<LI>England
<LI>Sri Lanka
</UL>
</body>
</html>

 Write html program to create webpage which display following unorder list
on webpage

 Tata Punch
 Toyota Fortuner
 Mahindra Thar
 Jeep

<!doctype html>
<html>
<head>
<title> List of cars </title>
</head>
<body>
<h1> List of Cars </h1>
<UL type=square>
<LI>Tata Punch
<LI>Toyota Fortuner
<LI>Mahindra Thar
<LI>Jeep
</UL>
</body>
</html>
 Write html program to create webpage which display following unordered
list on webpage

o Splendor
o Pulsar
o Bullet
o RX 100

<!doctype html>
<html>
<head>
<title> List of Bikes </title>
</head>
<body>
<h1> List of Bikes </h1>
<UL type=Circle>
<LI>Splendor
<LI>Pulsar
<LI>Bullet
<LI>RX 100
</UL>
</body>
</html>
 Definition List

- Definition list means list of definitions.

 Parts of Definition

1. Definition Term
2. Definition Description

IT Definition term
IT means Information Technology Definition Description

 Tag to Create definition List

1. <DL> tag
2. <DT> tag
3. <DD> tag

1. <DL> tag

- <DL> Tag is used to define or create definition list


- <DL> is paired tag.
- <DT> & <DD> tag must used inside <DL> tag to add Definitions

2. <DT> tag

- <DT> tag is used to add definition terms in definition


- <DT> tag is also Paired tag.

3. <DD> tag

- <DD> tag is used to add definition description in definition


- <DD> tag is also paired tag.

 Use of Tags

<DL>
<DT> Cyber Law </DT>
<DD> Cyber Law means Rules & Regulation for Internet </DD>
<DT> Moral </DT>
<DD> Moral Referred as what is right & what is wrong </DD>
</DL>

 Write Html program to create webpage that display following


definition list on webpage
<!doctype html>
<html>
<head>
<title> Definition List </title>
</head>
<body>
<h1> Definition List in HTML5 </h1>

<DL>
<DT> IT </DT>
<DD> IT means Information Technology </DD>
<DT> BIO </DT>
<DD> BIO means Biology </DD>
<DT> CHEM </DT>
<DD> CHEM means Chemistry </DD>
</DL>

</body>
</html>
 <IMG> tag

 Use
- <IMG> tag is used to display image on webpage
- <IMG> tag is singular tag.

 Attributes of <IMG> tag

1. Src
- SRC is compulsory attribute of <IMG> tag
- SRC attribute is used to provide the path(address) of image to <IMG> tag
- For Example : <IMG src=”D:\Wallpaper\sunset.jpeg”>

2. Align
- Align attribute is used to change alignment of image on webpage
- Value : Left / Right
- Default alignment of Image is Left
- For Ex. <IMG src=”D:\sun.jpeg” align=right>

3. Height
- Height attribute is used to change the height of image
- Value are used in percentage or pixels
- For Ex <IMG src=”D:\sun.jpeg” height=500>

4. Width
- Width attribute is used to change the width of image
- Value are used in percentage or pixels
- For Ex <IMG src=”D:\sun.jpeg” width=300>

5. Hspace
- Hspace attribute is used to give blank space on right and left side of image
- Value of Hspace is defined in Pixcel
- For Ex <IMG src=”D:\sun.jpeg” hspace=100>

6. Vspace
- Vspace attribute is used to give blank space on top and bottom side of image
- Value of Vspace is defined in Pixcel
- For Ex <IMG src=”D:\sun.jpeg” vspace=100>

7. Alt
- Alt attribute is used to display alternate text if image not seen for some reason
- For Ex <IMG src=”D:\sun.jpeg” alt=”Error in Image”>

 Program to how to take image on webpage

<!doctype html>
<html>
<head>
<title> Image </title>
</head>
<body>
<h1> Display Image on Webpage </h1>

<img src=”D:\sunset.jpeg” height=400 width=400 alt=”Error”>


</body>
</html>
 Creation of Table on Webpage
- Table is defined as intersection of rows and columns used to display information
in tabular format
- Information displayed using table is easy to understand
- So most of website uses table to display specific data on webpage
- For ex. numeric data, schedules etc.

 Tag to create Tables & Fill up Data


1. <Table> tag
2. <TR> tag
3. <TH> tag
4. <TD> tag
5. <Caption>tag

Roll No Name Total % Marks Table header Data


101 Rohan 534 78%
Table Data
102 Mohan 411 65%
103 Sohan 355 52%
Student Data Table Caption

 <Table> tag

 Use
- <table> tag is used to create table on webpage
- <table> tag is paired tag
- <table> tag is container tag for <TR> ,<TH>,<TD> tag

 Attributes of <Table> tag

1. Border
- Border attribute is used to define border to table
- For Ex. <Table border=5>
2. Bgcolor
- Bgcolor attribute is used to give background color to table
- For Ex. <Table Bgcolor=orange>
3. Height
- Height attribute is used to change the height of table
- For Ex. <Table height=200>
4. Width
- Width attribute is used to change the width of table.
- For Ex. <Table width=400>
5. Align
- Align attribute is used to change the alignment of table
- For Ex. <Table align=left/right/center>
- Left is default alignment of table on webpage
6. Cellspacing
- Cellspacing attribute is used to left blank space between the table cells
- For Ex. <Table border=4 cellspacing=7>
7. Cellpadding
- Cellpadding attribute is used to left blank space between cell data & cell border
- For Ex. <Table border=4 Cellpadding=5>
 <TR> tag

 Use
- <TR> tag is used to create table row
- <TR> tag is paired tag
- <TR> tag is container tag for <TH> & <TD> tag

 <TH> tag

 Use
- <TH> tag is used to fill up Table Header Data.
- <TH> tag is Paired tag.
- Basically <TH> tag is used to fill up data of First Row in table
- For Ex. <TH> Roll NO </TH>, <TH> Name </TH> etc.

 <TD> tag

 Use
- <TD> tag is used to fill up Table Data
- <TD> tag is paired tag
- For Ex. <TD> 101 </TD> , <TD> Sohan </TD>

 <Caption> tag

 Use
- <caption> tag is used to define caption or title to table
- <caption> tag used immediately after <table> tag in program

 Colspan & Rowspan Attribute

- Colspan & Rowspan attribute is attribute of <TH> & <TD> tag

1. Colspan
- Colspan attribute is used to span multiple column cell to display data
- For ex. <TD Colspan=2> ABC </TD>
2. Rowspan
- Rowspan attribute is used to span multiple row cells to display data
- For Ex. <TD Rowspan=2> PQR </TD>

ABC LMN XYZ

DEF HIJ KLM


PQR
NOP QRS TRE

 ALL TYPES OF PROGRAM ON TABLE


 Write HTML program to create webpage which display following information on webpage

<!doctype html>
<html>
<head>
<title> Table </title>
</head>
<body>
<h1 > Student Result </h1>
<table border=4>
<tr>
<th> Roll No </th>
<th> Name </th>
<th> Total Marks </th>
<th> Percentage </th>
<th> Grade </th>
</tr>
<tr>
<td> 101 </td>
<td> Sohan </td>
<td> 446 </td>
<td> 75% </td>
<td> A </td>
</tr>
<tr>
<td> 102 </td>
<td> Rohan </td>
<td> 546 </td>
<td> 84% </td>
<td> A+ </td>
</tr>
<tr>
<td> 103 </td>
<td> Rohani </td>
<td> 385 </td>
<td> 65% </td>
<td> B+ </td>
</tr>
</table>
</body>
</html>
 Write HTML program to create webpage which display information on webpage

<html>
<head>
<title> Table </title>
</head>
<body>
<h1 > Cricket Stat's </h1>
<table border=4 cellspacing=5 >
<tr>
<th> Series </th>
<th> Won </th>
<th> Lose </th>
<th> Percentage </th>
<th> Series Result </th>
</tr>
<tr>
<td> Ind V/S Aus </td>
<td> 4 </td>
<td> 1 </td>
<td> 90% </td>
<td> Champions </td>
</tr>
<tr>
<td> Ind V/S Pak </td>
<td> 7 </td>
<td> 7 </td>
<td> 100% </td>
<td> Champions </td>
</tr>
<tr>
<td> Ind V/S Eng </td>
<td> 2 </td>
<td> 3 </td>
<td> 40% </td>
<td> Runner Up </td>
</tr>
</table>
</body>
</html>
 Programs on spanning tables

 Write HTML program to create webpage & display following information on webpage

<!doctype html>
<html>
<head>
<title> Table </title>
</head>
<body>
<table border=4 cellspacing=10 cellpadding=10>
<tr>
<td colspan=2> DIV A </td>
<td> DIV B </td>
<td> DIV C </td>
</tr>
<tr>
<td rowspan=2> DIV D </td>
<td> DIV E </td>
<td> DIV F </td>
<td> DIV G </td>
</tr>
<tr>
<td> DIV E </td>
<td> DIV F </td>
<td> DIV G </td>
</tr>

</table>
</body>
</html>

 Write HTML program to create webpage & display following information on webpage
<!doctype html>
<html>
<head>
<title> Table </title>
</head>
<body>
<table border=4 cellspacing=10 cellpadding=10>
<tr>
<td rowspan=3> Chemistry </td>
<td> Physics </td>
<td> Biology </td>
</tr>
<tr>
<td> IT </td>
<td> Math’s </td>
</tr>
<tr>
<td colspan=2> English </td>
</tr>
</table>
</body>
</html>
 FORM In HTML5

- Form is used to collect data from user on WebPages.


- Form helps us to collect various types of data from user.
- Form is consist of various input fields
- Input Fields used to collect data from user into form

 Study of Input Fields

1. Text Box
- Textbox Input Field is used to collect single line data from user in form
- For ex. Name , Mobile No , Adhar No etc.
- tushar

2. Password Box
- Password box Input Field is used to collect password data in form from user
- For Ex. Password , Pin , OTP etc
- ***********

3. Radio Button
- Radio Button input field allows user to choose only one option from multiple options
- For Ex. Male or Female , Yes or No , Right or Wrong etc
- Male . Female

4. Checkbox
- Checkbox input field allows user to choose multiple options from given options
- For Ex. Choose subjects, Choose language to know etc.
- Physics Chemistry Biology Math’s IT Marathi CS English Crop Sci

5. Drop Down List


-Dropdown list allows user to choose single or multiple option from list
-Dropdown list store huge list in small space
-For ex. list of state in india , list of caste in india , list of district in india etc

6. Textarea
-Textarea input fields allows to accept unlimited text from user in form
-Textarea means multi-line textbox
-For Ex. descriptive information
-

7. Submit Button
-Submit Button input fields is used to submit form data submit

8. Reset button
-Reset button is used to reset or clear the form data Reset
 FORM CREATION & TAGS

 <FORM> tag

- <FORM> tag is used to create form on webpage.


- <FORM> is paired tag.
- <FORM> tag is container tag for all input fields.
- All input fields are created inside <form> </form> tag

 Attributes of <FORM> tag

1. Name
- Name attribute is used to define / give name to form.
- For Ex. <Form name=rvk>

2. Method
- Method attribute is used to set method to submit form data
- Values=Get /Post For Ex. <Form method=post>
- Get is default method to submit form data
- Let’s see difference between Get & Post method

Method = Get Method=Post


-Get is default method to submit form data ----------------------------------------
-Data Submitted is visible to others -Data is submitted hidden
-Small amount of data submitted (2048 char) -Unlimited Data is submitted

 Use of <form> tag


<!doctype html>
<html>
<head>
<title> use of form tag </title>
</head>
<body>

<Form name=xyz method=post>

All Input fields created here to accept data from user

</Form>

</body>
</html>

 Input Field Creation in FORM

- Input fields are fundamental part of form.


- Input fields are used to collect data in form.
- For ex. Refer Study of Input field topic
 <Input> tag

- <Input> tag is used to create input field.


- 95% types of input field created using <INPUT> tag.
- Type is essential attribute of <input> tag that define which type of input field to
create
- For Ex. <Input type=text> will create textbox input field in form

 Attributes of <Input> tag

Attribute Use Value


Type Define type of input field you want to Text, password, radio,
create checkbox, submit , reset
Name Define name to input field Define by user
Size Define size of input field Number
Readonly Make input field non-editable -
Checked Check the radio button & checkbox default -
Maxlength Set maximum character limit for textbox Number
Value Set default value for input field Define by user

1. Textbox

 How to create Textbox

<Input type=text>
<Input type=text name=t1 size=20 value=”Abc” maxlength=8>

2. Password Box

 How to create password box

<Input type=Password>
<Input type=Password name=t2 size=25 maxlength=6>

3. Radio Button

 How to Create Radio Button

<Input type=Radio name=r1 value=”m” checked>Male


<Input type=Radio name=r1 value=”f”>Female

- Name of radio buttons in same group must be same

4. Checkbox

 How to create Checkbox

<Input type=Checkbox name=c1 value=”p” checked>Physics


<Input type=Checkbox name=c2 value=”c” checked>Chemistry
<Input type=Checkbox name=c3 value=”b”>Biology
<Input type=Checkbox name=c4 value=”m”>Math’s
<Input type=Checkbox name=c5 value=”i”>IT
<Input type=Checkbox name=c6 value=”cp”>Crop Production
5. Submit button

 How to create submit button

<Input type=submit value=”Submit”>

6. Reset Button

 How to create Reset Button

<Input type=reset value=”clear”>

7. Textarea

 <Textarea> tag

- <textarea> tag is used to create multiline textbox [TextArea]


- <textarea> tag is paired tag

 Attributes of <Textarea> tag

1. Cols
- Cols attribute define number of column in textarea
- For Ex. <Textarea Cols=4> </textarea>

2. Rows
- Rows attribute define number of line in textarea
- For Ex. <Textarea cols=5 rows=10> </textarea>

 How to create textarea

<Textarea cols=5 rows=10> </textarea>

8. DROPDOWN List

 Tag to Create Drowdown List

1. <Select> tag
2. <Option> tag

1. <SELECT> tag

 Use
- <select> tag is used to create/define dropdown list
- <select> tag is paired tag.
- All List option added in <select> tag using <Option>t ag

 Attributes of <select >tag

1. Name
- Name attribute is used to define name
- For Ex. <Select name=city>
2. Multiple
- Multiple attribute allows us to choose multiple option from dropdown list
- For Ex. <Select name=city multiple>

3. Size
- Size attribute is used to define size of visible option in list
- For Ex. <Select name=city size=2 multiple>

2. <OPTION > tag

 Use
- <Option> tag is used to add options in Dropdown list
- <Option> tag is singular tag
- <option> tag is used inside <Select> tag to add options

 Attributes of <Option> tag

1. Value
- Value attribute define default value for option
- For ex. <Option value=”s”>Satara
<Option value=”p”>Pune

2. Selected
- Selected attribute allows to option selected default in list
- For ex. <Option value=”s” selected>satara
<Option value=”p>Pune

 How to create Dropdown list

<Select name=city size=2 multiple>


<option value=”p”>Pune
<option value=”s” selected>Satara
<option value=”k”>Kolhapur
<option value=”sa”>Sangali
</Select>
 Hyperlink in HTML

 Use
- Hyperlink is used to link WebPages to each other
- We can go quickly from one webpage to another webpage using Hyperlinks
- If we want to link 4 WebPages to each other , every webpage need 3 hyperlinks

 Types of Hyperlink

1. Text Hyperlink
- Text is used as hyperlink to link WebPages
- For ex. <a href=”abc.html”> File ABC </a>

2. Image Hyperlink
- Image is used as hyperlink to link WebPages
- For Ex. <a href=”abc.html”> <img src=”sunset.jpeg”> </a>

 Creation of Hyperlink

 <A> tag
- <A> tag is used to create hyperlink on webpage
- <A> tag is paired tag

 Attributes of <A> tag

1. Href

- Href attribute is used to provide path of file that we want to link to hyperlink
- For ex. <a href=”abc.html”> File ABC </a>
- When you click on File ABC text in webpage , it will open abc.html file in browser

 Sample code to create text hyperlink

<a href=”abc.html”> File ABC </a>

 Sample code to create Image Hyperlink

<a href=”pqr.html”> <img src=”d:\tiger.jpeg”> </a>

 Creation of website of 2 webpage using Hyperlink

 Code for abc.html

<html>
<head>
<title> File ABC </title>
</head>
<body>
<h1> THIS IS ABC FILE </h1>
<a href=”pqr.html”> FILE PQR </a>
</body>
</html> Hyperlink to pqr.html webpage
 Code for pqr.html

<html>
<head>
<title> File PQR </title>
</head>
<body>
<h1> THIS IS PQR FILE </h1>
<a href=”abc.html”> FILE ABC </a>
</body>
</html> Hyperlink to abc.html webpage

You might also like