HTML

WEB DEVELOPMENT
HTML SUHAIB REHMAN

TRAINER
History of Web Development
• In 1989, Tim Berners-Lee outlined his concept of a computer platform that

could facilitate collaboration among researchers who are based in different
parts of the world. This led to the invention of the Hypertext Markup
Language (HTML) in 1990.
• Strongly based on the Standard Generalized Markup Language (SGML),
HTML became the fundamental building block of the World Wide Web
History of Web Development
• The World Wide Web (WWW) is a network of online content that is

formatted in HTML and accessed via HTTP. The World Wide Web was
originally designed in 1991 by Tim Berners-Lee while he was a contractor
at CERN.
Web 2.0
Web 2.0 moved us from a read-only Internet (web 1.0 )to what experts
would call a “read/write” Internet
WHAT IS WEB DEVELOPMENT
• Web development usually refers to developing a website for the internet.

• There are two broad divisions of web development –
• Front end development(client-side development)
• Back-end Development (also called server-side Development)
• Full stack development
Front End DEVELOPMENT
• Front-end web development is responsible for the look and feel of a website.
• It is also called client-side development.
• This means how colors, type, icons, and images appear. Increasingly, front-end
development has to account for how a website looks on all devices, from desktop to tablet
to phone. Typical programming languages include HTML, JavaScript, and CSS
Back End DEVELOPMENT
• Back-end web development is responsible for building and maintaining the code that runs a
website. This code connects the website to the server and ensures that data flows properly
to the website and that transactions are processed correctly. Typical programming
languages include Java (different from JavaScript), PHP, and MySQL; newer tools include
Python, etc.
Full Stack DEVELOPMENT
• Full-stack web development covers both front-end and back-end responsibilities.

Depending on the complexity of a website, a full-stack developer may be responsible for all
facets of its development, from the server side to the user interface
HTML-History
• HTML stands for Hyper Text Markup Language, which is the most widely used language on
Web to develop web pages.
• HTML was created by Berners-Lee in late 1991.
• But "HTML 2.0" was the first standard HTML specification which was published in 1995.
• HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML
4.01 version is widely used, we currently have the HTML-5 version, which is an extension to
HTML 4.01, which was published in 2012.
HTML-5
• HTML 5 is the fifth and current version of HTML. It has improved the markup available for
documents
Features:
•It has introduced new multimedia features that support audio and video controls by using
<audio> and <video> tags.
•There are new graphics elements including vector graphics and tags.
•Enrich semantic content by including <header> <footer>, <article>, <section> and <figure>
are added..
•Geo-location services- It helps to locate the geographical location of a client.
•Web storage facility which provides web application methods to store data on a web browser.
•Uses the SQL database to store data offline.
•Allows drawing various shapes like triangle, rectangle, circle, etc.
•Capable of handling incorrect syntax.
•Easy DOCTYPE declaration i.e. <!doctype html>
•Easy character encoding i.e. <meta charset=”UTF-8″ UTF-8 stands for “Unicode Transformation Format - 8 bits.
HTML-Layout
HTML-Layout
SIDE BAR
HTML-Tools and extensions Required
1.Visual Studio Code is a text editor for HTML with extensive features and innumerable extensions to choose from to
make coding a better experience.
2.Live server extension hosts our code on our default browser.
3.Highlight Matching Tag is used for identifying the opening and closing tags of an HTML element by highlighting them
with the same colored underlines.
4.Auto Rename Tag renames the closing tag in cases where the starting tag is changed.
5.Better Comments have different categories with unique colors to showcase the aim of each comment.
6.Code Spell Checker identifies a wrong spelling and gives suggestions for the right one.
7.Indent Rainbow makes indentation more readable as it uses four alternating colors to highlight matching tags.
8.Prettier auto formats each element to the next line.
9.Snippet saves a part of the code to be reused in the later stage. It also provides import and export options for a code
snippet.
10.Tabnine is an Ai-based extension that predicts code phrases and words and helps in boosting productivity levels.
P =rand(3,5)—in word
H1-h6
B
I
Sup
Sub
Mark
Blockquote, q, del, ins, pre, code,
Hr br -----empty tag bcoz there is no content in between
Space=&nbsp
<a href=“address” >Click here</a>
HTML-5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project</title>
</head>
<body>
<h1>Card Select</h1> 
<p>This website contains different cards of different colors</p>
<h2>Card 1</h2>
<p>C-programming is a programming language developed in 1972 designed
</body>
</html>
HTML-5
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Card Select &nbsp \Choose One</h1> 
Using <comment> tag: There used to be an HTML <comment> tag, but currently it is not supported by any
modern browser.
</body>
</html>
HTML-Element
An HTML element is the collection of start and end tags with the content inserted in
between them.
Syntax:
<tagname > Contents... </tagname>
HTML tags are like keywords which
defines that how web browser will format
<h1> is a starting tag, </h1> For paragraph and display the content
<p> is a starting tag, </p> For paragraph
Staring tag content Ending tag

HTML-Empty-Element
Empty HTML Elements: HTML Elements without any content i.e, that do not print
anything are called Empty elements. Empty HTML elements do not have an ending tag. For
instance.
<br>,
<hr>,
<input> etc are HTML elements
HTML Heading
These 6 heading elements are h1, h2, h3, h4, h5, and h6; with h1 being the highest level
and h6 being the least
Paragraph Heading
The <p> tag in HTML defines a paragraph. These have both opening and closing tags. So
anything mentioned within <p> and </p> is treated as a paragraph.
HTML-Attributes(align)
HTML Attributes
HTML attributes provide additional information about HTML elements.
Attributes usually come in name/value pairs like: name="value“
<p align=“center”>
<p align=“left”>
<p align=“right”>
HTML-text tags
Text tags
HTML Text Tags
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <b> <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <pre>, <mark> and
<br>
<blockquote>, tagged from another source.
<blockquote cite="www.wikipedia.com">computer system is used to take
input-------- </blockquote>
<code>, tag is used to define a piece of computer code. The content is displayed in the
browser’s default monospace font.
<samp> tag is used to define sample output from a computer program. The content inside is
displayed in the browser's default monospace font.
<ins> for user input
<del> A text with a deleted part, and a new, inserted part:
<pre>text is displayed exactly as written in the html source code
HTML-text tags
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Card Select</h1>
<p>This website contains different cards of different colors</p>
<b>This</b> <strong>is</strong> <!—strong is used to define important text-->
<em> my </em>
<abbr title="web development">WEBD</abbr>
<pre>This
is
pre formatted-text
</pre>
<bdo dir="rtl">
Chandigarh
</bdo> output
<blockquote cite="www.wikipedia.com">computer system is used to take <del> output</del> <ins>user input</ins>
</blockquote>
<address>
chitkara university
Rajpura
pincode:12345
</address>
</body>
</html>
HTML-tags not supported in html 5
• <acronym>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <marquee>
• <noframes>
• <strike>
• <tt>
• The <menu> tag was deprecated in HTML 4.01 and again included in HTML 5.1 specification.
But it will better to ignore it as it is experimental and not supported by many browsers
HTML-Link Tags
Link tags
1. <a> The HTML anchor tag defines a hyperlink that links one page to another page
as well as files, location, or any URL. The "href" attribute is the most important
attribute of the HTML a tag.
<a href=“index2.html"> Next</a>
Appearance:
An unvisited link is displayed underlined and blue.
A visited link is displayed underlined and in purple.
An active link is underlined and red
Target: The target attribute can only use with the href attribute in anchor tag.
<a href=“ ”, target="_blank|_self|_parent|_top|framename">
HTML-Link Tags
Link tags
1. <a>
Target: The target attribute can only use with the href attribute in anchor tag.
<a href=“ ”, target="_blank|_self|_parent|_top|">
Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is the
default)
_parent Opens the linked document in the parent frame

_top Opens the linked document in the full body of the window
If we will not use the target attribute then the link will open in the same page
HTML-Link Tags
Link tags in same document
<a>
At top:
<body>
<a href="#end">bottom</a>
At end:
<a name="end"></a>
HTML-Link Tags
Link tags
2. <base>
The <base> tag specifies the base URL and/or target for all relative URLs in a document.
The <base> tag must have either an href or a target attribute present, or both.
There can only be one single <base> element in a document, and it must be inside the <head>
element
HTML-Link Tags
2. <base> Link tags

HTML-image Tags
Link tags
2. <img>
<figure><img src="../images/flower.jpg" alt="images" height="400px"/><figure>
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below.
1) src
It is a necessary attribute that describes the source or path of the image.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The alt attribute is considered good
for SEO prospective.
3) width
4) height
Use <img> tag as a link
<a><img src="../images/flower.jpg" alt="images" height="400px"/></a>

HTML-image Tags
Link tags
<figure>
<imgsrc="../images/flower.jpg"alt="images" height="400px"/>
<figcaption>Fig.1.1 - computer hardware and software.</figcaption>
</figure> Use of Loading Attribute

If you set the loading attribute to lazy, the image will load only
when it comes in the view of the webpage.
<img
<img
loading="eager“
loading=“lazy"
HTML-File Path
File path
Following are the different types to specify file paths:

1.<img src="picture.jpg"> It specifies that picture.jpg is located in the same folder as the
current page.
2.<img src="images/picture.jpg"> It specifies that picture.jpg is located in the images folder
in the current folder.
3.<img src="/images/picture.jpg"> It specifies that picture.jpg is located in the images folder
at the root of the current web.
4.<img src="../picture.jpg"> It specifies that picture.jpg is located in the folder one level up
from the current folder.
WebP is an image format currently developed by Google for web graphics. It supports both lossy and lossless compression.
The name WebP is a portmenteau of “Web Picture” webp file extension is a file format developed by Google to
reduce the size of images without having to sacrifice quality for storage space.
HTML-Details tag
Details tag
The <details> tag specifies additional details that the user can open
and close on demand.
<details>
<summary>Terms and conditions</summary>
<p>This document is an electronic record in terms of
Information.</p>
</details>
HTML-favicon
favicon
A favicon is a small image displayed next to the page title in the browser
tab.
<title>
<link rel="icon" type =“image/x-icon” href="../money.png">
</title>
HTML-iframe
iframe
HTML iframes
HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML <iframe> tag defines an inline
frame, hence it is also called as an Inline frame.
An HTML iframe embeds another document within the current HTML document in the rectangular region.
HTML-iframe
Iframe and Maps

HTML iframes
For including youtube videos
<iframe width="420" height="345"

src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
<!DOCTYPE html>
HTML-iframe
<html lang="en">
<head>
Iframe and Maps
<title>Summary</title>
<link rel="icon" href="../money.png">
</head>
HTML iframes <body>
<p>help</p>
For including maps <img src="https://images.pexels.com/photos/1131501/pexels-photo-1131501.jpeg?
cs=srgb&dl=pexels-hasan-albari-1131501.jpg&fm=jpg" alt="W3Schools.com"
width="300px" height="300px">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!
1d49371.88148473428!2d76.64541185744481!3d30.519465748886592!2m3!1f0!2f0!3f0!
3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1681233516365!5m2!1sen!2sin"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade">]
<details>
Code ….iframe map link from google maps <summary>Terms and conditions</summary>
<p>This document is an electronic record in terms of Information
Technology Act, 2000 and rules there under as applicable and the amended
provisions pertaining to electronic records in various statutes as amended by
the Information Technology Act, 2000. This electronic record is generated by a
computer system and does not require any physical or digital signatures.</p>
<p>
This document is published in accordance with the provisions of Ru
3 (1) of the Information Technology (Intermediaries guidelines) Rules, 2011 th
require publishing the rules and regulations, privacy policy and Terms of Use
for access or usage of www.flipkart.com website.</p>
</details>
<details>
<summary>Shipping charges</summary>
<p>The shipping charges vary from location to location,</p>
</details>
</body>
</html>
HTML-audio/video
Audio
HTML audio tag is used to define sounds such as music and Attribute Description
other audio clips. Currently there are three supported file controls It defines the audio controls which is displayed
format for HTML 5 audio tag. with play/pause buttons.
1.mp3
2.wav autoplay It specifies that the audio will start playing as soon
as it is ready.
3.ogg
loop It specifies that the audio file will start over again,
every time when it is completed.
<audio controls>
muted It is used to mute the audio output.
<source src=“abc.mp3" type="audio/mp3">
preload It specifies the author view to upload audio file
Your browser does not support the html audio tag. when the page loads.
</audio>
src It specifies the source URL of the audio file.
HTML-audio/video
video
HTML 5 supports <video> tag also. The HTML video tag is controls It defines the video controls which is displayed
with play/pause buttons.
used for streaming video files Currently, there are three video
height It is used to set the height of the video player.
formats supported for HTML video tag:
1.mp4 width It is used to set the width of the video player.
2.webM
poster It specifies the image which is displayed on the
3.ogg screen when the video is not played.
autoplay It specifies that the video will start playing as
soon as it is ready.
<video controls>
loop It specifies that the video file will start over
<source src=“myvideo.mp4" type=“video/mp4"> again, every time when it is completed.
Your browser does not support the html video tag. muted It is used to mute the video output.
</video> preload It specifies the author view to upload video file
when the page loads.
src It specifies the source URL of the video file.
HTML-List Tags
List tags
HTML Lists
HTML Lists are used to specify lists of information.
There are three different types of HTML lists:
1.Ordered List or Numbered List (ol)
2.Unordered List or Bulleted List (ul)
3.Description List or Definition List (dl)

HTML-List Tags
Ordered List
Type Description
ordered Lists Type "1" This is the default type. In this type, the
•Numeric Number (1, 2, 3) list items are numbered with numbers.
•Capital Roman Number (I II Type "I" In this type, the list items are numbered
III) with upper case roman numbers.
•Small Roman Number (i ii iii) Type "i" In this type, the list items are numbered
•Capital Alphabet (A B C) with lower case roman numbers.
•Small Alphabet (a b c)
Type "A" In this type, the list items are numbered
with upper case letters.
Type "a" In this type, the list items are numbered

with lower case letters.
HTML-List Tags
Ordered List
ordered Lists 1.<ol type=«A">

•Numeric Number (1, 2, 3)
2. <li>HTML</li>
•Capital Roman Number (I II
III) 3. <li>CSS</li>
•Small Roman Number (i ii iii) 4. <li>JavaScript</li>
•Capital Alphabet (A B C) 5.</ol>
•Small Alphabet (a b c) start attribute <ol type="A" start="5"> : It will show
capital alphabets starting with "E"
reversed Attribute <ol reversed >
HTML-List Tags
Un Ordered List
Un-ordered Lists 1.<ul type="circle">

•disc 2. <li>HTML</li>
•circle 3. <li>CSS</li>
4. <li>JavaScript</li>
•square
5.</ul>
•none
HTML-List Tags
Description List
A description List or Definition List displays elements in definition form like

in a dictionary. The <dl>, <dt>, and <dd> tags are used to define description
list.
The 3 HTML description list tags are given below:
1.<dl> tag defines the description list.
2.<dt> tag defines data term.
3.<dd> tag defines data definition (description).
HTML-List Tags
Description List
HTML-Table Tags
Table tags
2. <table>
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each column.
<rowspan> Used to combine number of rows
<colspan> Used to combine number of columns

HTML-Table Tags
Table tags
2. <table>
<!DOCTYPE html>
<html lang="en">
<head>
HTML-Table Tags <title>Project</title>

<base href="">
</head>
<body>
<p>hello &#60</p>
Table tags <table border="1"; >

<caption>Marks</caption>
2. <table>
<colgroup>
<col span="1" style="background-color:
red;">
<col span="2" style="background-color:
blue; width: 110px;">
</colgroup>
<thead>
<tr><th>Rollno</td>
Code <th>Name</td>
<th>marks</td>
</tr>
</thead>
<tr>
<td>1</td>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>def</td>
<td>50</td>
</tr>
<tr>
<td>3</td>
<td>hij</td>
<td rowspan="2">70</td>
</tr>
<tfoot>
<tr><td colspan="2">total</td>
<td>230</td></tr>
</tfoot>
</table>
</body>
HTML-Webpage Layout
Semantic tags
Every website has a specific layout to display content in a specific manner.
HTML Semantic tags indicate what the content is rather than just how the browser displays
<header>: It is used to define a header for a document or a section.It contains a heading element icon for the
webpage, logo, etc
•<nav>: It is used to define a container for navigation links
•<section>: It is used to define a section in a document, This element represents a separate section of webpage
that contains related elements grouped together.
•<article>: It is used to define an independent self-contained article such as big story, hug article etc.
•<aside>: It is used to define content aside from the content (like a sidebar)
•<footer>: It is used to define a footer for a document or a section.It mostly contains information about author,
copyright, other links etc
•<details>: It is used to define additional details about webpage and can be hidden or shown as per
requirements
•<summary>: It is used to define a heading for the <details> element. It is used with the <details> element in a
web page 1.<details>
2. <summary>HTML is acronym for?</summary>
3. <p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>
4. </details>
HTML-Entities
Entities
Result Description Entity Name Entity Number
non-breaking space 160

HTML character entities are used as a
replacement of reserved characters in < less than < 60
HTML. You can also replace characters that > greater than > 62
are not present on your keyboard by entities. & ampersand & 38
&entity_name;
" double quotation mark " 34
OR
&#entity_number; ' single quotation mark (apostrophe) ' 39
¢ cent ¢ 162
£ pound £ 163
¥ yen ¥ 165
€ Euro € 8364
© copyright © 169
® registered trademark ® 174

HTML-Block and inline Elements
block Elements
All the HTML elements can be categorized into two categories
(a) Block Level Elements
(b)Inline Elements.
(a) Block Elements

They all start on their own new line, and anything that follows them appears on its own new
line.
example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />,
<blockquote>, and <address> elements are all block level elements
HTML-Block and inline Elements
inline Elements
(b) Inline Elements

Inline elements, on the other hand, can appear within sentences and do not have to appear on a
new line of their own.
The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>,
<code>, <cite>, <dfn>, <kbd>, and <var>
HTML-Group Html Elements
Div Tag
The <div> tag

Block-level tag
The HTML <div> tag is used to group the large section of HTML elements together
The <div> tag is just like a container unit which is used to encapsulate other page elements and
divide the HTML documents into sections.
The div tag is generally used by web developers to group HTML elements together and apply
CSS styles to many elements at once.
HTML-Group Html Elements
Span Tag
The <span> tag

inline-level tag
The HTML <span> is an inline element and it can be used to group inline elements in an
HTML document. The <span> tag is used for a group of words within a paragraph that needs
to be styled differently.
This tag also does not provide any visual change on the block but has more meaning when it is
used with CSS.
<p>This is <span style = "color:red">red</span> and this is <span style = "color:green">green</span></p>

HTML-Classes
.
Class attribute
The HTML class attribute is used to specify a class for an HTML element.
Multiple HTML elements can share the same class.
The class attribute is often used to point to a class name in a style sheet. It can also be used
by JavaScript to access and manipulate elements with the specific class name
<div class=“our">
<h2>CSE</h2>
<p>Computer Science and Engineering.</p>
</div>
HTML-Classes
ID attribute
The id attribute is used to specify the unique ID for an element of the HTML document. It
allocates the unique identifier which is used by the CSS and the JavaScript for performing
certain tasks.
<div class=“our">
<h2>CSE</h2>
<p>Computer Science and Engineering.</p>
</div>
In the Cascading Style sheet (CSS), we can easily select an element with the specific id by using the # symbol
followed by id.
HTML-ID vs Classes
attribute
An ID: allows developers to identify a single element in the HTML code and apply a particular
style to it.
IDs are specific and targeted, similar to a proper noun.
There can be multiple elements on a page, but the ID marks a specific element.
Each element can only have one ID, and each page can only have one element with that specific
ID.
Class: While an ID is specific to a single element, classes can be assigned to multiple elements
on a page or throughout the website. They are not unique. And while a single element can only
have one ID, it can have multiple classes
HTML-Meta Element
Meta tag
<meta> Element
The <meta> element defines extra information about our webpage using 4 crucial attributes:
1.charset attribute: It defines the character set to be used by the browser when loading a
webpage.
2.name attribute: It sets a property to some of the most important meta information like
author name, keywords, and description.
3.http-equiv attribute: It stimulates a response using the http header.
4.content attribute: It works with the name or http-equiv attribute to give a value to the
property mentioned in them.
The <meta> element in HTML is used to display additional information about our HTML
document with the help of different attributes. This information customizes device displays
(how to show content and when to refresh a page) and ranks (through keywords).
HTML-Meta Element
Meta tag
<head>
<meta name="description" content=“Html lectures">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content=“john">
</head>
HTML-Meta Element
Meta tag
http-equiv attribute
During the collection of information about our webpage using the HTTP header, the HTTP-equiv attribute is used. HTTP
headers allow the passage of information with an HTTP response and request between server and client. In case we want
the page to be refreshed after some fixed duration, we can pass the request using the HTTP header. HTTP headers also help
in the creation of a cookie.
The below example show how we can refresh our page every 45 seconds:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="45">
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
It’s worth noting that the http-equiv attribute is not used in HTML5, as most of its functionality has been replaced by other
mechanisms
HTML-Forms
forms tag
HTML Forms are used to collect information submitted by the user, such as a user's name, email address, or any
other essential information, and are sent to the server for processing the data
<form action = “file.php” method = “post”>

<input type = “text” name = “name” value = “name”>
</form>
The action: attribute specifies the action to be taken, it specifies where the information should proceed
The method: attribute in the form instructs the browser on how to send data from the form to a web server. That is possible
in two ways:
1.GET method
2.POST method
GET Method It is not secure as data is displayed in the URL. If the method is not specified, the value is set to "get" as
default.
POST Method POST Methos is used to process sensitive data as the data is not displayed in the URL. Form data is sent as
per the HTTP post-transaction
HTML-Forms
forms tag
<form action = “file.html” method = “post” autocomplete=“on” nonvalidiate>

<input type = “text” name = “name” value = “name” required>
</form>
autocomplete
If we want the user to enter the data manually or autocomplete the data by itself from the past entries, it can be done by
Autocomplete on/off. ON - It is set as default, if not specified.
novalidate
It defines that the form data should not be validated if entered value is wrong or does not match the field.
required
When we want the user to enter a required field, we use the required attribute. If that person does not enter it, the form will
be unable to be submitted.
target
The target attribute specifies where the response should be opened after the form has been submitted.
HTML-Forms
input tag

</form>
<input>
It defines a data input field for the user. It playes important part in Html Forms.
type: The type attribute specifies the type of <input> element to display. If the type attribute is not
specified, the default type is "text".
Value: It specifies the value associated with the input that is sent to the server when the form is submitted.
placeholder: The placeholder attribute specifies a short hint that describes the expected value of an input
field.
Additional attributes
Few additional attributes in the input field may include - maxlength, minlength, pattern, readonly, size,
spellcheck etc.
HTML-Forms
input tag

</form>
<input>
<input type="text"> //defines a single-line text input field
<input type="password"> //defines an obscure password field
<input type = “email">
<input type = “date">
<input type = "number">
<input type = "checkbox">
<input type="radio"> // allows user to select only ONE out of a number of choices
<input type="color" id="one" name="one" value="#e12345">

HTML-Forms
input tag
</form>
<input>
<input type="color"> //used for input fields that should contain a color. <input type="color" id="one"
name="one" value="#e12345">
<input type="date" value="2023-03-11"> //used for input fields that should contain a date.
<input type="datetime-local"> //specifies a date and time input field
<input type="time"> //Enter time in hours, mins& secs
<input type="number"> //To enter numerical inputs
<input type="range" id=“volume" name=“vol" min="0" max="100">
<input type="file"> //To upload files from local system
<input type="hidden"> //a field not visible to the user
<input type="search"> //To enter search queries
<input type = "submit">
<input type="button"> //A push button with no default behavior.
<input type="reset"> //Resets the input to initial values
HTML-Forms
input tag
</form>
<input>
<input type="tel"> //To enter telephone numbers
There is no form validations present here, because of the varied telephone numbers around the world
<form>
<label for="phone">Enter your phone number: </label>
<input
type="tel"
id="phone"
name="phone"
pattern="[6-9]{3}-[0-9]{3}-[0-9]{4}"
placeholder=“678-456-7890"
required
/>
</form>
HTML-Forms
input tag
</form>
<input>
<textarea id= “value” rows = “2” cols = “10”> </textarea>
<select name="file" id="file">

<select name="list" id="list"> <optgroup label="Food">
<option value="About">About</option> <option value="Chinese">Chinese</option>
<option value="Contact">Contact Us</option> <option value="Italian">Italian</option>
<option value="team">Team</option> </optgroup>
</select> </select>
HTML-Forms
input tag
</form>
<fieldset>
The fieldset tag is utilised to gather together related items in the form and create a box around the related items. For
example, to gather information like personal details of the user, we can group the details required separately.
<label>
For the <input> tag, the <label> tag specifies a text label. The label is a regular text that allows the user to pick a form
element by clicking it.
<output>
It specifies the final result of the calculation performed by input data. It is recently introduced in HMTL5
HTML-Forms
Label tag
The <label> element is useful for screen-reader users, because the screen-reader will read
out loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such
as radio buttons or checkboxes) - because when the user clicks the text within the <label>
element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element
to bind them together.
<!DOCTYPE html>
<html lang="en">
<head>
https://www.pexels.com/
<title>TKB</title>
</head>
https://pixlr.com/
<body>
<form action="">
<fieldset>
<legend>Signup</legend>
https://htmlcolorcodes.com/
<label for="username">FirstName</label><br>
<input type="text" name="username" id="username" placeholder="Enter Firstname" minlength="10"><br>
<label for="Lastname">LastName</label><br>
<input type="text" name="Lastname" id="Lastname" placeholder="Enter Last Name"><br>
<label for="password">Password</label><br>
<input
<label
<input
https://www.flaticon.com/
type="password" name="password" id="password" placeholder="Enter password max 8 digit" minlength="8" maxlength="16"><br>
for="Confirm password">Confirm Password</label><br>
type="password" name="Confirmpassword" id="confirmpassword" placeholder="confirm password" minlength="8" maxlength="16"><br>
<label for="Email">Email</label><br>
Increase size or copy

<input type="email" name="email" id="email" placeholder="Enter valid Email-Id" ><br>
<label https://www.remove.bg/upload
for="phone">Phone</label><br>
<input type="tel" name="tel" id="tel" placeholder="Enter valid phone number" pattern="[5-9]{2}[0-9]{7}[1-9]{1}"><br>
<label for="dob">DOB</label><br>
<input type="date" name="dob" id="dob" max="10-04-2023" ><br>
Forms
<label for="gender">Gender: </label><br>
paste
Male<input type="radio" name="gender" id="gender" value="Male" >
Female<input type="radio" name="gender" id="gender" value="Female"><br>
<label for="course">Course</label><br>
<select name="course" id="course">
<optgroup label="Engineering">
<option value="CSE">Computer Science</option>
<option value="Mech">Mechanical</option>
<option value="Elect">Electronics</option>
</optgroup>
<optgroup label="Other">
<option value="Arts">Arts</option>
<option value="Music">Music</option>
<option value="media">Media</option>
</optgroup>
</select><br>
<label for="msg">Suggestion</label><br>
<textarea name="comment" id="msg" cols="30" rows="10" wrap="hard"></textarea>
<label for="in"></label><br>
<label for="photo">Upload photo</label><br>

<input type="file" name="photo" id="photo"><br>
<input type="color" name="color" id="color" value="#ff2341"><br>
10<input type="range" name="" id="" min="10" max="100">100

<input type="checkbox" name="in" value="in" id="in">Agree <a href="#">Terms and Conditions</a>
<input type="submit" name="" id="">
</fieldset>
</form>
</div>
</body>
</html>
https://www.pexels.com/
https://pixlr.com/
https://htmlcolorcodes.com/
https://www.flaticon.com/
https://www.remove.bg/upload
THANK YOU

HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

WEB DEVELOPMENT

HTML SUHAIB REHMAN

• In 1989, Tim Berners-Lee outlined his concept of a computer platform that

• The World Wide Web (WWW) is a network of online content that is

• Web development usually refers to developing a website for the internet.

• Full-stack web development covers both front-end and back-end responsibilities.

<p> is a starting tag, </p> For paragraph

Staring tag content Ending tag

HTML attributes provide additional information about HTML elements.

Attributes usually come in name/value pairs like: name="value“

_parent Opens the linked document in the parent frame

Link tags in same document

2. <base> Link tags

<a><img src="../images/flower.jpg" alt="images" height="400px"/></a>

<figcaption>Fig.1.1 - computer hardware and software.</figcaption>

</figure> Use of Loading Attribute

Following are the different types to specify file paths:

Iframe and Maps

<iframe width="420" height="345"

1.Ordered List or Numbered List (ol)

2.Unordered List or Bulleted List (ul)

3.Description List or Definition List (dl)

Type "a" In this type, the list items are numbered

ordered Lists 1.<ol type=«A">

Un-ordered Lists 1.<ul type="circle">

A description List or Definition List displays elements in definition form like

<rowspan> Used to combine number of rows

<colspan> Used to combine number of columns

HTML-Table Tags <title>Project</title>

Table tags <table border="1"; >

non-breaking space &nbsp; 160

¢ cent &cent; 162

£ pound &pound; 163

¥ yen &yen; 165

€ Euro &euro; 8364

© copyright &copy; 169

® registered trademark &reg; 174

All the HTML elements can be categorized into two categories

(a) Block Level Elements

(a) Block Elements

(b) Inline Elements

The <div> tag

The <span> tag

<p>This is <span style = "color:red">red</span> and this is <span style = "color:green">green</span></p>

<form action = “file.php” method = “post”>

<form action = “file.html” method = “post” autocomplete=“on” nonvalidiate>

<form action = “file.html” method = “post” autocomplete=“on” nonvalidiate>

<form action = “file.html” method = “post” autocomplete=“on” nonvalidiate>

<input type="color" id="one" name="one" value="#e12345">

<textarea id= “value” rows = “2” cols = “10”> </textarea>

<select name="file" id="file">

Increase size or copy

<label for="photo">Upload photo</label><br>

10<input type="range" name="" id="" min="10" max="100">100

You might also like

non-breaking space 160

¢ cent ¢ 162

£ pound £ 163

¥ yen ¥ 165

€ Euro € 8364

© copyright © 169

® registered trademark ® 174