Web Technology

Course Objectives
 Enable the students to understand web-based site planning, management and
maintenance.
 Explain the concept of developing advanced HTML, CSS, JavaScript, PHP pages.
 This course enables students to develop web sites which are secure and dynamic in
nature.
 Design and implement an internet database application using existing tools and
techniques.
Course Outcomes
 CO1: Understand the web development strategies and identify the problems.
 CO2: Develop the SRS document of the project.
 CO3: To develop web page using HTML with formatting, links, tables, list and
frames
 CO4: Design a visual representation of web application.
 CO5: Implement and establish database connectivity with front end.
Course Contents
Introduction to web and HTML

Introduction to Web Designing , web development strategies – Web Server, Web Client – Browser & Web
Server, identify the problems, Develop the SRS document of the project, HTML Document, Basic
Structure –basic tag, elements, attributes, formatting, comments, marquee, text, image and email, list,
Creating Links between Documents – Creating Tables – Creating Forms – The Input Element – Select
Element – Text Area Element
Introduction to Styles sheets(CSS) and Frameworks
Introduction to DHTML, advantages and disadvantages of DHTML, Object Model – Underlying
Principles of the DHTML, Basic Components of DHTML, XHTML: Syntax and Semantics,
Introduction to Styles sheets and Frameworks Cascading Style Sheets: Levels of Style Sheets – Style ,
Specification Formats, Selector Forms, Property-Value, Forms, Font Properties, List Properties,
Alignment of Text, Color, The Box Model, Background Images, The span and div Tags. Frameworks:
Overview and Basics of Responsive CSS Frameworks
Course Contents
JavaScript
Java script: Introduction, documents, forms, statements, functions, objects; Event and event
handling; Error handling; validation.
Introduction to Data Interchange Formats (XML)
XML: The Syntax of XML, XML Document Structure, Namespaces, XML Schemas, Displaying
Raw XML Documents, Displaying XML Documents with CSS, XSLT Style Sheets, XML
Applications.
JSON(Basics Only): Overview, Syntax, Datatypes, Objects, Schema, Comparison with XML.
XML: DTD, XML schemes, presenting and using XML.
PHP
PHP (Hypertext Preprocessor): Introduction, syntax, variables, strings, operators, if-else, loop,
switch, array, function, form ,mail, file upload, session, error, exception, filter, PHP-ODBC
Text and Reference Books
Text Books:
T1. Ivan Bayross -Web Enabled Commercial Application Development Using HTML, DHTML, Java Script,
Perl, CGI-2000
T2. Uttam/Roy,” WEB Technology”, Oxford Publication.

Reference Books:
R1. Xavier, C, “ Web Technology and Design” , New Age International
R2. Deitel, “Java for programmers”, Pearson Education
R3. Ramesh Bangia, “Internet and Web Design” , New Age International
R4. Jackson, “Web Technologies” Pearson Education
R5. Patel and Barik, ”Introduction to Web Technology & Internet”, Acme Learning
Introduction to Web Designing
 Web Design is a field related to designing websites on the Internet. Without a good
design, a website fails to perform well and cannot produce a good impact on the
user. Design is a creative process that affects the ranking of the brand. A good
website design helps to create an engaging online presence that captivates the
audience.
 Web Designing is the art of making websites look and feel good to the user and
providing easy access to the website features to the client. It focuses on improving
the user experience rather than development.
 Web design is the planning and creation of websites. This includes the information,
user interface, site structure, navigation, layout, colors, fonts and imagery.
 All of these are combined with the principal of web designing to create a website
that meets the goals of the owner and designer
 Types of Web Design
The following are the types in which you can do Web Design:
1. Static Website: This type of design is used when little or no interaction is required from the user.
2. Dynamic Website: When user interaction is required and information is to be displayed according to
the request then a dynamic design pattern is followed.
3. E-commerce Website: This type of website design is required when a business wants to sell their
products to the consumer.
4. Flat Design: Minimalist approach characterized by clean, simple elements, vibrant colors, and absence
of textures or gradients.
5. Neuromorphic Design: Mimics physical interactions and textures, creating interfaces that blend
realism with digital functionality.
6. Minimalism Design: Focuses on stripping away unnecessary elements, favoring simplicity, clean lines,
and ample white space for an uncluttered user experience.
Types of Websites:
1. Static Website
Static websites are also known as flat or stationary websites. They are loaded on the client’s
browser as exactly they are stored on the web server. Such websites contain only static
information. User can only read the information but can’t do any modification or interact with
the information.
Static websites are created using only HTML. Static websites are only used when the information
is no more required to be modified.
2. Dynamic Website
Dynamic websites shows different information at different point of time. It is possible to change
a portion of a web page without loading the entire web page. It has been made possible
using Ajax technology.
Server-side dynamic web page
It is created by using server-side scripting. There are server-side scripting parameters that
determine how to assemble a new web page which also include setting up of more client-side
processing.
Client-side dynamic web page
It is processed using client side scripting such as javascript. And then passed in to Document
Object Model (DOM).
2. Dynamic Website
Web Design Process
Web Development Technologies
Website Designing
Web designing has direct link to visual aspect of a web site. Effective web design
is necessary to communicate ideas effectively.
Wireframe
Wireframe refers to a visual guide to appearance of web pages. It helps to define
structure of web site, linking between web pages and layout of visual elements.
Following things are included in a wireframe:
• Boxes of primary graphical elements
• Placement of headlines and sub headings
• Simple layout structure
• Calls to action
• Text blocks
Web Page Anatomy
A web site includes the following components:
Containing Block
Container can be in the form of page’s body tag, an all containing div tag.
Without container there would be no place to put the contents of a web page.
Logo
Logo refers to the identity of a website and is used across a company’s various
forms of marketing such as business cards, letterhead, brouchers and so on.
Navigation
The site’s navigation system should be easy to find and use. Oftenly the
anvigation is placed rigth at the top of the page.
Web Page Anatomy
Content
The content on a web site should be relevant to the purpose of the web site.
Footer
Footer is located at the bottom of the page. It usually contains copyright,
contract and legal information as well as few links to the main sections of the
site.
Whitespace
It is also called as negative space and refers to any area of page that is not
covered by type or illustrations.
Web Development Strategies
The web development strategies are listed below:
1. Responsive Web Design
2. Performance Optimization
3. User-Centered Design
4. Security Measures
5. Cross-Browser Compatibility
6. Mobile-First Development
7. Content Management and SEO
1. Responsive Web Design
 Responsive web design makes websites that work well on various devices, like
computers, tablets, and phones. It means designing and building websites so
they can change and look good no matter what device you're using.

 To make responsive web design work, you should follow some rules, starting
with a mobile-friendly design, using flexible layouts and pictures, and testing
your site on different devices.

 Responsive web design is just the first step in your journey to making your
business successful. Keep reading to learn more ways to improve your online
presence.
2. Performance Optimization
 The significance of website speed, often underscored by the keyword web
development strategies, cannot be overstated. In today's digital landscape, users
expect websites to load swiftly and efficiently.
 A slow-loading site can lead to high bounce rates, negatively impacting user
experience—a critical consideration in web design strategies. Moreover, it can affect
search engine rankings, another reason why developing web strategy should
encompass performance optimization.
 Efficient web development strategies encompass a multitude of techniques for
optimizing website performance. Minimizing HTTP requests, optimizing images, and
leveraging browser caching are fundamental practices.
 Reducing server response times and employing content delivery networks (CDNs) are
additional elements in a comprehensive web development strategy. Efficient code
practices, such as minification, are essential web development strategy components.
3. User-Centered Design
 When it comes to web development strategies, user-centered design takes center stage.
 This approach recognizes the paramount importance of catering to the needs and
preferences of your audience.
 In the competitive online landscape, it's not just about aesthetics but also about
creating an intuitive and enjoyable user experience.
 Web development strategy without a user-centric focus risks alienating users and
missing out on their engagement
 To excel in web design strategies, understanding user needs and preferences is pivotal.
This involves conducting user research, surveys, and usability testing.
 By employing these methods, web development strategy gains valuable insights into
what resonates with the audience..
4. Security Measures
 Security is a big part of making a website that works well, not something
separate.
 There are many problems in the digital world, like hackers trying to get in,
steal information, and trick people. To make a good plan for creating websites,
you must consider how to protect your website from these problems.
 There are good ways to make your website more secure, and they should be
part of your plan. These include using encryption (HTTPS), checking the
information people put into your website, and controlling who can access your
website.
 Keep your software and code up to date, safely write code, and use strong
passwords and logins. These things are all important for a plan that focuses on
security.
5. Cross-Browser Compatibility
 After developing a website, ensure that it work the same way on all browsers?
That's where cross-browser compatibility is mandatory.
 The challenges are real! Browsers interpret code differently, leading to issues
like wonky layouts, broken features, or complete chaos.
 There are techniques in the web development strategy toolbox to tame this
beast.
 You can use standardized HTML, CSS, and JavaScript. Keep things simple and
avoid browser-specific code. Test frequently on multiple browsers and devices.
Responsive design is your friend, as it helps your site adapt gracefully to
various screen sizes and browsers.
6. Mobile-First Development
 Everyone seems glued to their smartphones these days? It's not just for making calls
and texting anymore; it's for everything! Today, the rise of mobile internet usage is a
game-changer. People are browsing, shopping, and socializing on their mobile devices
more than ever before. So, it's no surprise that mobile-first development has become a
hot topic.
 When you embrace mobile-first design principles, start with the smallest screen and
work your way up. This approach encourages simplicity, streamlined content, and a
focus on what matters most for mobile users. It's not just about squeezing a big
website into a small screen; it's about crafting a tailored experience.
 Creating mobile-friendly web experiences is about making your site feel like home on
a mobile device. Think responsive layouts, touch-friendly buttons, and content that's
easy to read on smaller screens. The key to this web development strategy is to ensure
that users on smartphones or tablets get the same great experience as those on a
desktop.
7. Content Management and SEO
 Imagine your website as a book, and each page is a chapter. What makes people
want to keep reading? It's the content!
 In web development strategies, content is the heart and soul of your digital
story. It's what informs, educates, and engages your audience. Without
compelling content, your website is like a library without any books.
 Have you ever wondered how people find things on the internet? It's often
through search engines like Google.
 That's where SEO (Search Engine Optimization) comes into play in our web
development strategy. SEO is like the road signs that guide people to your
website. It involves using keywords, meta tags, and other techniques to ensure
your site ranks well in search results.
Web Browser
 Web Browser is an Application program that displays a World wide web document. It
usually uses the internet service to access the document.
 The Web browser requests the server for the web documents and services.
 A web browser is a programme that uses websites to search the internet for information.
 The web browser acts as an interface between the server and the client and displays a web
document to the client.
 Components of web browser architecture- a controller, client program, and interpreters.
 The web browser sends an HTTP request and gets an HTTP response.
 Doesn’t exist any processing model for the web browser.
 Web browser stores the cookies for different websites.
Web Server
 A web server is a program or the computer that provide services to other programs called
client.
 The Web server accepts, approves, and responds to the request made by the web browser for
a web document or service.
 The web server is responsible for connecting websites and web browsers.
 The web server is a software or a system which maintain the web applications, generate
response and accept clients data.
 Components of web server architecture- hardware, operating system software, and Web
server software.
 The web server gets HTTP requests and sends HTTP responses.
 There exist three types of processing models for web servers i.e Process-based, Thread based,
and Hybrid.
 Web servers provide an area to store and organize the pages of the website.
HTML
Introduction
 HTML, or Hyper Text Markup Language, is the standard markup language used to
create web pages.
 It’s a combination of Hypertext, which defines the link between web pages, and
Markup language, which is used to define the text document within tags to structure
web pages.
 HTML is used to annotate text so that machines can understand and manipulate it
accordingly.
 HTML is human-readable and uses tags to define what manipulation has to be done
on the text.
 It uses HTML tags and attributes to describe the structure and formatting of a web
page.
 HTML consists of various elements, that are responsible for telling search engines
how to display page content. For example, headings, lists, images, links, and more.
HTML Example
<!DOCTYPE html>
<html>
<head>
<title>First HTML Code</title>
</head>
<body>
<h2>Welcome To HTML</h2>
<p>Hello, This is First example.</p>
</body>
</html>
Features of HTML
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.
HTML Elements and Tags
 HTML uses predefined tags and elements that instruct the browser on how to
display the content. HTML elements include an opening tag, some content, and
a closing tag. It’s important to remember to include closing tags. If omitted, the
browser applies the effect of the opening tag until the end of the page.
 Here is the basic structure of an HTML page, which includes essential building-
block elements like doctype declaration, HTML, head, title, and body elements.
 Example: <b> Hello </b>
opening tag closing tag
HTML Page Structure
HTML Page Structure
 <!DOCTYPE html> – This is the document type declaration (not technically a
tag). It declares a document as being an HTML document. The doctype
declaration is not case-sensitive.
 <html> – This is called the HTML root element. All other elements are
contained within it.
 <head> – The head tag contains the “behind the scenes” elements for a
webpage. Elements within the head aren’t visible on the front end of a
webpage. HTML elements used inside the <head> element include:
 <style> – This HTML tag allows us to insert styling into our web pages and
make them appealing to look at with the help of CSS.
HTML Page Structure
 <title> – The title is what is displayed on the top of your browser when you
visit a website and contains the title of the webpage that you are viewing.
 <base> – It specifies the base URL for all relative URL’s in a document.
 <noscript> – Defines a section of HTML that is inserted when the scripting has
been turned off in the user’s browser.
 <script> – This tag is used to add functionality to the website with the help of
JavaScript.
HTML Page Structure
 <meta> – This tag encloses the metadata of the website that must be loaded
every time the website is visited. For eg:- the metadata charset allows you to
use the standard UTF-8 encoding on your website. This in turn allows the
users to view your webpage in the language of their choice. It is a self-closing
tag.
 <link> – The ‘link’ tag is used to tie together HTML, CSS, and JavaScript. It is
self-closing.
 <body> – The body tag is used to enclose all the visible content of a webpage.
In other words, the body content is what the browser will show on the front
end.
Example
This example illustrates the basic structure of HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!--The above meta characteristics make a website compatible with different devices. -->
<title>Demo Web Page</title>
</head>
<body>
<h1>HTML </h1>
<p>A computer science portal for MCA</p>
</body>
</html>
Web Browsers
 Unlike other programming languages, HTML does not show output on the
compiler.
 Web browsers show the results of an HTML code. It reads HTML files and
determines how to show content with the help of HTML tags.
 Any web browser (Google, Safari, Mozilla Firefox, etc) can be used to open a .
HTML file and view the results.
HTML History
 HTML is a markup language used by the browser to manipulate text, images,
and other content, in order to display it in the required format. HTML was
created by Tim Berners-Lee in 1991. The first-ever version of HTML was
HTML 1.0, but the first standard version was HTML 2.0, published in 1995.
 Currently, we are using HTML5, which is the latest and most recent version of
HTML.
Advantages and Disadvantages of
HTML
Advantages
 HTML is used to build websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages
 HTML can only create static web pages. For dynamic web pages, other
languages have to be used.
 A large amount of code has to be written to create a simple web page.
 The security feature is not good.
HTML Editors
 An HTML editor is a tool/software that can create, edit, and manage HTML code.
They provide various features to simplify the process of writing HTML code.
 One can write HTML code in any text editor and save the file with an extension
“.html” or “.htm” to see the working of that file.
 Example:
1. Notepad
2. Online HTML editor
3. Brackets (Opensource)
4. Sublime Text Editor (cross platform editor)
5. Atom (opensource)
6. Visual Studio
Basic HTML Tags for Document
Structure
 <html>Encloses the entire HTML document, serving as the root element for all
HTML content.
 <head> Contains header information about the webpage, including title,
meta tags, and linked stylesheets. It is part of the document’s structure but is
not displayed on the webpage.
 <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.
 <body> Encloses the visible content of the webpage, such as text,
images, audio, videos, and links. All elements within this tag are displayed on
the actual webpage when viewed in a browser.
Example to illustrate the Basic HTML
structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<!--Contents of the webpage-->
<p>HTML Introduction</p>
</body>
</html>
HTML Headings
The HTML heading tags are used to create headings for the content of a webpage.
These tags are typically placed inside the body tag. HTML offers six heading tags,
from <h1> to <h6>, each displaying the heading in a different font size.
Syntax:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Example:
To demonstrate the use of 6 heading tags from <h1> to
<h6> in HTML.
<!DOCTYPE html> <body>
<html lang="en"> <h1>Heading 1 (h1)</h1>
<head> <h2>Heading 2 (h2)</h2>
<meta charset="UTF-8"> <h3>Heading 3 (h3)</h3>
<meta name="viewport" <h4>Heading 4 (h4)</h4>
content="width=device- <h5>Heading 5 (h5)</h5>
width, initial-scale=1.0">
<h6>Heading 6 (h6)</h6>
<title>HTML heading
tag</title> </body>
</head> </html>
Output:
HTML Paragraph and Break Elements
 HTML <p> tags are used to write paragraph statements on a webpage. They
start with the <p> tag and end with </p>.
 The HTML <br> tag is used to insert a single line break and does not require a
closing tag. In HTML, the break tag is written as <br>.
Syntax:
// for Parapgraph
<p> Content... </p>

// for Break
<br>
Example:
To illustrates the use of <p> tag for writing a
paragraph statement in HTML.
<!DOCTYPE html> <body>

<html lang="en"> <p>

HTML stands for HyperText Markup
Language.<br>
<head> It is used to design web pages using a markup
<meta charset="UTF-8"> language.<br>HTML is a combination of
Hypertext
<meta name="viewport"
and Markup language.<br>Hypertext defines the
content="width=device-width, initial-
scale=1.0"> link between web pages.<br>A markup language

<title> is used to define the text document within the

tag which defines the structure of web pages.
Example of paragraph and break elements
</p>
</title>
</body>
</head>
</html>
HTML Horizontal Line
The HTML <hr> tag is used to divide a page into sections by creating a
horizontal line that spans from the left to the right side of the page. This is an
empty tag and does not require a closing tag or any additional attributes.
Syntax:
<hr>
Example:
<!DOCTYPE html> <p>
<html lang="en"> A Computer Science portal <br>
<head> A Computer Science portal <br>
<meta charset="UTF-8"> A Computer Science portal <br>
<meta name="viewport" </p>
content="width=device-width, <hr>
initial-scale=1.0">
</body>
<title>HTML &lt;hr&gt; tag</title>
</html>
</head>
<body>
<h1>Hello Students</h1>
HTML Images
The <img> tag is used to insert an image into a webpage. The source of the
image is specified within the src attribute, like this: <img
src=”source_of_image”>.
Syntax:
<img src=" C:\Users\Akhilesh\Pictures\test.png ">
Example:
To illustrates the use of the <img> tag for inserting the
images in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML img tag</title>
</head>
<body>
<img src="C:\Users\Akhilesh\Pictures\test.png">
</body>
</html>
HTML Comments
 HTML comments are very important for developers, providing a way to
annotate code without affecting the rendered webpage.
 HTML Comments enhance code readability, facilitate collaboration, and can be
used to temporarily disable code segments.
 Enclosed within <!– and –>, HTML comments serve as invisible notes within
the code.
Single-line: The single-line comment is given inside the ( <!– comment –> ) tag.
Multi-line: It follows the syntax of a single-line comment by adding multiple
lines in the comment.
HTML Elements
 An HTML Element is a collection of start and end tags with the content
inserted between them.
 HTML elements are building blocks of web pages, representing different types
of content such as headings, paragraphs, links, and images.
Syntax:
<tagname > Contents... </tagname>
 An opening tag indicates where the content begins: <tagname>.
 A closing tag indicates where the content ends: </tagname>.
 The actual content resides between the opening and closing tags.
HTML Elements
Case Sensitivity:
 HTML tags are not case-sensitive. For example, <B> and <b> both represent
bold text.
 However, it’s a best practice to use lowercase tags for consistency.
Nested HTML Elements
 When an HTML element is used inside another, it’s called a nested element.
 For instance, the <html> tag contains the <head> and <body> tags, forming a
nested structure.
HTML Empty Element
 HTML Elements without any content i.e., that do not print anything are called
Empty elements.
 Empty HTML elements do not have an ending tag. For instance. <br>, <hr>,
<link>, <input> etc are HTML elements.
Example 2:
In this example <br> tag doesn’t print anything. It is used as a
line break that breaks the line between <h2> and <p> tags.
<!DOCTYPE html>
<html>
<head>
<title>Empty HTML Elements</title>
</head>
<body>
<h2>Welcome To Web Technology Tutorial</h2>
<br />
<p>Hello Students.</p>
</body>
</html>
HTML Attributes
 HTML attributes provide additional information about elements within an
HTML document.
 Every HTML element can have attributes. Attributes are always defined in the
start tag.
 They are specified using a name/value pair format, where the attribute name
defines the property, and its value provides specific details, like name=”value”.
These attributes impact content display and interaction on web pages.
Components of Attribute
 Id: A unique identifier for an HTML element, used for styling or JavaScript
interaction.
 Class: Defines one or more class names for an element, used for styling and applying
CSS rules.
 Src: Specifies the source URL for external resources like images, audio, or video.
 Href: Specifies the URL of the linked resource, typically used in anchor (a) elements
for hyperlinks.
 Alt: Provides alternative text for images, displayed if the image cannot be loaded
or is unavailable.
 any_custom_attr: Describes any custom attribute name and its purpose in the HTML
document.
 Syntax:
 <element attribute_name= "attribute_value">
Meta Tag Attributes
Meta tags provide essential information about HTML documents. They are self-
closing tags and significantly impact browser functionality, search engine
optimization (SEO), character set declaration, and viewport control. Here are
some commonly used meta tag attributes:
 Charset: Defines the character encoding for the HTML document.
 name: Specifies the name of the metadata attribute.
 content: Provides information associated with the specified name.
 http-equiv: Sets an HTTP header for the content, typically used for backward
compatibility.
 scheme: Specifies the format used to interpret the content value, often for data
formats.
 HTML Global Attributes
 class Groups elements and allows styling.
 style Inline CSS styles.
 src Specifies the source of various resources, such as image URLs for the img element, video URLs for
the video element, and audio URLs for the audio element.
 contenteditable Determines whether the content within the element is editable.
 role Specifies the element’s accessibility role.
 tabindex Determines the order of focus during keyboard navigation.
 id Assigns a unique identifier to an element, allowing targeting with CSS or JavaScript.
 href Defines the hyperlink destination within the a element, enabling navigation.
 alt Provides alternative text for images, essential for accessibility and SEO.
 title Creates a tooltip that appears when a user hovers over the element.
 lang Specifies the language of the element’s content, aiding with translation and accessibility.
HTML src Attribute
The src attribute in HTML specifies the URL of a resource (such as an image, audio, or video) to
be embedded or included in the webpage.
<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src= " C:\Users\Akhilesh\Pictures\test.png ">
</body>
</html>
HTML alt Attribute
The alt attribute in HTML provides alternative text for an image if the image cannot be displayed. It improves
accessibility and provides context for screen readers.
<html>
<head>
<title>alt Attribute</title>
</head>
<body>
<!--If the image is not found or the img field is left blank the alt value gets displayed-->
<img src= " C:\Users\Akhilesh\Pictures\test.png "
alt=“Table"><br>
<img src=""
alt="Since the src value is blank,the alt value is displayed">
</body>
</html>
HTML width and height Attribute
The width and height Attribute is used to adjust the width and height of an image(in pixels).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Width and Height</title>
</head>
<body>
<img src=" C:\Users\Akhilesh\Pictures\test.png "
width="300px"
height="100px">
</body>
</html>
HTML id Attribute
The id attribute in HTML assigns a unique identifier to an element, allowing it to be targeted
by CSS and JavaScript for styling and manipulation purposes.
<!DOCTYPE html>
<html>
<head>
<style>
#s1 {
color: green;
}
</style>
</head>
<body>
<h1 id=“s1">Welcome to HTML Id Attribute</h1>
</body>
</html>
HTML title Attribute
The title attribute is used to explain an element by hovering the mouse over it. The
behavior differs with various elements but generally, the value is displayed while
loading or hovering the mouse pointer over it.
<html>
<head>
<title>title Attribute</title>
</head>
<body>
<h3 title="Hello Students">Hover to see the effect</h3>
</body>
</html>
HTML href Attribute
The href attribute in HTML, used with the <a> tag, specifies a link destination. Clicking the linked text navigates to this
address. Adding `target=”_blank”` opens it in a new tab.
<!DOCTYPE html>
<html>
<head>
<title>link Attribute</title>
</head>
<body>
<a href="https://www.facebook.com/"> Click to open in the same tab</a><br>
<a href="https://www.google.com/" target="_blank">Click to open in a different tab
</a>
</body>
</html>
HTML style Attribute
The style attribute is used to provide <body>
various CSS effects to the HTML elements <h2 style="font-family:Chaparral Pro Light;">
such as increasing font-size, changing Galgotias University.
font-family, coloring, etc. </h2>
<h3 style="font-size:20px;">
<!DOCTYPE html> School of Computer Applications and
<html> Technologies.
</h3>
<head> <h2 style="color:#8CCEF9;">
MCA 3rd Sem .
<title>style Attribute</title> </h2>
</head> <h2 style="text-align:center;">
Hello Students.
</h2>
</body>
</html>
HTML lang attribute
<!DOCTYPE html> </head>
<html lang="en"> <body>
<head> <h1>GeeksforGeeks</h1>
<meta charset="UTF-8">
<h2>lang attribute</h2>
<meta name="viewport" content="width=device-
width, initial-scale=1.0"> <p lang="en">
<title>lang attribute</title> A computer science portal for geeks
<style> </p>
body { <p lang="fr" class="lang-info">
text-align: center; A computer science portal for geeks
} </p>
h1 { <p lang="es" class="lang-info">
color: green;
A computer science portal for geeks
}
.lang-info {
</p>
font-style: italic; </body>
} </html>
</style>
 HTML Headings
 HTML headings, from <h1> to <h6>, indicate content hierarchy and importance. Search engines use them for indexing.
 Users navigate by headings. Employ <h1> for main titles, <h2> for subsections, and progressively lower levels for less
important content to maintain structure and readability.
 HTML provides six levels of heading elements, ranging from <h1> (highest level) to <h6> (lowest level).
<!DOCTYPE html>
<html>
<body>
<h1>This is heading h1</h1>
<h2>This is heading h2</h2>
<h3>This is heading h3</h3>
<h4>This is heading h4</h4>
<h5>This is heading h5</h5>
<h6>This is heading h6</h6>
</body>
</html>
Why Do Headings are
Important?
1. SEO Impact:
 Search engines index headings to understand content structure.
 Well-organized headings enhance visibility and ranking.

2. Highlighting Key Topics:

 Headings emphasize essential information.
 Readers quickly grasp the document’s structure.
Align attribute
The <p> tag specifically supports the alignment attribute and allows us to align
our paragraphs in left, right, or center alignment.
Syntax:
<p align="value">
Align attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML paragraph
</title>
</head>
<body>
<p align="center">
Welcome Students
</p>
<p align="left">
Web Technology portal for Students.
</p>
<p align="right">
It contains well written articles.
</p>
</body>
The <pre> tag
 The HTML <pre> tag is used for pre-formatted text.
 It keeps the original spaces and line breaks exactly as they are in the code.
 When you use <pre>, the text appears in a fixed-width font, preserving the
formatting and layout just as it looks in the HTML code.
Syntax:
<pre> Content </pre>
The <pre> tag: Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML paragraph
</title>
</head>
<body>
<pre>
This paragraph has multiple
lines. But it is displayed
as it is unlike the paragraph
tag.
</pre>
<pre>
This paragraph has multiple
spaces. But it is displayed
as it is unlike the paragraph
tag.
</pre>
</body>
</html>
HTML Text Formatting
HTML text formatting tags enhance web content’s visual presentation and
semantic meaning. By using tags like <b>, <i>, <em>, and <strong>, you can
style text as bold, italic, emphasized, or important, improving readability and
user experience on webpages.
HTML Text Formatting
HTML text formatting can be categorized into two techniques:
1. Logical Tags
These tags denote the logical or semantic value of the text. They convey meaning without
directly affecting the visual appearance.
<em>: Emphasizes text (commonly styled as italic).
<strong>: Indicates important content (often styled as bold).
2. Physical Tags
These tags directly impact the visual appearance of the text, altering font styles, sizes, and other
visual properties.
<b>: Displays text in a bold format.
<i>: Italicizes text.
HTML Formatting Elements
Tags escriptions

<i> Showcases italicized text.

<small> Renders text in a smaller font size.

<ins> Highlights added or inserted text.

<sub> Creates subscript text.

<strong> Emphasizes text with importance, often in bold.

<b> Displays text in a bold format.

<mark> Accentuates text with a background highlight.

<del> Strikes through text to signify deletion.

<em> Adds emphasis to text, commonly styled as italic.

<sup> Formats text as superscript.

Example: Basic Text Formatting
<!DOCTYPE html> <p>
<html lang="en"> <b>Bold:</b>
<head> This text is bold.
<meta charset="UTF-8"> </p>
<title>Text Formatting Example</title> <p>
</head> <i>Italic:</i>
<body>
This text is italic.
<p>
</p>
<strong>Strong:</strong>
This text is important and bold. <p>
</p> <mark>Marked:</mark>
<p> This text is highlighted.
<em>Emphasized:</em> </p>
This text is emphasized and italic. </body>
</p> </html>
Example: Combining Logical and
Physical Tags
<!DOCTYPE html> <p>
<html lang="en"> <del>Deleted text</del> and
<head> <ins>inserted text</ins>
<meta charset="UTF-8"> are shown here.
<title>Advanced Text Formatting</title> </p>
</head> <p><small>Smaller text</small>
<body> can be used for disclaimers.
<p>This is a </p>
<strong><em>very <p>E = mc²</p>
important</em></strong> message. </body>
</p> </html>
<p>The chemical formula of water is H
₂O.
</p>
HTML Quotations
Tag Description
The HTML
Quotation elements <abbr> Defines abbreviation or acronym.
are used to insert
quoted texts in a <address> Defines contact info for the
web page, that is the author/owner of a document.
portion of texts Defines text direction, left-to-right or
different from the <bdo> right-to-left.
normal texts in the
web page. Below are Defines a section quoted from another
<blockquote> source.
some of the most
used quotation Defines the title of a work, book,
<cite>
elements of the article, or publication.
HTML.
Defines short inline quotation,
<q> enclosed in quotation marks.
HTML Quotations Examples
<!DOCTYPE html> <p>
<html> Welcome to
<head> <abbr title="Web technology">WT</abbr>
<title>HTML Quotations</title> </p>
</head> <address>
<body> <p>
<h3>Web Technology</h3> Address:<br />
<!--Normal text--> Galgotias University,<br />
<p> Plot No. 2,<br />
In this tutorial, you will learn about web Sector-17A, Greater Noida Uttar Pradesh –
technolgies.<br /> 203201
</p> </p>
<!--Inside <bdo> tag--> </address>
<p> </body>
<bdo dir="rtl">In this tutorial, you will learn </html>
about web technolgies.</bdo>
</p>
Example
<!DOCTYPE html> <!-- Inside quotes -->
<html> <q>The quick brown fox jumps over the lazy
<head> dog</q>
<title>HTML Quotations Example</title> <!-- Cite with title -->
</head> <p>
<body> The <cite>GeeksforGeeks</cite>
<h3>GeeksforGeeks</h3>
is the best site to<br>
<p>The quick brown fox jumps over the lazy
dog<br></p> search for articles and practice problems.
</p>
<!-- Inside blockquotes --> </body>
<blockquote> </html>
<p>The quick brown fox jumps
over the lazy dog
</p>
</blockquote>
HTML Colors
 HTML Colors can be applied to text, backgrounds, borders, links, forms,
tables, etc.
 HTML color names offer a user-friendly way to specify colors.
 From classic colors like Red, Green, Blue, Pink, Purple, Sky Blue, Gray, and
Orange, to more exotic shades, HTML provides a wide palette for web
designers. Whether you’re designing a serene theme or a vibrant layout, HTML
color names have got you covered.
HTML Color Usage:
Background Color
 HTML Background Color is the shade that appears behind the content on a
webpage.
 The background covers the total size of the element with padding and border
but excludes the margin. It makes the text so easy to read for the user.
Syntax:
<div style=”background-color: magenta;”>
Div with magenta background
</div>
Text Color
Text color in HTML specifies the color of the text content, similar to font color.
Syntax:
<p style=”color: pink;”>
Pink color is used
</p>
Link Color
HTML Link Color specifies the color of the anchor tag within a webpage, allowing us
to define the color of clickable text, and making user navigation more visual.
<a href=”#” style=”color: blue;”>
Link has a blue color
</a>
Border Color
HTML Border Color refers to the color of borders around elements like <div>,
<img>, etc. It defines the color of the border lines.
Syntax:
<div style=”border: 1px solid black; border-color: green;”>
This div has a green border
</div>
Example:
<!DOCTYPE html> <body>
<center>
<html> <h2 style="background-color: gray;">
<head> Heading with Gray Background color
<title>HTML Text Color</title> </h2>
<style> <div style="border: 2px solid skyblue;">
Div with Skyblue Border color
center { </div>
width: 50%; <span >
margin: 0 auto; <a href="#" style="color: #ff6347;">
Link has a tomato color
} </a>
h2, div, p, span { </span>
padding: 10px; <p style="color: darkgreen;">
margin-bottom: 20px; Paragraph with Dark Green Text color
</p>
} </center>
</style> </body>
</head> </html>
Output:
Color Values
Color values in HTML define the color of elements. They can be specified using
various formats such as hexadecimal, RGB, RGBA, HSL, HSLA, color names,
and system color keywords.
RGB Color Value
 RGB, which stands for Red, Green, and Blue, is a method used in CSS to
describe colors.
 It works by mixing different amounts of three primary colors, each with values
ranging from 0 to 255.
 By adjusting these values, we can produce an extensive range of colors,
allowing for the creation of diverse and better color palettes across websites.
RGB Color Value Properties
 It’s representation is as rgb(red, green, blue).
 By adjusting these values from 0 to 255, we can produce 16,777,216 unique colors.
 For instance, specifying rgb(0, 255, 0) results in green because the green value is at its
maximum (255), while red and blue are at 0. Conversely, using rgb(0, 0, 255) produces
blue, with the blue channel set to its peak (255), and red and green at 0.
 To render black, all color parameters are set to 0 (rgb(0, 0, 0)), and for white, all
parameters are set to their maximum (rgb(255, 255, 255)).
Syntax: (blue background)
<p style="background-color: rgb(0, 0, 255);">
Is the sky background Blue by using RGB
</p>
RGB Color Value Example
<!DOCTYPE html> <body>
<center>
<html> <h2 style="background-color: rgb(109, 102, 197);">
<head> Heading with blue Background color
</h2>
<title>RGB Color Value</title>
<style> <div style="border: 2px solid rgb(135, 206, 235);">
center { <li>
<a href="#html-color-usage">
width: 50%; HTML Color Usage
margin: 0 auto; </a>
</li>
}
Div with Skyblue Border color
</div>
h2, <span>
<a href="#" style="color: rgb(241, 76, 89);">
div, Link has a tomato color
p, </a>
span { </span>

padding: 10px; <p style="color: rgb(0, 100, 0);">

margin-bottom: 20px; Paragraph with Dark Green Text color
</p>
}
</style> </center>
</head> </body>
</html>
Output
RGBA Color Value
 RGBA (Red, Green, Blue, Alpha) is a color model similar to RGB, but with an
added alpha parameter representing transparency.
 The alpha value, which ranges from 0 to 1, adjusts transparency, allowing the
display of colors with varying levels of opacity.
 It’s representation is as rgba(red, green, blue, alpha).
Syntax:
// Semi-transparent text with a purple hue
<span style="color: rgba(128, 0, 128, 0.5);">
This text is semi-transparent with a purple hue using RGBA
</span>
RGBA Color values Properties
 RGBA Format Represents colors using Red, Green, Blue, and Alpha
(transparency) values, allowing control over opacity.
 Alpha value ranges from 0 (fully transparent) to 1 (fully opaque).
 RGBA values are expressed as rgba(red, green, blue, alpha).
 Ideal for creating semi-transparent elements, providing subtle visual effects or
layering content.
 Example
<!DOCTYPE html> <div style="border: 2px solid rgba(255, 165, 0, 0.7);">
<html> Div with semi-transparent Orange Border color
<head>
</div>
<title>RGBA Color Value</title>
<style> <span>
center { <a href="#"
width: 50%; style="color: rgba(0, 191, 255, 0.8);">
margin: 0 auto; Link has a semi-transparent Deep Sky Blue color
} </a>
h2, div, p, span {
padding: 10px;
</span>
margin-bottom: 20px;
} <p style="color: rgba(128, 0, 128, 0.6);">
</style> Paragraph with semi-transparent Purple Text color
</head> </p>
<body>
<center>
<h2 style="background-color: rgba(255, 99, 71, 0.5);"> </center>
Heading with semi-transparent Tomato Background color </body>
</h2> </html>
Output
 HEX Color Value
Hexadecimal color values, often referred to as hex values, use a six-digit code made up of pairs of characters.
 Hexadecimal values in CSS are represented as #rrggbb, where rr, gg, and bb denote the intensity of red, green, and
blue, respectively, ranging from 00 to ff.
 This encoding allows for 16,777,216 unique color combinations, providing a vast spectrum for web design.
 For example, #ff0000 corresponds to red (max red, no green, no blue), while #00ff00 represents green (max green, no
red, no blue).
 Black is denoted by #000000 (no red, no green, no blue), while white is represented as #ffffff (max red, max green,
max blue).
Syntax
// Pinkish Background
<div style="background-color: #FF69B4;">
div has a pinkish background by using Hex
</div>
 Example:
<!DOCTYPE html> <div style="border: 2px solid #FFA500;">
<html> Div with semi-transparent
<head> Orange Border color (Hex: #FFA500)
<title>Hex Color Value</title>
</div>
<style>
center { <span>
width: 50%; <a href="#" style="color: #00BFFF;">
margin: 0 auto; Link has a semi-transparent
} Deep Sky Blue color (Hex: #00BFFF)
h2, div, p, span {
padding: 10px;
</a>
margin-bottom: 20px; </span>
} <p style="color: #800080;">
</style> Paragraph with semi-transparent
</head>
Purple Text color (Hex: #800080)
<body>
<center> </p>
<h2 style="background-color: #FF6347;"> </center>
Heading with semi-transparent </body>
Tomato Background color (Hex: #FF6347) </html>
</h2>
Output:
 HSL (Hue, Saturation, Lightness) Value
HSL color values in HTML represent colors by defining their hue, saturation, and lightness. The hue
signifies the type of color (red, blue, green, etc.), saturation refers to the intensity or purity of the color, and
lightness determines the brightness or darkness.
 HSL representation defines colors based on Hue, Saturation, and Lightness components, offering a more
intuitive way to specify colors.
 Hue represents the color type, ranging from 0 to 360 degrees.
 Saturation determines the intensity or purity of the color, from 0% (grayscale) to 100% (full color).
 Lightness controls the brightness of the color, ranging from 0% (black) to 100% (white), with 50%
representing normal.
Syntax // Golden Background
<div style="background-color: hsl(45, 100%, 50%);">
This div has a golden background using HSL
</div>
 Example
<!DOCTYPE html> <div style="border: 2px solid hsla(240, 100%, 50%, 0.7);">
<html> Div with semi-transparent
<head> Blue Border color
<title>HSL Color Value</title> (HSL: hsla(240, 100%, 50%, 0.7))
<style> </div>
center { <span>
width: 50%; <a href="#" style="color: hsla(30, 100%, 50%, 0.8);">
margin: 0 auto; Link has a semi-transparent
} Orange color
h2, div, p, span { (HSL: hsla(30, 100%, 50%, 0.8))
padding: 10px; </a>
margin-bottom: 20px; </span>
} <p style="color: hsla(0, 100%, 25%, 0.6);">
</style> Paragraph with semi-transparent
</head> Red Text color
<body> (HSL: hsla(0, 100%, 25%, 0.6))
<center> </p>
<h2 style="background-color: hsla(120, 100%, 50%, 0.5);"> </center>
Heading with semi-transparent Green Background color </body>
(HSL: hsla(120, 100%, 50%, 0.5)) </html>
</h2>
Output:
HTML Links Hyperlinks
HTML links, or hyperlinks, connect web pages and are created using the `<a>` tag
with the `href` attribute. They enable users to navigate between pages or resources.
Links can be text, images, or other elements, enhancing web navigation and
interactivity. Users can click on links to navigate between different pages or
resources.
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>
Target Attribute
Attribute Description

Opens the linked document in a new window or

_blank
tab.

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.

framename
The frame’s name is specified in the attribute.
Example: Basic Hyperlink
<!DOCTYPE html>
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<p>Click on the following link</p>
<a href="https://www.google.com">
Google
</a>
</body>
</html>
Example: Using target Attributes <p>
<!DOCTYPE html> <p>
If you set the target attribute to "_self", If you set the target attribute to
<html>
the link will open in the "_parent", the link will open in the
<head>
same window or tab. parent frame.
<title>Target Attribute Example</title>
</p> </p>
</head>
<a href="https://www.google.com" <a href="https://www.google.com"
<body>
target="_self"> target="_parent">
<h3>
Google Google
Various options available in the
</a> </a>
Target Attribute
<p> </body>
</h3>
If you set the target attribute to "_top", </html>
<p> the link will open in the full body of the
If you set the target attribute to window.
"_blank", the link will open in a new </p>
browser window or tab. <a href="https://www.google.com"
</p> target="_top">
<a href="https://www.google.com" Google
target="_blank"> </a>
Google
</a>
HTML Images
The HTML <img> tag is used to embed an image in web pages by linking them.
It creates a placeholder for the image, defined by attributes like src, width,
height, and alt, and does not require a closing tag.
There are 2 ways to insert the images into a webpage:
 By providing a full path or address (URL) to access an internet file.
 By providing the file path relative to the location of the current web page file.
Syntax:
<img src="url" alt="some_text" width="" height="">
src attribute:
<!DOCTYPE html>
<html>
<head>
<title>Welcome To Web Technology</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<p>This is the demo of <img /> tag.</p>
<img src=
"https://www.scorchsoft.com/public/blog/web-technology-overview/web-tech-overview-head.webp"
alt="Web Technology image" />
</body>
</html>
alt attribute:
The alt attribute in <img> tag provides a text alternative if the image fails to load. It aids accessibility for
users unable to view images due to slow internet, src errors, or screen reader usage.
<!DOCTYPE html>
<html>
<head>
<title>Alt Attribute Example</title>
</head>
<body>
<p>Using Alt Attribute</p>
<img src=
"https://www.scorchsoft.com/public/blog/web-technology-overview/web-tech-overview-head.webp"
alt="This is Web Technology Image." />
</body>
</html>
Setting title, width and height of
Image:
<!DOCTYPE html>
<html>
<head>
<title>
Setting width and height of image
</title>
</head>
<body>
<p> Setting width and height of image</p>
<img src=
"https://www.scorchsoft.com/public/blog/web-technology-overview/web-tech-overview-head.webp"
alt="Web Technology Image"
width="300"
height="300"
title="Logo of GeeksforGeeks" />
</body>
</html>
Setting style and alignment to the
Image:
<!DOCTYPE html>
<html>
<head>
<title>Setting border to image</title>
</head>
<body>
<p>Setting style to the Image</p>
<img src=
"https://www.scorchsoft.com/public/blog/web-technology-overview/web-tech-overview-head.webp"
alt="Web Technology"
width="200"
height="200"
border="5"
◦ align="right" />
</body>
</html>
HTML Favicon
HTML Favicon is a small icon representing a website, appearing in the browser’s
tab or bookmark bar. Defined using the <link> tag with `rel=”icon”`, it is also
known as the Favorite icon. Additional keywords include HTML icon, browser
icon, and bookmark icon.
 Create a small square image (e.g., 16×16 pixels or 32×32 pixels) to serve as
your favicon. Save it in a suitable format like PNG, GIF, or ICO.
 Save the image with a suitable filename, such as “favicon.png” or “favicon.ico”.
 Upload the favicon image to your website’s server or hosting directory.
 In the <head> section of your HTML document, add the following code
<link rel="icon" type="image/png" href="path-to-favicon">
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Favicon</title>
<!-- Add icon link -->
<link rel="icon" href=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"
type="image/x-icon">
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>Welcome to my website</p>
</body>
</html>
HTML Tables
 HTML tables offer a powerful tool for presenting data on your website. But
mastering them goes beyond just rows and columns.
 An HTML Table is an arrangement of data in rows and columns in tabular
format.
 Tables are useful for various tasks, such as presenting text information and
numerical data.
 A table is a useful tool for quickly and easily finding connections between
different types of data. Tables are also used to create databases.
Example
<!DOCTYPE html> <tr>
<html> <td>Arun</td>
<body> <td>Singh</td>
<table> <td>32</td>
<tr> </tr>
<th>Firstname</th> <tr>
<th>Lastname</th> <td>Sam</td>
<th>Age</th> <td>Watson</td>
</tr> <td>41</td>
<tr> </tr>
<td>Priya</td> </table>
<td>Sharma</td> </body>
<td>24</td> </html>
</tr>
Tags used in HTML Tables
1. <table> Defines the structure for organizing data in rows and columns within a web page.
2. <tr> Represents a row within an HTML table, containing individual cells.
3. <th> Shows a table header cell that typically holds titles or headings.
4. <td> Represents a standard data cell, holding content or data.
5. <caption> Provides a title or description for the entire table.
6. <thead> Defines the header section of a table, often containing column labels.
7. <tbody> Represents the main content area of a table, separating it from the header or footer.
8. <tfoot> Specifies the footer section of a table, typically holding summaries or totals.
9. <col> Defines attributes for table columns that can be applied to multiple columns at once.
10. <colgroup> Groups together a set of columns in a table to which you can apply formatting
or properties collectively.
Adding a border to an HTML Table
A border is set using the CSS border property. If you do not specify a border for
the table, it will be displayed without borders.
Syntax
table, th, td {
border: 1px solid black;
}
Example
<!DOCTYPE html> <tr>
<html> <td>Priya</td>
<head> <td>Sharma</td>
<style> <td>24</td>
table, </tr>
th, <tr>
td { <td>Arun</td>
border: 1px solid black; <td>Singh</td>
} <td>32</td>
</style> </tr>
</head> <tr>
<body> <td>Sam</td>
<table style="width:100%"> <td>Watson</td>
<tr> <td>41</td>
<th>Firstname</th> </tr>
<th>Lastname</th> </table>
<th>Age</th> </body>
</tr> </html>
Output
Adding Collapsed Borders in an
HTML Table
For borders to collapse into one border, add the CSS border-collapse property.
Syntax
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Example:
<!DOCTYPE html> <tr>
<html> <td>Priya</td>
<head> <td>Sharma</td>
<style> <td>24</td>
table, </tr>
th, <tr>
td { <td>Arun</td>
border: 1px solid black; <td>Singh</td>
border-collapse: collapse; <td>32</td>
} </tr>
</style> <tr>
</head> <td>Sam</td>
<body> <td>Watson</td>
<table style="width:100%"> <td>41</td>
<tr> </tr>
<th>Firstname</th>
</table>
<th>Lastname</th>
</body>
<th>Age</th>
</html>
</tr>
Output
Adding Cell Padding in an
HTML Table
Cell padding specifies the space between the cell content and its borders. If we
do not specify a padding, the table cells will be displayed without padding.
Syntax
th, td {
padding: 20px;
}
Example:
<!DOCTYPE html> <body>
<table style="width:100%">
<html> <tr>
<head> <th>Firstname</th>
<th>Lastname</th>
<style> <th>Age</th>
table, </tr>
<tr>
th, <td>Priya</td>
td { <td>Sharma</td>
<td>24</td>
border: 1px solid black; </tr>
border-collapse: collapse; <tr>
<td>Arun</td>
} <td>Singh</td>
<td>32</td>
</tr>
th, <tr>
td { <td>Sam</td>
<td>Watson</td>
padding: 20px; <td>41</td>
} </tr>
</table>
</style> </body>
</head> </html>
Output:
Adding Left Align Headings in an
HTML Table
By default, the table headings are bold and centered. To left-align the table
headings, we must use the CSS text-align property. <head>
<style>
table,
Syntax th,
td {
th { border: 1px solid black;
border-collapse: collapse;
text-align: left; }
th,
} td {
padding: 20px;
}
th {
text-align: left;
}
</style>
</head>
Adding Border Spacing in an HTML
Table
Border spacing specifies the space between the cells. To set the border-spacing
for a table, we must use the CSS border-spacing property.
Syntax <head>
<style>
table { table,
th,
border-spacing: 5px; td {
border: 1px solid black;
} }

table {
border-spacing: 5px;
}
</style>
</head>
Adding Cells that Span Many Columns
in HTML Tables
To make a cell span more than one column, we must use the colspan attribute.
<!DOCTYPE html> <body>
<html> <h2>Cell that spans two columns:</h2>
<head> <table style="width:100%">
<style>
<tr>
table,
th, <th>Name</th>
td { <th colspan="2">Telephone</th>
border: 1px solid black; </tr>
border-collapse: collapse; <tr>
} <td>Vikas Rawat</td>
th, <td>9125577854</td>
td { <td>8565557785</td>
padding: 5px;
</tr>
text-align: left;
} </table>
</style> </body>
</head> </html>
Adding Cells that span many rows in
HTML Tables
To make a cell span more than one row, we must use the rowspan attribute.
<!DOCTYPE html> <body>
<html> <h2>Cell that spans two rows:</h2>
<head> <table style="width:100%">
<style> <tr>
table, <th>Name:</th>
th, <td>Vikas Rawat</td>
td { </tr>
border: 1px solid black; <tr>
border-collapse: collapse; <th rowspan="2">Telephone:</th>
} <td>9125577854</td>
th, </tr>
td { <tr>
padding: 5px; <td>8565557785</td>
text-align: left; </tr>
} </table>
</style> </body>
</head> </html>
Adding a Caption in an HTML Table
To add a caption to a table, we must use the “caption” tag.
Syntax
<table style="width:100%">
<caption>DETAILS</caption>
Adding a Background Color to the
Table
A color can be added as a background in an HTML table using the “background-
color” option. <head>
<style>
Syntax table,
th,
td {
table#t01 { border: 1px solid black;
border-collapse: collapse;
width: 100%; }

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

table#t01 {
width: 100%;
background-color: #f2f2d1;
}
</style>
</head>
HTML Lists
An HTML list is a record of related information used to <h5>Data Structures topics</h5>
display the data or any information on web pages in the
ordered or unordered form. <ol>
<li>Array</li>
<!DOCTYPE html>
<html> <li>Linked List</li>
<head> <li>Stacks</li>
<title>HTML Lists</title>
</head>
<li>Queues</li>
<body> <li>Trees</li>
<h2>Welcome To Data Structure Learning</h2> <li>Graphs</li>
<h5>List of available courses</h5>
<ul> </ol>
<li>Data Structures & Algorithm</li> </body>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
</html>
<li>Programming Languages</li>
</ul>
Output
Table of Content
There are three types of lists in HTML:
 HTML Unordered List or Bulleted List
 HTML Ordered List Tag Description

 HTML Description List <ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Details the term in a description list

The HTML Unordered List or Bulleted List
The unordered list items are marked with bullets. It is also known as bulleted lists. An unordered list starts with
the <ul> tag. Each list item starts with the <li> tag.
Syntax:
<ul> list of items </ul>

<!DOCTYPE html>
<html>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
HTML Ordered List
In an ordered list, all list items are marked with numbers by default. An ordered list starts
with the <ol> tag. Each list item starts with the “li” tag.
Syntax:
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
Attributes:
compact: It defines the list should be compacted (compact attribute is not supported in HTML5. Use CSS instead.).
reversed: It defines that the order will be descending.
start: It defines from which number or alphabet the order will start.
type: It defines which type(1, A, a, I, and i) of the order you want in your list of numeric, alphabetic, or roman
numbers.
Example
<!DOCTYPE html> <p>start attribute</p>
<html>
<ol start="5">
<head> <li>HTML</li>
<title>HTML ol tag</title> <li>CSS</li>
</head> <li>JS</li>
</ol>
<body>
<h1 style="color: green">HTML Lists</h1> <p>type attribute</p>
<h3>HTML ol tag</h3>
<ol type="i">
<p>reversed attribute</p> <li>HTML</li>
<ol reversed> <li>CSS</li>
<li>HTML</li> <li>JS</li>
<li>CSS</li> </ol>
<li>JS</li> </body>
</ol>
</html>
HTML Description List
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.
Syntax:
<dl> Contents... </dl>
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd>
</dl>
</body>
</html>
HTML Forms
 HTML Forms utilize the <form> element as a powerful tool to collect user
input through a variety of interactive controls.
 These controls range from text fields, numeric inputs, email fields, password
fields, to checkboxes, radio buttons, and submit buttons. In essence, an HTML
Form serves as a versatile container for numerous input elements, thereby
enhancing user interaction.
Syntax:
<form>
<!--form elements-->
</form>
Form Elements
The HTML <form> comprises several elements, each serving a unique purpose.
For instance, the <label> element is used to define labels for other <form>
elements. The <input> element, on the other hand, is versatile and can be used
to capture various types of input data such as text, password, email, and more,
simply by altering its type attribute. Now, let’s all the list of HTML Form
Elements one by one:
 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.

It is used to draw a box around other form elements

<fieldset>
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 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

<input type=”email“> Validates that the input is a valid email address.

Allows the user to enter a number. You can

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

Used for checkboxes where the user can select

<input type=”checkbox“>
multiple options.

<input type=”date“> Allows the user to select a date from a calendar.

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

<input type=”file“> Allows the user to select a file to upload.

Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Html Forms</title>
</head>
<body>
<h2>HTML Forms</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>

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

<input type="submit" value="Submit">

</form>
</body>
</html>
HTML Responsive Web Design
 HTML Responsive Web Design is a modern approach to web development that ensures web
pages look great on any device, from phones and tablets to desktop computers.
 It focuses on making HTML elements automatically adjust—resizing, hiding, or repositioning
based on the screen size. This approach guarantees a seamless and visually appealing user
experience across various devices.
 Responsive Web Design is an approach to web development that ensures web pages render
well on a variety of devices and window or screen sizes.
 It involves using fluid grids, flexible images, and CSS media queries to adapt the layout of a
website dynamically based on the screen size, orientation, and resolution of the device being
used.
 This technique allows websites to provide an optimal viewing experience, easy reading, and
navigation with minimal resizing, panning, and scrolling across different devices, from
desktop monitors to mobile phones.
1. HTML Viewport meta tag for Responsive Web
Design
The HTML viewport is the visible area of the screen that users see. It changes depending on the
device being used. With this approach, we set the width of web pages to match the available
screen width, making it 100%. This helps content adapt and look good on any device, ensuring a
responsive layout.
Syntax
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
Example:
<!DOCTYPE html> p{
<html> text-align: justify;
}
<head> </style>
<title>HTML Tutorial</title> </head>
<meta charset="utf-8"
name="viewport"
<body>
content="width=device-width,
<div class="gfg">GeeksforGeeks</div>
initial-scale=1.0" />
<style> <div class="geeks">HTML Introduction</div>
.wt {
font-size: 40px; <p>
font-weight: bold; HTML stands for HyperText Markup Language. It is
color: green; used to design web pages using a markup
text-align: center; language. HTML is a combination of Hypertext and
} Markup language. Hypertext defines the link
between web pages.
.web { </p>
font-size: 17px; </body>
text-align: center;
} </html>
2. Responsive Images
Responsive images play a key role in responsive websites. These are images that
can adjust their size, getting bigger or smaller, based on the width of the browser.
By being responsive, images enhance user experience across different devices
with varying screen sizes. The following are the techniques to use the responsive
images:
The image can be responsive & scale up & down with the help of CSS width
property by setting its value as 100%.
Syntax
<img src="..." style="width:100%;">
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
</head>

<body>
<img class=".img-fluid" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220201191443/logo-200x32.png"
style="width: 100%" />

<h2>Responsive Images</h2>

<p>
Responsive images are just a part of Responsive websites. Images that can change their dimensions, scaling them up or down, according
to the browser width are responsive images. The above image is responsive as it is adjusting itself according to the width of the browser.
</p>
</body>
</html>
HTML | <frame> Tag
 HTML Frames are a powerful tool for dividing your web browser window into multiple
sections, each capable of loading content independently. This is achieved using a collection of
frames within a frameset tag.
 Creating frames in HTML involves using the <frameset> tag instead of the <body> tag. Each
frame is defined by the <frame> tag, which specifies the HTML document to be loaded into
the frame. The row attribute is used to define horizontal frames, while the col attribute is used
for vertical frames. Here’s an example of how to create three horizontal frames using the row
attribute of the frameset tag.
Example
<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>

<frameset rows = "20%, 60%, 20%">

<frame name = "top" src =
"C:\Users\Akhilesh\Downloads\1.jpg" />
<frame name = "main" src =
"C:\Users\Akhilesh\Downloads\2.jpg" />
<frame name = "bottom" src =
"C:\Users\Akhilesh\Downloads\3.jpg" />
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>
Example with Column Attribute
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Frames Using col Attribute</title>
</head>

<frameset cols = "30%, 40%, 30%">

<frame name = "top" src =
"C:\Users\Akhilesh\Downloads\1.jpg" />
<frame name = "main" src =
"C:\Users\Akhilesh\Downloads\2.jpg" />
<frame name = "bottom" src =
"C:\Users\Akhilesh\Downloads\3.jpg" />
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>
Attributes of Frameset tag:
cols: The cols attribute is used to create vertical frames in web browser. This attribute is basically
used to define the no of columns and its size inside the frameset tag. The size or width of the
column is set in the frameset in the following ways:
Use absolute value in pixel Example:
<frameset cols = "300, 400, 300">
Use percentage value Example:
<frameset cols = "30%, 40%, 30%">
Use wild card values: Example:
<frameset cols = "30%, *, 30%">
In the above example * will take the remaining percentage for creating vertical frame.
Attributes of Frameset tag:
rows: The rows attribute is used to create horizontal frames in web browser. This attribute is
used to define no of rows and its size inside the frameset tag. The size of rows or height of each
row use the following ways:
Use absolute value in pixel
Example:
<frameset rows = "300, 400, 300">
Use percentage value Example:
<frameset rows = "30%, 40%, 30%">
Use wild card values Example:
<frameset rows = "30%, *, 30%">
Attributes of Frameset tag:
border: This attribute of frameset tag defines the width of border of each frames in pixels. Zero
value is used for no border. Example:
<frameset border=“1" frameset>
frameborder: This attribute of frameset tag is used to specify whether the three-dimensional
border should be displayed between the frames or not for this use two values 0 and 1, where 0
defines for no border and value 1 signifies for yes there will be border.
framespacing: This attribute of frameset tag is used to specify the amount of spacing between
the frames in a frameset. This can take any integer value as an parameter which basically denotes
the value in pixel. Example:
<framespacing="20">
It means there will be 20 pixel spacing between the frames
Attributes of Frameset tag:
name: This attribute is used to give names to the frame. It differentiate one frame from another.
It is also used to indicate which frame a document should loaded into. Example:

<frame name = "top" src = " C:\Users\Akhilesh\Downloads\1.jpg " />

<frame name = "main" src = " C:\Users\Akhilesh\Downloads\2.jpg " />
<frame name = "bottom" src = " C:\Users\Akhilesh\Downloads\3.jpg " />
Attributes of Frameset tag:
marginwidth: This attribute in frame tag is used to specify width of the spaces in pixels between the border and contents

of left and right frame. Example:

<frame marginwidth="20">

marginheight: This attribute in frame tag is used to specify height of the spaces in pixels between the border and contents

of top and bottom frame. Example:

<frame marginheight="20">

scrollbar: To control the appearance of scroll bar in frame use scrollbar attribute in frame tag. This is basically used to

control the appearance of scrollbar. The value of this attribute can be yes, no, auto. Where the value no denotes there will

be no appearance of scroll bar. Example:

<frame scrollbar="no">
Example:
<!DOCTYPE html>
<html>

<head>
<title>frameset attribute</title>
</head>

<!-- frameset attribute starts here -->

<frameset rows="20%, 60%, 20%">
<frame name="top" src="attr1.png" />
<frame name="main" src="gradient3.png" />
<frame name="bottom" src="col_last.png" />
<noframes>

<body>The browser you are working does not

support frames.</body>
</noframes>
</frameset>
<!-- frameset attribute ends here -->

</html>
HTML <marquee> Tag
The <marquee> tag in HTML creates a scrolling text or image effect within a webpage. It allows
content to move horizontally or vertically across the screen, providing a simple way to add
dynamic movement to elements. Although this tag is deprecated in HTML5, it is still useful to
understand its functionality for legacy projects.
Syntax and Attributes
Basic Syntax
<marquee>
<!-- contents -->
</marquee>
Attributes of <marquee>
Attributes Values Description

Define the background color of

bgcolor Color Name
the marquee.

Define the direction of

direction Top, Down, Left, Right
scrolling the content

Specifies how many times

loop Number content moves. The default
value is infinite.

height px or % Define the height of marquee

width px or % Define the width of marquee

Specify horizontal space

hspace px
around marquee

Specify vertical space around

vspace px
marquee
Methods for <marquee>
Method Description

start() Starts the scrolling of the

<marquee> tag.

stop() Stops the scrolling of the

<marquee> tag.
Event Handlers
Event Handler Description

Triggered when a scrolling

onbounce <marquee> reaches the end
(exclusive to ‘alternate’ behavior).

Activates when the <marquee>

onfinish completes the scrolling loops
specified by the ‘loop’ attribute.

Fired at the initiation of scrolling

onstart
for the HTML <marquee> tag.
Example 1: Right to Left Scrolling
<!DOCTYPE html> <body>
<html> <div class="main">
<head> <marquee class="marq" bgcolor="Green"
<title>Marquee Tag</title> direction="left" loop="">
<style> <div class="geek1">
.main { GeeksforGeeks
text-align: center; </div>
} <div class="geek2">
.marq { A computer science portal for geeks
padding-top: 30px; </div>
padding-bottom: 30px; </marquee>
} </div>
</body>
.geek1 {
font-size: 36px; </html>
font-weight: bold;
color: white;
padding-bottom: 10px;
}
</style>
</head>
Example 2: Bottom to Top Scrolling
<!DOCTYPE html> <body>
<html>
<head> <div class="main">
<title>Marquee Tag</title> <marquee class="marq"
<style>
.main { bgcolor="Green"
text-align: center; direction="up" loop="">
font-family: "Times New Roman";
} <div class="geek1">
.marq { GeeksforGeeks
padding-top: 30px;
padding-bottom: 30px; </div>
} <div class="geek2">
.geek1 {
font-size: 36px; A computer science portal for geeks
font-weight: bold; </div>
color: white;
text-align: center; </marquee>
} </div>
.geek2 {
text-align: center; </body>
}
</style>
</head> </html>