HTML: The Building

Block of the Web

NAME:- FAIZAN QURESHI
ENROLLMENT NO:-0198CS211034
SUBJECT:-IWT(CS503)
YEAR:-3RD
SEMISTER:-5th
TOPIC:-HTML
What is HTML?
1 Markup Language 2 Structure & Elements 3 Platform
Independence
HTML (Hypertext Markup
Language) is the backbone HTML separates content HTML is a platform-
of the web. It provides from design, using tags and independent language,
structure and semantics to attributes to define the making it compatible with
web content. structure and meaning of a all major web browsers and
web page. devices.
Basic Structure of HTML
DOCTYPE Declaration HTML Tag Head & Body

Specifies the HTML version Wraps the entire HTML The head section contains
and document type. It is the document, defining it as an meta information, while the
first line of an HTML HTML file. body section holds the visible
document. content of a web page.
HTML Tags and Attributes
Tags Attributes Usage
• a • class • Create links
• table • id • Display tabular data
• img • href • Embed images
• p • src • Structure paragraphs
Commonly Used HTML Elements

Div Form Header

A versatile container for grouping Used to collect user input, such as Represents the introductory
content and applying CSS styles. text, checkboxes, and buttons. section of a webpage or a section
within the document.
HTML Forms and Input Types
1 Text Inputs

Text input fields allow users to enter single or multiple lines of text, such as names, addresses, or
comments.

2 Checkboxes & Radio Buttons

Checkboxes enable users to select multiple options, while radio buttons allow only one selection.

3 Select & Option

A select element creates a dropdown menu, and the option element defines the available options.
Introduction to CSS
1 CSS: Cascading Style 2 Selectors & 3 CSS Frameworks
Sheets Properties
CSS frameworks like
CSS enhances the visual By selecting HTML Bootstrap and Foundation
presentation of HTML elements and applying provide pre-designed styles
elements, controlling different properties, CSS and layouts for easy web
layout, colors, fonts, and transforms the appearance development.
more. of web pages.
Responsive Web Design
1 Media Queries

Use media queries to adapt web pages to different screen sizes, ensuring they look
great on desktops, tablets, and smartphones.

2 Flexible Grid Systems

Grid systems, like CSS Grid or Bootstrap Grid, allow for responsive layouts that
adjust to different screen widths.

3 Mobile-First Approach

Building web pages with the mobile version in mind first, then enhancing them for
larger screens, ensures a seamless user experience on all devices.
Conclusion
Master HTML
With knowledge of HTML,
you have the power to create
stunning web pages and bring
your ideas to life.
Continue Learning Join the Web
Community
Expand your skills by
exploring advanced HTML Connect with other web
topics and diving into CSS enthusiasts and professionals
and JavaScript. to learn, share, and grow
together.
Thank You!
Thank you for joining me on this HTML journey. Together, let's shape the future of the web, one line of HTML at a
time.