Scribd
Upload
9 views

Web technology

The document provides an overview of HTML and CSS, covering basic syntax, document structure, and features of HTML. It details the history and evolution of HTML, introduces key tags and their functions, and explains HTML attributes and styles. Additionally, it includes examples of HTML programs demonstrating text formatting and basic web page structure.

Uploaded by

pavangudikandhula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Web technology

The document provides an overview of HTML and CSS, covering basic syntax, document structure, and features of HTML. It details the history and evolution of HTML, introduces key tags and their functions, and explains HTML attributes and styles. Additionally, it includes examples of HTML programs demonstrating text formatting and basic web page structure.

Uploaded by

pavangudikandhula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

Dr.

Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
Unit 1
Introduction HTML: Basic Syntax, Standard HTML Document Structure, Basic Text Markup,
Html styles, Elements, Attributes, Heading, Layouts, Html media, Iframes Images, Hypertext
Links, Lists, Tables, Forms, GET and POST method, HTML 5, Dynamic HTML. CSS: Cascading
style sheets, Levels of Style Sheets, Style Specification Formats, Selector Forms, The Box Model,
Conflict Resolution, and CSS3.

HTML: History and Introduction


History
 In the early 1990s, a physicist named Tim Berners-Lee came up with an idea of how people
could share and access information globally when he was working at CERN in the early
1990s.
 His idea was the World Wide Web, which he made possible by introducing HTML in 1991,
where data was organized into documents using markup tags, allowing users to navigate
between related documents easily.

Evolution of HTML
Version Year Functionality
HTML 1.0 1993 Basic text documents with hyperlinks
HTML 2.0 1995 Tables and image embedding
HTML 3.0 1995 Multimedia, style sheets, and
enhanced tables
HTML 3.2 1997 Forms, support for multiple character
sets, and frames
HTML 4.01 1999 Cascading style sheets , div and span
tags
XHTML 2000 XML structure

Introduction
 HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. It is only a formatting language are not a
programming language
 Hyper Text: HyperText simply means "Text within Text." A text has a link within it, called
hypertext, whenever you click on a link which brings you to a new webpage. It is a way to
link two or more web pages (HTML documents) with each other.
 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.

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

Page 1
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
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.

HTML: Basic Syntax


 HTML tags serve as fundamental building blocks, as they layout both the structure and
content of documents. These tags make use of brackets that open and close, encapsulating
specified details in between them.
 Key points about HTML tags
1) The opening tag is formatted as <tagname> and the specific label may vary
depending on the description.
2) Attributes can be added to HTML tags to provide browsers with additional guidance
or context.
3) To define the end of a text or image, it is important to close the opening tag by using
the format </tagname>.
4) Proper nesting of tags is crucial for the effective display and organization of web
content.
Basic tags
1) <!DOCTYPE> : DOCTYPE is an instruction to the web browser about what type of HTML the
page is written in such as version of HTML and other details. It must be the very first thing in an
HTML document (before the <html> tag). The <!DOCTYPE> declaration is NOT case sensitive. Eg:
<!DOCTYPE html>, <!DocType html>, <!Doctype html>, <!doctype html>

In HTML 5, the declaration is simple:


<!DOCTYPE html>

In older documents (HTML 4 or XHTML), the declaration is more complicated because the
declaration must refer to a DTD (Document Type Definition)

HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

2) <html> : Every HTML document starts with a <html> tag that encloses the entire HTML
document, serving as the root element for all HTML content. The end tag <html> is
</html>.

3) <head> : The <head> element is a container for metadata (data about data) which contains
following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.The <head> is placed
between the <html> tag and the <body> tag.
Eg: <head>
<title>Title of the document</title>
</head>

Page 2
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
4) <title> : Used within the <head> section to define the title of the HTML document. It appears in
the browser tab or window and provides a brief description of the webpage’s content.

5) Comments: With the help of this tag, we can add comments in the HTML. These comments parts
are not displayed on the web page. But these commented codes are available in the source code.
Eg: <! -- Anything in between is considered a comment -->

6) <body> : The <body> tag defines the document's body. The <body> element contains all the
contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
There can only be one <body> element in an HTML document.
Eg: <body>
Body Contents
………….
………..
</body>

Standard HTML Document Structure


The HTML Program is generally divided into two sections i.e head and body.
1) head: <head> section holds the header information of a webpage document indicated by a title that
is provided by using <title> tag and used for control information by the browser.
2) body: <body> tag contains the actual user information that is to be displayed on the screen.

Example: Write a HTML program to display simple welcome message.


<html>
<head>
<title> HTML Document </title>
</head>
<body>

Page 3
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
<h1> Welcome to KHIT</h1>
<h2> Department of CSE 4-2 </h2>
<h3> Subject: Web technologies </h3>
</body>
</html>

Basic Text Markup


 HTML text formatting refers to the use of specific HTML tags to modify the appearance
and structure of text on a webpage.
 It allows you to style text in different ways, such as making it bold, italic, underlined,
highlighted, or struck-through.
 HTML text formatting can be divided into two main categories: Logical Tags and Physical
Tags.
1) Logical Tags
 Logical tags convey the meaning or importance of the text without necessarily altering
its visual appearance. These tags help browsers, search engines, and assistive
technologies understand the purpose of the text.
Example: <em>, <strong>
2) Physical Tags
 Physical tags directly affect how text looks on the webpage by changing the font, size,
or style.
Example: <b>, <i>

 List of commonly used HTML text formatting tags


1) <i> – Italicizes text: Use the <i> tag to display text in italics without implying emphasis.
2) <small> – Reduces the font size of the text: The <small> tag renders text in a smaller font
than the surrounding text.
3) <ins> – Highlights inserted text: The <ins> tag marks text as newly added or inserted, often
displayed with an underline.
4) <sub> – Displays subscript text: Use the <sub> tag for subscripted text, often used in
chemical formulas or footnotes.
5) <strong> – Emphasizes important text, often rendered in bold: The <strong> tag is
semantically meaningful and indicates that the text is of high importance.
6) <b> – Makes text bold: The <b> tag visually makes the text bold but does not imply any
special significance.
7) <mark> – Highlights text with a background color: The <mark> tag highlights text with a
background color, similar to using a highlighter on paper.
8) <del> – Strikes through text: The <del> tag is used to show that text has been deleted or is
no longer relevant.
9) <em> – Emphasizes text, typically italicized: The <em> tag is used for emphasized text and
is usually rendered in italics to highlight importance.
10) <sup> – Displays superscript text: Use the <sup> tag to show superscripted text, commonly
used in exponents or footnotes.
11) <u> - underline text: Use the <u> tag is used to underline text written between it.
12) <strike> - strike a line: Use <strike> tag is used to draw a strikethrough on a section of text.

Page 4
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
13) <big> – Increases the font size of the text: The <big> tag renders text in a bigger font than
the surrounding text.

Example program 1
<!DOCTYPE html>
<head>
<title> Text Formatting</title>
</head>

<body>
<p>This is a <strong><em>KHIT</em></strong> message.
</p>
<p>The chemical formula of water is H <sub>2</sub>O.
</p>
<p>
<del> Deleted text</del> and <ins>inserted text</ins> are shown here.
</p>
<p><small> Smaller text</small> can be used for disclaimers.
</p>
<p>E = mc<sup>2</sup></p>
</body>
</html>

Example program 2

Page 5
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more. The
style attribute can be used with any HTML tag.

syntax: <tagname style="property:value;">


where, property is a CSS property, value is a CSS value.

1) Background: The CSS background-color property defines the background color for an HTML
element. This property can be applied only to <body>, individual tags within the <body> or both at
the same time.
<body style="background-color:powderblue;">
<h1 style="background-color:red;"> IV year CSE</h1>
<p>KHIT</p>
</body>

2) Text Color: The CSS color property defines the text color for an HTML element.
<h1 style="color:orange;">Department of CSE</h1>
<p style="color:yellow;">KHIT</p>

3) Text Size: The CSS font-size property defines the text size for an HTML element.
<h1 style="font-size:300%;">Your Name</h1>
<p style="font-size:160%;">Your friend’s Name</p>

4) Text Alignment: The CSS text-align property defines the horizontal text alignment for an HTML
element
<h1 style="text-align:center;">Web Technologies</h1>
<p style="text-align:center;">IV year CSE – A,B,C</p>

Elements
 An HTML file is made of elements. These elements are responsible for creating web pages
and define content in that webpage.
 An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and
content inserted between them.
 All the content written between body element is visible on web page.
 All the elements in HTML do not require to have start tag and end tag, some elements does
not have content and end tag such elements are known as Void elements or empty
elements. Eg: <br> (represents a line break), <hr> (represents a horizontal line).
 HTML can have nested, which means an element can contain another element.
 All the elements are divided into two categories:
1) Block-level elements
o These are the elements, which structure main part of web page, by dividing a page
into coherent blocks.
o A block-level element always starts with new line and takes the full width of web
page, from left to right. These elements can contain block-level as well as inline
elements.
Example: <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>,
<fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>,

Page 6
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
<li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>,
<tfoot>, <ul> and <video>.

2) Inline elements
o Inline elements are those elements, which differentiate the part of a given text and
provide it a particular function.
o These elements do not start with new line and take width as per requirement. The
inline elements are mostly used with other elements.
Examples: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>,
<dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>,
<select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.

Attributes
 HTML attributes are special words that provide additional information to an HTML element.
 Attributes are placed inside the element's opening tag, and they are used to configure or adjust
the element's behavior.
 All attributes are made up of two parts: a name and a value −
syntax: <element attribute_name="value">content</element>
 Name: The attribute name is the keyword, also known as the attribute identifier,
which defines a specific characteristic for the element in which it is using. For
example, the paragraph <p> element has an attribute "align", which defines the
alignment of the paragraph on the page.
 Value: The attribute value is the data or information that defines the value to be set for
that attribute. The value is assigned within the double quotes. For example, "left",
"center", or "right" can be assigned to the "align" attribute with the paragraph tag.

Rules and Characteristics of attributes


1) Attributes are optional; you can use them to provide additional information about an
HTML element.
2) Attributes have name and value pairs, but some of the attributes do not require any value;
those are known as Boolean attributes.
3) An HTML element can have multiple attributes, and they should be separated by spaces.
4) Attributes should always be written with the opening tag.
5) All HTML elements can have attributes except a few like <head>, <title>, <script>, etc.
6) W3C recommends using attributes in lowercase and keeping the value in quotes.

Important attributes of HTML


1) href Attribute: We use the <a> tag to define a hyperlink. In the <a> tag, the href attribute specifies
the URL of the page the link goes to. The href attribute consists of two components: the URL (actual
link) and the anchor text or clickable text on the page.
<a href="https://www.KHIT.com/CSE-courses/">Click here for KHIT, Dept.. of CSE</a>

2) src Attribute: We use the <img> tag add an image in an HTML page. The src attribute specifies
the image path. We can specify the address of the image inside the double quotes.
<img src="img_tulip.jpg">
The <img> tag also contains the width and height attributes. As the name suggests, these attributes
specify the width and height of the image in pixels).

Page 7
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
<img src="img_tulip.jpg" width="500" height="200">
The alt attribute is used with the image <img> tag. It helps us to specify the alternative text in case,
the image cannot be displayed on the website. The alt attribute should reflect the image content so
that users can understand what the image contains.
<img src="img_tulip.jpg" alt="Red Tulips in a Garden">

3) style Attribute: The style attribute helps us set the style, such as font, size, colour, etc., of the
HTML element.
<p style=" background:lightblue; color:navy;">Style attribute in HTML.</p>

4) lang Attribute: The lang attribute specifies the language used in an HTML document to assist
search engines and browsers. This attribute is always used inside the <html> tag.
We can also use the country codes to the language code. The first two characters specify the language
of the web page while the last two characters specify the country.
Example that specifies Hindi as the language and India as the country:
<!DOCTYPE html>
<html lang="hin-IN">
<body>
Content Goes Here.
</body>
</html>

5) Title Attribute: The title attribute specifies extra information about the element. It supports all
HTML elements and displays the information when the mouse moves over the element (link or any
text).
<p title="This is paragraph tag">Example of title attribute</p>

General attributes of HTML


Attribute Options Function

align right, left, center Horizontally aligns tags

Vertically aligns tags within an


valign top, middle, bottom
HTML element.

numeric, hexidecimal, Places a background color behind


bgcolor
RGB values an element

Places a background image


background URL
behind an element

id User Defined Names an element for use with

Page 8
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

Cascading Style Sheets.

Classifies an element for use with


class User Defined
Cascading Style Sheets.

Specifies the width of tables,


width Numeric Value
images, or table cells.

Specifies the height of tables,


height Numeric Value
images, or table cells.

title User Defined "Pop-up" title of the elements.

Heading
 HTML headings are used to define the content hierarchy and structure of a webpage. They
range from <h1> to <h6>, with <h1> being the most important heading and <h6> the least
important.
 Hierarchical Structure of Heading Tags
 The <h1> tag: The top-level heading denotes the main topic or title of the entire page.
 The <h2> tag: Subheadings under <h1> represent major sections related to the main
topic. They provide a more specific context to the content.
 The <h3> to <h6> tags: These tags are used for further subsections or nested content
within <h2> headings. They offer a deeper level of hierarchy for organizing content
within specific sections.
Example
<!DOCTYPE html>
<html>
<head> <title>Heading elements</title> </head>
<body>
<h1>This is main heading of page. </h1>
<p>h1 is the most important heading, which is used to display the keyword of page </p>
<h2>This is first sub-heading</h2>
<p>h2 describes the first sub heading of page. </p>
<h3>This is Second sub-heading</h3>
<p>h3 describes the second sub heading of page.</p>
<p>We can use h1 to h6 tag to use the different sub-heading with their paragraphs if
required. </p>
</body>
</html>

Page 9
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
Layouts
 HTML layouts are the backbone of web pages, which are used for structuring content for
user-friendly navigation.
 HTML layout structures the web page using elements such as <header>, <nav>, <main>,
<article>, <section>, <aside> and <footer>.
 Techniques for Creating HTML Layouts: There are several techniques to create multi-
column layouts in HTML:
 CSS Frameworks (like Bootstrap): Speed up layout design with pre-built
components and grid systems.
 CSS Float Property: A classic way to position elements, but be aware of how it
interacts with normal document flow.
 CSS Flexbox: Ideal for dynamic layouts, easily adjusting content across different
screen sizes.
 CSS Grid: Create complex, two-dimensional layouts with ease.

 <header>: It is used to define a header for a document or a section.


 <nav>: It is used to define a container for navigation links
 <section>: It is used to define a section in a document
 <article>: It is used to define an independent self-contained article
 <aside>: It is used to define content aside from the content (like a sidebar)
 <footer>: It is used to define a footer for a document or a section
 <details>: It is used to define additional details
 <summary>: It is used to define a heading for the <details> element
Example
<!DOCTYPE html>
<html> <head> <title>Page Layout Example</title>
<style>
.head1 {
font-size: 40px;
color: #009900;

Page 10
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
font-weight: bold;
}

.head2 {
font-size: 17px;
margin-left: 10px;
margin-bottom: 15px;
}

body {
margin: 0 auto;
background-position: center;
background-size: contain;
}

.menu {
position: sticky;
top: 0;
background-color: #009900;
padding: 10px 0px 10px 0px;
color: white;
margin: 0 auto;
overflow: hidden;
}

.menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}

/* .menu-log class is used to position the login link


on the right side of the menu bar */
.menu-log {
right: auto;
float: right; /* Floats the login link to the right */
}

footer {
width: 100%;

Page 11
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top: 20px;
padding-bottom: 50px;
text-align: center;
font-size: 30px;
font-weight: bold;
}

.body_sec {
margin-left: 20px;
}
</style>
</head>

<body>

<!-- Header Section -->


<header>
<div class="head1">
Welcome to KHIT
</div>
<div class="head2">
Department of CSE
</div>
</header>

<!-- Menu Navigation Bar -->


<nav class="menu">
<a href="#home">HOME</a>
<a href="#news">NEWS</a>
<a href="#notification">NOTIFICATIONS</a>
<!-- menu-log class to float it to the right -->
<div class="menu-log">
<a href="#login">LOGIN</a>
</div>
</nav>

<!-- Body section -->


<main class="body_sec">
<section id="Details of CSE">

Page 12
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
<h3>Content section</h3>
</section>
</main>
<!-- Footer Section -->
<footer>Footer Section</footer>
</body>
</html>

HTML Media
 HTML5 has revolutionized the way we consume multimedia content on the web. Web
developers can create immersive and interactive multimedia experiences that rival those
of traditional desktop applications.
 However, with great power comes great responsibility. As the amount of multimedia
content on the web grows, so does the need to organize and manage it effectively. This is
where multimedia tags in HTML5 come in.
 In HTML5, multimedia tags are used to embed audio, video, and other types of
multimedia content into web pages. These tags provide a standardized way of playing
multimedia content across different browsers and devices.

1) <audio>- This tag is used to embed audio files, such as music or podcasts, into web
pages.
<audio src="audiofile.mp3" controls>
Your browser does not support the audio element.
</audio>

Attributes of audio tag:


 src: specifies the URL of the audio file
 controls: displays the default audio player controls
 autoplay: automatically starts playing the audio when the page loads
 loop: continuously repeats the audio file
 preload: specifies whether the audio should be preloaded or not

2) <video>- This tag is used to embed video files, such as movies or TV shows, into web
pages.
<video src="videofile.mp4" controls>
Your browser does not support the video element.
</video>

Attributes of video tag:


 src: specifies the URL of the video file
 controls: displays the default video player controls
 autoplay: automatically starts playing the video when the page loads
 loop: continuously repeats the video file
 preload: specifies whether the video should be preloaded or not
 poster: specifies an image to be displayed before the video starts playing
 width and height: specifies the dimensions of the video display area in pixels

Page 13
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

3) <source>- This tag is used to specify alternative versions of media files, such as different
formats or bitrates, which the browser can choose from based on the user's device and
internet connection.
<video controls>
<source src="videofile.mp4" type="video/mp4">
<source src="videofile.webm" type="video/webm">
Your browser does not support the video element.
</video>

Attributes of source
 src: specifies the URL of the multimedia file
 type: specifies the MIME type of the multimedia file

4) <track>- This tag is used to add subtitles or captions to video or audio files.
<video controls>
<source src="videofile.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en">
Your browser does not support the video element.
</video>

Attributes of track
 src: specifies the URL of the subtitles file
 kind: specifies the type of subtitles (e.g., subtitlesor captions)
 srclang: specifies the language of the subtitles
 label: specifies a label for the subtitles

5) <picture>- This tag is used to specify different versions of an image that can be displayed
depending on the user's device and screen size.
<picture>
<source media="(min-width: 1200px)" srcset="largeimage.jpg">
<source media="(min-width: 768px)" srcset="mediumimage.jpg">
<img src="smallimage.jpg" alt="Small Image"> </picture>

Attributes of picture
 <source>tags: the same attributes as for the <source>tag in the <video>tag, plus the
mediaattribute, which specifies the conditions under which the image should be
displayed
 <img>tag: the same attributes as for the <img>tag in HTML, such as src, alt, width,
and height.

Advantage of Media tag:


 Plugins are no longer required
 Speed – anything naturally integrated into a browser will be rendered and executed in a
faster fashion than imported third-party
 Native (built-in) controls are provided by the browser.
 Accessibilities (keyboard, mouse) are built-in automatically.

Page 14
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
Iframes Images
Images
 In HTML, images are a type of multimedia content that can be embedded within a web page.
They are used to enhance the visual presentation of a webpage by displaying pictures,
diagrams, illustrations, or other types of graphics.
 To insert an image in HTML, you need to use the <img> tag. The <img> tag is an empty
element, which means it doesn't have a closing tag. Instead, you need to specify the image
source (URL) and other attributes within the opening tag.

<img src="image.jpg" alt="Image description">


Attributes of image
1. src: This attribute is used to specify the source URL of the image file.
2. alt: This attribute provides alternative text for the image, which is used by screen readers and
other assistive technologies to describe the image to users who cannot see it.
3. width and height: These attributes specify the width and height of the image in pixels. They
can be used to resize the image to fit within a certain area of the web page.
4. title: This attribute provides additional information about the image when the user hovers
their mouse over it.
5. style: This attribute can be used to apply CSS styles to the image, such as border, padding,
margin, etc.

<img src="example.jpg" alt="Example image" width="300" height="200" style=”border:


1px solid black”>

Iframes
 The term "iframe" stands for "inline frame". Iframes are HTML tags that allow you to embed
content from another website or web page within a frame on your own web page.
 The <iframe> tag specifies the URL of the external content, enabling seamless integration
of videos, maps, forms, or entire web pages into your site.
<iframe src="URL" title="description"></iframe>
 There are two types of URL links
URL Descriptions

Absolute URL It points to another webpage.

It points to other files of the same


Relative URL
web page.

Attributes of Iframe
Attributes Description

Specifies a set of extra restrictions on the content


allow
that can be loaded in an <iframe>.

Page 15
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

Attributes Description

Indicates whether the <iframe> can be displayed


allowfullscreen
in fullscreen mode.

Enables payment requests for content inside


allowpaymentrequest
the <iframe>.

height Sets the height of the <iframe> element.

width Sets the width of the <iframe> element.

Specifies how the content of the <iframe> should


loading
be loaded.

Controls whether or not the <iframe> should have


scrolling
scrollbars.

Specifies the name of the <iframe> for targeting


name
its content or for referencing it in JavaScript.

referrerpolicy Sets the referrer policy for the <iframe> content.

Specifies an extra set of restrictions for the


sandbox
content in the <iframe>.

Specifies the URL of the document to embed in


src
the <iframe>.

Specifies the HTML content of the page to


srcdoc
display in the <iframe>.

Example 1
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>Use the CSS height and width properties to specify the size of the iframe:</p>
<iframe src="https://khitguntur.ac.in/" style="height:300px;width:400px"></iframe>
</body>
</html>

Page 16
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

Example 2
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes example</h2>
<p>Use the height and width attributes to specify the size of the iframe:</p>
<iframe src="https://vitap.ac.in/" height="300" width="400"></iframe>
</body>
</html>

Example 3
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes example</h2>
<p>Use the height and width attributes to specify the size of the iframe:</p>
<iframe src="https://vitap.ac.in/" height="300" width="400"></iframe>
<iframe src="https://khitguntur.ac.in/" style="height:300px;width:400px"></iframe>
</body>
</html>

Hypertext Links
 HTML links, or hyperlinks, connect web pages; they enable users to navigate between
pages or resources. Links can be text, images, or other elements, enhancing web navigation
and interactivity.
 Hyperlinks are created using the `<a>` tag with the `href` attribute.
 Another method for creating hyperlinks is to use the HTML DOM window.location
property to dynamically set the browser's current location. By assigning a URL to
window.location.href, we can trigger a redirection, providing hyperlink-like functionality.
<button onclick=
"window.location.href='https://www.khitguntur.ac.in/'">Visit for KHIT College
Web page </button>
 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
Syntax: <a href="url">link text</a>

Attribute Description

_blank Opens the linked document in a new window or tab.

Page 17
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

Attribute Description

Opens the linked document in the same frame or


_self
window as the link. (Default behavior)

_parent Opens the linked document in the parent frame.

Opens the linked document in the full body of the


_top
window.

Opens the linked document in a specified frame. The


framename
frame’s name is specified in the attribute.

 A Uniform Resource Locator (URL) is an address that indicates the location of a specific file
or resource on the World Wide Web (WWW). A URL specifies the site of a target saved on a
local or networked computer.
1) Absolute URL
 An absolute URL is a complete web address that specifies the exact location of a resource on
the internet, including the protocol and domain name.
 An absolute web address includes all of the following parts: Protocol (e.g., HTTP, HTTPS),
Domain name (e.g., example.com), Path (e.g., /about/), Anchor (optional).
 When to use absolute URLs :
 When linking to a resource on a different website
 When linking to a resource that is not located in the same directory as the current
page
 When you need to ensure that the link will always work, even if the website is moved
to a different domain or protocol in the future
Example:
<h2>Absolute URLs</h2>
<p><a href="https://www. khitguntur.ac.in/">KHIT College Website</a></p>
<p><a href="https://www.google.com/">Google</a></p>

2) Relative URL
 A relative link provides a shorthand way to reference a resource within the same website or
directory, rather than providing the complete web address. It’s “relative” to the current
location or page where it’s used.
 When to use relative URLs
 When linking to a resource on the same website
 When linking to a resource that is located in the same directory as the current page,
or in a subdirectory of the current page
 When you want to make your code more portable and easier to maintain
Example:

Page 18
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

Example Program using target attribte


<!DOCTYPE html>
<html>

<head>
<title>Target Attribute Example</title>
</head>

<body>
<h3> Various options available in the Target Attribute </h3>

<p>
If you set the target attribute to "_blank", the link will open in a new browser window
or tab. </p>
<a href="https://www. khitguntur.ac.in/" target="_blank"> KHIT College Page </a>

<p>
If you set the target attribute to "_self", the link will open in the same window or tab.
</p>
<a href=" https://www. khitguntur.ac.in/" target="_self"> KHIT College Page </a>

<p>
If you set the target attribute to "_top", the link will open in the full body of the
window. </p>
<a href=" https://www. khitguntur.ac.in/" target="_top"> KHIT College Page </a>

<p>
If you set the target attribute to "_parent", the link will open in the parent frame.
</p>
<a href=" https://www. khitguntur.ac.in/" target="_parent"> KHIT College Page
</a>
</body>
</html>

Page 19
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

Lists
 An HTML list is a structured record of related information used to display data or
information on web pages in an ordered or unordered form.
 There are three main types of lists in HTML:
1) Unordered Lists
2) Ordered Lists
3) Description Lists
 List of all lists tags HTML:

Unordered Lists: The unordered list items are marked with bullets, also known as bulleted lists.
An unordered list starts with the <ul> tag, and each list item begins with the <li> tag.
Syntax: <ul> list of items </ul>

Attribute:
1) compact: It will render the list smaller.
2) type: It specifies which kind of marker is used in the list.

Example:
<!DOCTYPE html>
<html> <head> <title> Example for unordered list </title> </head>

<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>

Page 20
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
Ordered Lists: In an ordered list, all list items are marked with numbers by default. An ordered
list starts with the <ol> tag, and each list item begins with the <li> tag.
Syntax: <ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>

Attributes:
1) compact: It defines the list should be compacted (compact attribute is not supported in
HTML5. Use CSS instead.).
2) reversed: It defines that the order will be descending.
3) start: It defines from which number or alphabet the order will start.
4) 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:
<!DOCTYPE html>
<html>
<head>
<title>HTML ol tag</title>
</head>

<body>
<h1 style="color: green">Final Year Subjects</h1>
<h3>HTML ol tag</h3>

<p>reversed attribute</p>

<ol reversed>
<li>CC</li>
<li>WT</li>
<li>CSP</li>
</ol>

<p>start attribute</p>

<ol start="5">
<li>CC</li>
<li>WT</li>
<li>CSP</li>
</ol>

<p>type attribute</p>

<ol type="i">
<li>CC</li>
<li>WT</li>
<li>CSP</li>

Page 21
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
</ol>
</body>
</html>

Description Lists: A description list is a list of terms, with a description of each term. The <dl>
tag defines the description list, the <dt> tag defines the term name, and the <dd> tag describes
each term. The HTML definition list contains following three tags:
<dl> tag defines the start of the list.
<dt> tag defines a term.
<dd> tag defines the term definition (description).

Syntax: <dl> Contents... </dl>

Example:
<!DOCTYPE html>
<html>

<body>
<h2> Description List of CSE Department</h2>
<dl>
<dt>II<sup>nd</sup>Year</dt>
<dd>4 Sections (A,B,C,D)</dd>
<dt>III<sup>rd</sup>Year</dt>
<dd>4 Sections (A,B,C,D)</dd>
<dt>IV<sup>th</sup>Year</dt>
<dd>3 Sections (A,B,C)</dd>
</dl>
</body>
</html>

Tables
 A table in HTML refers to the arrangement of data in rows and columns.
 An HTML table is created using the <table> tag. Inside this tag, you use
 <tr> to define table rows,
 <th> for table headers, and
 <td> for table data cells
 Tags used in HTML Tables
HTML Tags Descriptions

Defines the structure for


<table> organizing data in rows and
columns within a web page.

Page 22
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

HTML Tags Descriptions

Represents a row within an


<tr> HTML table, containing
individual cells.

Shows a table header cell


<th> that typically holds titles or
headings.

Represents a
<td> standard data cell, holding
content or data.

Provides a title or
<caption> description for the entire
table.

Defines the header section of


<thead> a table, often containing
column labels.

Represents the main content


<tbody> area of a table, separating it
from the header or footer.

Specifies the footer section


<tfoot> of a table, typically holding
summaries or totals.

Defines attributes for


table columns that can be
<col>
applied to multiple columns
at once.

Page 23
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

HTML Tags Descriptions

Groups together a set of


columns in a table to which
<colgroup>
you can apply formatting or
properties collectively.

Example
<!-- index.html -->
<!DOCTYPE html>
<html>

<body>
<table>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Genre</th>
</tr>
<tr>
<td>The Book Thief</td>
<td>Markus Zusak</td>
<td>Historical Fiction</td>
</tr>
<tr>
<td>The Cruel Prince</td>
<td>Holly Black</td>
<td>Fantasy</td>
</tr>
<tr>
<td>The Silent Patient</td>
<td> Alex Michaelides</td>
<td>Psychological Fiction</td>
</tr>
</table>
</body>
</html>

Styling Table: Styling an HTML table can significantly improve its appearance and readability.
You can use CSS.
1) Adding a Border

Page 24
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
<!-- index.html -->
<!DOCTYPE html>
<html>

<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>

<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

2) Adding Collapsed Borders


<html>
<head>

Page 25
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>

3) Adding Cell Padding


<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 20px;
}
</style>
</head>

4) Adding Left Align Headings


<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 20px;
}

Page 26
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

th {
text-align: left;
}
</style>
</head>

5) Adding Border Spacing


<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}

table {
border-spacing: 5px;
}
</style>
</head>

6) Adding Cells that Span Many Columns


<body>
<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>

7) Adding Cells that span many rows


<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Dr. Vamshi Krishna K</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>8143260297</td>

Page 27
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
</tr>

8) Adding a Caption
<body>
<table style="width:100%">
<caption>DETAILS</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>

9) Adding a Background Colour


<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 5px;
text-align: left;
width: 100%;
background-color: #f2f2d1;

</style>
</head>

10) Creating Nested Tables


<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<table border=5 bordercolor=black>
<tr>
<td> First Column of Outer Table </td>
<td>
<table border=5 bordercolor=grey>
<tr>
<td> First row of Inner Table </td>

Page 28
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
</tr>
<tr>
<td> Second row of Inner Table </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Forms
 Web forms are one of the main points of interaction between a user and a website or
application.
 HTML Forms use the <form> tag to collect user input through various interactive controls.
These controls range from text fields, numeric inputs, and email fields to password fields,
checkboxes, radio buttons, and submit buttons.
Syntax: <form>
<!--form elements-->
</form>
 Form Elements: The HTML <form> comprises several elements, each serving a unique
purpose.
Elements Descriptions

<label> It defines labels for <form> elements.

It is used to get input data from the form in various


<input> types such as text, password, email, etc by changing
its type.

It defines a clickable button to control other elements


<button>
or execute a functionality.

<select> It is used to create a drop-down list.

<textarea> It is used to get input long text content.

<fieldset> It is used to draw a box around other form elements

Page 29
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

Elements Descriptions

and group the related data.

<legend> It defines a caption for fieldset elements

It is used to specify pre-defined list options for input


<datalist>
controls.

<output> It displays the output of performed calculations.

<option> It is used to define options in a drop-down list.

It is used to define group-related options in a drop-


<optgroup>
down list.

 Commonly Used Input Types in HTML Forms: In HTML forms, various input types are
used to collect different types of data from users. Here are some commonly used input
types:
Input Type Description

<input type=”text”> Defines a one-line text input field

<input type=”password”> Defines a password field

<input type=”submit”> Defines a submit button

<input type=”reset”> Defines a reset button

<input type=”radio”> Defines a radio button

Validates that the input is a valid


<input type=”email”>
email address.

Page 30
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

Input Type Description

Allows the user to enter a number.


<input type=”number”> You can specify min, max, and step
attributes for range.

Used for checkboxes where the user


<input type=”checkbox”>
can select multiple options.

Allows the user to select a date from


<input type=”date”>
a calendar.

<input type=”time”> Allows the user to select a time.

Allows the user to select a file to


<input type=”file”>
upload.

Example Program
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Form</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

form {
width: 400px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

Page 31
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
}

fieldset {
border: 1px solid black;
padding: 10px;
margin: 0;
}

legend {
font-weight: bold;
margin-bottom: 10px;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
input[type="date"] {
width: calc(100% - 20px);
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}

.gender-group {
margin-bottom: 10px;
}

.gender-group label {
display: inline-block;
margin-left: 10px;
}

input[type="radio"] {
margin-left: 10px;
vertical-align: middle;

Page 32
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
}

input[type="submit"] {
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>

<body>
<form>
<fieldset>
<legend>User Personal Information</legend>
<label for="name">Enter your full name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" required />
<label for="password">Enter your password:</label>
<input type="password" id="password" name="pass" required />
<label for="confirmPassword">Confirm your password:</label>
<input type="password" id="confirmPassword" name="confirmPass" required
/>
<label>Enter your gender:</label>
<div class="gender-group">
<input type="radio" name="gender" value="male" id="male" required />
<label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female" />
<label for="female">Female</label>
<input type="radio" name="gender" value="others" id="others" />
<label for="others">Others</label>
</div>
<label for="dob">Enter your Date of Birth:</label>
<input type="date" id="dob" name="dob" required />
<label for="address">Enter your Address:</label>
<textarea id="address" name="address" required></textarea>
<input type="submit" value="Submit" />
</fieldset>
</form>
</body>
</html>

Page 33
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
GET and POST method
 The method attribute in the <form> element specifies how the data is sent to the server.
 HTTP methods declare what action is to be performed on the data that is submitted to the
server. HTTP Protocol provides several methods, and the HTML Form element is able to use
two methods to send user data:
1) GET method - used to request data from a specified resource
2) POST method - used to send data to a server to update a resource

The GET method:


<form method="get" action="www.KHIT.ac.in/search">
<input type="search" name="location" placeholder="Search.." />
<input type="submit" value="Go" />
</form>
 When we submit the above form by entering Guntur in the input field, the request sent to the
server will be www.KHIT.ac.in/search/?location=Guntur.
 The HTTP GET method adds a query string at the end of the URL to send data to the server.
The query string is in the form of key-value pair followed by ? symbol.
 From the URL, the server can parse the user-submitted value where:
key - location
value - Guntur

The POST method:


<form method="post" action=" www.KHIT.ac.in/user">
<label for="firstname">First name:</label>
<input type="text" name="firstname" /><br />
<label for="lastname">Last name:</label>
<input type="text" name="lastname" /><br />
<input type="submit" />
</form>
When we submit the form, it will add the user input data to the body of the request sent to the server.

GET vs POST
GET POST

Data sent with the GET


Data sent with the POST
method is visible in the
method is not visible.
URL.

GET requests can be POST requests can't be


bookmarked. bookmarked.

Page 34
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

GET requests can be POST requests can't be


cached. cached.

GET requests have a


POST requests do not
character limit of 2048
have a limit.
characters.

Only ASCII characters are All data is allowed in


allowed in GET requests. POST request

HTML 5
 HTML5 described as a new version of HTML is a successor to previous HTML versions and
introduced new elements and capabilities such as Application Programming Interfaces (API),
hardware access and Document Object Model (DOM).
 Features:
 It has introduced new multimedia features which supports both audio and video
controls by using <audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>, <section> and
<figure> are added.
 Drag and Drop- The user can grab an object and drag it further dropping it to a new
location.
 Geo-location services- It helps to locate the geographical location of a client.
 Web storage facility which provides web application methods to store data on the
web browser.
 Uses SQL database to store data offline.
 Allows drawing various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e., <!doctype html>
 Easy character encoding i.e., <meta charset=”UTF-8″>

 Removed or alternate elements


Removed Elements Use Instead Elements

<acronym> <abbr>

<applet> <object>

<basefont> CSS

Page 35
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

Removed Elements Use Instead Elements

<big> CSS

<center> CSS

<dir> <ul>

<font> CSS

<frame>

<frameset>

<noframes>

<isindex>

<strike> CSS, <s> or <del>

<tt> CSS

Added elements
 <article>: The <article> tag is used to represent an article.
 <aside>: The <aside> tag is used to describe the main object of the web page in a shorter way
like a highlighter.
 <figcaption>: The <figcaption> tag in HTML is used to set a caption to the figure element in a
document.
 <figure>: The <figure> tag in HTML is used to add self-contained content like illustrations,
diagrams, photos or codes listing in a document
 <header>: It contains the section heading as well as other content, such as a navigation links,
table of contents, etc.
 <footer>: The <footer> tag in HTML is used to define a footer of HTML document.
 <main>: Delineates the main content of the body of a document or web app.
 <mark>: The <mark> tag in HTML is used to define the marked text. It is used to highlight the
part of the text in the paragraph.
 <nav>: The <nav> tag is used to declaring the navigational section in HTML documents..
 <section>: It demarcates a thematic grouping of content.
 <details>: The <details> tag is used for the content/information which is initially hidden but
could be displayed if the user wishes to see it.
 <summary>: The <summary> tag in HTML is used to define a summary for the <details>
element.

Page 36
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
 <time>: The <time> tag is used to display the human-readable data/time. It can also be used to
encode dates and times in a machine-readable form.
 <bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It differentiates a text from other
text that may be formatted in different direction.
 <wbr>: The <wbr> tag in HTML stands for word break opportunity and is used to define the
position within the text which is treated as a line break by the browser.
 <datalist>: The <datalist> tag is used to provide autocomplete feature in the HTML files. It
can be used with input tag, so that users can easily fill the data in the forms using select the
data.
 <keygen>: The <keygen> tag in HTML is used to specify a key-pair generator field in a form.
The purpose of <keygen> element is to provide a secure way to authenticate users.
 <output>: The <output> tag in HTML is used to represent the result of a calculation performed
by the client-side script such as JavaScript.
 <progress>: It is used to represent the progress of a task. It also defines how much work is
done and how much is left to download a task.
 <svg>: It is the Scalable Vector Graphics.
 <canvas>: The <canvas> tag in HTML is used to draw graphics on web page using JavaScript.
It can be used to draw paths, boxes, texts, gradient and adding images. By default, it does not
contain border and text.
 <audio>: It defines the music or audio content.
 <embed>: Defines containers for external applications (usually a video player).
 <source>: It defines the sources for <video> and <audio>.
 <track>: It defines the tracks for <video> and <audio>.
 <video>: It defines the video content.

Advantages:
 All browsers supported.
 More device friendly.
 Easy to use and implement.
 HTML 5 in integration with CSS, JavaScript, etc. can help build beautiful websites.

Disadvantages:
 Long codes have to be written which is time consuming.
 Only modern browsers support it.

Dynamic HTML
 DHTML, or Dynamic HTML, is a technology that differs from traditional HTML.
DHTML combines HTML, CSS, JavaScript, and the Document Object Model (DOM) to
create dynamic content and to modify settings, properties, and methods.

Page 37
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
 Key Features:
 Tags and their properties can be changed using DHTML.
 It is used for real-time positioning.
 Dynamic fonts can be generated using DHTML.
 It is also used for data binding.
 It makes a webpage dynamic and be used to create animations, games, applications
along with providing new ways of navigating through websites.
 The functionality of a webpage is enhanced due to the usage of low-bandwidth effect
by DHTML.
 DHTML also facilitates the use of methods, events, properties, and codes.

DHTML: JavaScript
Example: The following example simply uses the document.write() method of JavaScript in the
DHTML
<HTML>
<head>
<title>
Method of a JavaScript
</title>
</head>
<body>
<script type="text/javascript">
document.write("KHIT: Dept.. of CSE");
</script>
</body>
</html>

CSS with JavaScript in DHTML


Example:
<html>
<head>
<title>
getElementById.style.property example
</title>
</head>
<body>
<p id="demo"> This text changes color when click on the following different buttons. </p>
<button onclick="change_Color('green');"> Green </button>
<button onclick="change_Color('blue');"> Blue </button>
<script type="text/javascript">
function change_Color(newColor) {
var element = document.getElementById('demo').style.color = newColor;
}
</script>
</body>
</html>

Page 38
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
CSS: Cascading style sheets
 CSS (Cascading Style Sheets) is a language designed to simplify the process of making web
pages presentable.
 It allows you to apply styles to HTML documents, describing how a webpage should look
by prescribing colors, fonts, spacing, and positioning.
 It provides developers and designers with powerful control over the presentation of HTML
elements.
 HTML uses tags and CSS uses rulesets. CSS styles are applied to the HTML element using
selectors.
 Benefits of using CSS
 Saves Time: Write CSS once and reuse it across multiple HTML pages.
 Easy Maintenance: Change the style globally with a single modification.
 Search Engine Friendly: Clean coding technique that improves readability for
search engines.
 Superior Styles: Offers a wider array of attributes compared to HTML.
 Offline Browsing: CSS can store web applications locally using offline cache,
allowing offline viewing.
 CSS consists of style rules that are interpreted by the browser and applied to the
corresponding elements. CSS declaration always ends with a semicolon, and declaration
blocks are surrounded by curly braces. A style rule set includes a selector and a declaration
block.
 Selector: Targets specific HTML elements to apply styles.
 Declaration: Combination of a property and its corresponding value.

Syntax:
// HTML Element
<h1>Dr. Vamshi Krishna K</h2>

// CSS Style
h1 { color: blue; font-size: 12px; }

Where :- Selector - h1 , Declaration - { color: blue; font-size: 12px; }


o The selector points to the HTML element that you want to style.
o The declaration block contains one or more declarations separated by semicolons.
o Each declaration includes a CSS property name and a value, separated by a colon.

Example
<!DOCTYPE html>
<html>
<head>
<title>Simple web page</title>
<style>
main {
width: 600px;
height: 200px;
padding: 10px;
background: beige;

Page 39
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
}

h1 {
color: blue;
border-bottom: 1px dotted darkgreen;
}

p{
font-family: sans-serif;
color: orange;
}
</style>
</head>

<body>
<main>
<h1>My first Page</h1>
<p>This is a basic web page.</p>
</main>
</body>
</html>

Levels of Style Sheets


 There are three levels or types of style sheets

1) Inline CSS involves applying styles directly to individual HTML elements using the style
attribute. This method allows for specific styling of elements within the HTML document,
overriding any external or internal styles.
Example:
<p style="color:#009900;
font-size:50px;
font-style:italic;
text-align:center;">

Page 40
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
Dr. Vamshi Krishna K
</p>

2) Internal or Embedded CSS is defined within the HTML document’s <style> element. It applies
styles to specified HTML elements. The CSS rule set should be within the HTML file in the head
section i.e. the CSS is embedded within the <style> tag inside the head section of the HTML file.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main {
text-align: center;
}

.name {
color: #009900;
font-size: 50px;
font-weight: bold;
}

.dest {
font-style: bold;
font-size: 20px;
}
</style>
</head>

<body>
<div class="main">
<div class="name">Dr. Vamshi Krishna K</div>

<div class="dest">
Associate Professor
</div>
</div>
</body>
</html>

3) External CSS contains separate CSS files with .css extension that contain only style properties
with the help of tag attributes (For example class, id, heading, … etc) and should be linked to the
HTML document using a link tag. It means that, for each element, style can be set only once and
will be applied across web pages.
Example:
Filename.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">

Page 41
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
</head>
<body>
<div class="main">
<div class="name">Dr. Vamshi Krishna K </div>
<div id="dest">
Associate Professor
</div>
</div>
</body>
</html>

style.css
body {
background-color: powderblue;
}

.main {
text-align: center;
}

.name {
color: #009900;
font-size: 50px;
font-weight: bold;
}

#dest {
font-style: bold;
font-size: 20px;
}

Style Specification Formats


Format depends on the level of the style sheet

Page 42
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

Page 43
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

Selector Forms
 CSS selectors target the HTML elements on your pages, allowing you to add styles based
on their ID, class, type, attribute, and more.
 Types of CSS selectors
1) Simple selectors: It is used to select the HTML elements based on their element name, id,
attributes, etc
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Selectors</title>
<link rel="stylesheet" href="style.css" />
</head>

Page 44
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

<body>
<h1>Sample Heading</h1>
<p>This is Content inside first paragraph</p>
<div id="div-container">
This is a div with id div-container
</div>
<p class="paragraph-class">
This is a paragraph with class paragraph-class
</p>
</body>
</html>

2) Element selectors: The element selector selects HTML elements based on the element name (or
tag) for example p, h1, div, span, etc.
Example:
h1 {
color: red;
font-size: 3rem;
}
p{
color: white;
background-color: gray;
}

3) Id selectors: The id selector uses the id attribute of an HTML element to select a specific
element. An id of the element is unique on a page to use the id selector.
Example:
#div-container{
color: blue;
background-color: gray;
}

4) Class selector: The class selector selects HTML elements with a specific class attribute.
Example:
.paragraph-class {
color:white;
font-family: monospace;
background-color: purple;
}

5) Universal selector: The Universal selector (*) in CSS is used to select all the elements in an
HTML document. It also includes other elements which are inside under another element.
Example:
*{
color: white;
background-color: black;
}

Page 45
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
6) Group selectors: The Group selector is used to style all comma-separated elements with the same
style.
Example:
#div-container, .paragraph-class, h1{
color: white;
background-color: purple;
font-family: monospace;
}

7) Attribute selector: The attribute selector [attribute] is used to select the elements with a specified
attribute or attribute value.
Example:
[href] {
background-color: lightgreen;
color: black;
font-family: monospace;
font-size: 1rem;
}

The Box Model


 The CSS Box Model is a layout model that describes how different components of a web
element (content, padding, border, and margin) are structured and positioned.
 Key components of the box model
1. Content Area
 The content area is where the actual content, such as text, images, or other media, is
displayed.
 It is sized using the width and height properties.
 The boundary of the content area is known as the content edge.
2. Padding Area
 The padding surrounds the content area and creates space inside the border.
 It can be adjusted using the padding property (or padding-top, padding-right, padding-
bottom, and padding-left for individual sides).
 The padding area increases the overall size of the element without changing the
content area.
3. Border Area
 The border wraps around the padding and content, defining the edge of the element.
 It can be styled using properties such as border width border color, border style, and
border-color.
 The width of the border affects the overall size of the element.
4. Margin Area
 The margin is the outermost space that separates the element from adjacent elements.
 It can be set using the margin property (or margin-top, margin-right, margin-bottom,
and margin-left for individual sides).
 Unlike padding and borders margin does not increase the element’s total size but
affects its placement on the page.

Page 46
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

Calculating Total Width and Height


To calculate the full size of an element, use the following formulas:
Total Width Calculation
Total element width = width + left padding + right padding + left border + right border
 Total width of the element is 94px.
 Total width = 80px (width) + 10px (left padding + right padding) + 4px (left border + right
border) = 94px.

Total Height Calculation


Total element height = height + top padding + bottom padding + top border + bottom border
 Total height of the element is 84px.
 Total height = 70px (height) + 10px (top padding + bottom padding) + 4px (top border +
bottom border) = 84px.

Conflict Resolution
 CSS conflicts between selectors occur when two or more selectors have conflicting styles
applied to the same element, leading to unexpected results. In such cases, the browser has to
decide which style to apply to the element.
 There are three reasons for CSS style conflict:
1) Specificity: The more specific selector will override the less specific one. Specificity is
calculated based on the number of elements, classes, and IDs in the selector. For example,
the selector with an ID has a higher specificity than the one with a class, and the one with
a class has a higher specificity than the one with an element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
p{

Page 47
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
color: blue;
}
.special {
color: red;
}
</style>
</head>
<body>
<p class="special">This is a red text.</p>
</body>
</html>

2) Inheritance: Inheritance is the process by which styles applied to a parent element are
passed down to its child elements. If two selectors have the same specificity, the one that
comes later in the stylesheet will override the earlier one. If one of the conflicting styles is
inherited, the browser will use the inherited style over the non-inherited style, even if the
non-inherited style has a higher specificity or is defined later in the cascade order.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
/* Style applied to the parent element */
.parent {
font-size: 14px;
}
/* Conflicting style applied to
the child element */
.child {
font-size: 16px;
}
</style>
</head>
<body>
<div class="parent">
<p>
Parent element with font-size of 14px
</p>
<div class="child">
<p>
Child element with conflicting
font-size of 16px
</p>
</div> </div>
</body> </html>

Page 48
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
3) !important: The styles marked with the !important keyword will always take precedence
over any other styles.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
p{
color: blue !important;
}

.special {
color: red;
}
</style>
</head>
<body>
<p class="special">This is a red text.</p>
</body>
</html>

CSS3
 CSS3, also known as Cascading Style Sheets Level 3, is a more advanced version of CSS and
the successor of CSS2.
 CSS3 is used for the same thing as CSS, namely to style web pages and make them more
attractive and user-friendly.
 In addition, CSS3 incorporates more up-to-date features designed to increase efficiency and
make it more convenient for developers to use.

Key CSS3 Features


 Advanced Animations. Animations are one of the most eye-catching features you can add to a
web page. And while CSS allows web designers to use animations, CSS3 ups the stakes with more
complex animation properties such as transforms, transitions, and special effects.

 Opacity. This property lets web designers make web page elements partially or fully transparent.
You can define the elements’ opacity levels to make them fully opaque, transparent, or even see-
through.

 Rounded Corners. Rounded corners make selected web page elements look more professional and
visually appealing. Before the introduction of the border-radius property, web developers had to
spend lots of time writing lengthy code to round off an element's corners.

 Text and Box Shadows. CSS3 features built-in support for text and box shadows, so web
designers can easily apply shadowing to different text sections and even easily define the
shadow's color, angle, and blur level.

Page 49
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297
Difference between CSS and CSS3

CSS CSS3

Year
1996 2005
Released

Media Supports responsive web


Doesn’t support
Queries design

No support for
modern browsers,
Browser but it still works on Supported fully by all
Support older versions of modern browsers
Explorer or
Chrome

Compatibility
Not compatible Backward compatible with
Between
with CSS3 CSS
Versions

Block Supports single Supports multi-column text


Support blocks only blocks

It only allows basic


It offers advanced
animations and
animations and many
doesn't support
Animation customization options. It
transformation,
Use also supports text
text animation,
animation, transformation,
transition, or 3D
and transition
animations

Responsive It doesn’t support Works with media queries,

Page 50
Dr. Vamshi Krishna K
Associate Professor, Dept. of CSE, KHIT, Guntur
[email protected], 8143260297

Design media queries, thus thus allowing responsive


not ideal for web design
making responsive
designs

It doesn’t have Can group CSS codes into


Module Use
modules convenient modules

It uses an old It offers different gradient


Color Format standard color colors and schemes like
format RGBA, HSLA, HSL, etc.

It provides average
It offers fast, excellent
performance and
Performance performance and doesn’t
requires high
use as much memory
memory usage

Page 51

You might also like