2. 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
3. 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
4. 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
5. 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
6. 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.
7. 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
8. 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.
9. 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
12. 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.
14. 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> <!-- comment goes here-->
<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>
15. 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   Choose One</h1> <!-- comment goes here-->
Using <comment> tag: There used to be an HTML <comment> tag, but currently it is not
supported by any modern browser.
</body>
</html>
16. HTML-Element
An HTML element is the collection of start and end tags with the content inserted in
between them.
Syntax:
<tagname > Contents... </tagname>
<h1> is a starting tag, </h1> For paragraph
<p> is a starting tag, </p> For paragraph
Ending tag
Staring tag content
HTML tags are like keywords which
defines that how web browser will
format and display the content
17. 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.
18. 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”>
19. 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
20. HTML-text tags
<!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><!-- comment goes here-->
<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>
<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>
output
21. 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
22. 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">
23. 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
24. HTML-Link Tags
Link tags in same
document
<a>
At top:
<body>
<a href="#end">bottom</a>
At end:
<a name="end"></a>
25. 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
27. HTML-image 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>
Link tags
29. HTML-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.
File path
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.
30. HTML-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>
Details tag
31. HTML-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>
favicon
32. 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.
33. HTML-iframe
Iframe and Maps
HTML iframes
For including youtube videos
<iframe width="420" height="345"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
34. HTML-audio/video
Audio
HTML audio tag is used to define sounds such as music
and other audio clips. Currently there are three supported
file format for HTML 5 audio tag.
1.mp3
2.wav
3.ogg
<audio controls>
<source src=“abc.mp3" type="audio/mp3">
Your browser does not support the html audio tag.
</audio>
Attribute Description
controls It defines the audio controls which is displayed
with play/pause buttons.
autoplay It specifies that the audio will start playing as soon
as it is ready.
loop It specifies that the audio file will start over again,
every time when it is completed.
muted It is used to mute the audio output.
preload It specifies the author view to upload audio file
when the page loads.
src It specifies the source URL of the audio file.
35. HTML-audio/video
video
HTML 5 supports <video> tag also. The HTML video tag
is used for streaming video files Currently, there are three
video formats supported for HTML video tag:
1.mp4
2.webM
3.ogg
<video controls>
<source src=“myvideo.mp4" type=“video/mp4">
Your browser does not support the html video tag.
</video>
controls It defines the video controls which is displayed
with play/pause buttons.
height It is used to set the height of the video player.
width It is used to set the width of the video player.
poster It specifies the image which is displayed on the
screen when the video is not played.
autoplay It specifies that the video will start playing as
soon as it is ready.
loop It specifies that the video file will start over
again, every time when it is completed.
muted It is used to mute the video output.
preload It specifies the author view to upload video file
when the page loads.
src It specifies the source URL of the video file.
36. HTML-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)
List tags
37. HTML-List Tags
ordered Lists
•Numeric Number (1, 2, 3)
•Capital Roman Number (I II
III)
•Small Roman Number (i ii
iii)
•Capital Alphabet (A B C)
•Small Alphabet (a b c)
Ordered List
Type Description
Type "1" This is the default type. In this type,
the list items are numbered with
numbers.
Type "I" In this type, the list items are
numbered with upper case roman
numbers.
Type "i" In this type, the list items are
numbered with lower case roman
numbers.
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.
38. HTML-List Tags
ordered Lists
•Numeric Number (1, 2, 3)
•Capital Roman Number (I II
III)
•Small Roman Number (i ii
iii)
•Capital Alphabet (A B C)
•Small Alphabet (a b c)
Ordered List
1.<ol type=«A">
2. <li>HTML</li>
3. <li>CSS</li>
4. <li>JavaScript</li>
5.</ol>
start attribute <ol type="A" start="5"> : It will
show capital alphabets starting with "E"
reversed Attribute <ol reversed >
40. HTML-List Tags
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).
Description List
42. HTML-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
Table tags
44. HTML-Webpage Layout
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
Semantic tags
1.<details>
2. <summary>HTML is acronym for?</summary>
3. <p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>
4. </details>
46. 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
47. 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>
48. 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.
49. 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>
50. 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>
51. 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.
52. 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
53. HTML-Meta Element
Meta tag
<meta> Element
The <meta> element defines extra information about our webpage using 4
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
HTML document with the help of different attributes. This information
device displays (how to show content and when to refresh a page) and ranks
54. HTML-Meta Element
Meta tag
<head>
<meta charset="UTF-8">
<meta name="description" content=“Html lectures">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content=“john">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
55. HTML-Meta Element
Meta tag
http-equiv attribute
During the collection of information about our webpage using the HTTP header, the HTTP-
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
56. 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
57. 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.
58. HTML-Forms
input tag
<form action = “file.html” method = “post” autocomplete=“on” nonvalidiate>
<input type = “text” name = “name” value = “name” required>
</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
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.
59. HTML-Forms
input tag
<form action = “file.html” method = “post” autocomplete=“on” nonvalidiate>
<input type = “text” name = “name” value = “name” required>
</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">
60. HTML-Forms
input tag
<form action = “file.html” method = “post” autocomplete=“on” nonvalidiate>
<input type = “text” name = “name” value = “name” required>
</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
61. HTML-Forms
input tag
<form action = “file.html” method = “post” autocomplete=“on” nonvalidiate>
<input type = “text” name = “name” value = “name” required>
</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>
63. HTML-Forms
input tag
<form action = “file.html” method = “post” autocomplete=“on” nonvalidiate>
<input type = “text” name = “name” value = “name” required>
</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
64. 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.