HTML Basics
DR. SHWETA SHARMA
ASSISTANT PROFESSOR
DEPT. OF COMPUTER ENGINEERING
NIT KURUKSHETRA
Theory
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 2
HTML
Hyper Text Markup Language
Combination of Hyper Text and Markup language
1991
HTML is a markup language rather than a programming or scripting language
Not Case Sensitive
Can be used with scripting languages
Hypertext: link between the web pages
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 3
HTML
Markup language:
Create Web pages using markup language
A language for formatting documents
A set of rules that defines how the layout and presentation of text and images should
appear in a digital document
Define the text document within the tag which defines the structure of web pages
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 4
HTML
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 5
HTML5
Fifth and current version of HTML
Improved the markup available for documents and introduced Document Object
Model (DOM) API
Defines the logical structure of documents and the way a document is accessed and
manipulated for how to get, change, add, or delete HTML elements
Parse tress to render the page visually
HTML5 offers new elements for media content compared to HTML, such as: <audio>
</audio>, <video> </video>, <source>, <embed>, etc.
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 6
HTML5
HTML HTML5
It didn’t support audio and video without the use of flash It supports audio and video controls with the use of <audio>
player support and <video> tags
It uses SQL databases and application cache to store offline
It uses cookies to store temporary data
data
Allows JavaScript to run in the background. This is possible
Does not allow JavaScript to run in the browser
due to JS Web worker API in HTML5
It does not allow drag and drop effects It allows drag and drop effects
HTML5 allows to draw shapes like circle, rectangle, triangle
Not possible to draw shapes like circle, rectangle, triangle etc.
etc.
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 7
HTML5
HTML HTML5
It supported by all new browser like Chrome, Safari, Firefox,
It works with all old browsers
etc.
<HTML>,<Body>, and <Head> tags are mandatory while
These tags can be omitted while writing HTML code
writing a HTML code
Older version of HTML are less mobile-friendly HTML5 language is more mobile-friendly
Doctype declaration is too long and complicated
HTML 2.0:
Doctype declaration is quite simple and easy
<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML//EN”>
HTML 4.01:
<!DOCTYPE HTML>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd>
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 8
HTML5
HTML HTML5
It is almost impossible to get true GeoLocation of user One can track the GeoLocation of a user easily by using JS
with the help of browser GeoLocation API
It can not handle inaccurate syntax It is capable of handling inaccurate syntax
Being an older version, it is not fast, flexible, and efficient It is efficient, flexible and more fast in comparison to
as compared to HTML5 HTML
New element for web structure like nav, header, footer
Elements like nav, header, footer were not present
etc.
Not secure Improved performance and security
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 9
XHTML
Extensible Hypertext Markup Language
Cousin of HTML
Strict than HTML: Rules and Error handling
XML-based version of HTML
Version-
XHTML 1.0 in 2000
XHTML 1.1 in 2001
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 10
XHTML
XHTML5 a version of HTML5 that follows the syntax and rules of XML
XHTML <!DOCTYPE> declaration
XHTML is case sensitive markup language
All the XHTML tags and attributes need to be written in lower case only
Each and every XHTML tag should have an equivalent closing tag
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 11
HTML5 vs. XHTML5
HTML5 XHTML5
Major element like html, head, and body are optional Major element like html, head, and body are compulsory
All tags and attributes are not necessarily to be in lower or
Every tag and attribute should be in lower case.
upper case.
Doctype is not necessary to write at the top. Doctype is very necessary to write at the top of the file.
It is not necessary to close the tags in the order they are
It is necessary to close the tags in the order they are opened.
opened.
While using the attributes it is not necessary to mention While using the attributes it is mandatory to mention
quotes. For e.g. <Institute>. quotes. For e.g. <Institute=“NIT”>.
Filename extension used are .html, .htm. Filename extension are .xhtml, .xht, .xml.
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 12
HTML5 vs. XHTML5
HTML5 XHTML5
<?xml version=“1.0” encoding=“UTF-8”? >
<!DOCTYPE HTML> <html xmlns=“http://www.w3.org/1999/xhtml”>
<!– I have no html, head, or body - - > <head>
<meta charset="UTF-8"> <title>My Webpage </title>
<meta name="viewport" content="width=device-width, </head>
initial-scale=1.0"> <body>
<title>My Webpage </title> <h1>Dr. Shweta Sharma</h1>
<h1>Dr. Shweta Sharma</H1> <p> Assistant Professor</p>
<p> Assistant Professor <ul>
<ul> <li> Machine Learning
<li> Machine Learning <li> IoT
<LI> IoT </ul>
</UL> </body>
</html>
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 13
Practical
OPEN NOTEPAD++
WRITE HTML CODE AND SAVE THE FILE WITH .HTML
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 14
HTML- Basics
<!DOCTYPE html>
<html>
<body> HTML headings : <h1> to <h6> tags
<h1> most important heading ……. <h6> least important
<h1>My First Heading</h1> heading
<p>My first paragraph</p> <p> paragraphs
</body>
</html>
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 15
HTML- Links and Images
<a href="https://www.nitkkr.ac.in">NIT Kurukshetra </a>
<img src=“Picture.jpg" alt=“Picture" width=“158" height=“224">
<a href> anchor hypertext reference
alt: alternate text in an area
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 16
HTML- List
<ul>
<li> …
<li> …
<ul> unordered list
</ul>
• Tea
• Coffee
<ol>
<ol> ordered list
<li> …
1. Tea
<li> …
2. Coffee
</ol>
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 17
Exercise
Create a simple webpage using HTML5 to articulate your aspirations and goals for the next 5 years.
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 18
Thank you!
1/18/2024 DR. SHWETA SHARMA, NIT KURUKSHETRA 20
