UNIT-1

INTRODUCTION TO WWW
&
HTML
 SYLLABUS
 UNIT I INTRODUCTION TO WWW & HTML (9Hrs)
Protocols, secure connections, application
and development tools, the web browser, What is server, dynamic IP, Web Design: Web
site design principles, planning the site and navigation. HTML: The development
process, Html tags and simple HTML forms
WWW Protocols / Network Protocols
 There are various types of protocols that support a major and compassionate role in
communicating with different devices across the network. These are:
1. File Transfer Protocol (FTP)
2. Hyper Text Transfer Protocol (HTTP)
3. Simple Network Management Protocol (SNMP)
4. Simple mail transport Protocol (SMTP)
5. Post office Protocol version 3 (POP3)
6. Transmission Control Protocol (TCP)
7. User Datagram Protocol (UDP)
8. Internet Protocol (IP)
(1) File Transfer Protocol (FTP)
 The file transfer protocol sets the rules for transferring files between computers.
 When user wants to download a file from the server FTP is used.
 FTP uses two connections between client and server. One connection is used for
actual data transfer and other is used for control information(used for commands).
This separation of data and commands make the FTP more efficient
Fig. Two connections used in FTP processing
 When client makes a request for particular file download then using the data
transfer connection actual data gets transmitted from server to the client.
 At the same time server keeps track of how much data is sent so far and how
much is remaining. This tracking can be done using the control transfer
connection.
 Hence during the file downloading/uploading we can see a message about how
many bytes are getting transferred and how much time is remaining.
(2) HTTP
 The Hyper Text Transfer Protocol (HTTP) is a request/response protocol.
 It is a communication protocol used to transfer the information on local area
network and World Wide Web (WWW).
 It is the network protocol used to deliver virtually all files and other data
(collectively called resources) on the World Wide Web, whether they're HTML
files, image files, query results, or anything else. Usually, HTTP takes place
through TCP/IP sockets.
 It is also called as a stateless protocol because this protocol is not able to
maintain the previous conversation/information.
(3) SNMP

 Simple Network Management Protocol (SNMP) is a protocol which enables

network administrators to manage network devices and to diagnose network
problems.
 The network management system is based on two main elements: a supervisor
and agents.
 The supervisor is the terminal at which the network administrator requests for
network management.
 The agents are found at the level of each interface connecting the managed
devices to the network. With the help of these agent’s information on the
different objects(such as switch, hub, routers) can be collected.
(4) SMTP
 Simple Mail Transfer Protocol (SMTP) is a simple protocol which is
extensively used for transfer of e-mails to remote servers.
 It is an asynchronous protocol, because it allows delayed delivery of message.
 With the help of mail transfer agent and user agent the SMTP sends and
receives the emails.

(5) POP3
 Post Office Protocol version 3(POP3) is used by local email clients (such as
Microsoft Outlook Express -> email software).
 The POP3 protocol works only at the receiver’s end and has no work at the
sender’s end.
 The POP protocol has two parts, a client POP i.e. receiver’s POP and a server
POP i.e. receiver’s email server. The client i.e. the receiver opens TCP connection
with receiver’s POP server. This client must be authenticated first by using the
username and password. Then the client can receive the emails from the
mailbox.
(6) TCP
 The Transmission Control Protocol is used for,
1. Safe delivery of data
2. Error detection
3. Assurance of the correct sequencing of data being received.
 This protocol is called connection oriented protocol because before sending the data
this protocol requires that two computers have established connections.
 The TCP allows the transmission of arbitrary amount of data by breaking it into
stream of separate IP packets.
 These IP packets are numbered so that it could be reassembled properly at arrivals.
Along with the data an acknowledgement is also sent/received in order to know
whether the reliable connection protocol has occurred or not.
(7) UDP
 The user datagram protocol is a connectionless protocol without any error
detection facility.
 This protocol is used for simply transmission of data.
 The UDP is known as an unreliable protocol however this is much faster than
TCP.

(8) IP
 Internet Protocol (IP) is a network layer protocol which consists of addressing
information.
 Using this information, the communication between uniquely addressed
computers is possible.
 Secure Connections
 A secure connection is a connection that is encrypted by one or more security protocols to ensure
the security of data flowing between two or more nodes. When a connection is not encrypted, it can
be easily listened to by anyone with the knowledge on how to do it, or even prone to threats by
malicious software and rogue and unexpected events.
 Anyone who wants to get information from a non-secured connection can do so since they can
easily go through, in and out of the computer’s network taking with them important data such as
login, passwords and other private information.
Secure connections, as they supposed to protect the data being transferred from one computer to
another, must be able to do three main things.
1. Prevent third parties from getting hold of confidential data
2. It must first validate the identification of the person who wishes to access and exchange the data
3. It must protect information from being viewed or altered by unknown parties
Application and Development Tools
 The 7 Essential Tools for Frontend Web Development
1. Sublime Text
2. Chrome Developer Tools
3. jQuery
4. GitHub
5. CodePen
6. Angular.js
7. Sass
Web browser
Web browser
 A browser is a software program that is used to explore, retrieve, and display the
information available on the World Wide Web.
 This information may be in the form of pictures, web pages, videos, and other
files that all are connected via hyperlinks and categorized with the help of URLs
(Uniform Resource Locators).
Working of web browser
 A browser is a client program as it runs on a user computer or mobile device and
contacts the webserver for the information requested by the user.
 The web server sends the data back to the browser that displays the results on
internet supported devices.
 On behalf of the users, the browser sends requests to web servers all over the
internet by using HTTP (Hypertext Transfer Protocol). A browser requires a
smartphone, computer, or tablet and internet to work.
Browser Architecture
Component of a Web browser
 User Interface: The user interface is an area where the user can use several
options like address bar, back and forward button, menu, bookmarking, and many
other options to interact with the browser.

 Browser Engine: It connects the UI (User Interface) and the rendering engine as
a bridge. It queries and manipulates the rendering engine based on inputs from
several user interfaces.

 Rendering Engine: It is responsible for displaying the requested content on the

browser screen. It translates the HTML, XML files, and images, which are
formatted by using the CSS. It generates the layout of the content and displays it
on the browser screen.
 Networking: It retrieves the URLs by using internet protocols like HTTP or FTP.
It is responsible for maintaining all aspects of Internet communication and
security. Furthermore, it may be used to cache a retrieved document to reduce
network traffic.

 JavaScript Interpreter: As the name suggests, JavaScript Interpreter translates

and executes the JavaScript code, which is included in a website. The translated
results are sent to the rendering engine to display results on the device screen.

 UI Backend: It is used to draw basic combo boxes and Windows (widgets). It

specifies a generic interface, which is not platform-specific.

 Data Storage: The data storage is a persistence layer that is used by the browser
to store all sorts of information locally, like cookies. A browser also supports
different storage mechanisms such as IndexedDB, WebSQL, localStorage, and
FileSystem.
What is server:-
A web server is a computer that runs websites. It's a computer program
that distributes web pages as they are requisitioned. The basic objective of the web
server is to store, process and deliver web pages to the users. The Web Server is
requested to present the content website to the user's browser.
Web Server Types
 Apache HTTP Server.
 Microsoft The Internet Information Server (IIS)
 Sun Java System Web Server.
 Jigsaw Server.

Web Server examples:

 NGINX.
 Apache Tomcat.
 Lighthttpd.
what is dynamic ip:
A dynamic IP address is an IP address that an ISP lets you use
temporarily. If a dynamic address is not in use, it can be automatically assigned to a
different device.
(ISP->Internet Service Provider)

Example of a dynamic IP address?

 So, for example, a hotel probably has a static IP address, but each individual
device within its rooms would have a dynamic IP address. On the internet, your
home or office may be assigned a dynamic IP address by your ISP's DHCP
server.
WEB DESIGN

 Web design refers to the design of websites that are displayed on the
internet. It usually refers to the user experience aspects of website
development rather than software development. A web designer works on
the appearance, layout, and, in some cases, content of a website.
WEB SITE DESIGN PRINCIPLES
9 Principles of Good Web Design:-
 WEBSITE PURPOSE. Your website needs to accommodate the needs of the
user. Having a simple clear intention on all pages will help the user interact with
what you have to offer.
 SIMPLICITY. Simplicity is the best way to go when considering the user
experience and the usability of your website.
 NAVIGATION. Navigation is the way finding system used on websites where
visitors interact and find what they are looking for.
 F-SHAPED PATTERN READING. The F- based pattern is the most common
way visitors scan the text on a website.
 VISUAL HIERARCHY. Visual hierarchy is the arrangement of elements in
order of importance. This is done either by size, color, imagery, contrast,
typography, whitespace, texture and style.
 CONTENT. An effective website has both great design and great content.
 GRID BASED LAYOUT. Grids help to structure your design and keep your
content organised.
 LOAD TIME. Waiting for a website to load will lose visitors. Nearly half of web
visitors expect a site to load in 2 seconds or less and they will potentially leave a
site that isn’t loaded within 3 seconds. Optimising image sizes will help load
your site faster.
 MOBILE FRIENDLY. More people are using their phones or other devices to
browse the web.
Website Planning
Website planning is the first phase of the overall website development process. It's
a strategic activity aiming to define and document what kind of and how exactly a
website your business wants to build, and why or what the goals are.
How to plan a website in 7 steps
 Identify your website goals.
 Identify your target audience.
 Define your unique selling proposition.
 Secure a domain name (and hosting).
 Pick a website builder.
 Create and collect design elements.
 Create content for your core website pages
Website Navigation
Website navigation is the act of clicking and looking through resources on the
internet, such as the various pages that make up a website. Users navigate websites
using a web browser and clicking on links that transport them to other pages when
clicked.
Importance of Website Navigation:-
 Navigation is necessary in ensuring that your website is accessible and usable.
 Good navigation will allow visitors to search your site for longer, giving them
confidence in where they are and what they can receive from your website.
 Navigation allows visitors to search with ease.
 Basics Of HTML
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages and web applications.
 HTML is widely used language on the web.
 HTML is a Markup language rather than a programming language.
 HTML describes the structure of a Web page, specifying how text or graphs are displayed
on the web pages. It enables you to present text in a readable format.
 HTML consists of a series of elements.
 HTML elements tell the browser how to display the content.
 The markup language specifies the code for defining, processing and presenting the text on
web pages. These codes are called tags.
 Hyper Text: HyperText simply means "Text within Text."
A text has a link within it, is a hypertext.
Whenever you click on a link which brings you to a new webpage, you have clicked on a
hypertext.
HyperText is a way to link two or more web pages (HTML documents) with each other.

 Markup language:
A markup language is a computer language that is used to apply layout and formatting
conventions to a text document.
Markup language makes text more interactive and dynamic. It can turn text into images,
tables, links, etc.
Features of HTML

1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.
3) It is a markup language, so it provides a flexible way to design web pages along with the
text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing for the user.
5) It is platform-independent because it can be displayed on any platform like Windows,
Linux, and Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.
Building blocks of HTML
An HTML document consist of its basic building blocks which are:
 Tags: An HTML tag surrounds the content and apply meaning to it. It is written between <
and > brackets.
 Attribute: An attribute in HTML provides extra information about the element, and it is
applied within the start tag. An HTML attribute contains two fields: name & value.
Syntax:
<tag name attribute_name= " attr_value"> content </ tag name>
 Elements: An HTML element is an individual component of an HTML file. In an HTML
file, everything written within tags are termed as HTML elements.
Development Process

Phase One – Information Gathering

Phase Two – Planning
Phase Three – Designing
Phase Four – Development
Phase Five – Testing & Delivery
Phase Six – Maintenance

 Website Development is the process. There are multiple stages of website

development. The website is the brand ambassador of your business. It highlights the
spotlight on your business to grow. Here we will discuss all the different phases of
website design & development –
 Phase One – Information Gathering
 This is the most important phase of website design & development. The primary stage of
website development is gathering information i.e analyzing clients needs & requirements
also known as “Discovery phase”.
 In this phase, the designer portrays the client’s vision into the paper. In the discovery
phase, it is important to understand the purpose of creating a website, it is also very
important to know the goal of the website, which targets audience you want to get targeted,
type of content your target audience will look for? These factors are very crucial to
determine in the fundamental phase of website design.
 Phase Two – Planning
“Good website is the result of good planning” is what we believe in. After the
information gathering what comes is planning. Planning is nothing but prioritizing tasks for
website completion. In this phase, we develop the sitemap of the website is developed. Here,
we decide the menus, contents & navigational system for the website.
 Phase Three – Designing
This is the creative phase of website design. This is the phase where designer put
their heart & soul into it. Also, communication plays a major role here. The designer needs to
understand each & every aspect of the client expectation & try to sketch it. From logo design
to selecting templates everything is discovered in this phase.
 Phase Four – Development
After designing, there is a development phase also known as ‘implementing phase’.
Now, this is the phase where your actual website starts its implementation. The development
phase is also a very crucial phase for the website design. Here, we integrate all the information
that we had collected from initial phases. Creating Database, logic & actual programming is
done here.
 Phase Five – Testing & Delivery
 After the Development phase, there is a Testing & Discovery Phase. The testing is done by
QA, also responsible for preparing the test cases. The following are the types of website
testing
1. Content Testing
2. Functional Testing
3. Design Testing
 After the above website testing, we upload the files to the server – in most cases, this also
involves installing and configuring WordPress, along with a core set of essential plugins to
help enhance the site. Now again we test it, that whether all the files are uploaded properly
or not. And also assures that the website is working properly. The official launch of the
website is also made as it is viewable in public now.
 Phase Six – Maintenance
The last phase is Maintenance, in this stage, the maintenance of the website is done
for a limited time period only. Maintenance means updating the contents & design of the
website. The maintenance facility provided for the limited time provided by the company but
if the user wants to extend the service they have to are charged extra for it.
HTML tags
 HTML tags are like keywords which defines that how web browser will format and display
the content.

 HTML tags are enclosed within angle braces < Tag Name>. Except few tags, most of the
tags have their corresponding closing tags.

 For example, <html> has its closing tag </html> and <body> tag has its closing
tag </body> tag etc. (except some tags)

 This <head> and <body> tags are called structural tags as they create the structure of a
document and do not affect the appearance of the web page.

 Every tag has some tags associated with it. This attributes modify the appearance or
enhance the functionality of the tags.
HTML tags
 HTML Tag Examples
<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>

 Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.
Line Break Tag
 <br /> element, anything following it starts from the next line.
 This tag is an example of an empty element, where you do not need opening and closing
tags, as there is nothing to go in between them.
 The <br /> tag has a space between the characters br and the forward slash.

Difference between HTML <br> and <br/>

 You can use HTML br tag two ways: <br> or <br/>. It is recommended to use closed br tag
<br/> because it is supported in HTML and XHTML both.
HTML Page Structure
 EXAMPLE

< !DOCTYPE HTML>

<html> OUTPUT:
<head>
<title> THIS IS THE TITLE
TAG </title>
</head>
<body>
This is the body of the
document.
</body>
</html>
HTML code with Notepad.

 Step 1: Open Notepad (Windows)

 Step 2: Write code in HTML
 Step 3: Save the HTML file with .htm or .html extension.
 Step 4: Open the HTML page in your web browser.
 Formatting Tags

 HTML has six levels of headings with different sizes, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.
 Example
<!DOCTYPE html>
<html> OUTPUT:

<head>
<title>Heading Example</title>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
Text Formatting Tags

Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

Strike Text
 Anything written within <strike>.......................</strike> element is displayed with strikethrough.
It is a thin line which cross the statement.

em Tag
 The HTML <em> tag is a logical element, which will display the enclosed content in italic font,
with added semantics importance.
 example:
 <p><em>This is an important content</em>, which displayed in italic font.</p>

 Physical tag: These tags are used to provide the visual appearance to the text.
 Logical tag: These tags are used to add some logical or semantic value to the text.
 Difference between <i> and <em> Tags
The <i> tag displays the text in italic. ... The <em> tag marks text that has stress emphasis which
traditionally means that the text within this tag is also displayed in italic by the browser.
Example
<!DOCTYPE html>
<html>

<head>
<title>Bold Text Example</title>
<h2> I am using <mark> Formatting Tags </mark> </h2>
</head>

<body>
<p>The following word uses a <b>bold</b> typeface.</p>
<p>The following word uses an <i>italicized</i> typeface.</p>
<p>The following word uses an <u>underlined</u> typeface.</p>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
<p>The following word uses a ^superscript typeface.</p>
<p>The following word uses a _subscript typeface.</p>
<p>I want to drink <del>tea</del> <ins>coffee</ins></p>
<p>The following word uses a <big>big</big> typeface.</p>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</body>
Output
 Comments
 Comment is a piece of code which is ignored by any web browser.
 It is a good practice to add comments into your HTML code, especially in complex
documents, to indicate sections of a document, and any other notes to anyone looking at
the code.
 Comments help you and others understand your code and increases code readability.
 HTML comments are placed in between <!-- ... --> tags. So, any content placed with-in
<!-- ... --> tags will be treated as comment and will be completely ignored by the browser.
Example
<!DOCTYPE html>
<html>

<head>
<title>Valid Comment Example</title>
</head>

<body> OUTPUT:
<!-- This is valid comment --> Document content goes here.....
<p>Document content goes here.....</p>
</body>

</html>
 Font Tags
 HTML <font> tag is used to define the font style for the text contained within it. It defines
the font size, color, and face or the text in an HTML document.
 It is supposed to remove in a future version of HTML.
Syntax
<font size=" " color=" " face=" “ > Content.... </font>
Example

<!DOCTYPE html>
<html>
<head>
<title>Font Tag</title>
</head>
<body>
<h2>Example of font tag</h2>
<p>This is normal text without any font styling </p>
<p>
<font color="blue">Text with normal size and default face</font>
</p>
<p>
<font size="5" color="green">Text with Increased size and default face</font>
</p>
<p>
<font color="red" face="cursive">Text with Changed face</font>
</p>
</body>
</html>
Example
<!DOCTYPE html>
<html> Output

<head>
<title>Font Face</title>
</head>

<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>

</html>
<!DOCTYPE html>
<html>

<head>
<title>Setting Font Color</title>
</head>

<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>

</html>
Monospaced Font

 The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are
known as variable-width fonts because different letters are of different widths (for example,
the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the
same width.
 Example
Output
<!DOCTYPE html> The following word uses a monospaced typeface.
<html>

<head>
<title>Monospaced Font Example</title>
</head>

<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
Simple HTML Forms
 An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .
 An HTML form is a section of a document which contains controls such as text
fields, password fields, checkboxes, radio buttons, submit button, menus etc.
 An HTML form is used to collect user input. The user input is most often sent to a
server for processing.
Why use HTML Form
 HTML forms are required if you want to collect some data from of the site visitor.
 For example: If a user want to purchase some items on internet, he/she must fill the form
such as shipping address and credit/debit card details so that item can be sent to the given
address.
HTML Form Syntax
<form action="server url" method="get|post">
form elements e.g. textfield, textarea, radiobutton, button
</form>

 action
Backend script ready to process your passed data.
 method
Method to be used to upload data. The most frequently used are GET and POST methods.
 The default attribute value for the method is get which appends the data to the end of the
processing script URL.
 If the method has the value post, then the data is sent to the web server as a separate
transaction
 The value post is used when the form data is to be stored in a database or as a processing
data in the web server.
HTML form elements
 The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.
The <input> Element
 The HTML <input> element is the most used form element.
 An <input> element can be displayed in many ways, depending on the type attribute.

Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many
choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of
many choices)
<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

 Text Fields
The <input type="text"> defines a single-line input field for text input

Example:
 Output:
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
 The type="text" attribute of input tag creates textfield control also known as single line
textfield control. The name attribute is optional, but it is required for the server side
component such as JSP, ASP, PHP etc.
<form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>
HTML <textarea> tag in form
 The <textarea> tag in HTML is used to insert multiple-line text in a form. The
size of <textarea> can be specify either using "rows" or "cols" attribute or by
CSS.
Example

<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>
HTML Password Field Control
 The password is not visible to the user in password field control.

<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
Radio Button Control

 The radio button is used to select one option from multiple options. It is used for selection of gender,
quiz questions etc.
 It is created using HTML <input> tag but type attribute is set to radio.

<!DOCTYPE html>
<html>

<head>
<title>Radio Box Control</title>
</head>

<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>

</html>
 Checkbox Control
 Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox..
<!DOCTYPE html>
<html>

<head>
<title>Checkbox Control</title>
</head>

<body>
<form>
<input type = "checkbox" name = “subject" value = " maths "> Maths
<input type = "checkbox" name = “subject" value = " physics "> Physics
</form>
</body>

</html>
Button Controls

 There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input>tag by setting its type attribute to button.

 submit
This creates a button that automatically submits a form.

 reset
This creates a button that automatically resets form controls to their initial values.

 button
This creates a button that is used to trigger a client-side script when the user clicks
that button.
<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />

</form>
</body>

</html>
Select Box Control

A select box, also called drop down box which provides option to list down various options in the form of drop-down
list, from where a user can select one or more options.

<!DOCTYPE html>
<html>

<head>
<title>Select Box Control</title>
</head>

<body>
<form>
<select name = "dropdown">
<option value = "Maths" >Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
File Upload Box
 If you want to allow a user to upload a file to your web site, you will need to use a file upload
box, also known as a file select box. This is also created using the <input> element but type
attribute is set to file.

<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>

</html>
 Example:
Department
<html>
<head> <select name="dept">
<title> Frame </title> <option> CSE</option>
</head>
<option> IT</option>
<body>
</select><br>
<center> <h1> Form Submission </h1> </center>
Give the comments here <br>
<form action=" " method="get">
Login Name: <input type="text" name="login" <textarea name="comments" rows=10
size=20> <br> cols=20> </textarea>
Password: <input type="password" name="pass"
<input type="button" value="check"
size=20> <br>
OnClick="validate()"> <br>
Birthdate: <input type="text" name="DOB" size=20>
<br> <input type="submit" value="login“>

Gender: <input type="radio" name="gender" <input type="reset" value="clear“>

value="F"> Female </form>
<input type="radio" name="gender" value="M"> Male </body>
<br> <br>
</html>
Output