King coder

Posted on Oct 31 • Edited on Nov 3

📘 Complete BCA Web Designing Notes for CIITM DHANBAD

🧭 UNIT I — HTML & HTTP Basics

🔹 Introduction to HTTP

HTTP (HyperText Transfer Protocol) is the communication protocol used between a web browser (client) and a web server.
It transfers web pages, images, and data across the internet.

Key Points:

Works on client-server model.
Uses port 80 (HTTP) or 443 (HTTPS).
Stateless protocol – each request is independent.

Common Methods:

Method	Description
GET	Retrieve data from the server
POST	Send data to the server
PUT	Update data
DELETE	Remove data

Response Codes:

200 OK – Request successful
404 Not Found – Page not found
500 Internal Server Error – Server problem

HTTPS: Secure version of HTTP using SSL/TLS encryption.

🔹 Introduction to HTML

HTML (HyperText Markup Language) defines the structure of a web page.

Basic Structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

🔹 Basic HTML Tags

Tag	Description
`<h1>–<h6>`	Headings
`<p>`	Paragraph
`<br>`	Line Break
`<hr>`	Horizontal Line
`<b>`, `<i>`, `<u>`	Bold, Italic, Underline
`<a>`	Hyperlink
`<img>`	Image
`<ul>`, `<ol>`, `<li>`	Lists
`<table>`	Table
`<div>`	Block Container
`<span>`	Inline Container

🔹 Body Tags

The <body> contains all the visible content (text, images, videos, links).

<body bgcolor="lightyellow" text="black">
  <h1>Welcome!</h1>
</body>

Attributes:

bgcolor → background color
text → text color
link, vlink, alink → link colors

🔹 Coding Style (Best Practices)

Always use lowercase tags.
Close all open tags.
Proper indentation.
Use comments () for clarity.
Keep file names lowercase and meaningful.

🔹 Modifying & Formatting Text

<b>Bold</b>
<i>Italic</i>
<u>Underline</u>
<small>Small Text</small>
<mark>Highlighted Text</mark>
<sup>2</sup> <sub>2</sub>

🔹 Lists

Lists in HTML are used to display items one after another, such as menus, topics, or steps.

Unordered List:

An unordered list displays list items with bullets (•) by default.
It is used when the order of items doesn’t matter.

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

Ordered List:

An ordered list displays list items with numbers or letters. It is used when the order of items matters (like steps or rankings).

<ol type="1">
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

Definition List:

<dl>
  <dt>HTML</dt>
  <dd>Markup language for web pages.</dd>
</dl>

🔹 Insert Links

Links in HTML are created using the <a> (anchor) tag. They allow users to navigate to another page, section, or open email links.

External Link:

Takes you to another website

<a href="https://www.google.com">Visit Google</a>

Internal Link:

Moves to a specific section on the same page

<a href="about.html">About Us</a>

Email Link:

Opens your email client to send an email

<a href="mailto:someone@example.com">Send Email</a>

Relative vs Absolute Links:

Relative: "about.html" (same folder)
Absolute: "https://example.com/about.html"

🔹 Insert Images

The <img> tag in HTML is used to embed an image into a web page. It is an empty tag, meaning it does not have a closing tag.

<img src="image.jpg" alt="Nature" width="300" height="200">

Key Points:

alt → alternative text
width/height → image size
align → left, right, center

Image Formats: .jpg, .png, .gif, .svg

🔹 Clickable Image

A clickable image is an image that behaves like a link — when you click on it, it redirects you to another webpage, opens an email, or performs some action.

<a href="home.html">
  <img src="logo.png" alt="Home">
</a>

🔹 Image Maps

Used to create clickable areas within one image.

<img src="worldmap.jpg" usemap="#worldmap">
<map name="worldmap">
  <area shape="rect" coords="0,0,100,100" href="asia.html">
</map>

🔹 Working with Tables

HTML tables are a way to display data in a structured format using rows and columns.

The

element defines a table row, the element defines a table header, and the element defines a table cell.

<table border="1" cellpadding="5">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Abhishek</td>
    <td>19</td>
  </tr>
</table>

Table Attributes: border, cellspacing, cellpadding, align
Cell Attributes: colspan, rowspan
Nested Table: Table inside another table

🎨 UNIT II — CSS & JavaScript

🔹 Introduction to CSS

CSS (Cascading Style Sheets) styles HTML elements.

Types of CSS:

Inline: <h1 style="color:red;">Hello</h1>
Internal: In <style> tag.
External: Linked .css file using <link>.

🔹 Creating Divs, Tags, and Classes

#main { background: lightgray; }
.intro { font-size: 20px; color: blue; }

<div id="main" class="intro">Welcome</div>

🔹 Navigation Links

a:hover {
  background-color: blue;
  color: white;
}

🔹 Effects with CSS

Text Shadow: text-shadow: 2px 2px 5px gray;
Box Shadow: box-shadow: 3px 3px 5px lightgray;
Transitions: transition: 0.5s;

🧩 JavaScript

JavaScript makes web pages dynamic and interactive.

Uses:

Form validation
Animations
DOM manipulation

🔹 Variables

Variables store data values.

var name = "Abhishek";
let age = 19;
const pi = 3.14;

🔹 Operators in JavaScript

Type	Description	Examples
Arithmetic	Used to perform mathematical operations.	`+`, `-`, `*`, `/`, `%`, `++`, `--`
Comparison	Used to compare two values.	`==`, `===`, `!=`, `!==`, `<`, `>`, `<=`, `>=`
Logical	Used to combine multiple conditions.	`&&` (AND), `		`(OR),`!` (NOT)
Assignment	Used to assign values to variables.	`=`, `+=`, `-=`, `*=`, `/=`, `%=`
Bitwise	Operates on bits and performs bit-level operations.	`&`, `	`,` ^`,` ~`,` <<`,` >>`,` >>>`
Ternary	Short form of `if...else` condition.	`condition ? value1 : value2`
Type	Used to check the data type of a variable.	`typeof`, `instanceof`

🔹 Control Statements

Control statements help in making decisions and controlling the flow of a program.

if (age >= 18) console.log("Adult");
else console.log("Minor");

🧠 Explanation:

if → Checks a condition.
else → Executes when the condition is false. ✅ Example Output: Adult

🔹 Loops

Loops are used to execute a block of code repeatedly.

for (let i = 0; i < 5; i++) console.log(i);

🧠 Explanation:

Starts from 0, runs till 4.
i++ increases value by 1 each time.

🌀 Types of Loops:

Loop Type	Syntax Example	Description
for	`for(let i=0; i<5; i++)`	Runs a fixed number of times.
while	`while(i < 5)`	Runs while the condition is true.
do...while	`do { ... } while(i < 5)`	Runs once, then checks the condition.
for...of	`for(let item of array)`	Loops through array values.
for...in	`for(let key in object)`	Loops through object properties.

🔹 Error Handling

Used to handle unexpected errors gracefully.

try {
  let result = 10 / 0;
} catch (error) {
  console.error("Error occurred:", error);
} finally {
  console.log("Execution complete");
}

🧠 Explanation:

try → Code that may produce an error.
catch → Handles the error.
finally → Always executes.

🔹 Arrays

An array stores multiple values in a single variable.

let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[1]);

🧠 Explanation:

Index starts at 0. ✅ Output: Banana

📚 Common Array Methods:

Method	Description	Example
`push()`	Adds element to end	`fruits.push("Orange")`
`pop()`	Removes last element	`fruits.pop()`
`length`	Returns size	`fruits.length`
`includes()`	Checks if item exists	`fruits.includes("Apple")`

🔹 Functions

Functions are blocks of code designed to perform a specific task.

function greet(name) {
  return "Hello, " + name;
}

🧠 Explanation:

Functions make code reusable. ✅ Example: greet("Abhishek") → Hello, Abhishek

⚙️ Function Types:

Type	Example	Description
Normal Function	`function add(){}`	Defined using `function` keyword.
Arrow Function	`const add = () => {}`	Shorter ES6 syntax.
Anonymous Function	`(function(){})()`	Has no name.

🔹 Built-in Functions

Predefined functions available in JavaScript.

Function	Description	Example
`alert()`	Shows a popup message	`alert("Welcome!")`
`prompt()`	Takes user input	`prompt("Enter name:")`
`parseInt()`	Converts string to number	`parseInt("123")`
`toUpperCase()`	Converts to uppercase	`"hello".toUpperCase()`

🔹 Date and Time

Used to handle date and time values.

let now = new Date();
console.log(now.toLocaleString());

🧠 Explanation:

new Date() → Creates current date & time. ✅ Output Example: 3/11/2025, 12:45:30 PM

🔹 Objects

Objects store data in key–value pairs.

let student = { name: "Abhishek", age: 19 };
console.log(student.name);

🧠 Explanation:

Access properties using object.property ✅ Output: Abhishek

🧩 Common Object Methods:

Method	Description
`Object.keys(obj)`	Returns all keys
`Object.values(obj)`	Returns all values
`Object.entries(obj)`	Returns key–value pairs
`delete obj.key`	Deletes a property

🧰 UNIT III — WYSIWYG HTML Editors

WYSIWYG (What You See Is What You Get) editors allow drag-and-drop web design.

Examples: Dreamweaver, Amaya, CoffeeCup, Expression Web

Advantages:

Easy to use
No need to code manually
Real-time preview

Tasks:

Create new site & pages
Add images, text, links
Test & preview website

📊 UNIT IV — Tables and Frames

🧱 1. HTML Tables

Tables in HTML are used to display data in rows and columns format.

🧩 Structure of a Table

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Abhishek</td>
    <td>19</td>
  </tr>
</table>

Explanation:

Tag	Meaning
`<table>`	Defines a table
`<tr>`	Defines a table row
`<th>`	Defines a header cell (bold + centered)
`<td>`	Defines a data cell

🧩 Table Attributes

Attribute	Description
`border`	Adds border to the table
`cellspacing`	Space between cells
`cellpadding`	Space inside each cell
`align`	Aligns the table (`left`, `center`, `right`)
`colspan`	Merges cells horizontally
`rowspan`	Merges cells vertically

Example:

<table border="1">
  <tr>
    <th colspan="2">Student Info</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>Abhishek</td>
  </tr>
</table>

🧩 Accessible Tables

Accessible tables are readable, structured, and user-friendly for screen readers.

<table>
  <caption>Student Data</caption>
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Abhishek</td>
    <td>90</td>
  </tr>
</table>

✅ Additions:

<caption> → Gives a title.
<th> → Makes header cells accessible.
Proper use of rows and columns improves readability.

🎨 Styling Tables with CSS

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}
caption {
  caption-side: top;
  font-weight: bold;
  margin: 10px;
}

🧩 2. Frames in HTML

Frames divide a browser window into multiple sections.
Each section (frame) can load a different HTML page.

⚠️ Note: Frames are deprecated in HTML5, replaced by <iframe>.

🪟 A. Single Window Frame

Displays one document only.

<frameset>
  <frame src="home.html">
</frameset>

📑 B. Column Frame

Divides window into vertical columns.

<frameset cols="30%,70%">
  <frame src="menu.html">
  <frame src="content.html">
</frameset>

📃 C. Row Frame

Divides window into horizontal rows.

<frameset rows="25%,75%">
  <frame src="header.html">
  <frame src="main.html">
</frameset>

🧱 D. Complex Frame

Combines rows and columns for detailed layouts.

<frameset rows="20%,80%">
  <frame src="header.html">
  <frameset cols="30%,70%">
    <frame src="menu.html">
    <frame src="content.html">
  </frameset>
</frameset>

🌐 E. Inline Frame (iframe) — HTML5 Alternative

Used to embed one webpage inside another.

<iframe src="https://www.wikipedia.org" width="500" height="300"></iframe>

🌍 UNIT V — Web Hosting & FTP

🌐 1. Domain Name & DNS

🔹 Domain Name

Human-readable name for a website.
Example: www.google.com

🔹 DNS (Domain Name System)

Converts domain names into IP addresses.
Example: google.com → 142.250.183.238

💻 2. Web Hosting

Definition:
Web hosting means storing your website files on a server connected to the internet.

⚙️ Steps to Host a Website:

Register a domain name
Purchase web hosting service
Upload website files via FTP
Link domain to hosting server
Access your site on the web

🌟 Types of Web Hosting

Type	Description	Example
Shared Hosting	Multiple websites on one server	Cheap, for beginners
VPS Hosting	Virtual private environment	For medium sites
Dedicated Hosting	Full server for one website	High performance
Cloud Hosting	Hosted on multiple servers	Scalable & reliable

📤 3. FTP (File Transfer Protocol)

Definition:
FTP is used to upload, download, and manage files between a local computer and a web server.

🔹 How FTP Works:

Requires:
- Host (server) address
- Username & Password
Connect using an FTP client (like FileZilla)
Transfer files by drag and drop

🔹 Common FTP Commands

Command	Description
`ls`	List files on server
`cd`	Change directory
`get`	Download file
`put`	Upload file
`rename`	Rename file
`delete`	Delete file

🔹 Popular FTP Tools

Tool	Description
FileZilla	Free & widely used FTP client
CuteFTP	User-friendly interface
WS_FTP	Secure FTP software

💡 4. Web Publishing Steps (Summary)

Create your website (HTML, CSS, JS)
Test locally on browser
Buy domain and hosting
Upload files via FTP
Link domain with hosting
Go live on the internet 🌎

🧩 Final Project Example (HTML + CSS + JS)

<!DOCTYPE html>
<html>
<head>
  <title>My Web Project</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #f9f9f9;
      color: #333;
    }
    button {
      padding: 10px 20px;
      background: blue;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
    button:hover {
      background: darkblue;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a simple demo combining HTML, CSS, and JS.</p>
  <button onclick="greet()">Click Me</button>

  <script>
    function greet() {
      alert("Hello, Abhishek! Welcome to Web Design!");
    }
  </script>
</body>
</html>