Web Unit 1. it is very good material for web development

NEW-AGE GLOBAL UNIVERSITY FOR
LIBERAL EDUCATION

Web Fundamentals
and
UX Design

UNIT 1: HyperText Markup Language (HTML),
Tables and Forms

Internet
• It is the largest network in the world that connects hundreds of thousands of
individual networks all over the world.
• Rather than moving through geographical space, it moves your ideas and
information through cyberspace – the space of electronic movement of ideas
and information.
• Send e-mail messages.
• Send (upload) or receive (download) files between computers.
• Surfing the web

History of the internet
1. 1950s and 1960s: The Precursors
The U.S. Department of Defense's ARPA (Advanced Research Projects Agency)
starts work on ARPANET, the predecessor to the internet.
2. 1969: Birth of ARPANET
ARPANET becomes operational, connecting four universities in the United States.
The first message sent over ARPANET is "LOGIN."
3. 1970s: TCP/IP and Email
Vint Cerf and Bob Kahn develop TCP/IP (Transmission Control Protocol/Internet
Protocol), the foundational technology of the internet. The first email program is
created.

4. 1980s: Expanding the Network
The term "Internet" is used to describe interconnected networks.
Domain Name System (DNS) is introduced, allowing the use of human-readable
domain names. TCP/IP becomes the standard for internet communication.
5. 1990s: Commercialization and the World Wide Web
The World Wide Web (WWW) is invented by Tim Berners-Lee.
Web browsers like Mosaic and Netscape Navigator are introduced, making the
web accessible to the public.
6. 2000s: Broadband and Social Media
Broadband internet becomes widely available, improving internet speed.
Social media platforms like Facebook, Twitter, and YouTube emerge, reshaping
online communication.

7. 2010s: Mobile Internet and Cloud Computing
The proliferation of smartphones and mobile internet access transforms
how people use the internet. Cloud computing becomes mainstream,
enabling scalable online services. Internet of Things (IoT) devices
become increasingly connected to the internet.
services.
8. 2020s: Ongoing Evolution
Internet connectivity continues to grow, reaching more remote areas. The
development of 5G networks promises even faster wireless internet
speeds.
Emerging technologies like AI, blockchain(Steemit), and augmented
reality impact internet

IPAddressing
IPAddress: An IP address is a numerical label assigned to each device connected to a
network that uses the Internet Protocol for communication.
IP addresses are made up of four numbers, each of which can range from 0 to 255.
IPv4
IPv6
The above diagram shows the address format of IPv4 and IPv6. An IPv4 is a 32-bit decimal
address. It contains 4 octets or fields separated by 'dot', and each field is 8-bit in size. The
number that each field contains should be in the range of 0-255. Whereas an IPv6 is a 128-bit
hexadecimal address. It contains 8 fields separated by a colon, and each field is 16-bit in size.

• The IP address and the domain name each identify a particular computer on the
Internet.
• However, they do not indicate where a Web page’s HTML document resides on
that computer.
• To identify a Web pages exact location, Web browsers rely on Uniform
Resource Locator (URL).
• URL is a four-part addressing scheme that tells the Web browser:
 What transfer protocol to use for transporting the file
 The domain name of the computer on which the file resides
 The pathname of the folder or directory on the computer on which the file
resides
 The name of the file
Uniform Resource Locators

Structure of a Uniform Resource Locators
http => Hypertext Transfer Protocol

DNS(Domain Name System)
Resolve the Name to IPAddress

DNS Parts
• A domain name consists of several parts, which are separated by dots (periods).
Each part of a domain name has a specific significance. Here's a breakdown of
the parts of a domain name using the example "www.example.com":
• Subdomain: In the example "www," the "www" is a subdomain. Subdomains
are optional and represent a specific section or function of a website. Common
subdomains include "www" (for the World Wide Web), "mail" (for email
services), and "blog" (for a blog section).
Second-Level Domain (SLD): In "example.com," "example" is the second-
level domain. This is the core part of the domain name that typically represents
the website or organization. It can be chosen by the domain owner and is often
used to convey the website's identity or purpose.

Top-Level Domain (TLD): The "com" in "example.com" is the top-level
domain. TLDs are the highest level in the domain hierarchy and are used to
categorize and differentiate domain names. They can indicate the type,
purpose, or geographic location of the website. Examples of TLDs include
".com," ".org," ".net," ".gov," and ".edu."

HTTP(Hypertext Transfer Protocol)
• HTTP is an essential protocol used for communication on the World Wide
Web. It is an application layer protocol that governs how data is transferred
between a web client (typically a web browser) and a web server. HTTP is
designed to enable the retrieval and exchange of various types of data,
primarily in the form of text, images, and multimedia content.
• Request-Response Model: HTTP follows a request-response model, where a
web client initiates communication by sending an HTTP request to a web
server. The server processes the request and sends back an HTTP response
containing the requested data or information.

• Stateless Protocol: HTTP is stateless, meaning that each HTTP request is
independent and carries no knowledge of previous requests. Each request is
treated as a standalone transaction. Text-Based Protocol: HTTP messages
are text-based.
• Methods (HTTP Verbs): HTTP requests use methods (also known as HTTP
verbs) to specify the action to be performed on a resource hosted on the
server. Common HTTP methods include:
• GET: Retrieve data from the server (e.g., requesting a web page).
• POST: Send data to the server to create or update a resource (e.g., submitting a form).
• PUT: Update an existing resource on the server.
• DELETE: Remove a resource from the server.
• HEAD: Retrieve only the headers of a resource without the body.

•OPTIONS: Retrieve information about the communication options available for
a resource
• Status Codes: HTTP responses include status codes that indicate the outcome
of the request. Some common status codes include:
• 200 OK: The request was successful, and the server is returning the requested data.
• 404 Not Found: The requested resource could not be found on the server.
• 500 Internal Server Error: The server encountered an error while processing the request.
• URL (Uniform Resource Locator): HTTP requests specify the resource to be
accessed using URLs. A URL consists of a protocol (e.g., http:// or https://), a
domain name (e.g., www.example.com), and a path to the resource (e.g.,
/page.html).

TCP/IP Protocol
• TCP/IP (Transmission Control Protocol/Internet Protocol) is a suite of
networking protocols that serves as the foundation for communication on the
internet and most private networks.
• It provides a set of rules and conventions for the exchange of data between
devices on a network.
• TCP/IP is a fundamental part of modern networking, and it is designed to
ensure reliable and efficient data transmission.

Client/Server Structure of the Web
Web is a collection of files that reside on computers, called Web servers, that
are located all over the world and are connected to each other through the
Internet.
• When you use your Internet connection to become part of the Web, your
computer becomes a Web client in a worldwide client/server network.
• A Web browser is the software that you run on your computer to make it work
as a web client

Web Server
• A web server is a computer program that delivers web pages to users' web
browsers.
1.Hosting: The web server stores website files, which can include HTML
documents, images, videos, stylesheets, scripts, and other assets. These files are
organized into a directory structure.
2.Listening for Requests: A web server continuously listens for incoming requests
from web clients, usually over the HTTP or HTTPS protocol. It waits for client
requests to arrive on a specific port (commonly port 80 for HTTP and port 443 for
HTTPS).
3.Processing Requests: When a request is received, the web server processes it by
examining the requested resource (usually specified in the URL) and determining
which file or script should handle the request.

4. Generating Responses: Based on the request, the web server generates an
HTTP response that includes the requested content. It may involve executing
server-side scripts (e.g., PHP, Python, or Node.js) to dynamically generate web
pages.
5. Content Delivery: Once the response is generated, the web server sends it
back to the requesting client over the internet using the appropriate protocol
(HTTP or HTTPS).

Web Server Software
• Apache HTTP Server
• Nginx
• Microsoft Internet Information Services (IIS)
• LiteSpeed

Web Client
• A web client, often referred to as a web browser, is a software application
installed on a user's device (e.g., computer, smartphone, or tablet) that enables
them to access and interact with web content hosted on web servers.
• Requesting Web Pages: When a user enters a web address (URL) into the
browser's address bar or clicks on a link, the web client sends an HTTP request
to the appropriate web server to retrieve the requested web page or resource.
• Rendering Content: The web client receives the HTTP response from the
server, which includes HTML, CSS, JavaScript, and other assets. The browser
parses and renders this content to display the web page to the user, ensuring
proper layout and interactivity.

• Supporting User Interactions: Web clients provide user-friendly interfaces
for navigating websites, interacting with forms, clicking links, submitting data,
and handling user input.
• Caching: To optimize performance, web clients may cache web page assets
(e.g., images and scripts) locally. This reduces the need to repeatedly
download the same content from the server.

Web Browser Example
• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Apple Safari

Understand Internet
When you access the URL
https://rvu.edu.in/school-of-computer-science-and-engineering, a series of
steps occur to retrieve a response. How does this process unfold?
DNS Resolution: The browser first needs to translate the domain name
"rvu.edu.in" in the URL into an IP address. It does this by sending a DNS
(Domain Name System) query to a DNS server. The DNS server responds
with the IP address associated with "rvu.edu.in."
Establishing a Secure Connection (HTTPS): Since the URL begins with
"https://," it indicates that the browser should establish a secure connection
using the HTTPS (Hypertext Transfer Protocol Secure) protocol. This involves
a process called the TLS/SSL handshake, where the browser and the web
server exchange encryption keys to secure the data transmission.

Sending an HTTP Request: Once a secure connection is established, the
browser sends an HTTP GET request to the server for the resource specified in
the URL path ("/school-of-computer-science-and-engineering" in this case).
Web Server Processing: The web server at "rvu.edu.in" receives the HTTP
request and processes it. It looks for the requested resource (in this case, a web
page related to the School of Computer Science and Engineering) and prepares
an HTTP response.
HTTP Response: The server sends back an HTTP response to the browser.
This response typically includes an HTML document that represents the web
page content, along with other resources such as stylesheets, images, and
JavaScript files.

• Rendering the Web Page: The browser receives the HTML content from the
server and begins to parse it. It then renders the web page on your screen,
interpreting HTML tags, applying styles, and executing JavaScript code as
necessary to create the visual representation of the page.
• Displaying the Web Page: The final rendered web page is displayed in your
web browser, allowing you to interact with the content.

IETF (Internet Engineering Task Force)
• The IETF is an open, international community of network designers, operators,
vendors, and researchers. It is responsible for developing and promoting
voluntary internet standards, protocols, and technologies.
• The IETF's primary mission is to ensure the smooth operation and evolution of
the internet. To achieve this, it develops and maintains the technical
specifications that underpin the internet's infrastructure.

W3C (World Wide Web Consortium)
• The W3C is an international community of organizations and individuals
involved in the development and standardization of web-related technologies. It
was founded by Tim Berners-Lee, the inventor of the World Wide Web, and is
hosted by the Massachusetts Institute of Technology (MIT).
• The W3C's main focus is to develop and maintain open web standards and
recommendations to ensure the long-term growth and accessibility of the World
Wide Web.

HTML CSS Javascript
Structure Style Behavior
Technologies That Drive The Web

HTML
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc

Structure of HTML
</title>
<!doctype html>
<html>
<head>
<title>
</head>
<body> [...]
</body>
</html>
Why I Love This Course
content

Anatomy of an HTML tag
<p> </p>
Element name
Opening tag Closing tag
content

HTML
✔
✘
<h1>
<div>Hello World!</h1>
</div>
<h1>
<div>Hello World!</div>
</h1>

<br> <hr>
Line Break
Only opening tag Only opening tag
Horizontal Rule

HTML Elements
An HTML element is defined by a start tag, some content, and an end tag.
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here....</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other
elements i.e. <html>, <body>, <h1> and <p>).
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.

HTML Semantic Elements
A semantic element clearly describes its meaning to both the browser and the
developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its
content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines
its content.
In HTML there are some semantic elements that can be used to define different
parts of a web page:

The <section> element
It defines a section in a document.
Examples of where a <section> element can be used:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization </p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.</p> </section>

HTML <article> Element
The <article> element specifies independent, self-contained content.
Examples of where the <article> element can be used:
Forum posts
Blog posts
User comments
Newspaper articles
Example:
<article> <h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. </p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla.</p>
</article>
HTML <nav> Element
The <nav> element defines a set of navigation links.
Example:
A set of navigation links:
<nav>
<a href="/html/">HTML</a> |
<a href="/jquery/">jQuery</a>
</nav>

HTML <footer> Element
The <footer> element defines a footer for a document or section.
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
HTML <header> Element
The <header> element represents a container for introductory content or a set of navigational links.
<header>
<h1>What Does WWF Do?</h1>
</header>

Block-Level Elements Inline Elements
✧ Render to begin on a new line
(by default)
✧ May contain inline or other
block-level elements
✧ Render on the same line
(by default)
✧ May only contain other inline
elements
Block –Level vs Inline Elements

Heading Elements
Well chosen content of H1 element is crucial to SEO
Semantic elements allow for a more meaningful expression of the structure of
our HTML page

Lists
• Lists provide a natural and commonly used grouping of content
• Very often, Lists are used for structuring navigation portions of the web page

Creating Links
• Internal linking to other pages in the site
• External linking to other web sites
• Linking to sections of a document

Displaying Images
• Images can enhance your site
• Remember to specify width and height attributes whenever possible

Tables
HTML tables allow web developers to arrange data into rows and columns.
A simple HTML table:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>

Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the
<th> tag instead of the <td> tag:
th stands for table header.

HTML formatting tags
HTML formatting tags are used to apply various formatting styles to text and
elements within a web page. These tags allow you to control the appearance of text,
such as making it bold, italic, underlined, or changing its color. Refer->H8 Folder
Attribute <strong> <em>
Semantic meaning Strong importance Stress emphasis
Typical visual
rendering Bold Italics
When to use To highlight important text To emphasize text
Examples Warning! This is dangerous!
The Mona Lisa is a famous
painting.

Web Unit 1. it is very good material for web development

HTML File path
Absolute File Paths:
• An absolute file path specifies the full and complete path to a file from the root
directory of the file system.
• Example (Windows): C:UsersJohnDocumentsmywebsiteindex.html
Relative File Paths:
• A relative file path specifies the location of a file relative to the current working
directory or the location of the file referencing it.
• Example index.html in the same directory as the referencing file.

HTML attributes
• HTML attributes are additional information added to HTML elements that
provide extra details or properties about the element. Attributes are used to
modify or define the behavior, appearance, or characteristics of HTML
elements. Attributes are always specified in the opening tag of an HTML
element and consist of a name and a value, separated by an equals sign (=) and
enclosed in double or single quotation marks.
• href: The href attribute is used with elements like <a> to specify the URL to
which the user should be directed when clicking the link.
• <img src="image.jpg" alt="A beautiful landscape">

HTML Forms
Forms allow users to input various types of information, such as text, numbers,
selections, and more, which can be submitted to a web server for processing.
HTML forms are created using a combination of HTML elements and attributes.

 Forms are used to collect information from people viewing your web site.
 For example, you can use forms to find out details about your visitors through
surveys and feedback, or engage in e-commerce by selling your goods and
services to people.
 Forms are defined by the <FORM> </FORM> tags and are made up of
different elements to collect data.
 Once the user inputs all of the information, they submit the form by using the
"submit" button that you create.
 What happens with the data is a decision you will need to make.
 You can use a script to manage the data, sent the data to database, or even
receive data via e-mail.

 Forms can contain;
 Text boxes
 Password boxes
 Check boxes
 Radio buttons
 Buttons
 Select lists
 Text areas
 Labels
 Fieldsets
 Legends

Form Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<label> Defines a label for an <input> element
<textarea> Defines a multiline input control
<select> Defines a drop-down list
<option> Defines an option in a drop-down list
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<button> Defines a clickable button
 All form elements should be written in between the <form>..</form> tags.

 The <FORM> </FORM> element is used to create an HTML form and act as a
container for form elements. Although the form element itself isn’t usually a visible
part of the page (like the body tag), it could be with appropriate CSS.
Most commonly used FORM element Attributes
Attribute Description
method Specifies the HTTP method used when submitting the form
action Specifies an address (url) where to submit the form
autocomplet
e
Specifies if the browser should autocomplete the form
novalidate Specifies that the browser should not validate the form.
name Specifies a name used to identify the form

 The METHOD attribute specifies the HTTP method to be used when submitting the form data:
 GET
 POST
 GET
 The default method when submitting form data
 Submitted form data will be visible in the page address field
 The length of a URL is limited (about 3000 characters)
 Never used to send sensitive data! Better for non-secure data
 Useful for form submissions where a user want to bookmark the result
 POST
 The POST method does not display the submitted form data in the page address field.
 Used for sensitive or personal information.
 Has no size limitations, and can be used to send large amounts of data.

 The ACTION attribute defines the action to be performed when the form is submitted.
 Normally, the form data is sent to a web page on the server when the user clicks on the submit
button.
 In the example below, the form data is sent to a page on the server called "action_page.php".
This page contains a server-side script that handles the form data:
 <form action="action_page.php">

 AUTOCOMPLETE attribute is used to provide an autocompletion option to user, when user visit
the form page. Default value is "on"
 If autocompletion is on, it will autocomplete the form and if autocompletion is off, the user have
to fill the form field mannual.
 It is possible to have autocomplete “on” and “off” for the form, and “off” and “on” for specific
input fields.
 The autocomplete attribute works with <form> and the following <input> types:
 text
 search
 url
 tel
 password
 datepickers
 color
<form action="demo_form.php"
autocomplete="on">

 The most important form element is the input element.
 An input element can vary in many ways, depending on the type attribute.
 An input element can be of type
 text,
 checkbox,
 password,
 radio,
 submit,
 reset and more..
Form Elements - <input>

INPUT element Attributes:
 TYPE (required)
 Defines the usage of the INPUT element.
 Hidden inputs always have TYPE = “hidden”.
 NAME provides a unique identification for INPUT element.
 Each input field must have a name attribute to be submitted.
 If the name attribute is omitted, the data of that input field will not be sent at all.
 VALUE indicates the value that the INPUT element sends to the server upon
submission.
 SIZE attribute specifies the size for the input field. (in characters)
 MAXLENGTH attribute specifies the maximum number of characters that the input
field will accept.

INPUT element Attributes:
 The READONLY attribute specifies that the input field is read only (cannot
be changed)
 <input type="text" name="firstname" value="Raygan" readonly>
 The DISABLED attribute specifies that the input field is disabled.
 A disabled input field is unusable and un-clickable, and its value will not
be sent when submitting the form
 <input type="text" name="firstname" value="Raygan" disabled>

Text boxes allow the users to enter a single-line text.
Default width of a text field is 20 characters.
Example
First name: <input type="text" name="fname"
size="25"><br>
Last name: <input type="text" name="lname" size="25">
Result

Password boxes are like text boxes, except the characters in a password field are automatically
masked (shown as asterisks or circles)
Example
User Name:<br>
<input type="text" name="username"><br>
Password:<br>
<input type="password" name="pswd">
Result

Radio Button
Usually found in a group of options, only one radio button in a group can be
selected at a time.
Selecting one radio button deselects the others in its group.
Each radio button within a group should have the same name and different
values. (Otherwise, browsers cannot distinguish between them)
CHECKED attribute indicates which radio button is selected initially
Example
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"
checked>Female<br>
Result

Check boxes let a user select NONE/ONE/MORE options of a limited number of choices.
Each check box within a group should have the same name and different values. (Otherwise,
browsers cannot distinguish between them)
CHECKED attribute indicates initially selected checkboxes.
Check Boxes
Example
<input type="checkbox" name="choice" value="cb1"
checked>Sandwich <br>
<input type="checkbox" name="choice" value="cb2">Pancake <br>
<input type="checkbox" name="choice" value="cb3"
checked>Donuts<br>
Result

<input type="submit"> defines a submit button.
A submit button is used to send form data to a server.
The data is sent to the page specified in the form's action attribute.
The file (form-handler) defined in the action attribute usually does something with the received
input. (include script for processing input data).
VALUE attribute changes the text displayed on the button (default is “Submit”).
Submit Button

Example
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Result
If you type some characters in the text field above, and click the "Submit" button, the browser
will send your input to a page called "html_form_action.asp".

A reset button is used to clear all the entries user entered into the form and reset the form-data
to its default values.
VALUE attribute changes the text displayed on the button (default is “Reset”)
Reset Button
Example
<form name="input" action="html_form_action.asp" method="get">
<P>Username: <input type="text" name="user" size="25"></P>
<P>Password: <input type="password" name="pswd" size="25"></P>
<P><input type="submit" value="Submit">
<input type="reset" value="Reset"></P></form>
Result

The <label> tag defines a label for an <input> element.
The <label> element does not render as anything special for the user. However, it provides a
usability improvement for mouse users, because if the user clicks on the text within the
<label> element, it toggles the control.
The for attribute of the <label> tag should be equal to the id attribute of the related element to
bind them together.
A label can be bound to an element either by using the "for" attribute, or by placing the
element inside the <label> element.
Label

Example
<input type="radio" name="gender" id="male" value="male"
checked>
<label for="male">Male</label><br>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label><br>
<input type="radio" name="gender" id="other" value="other">
<label for="other">Other</label><br>
Result

The <button> element defines a clickable button.
Example
<button type="button" onclick="alert('Hello World!')">
Click Me!
</button>
Result
Button

Inserts a scrollable text box into FORM for entering multi-line text.
It is commonly used in situations where you ask for info that may require multiple
sentences.
You control the dimension of the text area by using the ROWS and COLS attributes.
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
Text Area

Example
<textarea name="message" rows="5" cols="30">
Doğu Akdeniz Üniversitesi
Gazimağusa, Kuzey Kıbrıs
Mersin 10, Turkey
</textarea>
Result

<select> tag presents a drop-down list with choices indicated by the <option> tags
Include NAME attribute
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option
Change the number of list options visible by including the SIZE = “x” attribute inside the
<SELECT> tag
x number of options visible
Use the multiple attribute to allow the user to select more than one value:
if you use multiple attribute, you should also assign different values for each of the value
attributes of option tags
List Box

Example
<select name="cars">
<option selected>BMW</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
Result

Example
<select name="colors" size="3" multiple>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
</select>
Result

The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset>
element.
Example
<fieldset><legend>Personal Information:</legend>
Name:<br>
<input type="text" name="firstname" value="your first
name"><br>
Surname:<br>
<input type="text" name="lastname" value="your last name">
</fieldset>
Result

HTML5 Input Types
range
search
tel
time
url
week
 color
 date
 datetime-local
 email
 month
 number
 HTML5 added several new input types:
 New input types that are not supported by older web browsers, will behave
as <input type="text">.

color
Is used for input fields that should contain a color.
The color tool allows the user to choose a color using standard web formats.
Depending on browser support, a color-picker can show up in the input field like the ones

Example
Select your favorite color:
<input type="color" name="favcolor" value="#ff0022">
Result

date
Setting the input type to date indicates that you wish the user to enter a date.
Depending on browser support, a date picker can show up in the input field.
You can restrict the dates allowed to a specific range by applying the min and max
attributes to the element.

Example
Birthday:
<input type="date" name="bday"><br><br>
Enter a date before 2017-11-23:<br>
<input type="date" name="bday" max="2017-11-
22"><br><br>
Enter a date after 2010-12-16:<br>
<input type="date" name="bday" min="2010-12-
17"><br><br>
Result

time
The purpose of the time input type is to allow the user to enter a time.
Depending on browser support a time picker might pop-up when you enter the input
field.
Example
Select a time:
<input type="time" name="times">
Result

datetime-local
The datetime-local element combines date and time in a single input field, with no time
zone.
Depending on browser support a time picker might pop-up when you enter the input field.
Example
Birthday (date and time):<br>
<input type="datetime-local" name="bdaytime">
Result

month
Allows the user to select a month and year.
Example
Birthday (month and year):
<input type="month" name="bdaymonth">
Result

week
Allows the user to select a week and year.
Example
Select a week and year:
<input type="week" name="week_year">
Result

email
Used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when
submitted.
Example
E-mail:
<input type="email" name="mail">
Result

number
Defines a numeric input field.
You can also set restrictions on what numbers are accepted by using minand max
attributes.
Example
Enter Your Office No. (between 101 and 112):
<input type="number" name="quantity" min="101"
max="112">
Result

range
Defines a control for entering a number whose exact value is not important.
Default range is 0 to 100. However, you can set restrictions on what numbers are
accepted with the min and max attributes.
Depending on browser support, the input type "range" can be displayed as a slider
control.
Example
Grade:
<input type="range" name="points" min="0" max="100">
Result

tel
Used for input fields that should contain a telephone number.
The tel type is currently supported only in Safari 8.
Example
Telephone:
<input type="tel" name="telephone">
Result

search
Used for search fields.
A search field behaves like a regular text field.
Example
Search Google:
<input type="search" name="googlesearch">
<input type="submit" value="Search">
Result

url
Used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when
submitted.
Example
Add your homepage:
<input type="url" name="homepage">
<input type="submit" value="Submit">
Result

Web Unit 1. it is very good material for web development

More Related Content

Similar to Web Unit 1. it is very good material for web development (20)

Recently uploaded (20)

Web Unit 1. it is very good material for web development