0% found this document useful (0 votes)

126 views

HTML Unit-1 - 1

Uploaded by

aarthikurra77

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

126 views

HTML Unit-1 - 1

Uploaded by

aarthikurra77

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 50

UNIT-I:

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, Creating Form
Elements, Input Elements - Attributes, Color and Date Pickers, Select and Datalist Elements, Editing Elements, Media, Iframe, Why
HTML Security, HTML Injection, Clickjacking, HTML5 Attributes & Events Vulnerabilities, Local Storage Vulnerabilities, HTML5
- Cross-browser support, Best Practices For HTML Web Pages.
Introduction to MEAN Stack
MEAN Stack is one of the most popular Technology Stack. It is used to develop a Full Stack Web
Application. Although it is a Stack of different technologies, all of these are based on JavaScript language.
MEAN Stands for:
1. M – MongoDB
2. E – Express
3. A – Angular
4. N – Node.js
This stack leads to faster development as well as the deployment of the Web Application. Angular is
Frontend Development Framework whereas Node.js, Express, and MongoDB are used for Backend
development as shown in the below figure.

Flow of Data in MEAN Stack Application: Here, each module communicates with the others in order to
have a flow of the data from Server/Backend to Client/Frontend.

Introduction to Web:
The web, short for World Wide Web, is a system of interconnected documents & resources that are accessed
over the internet. It is a vast network of information that has revolutionized the way we share and access
information. The web is based on a client- server architecture, where a user’s web browser acts as the client &
communicates with a server over the internet. When a user types in a web address, also known as a Uniform
Resources Locator – ( URL ), browser sends a request to the sever, which then sends back the requested web
page.
1. Basic Components:
 Web Pages: These are documents written in HTML (Hypertext Markup Language) that can
include text, images, multimedia elements, and hyperlinks.
 Web Browsers: Applications such as Chrome, Firefox, Safari, and Edge that allow users to
access and navigate the Web.
 Web Servers: Computers that store and serve web content to users upon request.
2. Protocols:
 HTTP/HTTPS (Hypertext Transfer Protocol/Secure): These are protocols used for
transmitting data over the Web. HTTPS adds a layer of security by encrypting the communication
between the user's browser and the web server.
3. URL (Uniform Resource Locator):
 A URL is a web address that specifies the location of a resource on the Web. It typically consists
of a protocol (e.g., http:// or https://), a domain name (e.g., www.example.com), and a path to the
specific resource.
4. Hyperlinks:
 Hyperlinks, or simply links, are elements in a web page that allow users to navigate to other pages or
resources by clicking on them. They are a fundamental aspect of the interconnected nature of the Web.
5. MIME:
The acronym MIME stands for "Multipurpose Internet Mail Extensions." MIME is a standard that
extends the format of email messages to support text in character sets other than ASCII, as well as
attachments of audio, video, images, and application programs. MIME is essential for enabling the
exchange of rich multimedia content through email and other communication protocols.
Overview of Web Technologies :-
Web technologies refer to the software and tools used to create and maintain websites and web applications.
These technologies include programming languages, web development frameworks, content management
systems, and web servers.
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.
 HTML: Hyper Text Markup Language (HTML) is the standard markup language used to create
web pages.
 CSS: Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of
a document written in HTML.
 JavaScript: A high-level programming language used to create interactive and dynamic web
pages.
 Angular: A TypeScript-based open-source web application framework used for building
dynamic web applications.
 React: A JavaScript library used for building user interfaces.
 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 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.
MongoDB: A NoSQL database program used for storing and retrieving data in a document-
oriented database format.
Node.js: Node.js is an open-source and cross-platform runtime environment for executing
JavaScript code outside a browser.
PHP: Hypertext Preprocessor (PHP) is a server-side scripting language used for web
development to create dynamic web pages. Python: A high-level programming language used for
web development to create scalable web applications.
Python: A high-level programming language used for web development to create scalable web
applications.
Ruby on Rails: A web development framework that uses the Ruby programming language to
create web applications
HTML – Introduction:
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
HTML – Need:
 HTML is needed to fill online forms in web applications
 Also, with the help of HTML, we can watch online videos on Youtube.
 While browsing the Web, when you click on a hyperlink, you navigate to another web page. This is
possible with the help of HTML.
 Do you know, how these web pages with different content types such as text, hyperlinks, forms, images,
and videos are created in web applications?
 You can achieve all these requirements using HTML.
 As web pages are read by computer programs like search engines and assistive tools, a web developer
needs to ensure machine readability.
 HTML allows us to provide correct semantics (meaning) to web page content which in-turn enhances
machine readability of web pages.
What is HTML?
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 below picture.
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:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</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.
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.
Used to specify page description, author of the document, last modified, etc.
<meta>
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.
Ex:
<!DOCTYPE html>
<html>
<head>
<title> Homepage </title>
</head>
<body> Hello World! </body>

</html>
Output:

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:
<!DOCTYPE html>
<html>
<head>
<title>Homepage </title>
</head>
<body>
Hello World!
</body>
</html>
Code 2:
<!DOCTYPE html>
<html>
<head>
<title>Homepage </title>
</head>
<body>
Hello World!
</boDy>
</html>
You can observe that both codes generate the same output as side:
Best Practice:
It is recommended to use lowercase for HTML tags as a best practice.
Platform-independency
HTML Language is platform-independent. That means the same HTML code can run on different operating
systems as shown below.
Sample.html
<!DOCTYPE html>
<html>
<head>
<title>sample page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Output:
On executing the above-mentioned code we can observe the same output in different platforms as shown above:
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:
<!DOCTYPE html>
<html>
<head>
<title> Sample page </title>
</head>
<body>
Hello world!
</body>
</html>
In the above code, <!DOCTYPE html> signifies that, the code is written in HTML5.

Best Practice:
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.

Best Practice:
It is a good practice to use the closing tag for the respective start tag without fail.
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:

We will learn all these elements later in this course.

Ex:
<!DOCTYPE html>
<html>
<body>
<p> I am first paragraph.</p>
<p> I am second paragraph.</p>
<p>Paragraph is block element.</p>
<span>I am first span.</span>
<span>I am second span.</span>
<span>Span is inline element.</span>
</body>
</html>
Output:

HTML Elements – Attributes

HTML elements can contain attributes that can be considered as an additional feature to set various properties
and they are optional.
Some of the attributes can be used with any of the HTML elements and there can be referred to as ‘global
attributes’. Also, some attributes can be used only with particular elements. Following are some features of
attributes:
 All the attributes can contain properties like name and value which can be used by a developer to assign
respective details for that HTML elements.
 Attributes are to be set only in the start tag of a container HTML element.
 Attributes are case-insensitive, but it is recommended to use lowercase as a best practice.
 The best practice is always to quote attribute value even though we will not get any execution errors if
they are not provided in quotes.
Example:
The lang attribute specifies the language of the content of the HTML page.

Best Practices:
 Always quote attribute value since it will not perform as expected if the attribute value contains any
special characters.
 It is recommended to use double-quotes for the values of the attributes.
 Use lowercase letters for attribute names for consistency.
 There should not be duplication for the same attribute in an element.
Comment
As a developer, you may want to document your code, so that you can easily refer to it in the future.
For this, comments are used.

Comments are ignored by the browser.

Best Practices:
Use proper comment lines for documentation on the HTML page when the application is in progress and delete
them from the final code to reduce the page size and increase the page readability.
Ex:
<!DOCTYPE html>
<html>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

</body>
</html>
Output:
Metadata Element
Suppose you want to search tutorials for HTML5 on the web.
In this scenario when you type the search string as "MDN" in any search engine and hit the Enter key, then the
search engine generates a list of web pages
Note that there is a description associated with each website which helps the user to understand the summary of
the web page even without opening it.
Let us see how this is possible.
Metadata Element-2
The head part of the HTML web page contains the additional information otherwise called meta information for
the search engine which will not come as a part of the web page and are provided as <meta> tags.
There is an attribute named 'description' that summarizes the contents of your page for the benefit of users and
search engines to get to know the content of the web page even without opening it.
Syntax of <meta> tag:

The metadata element is defined within the head element.

Let us learn the attributes of the metadata element.

The below table discusses some of the attributes and their values related to the <meta> tag.
Attribute Value Description
application-name
author
name description Specifies name for the metadata
generator
keywords
content-type
http-equiv Provides an HTTP reader for information/value of the content attribute
default-style
Attribute Value Description
refresh
content text Gives the value associated with http-equiv or name attribute
charset character_set Specifies character coding for an HTML document
For example,
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<meta name="description"
content="This is a test web page"/>
<meta charset="utf-8">
</head>
<body>
<p>Kindly check head section for
meta tags</p>
</body>
</html>
Output:

Best Practices:
 The title element can also be considered as part of the metadata.
 Any web page should have only one title tag per page.
 The title should be unique for each web page in the application.
 Start the title tag with the main keyword.
 Specify the character encoding of the document.
 Use UTF-8 encoding while designing the web page. It is not recommended to use ASCII incompatible
encodings to avoid security risks because browsers that do not support them may interpret insecure
content.
 Avoid duplicate descriptions inside metadata and try to include the targeted keywords in the description,
as search engines index your page based on the description.
 Use the below http-equiv value to set the HTTP header with content-security-policy by specifying its
values with relevant details. This is to update the browser to load the page required resources such as
images, scripts to be loaded from the trusted origin only. Therefore helps in preventing security attacks
such as cross-site scripting.
Example:
Below line of code in the web app update browser to load page required resources from 2 origins by specifying
values to default-src as:

<meta http-equiv="content-security-policy" content="default-src 'self' http://xyz.com">

self indicates from the current domain to which page belongs to.
Explicitly mentioning the http://xyz.com value in the above example indicates that this domain is the trusted
origin to load the resources.
 Use the below meta code line to specify the page content display to be adjusted to the device width
being used to view the content with the initial zoom level as 100%. This is useful to display content on
different kinds of devices such as desktop, laptop, and mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

You can change the zoom level depending on your requirement by specifying values to the initial-scale attribute
as any positive value from 0.0 to 10.0. For example you can consider 0.1 = 10% zoom and 1.0 = 100%
respectively.
Ex:
<!DOCTYPE html>
<html lang="en-US">

<head>
<title>Meta tag example</title>


<meta charset="utf-8">
<meta name="author" content="Susan">
<meta name="description" content="This is a sample demo to understand HTML.">

<meta http-equiv="content-security-policy" content="default-src 'self' http://xyz.com" >

<meta http-equiv="default-style" content="/style.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p> Sample demo to explain meta tag with
attributes </p>
</body>

</html>
Output:

Sectioning Elements
Web crawlers like Google, Bing, etc. are widely used for searching websites. They lookup each web page code
and render the web page as per the HTML tags used and the styling associated.
Any regular user who is accessing any website will notice the below observations in most of the web pages of
the website:
1. Right at the beginning of a web page, a header containing the website name is clearly displayed in the
form of a logo or text. This helps the user to know which website they are currently referring to.
2. The links to navigate to other web pages of the website are displayed in the header. This makes
a website user to figure out easily how to access other web pages of that website.
3. Details like copyright, about us, etc. are usually displayed at the bottom end of the screen, as part of the
footer, as these details hold lesser importance, as compared to the actual data that they intend to read in
the page.
The below figure illustrates some of the
widely used sectioning elements in
HTML5.

<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>
3. <p>Section 1</p>
4. </section>
5. <section>
6. <p>Section2</p>
7. </section>
8. </main>
<article>:
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>>

Ex:
<!DOCTYPE html>
<html>
<body>
<header>
<nav> Login | SignUp </nav>
<h1> Brand Name </h1>
</header>

<article>
<section>
<p>Paragraph 1</p>
<p>Paragraph 2 is thematically related to Paragraph 1</p>
</section>
</article>
<aside>
Side info
</aside>
<footer>
<nav> About Us | Contact Us </nav>
</footer>
</body>
</html>
Output:

Grouping Elements
We need to group various portions of a web page for various reasons like applying some common styling. For
example, various categories needs to be grouped for applying a common style of color, arrange text, font style,
font size etc

Grouping elements in HTML5 can be categorized majorly as below:

Paragraph Element:
The paragraph element is generally used for denoting a paragraph. Any textual content can be
mentioned inside this element.
It is defined using <p>…</p> tag.
Let us understand this with an example.
Copy the below code into your Visual Studio Code workspace.
demo.html
<!DOCTYPE html>
<html>
<body>
<p>This is a Paragraph</p>
</body>
</html>
To execute this code:
 Right-click on the file demo.html
 Select the option "Open with Live Server"
 Right-click on the browser, and select the inspect option.
In the pop-up window, observe the 'Elements' tab as below:

We can observe that the paragraph element is a block-level element and hence adds a new line automatically
when a paragraph ends. This ensures visual spacing between consecutive paragraphs of text.
Ex:
<!DOCTYPE html>
<html>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>
Output:

Division and Span Elements

Division
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
Copy the below code into your Visual Studio Code workspace.
demo.html
<!DOCTYPE html>
<html>
<body>
<div>
<p> This is first paragraph </p>
<p> This is second paragraph </p>
<p> This is third paragraph </p>
</div>
</body>
</html>
To execute this code:
 Right-click on the file demo.html
 Select the option "Open with Live Server"
 Right-click on the browser, and select the inspect option.
In the pop-up window, observe the 'Elements' tab as below:

We can observe that the division element is a block-level element and hence a new line is automatically added
after the division ends.
Span
Similar to the division element, the span element is also used to group various other HTML tags to apply some
common styles.
It is defined by using <span> ...</span> tag.
The span element is by default inline in nature, and hence no new line is added after the span ends. This tag is
preferred only when we cannot use any other semantic tags.
Copy the below code into your Visual Studio Code workspace.
demo.html
<!DOCTYPE html>
<html>
<body>
<div>
<span>first section of paragraph</span>
<span>second section of paragraph</span>
</div>
</body>
</html>

To execute this code:

 Right-click on the file demo.html
 Select the option "Open with Live Server"
 Right-click on the browser, and select the inspect option.
In the pop-up window, observe the 'Elements' tab as below:

We can observe that no newline is added after the span ends since the span element is an inline-level element by
default.
Ex:
<!DOCTYPE html>
<html>

<body>

<div>

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<span>first portion </span><span> second portion </span>
</div>
</body>
</html>
Output: as given aside
List Element
With HTML Lists, we can group related items and display the items one after the other. This makes it easy to
locate a particular item on the web page. In short, HTML Lists help in adding structure and order to related
items on a web page, thereby ensuring better readability of related content.
HTML lists come in three basic flavors and each one has a specific implementation.

HTML lists come in 3 basic flavors:

1. Unordered list
2. Ordered list
3. Description list
Each one has a specific purpose and meaning.
Let us start with the unordered list.
An unordered list is used to create a list of related items, in no specific order, like in the Terms and Conditions
page where there is more focus on ensuring the readability of content by listing out points but not much concern
about the specific order of points.
 An unordered list starts with the <ul> tag.
 Each item within the list technically referred to as 'list-item' enclosed within the <li> tag.
For example, to generate an unordered list as seen below :

The following snippet can be used.

<h1>Courses offered:</h1>
<ul>
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
</ul>
The types of bullet points can be customized in an unordered list by using the list-style-type property provided
by CSS.
For example, if we want our list to be displayed as below:

The corresponding code to achieve this requirement is:

<h1>Courses offered:</h1>
<ul style="list-style-type: square;">
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
</ul>
The possible values for the list-style-type property are :

By default, the value 'disc' will be assigned to the property.

Let us learn how to nest the unordered list while designing a web page.
Note: There is a type attribute to define the types of bullet points, which is not recommended to be used as
per the latest HTML version.
In HTML, it is also possible to nest lists into different levels.
For example, if you want to create a nested list as shown below:
Corresponding HTML code to achieve this requirement is:

<h1>Courses Offered:</h1>
<ul>
<li>Markup
<ul>
<li> Basics of HTML
<ul>
<li> First level course on HTML </li>
</ul>
</li>
<li> Adaptive HTML </li>
</ul>
</li>
<li>Styling
<ul>
<li> CSS3
<ul>
<li> Latest version of CSS </li>
</ul>
</li>
</ul>
</li>
</ul>
If you observe the above-given code snippet, based on the enclosure of the inner <ul>... </ul> elements on
various lines, the default bullet styling of unordered list element has been populated on to the web page.
Ex:
<!DOCTYPE html>
<html>
<body>
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</body>
</html>
Output

Ordered List
An ordered list is used when the order of items is important and we want to create a list of related items, in a
specific order.
 An ordered list starts with the <ol> tag.
 Each item within the list technically referred to as 'list-item' enclosed within the <li> tag.
For example, to generate an unordered list as seen below :
The below-given code snippet can be used to achieve this requirement.
<h1>Courses offered:</h1>
<ol>
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
</ol>
Let us learn how to customize the ordered list appearance.
Best Practice:
It is a good practice to avoid more than one list item per line.
The types of bullet points can be customized in an ordered list by using the
list-style-type property provided by CSS.
For example, if we want our list to be displayed as shown:

The corresponding code to achieve this requirement is:

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

By default, the 'decimal' value will be set to the CSS property. We can also have 'none' value for the list-style-
type property if we do not need any bullets to be present in the list.
Let us have a glance over some of the attributes which help us to customize the ordered list while designing a
web page.
Some of the attributes which can be used with this element are:
Name Description
start Specifies the initial value of the list.
reversed Specifies the pattern to be rendered in reversed order.
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.

For example:
Consider the following code snippet:
<h1>Courses offered:</h1>
<ol type="a" start="d" reversed>
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
</ol>
The above code will generate lists of course offered on the web page as shown above:
Let us learn how to nest the ordered list while designing a web page.
Best Practice:
It is recommended to use list-style-type CSS property instead of the <ol> ... </ol> type attribute unless the
pattern of numbering ordering of the list is considered to be very important.
In HTML, it is also possible to nest lists into different levels.
Ordered lists can be nested with ordered lists or unordered lists.
For example, if you want to create a nested list as shown below:

The corresponding code to achieve this requirement is:

<h1>Courses Offered:</h1>
<ol>
<li>Markup
<ol>
<li> Basics of HTML
<ul>
<li> First level course on HTML </li>
</ul>
</li>
<li> Adaptive HTML </li>
</ol>
</li>
<li>Styling
<ol>
<li> CSS3
<ul>
<li> Latest version of CSS </li>
</ul>
</li>
</ol>
</li>
</ol>
If you observe the above-given code snippet, based on the enclosure of the inner <ol> ... </ol> and <ul>...
</ul> elements on various lines, the customized list has been populated on to the web page.
Ex:
<!DOCTYPE html>
<html>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
<ol start="4">
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ol>
</body>
</html>
Output:
Description List
Description lists are used to contain name-value groups, where names can be a list of terms and values can be
their related descriptions.
The description list otherwise called definition list arranges items in the same way as the meaning associated
with each word is arranged in a dictionary
 Description lists are created with the <dl> tag.
 The term is placed within <dt>.. </dt> tag and description is placed between <dd>...</dd> tag.
Let us see the syntax now:
<dl>
<dt> Description Term 1 </dt>
<dd> Description Definiton 1 </dd>
<dt> Description Term 2 </dt>
<dd> Description Definition 2 </dd>
</dl>
Best Practice:
It is recommended not to use the <dl> tag while designing any dialogues concepts.
Ex:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Definition List</h1>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language: The standard language for creating web pages.</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets: A stylesheet language used for describing the look and formatting of
a document written in HTML.</dd>

<dt>JavaScript</dt>
<dd>A programming language commonly used in web development to add interactive
features.</dd>
</dl>
</body>
</html>
Output:
Link Element
A website necessarily is a collection of related web pages, where each web page is typically created for a
particular purpose.
When developing any website:
 Each web page is necessarily coded in individual HTML files.
 To see a particular web page, the respective HTML file has to be opened up in a browser.
Below are some concerns pertaining to accessing the website developed:
 For a developer who has access to the source code of the individual HTML files, he or she can open the
respective HTML on his browser. But if you are not a developer, you do not have access to the source
code. Then how can you view the individual web pages?
 If you are trying to access the website over a network as a regular user, then also you will not be able to
view the individual web pages unless you know the exact HTML file name and path.
 Moreover, trying to access individual web pages explicitly does not give a feeling that these web pages
necessarily belong to one website or domain.
This is why the concept of hyperlinking documents or web pages have been introduced.
Below are the advantages if hyperlinks are used:
 We can create connections or links between HTML documents/web pages and users can navigate from
one web page to another by clicking on "hyperlinks".
 We would now feel that we have a website which is a collection of interconnected web pages.
Link elements are defined using <a> .. </a> tag as below:

Text / Image can be used as link.

Text / Image that provides such a link is called "hyperlink".
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:
 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>
3. <p>Detail……</p>
4. <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>

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>
Link element has an attribute named 'target' which specifies in which window, the hyperlinked content should
appear.
The target attribute can hold the following values:
The possible value of "target" Description
_blank Opens a web page in a new window or tab
_self Opens a web page in the same window (default)
_parent Opens a web page in the parent frame
_top Opens a web page in the full body of the window
frame-name Opens a web page in a named frame
For example:

1. <a href="https://owasp.org/" target="_blank">Link to OWASP web site</a>

In the above example, the https://owasp.org/ website opens in a new window.
Best Practices:
 It is a best practice to use href and rel attributes for links based on the requirement.
 It is recommended to use the values like noopener and noreferrer for the rel attribute in links to avoid
security threats such as reverse tabnabbing.
For example:
1. <a href="http://example.com" target="_blank" rel="noopener noreferrer">
2. Example site
3. </a>
In the above example:
 rel=”noopener” attribute prevents the new page to be accessed by the window.opener property by
ensuring it executes in a separate process.
 rel=”noreferrer” attribute is similar to noopener along with it prevents passing on the referrer details to
the new page.
Ex:
<html>
<body>
<a href="https://owasp.org/" target="_blank">
Opens OWASP website in new tab
</a>
<br/>
<a href="https://owasp.org/" target="_top">
Opens OWASP website in same tab
</a>
</body>
</html>
Output:

Character Entities
Some characters are reserved in HTML.
For example: If you use the less than (<) or greater than (>) sign in your content, the browser may mix them
with HTML tags.
Also, some characters are unavailable on the keyboard.
For example: ©
Character entities are used to include such character content on a web page.

The table below lists widely used character entities supported in HTML5.
Character Description Entity Name Entity Number
Non-breaking space    
< Less than < <
> Greater than > >
& Ampersand & &
© Copyright © ©
€ Euro € €
£ Pound £ £
® Registered trademark ® ®
₹ Rupee ₹ ₹

Ex:
<!DOCTYPE html>
<html>
<body>
<p>
<body> is start tag of body element.
</p>
<p>
</body> is end tag of body element.
</p>
</body>
</html>
Output:
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:
1. <div>
2. <p contenteditable="true">This is editable</p>
3. <p dir="rtl">The direction of the text is from right to left</p>
4. <p title="mydemo">Hover your mouse here to see the title</p>
5. <p id="id1">ID should be unoque for each element</p>
6. </div>
In the above example you can observe that:
 Line number 2 allows the user to edit the text which has been enclosed with the <p> element.
 Line number 3 modifies the text direction of the <p> element from right to left orientation.
 While hovering the mouse on line number 4, the title message will be displayed.
 The id attribute has been used to set a unique id for <p> element in line number 5.
Ex:
<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:

Creating 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
Element Description
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>
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:

Let us have a glance over how to create a simple table using HTML now.

Consider the below code snippet:

1. <html>
2. <table>
3. <thead>
4. <th>Back-end JS </th>
5. <th>Front-end JS </th>
6. </thead>
7. <tbody>
8. <tr>
9. <td>Node</td>
10. <td>React</td>
11. </tr>
12. <tr>
13. <td>Express</td>
14. <td>Angular</td>
15. </tr>
16. </tbody>
17. </table>
18. </html>
The output for the above code snippet will be as shown below:

In the above-mentioned code we can observe that:

 The <table> element encloses all the other table elements in it.
 The optional <thead> and <tbody> elements helps us to logically divide the table content.
 The <th> element is used to define the column heading.
 The <tr> element creates a new row.
 The <td> element creates a new table column.
Suppose the developer has to design an HTML table as shown below:

Note that, Node and Express are logically related columns, and the same styling should be applied for both.
The <colgroup> element in HTML helps us to group the related columns especially to provide some
common CSS property.
The HTML code snippet to achieve the above requirement is:
1. <table>
2. <caption>MERN stack developer program</caption>
3. <colgroup>
4. <col>
5. <col style="background-color:lightblue;">
6. <col span="2" style="background-color: lightgreen;">
7. <col style="background-color: lightpink;">
8. </colgroup>
9. <tr>
10. <th>Technology</th>
11. <td >MongoDB</td>
12. <td >Node</td>
13. <td >Express</td>
14. <td>React</td>
15. </tr>
16. <tr>
17. <th >Description</th>
18. <td>The database</td>
19. <td>Node is the base for server side scripting</td>
20. <td>JS framework for web server development</td>
21. <td>JS library to design the front end</td>
22. </tr>
23. </table>
In the above-mentioned code we can observe that:
 The <table> element encloses all the other table elements in it.
 Line numbers 3-7 code which has been enclosed between the <colgroup> element helps us to logically
group the related column data and also customize the default look and feel of the respective column
through CSS properties.
 The <colgroup> element has an attribute "span" which carries the information regarding how many
columns are to be grouped together. The default value of this span attribute is 1.
 The <tr> element helps to create a new table row.
 The <td> element helps to create a new table column.
Let us learn some of the best practices which can be used while designing the HTML table in our application.
Best Practices:
 It is important that the table should be accessible to visually impaired users and hence it is recommended
to provide a table description using the <caption> element.
 It is a best practice to associate table headers <th> elements with their <td> cells.
 A table can be styled using appropriate CSS properties like height, and width for customizing the default
look and feel of this element.
Example:
<!DOCTYPE html>
<html>
<body>
<table>
<caption>Team Details</caption>
<thead>
<tr>
<th>Employee Name</th>
<th>Emp ID</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>102342</td>
<td>Banglore</td>
</tr>
<tr>
<td>Joseph</td>
<td>890234</td>
<td>Pune</td>
</tr>
<tr>
<td>Sam</td>
<td>102342</td>
<td>Mysore</td>
</tr>
</tbody>

</table>
</body>
</html>
Output:
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 columns.

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:

Ex:
<!DOCTYPE html>
<html>
<body>
<table border="2">
<caption>Training Status of the Team</caption>
<tr>
<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:
HTML <table> border Attribute
To create table border in HTML, the border attribute was used. But the introduction of HTML5, deprecated
the border tag. Create table border using the CSS property border. Set table border as well as border
for <th> and <td>.

Example
You can try to run the following code to create a border in the table in HTML. We’re using <style> tag here:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Employee Details</h1>
<table>
<tr>
<th>Name</th>
<td>Amit</td>
<td>Sachin</td>
</tr>
<tr>
<th>Age</th>
<td>27</td>
<td>34</td>
</tr>
</table>
</body>
</html>
Output
Cellpadding and Cellspacing Attributes
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:
Ex:

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:
Ex:

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:
Ex:

Ex:Program
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table {
border-spacing: 30px;
}
th, td {
padding: 15px;
</style>
</head>
<body>
<h2>Cellpadding and Cellspacing </h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output

Creating Form Elements

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

The form input element is used to collect details from the user.

The table below lists the various types of input elements.

The possible value of "type" Description
text Creates textbox
password Creates textbox that accepts the only password
checkbox Creates checkbox
radio Creates a radio button
button Creates button
submit Creates a button that submits values of all form elements to the server
reset Creates a button that resets values of all form elements to their default value
image Creates a graphical version of a button
The possible value of "type" Description
file Creates control to upload the file to the server
hidden Creates a hidden text field
email Creates textbox that accepts only valid email id
number Creates spinbox that accepts only whole numbers
range Creates a range slider
search Creates a search bar
URL Creates textbox that accepts only valid URL
color Creates color picker
date Creates date picker to select date
month Creates date picker to select a month
week Creates date picker to select week
Basic Input Elements
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.

Name: <input type="text" value="">

Input type - password:

An input field can be used to enter a password.

Password: <input type="password">

Input type - email:

 An input field that accepts email addresses.
 It has in-built validation for an email.

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.

Age: <input type="number">

Input type - checkbox:

 Defines a checkbox.
 The checked attribute checks that particular checkbox value.
 Also, multiple checkboxes can be checked at a time.
Hobbies: <input type="checkbox" checked> Reading
<input type="checkbox" checked> Singing
<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.
Gender: <input type="radio" name="gender" checked value="Male"> Male
<input type="radio" name="gender" value="Female"> Female

Input type - file:

Creates a control to upload a file to the server.

Select a file: <input type="file">

<button> element:
 Defines a clickable button that can be used to submit the form.
 The button can be of 3 types:
o submit (default with <button> tag)
o reset (to reset the form)
o button (just a clickable button)

<button type="submit">Raise your query</button>

Input type - URL:

Defines a text input that can capture any input value starting with http:// or https://. If there is a pattern
mismatch, it shows an error on form submission.

Enter the website URL: <input type="url">

<textarea> element:
 Defines a multi-line text field.
 It is not possible to set a default text using the value attribute. Hence, default text can be placed into
<textarea>…</textarea> tag.

Write your comments: <textarea rows="4" cols="10" >Default value</textarea>

Input type: Hidden:You may want to submit supplementary data (such as users' language of user input) to the
server, without any user interaction.
This can be done using a hidden element.

<input type="hidden" name="Language" value="English"/>

Note: Output may vary for some input fields according to the browser
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.

Ex:
<!DOCTYPE html>
<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>

Output:
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.
Choose a color: <input type="color">

Input type - date:

Creates a date-picker which is used to collect dates.
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
Choose a date and time: <input type="datetime-local"/>

Input type – week:

Defines a date picker, where the user can pick a week.

Select a week: <input type="week"/>

Input type – month:
Defines a date picker, where the user can pick a month.

Select a month: <input type="month"/>

Note: Output may vary for some input elements according to the browser
Ex:
<!DOCTYPE html>
<html>
<body>
<form>
<h4>Color and Date Pickers -Tryout</h4>

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

Select your DOB with time: <input type="datetime-local">
</form>
</body>
</html>
Output:

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>
<option value="+91">+91</option>
<option value="+244">+244</option>
<option value="+61">+61</option>
<option value="+973">+973</option>
</select>
<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.
Country: <input list="countries">
<datalist id="countries">
<option value="India">
<option value="France">
<option value="Singapore">
<option value="Thailand">
<option value="United Arab Emirates">
<option value="United States of America">
</datalist>

Note: <select> allows the user to select from some pre-defined options.
Whereas, for the <datalist> element, even though it is suggested to select from the given options, the user can
actually enter the data to the input field as any other input field.
Also, Output may vary for some input elements according to the browser
Ex:
<!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>
<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:
Input Elements - Attributes
The following are some of the attributes which can be used with HTML input elements.
 Placeholder  Max  Multiple
 Pattern  Step  Form-override
 Min  Required
Let us see each of them in detail.
Placeholder:
The placeholder attribute specifies a value that appears in the textbox as below:

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.
If the user input value does not match with a specified pattern, an error message appears.

Username: <input type="text" pattern="[A-Za-z]"/>

Min, Max, and Step:

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.

Job experience: <input type="number" min="2" max="10" step="1"/>

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.
Username: <input type="text" required/>
Username: <input type="password" required/>
Multiple:
The multiple attribute value allows the user to enter/select/upload more than one value.

<input type="file" multiple/>

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.
<form method="GET" action="">
<input type="submit" formmethod="POST">
</form>

Need of novalidate attribute:

Suppose we are developing a form having multiple input fields as shown below:

To test the form's functionality we may want to temporarily by-pass in-built validations done by form input type
elements. This can be done by novalidate attribute.
For example, if we want to bypass an email validation, you can use the below code:
<form novalidate action='xyz.html'>
<input type="email"/>
<input type ="submit">
</form>
HTML has autocomplete and autofocus attributes for the below-mentioned functionalities.
autocomplete:
It allows the browser to predict user input value.
When the user starts typing, the browser displays possible options, based on earlier typed values.
Possible values of autocomplete are on and off where the default value is "on"
autofocus:
Specifies that an element should automatically get focus when a web page loads.
Example:
Email:<input type="email" autocomplete="on"/> <br/>
Contact: <input type="number" autofocus/><br/>
<input type="submit"/>
Hidden:
In a web page, when an element is not directly relevant to the page's current state, it's a good choice to hide it.
The hidden attribute is used for this requirement.
Possible values are " " (Empty string) or hidden.
For example, the below-given input field for the language will not be shown to the end-user.
<input name="language" value="English" hidden >
Ex:
<!DOCTYPE html>
<html>
<body>
<form method="GET" >
<h4>Register Here to Get Job Offer Notifications</h4>
Username:<input type="text" pattern="[A-Za-z]" autocomplete/> <br/><br/>
Password:<input type="password" required/> <br/><br/>
Email ID:<input type="email" autofocus/> <br/><br/>
Contact:<input type="number" placeholder="Enter your contact number here"/> <br/><br/>
Job Experience: <input type="number" min="2" max="10" step="0.5"><br/><br/>
Certificates:<input type="file" multiple /><br/><br/>
<input name="language" type="text" value="English" hidden>
<input type="submit" formmethod="POST"><br/>
</form>
</body>
</html>

Output:
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.

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:
<p>HTML is building block of Internet</p>
<p>HTML is building block of <del>Internet</del> <ins>WWW</ins></p>

Ex:
<!DOCTYPE html>
<html>
<body>
<p>HTML is a basic building block of <del>Internet</del> <ins>WWW</ins>
</p>
</body>
</html>
Output:

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.
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:
Let us see each element in detail.
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.
<img src="Summit.png" alt="image unavailable"/>

We can also provide a caption for the embedded images.

HTML provides a semantic element <figure> along with <figcaption> element which help us to provide caption
for our images.
For example, consider the following code.
<figure>
<img src="tropicalSea.jpg"
alt="An image of tropical sea"
width="400"
height="341">
<figcaption>A colorful tropical sea view</figcaption>
</figure>
The above code snippet generates an output as side:

Note: The <figure> element in HTML is commonly used along with a diagram, illustration, or image to
represent them as self-contained content.
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.

<audio src="audio.mp3" controls="controls"></audio>

Content between <audio> and </audio> tag will be shown by browsers who do not support audio element.

Some of the attributes which are supported by the audio element are as follows:
Attribute Value Description
loop Boolean- any value sets it to true Loops audio indefinitely
autoplay Boolean- any value sets it to true Plays audio indefinitely
none-preloading
preload metadata- audio metadata is downloaded Specifies whether audio should be preloaded or not
auto- entire audio file is downloaded
muted Boolean- any value sets it to true Mutes audio
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.

<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.

Some of the attributes which are supported by video element are as follows:
Attribute Value Description
loop Boolean- any value sets it to true Loops audio indefinitely
autoplay Boolean- any value sets it to true Plays audio indefinitely
none-preloading
metadata- video metadata is
preload Specifies whether the video should be preloaded or not
downloaded
auto- entire audio file is downloaded
height pixel Specifies the height of the video player
width pixel Specifies the width of the video player
Displays image until the first frame of the video is
poster URL of an image file
downloaded
muted Boolean- any value sets it to true Mutes audio
Source Element:
All browsers do not support all audio/video formats. Therefore, the audio/video element allows you to list
multiple sources with the <source> element. The <source> element has an attribute 'type' which specifies the
type of the file.
The browser iterates through all sources one by one until it finds one which it can play. It should be noted that
while listing the audio/video formats, it should be in the order from most desirable to least desirable to avoid the
number of unnecessary iterations.
Also, it is suggested to use the <source> element within the audio/video element instead of the src attribute.
<audio>
<source src="myaudio.ogg" type="audio/ogg">
<source src="myaudio.mp3" type="audio/mp3">
</audio>
Ex:
<!DOCTYPE html>
<html>
<body>
<h4>Embedding image, audio and video</h4>

Sea View Image: <br/>
<img src="tropicalSea.jpg" alt="Tropical Sea Image"
width="350" height="250"> <br> <br>

Listen to some music: <br/>
<audio src="music.mp3" controls ="controls"></audio>
<br/> <br>
Sea View Video: <br/>

<video src="seaView.mp4" controls="controls"
width="350" height="250"></video>
</body>
</html>
Output:

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.

The below example demonstrates including a web page myPage.html on clicking on the hyperlink.

Ex:
<!DOCTYPE html>
<html>
<body>
<p>This demo loads the target of hyperlink into the
same web page using iframe</p>
<a href="https://owasp.org/" target="myFrame">
Click here to load webpage content into iframe.
</a></br>
<iframe name="myFrame" width="600"
height="400"></iframe>
</body>
</html>
Output
Why HTML Security?
Let us now understand why we need to take care of vulnerabilities in HTML5.
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.
What is HTML Security?
As web developers, we need to take care of writing preventive measures for all possible vulnerabilities in web
pages. As we use HTML for designing web pages, we should be aware of all possible vulnerabilities in this
language. Let us now see what are the security risks possible in HTML.
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.
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
Let us now understand each vulnerability and its mitigation with examples.
HTML Injection
Sometimes users will observe some unexpected data getting rendered on a web page. This might be due to a
lack of proper validation for input and output on that page. So, a web developer should always check if input
and output are properly validated before getting rendered on a page as this can lead to HTML injection attacks.
Let us now understand what is this attack and its consequences.
What is 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.
Example:
Following is the malicious HTML code an attacker injects through a website URL:

http://example.com/home.html?username=<img%20src='image1'%20onerror=alert('error')>
Here an attacker is sending an image assigned to the username parameter embedded in a URL.
Following is the vulnerable code which doesn't validate or sanitize the data:
var position = location.href.indexOf("username=");
var user = location.href.substring(position+5);
document.getElementById("div1").innerHTML = "Hello, " + user;
This code is extracting the username position and fetching the value assigned to it. It displays the image injected
by an attacker in a div tag and runs some malicious script through it.
Following is an example of using the document.write() method:
var position = location.href.indexOf("username=");
var user = location.href.substring(position+5);
document.write("<h1> Hello, " + user + "</h1>");
Let us now understand the different types of HTML Injections possible.
Types of HTML Injection
There are two types of HTML Injections:
1. Stored HTML Injection
In this injection, the malicious code injected by an attacker will get stored in the backend and will get executed
whenever a user makes a call to that functionality.
2. Reflected HTML Injection
In this injection, the malicious code will not get code stored in the webserver rather will be executed every time
the user responds to the malicious code.
Injection
How to prevent HTML injection?
HTML Injection will happen if data is not properly validated. So we need to do proper data validation to
prevent this attack. We need to check if data contains any HTML tags and then needs to be removed. This is
done differently in different languages or frameworks.
Below are a few mitigation techniques to prevent this attack:
1. Use safe Javascript methods like innerText in place of innerHTML
2. Code Sanitization: Removing illegal characters from input and output refers to HTML code sanitization.
3. Output Encoding: Converting untrusted data into a safe form where data will be rendered to the user instead
of getting executed. It converts special characters in input and output to entities form so that they cannot be
executed. For example, < will be converted to < etc.,
Let us now check out an example that demonstrates how the two types of injection attacks are arise.
What is Clickjacking?
It is an attack where an attacker uses low iframes with low opaqueness or transparent layers to trick users into
clicking on something somewhat diverse from what they actually see on the page. Thus an attacker is
hijacking clicks which will execute some malicious code and hence the name 'Clickjacking'. It is also known as
UI redressing or iframe overlay.
For example, on a social networking website, a clickjacking attack leads to an unauthorized user spamming the
entire network of your friends by sending some false messages.
How clickjacking is performed?
1. Attackers load a target web page inside a low opacity iframe and on top of that iframe, the attacker's web
page will be rendered with a clickable button or link.
2. When a user clicks on that button or link of the rendered web page, it triggers actions on the invisible page.
The invisible page might be a malicious web page or a legitimate web page, which the user did not intend to
visit.
3. The end user will have no idea that a click has been made on the invisible page and without the user's
knowledge actions are performed on the attacker's web page
So, a web developer should also take care of clicks on the web page so that they should not get redirected to
some malicious pages. Let us now see how to defend against this attack.
HTML5 Attributes & Events Vulnerabilities
HTML5 has few tags, attributes, and events that are prone to different attacks as they can execute Javascript
code. These will be vulnerable to XSS and CSRF attacks.
Below are a few examples of such attacks:
1. Malicious script injection via formaction attribute
<form id="form1" />
<button form="form1" formaction="javascript:alert(1)">Submit</button>
In the above code snippet, the malicious script can be injected in formaction attribute. To prevent this, users
should not be allowed to submit forms with form and formaction attributes or transform them into non-working
attributes.
2. Malicious script injection via an onfocus event

1. <input type="text" autofocus onfocus="alert('hacked')"/>

This will automatically get focus and then executes the script injected. To prevent this, markup elements should
not contain autofocus attributes.
3. Malicious script injection via an onerror event in the video-tag
1. <video src="/apis/authContent/content-
store/Infosys/Infosys_Ltd/Public/lex_auth_012782317766025216289/web-hosted/assets/temp.mp3"
onerror="alert('hacked')"></video>
This code will run the script injected if the given source file is not available. So, we should not use event
handlers in audio and video tags as these are prone to attacks.
Mitigation
To defend against these attacks, we should use HTML Sanitization as a mitigation technique. Now let us
understand what is HTML Sanitization.
HTML Sanitization provides protection from a few vulnerabilities like XSS(Cross-site scripting) by replacing
HTML tags with safe tags or HTML entities.
The tags such as <b>, <i>, <u>, <em>, and <strong>, which are used for changing fonts are often allowed. The
sanitization process removes advanced tags like <script> <embed>,<object> and <link>. This process also
removes potentially dangerous attributes like 'onclick' attribute in order to prevent malicious code injection into
the application.
Let us understand how to sanitize HTML data. The below table lists the entity names for some of the HTML
characters.
Entity names for some HTML characters
Input Character Encoded value
< < or <
> > or &#62
" " or "
' ' or '
& & or &
When a web browser finds these entities, they will not be executed. But instead, they will be converted back to
HTML tags and printed.
Consider the scenario that an attacker injects the below HTML code into a web page.

<a href="#" onmouseover="alert('hacked')">Avengers</a>

On using HTML sanitization, the response will be as below.

<a href="#" onmouseover="alert('hacked')"> Avengers </a>

This code will not be executed instead of stored as plain text in the response.
There are many sanitizer libraries available to do this job. Some of the commonly used libraries are
DOMPurify, XSS, and XSS-filters.
Let us understand the usage of the DOMPurify library.
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.
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 code to retrieve values from
localStorage.
document.getElementById("page").style.backgroundColor = localStorage.getItem("bgcolor");
document.getElementById("page").style.color = localStorage.getItem("textcolor");
document.getElementById("page").style.fontSize = localStorage.getItem("fontsize");
Users can view the storage data in the browser by pressing F12 as shown below:

Similarly, session storage holds the data until the session ends or the browser/tab is closed.
An attacker can inject some malicious code and can steal the data stored here. So we should always ensure that
sensitive information is not stored at the client side.
Let us now understand how to mitigate local storage vulnerability.
Mitigation Techniques:
1. Never store sensitive information on client-side
2. Use cookies with the 'httponly' flag to protect the data stored at the client-side
Cookies
A cookie is a piece of data that is stored in the user's browser. It can store a maximum of 4 KB of data in the
browser. Data in cookies are stored as key-value pairs.
Example of a cookie:
userName=Smith; expires=Mon, 15 Oct 2018 23:00:00 GMT;
key: userName
value: Smith
expires: Mon, 15 Oct 2018 23:00:00 GMT;
path: \
To create a cookie we can use document.cookie property.

document.cookie = cookieValue;
cookieValue is a string in key-value pairs. For example, a cookie to store username and password can be created
as below

document.cookie = "username = Smith;password = secret";

In the above code snippet username and password are keys, Smith and secret are their corresponding values.
Below is the syntax of setting a cookie in the HTTP response header:
Set-Cookie:<name>=<value>[;<Max
Age>=<age>][;expires=<date>][;domain=<domain_name>][;path=<some_path>][;secure][;HttpOnly]

Now let us see a demo on how to inject malicious code to steal local storage data and its mitigation.
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.
<!DOCTYPE html>
<html>
<head>
<title>Cross Browser</title>
</head>
<body>
<form>
<label for="">Username</label>
<input type="text" name="username"> <br/>
<label for="">Password</label>
<input type="password" name="password"><br/>
<input type="submit">
</form>
</body>
</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.
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.
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.

The C# Player's Guide - 5th Edition - 5.0.0
83% (18)
The C# Player's Guide - 5th Edition - 5.0.0
497 pages
Corce
70% (46)
Corce
206 pages
Ap Computer Science Principles Practice Exam and Notes 2021
100% (4)
Ap Computer Science Principles Practice Exam and Notes 2021
108 pages
Nodejs Lab Manual r22
No ratings yet
Nodejs Lab Manual r22
68 pages
The Ethical Slut PDF
55% (69)
The Ethical Slut PDF
298 pages
Hacking The Art of Exploitation 2nd Edition Jon Erickson
100% (19)
Hacking The Art of Exploitation 2nd Edition Jon Erickson
492 pages
Apache Cassandra Administrator Associate - Exam Practice Tests
From Everand
Apache Cassandra Administrator Associate - Exam Practice Tests
Cristian Scutaru
No ratings yet
50 Phone Hacks DR - Brad
58% (19)
50 Phone Hacks DR - Brad
29 pages
2000 Iptv
100% (2)
2000 Iptv
70 pages
C# Cheat Sheet
100% (5)
C# Cheat Sheet
12 pages
BitCoin White Paper
100% (4)
BitCoin White Paper
9 pages
Guitar Center Guitar
No ratings yet
Guitar Center Guitar
1 page
120 Google Tag Manager Resources - Analytics Mania PDF
100% (1)
120 Google Tag Manager Resources - Analytics Mania PDF
11 pages
Car Driving Schhol Project Report
100% (1)
Car Driving Schhol Project Report
41 pages
DMDW Auto Final
No ratings yet
DMDW Auto Final
12 pages
GemFire Architecture
No ratings yet
GemFire Architecture
72 pages
JSP-Servlet Interview Questions You'll Most Likely Be Asked
From Everand
JSP-Servlet Interview Questions You'll Most Likely Be Asked
Vibrant Publishers
No ratings yet
PDF
100% (1)
PDF
568 pages
Javascript - MEAN Stack Unit-2 N
No ratings yet
Javascript - MEAN Stack Unit-2 N
40 pages
Web Interface Designing Technology Imp Questions
No ratings yet
Web Interface Designing Technology Imp Questions
2 pages
Data Validation: Dodda - Venkata Reddy
No ratings yet
Data Validation: Dodda - Venkata Reddy
13 pages
Hello World'. The Program Should XOR Each Character in This String With 0 and Displays The Result
No ratings yet
Hello World'. The Program Should XOR Each Character in This String With 0 and Displays The Result
14 pages
AWP Manual (2019) (E-Next - In)
No ratings yet
AWP Manual (2019) (E-Next - In)
27 pages
WebMethods Repeat
No ratings yet
WebMethods Repeat
4 pages
WD Lab File
No ratings yet
WD Lab File
14 pages
Webmethods Broker
100% (4)
Webmethods Broker
8 pages
Web Technologies MCQs
No ratings yet
Web Technologies MCQs
53 pages
Web Technologies & Compiler Design Lab Manual (JW)
No ratings yet
Web Technologies & Compiler Design Lab Manual (JW)
115 pages
Python Django Internship Report 5 - Pagenumber
No ratings yet
Python Django Internship Report 5 - Pagenumber
52 pages
2 Anatomy of Android Application
No ratings yet
2 Anatomy of Android Application
5 pages
React
No ratings yet
React
75 pages
Java Lect 17
No ratings yet
Java Lect 17
24 pages
PLM White Paper Kalypso 8 CPG 21st Century Product Development Processes PLM Emerges As Key Innovation Driver
No ratings yet
PLM White Paper Kalypso 8 CPG 21st Century Product Development Processes PLM Emerges As Key Innovation Driver
21 pages
PHP Paper PDF
100% (1)
PHP Paper PDF
3 pages
IIBC, Brigade Road, Mobile: 95350 95999 Loadrunner Interview Questions and Answers
No ratings yet
IIBC, Brigade Road, Mobile: 95350 95999 Loadrunner Interview Questions and Answers
5 pages
#1 Hashing
No ratings yet
#1 Hashing
22 pages
JavaScript - Operators
No ratings yet
JavaScript - Operators
13 pages
Chapter15 NaturalLanguage
100% (1)
Chapter15 NaturalLanguage
35 pages
Top 50 JMeter Interview Questions
No ratings yet
Top 50 JMeter Interview Questions
54 pages
Cs2358 Internet Programming Lab Anna University Syllabus
No ratings yet
Cs2358 Internet Programming Lab Anna University Syllabus
12 pages
Hibernate (An ORM Tool)
No ratings yet
Hibernate (An ORM Tool)
69 pages
Ecs Cse 7thsem Unit 1 For VTU, Belgaum
No ratings yet
Ecs Cse 7thsem Unit 1 For VTU, Belgaum
81 pages
Webmethods Provider & Consumer
No ratings yet
Webmethods Provider & Consumer
14 pages
Debugging
No ratings yet
Debugging
7 pages
PHP User Defined Functions
No ratings yet
PHP User Defined Functions
23 pages
Project Source Code
No ratings yet
Project Source Code
70 pages
PHP - 5 - Units Notes - PPT
No ratings yet
PHP - 5 - Units Notes - PPT
561 pages
Project Report Java
No ratings yet
Project Report Java
9 pages
Client Dispatcher Pattern
No ratings yet
Client Dispatcher Pattern
4 pages
Web Technology Lab: Department of Computer Science & Engineering
No ratings yet
Web Technology Lab: Department of Computer Science & Engineering
42 pages
Master Frontend in 60 Days
No ratings yet
Master Frontend in 60 Days
21 pages
Web Quiz Project Report
No ratings yet
Web Quiz Project Report
73 pages
Hive For SQL Users: Cheat Sheet
No ratings yet
Hive For SQL Users: Cheat Sheet
3 pages
Cloud Computing: Resource Management in Cloud
No ratings yet
Cloud Computing: Resource Management in Cloud
33 pages
FYP PPT Submission
No ratings yet
FYP PPT Submission
15 pages
WebDesigning PDF
No ratings yet
WebDesigning PDF
133 pages
Html5 Overview
No ratings yet
Html5 Overview
1 page
Ch-8.2 Multimedia Communication System
No ratings yet
Ch-8.2 Multimedia Communication System
12 pages
Unit 5
No ratings yet
Unit 5
16 pages
PHP Lab Program - II BCOM CA
No ratings yet
PHP Lab Program - II BCOM CA
12 pages
The Working Set Page Replacement Algorithm
0% (1)
The Working Set Page Replacement Algorithm
9 pages
Easyloadrunner - Blogspot.in 2013 06 Pacing Calculation 6
No ratings yet
Easyloadrunner - Blogspot.in 2013 06 Pacing Calculation 6
5 pages
Java - lang.OutOfMemoryError - JAVA HEAP SPACE
No ratings yet
Java - lang.OutOfMemoryError - JAVA HEAP SPACE
7 pages
6 Cse - Cs8651 Ip Unit 2
100% (1)
6 Cse - Cs8651 Ip Unit 2
91 pages
Technologies Every Web Developer Should Be Able To Explain
No ratings yet
Technologies Every Web Developer Should Be Able To Explain
4 pages
Cap 14 - IoT Architecture PDF
No ratings yet
Cap 14 - IoT Architecture PDF
11 pages
Web Content Development Notes BCA VI Semester NEP
No ratings yet
Web Content Development Notes BCA VI Semester NEP
14 pages
Networking Devices
No ratings yet
Networking Devices
22 pages
The Datadog Handbook: A Guide to Monitoring, Metrics, and Tracing
From Everand
The Datadog Handbook: A Guide to Monitoring, Metrics, and Tracing
Robert Johnson
No ratings yet
50 Python Concepts Every Developer Should Know
From Everand
50 Python Concepts Every Developer Should Know
Hernando Abella
No ratings yet
ColdFusion Interview Questions, Answers, and Explanations: ColdFusion Certification Review
From Everand
ColdFusion Interview Questions, Answers, and Explanations: ColdFusion Certification Review
equitypress
No ratings yet
Optimizing Hadoop for MapReduce
From Everand
Optimizing Hadoop for MapReduce
Khaled Tannir
No ratings yet
Coding With JavaScript For Dummies Everything To Know About JavaScript (2020) - 40153
100% (1)
Coding With JavaScript For Dummies Everything To Know About JavaScript (2020) - 40153
247 pages
AI Tools and Prompts
100% (4)
AI Tools and Prompts
94 pages
Simple Sabotage Field Manual
100% (2)
Simple Sabotage Field Manual
16 pages
FORScan 2015-2018 F150s
0% (1)
FORScan 2015-2018 F150s
34 pages
Eat That Frog
100% (10)
Eat That Frog
124 pages
Introductory Algebra
100% (4)
Introductory Algebra
214 pages
Learn Javascript in A DAY!
100% (8)
Learn Javascript in A DAY!
192 pages
Java Programming Cheatsheet
100% (1)
Java Programming Cheatsheet
14 pages
The JavaScript Beginner's Handbook
90% (10)
The JavaScript Beginner's Handbook
76 pages
Computing Command Line Linux
No ratings yet
Computing Command Line Linux
203 pages
Coffee Break Python Workbook Mayer
No ratings yet
Coffee Break Python Workbook Mayer
297 pages
PDF
100% (1)
PDF
192 pages
Hacking in Detail
0% (3)
Hacking in Detail
24 pages
The Linux Command Line
100% (4)
The Linux Command Line
537 pages
Pats Relearn
No ratings yet
Pats Relearn
2 pages
A Comprehensive Analysis of Package Hallucinations by Code Generating LLMs [2406.10279]
100% (1)
A Comprehensive Analysis of Package Hallucinations by Code Generating LLMs [2406.10279]
20 pages
Introduction To Computer Science
100% (6)
Introduction To Computer Science
202 pages
Linux Cheat Sheet
No ratings yet
Linux Cheat Sheet
4 pages
Learn To Code HTML and CSS Develop Style Websites PDF
100% (2)
Learn To Code HTML and CSS Develop Style Websites PDF
595 pages
Analytics PPT For Traffic Source
No ratings yet
Analytics PPT For Traffic Source
67 pages
GC 2024 10 23
No ratings yet
GC 2024 10 23
15 pages
Presentation Concept Css Diagram
No ratings yet
Presentation Concept Css Diagram
31 pages
CSS Glossary - Codecademy
No ratings yet
CSS Glossary - Codecademy
7 pages
Tarun Kumawat: Web Designer & Front End Developer
No ratings yet
Tarun Kumawat: Web Designer & Front End Developer
3 pages
Web Design Sample Proposal Template
100% (1)
Web Design Sample Proposal Template
8 pages
Angular SQ Lite Tutorial
No ratings yet
Angular SQ Lite Tutorial
27 pages
React SPA Checklist Docs
No ratings yet
React SPA Checklist Docs
5 pages
Web Scrap
No ratings yet
Web Scrap
160 pages
Omkar.V.Choudhari Internship Report
No ratings yet
Omkar.V.Choudhari Internship Report
47 pages
Technical SEO Notes
100% (1)
Technical SEO Notes
30 pages
Border Css
No ratings yet
Border Css
5 pages
Fod
No ratings yet
Fod
369 pages
ZT Spring Annotations Cheat Sheet
No ratings yet
ZT Spring Annotations Cheat Sheet
1 page
sahil_resume
No ratings yet
sahil_resume
1 page
Django Powerpoint
No ratings yet
Django Powerpoint
78 pages
HTML Audio Tag: HTML Audio Tag Is Used To Define Sounds Such As Music and Other Audio Clips. Currently There
No ratings yet
HTML Audio Tag: HTML Audio Tag Is Used To Define Sounds Such As Music and Other Audio Clips. Currently There
11 pages
Sample Qbank Programming With JavaScript - 0
No ratings yet
Sample Qbank Programming With JavaScript - 0
6 pages
Secure Coding Embedded
100% (1)
Secure Coding Embedded
32 pages
12886-Shell Via LFI
No ratings yet
12886-Shell Via LFI
3 pages
CUmins 4BT3.9
No ratings yet
CUmins 4BT3.9
461 pages
Install IIS and PHP and Deploy The CWS Sample
No ratings yet
Install IIS and PHP and Deploy The CWS Sample
4 pages
शास्त्रों के अनुसार नियमों का पालन करें, shastro ke anusar niyam ka palan karien
No ratings yet
शास्त्रों के अनुसार नियमों का पालन करें, shastro ke anusar niyam ka palan karien
29 pages
Resume Shivasanthosh 10-09
No ratings yet
Resume Shivasanthosh 10-09
2 pages
12 Bootstrap Order Details and Tracking Examples
No ratings yet
12 Bootstrap Order Details and Tracking Examples
12 pages
XSL Stands For Extensible Style Sheet Language
No ratings yet
XSL Stands For Extensible Style Sheet Language
20 pages
gc_2024_12_09
No ratings yet
gc_2024_12_09
5 pages
XML and Web Services
100% (3)
XML and Web Services
527 pages
CSS - Wikipedia
No ratings yet
CSS - Wikipedia
36 pages