Studocu Unit-1

lOMoARcPSD|34807602
MSD UNIT-1 - Mean stack development of the course
Mean stack development (Jawaharlal Nehru Technological University, Kakinada)
Scan to open on Studocu
Studocu is not sponsored or endorsed by any college or university

Downloaded by karibugatha yaswanth (ykaribugatha@gmail.com)
lOMoARcPSD|34807602
UNIT-I: HTML-5
…………………………………………………………………………………………………………………….
HTML 5: Introduction to Web, Overview of Web Technologies, HTML - Introduction, HTML - Need,Case-
insensitivity, Platform-independency, DOCTYPE Declaration, Types of Elements, HTML Elements-
Attributes, Metadata Element, Sectioning Elements, Paragraph Element, Division and Span Elements,List
Element, Link Element, Character Entities, HTML5 Global Attributes, Creating Table Elements,Table
Elements : Colspan/ Rowspan Attributes, border, cellspacing and cellpadding attributes, CreatingForm
Elements, Input Elements -Attributes,Color and Date Pickers, Select and Datalist Elements,Editing Elements,
Media, Iframe, Why HTML Security, HTML Injection, Clickjacking, HTML5Attributes & Events
Vulnerabilities, Local Storage Vulnerabilities, HTML5 - Cross-browser support, BestPractices For HTML Web
Pages.
……………………………………………………………………………………………………………………
Introduction to Web:
Web consists of billions of clients and server connected through wires and wireless
networks. The web clients make requests to web server. The web server receives the request, finds the
resources and return the response to the client. When a server answers a request, it usually sends
some type of content to the client. The client uses web browser to send request to the server. The
server often sends response to the browser with a set of instructions written in HTML(HyperText
Markup Language). All browsers know how to display HTML page to the client.
Web Application:
A website is a collection of static files(webpages) such as HTML pages, images,

graphics etc. A Web application is a web site with dynamic functionality on the
server. Google, Facebook, Twitter are examples of web applications. HTTP (Hypertext Transfer
Protocol)
 HTTP is a protocol that clients and servers use on the web to communicate.It is similar to other
internet protocols such as SMTP(Simple Mail Transfer Protocol) and FTP(File Transfer Protocol)
but there is one fundamental difference.
 HTTP is a stateless protocol i.e HTTP supports only one request per connection. This means
that with HTTP the clients connect to the server to send one request and then disconnects. This
mechanism allows more users to connect to a given server over a period of time.
 The client sends an HTTP request and the server answers with an HTML page to the client,
using HTTP.
1 UNIT-1 HTML5 NOTES CSE DEPT_BVCITS

lOMoARcPSD|34807602
Overview of Web Technologies:

Web Technology refers to the various tools and techniques that are utilized in
the process of communication between different types of devices over the internet. A web browser is used to
access web pages. Web browsers can be defined as programs that display text, data, pictures, animation, and video
on the Internet. Hyperlinked resources on the World Wide Web can be accessed using software interfaces
provided by Web browsers.
Web Technology can be classified into the following sections:
World Wide Web (WWW): The World Wide Web is based on several different technologies : Web browsers,
Hypertext Markup Language (HTML) and Hypertext Transfer Protocol (HTTP).
Web Browser: The web browser is an application software to explore www (World Wide Web). It provides an
interface between the server and the client and requests to the server for web documents and services.
Web Server: Web server is a program which processes the network requests of the users and serves them with
files that create web pages. This exchange takes place using Hypertext Transfer Protocol (HTTP).
Web Pages: A webpage is a digital document that is linked to the World Wide Web and viewable by anyone
connected to the internet has a web browser.
Web Development: Web development refers to the building, creating, and maintaining of websites. It includes
aspects such as web design, web publishing, web programming, and database management. It is the creation of an
application that works over the internet i.e. websites.
Web Development can be classified into two ways:
 Frontend Development: The part of a website that the user interacts directly is termed as front end. It is
also referred to as the ‘client side’ of the application.
 Backend Development: Backend is the server side of a website. It is the part of the website that users
cannot see and interact. It is the portion of software that does not come in direct contact with the users. It
is used to store and arrange data.

lOMoARcPSD|34807602
Frontend Languages: The front end portion is built by using some languages which are discussed below:
 HTML: HTML stands for Hypertext Markup Language. It is used to design the front-end portion of
web pages using a markup language. HTML is the combination of Hypertext and Markup language.
Hypertext defines the link between the web pages. The markup language is used to define the text
documentation within the tag which defines the structure of web pages.
 CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to
simplify the process of making web pages presentable. CSS allows you to apply styles to web pages.
More importantly, CSS enables you to do this independent of the HTML that makes up each web page.
 JavaScript: JavaScript is a famous scripting language used to create magic on the sites to make the site
interactive for the user. It is used to enhancing the functionality of a website to running cool games and
web-based software.
 AJAX: Ajax is an acronym for Asynchronous Javascript and XML. It is used to communicate with the
server without refreshing the web page and thus increasing the user experience and better performance.
.
Backend Languages: The back end portion is built by using some languages which are discussed below:
 PHP: PHP is a server-side scripting language designed specifically for web development. Since PHP
code executed on the server-side, so it is called a server-side scripting language.
 Node.js: Node.js is an open-source and cross-platform runtime environment for executing JavaScript
code outside a browser. You need to remember that NodeJS is not a framework, and it’s not a
programming language. Most people are confused and understand it’s a framework or a programming
language. We often use Node.js for building back-end services like APIs like Web App or Mobile App.
It’s used in production by large companies such as Paypal, Uber, Netflix, Wallmart, and so on.
 Python: Python is a programming language that lets you work quickly and integrate systems more
efficiently.
 Ruby: Ruby is a dynamic, reflective, object-oriented, general-purpose programming language. Ruby is
a pure Object-Oriented language developed by Yukihiro Matsumoto. Everything in Ruby is an object
except the blocks but there are replacements too for it i.e procs and lambda. The objective of Ruby’s
development was to make it act as a sensible buffer between human programmers and the underlying
computing machinery.
 Java: Java is one of the most popular and widely used programming languages and platforms. It is
highly scalable. Java components are easily available.

lOMoARcPSD|34807602
 JavaScript: JavaScript can be used as both (front end and back end) programming.
 Golang: Golang is a procedural and statically typed programming language having the syntax similar to
C programming language. Sometimes it is termed as Go Programming Language.
 C# :C# is a general-purpose, modern and object-oriented programming language pronounced as “C
sharp”.
 DBMS: The software which is used to manage database is called Database Management System
(DBMS).
HTML INTRODUCTION, HTML NEED:
In the web technology world, below are the fundamental building blocks of any web page.
HTML (HyperText Markup Language) is the most fundamental building block of the Web. It defines the meaning
and structure of web content.
CSS(Cascading Style Sheet) is used for styling and giving better presentation to the web pages
JavaScript(JS) is used for implementing behavior required in a web page
To develop a web application using HTML, you can use simple editors such as Notepad or go for IDEs like Visual
Studio Code(recommended), Eclipse etc. which makes coding easier.
And, to execute application, you can use any commonly used browser such as Google Chrome(recommended),
Mozilla Firefox etc.
Hyper Text Markup Language (HTML) is a standard markup language to create the structure of a web page.
It annotates the content on a web page using HTML elements.
In a web page, all instructions to the browser are given in the form of HTML tags, also known as HTML elements.
The content of the web page will be rendered as per the HTML tags in which they are enclosed.
Observe the picture below.

lOMoARcPSD|34807602
The text content "Hello World!" is annotated to the heading, increasing the font-weight when it is
enclosed in the HTML tag <h1>.
Likewise, the look and feel of the web page can be defined and the content can be organized on the web page with
the help of various HTML elements.
Now, let us see the document structure of HTML.
HTML document structure tells the browser how to render the text written in each of the HTML elements of the web
page.
Consider that we need to create a web page, the basic HTML document structure will be as below:
The structure of an HTML document is defined using HTML tags.
Below is the basic structure of a simple HTML document or web page:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title></title>
5. </head>
6. <body>
7. </body>
8. </html>
Now, let us understand these basic HTML tags in detail
The following are some key elements in HTML that form the basic structure of a web page.
 <!DOCTYPE html> declaration update the browser about the version of HTML being used. By default, it
points to HTML5, the latest version.
 The <html> tag encapsulates the complete web page content. All other tags are 'nested' within the <HTML>
tag.
 Any HTML document or web page consists of two main sections the 'head' and the 'body'.
o The head section starts with the start tag <head> and ends with the end tag </head>.
The following elements can be provided within the head tag.

lOMoARcPSD|34807602
Tags Description
<title> Defines the title that should be displayed on the browser tab
Metadata is in-general, data about data.
Provides metadata about the HTML document.
Metadata will not be displayed on the page but will be machine-readable.
<meta> Used to specify page description, author of the document, last modified, etc.
Used by browsers (control how to display content or reload the page), search engines
(keywords), or other web services.
Post HTML5, meta tag also allows web designers to take control over the viewport by setting
the meta viewport tag.
<style> Defines style information for the web page
<link> Defines a link to other documents like CSS
<script> Defines script like JavaScript
 The body section is denoted within the start tag <body> and ends with the end tag </body>. This section
contains actual web page content like text, images, etc.
Every HTML document/web page will have only one set of
 <html>...</html> tag
 <head>...</head> tag
 <body>...</body> tag
HTML document/web page is saved with .htm or .html extension.
EXAMPLE HTML CODE:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
OUTPUT:

lOMoARcPSD|34807602
This is a paragraph.
This is another paragraph.
Features of HTML:
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.
Why learn HTML?
 It is a simple markup language. Its implementation is easy.
 It is used to create a website.
 Helps in developing fundamentals about web programming.
 Boost professional career.
Advantages:
 HTML is used to build websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages:
 HTML can only create static web pages. For dynamic web pages, other languages
have to be used.
 A large amount of code has to be written to create a simple web page.
 The security feature is not good.
Case-insensitivity:
HTML elements are case-insensitive. The browser understands the HTML tags irrespective of their cases.
Consider the code snippets below, copy the snippets to your workspace and observe the output
Code 1:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Homepage </title>
5. </head>
6. <body>
7. Hello World!
8. </body>
9. </html>
10.
Code 2:

lOMoARcPSD|34807602
1. <!DOCTYPE html>
2. <htmL>
3. <head>
4. <title>Homepage </title>
5. </head>
6. <body>
7. Hello World!
8. </boDy>
9. </HTML>
10.
11.
You can observe that both codes generate the same output as below:
Platform-independency:
HTML Language is platform-independent. That means the same HTML code can run on different
operating systems as shown below.
Sample.html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>sample page</title>
5. </head>
6. <body>
7. <p>Hello World!</p>
8. </body>
9. </html>
Output:
On executing the above-mentioned code we can observe the same output in different platforms as shown below:

lOMoARcPSD|34807602
DOCTYPE Declaration:
There are many versions of HTML out there such as - HTML 2.0, HTML 3.0, HTML
3.2, HTML4.0, HTML 4.01 and latest is HTML5.0. In each version, some elements and attributes are either added
or depreciated. The appearance of your .html page depends on how the browser renders HTML elements. And how
the browser renders HTML elements depends on how the browser understands them.
Thus, to ensure that the browser understands all HTML elements specific to a particular version, as a developer you
need to tell the browser what version of HTML you have followed while developing your web page.
This is done by using <!DOCTYPE> declaration which stands for Document Type. It tells the browser what version
of HTML it should follow for rendering the web page.
HTML file begins with <!DOCTYPE> declaration as below:
Sample.html:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title> Sample page </title>
5. </head>
6. <body>
7. Hello world!
8. </body>
9. </html>
In the above code, <!DOCTYPE html> signifies that, the code is written in HTML5.
Provide a proper DOCTYPE declaration while designing an HTML web page, so that browser can understand the
version and interpret elements of the web page appropriately.
Types of Elements:
HTML elements can be broadly categorized into two as below:
Let us see the further classification of HTML elements.

lOMoARcPSD|34807602
HTML elements can be further categorized into two as below
Block Element:
A block element begins on a new line occupying the entire width of the parent tag.
Inline Element:
An inline element occupies the necessary space to accommodate the content in the element. Inline elements can
be nested within other inline elements, whereas, block elements cannot be nested within inline elements.
Some of the examples are illustrated below:
Following are the block-level elements in HTML.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>,
<figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>,
<noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.
Note: All these elements are described in later chapters.
Example: (div ,p)

1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <div style="background-color: lightblue">This is first div</div>
7. <div style="background-color: lightgreen">This is second div</div>
8. <p style="background-color: pink">This is a block level element</p>
9. </body>
10. </html>
Test it Now

lOMoARcPSD|34807602
Output:
In the above example we have used
tag, which defines a section in a web page, and takes full width of page.
We have used style attribute which is used to styling the HTML content, and the background color are
showing that it's a block level element..
**Following are The Inline elements are mostly used with other elements.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>,
<img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>,
<span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.
Example:(a,span)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <a href="https://www.javatpoint.com/html-tutorial">Click on link</a>
7. <span style="background-color: lightblue">this is inline element</span>
8. <p>This will take width of text only</p>
9. </body>
10. </html>
Test it Now
Output:

lOMoARcPSD|34807602
HTML Elements- Attributes:

o HTML attributes are special words which provide additional information about the elements or
attributes are the modifier of the HTML element.
o Each element or tag can have attributes, which defines the behaviour of that element.
o Attributes should always be applied with start tag.
o The Attribute should always be applied with its name and value pair.
o The Attributes name and values are case sensitive, and it is recommended by W3C that it should be
written in Lowercase only.
o You can add multiple attributes in one HTML element, but need to give space between two attributes.
Syntax
1. <element attribute_name="value">content</element>
2.
Example
<!DOCTYPE html>
1. <html>
2. <head>
3. </head>
4. <body>
5. <h1> This is Style attribute</h1>
6. <p style="height: 50px; color: blue">It will add style property in element</p>
7. <p style="color: red">It will change the color of content</p>
8. </body>
9. </html>
Output:
ANOTHER HTML ATRRIBUTE TAG (src)

lOMoARcPSD|34807602
The src Attribute:

The src attribute is one of the important and required attribute of <img> element. It is
source for the image which is required to display on browser. This attribute can contain image in
same directory or another directory. The image name or source should be correct else browser will
not display the image.
Example:
<img src="whitepeacock.jpg" height="400" width="600">
CODE:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Example of src attribute</h1>

<p>HTML images can be diplayed with the help of image tag and its attribute src gives the sourc for that
image</p>
<img src="https://static.javatpoint.com/htmlpages/images/whitepeacock.jpg" height="400" width="600">
</body>
</html>
OUTPUT:
Example of src attribute

HTML images can be diplayed with the help of image tag and its attribute src gives the sourc for
that image
HTML COMMENT:
As a developer, you may want to document your code, so that you can easily refer to it in the future.

lOMoARcPSD|34807602
For this, comments are used .
Comments are ignored by the browser.
Metadata Element:
The <meta> tag defines metadata about an HTML document. Metadata is data
(information) about data.
<meta> tags always go inside the <head> element, and are typically used to specify
character set, page description, keywords, author of the document, and viewport
settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines
(keywords), and other web services.
There is a method to let web designers take control over the viewport (the user's visible
area of a web page), through the <meta> tag (See "Setting The Viewport" example below).
Syntax of <meta> tag:
The metadata element is defined within the head element.
Value
Attributes:
Attribute Description
charset character_set Specifies the character encoding for the HTML document
content Text Specifies the value associated with the http-equiv or name attribute

lOMoARcPSD|34807602
http-equiv content-security-policy Provides an HTTP header for the information/value of the content attribute
content-type
default-style
refresh
name application-name Specifies a name for the metadata

author
description
generator
keywords
viewport
More Examples:
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">
Define a description of your web page:
<meta name="description" content="Free Web tutorials for HTML and CSS">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Setting the Viewport:
The viewport is the user's visible area of a web page. It varies with the device - it will
be smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's dimensions and scaling.

lOMoARcPSD|34807602
The width=device-width part sets the width of the page to follow the screen-width of the
device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the
browser.
Here is an example of a web page without the viewport meta tag, and the same web
page with the viewport meta tag:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links
below to see the difference.
Without the viewport meta tag With the viewport meta tag
Sectioning Elements:
Section tag defines the section of documents such as chapters,

headers, footers or any other sections. The section tag divides the content into section
and subsections. The section tag is used when requirements of two headers or footers or
any other section of documents needed. Section tag grouped the generic block of related
contents. The main advantage of the section tag is, it is a semantic element, which
describes its meaning to both browser and developer .
Syntax:
<section> Section Contents </section>
Section tag is used to distribute the content i.e, it distributes the sections and
subsections.
Example:

lOMoARcPSD|34807602
 HTML
<!DOCTYPE html>
<html>
<body>

<section>
<h1>Geeksforgeeek: Section 1</h1>
<p>Content of section 1</p>
</section>
<section>
<h1>GeeksforGeeks: Section 2</h1>
</section>
<section>
<h1>GeeksforGeeks: Section 3</h1>
</section>
</body>
</html>

lOMoARcPSD|34807602
Output:
The below figure illustrates some of the widely used sectioning elements in HTML5.
Below are some of the semantic tags in HTML:
<header>
The <header> element is used to include header content like web page logo, login link, website settings link, etc.
Ideally, every web page has one header. However, multiple headers may also be included as per need.
1. <header>
2. <h3>About Us</h3>
3. </header>
<footer>

lOMoARcPSD|34807602
The <footer> element is used to include footer content like copyright, about us, terms and conditions link, etc. One
footer is included per page.
1. <footer>
2. Copyright @ WayFar, 2020
3. <a href="./AboutUs.html">About Us</a>
4. </footer>
<main>
The <main> element is used for demarking the main content of the web page. Only one main tag per web page is
allowed.
1. <main>
2. <section>
3. ..
4. </section>
5. <section>
6. <article>
7. ..
8. </article>
9. <article>
10. ..
11. </article>
12. </section>
13. </main>
<nav>
The <nav> element is used for navigational content like navigation menu for the website. There is no limit to the
number of times <nav> tag can be used on a web page. As long as there are navigation links, links can be wrapped
inside <nav>.
1. <nav>
2. <a href="Home.html">Home</a>
3. <a href="Login.html">Login</a>
4. </nav>
<section>
The <section> element is used to organize the web page into different sections.
1. <main>
2. <section>

lOMoARcPSD|34807602
3. <p>Section 1</p>
4. </section>
5. <section>
6. <p>Section2</p>
7. </section>
8. </main>
The <article> element is used to include self-contained composition on a web page.
1. <article>
2. <h1>MEAN stack</h1>
3. <p>MEAN stack training includes discussion on MongoDB, Node,
4. Express and Angular with the corresponding certifications</p>
5. </arcicle>
<aside>:
The <aside> element is used to include content related to the main content of the web page.
1. <article>
2. <h1>MEAN stack</h1>
3. <p>MEAN stack training includes discussion on MongoDB, Node, Express and
Angular with the corresponding certifications</p>
4. <aside>
5. <p>Visit our official website to attempt our certifications</p>
6. </aside>
7. </arcicle>
<address>:
The <address> element helps to semantically organize address details in HTML content.
1. <address>
2. John
3. #231A
4. Palace Lane
5. Bangalore
6. </address>>
Paragraph Element:
The paragraph element is generally used for denoting a paragraph. Any textual content can be mentioned inside
this element.

lOMoARcPSD|34807602
It is defined using <p>…</p> tag.
Let us understand this with an example.
demo.html
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <p>This is a Paragraph</p>
5. </body>
6. </html>
Output:
Division and Span Elements:

The division element is used to group various other HTML tags. This element helps us in organizing the web
page into different sections.
If any common rule or style needs to be added to a particular section, the same can be applied to the corresponding
division. The rule or style gets applied to all the contents of the division thereby.
It is defined using <div>…</div> tag.
Let us understand this with an example
<!DOCTYPE>
<html>
<body>
<div style="border:1px solid pink;padding:20px;font-size:20px">
<p>Welcome to Javatpoint.com, Here you get tutorials on latest technologies.</p>

lOMoARcPSD|34807602
<p>This is second paragraph</p>
</div>
</body>
</html>
OUTPUT:
Welcome to Javatpoint.com, Here you get tutorials on latest technologies.
This is second paragraph
SPAN TAG:
HTML <span> tag

HTML <span> tag is used as a generic container of inline elements. It is used for styling purpose to
the grouped inline elements (using class and id attribute or inline style).
The <span> tag does not have any default meaning or rendering.
The <span> tag can be useful for the following task:
o To change the language of a part of the text.

o To change the color, font, background of a part of text using CSS
o To apply the scripts to the particular part of the text.
Syntax
1. <span>Write your content here......</span>
Following are some specifications about the HTML <span> tag
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Span Tag</title>
5. </head>
6. <body>

lOMoARcPSD|34807602
7. <h2>Example of span tag</h2>

8. <p>I have choosen only
div tag span tag
HTML div is a block element. HTML span is an inline element
HTML div element is used to wrap large sections of HTML span element is used to wrap small portion of texts,
elements. image etc.
9. <span style="color: red;">red</span>,

10. <span style="color: blue;">blue</span>, and
11. <span style="color: green;">green</span> colors for my painting.
12. </p>
13. </body>
14. </html>
Output:
NOTE:The <span> tag does not contain any specific attribute in HTML.
HTML LIST ELEMENTS :
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. 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)

lOMoARcPSD|34807602
HTML Ordered List or Numbered List:
In the ordered HTML lists, all the list items are marked with numbers by
default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start
with <li> tag.
CODE:
<!DOCTYPE>
<html>
<body>
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
</body>
</html>
OUTPUT:
1. Aries
2. Bingo
3. Leo
4. Oracle
For example, if we want our list to be displayed as below:

lOMoARcPSD|34807602
Code:
<h1>Courses offered:</h1>
<ol style="list-style-type: upper-roman;">
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
</ol>
Some of the following values for the list-style-type property are:
Some of the possible values of the list-style-type property Type of bullet

1,2,3,4 ... decimal
I, II,III,IV,.. upper-roman
I,ii,iii,iv,.. lower-roman
A,B,C,D,.. upper-latin
a,b,c,d,.. lower-latin
Some of the attributes which can be used with this element are:
Name Description
Start Specifies the initial value of the list.
Specifies the pattern to be rendered in reversed order.
reversed
Specifies the different numbering values like :
 1 for number (default).

 a for lowercase alphabets.
Type
 A for uppercase alphabets.
 i for lowercase roman numeral value.
 I for uppercase roman numeral value.

lOMoARcPSD|34807602
For example:
Consider the following code snippet:
1. <h1>Courses offered:</h1>
2. <ol type="a" start="d" reversed>
3. <li>HTML5</li>
4. <li>CSS</li>
5. <li>JS</li>
6. <li>Bootstrap</li>
7. </ol>
The above code will generate lists of course offered on the web page as shown below:
HTML Unordered List or Bulleted List:
In HTML Unordered list, all the list items are marked with bullets. It is also
known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li>
tag.
<!DOCTYPE>
<html>
<body>
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
</body>

lOMoARcPSD|34807602
</html>
Output:
 Aries
 Bingo
 Leo
 Oracle
HTML Unordered List or Bulleted List displays elements in bulleted format . We can use unordered
list where we do not need to display items in any particular order. The HTML ul tag is used for the
unordered list. There can be 4 types of bulleted list:
o disc
o circle
o square
o none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.
Type Description
Type "disc" This is the default style. In this style, the list items are marked with bullets.
Type "circle" In this style, the list items are marked with circles.
Type "square" In this style, the list items are marked with squares.
Type "none" In this style, the list items are not marked .
HTML Unordered List Example

1. <ul>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>

lOMoARcPSD|34807602
Test it Now
Output:
o HTML
o Java
o JavaScript
o SQL
ul type="circle"
1. <ul type="circle">
2. <li>Java</li>
3. <li>JavaScript</li>
4. <li>SQL</li>
5. </ul>
Test it Now
Output68.1Features
o Java
o JavaScript
o SQL
HTML Description List or Definition List:
HTML Description list is also a list style which is supported by HTML and XHTML. It
is also known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or other name-
value list.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

lOMoARcPSD|34807602
Code:
<!DOCTYPE>
<html>
<body>
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
</body>
</html>
Output:
Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
Antoher example:
1. <dl>
2. <dt>HTML</dt>
3. <dd>is a markup language</dd>
4. <dt>Java</dt>
5. <dd>is a programming language and platform</dd>

lOMoARcPSD|34807602
6. <dt>JavaScript</dt>
7. <dd>is a scripting language</dd>
8. <dt>SQL</dt>
9. <dd>is a query language</dd>
10. </dl>
Output:
HTML
is a markup language
Java
is a programming language and platform
JavaScript
is a scripting language
SQL
is a query language
LINK ELEMENTS:
Links are found in nearly all web pages. Links allow users to click their way from page to
page.
HTML Links – Hyperlinks:
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.

lOMoARcPSD|34807602
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
Example
This example shows how to create a link to W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
CODE:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>
</body>
</html>
A hyperlink is a prime way in which users can navigate from one web page to another. A hyperlink can point to
another web page, or website, or files, or even specific locations on the same web page.
Hyperlinks can be of any of the below types:
Text hyperlink:
 A clickable text is used to take the user to another web page. Largely, we use text-based hyperlinks.
 This text usually appears with an underline and in a different color.
 This color mapping is automatically done by the browser for all text hyperlinks.
Image hyperlink:
 A clickable image is used to take the user to another web page.
Bookmark hyperlink:
 A clickable text/image is used to take the user to another part of the same web page.
Email hyperlink:
 It allows users to send an email by clicking on that link.
Contact number hyperlink:

lOMoARcPSD|34807602
 It allows the user to call a number by clicking on that link.
Let us discuss various hyperlinks that can be created in an HTML page.
Text hyperlink:
The text is mentioned within the start tag <a> and end tag </a> and is displayed on the screen in a clickable manner
1. <a href="Enquire.html"> Click here to connect to us </a><br/>
2. <a href="http://www.google.com"> Click here to go to Google website </a>
Image hyperlink:
We can also have an image-based hyperlink. For this, we need to wrap the image inside an anchor tag.
1. <a href="http://www.google.com">
2. <img src="google.jpg" />
3. </a>
On click of the image, the user gets redirected and the google.com website gets loaded in the browser tab.
Bookmark hyperlink:
When a web page is lengthy, we commonly come across icons or links that say "Go to Top" or "Go to Bottom". Click
on these links does take the user to the top of the page or bottom, as applicable. Sometimes we also observe, on
click of a text in the menu bar, the page auto scrolls to that particular section on that page. This is achieved by using
the Bookmarking concept and the same is implemented by using hyperlinks.
1. <h2 id="top">Topic</h2>
2. <p>Detail……</p>
5. <a href="#top">Go to Top</a>
Email hyperlink:
To send an email on click of a hyperlink, use the below syntax:
1. <a href="mailto:someone@xyz.com?Subject=Hello%20again">Send Mail</a>

lOMoARcPSD|34807602
On click of the link, the installed mail client on the computer gets activated for sending the email. An installed email
client should necessarily be installed on the computer for this to work.
Contact number hyperlink:
To make a call to a number on click of a hyperlink, use the below syntax:
1. <a href="tel:+9999">Call Us</a>
CODE:EMAIL
<!DOCTYPE html>
<html>
<body>
<h2>Link to an Email Address</h2>
<p>To create a link that opens in the user's email program (to let them send a new email), use mailto: inside the
href attribute:</p>
<p><a href="mailto:someone@example.com">Send email</a></p>
</body>
</html>
OUTPUT:
Link to an Email Address
To create a link that opens in the user's email program (to let them send a new email), use mailto:
inside the href attribute:
Send email
character 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.
These characters are replaced because some characters are reserved in HTML. HTML entities provide
a wide range of characters which can allow you to add icons, geometric shapes, mathematical
operators, etc.

lOMoARcPSD|34807602
For example: if you use less than (<) or greater than (>) symbols in your text, the browser can mix
them with tags that's why character entities are used in HTML to display reserved characters.
Syntax:
1. &entity_name;
2. OR
3. &#entity_number;
HTML processors must support following five special characters listed in the table that follows.
Symbol Description Entity Name Number Code
" quotation mark " "
' apostrophe ' '
& ampersand & &
< less-than < <
> greater-than > >
Example
If you want to write <div id = "character"> as a code then you will have to write as follows −
<!DOCTYPE html>
<html>
<head>
<title>HTML Entities</title>
</head>
<body>
<div id = "character">
</body>
</html>
This will produce the following result −

lOMoARcPSD|34807602
<div id = "character">
HTML5 Global Attributes:

Attributes that can be used with all HTML elements are called "Global attributes".
The table below lists a few global attributes supported in HTML5.
Attribute Description
contenteditable Allows the user to edit content. Possible values are true/false.
Dir Specifies text direction. Possible values are Itr/ rtl.
Title Displays the string message as a tooltip.
Specifies whether the spelling of an element's value should be checked or not. Possible values
Spellcheck
are true/false.
Id Gives a unique id to an element.
For example:
<html dir="ltr">
<body>
<p>This webpage is authored in English language</p>
<p contenteditable="true" spellcheck="true">This paragraph is edittable</p>
</body>
</html>
Output: This webpage is authored in English language
editable........................................EDITABLE
Creating Table Elements:
HTML table arranges content into rows and columns and can be used on websites for
the effective display of information in a tabular structure.
 We can create a simple table, with or without borders.
We can also create a complex tabular structure where contents can span across multiple columns/multiple
rows.

lOMoARcPSD|34807602
We can also create a complex tabular structure where contents can span across multiple columns/multiple
rows.
Table Elements :
The table element is defined in HTML using <table>...</table> tag
It contains table header and table body.
The table header is for adding header information like column headers and the table body is for table contents.
The following elements are used within the table element:
Element Description
caption Defines table heading
Tr Defines row of the table
Th Defines heading of the column
Td Defines data of column
Thead Defines header part of the table
Tbody Defines the content part of the table
colgroup Helps to logically group two or more consecutive columns
Table Structure:
1. <table>
2. <caption>Table heading</caption>
3. <thead>
4. <tr>
5. <th>Column 1 heading</th>
6. <th>Column 2 Heading</th>
7. </tr>

lOMoARcPSD|34807602
8. </thead>
9. <tbody>
10. <tr>
11. <td>Column 1 data</td>
12. <td>Column 2 data</td>
13. </tr>
14. </tbody>
15. </table>
The above code snippet displays the below table on the web page:
Example:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid green;
</style>
<body>
<h2>TH elements define table headers</h2>
<table style="width:100%">
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>

lOMoARcPSD|34807602
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
OUTPUT:
TH elements define table headers

Person 1 Person 2 Person 3
Emil Tobias Linus
16 14 10
To understand the example better, we have added borders to the table.
Table Elements : Colspan/Rowspan Attributes:

The elements <td > and <th> supports the attributes namely colspan and rowspan which helps to merge the table
cells accordingly.
The colspan attribute accepts a numeric value and merges specified numeric value of columns together whereas,
the rowspan attribute accepts a numeric value and merges specified numeric value of rows together.
Consider the below table with 4 rows and 4 column

lOMoARcPSD|34807602
For example, if we provide colspan attribute with a value 2, then 2 columns of the table will be merged as shown
below:
And, if we provide rowspan attribute with a value 2, then 2 rows of the table will be merged as shown below:
1. The "colspan" attribute merge columns.

2. The "rowspan" attribute merge rows.
Code:
<!DOCTYPE html>
<html>
<body>
<table border="2">
<caption>Training Status of the Team</caption>
<tr>

lOMoARcPSD|34807602
<th colspan="2">Employee Details</th>
<th>Training Status</th>
</tr>
<tr>
<td rowspan="2">Oct'20</td>
<td>Jacob, #1002</td>
<td>Completed</td>
</tr>
<tr>
<td>Jeenie, #3001</td>
<td>In progress</td>
</tr>
</table>
</body>
</html>
Output:
Training Status of the Team

Employee Details Training Status
Jacob, #1002 Completed
Oct'20
Jeenie, #3001 In progress
HTML Table Borders:
HTML tables can have borders of different styles and shapes.
How To Add a Border
When you add a border to a table, you also add borders around each table cell:

lOMoARcPSD|34807602
To add a border, use the CSS border property on table, th, and td elements:
!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid green;
</style>
</head>
<body>
<h2>Table With Border</h2>
<p>Use the CSS border property to add a border to the table.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>

lOMoARcPSD|34807602
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output:
Table With Border
Use the CSS border property to add a border to the table.
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

lOMoARcPSD|34807602
Collapsed Table Borders:

To avoid having double borders like in the example above, set the CSS border-
collapse property to collapse.
This will make the borders collapse into a single border:
To write on head tag only
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
</style>
</head>
Style Table Borders:

If you set a background color of each cell, and give the border a white color (the
same as the document background), you get the impression of an invisible border:
Example
table, th, td {
border: 1px solid white;
border-collapse: collapse;

lOMoARcPSD|34807602
}
th, td {
background-color: #96D4D4;
}
…………………
Cellspacing and cellpadding attributes:

HTML tables can adjust the padding inside the cells, and also the space between the cells.
HTML Table - Cell Padding:
Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:
Example
th, td {
padding: 15px;
}
To add padding only above the content, use the padding-top property.
And the others sides with the padding-bottom, padding-left, and padding-right properties:
Example
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;

lOMoARcPSD|34807602
padding-right: 40px;
}
HTML Table - Cell Spacing

Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property on
the table element:
Example:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
table {
border-spacing: 60px;
</style>
</head>
Firstname Lastname Age

Jill Smith 50
Eve Jackson 94
John Doe 80
Creating Form Elements:

In a web application, providing user's inputs is required in various contexts such as:
1. Provide users' information to create his/her account with a website

lOMoARcPSD|34807602
2. Provide a username and password to login into the account.

3. Provide feedback on a tour package the user had used, etc.
There has to be a mechanism through which a website can capture user inputs. This is why HTML forms have
been introduced.
HTML Forms, also known as Web Forms, help in capturing information from the user of a web application.
Users can key-in the details such as name, email, phone numbers, comments, dates, and other needed values
using the HTML form inputs. Users can also select from a predefined set of values.
A sample form is illustrated below:
The form can be created using
<form>...</form> tag of HTML.
The <form> tag has the below attributes:
 method: Defaults to HTTP "get" method of submission to the server. To use HTTP "post", use
method="post"
 action: The URL to which the form data has to be submitted
 target: Specifies if the submitted result will open in the current window, a new tab, or on a new frame

lOMoARcPSD|34807602
The form input element is used to collect details from the user.
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> Displays a submit button (for submitting the form)

lOMoARcPSD|34807602
<input type="button"> Displays a clickable button
Let us learn some of the basic input types of HTML form and understand their implementation in short.
Input type - text:
A single-line text field. The value attribute defines the value of the input field.
1. Name: <input type="text" value="">
Input type - password:
An input field can be used to enter a password.
1. Password: <input type="password">
Input type - email:
 An input field that accepts email addresses.

 It has in-built validation for an email.
1. Email-Id: <input type="email">
Input type - number:
 Defines an input text box, where the user can enter only numerical input.
 Gives an error on form submission if the value entered goes beyond the min and max limits and includes
built-in validation to reject non-numerical values.
 Attributes min and max can be used to define a boundary and step attribute value which can be used
for defining the difference between consecutive numbers.
1. Age: <input type="number">
Input type - checkbox:
 Defines a checkbox.
 The checked attribute checks that particular checkbox value.

lOMoARcPSD|34807602
 Also, multiple checkboxes can be checked at a time.
1. Hobbies: <input type="checkbox" checked> Reading

2. <input type="checkbox" checked> Singing
3. <input type="checkbox" > Dancing
Input type - radio:
 Defines a radio button.

 The name attribute specifies the associated name of that radio button.
 Radio buttons in a group should have the same name.
1. Gender: <input type="radio" name="gender" checked value="Male"> Male
2. <input type="radio" name="gender" value="Female"> Female
Input type - file:
Creates a control to upload a file to the server.
1. Select a file: <input type="file">
Label:
The <label> element is used to associate a text label with a form <input> field. The label is used to tell users the
value that should be entered in the associated input field.
Additionally, the "for" attribute of the label can point to the "id" of input control. This ensures the cursor focuses on
the respective input control on the click of the label.
It also enhances the usability, by allowing the user to toggle the control by clicking on text written within
<label>…</label> tag.
EXAMPLE:
<!DOCTYPE html>

lOMoARcPSD|34807602
<html>
<body>
<form>
<h4>Register for Online Trainings</h4>

Username:<input type="text"/> <br/>
Password:<input type="password"/> <br/>
Contact:<input type="number"/> <br/><br/>

Select technologies needed:
<input type="checkbox" value="HTML" checked /> HTML
<input type="checkbox" value="CSS"/> CSS
<input type="checkbox" value="JS"/> JS<br/><br/>

Select training mode:
<input type="radio" name="training" value="classroom" checked /> Classroom
<input type="radio" name="training" value="VCR" /> VCR <br/>

<input type="hidden" name="language" value="english" /> <br/><br/>
Enter the URL of the certified training if any: <input type="url" /> <br/> <br/>

<input type="button" value="Click here to see the available trainings"/>

<input type="submit"/>
</form>
</body>
</html>

lOMoARcPSD|34807602
OUTPUT:
Input Elements – Attributes:

The following are some of the attributes which can be used with HTML input elements.
 Placeholder
 Pattern
 Min
 Max
 Step
 Required
 Multiple
 Form-override
Let us see each of them in detail.
Placeholder:
The placeholder attribute specifies a value that appears in the textbox as below:
1. First name: <input type="text" placeholder="Enter your first name"/>
Pattern:
The pattern attribute creates a custom pattern validator.
The value entered by the user is checked for validity against a specified pattern.

lOMoARcPSD|34807602
If the user input value does not match with a specified pattern, an error message appears.
1. Username: <input type="text" pattern="[A-Za-z]"/>
Min, Max, and Step:0
The following are some of the attributes which are used only with range and number input types
 min: Specifies a minimum acceptable value.

 max: Specifies maximum acceptable value.
 step: Specifies a difference of consecutive values when the user uses the range/number input element.
1. Job experience: <input type="number" min="2" max="10" step="1"/>
Multiple:
The multiple attribute value allows the user to enter/select/upload more than one value.
1. <input type="file" multiple/>
Required:
The required attribute specifies that user input is a must.
If the user does not enter any value in the input field which is associated with this attribute, a default error
message appears on the screen.
1. Username: <input type="text" required/>

lOMoARcPSD|34807602
2. Username: <input type="password" required/>
Form-Override:
The override attributes can be used to override the form-level built-in attribute functionalities using the
submit/image input elements.
Form-override attribute Description

formaction Overrides the form action attribute
formnovalidate Overrides the form novalidate attribute
formmethod Overrides the form method attribute
formtarget Overrides the form target attribute
In the below example, you can observe that the default form submission method
'GET' has been overridden to the 'POST' method due to the usage of 'formmethod' attribute in the submit
input tag.
1. <form method="GET" action="">

2. <input type="submit" formmethod="POST">
3. </form>
Color and Date Pickers:

We have various picker-elements in HTML forms such as color-picker and date-picker elements.
Let us see them in detail.
Input type - color:
Defines a color picker.
1. Choose a color: <input type="color">

lOMoARcPSD|34807602
Input type - date:
Creates a date-picker which is used to collect dates.
1. Date of Birth: <input type="date">
Input type – datetime-local:
Defines a date-time picker, where the user can pick a date as well as time
1. Choose a date and time: <input type="datetime-local"/>

lOMoARcPSD|34807602
Input type – week:
Defines a date picker, where the user can pick a week.
1. Select a week: <input type="week"/>
Input type – month:
Defines a date picker, where the user can pick a month.
1. Select a month: <input type="month"/>
.CODE:GIVE ANY ONE EXAMPLE(Input type - date: )………………………………………………
<!DOCTYPE html>
<html>
<body>
<form>
<h4>Color and Date Pickers -Tryout</h4>

Select your favourite color:<input type="color" /> <br/> <br/>


lOMoARcPSD|34807602
Select your DOB with time: <input type="datetime-local">
</form>
</body>
</html>
OUTPUT:
Color and Date Pickers -Tryout
Selectyourfavouritecolor:
Select your DOB with time:
Select and Datalist Elements:

We have <select> and <datalist> elements in HTML which helps to collect input data from user as a drop-
downs.
Let us see them in detail:
<select> element :
 Defines a drop-down list.

 The "multiple" attribute can be used for having a multi-select dropdown menu.
Country code: <select >
<option value=" ">-- Please choose a country code --</option>
<option value="+213">+213</option>
</select>

lOMoARcPSD|34807602
<datalist> element:
 Defines a set of pre-defined options available to choose for an <input> element.

 In the below example list attribute holds lists of possible options, the value assigned to the list attribute of
the input element and id attribute of datalist attribute should be the same and the value sent to the server
should be assigned to the option element value attribute.
1. Country: <input list="countries">

2. <datalist id="countries">
3. <option value="India">
4. <option value="France">
5. <option value="Singapore">
6. <option value="Thailand">
7. <option value="United Arab Emirates">
8. <option value="United States of America">
9. </datalist>
Code:
<!DOCTYPE html>
<html>
<body>
<form>
<h4>Selecting Input Values from Dropdown</h4>

Select Technology for appearing the Certification:
<select>
<option value="HTML">HTML </option>
<option value="CSS">CSS </option>

lOMoARcPSD|34807602
<option value="JS">JS </option>
<option value="WD" selected>Web Developer </option>
</select> <br/> <br/>

Choose Technology for appearing the Certification :<input list="Technologies" />
<datalist id="Technologies">
<option value="HTML">HTML </option>
<option value="CSS">CSS </option>
<option value="JS">JS </option>
<option value="WD" selected>Web Developer </option>
</datalist>
<input type="submit">
</form>
</body>
</html>
Output:
Selecting Input Values from Dropdown
Select Technology for appearing the Certification:

Web Developer
Choose Technology for appearing the Certification : submit button
Editing Elements:
While developing any content-based application, there may be a requirement to get it reviewed.
While reviewing the content of our web page, the reviewer may want to add or delete some content.
For this scenario, editing elements can be used.

lOMoARcPSD|34807602
The following are elements used for editing.
 del: It defines deleted text by striking on it

 ins: It defines inserted text by underlining it
Example:
1. <p>HTML is building block of Internet</p>
2. <p>HTML is building block of <del>Internet</del> <ins>WWW</ins></p>
Code:
<!DOCTYPE html>
<html>
<body>
<p>HTML is a basic building block of <del>Internet</del> <ins>WWW</ins>
</p>
</body>
</html>
Output:
HTML is a basic building block of WWW
Media:
Any website must be able to engage well with its visitors, be entertaining, and be able to quickly deliver
information.
Embedding content like audio clips, videos, images, maps, and so on... are a great way of engaging, be entertaining
and be able to quickly deliver information to the website users.

lOMoARcPSD|34807602
Pictures or moving pictures, maps, etc. typically draw user attention and trigger quite a lot of emotions. Humans find
it easy to connect to such information, rather than having to go through textual information.
This is why HTML provides tags for embedding media content like audio, video, and images and also for
embedding external content like maps.
HTML5 supports the following types of embedded elements:
Image Element:
Embedding images to a web page can be done with the <img>...</img> tag. The <img> tag has attributes 'src' and
'alt' where src defines the location of the image and alt defines the alternative text if it is failed to load the image
inside the web page.
1. <img src="Summit.png" alt="image unavailable"/>
Audio Element:
Embedding audio to a web page can be done with <audio>...</audio> tag. The <audio> tag has an attribute 'src'
which defines the location of the audio file. It also has an attribute 'controls' which specifies whether to display the
player controls.
1. <audio src="audio.mp3" controls="controls"></audio>

lOMoARcPSD|34807602
Content between <audio> and </audio> tag will be shown by browsers who do not support audio element.
Video Element:
Videos can be embedded into web pages using <video>…</video> tag. The <audio> tag has an
attribute 'src' which defines the location of the audio file. It also has an attribute 'controls' which specifies whether to
display the player controls.
1. <video src ="myVideo.mp4" controls="controls"></video>
Content between <video> and </video> tag will be shown by browsers who do not support the video element.
Iframe:
We might have requirements to include documents, videos, interactive videos, or even other web content into
a web page directly from external sources.
The <iframe> element is used to meet the above requirement. Using the iframe element,
contents from external sources can be integrated anywhere on our web page
It is defined using <iframe>…</iframe> tag.

lOMoARcPSD|34807602
Code:
<html>
<body>
<iframe src="https://www.google.com" width="1000" height="1000"></iframe>
</body>
</html>
Output: google home page displayed with width and height
Why HTML Security?:

We use HTML to create static web pages. HTML5 has introduced
some new features which make web pages richer. New features include new semantic elements like
'header', 'footer', etc., new attributes for form elements like date, time, range, etc., new graphic
elements like SVG and canvas, and new multimedia elements like audio and video.
Web developers can use the new features in HTML5 for building
hybrid applications that can run on the web and mobile devices. Lots of data flow has to be handled
in these applications, therefore developers should take care of the attacks that are possible as well.
For example, an attacker can steal the data by inserting some wicked code through HTML forms
which will be kept in the database. Security flaws are possible if proper security measures are not
taken when using HTML5 features like communication APIs, storage APIs, geolocation, sandboxed
frames, offline applications, etc.
Therefore there is a need to find the attacks possible in all-new HTML5 features and their preventive
measures to defend against those attacks.
HTML Security
As HTML applications are web-based applications, developers

should take proper measures to safeguard the stored data and communications. An attacker can
inject some malicious code via Bluetooth/wifi/text messages for mobile-based apps or via
advertisements/emails for web-based apps. This malicious code can capture sensitive information
and can expose it to the attacker or it can run some undesired operations internally like sending false
messages or purchasing a product with zero amount etc.

lOMoARcPSD|34807602
The following is the list of a few vulnerabilities that are possible in HTML:
1. HTML Injection
2. Clickjacking
3. HTML5 attributes and events vulnerabilities
4. Web Storage Vulnerability
5. Reverse Tabnabbing.
HTML Injection?
HTML Injection is one of the possible attacks in HTML5

apps. HTML Injection is an attack where an attacker can inject malicious HTML code
into a vulnerable web application. An attacker can send malicious code through HTML
input fields or website links. Malicious code can be simple HTML tags that
display some information on the page or a form replacing the original page etc., This
kind of vulnerability happens when user input is not properly sanitized or the output is
not properly encoded.
How HTML Injection is Performed?
An attacker will first find the vulnerable parts of a web application by

inspecting the source code in the browser. Vulnerable parts may be HTML form fields or website links
through which an attacker will inject some malicious HTML code. There are many attributes or
methods which can render data on an HTML page. If malicious code is injected using innerHTML
property and if the data is not properly sanitized, then it will lead to this attack. document.write()
method is another way to inject the malicious code. It is used mostly for form input fields like
comments box, registration forms, questionnaire forms, etc., These kinds of elements are most
vulnerable to HTML Injection attacks.
The main intention of this injection attack is to either change the website's appearance or to steal the
user's identity
Click jacking :
Let us now understand another attack called clickjacking and its consequences.
Hackers will have several ways to trick the user and make
them click on something which they are not supposed to. A common form of this attack involves
mirroring a login form on a website. Users will think that they are entering values in the actual HTML
form but they are actually entering them in the form fields that are overlaid on that web page. The
data which the user enters will be sent directly to an attacker's page. In this type of attack, hackers
will usually target sensitive data like passwords, bank account information, credit card information,
etc.,

lOMoARcPSD|34807602
Below are some real-time scenarios of clickjacking attacks:
1. There was an attack on one of the popular browser plugins, where an attacker added a
modified page in an iframe and can trick a user into changing settings of the plugin to get access to
the local system's resources such as a microphone, camera, etc.
2. A popular social networking site was attacked by tricking users to click on a button that will make
them retweet the location of the malicious web page which will be propagated hugely.
Clickjacking is frequently used to hijack accounts for spamming purposes or navigate links to
malicious web pages on online social network websites.
HTML5 Attributes & Events Vulnerabilities:

DOMPurify is used for sanitizing HTML code. It is written in JavaScript and
works in all modern browsers. This library strip out dangerous HTML and prevents XSS attacks by
sanitizing the HTML code. On feeding string full of dirty HTML code to this library returns a string with
clean HTML. Many security experts have already reviewed this library and identified that it is the
recommended library for HTML sanitization.
To use this library on the website, just include it as shown below.
<script type="text/javascript" src="dist/purify.min.js"></script>
Any dirty code can be sanitized using the below method.

var clean = DOMPurify.sanitize(dirty);
Using document.write() method or using innerHTML property, the resulting HTML code can be written
into DOM.
It is very important to identify a suitable sanitizer library for securing your application .
Local Storage Vulnerabilities:

In our web applications, we often store some data in the browser
cache. As the data is stored at the client-side, there is a chance of data-stealing by injecting some
malicious code, if no proper care is taken. Let us now see how to store the data properly to prevent
such attacks.
HTML5 has introduced Web storage or offline storage which deals with storing data in a local cache.
Data can be stored using two types of objects in HTML5. Local storage and Session storage. These
storages hold data in the form of key-value pairs.
Local storage holds the data in the browser cache until the user deletes it or it expires based on the
expiry date given. setItem() method is used to assign data to local storage. The below code creates
three items with names bgcolor, textcolor, fontsize and assigns the values to them.

lOMoARcPSD|34807602
localStorage.setItem("bgcolor", document.getElementById ("bgcolor").value);
localStorage.setItem("textcolor",document.getElementById("textcolor").value);
localStorage.setItem("fontsize",document.getElementById("fontsize").value);
getItem() method is used to fetch values from local storage. Below is the
codetoretrievevaluesfromlocalStoragedocument.
getElementById("page").style.backgroundColor = localStorage.getItem("bgcolor");
document.getElementById("page").style.color = localStorage.getItem("textcolor");
document.getElementById("page").style.fontSize = localStorage.getItem("fontsize");
HTML5 - Cross-browser support:
Ideally, all browsers are supposed to implement the W3C specification of HTML5 as it is.
However, in reality, all browser vendors more or less customize the specification.
This leads to different outputs of the same HTML code when viewed on different browsers .
Activity: Copy below-given into your Visual Studio Code IDE workspace and save the
file as cross-browser.html.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Cross Browser</title>
5. </head>
6. <body>
7. <form>
8. <label for="">Username</label>
9. <input type="text" name="username"> <br/>
10. <label for="">Password</label>
11. <input type="password" name="password"><br/>
12. <input type="submit">
13. </form>
14. </body>

lOMoARcPSD|34807602
15. </html>
Right-click on the file, copy the path, and paste it into different browsers such as Mozilla Firefox and
Google Chrome and observe the below output.
Also, all browsers may not support all features of HTML5.
Hence, while developing your website, you need to consider the capabilities of your
user's browser - implement HTML5 features according to the capabilities of your user's
browser.
Browser Compatibleness:
 To identify the capabilities of your browser you can refer www.caniuse.com website.
 To identify whether your browser supports a particular HTML5 element or not, you can
refer www.html5test.com website.
Best Practices For HTML Web Pages:

The following are some best practices to be followed while developing a web page or an application
using HTML5.
1. In the application, ensure that each web page is having proper document structure with
divisions such as <head>, <body>, <header>, <footer>
2. Ensure that correct DOCTYPE is declared, which is required for the browser to understand the
standards of the application used to render it properly.
3. Use a meaningful title for the web pages.
4. Always close the tag even if it is not a container tag.
5. Avoid Inline styles and embedded scripts. Try to include script and style with external files
keeping your HTML code clean and neat.
6. Include the script as an external file and place this code at the end portion of the <body> tag.
7. Add the lang attribute to the root element, and keep the value as short as possible.
8. Even though HTML is case insensitive, using lowercase for code is the best practice.

lOMoARcPSD|34807602
9. Use the most appropriate HTML tag for sectioning the web page. Try to avoid the generic
<div> tag and use more meaningful tags such as <article>, <section> and appropriate tags in
the web pages.
10. Always use <ul> for designing navigation bars.
11. Avoid the use of the 'type' attribute in the HTML list element and use the corresponding CSS
property list-style-type property instead.
12. On embedding elements to the web page, use the alt attribute with a proper description text.
13. Indent nested elements properly.
14. Use appropriate type attribute for Input element inside forms, also ensure the form control is
wrapped with <label> element.
15. Use a sandbox attribute along with the iframe element whenever it is needed to embed
another webpage into the application.
16. Use rel attribute with a value "noopener noreferrer" along with hyperlink, to avoid reverse
tabnabbing.
17. Consider all the input data as untrusted information and sanitize those inputs before it is used
in some logic in the application.
18. Do proper output encoding to avoid chances of injection of malicious code to the application
through input elements.
Head Elements:
Tag Description Attributes Possible Values
<title> Specifies the title of the web page. None
<link> Specifies the hyperlink to an external source. href, rel rel="stylesheet"
href="mystyle.css"
<style> Specifies the CSS styling inside HTML page. None
<script> Specifies the JavaScript Code for the web page. None
<meta> Specifies the additional meta information for the name,content name='description',
web page. content="details of
web page content"
Page Layout and Content Tags:

Tag Description Attributes Possible
Values
<header> Specifies the wrapped text as the header of the web None
page document.
<footer> Specifies the wrapped text as the footer of the web None
page document.
<article> Specifies independent and self-contained content. None
<section> Specifies a section in a web page document such as None
chapters.
<aside> Keeps the content aside from the main content. None
<nav> Specifies the navbar portion of the web page. None
<main> Specifies the main content of the document. None

lOMoARcPSD|34807602
<a> Specifies hyper-link to either an external web page or href, rel, href
some other division of the same web page. target ="dummy.com"
rel=" noopener
noreferrer"
target="_blank,
_self,_parent
or _top"
<div> Separate block-level division of the web page None

document.
<span> Specifies the Inline division of an HTML element. None
<ul> Specifies the unordered list.
<ol> Specifies the ordered list. type, start, 1,I,I,a,A
reversed
<li> Specifies the list item element. None
<dl> Specifies the description list. None
<dt> Specifies the Title of the description list element. None
<dd> Specifies the definition/ details of the description list None
element.
Text Content and Text Formatting Tags:

<h1>,<h2>, Heading tags where <h1> is the most important None
<h3>, heading and <h6> is the least important heading.
<h4>,<h5>,
<h6>
<p> Specifies paragraph element. None
<br> Specifies the line break. None
<blockquote> Specifies quotes. cite cite="dummy.com"
<sup> Format the text content as superscript. None
<sub> Format the text content as a subscript. None
<em> Emphasize the text content. None
<strong> Highlight the text content as important making it None
bold.
<mark> Highlight the text content marking it with a yellow None
background.
<del> Specifies deleted text by striking off. None None
<ins> Specifies inserted text by underline. None None
Table Elements:

lOMoARcPSD|34807602
Tag Description Attributes Possible

Values
<table> Specifies the table element. None None
<thead> Specifies the header portion of the table element. None None
<tbody> Specifies the content portion of the table None None
<caption> Specifies the heading of the table None None
<colspan> The element that is used to logically group the related None None
columns
<tr> Specifies a new table row. None None
<td> Specifies a new table column. None None
Embedded Elements:

<img> The element that is used to embed an image src, alt src="./demo.img" alt="Alternative
into the web page. text"
<audio> The element that is used to embed audio into src, controls, src='./audio.mp3' controls
the web page. loop, ="controls"
autoplay,
preload,
muted
<video> The element that is used to embed video into src, controls, src="./video.mp4"
the web page. loop, controls="controls"
autoplay,
preload
<source> Specifies the different formats for video/ src src= "abc.mp4"
audio elements to be embedded into the web
page.
<figure> Specifies a self-contained content along with None None
a caption.
<figcaption> Specifies a caption for a <figure> element None None

lOMoARcPSD|34807602

Studocu Unit-1

Uploaded by

Copyright:

Available Formats

Studocu Unit-1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Studocu Unit-1

Uploaded by

Copyright:

Available Formats

lOMoARcPSD|34807602

MSD UNIT-1 - Mean stack development of the course

Mean stack development (Jawaharlal Nehru Technological University, Kakinada)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

A website is a collection of static files(webpages) such as HTML pages, images,

1 UNIT-1 HTML5 NOTES CSE DEPT_BVCITS

Downloaded by karibugatha yaswanth (ykaribugatha@gmail.com)

Overview of Web Technologies:

2 UNIT-1 HTML5 NOTES CSE DEPT_BVCITS

Downloaded by karibugatha yaswanth (ykaribugatha@gmail.com)

3 UNIT-1 HTML5 NOTES CSE DEPT_BVCITS

Downloaded by karibugatha yaswanth (ykaribugatha@gmail.com)

HTML INTRODUCTION, HTML NEED:

JavaScript(JS) is used for implementing behavior required in a web page

Observe the picture below.

4 UNIT-1 HTML5 NOTES CSE DEPT_BVCITS

Downloaded by karibugatha yaswanth (ykaribugatha@gmail.com)

Now, let us see the document structure of HTML.

The structure of an HTML document is defined using HTML tags.

Below is the basic structure of a simple HTML document or web page:

Now, let us understand these basic HTML tags in detail

The following elements can be provided within the head tag.

5 UNIT-1 HTML5 NOTES CSE DEPT_BVCITS

Downloaded by karibugatha yaswanth (ykaribugatha@gmail.com)

Provides metadata about the HTML document.

Metadata will not be displayed on the page but will be machine-readable.

Every HTML document/web page will have only one set of

HTML document/web page is saved with .htm or .html extension.

EXAMPLE HTML CODE:

<p>This is another paragraph.</p>

6 UNIT-1 HTML5 NOTES CSE DEPT_BVCITS

Downloaded by karibugatha yaswanth (ykaribugatha@gmail.com)

This is another paragraph.

7 UNIT-1 HTML5 NOTES CSE DEPT_BVCITS

Downloaded by karibugatha yaswanth (ykaribugatha@gmail.com)

8 UNIT-1 HTML5 NOTES CSE DEPT_BVCITS

Downloaded by karibugatha yaswanth (ykaribugatha@gmail.com)

HTML file begins with <!DOCTYPE> declaration as below:

HTML elements can be broadly categorized into two as below:

Let us see the further classification of HTML elements.

9 UNIT-1 HTML5 NOTES CSE DEPT_BVCITS

Downloaded by karibugatha yaswanth (ykaribugatha@gmail.com)

HTML elements can be further categorized into two as below

Some of the examples are illustrated below:

Following are the block-level elements in HTML.

Note: All these elements are described in later chapters.

Example: (div ,p)

10 UNIT-1 HTML5 NOTES CSE DEPT_BVCITS

Downloaded by karibugatha yaswanth (ykaribugatha@gmail.com)

In the above example we have used

11 UNIT-1 HTML5 NOTES CSE DEPT_BVCITS

Downloaded by karibugatha yaswanth (ykaribugatha@gmail.com)

HTML Elements- Attributes:

ANOTHER HTML ATRRIBUTE TAG (src)

12 UNIT-1 HTML5 NOTES CSE DEPT_BVCITS

Downloaded by karibugatha yaswanth (ykaribugatha@gmail.com)

The src Attribute:

<h1>Example of src attribute</h1>