WEB DEVELOPMENT
What is the internet ?
Interconnected network of computers around the world .
The internet is a global network of interconnected computers and devices that communicate
using standardized protocols. It allows users to access and share information, communicate,
and use various online services. The internet consists of:
1. Servers & Clients – Servers store websites, files, and data, while clients (like your
phone or laptop) access them.
2. Protocols – Rules like TCP/IP, HTTP, and FTP ensure proper data transfer.
3. Web – The World Wide Web (WWW) is a major part of the internet, consisting of
websites accessible via browsers.
4. Communication – It enables email, messaging, video calls, and social media.
5. Cloud & Storage – Remote servers store and process data, providing services like
Google Drive and OneDrive.
What is web development ?
Web Development
Web development is the process of building, creating, and maintaining websites and web
applications. It involves designing the structure, layout, functionality, and interactivity of a
website using different technologies and programming languages.
Types of Web Development
1. Frontend Development (Client-Side)
o Focuses on the visual and interactive aspects of a website that users see.
o Uses HTML, CSS, JavaScript and frameworks like React, Angular, Vue.js.
2. Backend Development (Server-Side)
o Manages the logic, database, and server operations.
o Uses languages like Node.js, Python, Java, PHP, Ruby.
o Works with databases like MySQL, PostgreSQL, MongoDB.
3. Full-Stack Development
o Combines both frontend and backend development.
o A Full-Stack Developer works with both UI/UX and server-side logic.
4. Database Management
o Handles data storage and retrieval.
o Uses SQL (MySQL, PostgreSQL) or NoSQL (MongoDB, Firebase).
Web Development Technologies
Frontend: HTML, CSS, JavaScript, React, Bootstrap
Backend: Node.js, Django, Spring Boot (Java), Express.js
Databases: MySQL, MongoDB, Firebase
Version Control: Git, GitHub, GitLab
Deployment: AWS, Firebase, Netlify, Vercel
HTML – IT PROVIDES STRUCTURE
CSS – IT PROVIDES STYLES
JAVA SCRIPT – IT PROVIDES FUNCTIONALITY
What is HTML ?
HTML (HyperText Markup Language) is the standard language used to create and design web
pages. It structures the content on the web using elements like headings, paragraphs, images,
links, and tables. HTML works alongside CSS (for styling) and JavaScript (for interactivity) to build
modern websites.
HTML ELEMENTS
HTML (HyperText Markup Language) consists of various elements that help structure and
display content on web pages. Here are some common HTML elements:
1. <html>: Defines the document as an HTML document.
2. <head>: Contains metadata and links to external files (like stylesheets or scripts).
3. <title>: Specifies the title of the webpage, shown in the browser’s title bar.
4. <body>: Contains the visible content of the webpage.
5. <h1>, <h2>, <h3>, ...: Header tags used to define headings, with <h1> being the
highest level.
6. <p>: Defines a paragraph of text.
7. <a>: Creates a hyperlink to another page or resource.
8. <img>: Embeds an image on the page.
9. <div>: Defines a division or section, used for grouping content.
10. <span>: Used for inline grouping of text or other elements.
11. <ul>: Defines an unordered list, with list items inside it using <li>.
12. <ol>: Defines an ordered list, with list items inside it using <li>.
13. <li>: Defines a list item inside <ul> or <ol>.
14. <form>: Defines an HTML form to gather user input.
15. <input>: Used to create input fields (like text, checkbox, radio buttons).
16. <button>: Defines a clickable button.
17. <table>: Defines a table, with rows (<tr>) and data cells (<td>).
18. <footer>: Defines a footer section for the document or section.
19. <header>: Defines a header section for the document or section.
20. <section>: Represents a section of content within the document.
HTML Heading Elements
HTML provides heading elements (<h1> to <h6>) to define headings of different importance
levels.
Types of Headings:
1. <h1> → Most important heading (Largest)
2. <h2> → Second-level heading
3. <h3> → Third-level heading
4. <h4> → Fourth-level heading
5. <h5> → Fifth-level heading
6. <h6> → Least important heading (Smallest)
BOILER PLTE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
LIST ELEMENT
In HTML, lists are used to group related items together. There are three main types of lists:
1. Ordered List (<ol>)
Displays items in a numbered sequence.
Each item is enclosed within <li> (list item) tags.
Example:
html
CopyEdit
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
Output:
1. First Item
2. Second Item
3. Third Item
2. Unordered List (<ul>)
Displays items with bullet points.
Example:
html
CopyEdit
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
Output:
o Apple
o Banana
o Cherry
3. Description List (<dl>)
Used for key-value pairs (like a glossary).
<dt> defines the term, and <dd> defines the description.
Example:
html
CopyEdit
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Output: HTML
HyperText Markup Language
CSS
Cascading Style Sheets
ATTRIBUTE ELEMENT
Anchor (<a>) Element in HTML
The <a> tag in HTML is used to create hyperlinks, allowing users to navigate to different
web pages, sections within the same page, or even external websites.
Basic Syntax
html
CopyEdit
<a href="URL">Link Text</a>
href (Hypertext Reference): Specifies the URL of the page to which the link points.
Link Text: The clickable text that appears on the webpage.
IMAGE ELEMENT
Image (<img>) Element in HTML
The <img> tag in HTML is used to embed images on a webpage. It is a self-closing tag,
meaning it does not have a closing tag.
Basic Syntax
html
CopyEdit
<img src="image.jpg" alt="Description of Image">
src (Source): Specifies the image URL or file path.
alt (Alternative Text): Provides a text description of the image (useful for
accessibility and when the image fails to load).
A sample code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CODING KARLO </title>
</head>
<body>
<h1>List of Fruits </h1>
<ul>
<li>apple</li> <a
href="https://www.bing.com/images/search?view=detailV2&ccid=Gw8UJWeW&id=E9DDA8
3109A6F8A596322911654E051385E79528&thid=OIP.Gw8UJWeWkMxTZp4v96X9KAHaE5&mediaur
l=https%3a%2f%2fimages.pexels.com%2fphotos%2f39803%2fpexels-photo-
39803.jpeg%3fauto%3dcompress%26cs%3dtinysrgb%26dpr%3d3%26h%3d750%26w%3d1260&ex
ph=2250&expw=3397&q=Apple+the+Fruit&simid=608040269122590683&FORM=IRPRST&ck=71
164FDA5B59143190C94CAB2962BFDC&selectedIndex=2&itb=0">see an apple</a>
<li>orange</li><a
href="https://www.bing.com/images/search?view=detailV2&ccid=BPBH%2bRGp&id=B3B0
9CA52FFB485DD22B3DF7E834C5851D0791D6&thid=OIP.BPBH-
RGp4d3V3gAJSj8SHwHaFP&mediaurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR.04f047f
911a9e1ddd5de00094a3f121f%3frik%3d1pEHHYXFNOj3PQ%26riu%3dhttp%253a%252f%252fme
dia2.popsugar-
assets.com%252ffiles%252fthumbor%252f5bDtJLUd5u858BagEWhcAXZ8EG4%252ffit-
in%252f2048xorig%252ffilters%253aformat_auto-!!-%253astrip_icc-!!-
%252f2012%252f11%252f47%252f1%252f192%252f1922195%252f574f46474ab2683d_shutter
stock_49887109%252fi%252fOranges.jpg%26ehk%3dwZLuVmJ3zt0RzXqQq5YeSTjTYCNxBaS%2
52bc8PwHxc%252bzCs%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=1448&expw=2048&q
=orange&simid=608034410830240454&FORM=IRPRST&ck=31C1FE7B6AB8AEB0FAC4EF1C0AC4FF
52&selectedIndex=0&itb=0">see an orange</a>
<li>mango</li> <a href="https://img.freepik.com/premium-photo/ripe-mango-
fruits-with-slices-isolated-white_80510-681.jpg?w=2000">see a mango</a>
</ul>
</body>
</html>
COMMENTS IN HTML
In HTML, comments are used to add notes or explanations within the code. These comments
are ignored by the browser and do not appear on the webpage.
Syntax
html
CopyEdit
<!-- This is a comment -->
HTML IS NOT A CASE SENSITIVE LANGUAGE
This means that HTML tags, attributes, and element names can be written in uppercase,
lowercase, or mixed case, and they will still work the same way.
DIFFERENCE BETWEEN INLINE V/S BLOCK
Key Differences
Feature Inline Elements Block Elements
Line Breaks Do not start on a new line Always start on a new line
Takes only as much width as Takes full width of the parent
Width
needed container
Only text or other inline Can contain both inline and block
Contains
elements elements
Example Tags <span>, <a>, <b>, <i> <div>, <p>, <h1>-<h6>
<DIV> ELEMENT
<div> Element in HTML
The <div> (short for division) element is
a block-level container used to group
and structure HTML content. It does not
have any inherent styling or meaning but
is often used with CSS for layout and
styling purposes.
SUP AND SUB TAGS
<sup> and <sub> Tags in HTML
The <sup> (superscript) and <sub> (subscript) tags are used to format text that appears
slightly above or below the normal line of text.
1. <sup> (Superscript) Tag
Moves text above the baseline.
Commonly used for:
o Mathematical exponents: x², a³
o Ordinal indicators: 1ˢᵗ, 2ⁿᵈ
o Footnotes: Reference¹
2. <sub> (Subscript) Tag
Moves text below the baseline.
Commonly used for:
o Chemical formulas: H₂O, CO₂
o Mathematical indices: a₁, b₂
SEMANTIC TAGS
What is Semantic Markup?
Semantic markup refers to using HTML elements that convey meaning about the content
inside them. It improves accessibility, SEO, and code readability.
1. Why Use Semantic HTML?
✅Better readability for developers
✅Improved SEO (search engines understand content better)
✅Enhanced accessibility (screen readers work better)
✅Cleaner and structured code
2. Common Semantic HTML Tags
Structural Tags
Tag Purpose
<header> Defines a page or section header
<nav> Represents navigation links
<main> Wraps the main content of the page
<article> Represents independent content (e.g., a blog post)
<section> Groups related content together
<aside> Sidebar content (e.g., ads, related links)
<footer> Defines a footer for a page or section
Text-Related Tags
Tag Purpose
<mark> Highlights text
<time> Represents a date or time
<figure> Groups images or graphics with captions
<figcaption> Caption for <figure>
HTML ENTITIES
HTML entities are special codes used to represent characters that might otherwise be
interpreted as HTML code or are not easily typed on a keyboard. They are commonly used to
display reserved characters (like <, >, &) and special symbols in web pages.
Common HTML Entities
Character Entity Name Entity Number
< < <
> > >
& & &
" " "
' ' '
© © ©
Character Entity Name Entity Number
® ® ®
₹ ₹ -
€ € €
™ ™ ™
Why Use HTML Entities?
1. To Display Reserved Characters: <, >, and & are part of HTML syntax and need to
be replaced with entities when displaying them.
2. For Non-Standard Characters: Special symbols, currency symbols, and accented
letters (e.g., é, ü) may not be directly available on a keyboard.
3. For Cross-Browser Compatibility: Some characters may not render correctly across
all browsers.
TABLES IN HTML
HTML5 Table Elements
<table> → Defines the table.
<caption> → Provides a title for the table.
<thead> → Groups header rows.
<tbody> → Groups body rows (main content).
<tfoot> → Groups footer rows (e.g., totals).
<tr> → Defines a row.
<th> → Defines a header cell (bold and centered by default).
<td> → Defines a data cell.
colspan and rowspan in HTML Tables
The colspan and rowspan attributes allow table cells to span multiple columns or rows,
making tables more flexible.
1. (Column Span)
Used in <th> or <td> to merge multiple columns into a single cell.
<table border="1">
<tr>
<th colspan="2">Merged Columns</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
</table>
2.Rowspan
sed in <th> or <td> to merge multiple rows into a single cell.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td rowspan="2">Merged Rows</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 2</td>
</tr>
</table>
When to Use?
✅colspan – When you need a single cell across multiple columns (e.g., a title row).
✅rowspan – When you need a single cell across multiple rows (e.g., a category label).
Form in HTML
Explanation:
<form>: Defines the form.
action="submit.php": Specifies the server script to process the form data.
method="POST": Specifies the HTTP method (GET or POST).
<input>: Different input types like text, email, password, checkbox, etc.
<select>: A dropdown for selecting gender.
<textarea>: A multi-line input field for messages.
<button>: Submit and reset buttons.
INPUT ATTRIBUTES
HTML <input> elements support various attributes that define their behavior. Here
are some commonly used input attributes:
1. Basic Input Attributes
Attribute Description Example
Specifies the input type (text,
type <input type="text">
password, email, etc.)
Identifies the input field (used
name <input type="text" name="username">
when submitting data)
value Defines a default value for the input <input type="text" value="Shivam">
<input type="text"
placeholder Displays a hint inside the input field
placeholder="Enter your name">
Makes the input mandatory before
required <input type="email" required>
submitting
Disables the input field (cannot be
disabled <input type="text" disabled>
edited)
Allows the input to be visible but <input type="text" value="Fixed"
readonly
not editable readonly>
LABEL IN HTML
HTML <label> Tag
The <label> tag in HTML is used to associate a text description with an input field,
improving accessibility and user experience.
Why Use Labels?
✔ Improves accessibility for screen readers
✔ Increases clickable area for checkboxes/radios
✔ Enhances form usability
Buttons
Buttons in an HTML Form
Buttons in a form allow users to submit, reset, or perform custom actions using JavaScript.
1 . Submit Button (<button type="submit">)
Sends form data to the server.
Default button type in a <form>.
html
CopyEdit
<form action="submit.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<button type="submit">Submit</button>
</form>
2 Reset Button (<button type="reset">)
Clears all form fields when clicked.
html
CopyEdit
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<button type="reset">Reset</button>
</form>
3 .Button for Custom Actions (<button type="button">)
Does not submit the form by default.
Used for JavaScript-based actions.
html
CopyEdit
<form>
<button type="button" onclick="alert('Hello Shivam!')">Click
Me</button>
</form>
4.using <input> Instead of <button>
You can also create buttons using <input>:
html
CopyEdit
<form>
<input type="submit" value="Submit Form">
<input type="reset" value="Clear Form">
<input type="button" value="Click Me" onclick="alert('Button
Clicked!')">
</form>
Search in youtube
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=3.0">
<title>Document</title>
</head>
<body>
<form action="https://www.youtube.com/results">
<input type="text" placeholder="search in youtube "
name="search_query"/>
<button>search</button>
</form>
</body>
</html>
<input type="range"> in HTML
The <input type="range"> element creates a slider that allows users to select a value from
a range.
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100">
<textarea> in HTML
The <textarea> element allows users to input multiple lines of text, such as comments or
messages.
<label for="message">Message:</label><br>
<textarea id="message" name="message"></textarea>
Form in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Practice question</title>
</head>
<body>
<h1>Registration form</h1>
<form action="action/">
<input type="text" placeholder="firstname" name = "fname">
<input type="text" placeholder="lastname" name="lname">
<div>
<select name="gender" id="gender">
<option value="male">male</option>
<option value="female">female</option>
<option value="other">other</option>
</select>
</div>
Do you agree to all the terms and conditions ?
<input type="checkbox" name="checkbox" id="checkbox">
<label for="checkbox">yes i agree</label>
<button>register</button>
</form>
</body>
