Unit-2

HTML Fundamentals

Introduction to HTML
HTML stands for Hyper Text Markup Language which is used for creating web pages and web
applications.

Tim Berners-Lee is known as the father of HTML. The first available description of HTML was a
document called "HTML Tags" proposed by Tim in late 1991. The latest version of HTML is HTML5,

HTML Versions
HTML 1.0 The first version of HTML was 1.0, and it was released in1991.
HTML 2.0: This was the next version which was released in 1995.
HTML 3.2: HTML 3.2 version was published by W3C in early 1997.
HTML 4.01: HTML 4.01 version was released on December 1999.
HTML5: HTML5 is the newest version of HyperText Markup language. The first draft of this
version was announced in January 2008.

There are two major organizations one is W3C (World Wide Web Consortium), and another one is
WHATWG (Web Hypertext Application Technology Working Group) which are involved in the
development of HTML 5 version, and still, it is under development.

Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make an effective presentation with HTML because it has a lot of formatting tags.

3) It is a markup language, so it provides a flexible way to design web pages along with the text.

SHEKHAWATI INSTITUTE, SIKAR 1

4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the
interest of browsing of the user.

5) It is platform-independent because it can be displayed on any platform like Windows, Linux, and
Macintosh, etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it
more attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-
case.

Web Browser:
A browser is a software application that allows users to access and browse information on the internet.
It serves as an interface between the user and the web content, displaying text, images, videos, and
other multimedia files. Browsers use various protocols, such as HTTP, HTTPS, FTP, and others, to
communicate with web servers and retrieve web pages. They also provide features like bookmarking,
tabbed browsing, history, and security options to enhance the user experience. Some popular
browsers include Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and Opera.

Text Editor: An editor is a software application that is used for creating, modifying, and managing
text-based files, such as source code, scripts, documents, and configuration files. Text editors provide
features for editing and formatting text, searching and replacing text, syntax highlighting, and code
completion. There are different types of editors available, including code editors, IDEs (Integrated
Development Environments), and text editors. Some popular code editors and IDEs include Visual
Studio Code, Sublime Text, Atom, Eclipse, IntelliJ IDEA, and NetBeans, while some popular text editors
include Notepad++, Vim, Emacs, and Nano.

Here are some examples of popular text editors:

1. Notepad++: a free source code editor for Windows that supports multiple programming
languages.
2. Sublime Text: a cross-platform text editor that supports a wide range of programming
languages and provides advanced features such as split editing, multiple selections, and macros.
3. Atom: a free and open-source text editor developed by GitHub that provides a modern interface
and extensibility through plugins.
4. Visual Studio Code: a cross-platform source code editor developed by Microsoft that supports
multiple programming languages and provides advanced features such as debugging, version
control, and extensions.
5. Vim: a command-line text editor that is popular among programmers for its powerful editing
commands and customization options.

SHEKHAWATI INSTITUTE, SIKAR 2

 6. Emacs: a customizable text editor that provides a wide range of features such as syntax
highlighting, automatic indentation, and integration with other tools.

Hyper Text: Hyper Text simply means "Text within Text. Hyper Text is a way to link two or more web
pages with each other. Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext.

Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated by a web
browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic
type. With the help of HTML only, we can create static web pages.

Website: A website is a collection of many web pages, and web pages are digital files that are written
using HTML (Hypertext Markup Language).
The website’s web pages are linked with hyperlinks and hypertext and share a common interface and
design. The website might also contain some additional documents and files such as images, videos, or
other digital assets.

Types of Websites:

 Static Website
 Dynamic Website

Static Website: In Static Websites, Web pages are returned by the server which are prebuilt source
code files built using simple languages such as HTML, CSS, or JavaScript. There is no processing of
content on the server (according to the user) in Static Websites. Web pages are returned by the server
with no change therefore, static Websites are fast. There is no interaction with databases. Also, they are
less costly as the host does not need to support server-side processing with different languages.

Dynamic Website: In Dynamic Websites, Web pages are returned by the server which is processed
during runtime means they are not prebuilt web pages, but they are built during runtime according to
the user’s demand with the help of server-side scripting languages such as PHP, Node.js, ASP.NET and
many more supported by the server. So, they are slower than static websites but updates and
interaction with databases are possible. Dynamic Websites are used over Static Websites as updates
can be done very easily as compared to static websites (Where altering in every page is required) but
in Dynamic Websites, it is possible to do a common change once, and it will reflect in all the web pages.

SHEKHAWATI INSTITUTE, SIKAR 3

Building blocks of HTML

HTML is a markup language which is used for creating attractive web pages with the help of styling,
and which looks in a nice format on a web browser. An HTML document is made of many HTML tags
and each HTML tag contains different content.

An HTML document consist of its basic building blocks which are:

o Tags: HTML tags are like keywords which defines that how web browser will format and display
the content. An. HTML tags contain three main parts: opening tag, content and closing tag. But
some HTML tags are unclosed tags. HTML tags are used to create HTML documents and render
their properties. Each HTML tags have different properties.
o All HTML tags must be enclosed within < > these brackets.
o Every tag in HTML performs different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except
some tags)

o Attribute: An attribute in HTML provides extra information about the element, and it is applied
within the start tag. Each element or tag can have attributes, which defines the behaviour of that
element. An HTML attribute contains two fields: name & value.

Syntax

<tag name attribute_name= " attr_value"> content </ tag name>

Elements: An HTML element is an individual component of an HTML file. In an HTML file, everything
written within tags are termed as HTML elements.

SHEKHAWATI INSTITUTE, SIKAR 4

HTML Syntax:

<!DOCTYPE>
<html>
<head>
<title>Title for web Page</title>
</head>
<body>
Content for html web document
</body>
</html>

Description of HTML Example

 The <!DOCTYPE html> : It defines the document type or it instruct the browser about the
version of HTML document.
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's title
bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph. </p>

</body>
</html>

Some important tag:

SHEKHAWATI INSTITUTE, SIKAR 5

Here are some important HTML tags that are commonly used in web development:

1. <html> - This tag is used to define the start of an HTML document.

2. <head> - This tag is used to contain information about the document, such as the page title,
metadata, and links to external resources.
3. <body> - This tag is used to contain the main content of the web page.
4. <div> - This tag is used to group and format content on the page.
5. <span> - This tag is similar to <div>, but is used to format smaller pieces of content.
6. <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> - These tags are used to define headings of different
sizes and hierarchy.
7. <p> - This tag is used to define a paragraph of text.
8. <a> - This tag is used to create hyperlinks that allow users to navigate to other pages or
locations on the same page.
9. <table> -This tag is used in HTML to create tables, which are used to display data in rows and
columns.
10. <img> - This tag is used to embed images on the page.
11. <ul> and <li> - These tags are used to create unordered lists.
12. <ol> and <li> - These tags are used to create ordered lists.
13. <form>, <input>, and <button> - These tags are used to create forms that allow users to
input and submit data.
14. <link> - This tag is used to link to external resources, such as stylesheets, JavaScript files, or
other HTML documents.
15. <nav> - This tag is used to define the navigation section of a web page.
16. <style> - This tag is used to define CSS styles directly within an HTML document.
17. <script> - This tag is used to include JavaScript code within an HTML document.

These are just a few of the many HTML tags available for use in web development. The specific tags
and attributes used will depend on the requirements of the project and the desired layout and
functionality of the web page.

Formatting Tag:
Formatting tags in HTML are used to apply visual styling and formatting to text and other content on
a web page. These tags specify how the content should appear to the user, including its color, size, font
family, and other properties.

Here are some of the common types of formatting tags in HTML:

1. Text formatting tags: These tags are used to format text, including making text bold, italic,
underlined, or strikethrough. Examples of text formatting tags-
 <b> and <strong>: Bold text
SHEKHAWATI INSTITUTE, SIKAR 6
  <i> and <em>: Italic text
 <u>: Underlined text
 <s>: Strikethrough text
 <sub>: Subscript text
 <sup>: Superscript text
 <font>: Specifies the font family, size, and color of text
 <hr>: Horizontal rule to create a visual divider between content
 <br>: Line break to create a new line of text
 <center>: Center aligns the content within the tag.

2. Heading tags: These tags are used to create headings for sections of content on a web page.
There are six levels of headings, ranging from <h1> for the most important heading to <h6> for
the least important heading.
3. List tags: These tags are used to create lists of items. There are two types of lists: ordered lists
(<ol>) and unordered lists (<ul>).
4. Image tags: These tags are used to display images on a web page. The <img> tag is used to
insert an image, and attributes such as src, alt, and width can be used to specify the image
source, alternative text, and image size.
5. Table tags: These tags are used to create tables on a web page. The <table>, <tr>, <th>, and
<td> tags are used to define the structure of the table, including its rows, columns, and headers.
6. Form tags: These tags are used to create forms that allow users to enter data and submit it to
a server. The <form>, <input>, and <button> tags are used to create form elements such as
text boxes, checkboxes, radio buttons, and submit buttons.

HTML5 doctype
The HTML5 doctype declaration is as follows:

<!DOCTYPE html>

This declaration is used at the beginning of an HTML document to indicate that the document is written
in HTML5. The DOCTYPE keyword is followed by the name of the document type, which is html in this
case. The declaration is enclosed in angle brackets <> and followed by a closing bracket >.

The HTML5 doctype declaration is different from the doctype declarations used in earlier versions of
HTML, such as HTML 4.01 or XHTML. In HTML5, the doctype declaration is much simpler and does not
require any additional information such as a URL or version number.

It is important to include the doctype declaration at the beginning of an HTML document, as it helps
web browsers to render the page correctly by indicating the version of HTML being used. This can
prevent compatibility issues and ensure that the page displays correctly across different devices and
browsers.

SHEKHAWATI INSTITUTE, SIKAR 7

HTML5 new structural elements

HTML5 introduced several new structural elements that are commonly used in modern web
development. Here are a few examples:

1. <header> - This tag is used to define the header section of a web page, typically containing the
site logo, navigation menu, and other introductory content.
2. <main> - This tag is used to define the main content section of a web page, typically containing
the primary content and features of the page.
3. <section> - This tag is used to group related content within a web page, such as a section
containing a list of articles or products.
4. <article> - This tag is used to define an independent piece of content within a web page, such
as a blog post, news article, or product review.
5. <aside> - This tag is used to define a section of a web page that contains content related to the
main content, such as a sidebar or a section containing related articles.
6. <footer> - This tag is used to define the footer section of a web page, typically containing
copyright information, contact details, and other related content.

These structural elements can help to improve the accessibility and semantics of web pages, making it
easier for users and search engines to understand the content and structure of a website. They can also
provide additional styling and formatting options for web developers, allowing for more flexible and
modular page layouts.

HTML semantics

HTML semantics refers to the use of HTML elements to give meaning and structure to the content of a
web page. By using semantic elements, developers can create web pages that are more accessible,
more easily understood by search engines, and more maintainable over time.

Here are some examples of HTML semantic elements:

1. <header> - This element is used to define the header of a web page or section.
2. <nav> - This element is used to define the navigation menu of a web page.
3. <main> - This element is used to define the main content of a web page.
4. <section> - This element is used to define a section of a web page.
5. <article> - This element is used to define a self-contained piece of content, such as a blog post
or news article.
6. <aside> - This element is used to define content that is related to the main content of a web
page, but not necessarily part of it.
7. <footer> - This element is used to define the footer of a web page or section.

Using these semantic elements not only helps to structure the content of a web page, but also provides
important information to assistive technologies such as screen readers, which can improve accessibility

SHEKHAWATI INSTITUTE, SIKAR 8

for users with disabilities. Additionally, semantic HTML can help search engines to better understand
the content of a web page, potentially improving its visibility in search results.

<section> tag
The <section> tag is a semantic HTML5 element used to define a section of content within a web page.
It is used to group related content together and give it a clear and identifiable title or heading.

The <section> tag is often used in conjunction with other HTML5 semantic elements like <article>,
<header>, <footer>, and <nav> to create well-structured and meaningful web pages.

Here is an example of how the <section> tag could be used to group related content on a web page:

<section>
<h2>Our Services</h2>
<p>We offer a range of services to meet your needs, including:</p>
<ul> <li>Web design and development</li>
<li>Search engine optimization (SEO)</li>
<li>Social media marketing</li>
<li>Content creation and copywriting</li>
</ul>
</section>

In this example, the <section> tag is used to group together information about the different services
offered by a business. The <h2> tag is used to provide a heading for the section, while the <p> tag
and <ul> tag are used to provide more detailed information about each service.

Using the <section> tag and other semantic HTML5 elements can help to improve the accessibility and
structure of web pages, making them easier for users and search engines to understand.

<nav> tag
The <nav> tag is a semantic HTML5 element that is used to define a section of a web page that contains
navigation links. It is typically used to wrap a list of links that enable users to navigate between different
pages or sections of a website.

Here is an example of how the <nav> tag could be used to define a navigation menu on a web page:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>

SHEKHAWATI INSTITUTE, SIKAR 9

 <li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>

In this example, the <nav> tag is used to wrap a list of navigation links that allow users to navigate
between different sections of a website. The links are contained within an unordered list (<ul>) and
each link is represented by a list item (<li>) and an anchor tag (<a>).

Using the <nav> tag helps to provide a clear structure to the navigation section of a website, making
it easier for users to find the information they are looking for. It also provides additional information to
search engines, which can improve the website's search engine ranking.

<article> tag
The <article> tag is a semantic HTML5 element used to define a self-contained, independent piece of
content within a web page. It is typically used to wrap content that can stand alone and is not necessarily
tied to the rest of the page.

Here is an example of how the <article> tag could be used to define a news article on a web page:

<article>
<h2>Scientists discover new species of bird</h2>
<p>Scientists in the Amazon rainforest have discovered a new species of bird that
is unlike any previously known bird. The bird has distinctive coloring and a unique
song, and is believed to be an important discovery for ornithologists.</p>
<p>The discovery was made by a team of scientists from the University of
Amazonia, who spent several months studying the bird in its natural habitat. They
have named the bird "Amazonian bluebird" and have published their findings in
the journal "Ornithology Today".</p>
<p>The discovery of the Amazonian bluebird is a significant one, as it is rare for
new species of birds to be discovered in the modern era. The bird is already
generating excitement among birdwatchers and conservationists, who hope that
its discovery will help to raise awareness of the importance of preserving the
Amazon rainforest.</p>
</article>

In this example, the <article> tag is used to wrap a news article, which contains a headline, several
paragraphs of text, and additional information about the discovery. The article is self-contained and
can be read on its own, without needing to refer to the rest of the page.

Using the <article> tag helps to provide a clear structure to the content of a web page, making it easier
for users to understand and navigate. It also provides additional information to search engines, which
can improve the website's search engine ranking.
SHEKHAWATI INSTITUTE, SIKAR 10
<aside> tag
The <aside> tag is a semantic HTML5 element that is used to define a section of a web page that is
related to the main content, but not an integral part of it. It is often used to wrap content that provides
additional information, such as related links, quotes, or advertisements.

Here is an example of how the <aside> tag could be used to define a section containing related links
on a web page:

<main>

<article>

<h2>Scientists discover new species of bird</h2>

<p>Scientists in the Amazon rainforest have discovered a new species of bird that is unlike any
previously known bird. The bird has distinctive coloring and a unique song, and is believed to be an
important discovery for ornithologists.</p>

<p>The discovery was made by a team of scientists from the University of Amazonia, who spent several
months studying the bird in its natural habitat. They have named the bird "Amazonian bluebird" and
have published their findings in the journal "Ornithology Today".</p>

<p>The discovery of the Amazonian bluebird is a significant one, as it is rare for new species of birds
to be discovered in the modern era. The bird is already generating excitement among birdwatchers and
conservationists, who hope that its discovery will help to raise awareness of the importance of
preserving the Amazon rainforest.</p>

</article>
<aside>
<h3>Related links</h3>
<ul> <li><a href="#">Learn more about the Amazon rainforest</a></li>
<li><a href="#">Discover other new species recently discovered</a></li>
<li><a href="#">Support conservation efforts in the Amazon</a></li> </ul>
</aside>
</main>

In this example, the <aside> tag is used to wrap a section containing related links that provide
additional information about the topic of the article. The links are contained within an unordered list
(<ul>) and are presented with a heading (<h3>).

Using the <aside> tag helps to provide a clear structure to the content of a web page, making it easier
for users to understand and navigate. It also provides additional information to search engines, which
can improve the website's search engine ranking.

SHEKHAWATI INSTITUTE, SIKAR 11

<header> and <footer> tags
The <header> and <footer> tags are semantic HTML5 elements that are used to define the top and
bottom sections of a web page, respectively. They typically contain content that is related to the overall
page, rather than the specific content within it.

Here is an example of how the <header> and <footer> tags could be used to define the top and
bottom sections of a web page:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome to my web page!</h1>
<nav>
<ul> <li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>My first blog post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
massa libero. Integer posuere, nisl nec mattis facilisis, ante tellus rhoncus
libero, eget fermentum lectus lectus vel mi. Fusce tincidunt interdum sapien
vel sagittis. </p>
</article>
<article>
<h2>My second blog post</h2>
<p>Nulla accumsan, augue sed lacinia eleifend, enim sapien scelerisque
est, non iaculis velit dolor eu nunc. Nullam mollis augue sed ipsum ultrices
consectetur. Aliquam venenatis, massa at imperdiet dictum, ipsum turpis
pharetra nisi, ut fringilla nibh massa vel nulla. </p>
</article>
</main>
<footer>
<p>&copy; 2023 My Web Page. All rights reserved.</p>
</footer>
</body>
</html>
SHEKHAWATI INSTITUTE, SIKAR 12
In this example, the <header> tag is used to define the top section of the web page, which contains
a heading (<h1>) and a navigation menu (<nav>). The <footer> tag is used to define the bottom
section of the web page, which contains a copyright notice (<p>).

Using the <header> and <footer> tags helps to provide a clear structure to the content of a web page,
making it easier for users to understand and navigate. It also provides additional information to search
engines, which can improve the website's search engine ranking.

HTML Attributes:

HTML attributes provide additional information about an HTML element, and are used within the start
tag of an element. An attribute consists of two parts: an attribute name and an attribute value, separated
by an equal’s sign (=).

For example, the <a> tag is used to create hyperlinks, and has an href attribute that specifies the URL
of the destination page:

<a href="https://www.example.com">Visit Example</a>

In this example, the href attribute specifies the URL "https://www.example.com".

HTML attributes can be classified into two types:

1. Global attributes: These are attributes that can be used on any HTML element. Some examples
of global attributes include class, id, style, and title.
2. Element-specific attributes: These are attributes that are specific to certain HTML elements.
For example, the <a> element has attributes like href, target, and rel, while the <img> element
has attributes like src, alt, and width.

Here are some common HTML attributes and their descriptions:

 class: Specifies one or more class names for an element.

 id: Specifies a unique ID for an element.
 style: Specifies inline styles for an element.
 title: Specifies extra information about an element (displayed as a tooltip).
 src: Specifies the URL of the image to be displayed.
 alt: Specifies an alternate text for an image.
 href: Specifies the URL of the page the link goes to.
 target: Specifies where to open the linked document (e.g. in a new window or tab).
 rel: Specifies the relationship between the current document and the linked document.

SHEKHAWATI INSTITUTE, SIKAR 13

HTML Heading Tag: An HTML heading tag is used to define the headings of a page. There
are six levels of headings defined by HTML. These 6 heading elements are h1, h2, h3, h4,
h5, and h6; with h1 being the highest level and h6 being the least.

Example:

<!DOCTYPE html> Output:

<html>
<head><title> demo</title>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

HTML Paragraph tag: The <p> tag in HTML defines a paragraph. These have both opening
and closing tags. So, anything mentioned within <p> and </p> is treated as a paragraph. If a
user adds multiple spaces, the browser reduces them to a single space. If a user adds multiple
lines, the browser reduces them to a single line.

Example:
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph

SHEKHAWATI INSTITUTE, SIKAR 14

 contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser window. If
you resize the browser window, the number of lines in this paragraph will change.
</p>

</body>
</html>

Output:

HTML (Anchor) <a> Tag:

The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

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

Example: <a href="URL/Link">Google.com</a>

HTML img Tag: The HTML <img> tag is used to insert an image into a webpage. It is a self-closing tag, which
means it does not require a closing tag. Here is an example of how the <img> tag can be used:

<img src="image.jpg" alt="A beautiful sunset">

SHEKHAWATI INSTITUTE, SIKAR 15

In this example, the src attribute specifies the location of the image file on the server. The alt attribute
provides alternative text for the image, which is displayed if the image cannot be loaded, or if the user
is using a screen reader to access the webpage.
The <img> tag can also include additional attributes such as width, height, title, and style. Here
is an example:

<img src="image.jpg" alt="A beautiful sunset" width="500" height="300" title="Sunset at the

beach" style="border: 1px solid black;">

In this example, the width and height attributes specify the dimensions of the image in pixels. The title
attribute provides a tooltip that is displayed when the user hovers over the image with their mouse.
The style attribute allows you to apply CSS styles to the image, such as a border.

Note: That the src attribute is required for the <img> tag to function properly. If the src attribute is
missing or the image file cannot be found, the image will not be displayed on the webpage.

Attributes used with the <img> tag:

 src: Specifies the URL of the image file that should be displayed.
 alt: Specifies an alternative text description of the image. This is important for accessibility,
and will be displayed if the image cannot be loaded or if the user is using a screen reader.
 width: Specifies the width of the image in pixels or as a percentage.
 height: Specifies the height of the image in pixels or as a percentage.
 title: Specifies text that is displayed as a tooltip when the user hovers over the image with
their mouse.
 style: Specifies CSS styles to apply to the image, such as borders, margins, and padding.
 class: Specifies one or more class names to apply to the image for styling purposes.
 id: Specifies a unique identifier for the image that can be used to target it with CSS or
JavaScript.
 usemap: Specifies the name of a map element that defines clickable areas within the image.
 ismap: Specifies that the image should be used as a server-side image map.
 loading: Specifies the loading strategy for the image, with values of "eager", "lazy", or "auto".

Audio and Video Tags:

The HTML5 <audio> and <video> tags are used to embed audio and video content into a webpage.
Here is an explanation of each tag:

<audio> tag: The <audio> tag is used to embed audio content in a webpage. It can be used
to play audio files such as MP3, Ogg Vorbis, or WAV. Here is an example of how to use the <audio>
tag:
<audio controls>
<source src="music.mp3" type="audio/mpeg">

SHEKHAWATI INSTITUTE, SIKAR 16

 <source src="music.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
In this example, the controls attribute adds controls such as play, pause, and volume to the audio
player. The <source> tag is used to specify the location and file type of the audio file. If the browser
does not support any of the specified file types, the fallback text "Your browser does not support the
audio element" will be displayed.

<video> tag: The <video> tag is used to embed video content in a webpage. It can be used
to play video files such as MP4, WebM, or Ogg. Here is an example of how to use the <video> tag:

<video width="640" height="360" controls>

<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>

In this example, the width and height attributes set the dimensions of the video player. The
controls attribute adds controls such as play, pause, and volume to the video player. The <source> tag
is used to specify the location and file type of the video file. If the browser does not support any of the
specified file types, the fallback text "Your browser does not support the video tag" will be displayed.

Both the <audio> and <video> tags can also include additional attributes such as preload,
autoplay, and loop. These attributes can be used to specify whether the media should be preloaded,
automatically played, or looped.

Both the <audio> and <video> tags have a number of attributes that can be used to customize
their behavior. Here is a list of some of the most commonly used attributes:
 src: Specifies the URL of the media file to be played.
 autoplay: Specifies that the media should start playing automatically when the page loads.
 controls: Specifies that controls (such as play, pause, and volume) should be displayed for the media
player.
 loop: Specifies that the media should loop and play again after it finishes.
 preload: Specifies how the media should be preloaded. The possible values are "none" (no
preloading), "metadata" (only metadata is preloaded), and "auto" (the whole media file is
preloaded).
 muted: Specifies that the media should be muted by default.
 poster: Specifies an image to be displayed while the media is downloading or before it is played.
 width and height: Specify the dimensions of the media player.
 playbackRate: Specifies the playback rate of the media (e.g. 1.5x or 0.5x).
 currentTime: Specifies the current playback time of the media (in seconds).
 volume: Specifies the volume of the media (a value between 0 and 1).

SHEKHAWATI INSTITUTE, SIKAR 17

 These attributes can be used in different combinations to create customized media players that suit
your needs. It's important to note that not all attributes are supported by all browsers, so you may
need to use fallbacks or alternative solutions to ensure that your media content is accessible to all
users.

Font Tag: The <font> tag is an HTML element that is used to define the font, size, and color of text
in a web page. However, it is now deprecated and is no longer recommended to be used in modern
HTML documents. Instead, it is recommended to use Cascading Style Sheets (CSS) to style text.

Here is an example of how the <font> tag can be used:

<font size="4" color="red">This is some text</font>

In the example above, the <font> tag is used to specify that the text should be displayed in size 4 and
red color.

The <font> tag supports the following attributes:

 color: Specifies the color of the text

 face: Specifies the font family of the text
 size: Specifies the size of the text

Note: that the use of the <font> tag is discouraged and it is recommended to use CSS for styling
instead.

layout
In web design, layout refers to the way in which the various elements of a web page are arranged and
positioned relative to each other. This includes the placement of text, images, and other media, as well
as the use of whitespace, margins, and padding to create a visually appealing and easy-to-navigate
design.

There are several different approaches to web layout, including fixed layout, fluid layout, and responsive
layout. Fixed layout involves specifying a fixed width for the page, while fluid layout adjusts to the width
of the user's screen. Responsive layout takes this concept a step further, using media queries and other
techniques to dynamically adjust the layout of the page based on the size and orientation of the user's
screen.

Effective layout is an important aspect of web design, as it can impact how users interact with and
perceive a website. A well-designed layout can help guide users to important content, create a sense
of hierarchy and organization, and contribute to the overall user experience.

SHEKHAWATI INSTITUTE, SIKAR 18

iFrames
The iframe stands for Inline Frame. The” iframe ” tag defines a rectangular region within
the document in which the browser can display a separate document, including scrollbars
and borders. An inline frame is used to embed another document within the current HTML
document. It allows you to include external documents, web pages, or media seamlessly
within the body of your HTML document. The HTML iframe name attribute is used to
specify a reference for an <Iframe> element. The name attribute is also used as a reference
to the elements in JavaScript. The iframe is basically used to show a webpage inside the
current web page. The ‘ src ‘ attribute is used to specify the URL of the document that
occupies the iframe.

Syntax:
<iframe src="URL" title="description"></iframe>

Attribut of iframe tag:

The <iframe> tag in HTML comes with various attributes that allow you to customize the behaviour and
appearance of the embedded frame
1. src (Source): Specifies the source URL of the content you want to embed in the iframe.
Example:
<iframe src="https://www.example.com"></iframe>
2. width and height: Sets the width and height of the iframe, defining the dimensions of the embedded
content.
Example:
<iframe src="https://www.example.com" width="600" height="400"></iframe>
3. frameborder: Specifies whether the iframe should have a border. Use frameborder="0" to remove the
border and frameborder="1" to display it.
Example:
<iframe src="https://www.example.com" frameborder="0"></iframe>
4. allowfullscreen: Enables or disables the ability to make the iframe content go fullscreen. This is often
used with embedded videos.
Example:
<iframe src="https://www.youtube.com/embed/example" allowfullscreen></iframe>
5. scrolling: Controls whether scrollbars should be displayed within the iframe. Values can be "yes", "no",
or "auto".
Example:

SHEKHAWATI INSTITUTE, SIKAR 19

 <iframe src="https://www.example.com" scrolling="auto"></iframe>
6. sandbox: Creates a sandbox for the iframe, restricting the actions it can perform (e.g., executing
scripts, submitting forms).
Example:
<iframe src="https://www.example.com" sandbox="allow-same-origin allow-
scripts"></iframe>
7. name: Provides a name for the iframe, which can be used as the target for links or forms.
Example:
<iframe src="https://www.example.com" name="myFrame"></iframe>
8. loading: The loading attribute of the <iframe> tag is used to specify when the browser should load the
content of the iframe. It helps control the loading behavior, particularly in terms of performance and
resource optimization. The loading attribute can take one of three values:
 "eager": This is the default behavior. The browser will load the iframe content as soon as the
parent document loads, without waiting for the user to interact with or scroll to the iframe.
Example:
<iframe src="https://www.example.com" loading="eager"></iframe>
 "lazy":The browser will defer loading the iframe content until it comes into the user's viewport.
This can be beneficial for improving initial page load times, especially if the iframe is not
immediately visible to the user.
Example:
<iframe src="https://www.example.com" loading="lazy"></iframe>
 "auto": The browser determines the loading behavior based on its default settings. This is
similar to not specifying the loading attribute at all.
Example:
<iframe src="https://www.example.com" loading="lazy"></iframe>

HTML Table:
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row. We can create
a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements. In Each
table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.

HTML Table Tags

Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
SHEKHAWATI INSTITUTE, SIKAR 20
 <tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>Student Record</h1>

<table>
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr> Student Record
<tr> Roll Number Name
<td>101</td>
<td>sonu</td> 101 sonu
</tr>
<tr> 102 monu
<td>102</td>
<td>monu</td> 104 ronu
</tr>
<tr> 103 tonu
<td>104</td>
<td>ronu</td>
</tr>
<tr>
<td>103</td>
<td>tonu</td>
</tr>
</table>
</body>
</html>

Table tag Attributes

Table attributes in HTML are used to customize table such as changing its background color, alignment, width,
border, etc.

let's have a look at list of table attributes and tags

SHEKHAWATI INSTITUTE, SIKAR 21

Attributesbute Description Description Syntax
Align Alignment of the table. It can be one of the <table
following values: left, center, right align=center/left/right>...</table>
Bgcolor Background color of the table <table
bgcolor="#$$$$$$">...</table>
Border Size of the frame surrounding table (in <table border="px">...</table>
pixels)
cellpadding Space between the content of a cell and the <table cellpadding="">...</table>
border (in pixels)
cellspacing Size of the space between cells (in pixels) <table cellspacing="">...</table>
Frame Side of the table frame is displayed. It can <table frame="">...</table>
be one of the following values: above,
hsides, lhs, border, void, below, vsides, rhs,
box
Rules Lines that should be displayed. It can be one <table rules="">...</table>
of the following values: none, groups, rows,
columns, all
Summary Alternative text displayed when table can <table summary="">...</table>
not be displayed
Width Width of the table <table width="">...</table>

Tr,td,th tag Attributes

align Horizontal alignment of text in each cell within the row. It can <tr align="">...</tr>
be one of the following values: left, center, right, justify, char
bgcolor Background color of each cell within a row <tr
bgcolor="">...</tr>
valign Vertical alignment of text of each cell within a row. It can be <tr valign="">...</tr>
one of the following values: baseline, bottom, middle, top
colspan Number of columns the cell extends (Default is 1, max value is <th colspan
1000) ="">...</th>
<td
colspan="">...</td>

SHEKHAWATI INSTITUTE, SIKAR 22

Table tag example:
<html>
<head>
<title>demo web page</title> <tr bgcolor="#FFFF00" align="center">
</head>
<td rowspan="4">Tr tag 2</td>
<body>
<td colspan="3">Tr tag 2</td>
<table width="500px" align="center" border="1px">
<caption><h1>This is student Table</h1></caption> </tr>
<tr>
<tr bgcolor="#00FFFF" align="center">
<td >anil</td>
<td>soni <td colspan="2">Tr tag 3</td>
</td>
<td rowspan="3">Tr tag 3</td>
</tr>
<tr> </tr>
<td>sunil</td>
<tr bgcolor="#00CC99" align="center">
<td>soni
</td> <td rowspan="2">Tr tag 4</td>
</tr>
</table> <td >Tr tag 4</td>

</tr>
<table width="500px" align="center" frame="border"
rules="rows"> <tr height="50px" bgcolor="#CC3300"
<caption><h1>This is student Table 2 </h1></caption> align="center">
<tr height="100px" valign="middle" align="center"> <td >Tr tag 5</td>
<td>jatin</td>
<td>kumawat </tr>
</td>
</table>
</tr>
<tr> </body>
<td>subhash</td>
</html>
<td>soni

</td>

</tr>

</table>

<table width="500px" align="center" border="1px"

bordercolor="#FF0000">

<caption><h1>This is student Table 3 </h1></caption>

<tr bgcolor="#FF0000" align="center">

<td>Tr tag 1</td>

<td>col 2</td>

<td>col 3</td>

<td>col 4</td>

SHEKHAWATI INSTITUTE, SIKAR 23

 OutPut:

Form Tag: An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc. An HTML form facilitates the
user to enter data that is to be sent to the server for processing such as name, email address, password,
phone number, etc.

Syntax:
<form action="server_url" method="get | post">
//input controls Fields e.g. textfield, textarea, radiobutton, button
</form>

Here is a list of all the HTML5 <form> tags:

1. <form> - Defines an HTML form for user input.

SHEKHAWATI INSTITUTE, SIKAR 24

 2. <input> - Defines an input field where the user can enter data.
3. <textarea> - Defines a multi-line input field where the user can enter data.
4. <button> - Defines a clickable button.
5. <select> - Defines a drop-down list.
6. <optgroup> - Defines a group of related options in a drop-down list.
7. <option> - Defines an option in a drop-down list.
8. <label> - Defines a label for an input element.
9. <fieldset> - Groups related elements in a form.
10. <legend> - Defines a caption for a <fieldset> element.
11. <datalist> - Specifies a list of pre-defined options for an <input> element.
12. <output> - Defines the result of a calculation or action.
13. <progress> - Represents the progress of a task.
14. <meter> - Represents a measurement within a known range.
15. <keygen> - Defines a key-pair generator field for forms.
16. <formaction> - Specifies where to send the form-data when a form is submitted.
17. <formenctype> - Specifies how form-data should be encoded before sending it to the server.
18. <formmethod> - Specifies the HTTP method to use when sending form-data.
19. <formnovalidate> - Specifies that the form should not be validated when submitted.
20. <formtarget> - Specifies where to display the response after submitting the form.

Form Tag Attribute:

Action
The action attribute defines the action to be performed when the form is submitted, which usually leads
to a script that collects the information submitted and works with it. if you leave it blank, it will send it
to the same file.
<form action="action.php">

Method
The method attribute is used to define the HTTP method of the form which is either GET or POST.

<form action="action.php" method="get">

<form action="action.php" method="post">

The GET method will append the form data to the URL specified in the action attribute.
The POST method is used when submitting data to a script. The POST method does not append the
form data to the action URL but sends using the request body.

Target attribute
The target attribute specifies a name or a keyword that indicates where to display the response that is
received after submitting the form.
The target attribute defines a name of, or keyword for, a browsing context (e.g., tab, window, or inline
frame).

SHEKHAWATI INSTITUTE, SIKAR 25

 <form target="_blank">

Attribute Values
_blank The response is displayed in a new window or tab
_self The response is displayed in the same frame (this is default)
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe

Enctype Specifies: Enctype Specifies how the form-data should be encoded when submitting it to the
server (only for method="post").

Example:
<form method="post" enctype="multipart/form-data" action="upload.php">

Input Tag: The input tag is used within < form> element to declare input controls that allow
users to input data. An input field can be of various types depending upon the attribute type.
The Input tag is an empty element which only contains attributes. For defining labels for the
input element, < label> can be used.

Input Tag Attribute:

Type: Identifies the type of input control to display. Acceptable values are hidden, text, tel,
url, email, password, date, time, number, range, color, checkbox, radio, file, submit, image,
reset, and button. Defaults to text if not specified, if the value is invalid, or if the browser does
not support the type specified.

Class: Indicates the Class of the input.

Placeholder: Placeholder attribute is used to specify hint that describes the expected value
of an input field.

Checked: When the value of the type attribute is radio or checkbox, the presence of this
Boolean attribute indicates that the control is selected by default; otherwise it is ignored.

Required: HTML5 Indicates a value must be present or the element must be checked in order
for the form to be submitted.

Value: The value attribute is used to specify the value of the input element.

maxlength: This property is used to specifies the maximum number of characters allowed in
an <input> element.

SHEKHAWATI INSTITUTE, SIKAR 26

Form Example:
<html>
<head>
<title>This is Demo Web Page</title>
<style type="text/css">
label
{
margin:100px;
padding:0px;
}
input
{
margin:10px;
padding:0px;
}
</style>
</head>
<body>
<form name="student" action="" method="post">
<fieldset>
<legend align="center">Student Registration Form</legend>
<label>Student Name:</label>
<input type="text" name="Student_name" value=""><br>

<label>Father's Name:</label>
<input type="text" name="Fathername" value=""><br>

<label>Mobile Number:</label>
<input type="number" name="mobile" value=""><br>

<label>Email Address:</label>
<input type="email" name="email" value="" placeholder="Email
Address"><br>

<label>Date Of Birth</label>
<input type="date" name="dob" value=""><br>

<label>Time Of College Join</label>

<input type="time" name="time" value=""><br>

SHEKHAWATI INSTITUTE, SIKAR 27

 <label>Student Image</label>
<input type="file" name="photo" value=""><br>

<label>Gender</label>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="female">FeMale
<br>

<label>Hobbies:</label>
<input type="checkbox" name="hobbi" value="writing">Writing
<input type="checkbox" name="hobbi1"
value="photography">Photography
<input type="checkbox" name="hobbi2" value="cooking">Cooking
<input type="checkbox" name="hobbi3" value="learning">Learning
<input type="checkbox" name="hobbi4" value="singing">Singing
<input type="checkbox" name="hobbi5" value="dance">Dance
<br>

<label>Address:</label>
<textarea name="address" placeholder="Student Permanent Address" >
</textarea>
<br>

<input type="reset" name="resent" value="Reset">

<input type="submit" name="Submit" value="Done">
<br>
</fieldset>
</form>
</body>
</html>

SHEKHAWATI INSTITUTE, SIKAR 28

<!DOCTYPE html>
<html>
<body>
<h1>Shekhawati Group of Institute, Sikar</h1>

<form>
<label>Name:</label>
<input type="text" name="name" value="">
<br><br>

<label>E-mail:</label>
<input type="email" name="emailaddress">
<br><br>

<label>Password: </label>
<input type="password" name="password">
<br><br>

<input type="submit">

</form>
</body>

SHEKHAWATI INSTITUTE, SIKAR 29

 </html>

HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list elements.
There are three different types of HTML lists:

1. Ordered lists.
2. Unordered lists.
3. Description lists.

1. Ordered List: Ordered lists use ordinal sequences to indicate the order of list elements. An
ordered list can be created with the <ol> tag and each list item can be created with the <li> tag.

Example:
<ol>
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ol>

This will produce a numbered list (which is the default style):

1. Item
2. Another Item
3. Yet Another Item

Changing the type:

You can easily change the type of numeral shown in the list item marker by using the type attribute
<ol type="1|a|A|i|I">

Type Description Examples

1 Default value – Decimal numbers 1,2,3,4
A Alphabetically ordered (uppercase) A,B,C,D
a Alphabetically ordered (lowercase) a,b,c,d

SHEKHAWATI INSTITUTE, SIKAR 30

 I Roman Numerals (uppercase) I,II,III,IV
i Roman Numerals (lowercase) i,ii,iii,iv

2. Unordered List: unordered lists use a defined symbol such as a bullet to list elements in no
designated order. An unordered list can be created with the <ul> tag and each list item can be
created with the <li> tag.

Example:

<ul>
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ul>

This will produce a numbered list (which is the default style):

 Item
 Another Item
 Yet Another Item

Changing the type of Unordered List:

<ol type="circle | disc (default) | square | none">

3. Description lists: description lists use indents to list elements with their children. A description
list (or definition list, as it was called before HTML5) can be created with the dl element. It consists
of name-value groups, where the name is given in the dt element, and the value is given in the
dd element.

Example:

<dl>
<dt>name 1</dt>
<dd>value for 1</dd>
<dt>name 2</dt>
<dd>value for 2</dd>
</dl>

Output:

SHEKHAWATI INSTITUTE, SIKAR 31

 name 1
value for 1
name 2
value for 2

Attribute of <ol> Tag:

reversed: It defines that the order will be descending.
start: It defines from which number or alphabet the order will start.
type: It defines which type (1, A, a, I, and i) of the order you want in your list of numeric,
alphabetic, or roman numbers.

Example:
<ol start="3">
<li>Item</li>
<li>Some Other Item</li>
<li>Yet Another Item</li>
</ol>
This will produce a numbered list (which is the default style):
3. Item
4. Some Other Item
5. Yet Another Item

Attribute of <li> Tag:

We can also explicitly set a certain list item to a specific number. Further list items after one with a
specified value will continue incrementing by one from that list item's value, ignoring where the
parent list was at.
<li value="7"></li>

Example:
<ol start="5">
<li>Item</li>
<li>Some Other Item</li>
<li value="4">A Reset Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ol>

OutPut:

SHEKHAWATI INSTITUTE, SIKAR 32

 5. Item
6. Some Other Item
12. A Reset Item
13. Another Item
14. Yet Another Item

Image Maps
An image maps is an image with clickable areas that usually act as hyperlinks.
The image is defined by the <img> tag, and the map is defined by a <map> tag with <area> tags
to denote each clickable area. Use the usemap and name attributes to bind the image and the map.

Tag/Attribute Value
<img>
Usemap The name of the map with a hash symbol prepended to it. For example, for a map
with name="map", the image should have usemap="#map".
<map>
Name The name of the map to identify it. To be used with the image's usemap attribute.
<area> Below are <area>-specific attributes. When href is specified, making the <area> a
link, <area> also supports all of the attributes of the anchor tag (<a>) except ping.
See them at the MDN docs. alt The alternate text to display if images are not
supported. This is only necessary if href is also set on
the <area>.
Cords The coordinates outlining the selectable area. When shape="polygon", this should
be set to a list of
"x, y" pairs separated by commas (i.e., shape="polygon" coords="x1, y1, x2, y2, x3,
y3, ...").
When shape="rectangle", this should be set to left, top, right, bottom. When
shape="circle", this should be set to centerX, centerY, radius.

Href The URL of the hyperlink, if specified. If it is omitted, then the <area> will not
represent a hyperlink.

Shape The shape of the <area>. Can be set to default to select the entire image (no
coords attribute
necessary), circle or circ for a circle, rectangle or rect for a rectangle, and polygon
or poly for a
polygonal area specified by corner points.

SHEKHAWATI INSTITUTE, SIKAR 33

Example:
<img src="http:// /002.gif" usemap="#shapes">
<map name="shapes">
<area shape="polygon" coords="79,6,5,134,153,134">
<area shape="rectangle" coords="177,6,306,134">
<area shape="circle" coords="397,71,65">
</map>

Image Formats:

There are several different image formats commonly used on the web, each with their own
advantages and disadvantages. Here are some of the most commonly used image formats and their
characteristics:

1. JPEG (Joint Photographic Experts Group): JPEG (Joint Photographic Experts Group) is a
commonly used image format for digital photographs and other complex images with many
colors and gradients. JPEG images are lossy, which means that they use compression techniques
to reduce the file size of the image by removing some of the image data that is considered less
important or noticeable to the human eye.

2. PNG (Portable Network Graphics): PNG (Portable Network Graphics) is a lossless image format
that is ideal for images with simple graphics and transparent backgrounds. PNG images use
compression techniques to reduce the file size of the image, but the compression does not result
in any loss of image quality.

Unlike JPEG images, PNG images can support transparency, meaning that parts of the image can
be made transparent so that the background behind the image can show through. This makes
PNG images useful for logos, icons, and other graphics that need to be placed on top of different
background colors or images.

PNG images can be saved in different color depths, including 8-bit (256 colors), 24-bit (true
color), and 32-bit (true color with alpha channel). The higher color depths result in larger file
sizes, but they also allow for more precise color reproduction and transparency.

3. GIF (Graphics Interchange Format): GIF (Graphics Interchange Format) is a type of image
format that supports animations and a limited color palette of up to 256 colors. GIF images are
made up of multiple frames that are displayed in sequence, giving the illusion of movement or
animation.

4. SVG (Scalable Vector Graphics): SVG (Scalable Vector Graphics) is an image format that is based
on XML (Extensible Markup Language) and is used for creating vector images that can be scaled

SHEKHAWATI INSTITUTE, SIKAR 34

 to any size without losing resolution or clarity. Unlike raster image formats like JPEG or PNG,
which are made up of pixels, SVG images are made up of mathematical shapes and curves that
can be easily resized and edited.
5. SVG images can be created using vector graphics software like Adobe Illustrator or Inkscape, or
they can be created using a text editor and basic knowledge of XML. SVG images can also be
animated using CSS or JavaScript, which makes them ideal for creating interactive web
applications and user interfaces.
6. WebP: WebP is an image format that was developed by Google in 2010 as a way to provide a
more efficient alternative to other popular image formats like JPEG and PNG. WebP images are
able to achieve smaller file sizes while maintaining high image quality, making them ideal for use
on the web where page load times and bandwidth usage are important factors.

The development of websites and web pages

The development of websites and web pages typically involves several steps and can be divided into
two main categories:
 front-end development and
 back-end development.
1. Front-end development refers to the process of creating the user interface and design of a
website or web page. This involves writing HTML, CSS, and JavaScript code to create the
structure, layout, and functionality of the website, as well as any visual and interactive
elements such as buttons, forms, and animations. Front-end developers also ensure that the
website is responsive and mobile-friendly, meaning it can adjust to different screen sizes and
devices.
2. Back-end development, on the other hand, involves the creation of the server-side code
and database management that powers the website or web application. This can involve using
programming languages such as PHP, Python, or Ruby, and frameworks such as Laravel or
Django, to create and manage dynamic content such as user accounts, forms, and data
processing. Back-end developers also ensure that the website is secure and scalable, meaning
it can handle large amounts of traffic and data.
The development process typically involves several stages, including planning and research, design
and prototyping, coding and development, testing and debugging, and deployment and
maintenance. Throughout each stage, developers work closely with designers, content creators, and
other stakeholders to ensure that the website meets the project requirements and user needs.
In recent years, there has been a trend towards using content management systems (CMS) such as
WordPress or Drupal, which provide pre-built templates and modules that can simplify and speed
up the development process. These systems also allow non-technical users to easily update and
manage the content of the website.

The development process for creating websites and web pages

SHEKHAWATI INSTITUTE, SIKAR 35

The development process for creating websites and web pages typically involves several stages, each
of which is important for ensuring that the final product is of high quality and meets the project
requirements. The following are some common stages in the development process:
1. Planning and research: This stage involves defining the project goals, target audience, and
requirements, as well as conducting research on the competition and similar websites. This stage
also involves creating a project plan and timeline.
2. Design and prototyping: In this stage, the website's user interface, layout, and visual elements
are designed. This can include wireframing, creating mockups, and prototyping. The design
should be based on the research and requirements defined in the previous stage.
3. Coding and development: This stage involves writing the actual code for the website or web
application, using technologies such as HTML, CSS, JavaScript, and back-end programming
languages and frameworks. The code should be organized, efficient, and well-documented to
ensure maintainability and scalability.
4. Testing and debugging: Once the website has been developed, it is important to test it
thoroughly to ensure that it functions correctly and meets the project requirements. This can
include functional testing, user testing, performance testing, and security testing. Bugs and
errors should be identified and fixed in this stage.
5. Deployment and maintenance: Once the website has been tested and approved, it can be
deployed to the production environment. This involves setting up the server infrastructure and
configuring the website's domain name and hosting. Once the website is live, ongoing
maintenance and updates are required to ensure that it remains secure, up-to-date, and
functional.

Website navigation and website themes

Website navigation refers to the way users move through a website or web application to access its
various pages, sections, and features. Effective website navigation is essential for providing a good user
experience and ensuring that users can easily find the information they need. The following are some
common techniques and best practices for website navigation:
1. Clear and consistent labeling: Navigation links should be clearly labeled and easy to
understand. Use standard conventions for navigation labels, such as "Home", "About", "Contact",
and "Services". Avoid using jargon or obscure terms that users may not understand.
2. Simple and intuitive layout: The navigation layout should be simple and easy to understand.
Avoid cluttering the navigation menu with too many options, and group related pages or
sections together. Use visual cues such as icons or drop-down menus to help users quickly find
what they are looking for.
3. Responsive design: Ensure that the navigation menu is accessible and easy to use on all devices,
including desktops, laptops, tablets, and smartphones. Use responsive design techniques to
adjust the navigation layout and functionality based on the user's screen size and device.
4. Search functionality: Include a search box on the website to allow users to search for specific
information or pages. Make sure the search box is easily visible and accessible from any page
on the website.

SHEKHAWATI INSTITUTE, SIKAR 36

 5. Consistent navigation across pages: Ensure that the navigation menu is consistent across all
pages of the website. Users should be able to easily navigate back and forth between pages and
sections without getting lost or confused.
In terms of website themes, a theme is a pre-designed template or layout that can be applied to a
website to give it a specific look and feel. Website themes can include pre-designed color schemes,
fonts, layout styles, and visual elements such as images and icons. Themes can be customized and
modified to suit the needs of a specific website or brand.
Themes can be created from scratch using HTML, CSS, and JavaScript, or they can be purchased or
downloaded from third-party providers such as WordPress, Shopify, or ThemeForest. Many website
builders and content management systems offer a wide range of pre-designed themes and templates
that can be easily applied to a website without the need for extensive coding or design skills.
When choosing a website theme, it is important to consider the needs and goals of the website, as well
as the target audience and brand identity. The theme should be visually appealing, easy to navigate,
and optimized for performance and user experience. It should also be compatible with the website's
content and functionality, and be customizable and flexible to allow for future updates and changes.

The elements of a web page

The elements of a web page refer to the various components and objects that make up the visual and
interactive aspects of a website. Some common elements of a web page include:
1. Headings: Headings are used to organize content on a page and provide a hierarchy of
information. Headings are typically displayed in larger font sizes and different styles to make
them stand out from other text.
2. Text content: Text content includes the main body of text on a page, as well as subheadings,
paragraphs, lists, and other textual elements. Text content can be formatted using various styles
such as bold, italic, or underlined, and can include hyperlinks to other pages or external websites.
3. Images and graphics: Images and graphics can be used to enhance the visual appeal of a web
page and communicate information in a more engaging way. Images can include photographs,
illustrations, infographics, and other visual elements.
4. Navigation menus: Navigation menus are used to help users move through a website and
access different pages and sections. Navigation menus can be displayed as a list of links, drop-
down menus, or other interactive styles.
5. Forms: Forms are used to collect user input, such as contact information, feedback, or login
credentials. Forms can include various types of input fields, such as text boxes, radio buttons,
checkboxes, and drop-down menus.
6. Multimedia elements: Multimedia elements such as videos, animations, and audio files can be
used to enhance the user experience and provide interactive content on a web page.
7. Interactive elements: Interactive elements such as buttons, links, and hover effects can be used
to create engaging and interactive experiences for users.

The steps involved in creating a website

The steps involved in creating a website can vary depending on the scope and complexity of the project,
but here are some general steps that are commonly followed:
SHEKHAWATI INSTITUTE, SIKAR 37
 1. Planning: Determine the purpose and goals of the website, the target audience, and the features
and functionality needed. Create a sitemap to outline the structure of the site and create
wireframes or mockups to visualize the design and layout.
2. Domain registration and hosting: Choose a domain name and register it with a domain
registrar. Select a hosting provider and choose a hosting plan that meets the website's needs.
3. Design: Develop the visual design of the website, including the color scheme, typography,
layout, and other visual elements. Use tools such as graphic design software and website builders
to create the design.
4. Development: Build the website using HTML, CSS, and JavaScript. Develop the website's
functionality, such as forms, search bars, and other interactive features. Use a content
management system (CMS) if necessary to simplify website management.
5. Content creation: Develop and gather content for the website, including text, images, videos,
and other multimedia elements. Write and optimize content for search engines and ensure it is
consistent with the website's goals and target audience.
6. Testing: Test the website's functionality, design, and content to ensure it is working properly
and meets the website's goals and user needs. Check for errors, broken links, and other issues.
7. Launch: Publish the website to the internet and make it live. Configure the website's search
engine optimization (SEO) settings and analytics tools to monitor traffic and user behavior.
8. Maintenance: Regularly update and maintain the website, including adding new content, fixing
errors, and updating software and security measures. Monitor website traffic and user behavior
to make improvements and updates as necessary.
These steps are not necessarily linear and may require iterations and adjustments throughout the
process. Effective planning, design, and testing can help ensure a successful website launch and
ongoing success.

Publishing And Publicizing Site Structuring Web Site

Once a website has been developed, there are two main tasks involved in making it available to the
public: publishing and publicizing.
1. Publishing: This involves making the website accessible on the internet by uploading the
website files to a web server and configuring the server to serve the website to visitors. The
specific steps involved in publishing a website can vary depending on the hosting provider and
the software used to build the site.
2. Publicizing: This involves promoting the website to potential visitors through various strategies
such as search engine optimization, social media marketing, email marketing, and pay-per-click
advertising. The goal of publicizing a website is to drive targeted traffic to the site and increase
its visibility and reach.
.
To publicize a website and drive traffic to it, there are several strategies that can be employed:
1. Search engine optimization (SEO): This involves optimizing the website's content, structure,
and metadata to make it more visible and attractive to search engines. This can include keyword
research, on-page optimization, and link building.

SHEKHAWATI INSTITUTE, SIKAR 38

 2. Social media marketing: This involves promoting the website on social media platforms such
as Facebook, Twitter, and LinkedIn. This can include creating social media accounts for the
website, sharing content on social media, and running social media advertising campaigns.
3. Email marketing: This involves building an email list of subscribers and sending them regular
newsletters or promotional emails to drive traffic to the website. This can include offering
incentives such as discounts or free content to encourage subscribers to visit the website.
4. Pay-per-click (PPC) advertising: This involves placing ads on search engines or other websites
and paying for clicks or impressions. This can be an effective way to drive targeted traffic to the
website.

When structuring a website, it's important to consider the user experience and ensure that the website
is easy to navigate and understand. This can involve organizing content into categories, using clear and
descriptive labels for links and buttons, and providing a clear hierarchy of information.
Design and layout are also important considerations when structuring a website. The design should be
visually appealing and consistent with the brand identity, while the layout should be intuitive and easy
to navigate.
Finally, it's important to ensure that the website is optimized for different devices and screen sizes, as
more and more people are accessing the internet from mobile devices. This can involve using
responsive design techniques to ensure that the website adapts to different screen sizes and
orientations.

SHEKHAWATI INSTITUTE, SIKAR 39