An HTML element is a type of HTML (Hypertext Markup Language) document component,
one of several types of HTML nodes (there are also text nodes, comment nodes and others).
[vague]
The first used version of HTML was written by Tim Berners-Lee in 1993 and there have
since been many versions of HTML. The current de facto standard is governed by the
industry group WHATWG and is known as the HTML Living Standard.
An HTML document is composed of a tree of simple HTML nodes, such as text nodes, and
HTML elements, which add semantics and formatting to parts of a document (e.g., make text
bold, organize it into paragraphs, lists and tables, or embed hyperlinks and images). Each
element can have HTML attributes specified. Elements can also have content, including other
elements and text
Html is short for hypertext markup language. Webpages are written in html- a simple
scripting language.
Hypertext is simply a piece of text that works as a link.
Markup language is a way of writing layout information within documents.
Note: basically, in html document is a plain text file that contains texts and nothing else.
Html was developed by tin Berners – lee in late 1991. It basically originated from old
language SGML (standard generalized markup
language.
To view the output of HTML document (as web page) we need a browser such as internet
explorer, google chrome, Mozilla Firefox, opera, safari, etc.
1
FEATURES OF HTML
The features of HTML manage web pages effectively by benefiting developers in structuring
websites. Here are these essential features.
1. Structure Tags
HTML can enclose multiple elements with pinpoint accuracy, simultaneously providing
semantic structure due to HTML tags. Such functionality ensures effective browser cognition
while promoting optimal accessibility and streamlined search engine optimization (SEO)
efforts.
2. Hypertext and Links
Hypertext enables interconnected web pages through hyperlinks. These links create <a> tags
and href attributes, resulting in easy browsing between pages, documents, or sections. HTML
enables linking to specific webpage parts using id attributes alongside <a> tags. This
seamless navigation and information sharing define HTML’s linking capability.
3. Forms and Input
HTML provides a powerful mechanism for collecting user input through forms. Forms are
essential for interactive web applications, enabling tasks, such as user registration, data
submission, and surveys. HTML form elements include text inputs, checkboxes, radio
buttons, dropdown menus, etc. The <form> tag defines a form, while various input-related
tags, such as <input>, <select>, and <textarea> capture different types of user input.
4. Cascading Style Sheets (CSS) Integration
CSS is widely used by developers to enhance the visual appeal of web content. Its flexible
syntax helps design styles, layouts, and design components for various HTML elements,
leading to effective separation between presentation and content. External style sheets can be
linked via <link> tags or embedded using <style> tags within a document.
5. Multimedia Integration
In today’s digital world, incorporating interactive elements is essential to engaging the
audience. HTML possesses the inbuilt capability to embed different forms of multimedia
content, including audio files, images, and videos, into web pages. Embedding multimedia
content can be achieved using the appropriate tags within HTML, such as <img>, <video>,
and
<audio>. One of the key features of HTML is <canvas> tag, which facilitates dynamic
graphics alongside animations.
6. Accessibility
HTML includes alt attributes for image descriptions, benefiting visually impaired users.
HTML 5 introduces <header>, <nav>, <main>, and <footer> for enhanced structure design.
Inclusive web design involves using landmarks, keyboard navigation, and accessible forms to
improve the user experience.
2
7. Responsive Design
HTML coding principles have methods like fluid grids, adaptable images, and breakpoints in
web design. These implement responsive strategies when constructing web pages. This
approach guarantees that websites remain visually striking while still being both responsive
and suitable for mobile devices.
8. Lists
A list in HTML is used to represent the text in the listing format. By utilizing <ul> in an
HTML bulleted sequence and by using <ol>, numeric enumeration can be created. For each
item inserted into a sequence, you can use <li>. This feature of HTML presents clustered text
in bullet points or step-by-step instructions.
9. Tables
The <table> tag, which is one of the key features of HTML, can be used effectively for
arranging items into neat table format. This is perfect for presenting statistics or any other
form of organized content. Developers also have access to other tags like “<thead>”,
“<tbody>”, and “<tfoot>” when crafting tables, allowing them to set up tables neatly with
headers/footers/bodies.
10. Semantic Elements
HTML5 introduced a range of semantic elements that provide more descriptive meaning to
web content. These elements go beyond the generic `<div>` tag and help define the purpose
and structure of specific sections. Some examples include `<article>`, `<section>`, `<aside>`,
`<figure>`, and `<figcaption>`. Semantic elements improve both accessibility and search
engine optimization (SEO) by providing clearer context for web content.
11. Client-side Storage
HTML5 has improved storage capabilities on the client’s side. The local Storage and session
Storage are essential features that help developers store information on the client’s side. The
local Storage API helps enhance storage capabilities when users revisit the web application
while the session Storage API enables the developer to store information for a particular
session. The data is removed as soon as the session ends.
12. Platform Independent
HTML runs on a browser and is not specific to a platform. You can load websites designed
using HTML on any browser. It can be interpreted on any computer or mobile device,
regardless of the operating system. Therefore, HTML and all its versions are platform-
independent.
13. Search Engine Optimization (SEO)
HTML tags help enhance the searchability of a website. They make it easy for the search
engine crawler to crawl a website’s content. HTML tags, such as title, meta description,
heading, and alt attribute, help with the search engine optimization of a website.
3
14. Facilitates the Creation of Games
HTML5 is used to create simple games. You can use the <canvas> element with CSS and
JavaScript to create more advanced games. You can develop both 2D and 3D games and
make them as interactive as you want. Games created using HTML5 are also cost-effective to
develop and distribute.
15. Web Workers
The browser usually gets slow if several high-demanding tasks are performed simultaneously.
Web Workers is added in HTML5 to tackle this issue. It allows scripts to operate in the
background without interfering with the UI thread. You can use this to execute tasks like
multimedia processing in the background.
16. Geolocation API
It is an HTML feature used to access the geographical position of a user. It is useful in
creating applications, such as food ordering apps, travel apps, fitness tracking apps, etc. It is
essential to note that the location of a user is not accessed unless the user approves of it.
Importance of HTML in Web Development
The following are the reasons why HTML is important in web development:
Foundation of Website Creation: HTML is used to create a web page. Every HTML
tag has a distinct role in presenting and organizing content on a web page. They
define paragraphs, headers, images, tables, links, etc. These tags are foundational
elements of an HTML document that tells the web browser how to structure a web
page.
Bridges the Gap Between Design and Development: With HTML, professionals can
influence the layout and format of web pages. They can create designs that are
aesthetically pleasing and user-centric in approach. For this reason, HTML is used in
conjunction with CSS and JavaScript.
Helps Troubleshoot Problems Faster: HTML can help developers identify and resolve
issues quickly and efficiently. This ensures the proper functioning of the website and
a great user experience. Some common HTML errors include missing tags, incorrect
attributes, and improper nesting. These are easy to diagnose and fix, making the
developer’s task simpler.
To learn more about HTML, you can consider taking an online web development course.
Advantages of HTML
The following are the advantages of HTML.
Easy to Learn and Use: HTML is a very simple language that anyone can understand
and use.
Web Browser Friendly: HTML works on all web browsers, making it accessible to
users on any device or platform.
User-Friendly: HTML is very user-friendly and intuitive, making it easier for
developers to create websites and web applications.
4
DHTML
DHTML stands for Dynamic HTML, it is totally different from HTML. The browsers which
support the dynamic HTML are some of the versions of Netscape Navigator and Internet
Explorer of version higher than 4.0. The DHTML is based on the properties of the HTML,
JavaScript, CSS, and DOM (Document Object Model which is used to access individual
elements of a document) which helps in making dynamic content. It is the combination of
HTML, CSS, JS, and DOM. The DHTML make use of Dynamic object model to make
changes in settings and also in properties and methods. It also makes uses of Scripting and it
is also part of earlier computing trends.
HTML: HTML stands for Hypertext Markup Language and it is a client-side
markup language. It is used to build the block of web pages.
Javascript: It is a client-side Scripting language. JavaScript is supported by most of
the browser, also have cookies collection to determine the user needs.
CSS: The abbreviation of CSS is Cascading Style Sheet. It helps in the styling of
the web pages and helps in designing of the pages.
DOM: It is known as a Document Object Model which act as the weakest links in it.
The only defect in it is that most of the browser does not support DOM. It is a way to
manipulate the static content.
5
UNDERTSAND TAGS AND THEIR ATTRIBUTES IN HTML
TAGS: -
Basic HTML code manipulates a plain text document a apply style and reference. It does so
by applying ‘tag’. HTML tags are keywords (tag names) surrounded by angle brackets ‘<’
and ‘>’, like <html>. HTML tags normally come in pairs like <html> and </html>.
The first tag in a pair is the start tag (opening tag) and the second tag is the end tag (closing).
the end tag is written like a start tag, with a forward slash before the tag name.
THERE ARE TWO TYPES OF TAGS: -
1. Container tag: In HTML, tags that include both the start tag and end tag, are called
Container tag. They contain the text between the opening tag and closing tag .
For example: <body> text being formulated or defined </body>
2. Empty tag: In HTML, tags that have only opening tags are called empty tag. There is
no closing tag. These tags do not act on blocks of text.
Fo/r example: <hr> and </hr>
ATTRIBUTES:
The attributes within the tag are extra bits of information. For example, at some point you
may want to give your page body a background image or colour or perhaps some margin in
any of the side. All these things can be done using attributes.
Attributes are always written in the opening tag. Attributes values should always be enclosed
within double quotes (“…”). Different attributes in the same tag are separated by a space.
For example, <body background =” nature.jpg”>using the attributes </body>.
6
WRITE HTML CODE TO DISPLAY YOUR NAME IN NAME (HEAD)
<HTML>
<HEAD>
MANSI
<HEAD>
</HTML>
7
WRITE HTML CODE TO DISPLAY INTERNET TECHNOLOGY IN
HEAD
<HTML>
<HEAD>
INTERNET TECHNOLOGY
<HEAD>
</HTML>
8
WRITE HTML CODE TO DISPLAY DAVIM CENTER OF PAGE WITH
BOLD, ITALIC AND UNDERLINE
<HTML>
<B> <I> <U> <CENTER> DAV
</B> </I> </U> </CENTER>
9
WRITE HTML CODE TO DISPLAY DAVIM USING MARQUEE
<HTML>
<MARQUEE> MDU ROHTAK </MARQUEE>
</HTML>
10
WRITE HTML CODE BY COLOR RED
<html>
<head>
<title>body tag with attributes</title>
</head>
<body bgcolor="red"leftmargin="50"topmargin="60">
HELLO! HTML
</body>
</html>
11
WRITE HTML CODE TO DISPLAY ALL COURSES OF MDU,
ROHTAK AS ORDERED LIST WITH “NEXT” DOUBLE CLICK.
WRITE HTLL CODE TO CREATE PARAGRAPGH OF DETAILED
ABOUT THE COURSES.
<HTML> <HTML>
<OL> <UL>
HDFC HDFC
ICICI ICICI
BOB BOB
SBI SBI
</OL> </UL>
</HTML> </HTML>
12
TO CREATE TABLE OF STUDENT RECORD OF THE CLASS
<!DOCTYPE html>
<html>
<head>
<title>CODE</title>
<style type="text/css">
table{
border : 1px solid black;
}
td{
border : 1px solid black;
}
th{
border : 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<th>Name</th>
<th>Roll no</th>
<th>father's name</th>
<th>course</th>
<th>year</th>
</thead>
<tr>
<td>Mansi</td>
<td>37</td>
<td>gates</td>
<td>bba</td>
<td>2nd</td>
13
</tr>
<tr>
<td>Anurag</td>
<td>78</td>
<td>rama</td>
<td>bca</td>
<td>3rd</td>
</tr>
<tr>
<td>Mayank</td>
<td>23</td>
<td>bezos</td>
<td>bba cam</td>
<td>3rd</td>
</tr>
</table>
</body>
</html>
14
CREATE A FORM PAGE.
<html>
<head>
<title>submit reset example</title>
</head>
<body bgcolor="PINK">
<h2>submit the form</h2>
<form method="post"action="mailto:[email protected]">
<p>first name:<input type="text"name="t1"size="20"></p>
<p>last name:<input type="text"name="t2"size="20"></p>
<p>activities you know:
<br><br>
<input type="checkbox"name="c1">cooking
<input type="checkbox"name="c2">driving
<input type="checkbox"name="c3">playing
<p>gender:
<br>
female<input type="radio"name="t2">
male<input type="radio"name="t3">
transgender<input type="radio"name="t4">
<br><br>
<input type="submit"name="s"value="submit">
</form>
</body>
</html>
15
16
Create a simple website showing the courses available in DAVIM college
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<img src="logo.jpg" class="logo">
<h1>DAV INSTITUTE OF MANAGEMENT</h1>
</div>
<nav>
<div class="container">
<a href="#">Home</a>
<a href="#">About us</a>
<a href="#">Admission</a>
<a href="#">Gallery</a>
<a href="#">Notice Board</a> <a href="#">Events</a> <a href="#">Tutorial</a> <a
href="#">Contact us</a> </div>
</nav>
<br>
<a href="courses.html"><b><u>COURSES</b></u></a>
</body>
</html>
17
18
Write an HTML code to DISPLAY THE IMAGE OF FLOWER GARDEN.
<HTML>
<HEAD>
<TITLE>FLOWER GARDEN</TITLE>
</HEAD>
<BODY>
<IMG SRC="FLOWER GARDEN.JPG"></IMG>
</BODY>
</HTML>
19
CSS
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing between elements,
how elements are positioned and laid out, what background images or background colors are
to be used, different displays for different devices and screen sizes, and much more!
CSS COLORS, FONTS AND SIZES: -
Here, we will demonstrate some commonly used CSS properties. You will learn more about
them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
EXAMPLE
Use of CSS color, font-family and font size properties
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family:
courier; font-size:
160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
20
21
WEBSITE OF
“WEBSITE OF
UNIVERSITY”
22
Maharshi Dayanand University, Rohtak, established in 1976 as a
residential University with the objective of promoting inter-
disciplinary higher education and research with special emphasis
on studies of environmental, ecological and life sciences, is making
rapid progress to emerge as a leading educational institution of the
nation. Now it is a teaching-cum-affiliating university with a
formidable track record in academics, research, literacy and
cultural activities, and sports. Currently, there are 38 Post-Graduate
Departments and 11 Faculties in the University. Territorial
jurisdiction of the University extends to 10 districts of Southern Haryana. The Directorate of
Distance Education is providing quality education to the students with its traditional UG/ PG
courses as well as Information Technology and Management programmes. Excellent
standards of teaching and research, well-qualified faculty members, effective administrative
functioning, congenial academic environment, pulsating campus life, key national and
international linkages, timely holding of examinations and time-bound declaration of results,
ample avenues for holistic development of personality of the students, a community-service
approach, special emphasis on providing opportunities for students of rural background, girl
students, and students from marginalized communities, administrative mechanism based on
e-governance etc. are the salient features of this University. The overall progress made by the
University in all fields resulted in the University receiving the ‘A+’ grade from NAAC in
March 2019. University, with its large campus, provides excellent infrastructural facilities
and necessary student support services, benefiting the students. Beautiful landscaping is a
hallmark of the varsity. Hostel facilities for 2500 boys and equal number of girls is available
on the campus. Computer and network facilities are available on the campus. The University
has entered into national and international level strategic tie-ups with academic and research
organizations for joint academic and research programmes. Recently, Recently University has
signed MoU with National Skill Development Corporation to facilitate skill development of
University students. We are all set to emerge as a pioneer University with overall excellence
and global outlook and deep commitment towards social and community causes in times to
come. Welcome to this vibrant Institute of Higher Learning, and realize your academic
dreams!
23
List of Courses
<html>
<ol>
<li>BBA</li>
<li>BBA-CAM</li>
<li>BCA</li>
<li>MBA</li>
<li>MCA</li>
<li>BSC</li>
<li>Bcom</li>
<li>BTech</li>
<li>B.E./B.Tech</li>
<li>M.COM</li>
<li>B.A</li>
<li>M.Ed.</li>
<li>M.A</li>
<li>Mcom.(hons)</li>
<li>M.P.Ed</li>
<li>B.Ed</li>
<li>B.Arch</li>
<li>M.Sc.</li>
<li>PG Diploma</li>
<li>LL.M.</li>
<li>B.A.LL.B(Hons)</li>
<li>B.A.M.S</li>
<li>B.SC.(Hons)</li>
<li>B.Sc.LL.B</li>
24
MDU Rohtak Fee Structure
MDU Rohtak fee structure is a combination of a number of components, such as tuition fee,
hostel fee, medical insurance, mess and other security deposits, etc. Out of all the fee
components, there are a few components that are charged one-time by MDU Rohtak,
however, some are to be paid semester-wise or annually, such as the tuition fees. The MDU
Rohtak fees amount further is different depending upon the course or specialisation selected
by the students. Please find the total tuition fee for all MDU Rohtak courses in the following
table:
25
MDU Rohtak Placement overview
What’s new at MDU Rohtak placements 2024? According to Maharshi Dayanand University
stream-wise NIRF reports 2024, the median package offered during MDU
Rohtak MBA placements 2023 stood at INR 3.25 LPA. Further, a total of 151 MBA
students were placed out of 210 students during MDU Rohtak placements 2023. Other than
this, the median package offered during BPharm placements during MDU Rohtak placements
2023 stood at INR 3.75 LPA. MDU Rohtak has a dedicated Career Counseling and
Placement Cell that facilitates placement-related activities. The cell ensures to help students
by providing them necessary vocational training and keeping them informed on latest
employment trends.
MDU Rohtak Placements 2023
A fall of nearly 10% was witnessed in the MBA median package offered in 2023 as compared with 2022
There was a rise of over 15% in the BPharm median package offered in 2023 as compared with 2022
MDU Rohtak Placement Report 2024: Highlights
According to stream-wise NIRF reports 2024, the key highlights of MDU Rohtak placements
2023 as compared with 2022 are presented below:
26
MDU Rohtak Admission Process 2024
MDU Rohtak admission 2024 is both merit and entrance-based. The university conducts
entrance exams to shortlist candidates for various UG and PG courses. The university
also accepts national or state-level entrance exams, such as GPAT, JEE Main, etc. MDU
Rohtak offers more than 70 courses on campus and through affiliated colleges at UG, PG and
doctoral levels in multiple streams like Management, Engineering, Arts, Science, etc.
Additionally, the university also offers some courses in distance education mode through
the Centre for Distance and Online Education, MDU.
MDU Rohtak admissions are currently open. Check below the complete procedure of
getting a seat in MDU:
27
MDU Rohtak Admission 2024: Highlights
MDU Rohtak offers admission to UG and PG courses based on merit or national or state-
level entrance exam score. The university offers regular as well as courses in distance
education mode. Find below the key highlights for Maharishi Dayanand University,
Rohtak admissions:
28
29
