Module 1: HTML, CSS, Bootstrap
4. Cascading Style Sheets (CSS)
While HTML structures the content, CSS (Cascading Style Sheets) defines
how the content looks. CSS controls aspects like colors, fonts, spacing,
backgrounds, and layouts. It allows designers to maintain a consistent look and
feel across multiple web pages by separating style from structure.
There are three ways to use CSS:
1. Inline CSS – applied directly inside an element using the style attribute.
2. Internal CSS – defined within the <style> tag inside the <head> of an
HTML document.
3. External CSS – stored in a separate .css file and linked to the HTML
document.
CSS works based on selectors, which target HTML elements. Selectors can be
element names (e.g., p), IDs (e.g., #header), or classes (e.g., .highlight). CSS
rules are applied using properties and values, such as color: red;.
Another important feature of CSS is responsiveness, which allows a webpage
to adapt to different screen sizes. This is achieved using media queries, which
apply different styles depending on the device’s screen width or resolution.
5. Bootstrap Framework
Bootstrap is a popular front-end framework that simplifies the process of
creating responsive and modern websites. It comes with pre-designed classes
for buttons, forms, navigation bars, and layouts, which help developers design
websites faster without writing CSS from scratch.
The most powerful feature of Bootstrap is its grid system, which divides a page
into 12 equal columns. Developers can arrange content in rows and columns
that adjust automatically depending on screen size. For example, a two-column
layout will appear side by side on larger screens but may stack vertically on
smaller screens like smartphones.
Bootstrap also includes pre-built components such as navigation bars,
carousels, modals, and forms, which can be customized easily. This reduces
the development time significantly and ensures websites are mobile-friendly by
default.
6. Internet and Hosting Basics
The World Wide Web (WWW) is a collection of interlinked documents and
multimedia content accessed via the internet. To reach these documents,
browsers use the Domain Name System (DNS), which translates domain
names (like [Link]) into IP addresses that computers understand.
Web communication happens through various protocols such as HTTP (Hyper
Text Transfer Protocol) for web pages, HTTPS for secure communication,
FTP for file transfers, and SMTP for email.
To make a website accessible online, it must be stored on a web server. There
are different types of hosting:
Shared hosting – multiple websites share the same server.
VPS hosting – a virtual private server that offers more control.
Dedicated hosting – one server is fully dedicated to a single client.
Cloud hosting – distributed hosting that is scalable and reliable.
Common web servers include Apache, Nginx, and Microsoft IIS. Websites
can also be hosted on Linux/Unix servers or on cloud platforms like AWS,
Azure, or Google Cloud.
✅ Practical Section (Short Codes + Explanations)
Example 1: Simple HTML Page
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to BCA</h1>
<p>This is my first webpage in HTML.</p>
<img src="[Link]" alt="Sample Image" width="200">
</body>
</html>
👉 Explanation: The <h1> tag creates a heading, <p> adds a paragraph, and
<img> displays an image.
Example 2: Student Registration Form
<form>
<fieldset>
<legend>Student Registration</legend>
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Gender:
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female<br><br>
Course:
<select>
<option>BCA</option>
<option>MCA</option>
</select><br><br>
<input type="submit" value="Register">
</fieldset>
</form>
👉 Explanation: This form collects student details using text input, email, radio
buttons, and a dropdown list.
Example 3: Responsive Navbar in Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Navbar</title>
<link rel="stylesheet"
href="[Link]
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
👉 Explanation: Bootstrap’s navbar component automatically adjusts for small
screens using the collapsible menu.