unitii.

md 2023-10-17

HTML Stands for HyperText Markup Language, where

HyperText stands for Link between web pages.

Markup Language means Text between tags that define the structure.
HTML is a markup language that is used to create web pages. It defines how the web page looks and
how to display content with the help of elements. It forms or defines the structure of our Web Page,
thus it forms or defines the structure of our Web Page. We must remember to save your file with .html
extension.

Applications of HTML

HTML is used for various purposes. Let us take a look at them

1. Web Pages Development HTML is famously used for creating web pages on the world wide web.
Every web page contains a set of HTML tags and hyperlinks which are used to connect other pages.
Every page on the internet is written using HTML.

2. Navigating the Internet Navigating on the internet would have been quite a tedious task without
HTML. The anchor tags of HTML allows us to link pages and navigate easily. Imagine our life without
anchor tags, you would literally have to enter URL everytime. Using achor tags, you can also navigate
within a webpage.

3. Embedding Images and Videos HTML allows us to embed images and videos with ease and gives us
features to adjust height, position and even rendering type. You can adjust controls, thumbnails,
timestamps and much more for videos. Earlier this was done using Flash and HTML has made it easier
with the help of <video> tag.

4. Clinet-side storage HTML5 has made client-side storage possible using localStorage and IndexD due
to which we no longer need to reply on Cookies. Both of these tactics have their own set of rules and
characteristics. String-based hash-table storage is provided by localStorage. Its API is straightforward,
with setItem, getItem, and removeItem functions available to developers. On the other hand, IndexDB is
a larger and more capable client-side data store. With the user’s permission, the IndexDB database can
be enlarged.

5. Game development Although you cannot create complex high-end video games with HTML, the
<canvas> element of HTML can be used to make 2D and 3D games using CSS and JavaScript which can
be run on browsers.

6. Data entry support With the usage of new HTML5 standards in all the latest browsers, developers can
simply add the tags for required fields, text, data format, etc. and get the data. HTML5 now has several
new attributes for data-entry and validation purposes.

7. Interacting with Native APIs With the help of HTML, you can interact with your Operating system.
With this feature, you can easily drag files onto a web page to upload, full-screen a video, and much
more.

Features of HTML

1. The learning curve is very easy (easy to modify)

2. Creating effective presentations

1 / 25
unitii.md 2023-10-17

3. Adding Links wherein we can add references

4. Can display documents on platforms like Mac, Windows, Linux, etc
5. Adding videos, graphics, and audios making it more attractive
6. Case insensitive language

HTML Editor

Simple editor: Notepad

Visual Studio Code
Notepad++
Atom
Best editor: Sublime Text

How does HTML work?

The average website includes several different HTML pages.

For instance, a home page, an about page, and a contact page would all have separate HTML files.
HTML documents are files that end with a .html or .htm extension.
A web browser reads the HTML file and renders its content so that internet users can view it.
All HTML pages have a series of HTML elements, consisting of a set of tags and attributes.
HTML elements are the building blocks of a web page.
A tag tells the web browser where an element begins and ends, whereas an attribute describes the
characteristics of an element.

The three main parts of an element are:

1. Opening tag – used to state where an element starts to take effect. The tag is wrapped with opening
and closing angle brackets. For example, use the start tag <p> to create a paragraph.
2. Content – this is the output that other users see.
3. Closing tag – the same as the opening tag, but with a forward slash before the element name. For
example, </p> to end a paragraph.

The combination of these three parts will create an HTML element:

<p>This is how you add a paragraph in HTML.</p>

Another critical part of an HTML element is its attribute, which has two sections – a name and attribute value.
The name identifies the additional information that a user wants to add, while the attribute value gives further
specifications.

For example, a style element adding the color purple and the font-family verdana will look like this:

<p style="color:purple;font-family:verdana">This is how you add a paragraph in HTML.</p>

2 / 25
unitii.md 2023-10-17

Getting Started

HTML Skeleton

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
You can declare all the elements
</body>
</html>

HTML Basic

<!DOCTYPE html>

Instruction to the browser about the HTML version.

<html>

Root element which acts as a container to hold all the code

The browser should know that this is an HTML document
Permitted content: One head tag followed by one body tag

<head>

Everything written here will never be displayed in the browser

It contains general information about the document
Title, definitions of CSS and script sheets
Metadata(information about the document)

<body>

Everything written here will be displayed in the browser

Contains text, images, links that can be achieved through tags
Examples:
<p> This is our first paragraph. </p>
<a To Google</a>
<img src=”photo.jpg”>

HTML Comment

3 / 25
unitii.md 2023-10-17

Comments don’t render on the browser

Helps to understand our code better and makes it readable.
Helps to debug our code

Three ways to comment:

1. Single line
2. Multiple lines
3. Comment tag //Supported by IE

How Does HTML Work?

What are HTML tags?

Essentially, HTML tags are markers which tell the browser how the enclosed text should be displayed.
Here’s a simple example:

<b>This text should be bold.</b>

In this case, <b> and </b> are the HTML tags. They are marking the enclosed text as “bold”—hence, the
“markup” element of HTML. We’ll explain how to actually write tags in the next section.
Once the document is complete, the author saves it as a html file and opens it in their internet browser.
The browser then reads the file and follows the instructions to render the page in a certain way—as
provided by the HTML tags.

So, when you use the “bold” tags, you’re essentially telling the browser to display this sentence in bold:
<b>This text should be bold.</b>

When the browser reads this, it knows to display the sentence as described: This text should be bold. Of
course, the HTML tags themselves are not displayed in the browser (unless you make a mistake writing
them!).

Tag
s
HTML tags are written inside angle brackets, and tend to come in pairs—so, they consist of both an
opening and a closing tag.
For example, the <p> tag is used to indicate a new paragraph. The opening tag is written as follows:
<p>. After this tag, you write your paragraph. To finish, add your closing tag, which is the same as the
opening tag but with a forward slash. In this case, it would be: </p>.

A pair of tags with text enclosed is known as an element. Here are some examples of common HTML
elements and their corresponding tags:

<h1>This is a heading</h1>
<p>This is a paragraph</p>
<b>This is a bold sentence</b>
<i>This is an italic sentence</i>

4 / 25
unitii.md 2023-10-17

Most HTML tags follow this open-and-closing pattern, but there are also some tags which only need an
opening tag to be valid. These are known as singleton tags, and include things like <br> to indicate a line
break, and <img> for including an image. The browser will understand and act on these tags without the need
for a closing tag.

Attributes

Attributes provide extra information about the text contained within the tags.
For example, if you wanted to hyperlink the phrase “my website” in your HTML document, you would
first use the tag pairs <a> and </a> to specify that the text should be linked.
To tell the browser where the text should be linked to—i.e. the link address—you use the href attribute.
Attributes, like the text, are always enclosed within the tags:

HTML: <a href=”https://www.google.com”>My website</a>

Most Used HTML Tags and HTML Elements

Block-Level Elements

A block-level element takes up the entire width of a page. It always starts a new line in the document. For
example, a heading element will be in a separate line from a paragraph element.

Every HTML page uses these three tags:

<html> tag is the root element that defines the whole HTML document.
<head> tag holds meta information such as the page’s title and charset.
<body> tag encloses all the content that appears on the page.

Other popular block-level tags include:

Heading tags – these range from <h1> to <h6>, where heading h1 is largest in size, getting smaller as
they move up to h6.
Paragraph tags – are all enclosed by using the <p> tag.
List tags – have different variations. Use the <ol> tag for an ordered list, and use <ul> for an
unordered list. Then, enclose individual list items using the <li> tag.

Inline Elements

An inline element formats the inner content of block-level elements, such as adding links and
emphasized strings.
Inline elements are most commonly used to format text without breaking the flow of the content.
For example, a <strong> tag would render an element in bold, whereas the <em> tag would show it in
italics.
Hyperlinks are also inline elements that use an <a> tag and an href attribute to indicate the link’s
destination:

<a href="https://example.com/">Click me!</a>

5 / 25
unitii.md 2023-10-17

Creating and saving an HTML document

6 / 25
unitii.md 2023-10-17

You can create your first HTML page by the following steps:

Step 1: Open the Text Editor

In this step, we have to open any text editor such as Notepad or Notepad++ for writing an HTML code. The
following image is the screenshot of the text editor (notepad++) for writing the HTML code.

Step 2: Type the HTML code.

In this step, we have to type the HTML code in the text editor. The HTML code is composed of various tags
and always begins with the opening tag of HTML and complete with the closing tag of HTML.

The following block describes the syntax for creating any HTML page:

<HTML>
<HEAD>
<!-- The Head tag is used to create a title of web page, CSS syntax for a web page, and helps in
</HEAD>
<BODY>
<!-- The Body tag is used to display the content on a web page, which is specified between the b
</BODY>
</HTML> <!-- It is the opening tag of any HTML -->

7 / 25
unitii.md 2023-10-17

In the above syntax, some important tags or elements are used, which are given below:

<HTML>: It is the opening tag of any HTML code.

<HEAD>: The Head tag is used to create a title of the web page, CSS syntax for a web page, and helps in
written a JavaScript code The <head> must be closed before the opening of <body> tag.
<BODY>: The Body tag is used to display the content or text on a web page, which is specified between
the body tag.-->
</HTML>: It is the Closing tag of any HTML code.

Example: The following example creates a simple HTML page as an example through which you can
understand easily:

<HTML> <!-- It is the opening tag of any HTML -->

<HEAD>
<!-- The Head tag is used to create a title of web page, CSS syntax for a web page, and helps in
<title> <!-- This tag is used to display the title of the Web Page --> Simple HTML Page
</title>
<script>
<!-- This tag helps in written the JavaScript Code -->
</script>
<style>
/* This tag is used to create a Cascading Style Sheet for displaying the attractive web page. */
</style>
</HEAD>
<BODY>
<center> <!-- This tag align the text as center --> JavaTpoint
<!-- The Body tag is used to display the content on a web page which is specify between the body
</center>
</BODY>
</HTML>

Step 3: Save the HTML code.

After typing the complete HTML code, we have to save that file in a folder with .html extension. We can
easily save the html file by clicking on the File menu and then click on Save As option. After that, type the file
name with .html extension. The following screenshot describes how we save the above html code in a text
editor.

8 / 25
unitii.md 2023-10-17

Step 4: Run the HTML file.

At the last step, we have to execute or run an HTML file from the location where we saved the file. The file will
run on a default browser. Consider the below output:

Document Layout of HTML Page

9 / 25
unitii.md 2023-10-17

HTML Layout

HTML layout refers to the way in which the content of a website is organized and structured. It makes the
website easy to navigate. For example,

HTML Layout Elements

There are various HTML Layout elements. They are as follows:

<header> tag

A <header> tag defines the document's header. For example,

<header>Programiz</header>

10 /
unitii.md 2023-10-17

<nav> tag

The <nav> tag represents a section of a page that links to other pages or to parts within the page.

<section> tag

The <section> tag in HTML represents a standalone section of content within a document.

<article> tag

The <article> tag in HTML represents a self-contained piece of content that can be reused.

<aside> tag

The <aside> tag is used to represent a portion of a document that is indirectly related to the main content. It
is most commonly used as a sidebar in the document.

<footer> tag

The HTML <footer> tag defines the footer of the HTML document or section.

<details> tag

The <details> tag provides additional details that the user can view or hide on demand. For example,

<details>
<summary>Click me</summary>
<p>Hidden content</p>
</details>

Example1

Let's create a simple layout using CSS.

<body>
<div class="box">
<section class="yellow">
</section>
<aside class="blue">
</aside>

11 /
unitii.md 2023-10-17

</div>
</body>
<style>
.box {
display: flex; height: 200px;
}
.blue {
width:65%;
height: 200px;
background-color: blue;
}
.yellow {
width: 35%;
height: 200px;
background-color: yellow;
}
</style>

In the above example, we have created a <div> with a class box. Inside it, we have a <section> and an
<aside> element with class yellow and blue respectively. We have used CSS to arrange the elements.

Notice, the code,

.box {
display: flex; height: 200px;
}

Here,

display: flex - arranges the box next to each other in a row

height: 200 px - sets the height to 200 pixels

12 /
unitii.md 2023-10-17

Then, we have also used CSS for the <div> with class blue and yellow.

.blue {
width:65%;
height: 200px;
background-color: blue;
}

.yellow {
width: 35%;
height: 200px;
}

Here,

width - sets the width of <div>

height - sets the height of <div>
background-color - sets the background color of <div>

Example2

Let's create a simple layout using CSS.

<body>
<header>
<h2>Title</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Learn HTML</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
<article>
<h1>Home</h1>
<p>This is a home page.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
<style>
* {
box-sizing: border-box;
}
header {
background-color: lightblue;

13 /
unitii.md 2023-10-17

text-align: center;
padding: 2px;
font-size: 25px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #fff;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
footer {
background-color: lightblue;
padding: 10px;
text-align: center;
color: white;
}
section::after {
content: "";
display: table;
clear: both;
}
</style>

14 /
unitii.md 2023-10-17

HTML elements

In HTML, an element is a section of an HTML document.

Some HTML elements represent visible components on a web page, such as text, images, or buttons,
while others denote different sections of the page or provide meta-information about the document.

"In the code itself, HTML elements are created with tags. An HTML tag consists of text between angle brackets
(<>)."

Most HTML elements consist of three parts:

1. The opening tag (or start tag) marks where the element’s content begins (<p> in the example above).
2. The closing tag (or end tag) marks the end of the element’s content (</p> above). The closing tag
is identical to the opening tag with the addition of a forward slash (/) after the first angle bracket.
3. The content is placed between the element’s opening and closing tags (This is paragraph text. above).

15 /
unitii.md 2023-10-17

Empty HTML Elements

While most HTML elements are written with an opening and closing tag, some elements consist of a
single tag and do not have closing tags or content. These are called empty elements.
One empty element you’ll see often is the line break element, which adds a line break between text.
As you can see, simply using <br> creates the line break, no closing tag necessary. Other common
empty elements include <img> (image), <meta>, <link>, and <input>.

HTML Attributes

HTML elements can also contain attributes. Attributes are extra code placed inside the opening tag of an
element that provides additional information about the element. An attribute may be optional or required.

HTML Element Nesting

HTML elements can also be placed inside of other elements — this is called nesting and is key to how
HTML documents are assembled.
Going back to our <p> example, let’s see how an anchor element, which creates a hyperlink, is nested
inside paragraph text. Here, the anchor element is placed between the opening and closing tags of the
paragraph element.

Block-Level Elements

A block-level element takes up the entire width of a page. It always starts a new line in the document. For
example, a heading element will be in a separate line from a paragraph element.

Every HTML page uses these three tags:

16 /
unitii.md 2023-10-17

<html> tag is the root element that defines the whole HTML document.
<head> tag holds meta information such as the page’s title and charset.
<body> tag encloses all the content that appears on the page.

Other popular block-level tags include:

Heading tags – these range from <h1> to <h6>, where heading h1 is largest in size, getting smaller as
they move up to h6.
Paragraph tags – are all enclosed by using the <p> tag.
List tags – have different variations. Use the <ol> tag for an ordered list, and use <ul> for an
unordered list. Then, enclose individual list items using the <li> tag.

Inline Elements

An inline element formats the inner content of block-level elements, such as adding links and
emphasized strings.
Inline elements are most commonly used to format text without breaking the flow of the content.
For example, a <strong> tag would render an element in bold, whereas the <em> tag would show it in
italics.
Hyperlinks are also inline elements that use an <a> tag and an href attribute to indicate the link’s
destination:

<a href="https://example.com/">Click me!</a>

Elements

<a>
Creates a link to another page or to a location in the current page.

<abbr>
Indicates an acronym or abbreviation of a longer word or phrase.

<acronym>
Creates text that will be displayed when hovered over.

<applet>
Used to embed Java applets in HTML documents but is no longer supported.

<audio>
Represents an interface for adding audio content to the page.

<b>
Used to draw attention to a section of text, usually rendered in boldface.

<basefont>
Used to be used to set the font of text. This is now deprecated.

<blink>
Used to make text flash on and off and is now obsolete, deprecated, and non-

17 /
unitii.md 2023-10-17

standard.

<blockquote>
Represents a section of a document which contains a longer quotation, usually
spanning multiple lines.

<br>
Represents a break in text. It is used when text needs to span multiple lines
rather than being in-line, such as in an address.

<button>
Represents a button meant to be clicked by the user.

<canvas>
Creates graphics and animations in the page for JavaScript and WebGL to interact
with

<center>
Displays its contents centered horizontally in the containing element. This is now
deprecated and CSS should be used instead.

<cite>
Represents a citation to a referenced work such as a book, a song, or a painting.

<code>
Represents source code contained in the text.

<datalist>
Displays pre-defined values to a user while typing into an input box.

<dd>
Describes details found inside a <dl> element. It usually comes with at least one
corresponding <dt> term tag.

<del>
Shows text that is to be removed from a document, usually rendered in strike-
through text.

<div>
Represents a generic division of content. It has no semantic meaning, but will
separate its contents from the rest of the document.

<dl>
Displays terms and details, commonly for metadata purposes.

<dt>
Describes a term found inside a <dl> tag. It usually comes with at least one
corresponding <dd> details tag.

<em>
Represents text which is emphasized. Browsers will show the enclosed text in
italics, by default."

<embed>

18 /
unitii.md 2023-10-17

Inserts external content such as a video, image, page, and more.

<font>
Used to be used to set the font characteristics of a text. This is now deprecated.

<form>
Represents an interface to collect and submit user supplied information. This can
include open ended text inputs, radio buttons, calendar information, and more.

<h1> - <h6>
Represents a text heading for a section of content, with <h1> being the highest
level of heading and <h6> being the lowest.

<head>
Represents a collection of metadata related to the current document. It is an
immediate child of the `<html>` element and may include other tags such as
<title>, <link>, <style>, and <script>.

<hr>
Represents a semantic, horizontal line break between text elements.

<html>
Represents the entire HTML document.

<i>
Used to set off HTML text for some reason, as idiomatic, technical, taxonomical
and so on. Typically rendered as italic.

<iframe>
Represents a container used to embed a second web page inside the current one. It
can be used for content from the same domain as the parent, or even from a second
domain.

<img>
Displays an image on the web page.

<input>
Creates an interactive element, usually used within a form to allow user input. It
can be used to make text boxes, color pickers, date pickers, and other UI
elements.

<kbd>
Emphasizes characters to look like keys on a keyboard.

<label>
Identifies captions for other elements in an HTML document.

<li>
Represents a single item in a list of items. It and the other list items must be
wrapped in an <ol>, <ul>, or <menu> tag.

<link>
Connects the current page with an external file.

19 /
unitii.md 2023-10-17

<menu>
Represents an unordered list of items with more semantic meaning than a regular ul
element.

<meta>
Represents an interface to provide metadata pertaining to the document. Metadata
is data that is used to describe the document that contains it.

<noscript>
Displays content within if JavaScript is disabled in the browser or not supported.

<object>
Represents an external resource such as an image, a nested browsing context, or
content to be handled by a browser plugin.

<ol>
Represents an ordered list of items.

<option>
Represents one option in a dropdown created by the select tag.

<output>
Displays the result of a calculation or user action.

<p>
Contains and displays a block of text that defines a paragraph.

<param>
Used to pass parameters to a resource defined in an object tag.

<picture>
Represents multiple possible image sources to be applied to different devices and
screen-sizes.

<q>
Used to represent a brief inline quotation.

<s>
Represents strike-through text that is no longer need, accurate, or correct.

<script>
Used to insert runnable code into a document, usually JavaScript. Can be used both
to include a script within the HTML document, or to load an external script from
another source.

<select>
Creates a drop-down list for the user to select from a number of option elements.

<source>
Represents an interface for adding source content to the page.

<span>
Used for grouping related text or elements for styling and scripting.

20 /
unitii.md 2023-10-17

<strong>
Used to identify text that is very important, or urgent.

<style>
Applies CSS styles to an HTML document.

<table>
Represents an interface for adding tabular data to the page. Tables are two
dimensional, made up of rows and columns, and can contain many types of content.

<textarea>
Displays multi-line plain-text input.

<track>
An HTML element that specifies subtitles, closed captioning, and other text files for media ele

<u>
Displays HTML text with a non-textual annotation. The default rendering of this is a solid unde

<ul>
Represents an unordered list of items.

<video>
Represents an interface for adding video content to the page.

Some other formatting Styles

HTML Formatting is a process of formatting text for better look and feel.
HTML provides us ability to format text without using CSS.
There are many formatting tags in HTML. These tags are used to make text bold, italicized, or
underlined.
There are almost 14 options available that how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

1. Physical tag: These tags are used to provide the visual appearance to the text.
2. Logical tag: These tags are used to add some logical or semantic value to the text.

<b> This is a physical tag, which is used to bold the text written between it.
Element name Description

<strong> This is a logical tag, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.

21 /
unitii.md 2023-10-17

Element name Description

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<tt> This tag is used to appear a text in teletype. (not supported in HTML5)

<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)

<sup> It displays the content slightly above the normal line.

<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.

Hypertext Links

A link is an element that, when clicked, redirects the user to another web page.
Links are usually text-based, but they can also be an image or otherwise.
To create a link use the <a> tag -- this is called an anchor tag.

Syntax

The syntax for a link:

<a href="url">Link text</a>

The <a> tag defines an HTML link; a stands for anchor.

The href attribute defines the destination address (the URL or page the user will be taken to).
Link text is the visible part which will be displayed as a clickable text.

Note: Links are also known as hyperlinks -- there is no difference, they are the same.

Local Links

1. A local link points to a page on the same website -- i.e. the same domain.
2. Local links have a relative URL without the https://www.mysite.com part.
3. Most websites use local links almost exclusively.

22 /
unitii.md 2023-10-17

<p>
Please visit our <a href="/sql"> SQL Tutorial </a>
</p>

Note: Links that redirect to an external website are refered to as external links. The Google link above is an example o

Link Colors

By default, a link will appear in these colors (all browsers support this):

An unvisited link is underlined and blue.

A visited link is underlined and purple.
An active link is underlined and red.

Link target Attribute

The target attribute specifies where to open the linked page. It can be one of the following values:

VALUE DESCRIPTION

Opens the page in the same tab/window. This is the default.

Opens the page in a new tab.

Opens the page in the parent iframe. In the same iframe if there is no parent.

Opens the page in the topmost part of the iframe. In the same iframe if there is no topmost.

Opens the page in a named iframe.

Example

<a href="/about-us.php" target="_top">About Us</a>

<a href=target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
<img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>

Tip: If your web page is placed inside an iframe, you can use the target="_top" on the links to break out of the iframe

Creating Bookmark Anchors

You can also create bookmark anchors to allow users to jump to a specific section of a web page. Bookmarks
are especially helpful if you have a very long web page.

23 /
unitii.md 2023-10-17

Creating bookmarks is a two-step process: first add the id attribute on the element where you want to jump,
then use that id attribute value preceded by the hash sign (#) as the value of the href attribute of the <a> tag,
as shown in the following example:

<a href="#sectionA">Jump to Section A</a>

<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Tip: You can even jump to a section of another web page by specifying the URL of that page along with the anchor (i.e
href="mypage.html#topicA">Go to TopicA</a>.

Creating Download Links

You can also create the file download link in exactly the same fashion as placing text links. Just point the
destination URL to the file you want to be available for download.

In the following example we've created the download links for ZIP, PDF and JPG files.

<a href="downloads/test.zip">Download Zip file</a>

<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>

Note: When you click a link that points to a PDF or image file, the file is not downloaded to your hard drive directly. It

24 /