SlideShare a Scribd company logo
1 of 66
WEB DEVELOPMENT
HTML
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
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> <!-- 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>
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 &nbsp 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>
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
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>
<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
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
Link tags
2. <base>
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
HTML-image Tags
<figure>
<imgsrc="../images/flower.jpg"alt="images" height="400px"/>
<figcaption>Fig.1.1 - computer hardware and software.</figcaption>
</figure>
Link tags
Use of Loading Attribute
If you set the loading attribute to lazy, the image will
only when it comes in the view of the webpage.
<img <img
loading="eager“
loading=“lazy"
...
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.
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
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
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>
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.
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.
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
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.
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 >
HTML-List Tags
Un-ordered Lists
•disc
•circle
•square
•none
Un Ordered List
1.<ul type="circle">
2. <li>HTML</li>
3. <li>CSS</li>
4. <li>JavaScript</li>
5.</ul>
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
HTML-List Tags
Description List
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
HTML-Table Tags
2. <table>
Table tags
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>
HTML-Entities
Entities
HTML character entities are used as a
replacement of reserved characters in
HTML. You can also replace characters
that are not present on your keyboard by
entities.
&entity_name;
OR
&#entity_number;
Result Description Entity Name Entity Number
non-breaking space &nbsp; 160
< less than &lt; 60
> greater than &gt; 62
& ampersand &amp; 38
" double quotation mark &quot; 34
' single quotation mark (apostrophe) &apos; 39
¢ cent &cent; 162
£ pound &pound; 163
¥ yen &yen; 165
€ Euro &euro; 8364
© copyright &copy; 169
® registered trademark &reg; 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
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
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>
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
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 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.
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">
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
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: &nbsp;</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 action = “file.html” method = “post” autocomplete=“on” nonvalidiate>
<input type = “text” name = “name” value = “name” required>
</form>
<input>
<textarea id= “value” rows = “2” cols = “10”> </textarea>
<select name="list" id="list">
<option value="About">About</option>
<option value="Contact">Contact Us</option>
<option value="team">Team</option>
</select>
<select name="file" id="file">
<optgroup label="Food">
<option value="Chinese">Chinese</option>
<option value="Italian">Italian</option>
</optgroup>
</select>
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
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.
https://pixlr.com/
https://htmlcolorcodes.com/
https://www.pexels.com/
https://www.flaticon.com/
https://www.remove.bg/upload
THANK YOU

More Related Content

Similar to Html.pptx

INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5reshmy12
 
Intro to html revised2
Intro to html revised2Intro to html revised2
Intro to html revised2mmvidanes29
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5nobel mujuji
 
Web development intership Presentation.pptx
Web development intership Presentation.pptxWeb development intership Presentation.pptx
Web development intership Presentation.pptxbodepallivamsi1122
 
Vskills certified html designer Notes
Vskills certified html designer NotesVskills certified html designer Notes
Vskills certified html designer NotesVskills
 
ITEC229_Chapter2_new.ppt
ITEC229_Chapter2_new.pptITEC229_Chapter2_new.ppt
ITEC229_Chapter2_new.pptDowntownWannabe
 
Lecture 2 introduction to html basics
Lecture 2 introduction to html basicsLecture 2 introduction to html basics
Lecture 2 introduction to html basicsAliMUSSA3
 
Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 htmlCK Yang
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5JayjZens
 
HTML element is everything between the start tag and the end tag
HTML element is everything between the start tag and the end tagHTML element is everything between the start tag and the end tag
HTML element is everything between the start tag and the end tagssuser6478a8
 

Similar to Html.pptx (20)

INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5
 
Iwt module 1
Iwt  module 1Iwt  module 1
Iwt module 1
 
Grade 10 COMPUTER
Grade 10 COMPUTERGrade 10 COMPUTER
Grade 10 COMPUTER
 
Intro to html revised2
Intro to html revised2Intro to html revised2
Intro to html revised2
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5
 
Web development intership Presentation.pptx
Web development intership Presentation.pptxWeb development intership Presentation.pptx
Web development intership Presentation.pptx
 
Html basics
Html basicsHtml basics
Html basics
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Vskills certified html designer Notes
Vskills certified html designer NotesVskills certified html designer Notes
Vskills certified html designer Notes
 
ITEC229_Chapter2_new.ppt
ITEC229_Chapter2_new.pptITEC229_Chapter2_new.ppt
ITEC229_Chapter2_new.ppt
 
Lecture 2 introduction to html basics
Lecture 2 introduction to html basicsLecture 2 introduction to html basics
Lecture 2 introduction to html basics
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Learn HTML and HTML5
Learn HTML and HTML5 Learn HTML and HTML5
Learn HTML and HTML5
 
HTML
HTMLHTML
HTML
 
Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 html
 
mst_unit1.pptx
mst_unit1.pptxmst_unit1.pptx
mst_unit1.pptx
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5
 
HTML - 5 - Introduction
HTML - 5 - IntroductionHTML - 5 - Introduction
HTML - 5 - Introduction
 
HTML element is everything between the start tag and the end tag
HTML element is everything between the start tag and the end tagHTML element is everything between the start tag and the end tag
HTML element is everything between the start tag and the end tag
 

Recently uploaded

APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS
APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICSAPPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS
APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICSKurinjimalarL3
 
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICSHARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICSRajkumarAkumalla
 
Microscopic Analysis of Ceramic Materials.pptx
Microscopic Analysis of Ceramic Materials.pptxMicroscopic Analysis of Ceramic Materials.pptx
Microscopic Analysis of Ceramic Materials.pptxpurnimasatapathy1234
 
MANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLS
MANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLSMANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLS
MANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLSSIVASHANKAR N
 
(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...ranjana rawat
 
Coefficient of Thermal Expansion and their Importance.pptx
Coefficient of Thermal Expansion and their Importance.pptxCoefficient of Thermal Expansion and their Importance.pptx
Coefficient of Thermal Expansion and their Importance.pptxAsutosh Ranjan
 
Analog to Digital and Digital to Analog Converter
Analog to Digital and Digital to Analog ConverterAnalog to Digital and Digital to Analog Converter
Analog to Digital and Digital to Analog ConverterAbhinavSharma374939
 
Processing & Properties of Floor and Wall Tiles.pptx
Processing & Properties of Floor and Wall Tiles.pptxProcessing & Properties of Floor and Wall Tiles.pptx
Processing & Properties of Floor and Wall Tiles.pptxpranjaldaimarysona
 
(MEERA) Dapodi Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Escorts
(MEERA) Dapodi Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Escorts(MEERA) Dapodi Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Escorts
(MEERA) Dapodi Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Escortsranjana rawat
 
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...Soham Mondal
 
VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130
VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130
VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130Suhani Kapoor
 
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...ranjana rawat
 
College Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik
College Call Girls Nashik Nehal 7001305949 Independent Escort Service NashikCollege Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik
College Call Girls Nashik Nehal 7001305949 Independent Escort Service NashikCall Girls in Nagpur High Profile
 
IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024Mark Billinghurst
 
High Profile Call Girls Nagpur Meera Call 7001035870 Meet With Nagpur Escorts
High Profile Call Girls Nagpur Meera Call 7001035870 Meet With Nagpur EscortsHigh Profile Call Girls Nagpur Meera Call 7001035870 Meet With Nagpur Escorts
High Profile Call Girls Nagpur Meera Call 7001035870 Meet With Nagpur EscortsCall Girls in Nagpur High Profile
 
Introduction to IEEE STANDARDS and its different types.pptx
Introduction to IEEE STANDARDS and its different types.pptxIntroduction to IEEE STANDARDS and its different types.pptx
Introduction to IEEE STANDARDS and its different types.pptxupamatechverse
 
(RIA) Call Girls Bhosari ( 7001035870 ) HI-Fi Pune Escorts Service
(RIA) Call Girls Bhosari ( 7001035870 ) HI-Fi Pune Escorts Service(RIA) Call Girls Bhosari ( 7001035870 ) HI-Fi Pune Escorts Service
(RIA) Call Girls Bhosari ( 7001035870 ) HI-Fi Pune Escorts Serviceranjana rawat
 

Recently uploaded (20)

★ CALL US 9953330565 ( HOT Young Call Girls In Badarpur delhi NCR
★ CALL US 9953330565 ( HOT Young Call Girls In Badarpur delhi NCR★ CALL US 9953330565 ( HOT Young Call Girls In Badarpur delhi NCR
★ CALL US 9953330565 ( HOT Young Call Girls In Badarpur delhi NCR
 
APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS
APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICSAPPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS
APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS
 
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICSHARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS
 
Microscopic Analysis of Ceramic Materials.pptx
Microscopic Analysis of Ceramic Materials.pptxMicroscopic Analysis of Ceramic Materials.pptx
Microscopic Analysis of Ceramic Materials.pptx
 
MANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLS
MANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLSMANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLS
MANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLS
 
(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
 
Coefficient of Thermal Expansion and their Importance.pptx
Coefficient of Thermal Expansion and their Importance.pptxCoefficient of Thermal Expansion and their Importance.pptx
Coefficient of Thermal Expansion and their Importance.pptx
 
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptxExploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
 
Analog to Digital and Digital to Analog Converter
Analog to Digital and Digital to Analog ConverterAnalog to Digital and Digital to Analog Converter
Analog to Digital and Digital to Analog Converter
 
Processing & Properties of Floor and Wall Tiles.pptx
Processing & Properties of Floor and Wall Tiles.pptxProcessing & Properties of Floor and Wall Tiles.pptx
Processing & Properties of Floor and Wall Tiles.pptx
 
(MEERA) Dapodi Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Escorts
(MEERA) Dapodi Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Escorts(MEERA) Dapodi Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Escorts
(MEERA) Dapodi Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Escorts
 
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
OSVC_Meta-Data based Simulation Automation to overcome Verification Challenge...
 
VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130
VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130
VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130
 
9953056974 Call Girls In South Ex, Escorts (Delhi) NCR.pdf
9953056974 Call Girls In South Ex, Escorts (Delhi) NCR.pdf9953056974 Call Girls In South Ex, Escorts (Delhi) NCR.pdf
9953056974 Call Girls In South Ex, Escorts (Delhi) NCR.pdf
 
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
 
College Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik
College Call Girls Nashik Nehal 7001305949 Independent Escort Service NashikCollege Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik
College Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik
 
IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024
 
High Profile Call Girls Nagpur Meera Call 7001035870 Meet With Nagpur Escorts
High Profile Call Girls Nagpur Meera Call 7001035870 Meet With Nagpur EscortsHigh Profile Call Girls Nagpur Meera Call 7001035870 Meet With Nagpur Escorts
High Profile Call Girls Nagpur Meera Call 7001035870 Meet With Nagpur Escorts
 
Introduction to IEEE STANDARDS and its different types.pptx
Introduction to IEEE STANDARDS and its different types.pptxIntroduction to IEEE STANDARDS and its different types.pptx
Introduction to IEEE STANDARDS and its different types.pptx
 
(RIA) Call Girls Bhosari ( 7001035870 ) HI-Fi Pune Escorts Service
(RIA) Call Girls Bhosari ( 7001035870 ) HI-Fi Pune Escorts Service(RIA) Call Girls Bhosari ( 7001035870 ) HI-Fi Pune Escorts Service
(RIA) Call Girls Bhosari ( 7001035870 ) HI-Fi Pune Escorts Service
 

Html.pptx

  • 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.
  • 13. 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>
  • 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 &nbsp 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
  • 28. HTML-image Tags <figure> <imgsrc="../images/flower.jpg"alt="images" height="400px"/> <figcaption>Fig.1.1 - computer hardware and software.</figcaption> </figure> Link tags Use of Loading Attribute If you set the loading attribute to lazy, the image will only when it comes in the view of the webpage. <img <img loading="eager“ loading=“lazy" ...
  • 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 >
  • 39. HTML-List Tags Un-ordered Lists •disc •circle •square •none Un Ordered List 1.<ul type="circle"> 2. <li>HTML</li> 3. <li>CSS</li> 4. <li>JavaScript</li> 5.</ul>
  • 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>
  • 45. HTML-Entities Entities HTML character entities are used as a replacement of reserved characters in HTML. You can also replace characters that are not present on your keyboard by entities. &entity_name; OR &#entity_number; Result Description Entity Name Entity Number non-breaking space &nbsp; 160 < less than &lt; 60 > greater than &gt; 62 & ampersand &amp; 38 " double quotation mark &quot; 34 ' single quotation mark (apostrophe) &apos; 39 ¢ cent &cent; 162 £ pound &pound; 163 ¥ yen &yen; 165 € Euro &euro; 8364 © copyright &copy; 169 ® registered trademark &reg; 174
  • 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: &nbsp;</label> <input type="tel" id="phone" name="phone" pattern="[6-9]{3}-[0-9]{3}-[0-9]{4}" placeholder=“678-456-7890" required /> </form>
  • 62. HTML-Forms input tag <form action = “file.html” method = “post” autocomplete=“on” nonvalidiate> <input type = “text” name = “name” value = “name” required> </form> <input> <textarea id= “value” rows = “2” cols = “10”> </textarea> <select name="list" id="list"> <option value="About">About</option> <option value="Contact">Contact Us</option> <option value="team">Team</option> </select> <select name="file" id="file"> <optgroup label="Food"> <option value="Chinese">Chinese</option> <option value="Italian">Italian</option> </optgroup> </select>
  • 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.