SUBMITTED BY:- MOHIT KUMAR
ROLL NO. :- 2322005
SUBMITTED TO:- Er. DEEPANSHI Ma’am
What is Web Development?
Web development refers to the creating, building,
and maintaining of websites. It includes aspects such
as web design, web publishing, web programming,
and database management. It is the creation of an
application that works over the internet i.e webs
Key Languages: HTML, CSS, JavaScript
Types: Frontend (client-side) and Backend (server-side)
Introduction to Frontend
Development
Front-end development is the process of
building the parts of a website that users
see and interact with. This includes the
user interface, buttons, text boxes, and
other design elements
Front-end development is also known as
client-side development.
Introduction to Backend
Development
Back-end development means working on
server-side software, which focuses on
everything you can't see on a website. Back-
end developers ensure the website performs
correctly, focusing on databases, back-end
logic, application programming interface
(APIs), architecture, and servers.
Introduction to HTML
HTML stands for Hypertext Markup Language.
It is the most basic language, and simple to learn and modify.
It is a combination of both hypertext and markup language.
It was created by Tim Berners-Lee in 1991.
The first version of HTML is HTML 2.0 which was published in
1999, and the latest version is HTML 5. We can save HTML files
with an extension .html.
HTML Elements
Introduction to CSS
• Definition: Cascading Style Sheets, used to
style and layout web pages.
• Syntax: Selectors, properties, values.
• Example: Changing colors, fonts, and layout.
Types of CSS
Inline CSS
Inline CSS is used to style a specific HTML element. Add
a style attribute to each HTML tag without using the
selectors. Managing a website may difficult if we use
only inline CSS. However, Inline CSS in HTML is useful in
some situations. We have not access the CSS files or to
apply styles to element.
1. <html>
2. <body style="background-color:white;">
3. <h1 style="color:Red;padding:20px;">CSS Tutorials</h1>
4. <p style="color:blue;">It will be useful here.</p>
5. </body>
6. </html>
Internal CSS
The Internal CSS has <style> tag in the <head> section of
the HTML document. This CSS style is an effective way to style single
pages. Using the CSS style for multiple web pages is time-consuming
because we require placing the style on each web page
External CSS
In external CSS, we link the web pages to the external .css file. It is
created by text editor. The CSS is more efficient method for styling a
website. By editing the .css file, we can change the whole site at once.
The CSS Box Model
•Components: Content, padding, border, margin.
•Visual Example: How the box model affects
element spacing
HTML Tables
•Table Tags:. <table>, <tr>, <th>,
<td>
•Purpose: Displaying data in rows and
columns.
•Example: Basic table structure with
rows and columns.
HTML Lists
•Types: Ordered (<ol>) and unordered lists
(<ul>).
•List Items: <li> for list items.
•Example: Creating bulleted and
numbered lists.
Images and Media in HTML
•Image Tag:<img> with src and alt attributes.
•Multimedia Tags:<audio>, <video>,
•Example: Embedding images, audio,
and videos.
Introduction to JavaScript
• Role in Web Development: Adds
interactivity to web pages.
• Basic Syntax: Variables, functions, and
events.
• Example: A simple button click event in
JavaScript.
Connecting JavaScript to HTML
• Script Tag: Including JavaScript within or
external to HTML.
• DOM Manipulation: Changing HTML content
dynamically with JavaScript.
• Example: Changing text or styles on button
clicks.
Forms with JavaScript Validation
• Form Validation: Ensuring input fields are
filled correctly.
• JavaScript Functions: Handling user input
errors.
• Example: Simple form validation script.
HTML5 Features
CSS Features
