DEV Community

Cover image for ๐Ÿ“˜ Complete BCA Web Designing Notes for CIITM DHANBAD
Abhishek Gupta
Abhishek Gupta

Posted on • Edited on

๐Ÿ“˜ Complete BCA Web Designing Notes for CIITM DHANBAD

๐ŸŸฆ UNIT โ€“ I : HTML + HTTP + IMAGES + TABLES + FRAMES

โญ 1. Introduction to HTTP

  • HTTP (HyperText Transfer Protocol) is the communication protocol between browser & server.
  • Works on request โ†’ response model.
  • Uses port 80 (HTTP) and 443 (HTTPS).
  • Stateless โ†’ server does not remember previous requests.

โญ 2. Introduction to HTML

  • HTML = HyperText Markup Language
  • Used to create web pages.
  • HTML uses tags to define the structure of a page.

โญ 3. Basic HTML Tags

Tag Description
<html> Root of the document
<head> Metadata
<title> Title of webpage
<body> Main content
<h1>โ€ฆ<h6> Headings
<p> Paragraph
<br> Line break
<hr> Horizontal line

โญ 4. Body Tags & Coding Style

  • Use proper indentation.
  • Write clean HTML: 
  <body>
      <h1>Welcome</h1>
  </body>
Enter fullscreen mode Exit fullscreen mode

โญ 5. Formatting & Modifying Text

Tag Meaning
<b> Bold
<i> Italic
<u> Underline
<strong> Strong bold
<em> Emphasis
<sup> Superscript
<sub> Subscript

โญ 6. Lists

Unordered List 

<ul><li>Item</li></ul>
Enter fullscreen mode Exit fullscreen mode

Ordered List 

<ol><li>Item</li></ol>
Enter fullscreen mode Exit fullscreen mode

Definition List 

<dl><dt>Term</dt><dd>Definition</dd></dl>
Enter fullscreen mode Exit fullscreen mode

โญ 7. Links

1. Linking to another Document 

<a href="page.html">Go</a>
Enter fullscreen mode Exit fullscreen mode

2. Internal Links 

<a href="#section1">Jump</a>
Enter fullscreen mode Exit fullscreen mode

3. Email Links 

<a href="mailto:test@gmail.com">Mail Me</a>
Enter fullscreen mode Exit fullscreen mode

4. Relative vs Absolute

  • Relative โ†’ "about.html"
  • Absolute โ†’ "https://google.com"

โญ 8. Images 

<img src="img.jpg" width="300" height="200" alt="Image">
Enter fullscreen mode Exit fullscreen mode

Image Concepts:

  • Placement โ†’ align with CSS
  • Margins โ†’ margin:10px;
  • Formats โ†’ JPG, PNG, GIF
  • Clickable Images 
<a href="next.html"><img src="pic.jpg"></a>
Enter fullscreen mode Exit fullscreen mode

Image Maps 

<img src="map.jpg" usemap="#m">
<map name="m">
  <area shape="rect" coords="0,0,50,50" href="a.html">
</map>
Enter fullscreen mode Exit fullscreen mode

โญ 9. Working with Tables

Basic Table 

<table><tr><td>Data</td></tr></table>
Enter fullscreen mode Exit fullscreen mode

Table Attributes:

  • border, width, cellpadding, cellspacing

Cell Attributes:

  • align, valign, rowspan, colspan

Nested Tables 

<table>
  <tr><td>
    <table>โ€ฆ</table>
  </td></tr>
</table>
Enter fullscreen mode Exit fullscreen mode

โญ 10. Frames (Old HTML Feature)

Creating Frameset 

<frameset cols="50%,50%">
  <frame src="left.html">
  <frame src="right.html">
</frameset>
Enter fullscreen mode Exit fullscreen mode
  • Column Frames โ†’ cols="30%,70%"
  • Row Frames โ†’ rows="50%,50%"
  • Complex Frames โ†’ nested framesets

๐ŸŸฆ UNIT โ€“ II : CSS + JAVASCRIPT

โญ 1. CSS (Cascading Style Sheet)

3 Ways to Use CSS

  1. Inline CSS 
<p style="color:red;">Hello</p>
Enter fullscreen mode Exit fullscreen mode
  1. Internal CSS 
<style>h1{color:blue;}</style>
Enter fullscreen mode Exit fullscreen mode
  1. External CSS 
<link rel="stylesheet" href="style.css">
Enter fullscreen mode Exit fullscreen mode

โญ 2. CSS Selectors

ID Selector 

#box { color:red; }
Enter fullscreen mode Exit fullscreen mode

Class Selector 

.red { color:red; }
Enter fullscreen mode Exit fullscreen mode

Tag Selector 

h1 { font-size:30px; }
Enter fullscreen mode Exit fullscreen mode

โญ 3. Borders 

div { border:2px solid black; }
Enter fullscreen mode Exit fullscreen mode

โญ 4. Navigation Links

Horizontal nav bar using list:

ul li { display:inline; padding:10px; }
Enter fullscreen mode Exit fullscreen mode

โญ 5. CSS Effects

  • Hover effects
  • Shadows
  • Transitions
  • Background color

โญ 6. JavaScript Introduction

  • JavaScript makes web pages dynamic.
  • Runs in browser.
  • Used for validation, events, animations, form handling.

โญ 7. JavaScript Variables 

var a;
let b;
const c = 10;
Enter fullscreen mode Exit fullscreen mode

โญ 8. Operators

  • Arithmetic โ†’ + - * / %
  • Comparison โ†’ == != > <
  • Logical โ†’ && || !

โญ 9. Control Statements 

if(){ }
else if(){ }
for(){ }
while(){ }
Enter fullscreen mode Exit fullscreen mode

โญ 10. Error Handling 

try{ }
catch(e){ }
Enter fullscreen mode Exit fullscreen mode

โญ 11. Arrays 

let a = [1,2,3];
Enter fullscreen mode Exit fullscreen mode

โญ 12. Functions 

function test(){ }
Enter fullscreen mode Exit fullscreen mode

โญ 13. Built-In Functions

  • alert()
  • parseInt()
  • toString()
  • Math.random()

โญ 14. Date & Time 

let d = new Date();
d.getFullYear();
Enter fullscreen mode Exit fullscreen mode

โญ 15. Objects 

let person = {name:"Abhishek", age:20};
Enter fullscreen mode Exit fullscreen mode

โญ 16. Call Method 

obj.func.call(otherObj);
Enter fullscreen mode Exit fullscreen mode

๐ŸŸฆ UNIT โ€“ III : WYSIWYG Editors + Image Optimization

โญ 1. WYSIWYG HTML Editors

("What You See Is What You Get")

Examples:

  • Dreamweaver
  • Expression Web
  • AMAYA
  • CoffeeCup HTML Editor

Benefits:

  • No need to write code
  • Drag-and-drop
  • Auto formatting
  • Quick page creation

โญ 2. Creating a Website in Editor

  • Create site
  • Create new page
  • Insert & format text
  • Add images
  • Link pages
  • Email links
  • Manage files

โญ 3. Creating & Inserting Images

Optimizing Images

  • Compress size

  • Use appropriate format

    • JPG โ†’ photos
    • PNG โ†’ transparency
    • GIF โ†’ simple graphics

Insert GIF/PNG 

<img src="pic.gif">
Enter fullscreen mode Exit fullscreen mode

๐ŸŸฆ UNIT โ€“ IV : Accessible Tables + Frames

โญ 1. Designing Accessible Tables

  • Use proper <thead>, <tbody>, <caption>
  • Add CSS for styling
  • Maintain readability

Styling Example: 

table { border-collapse:collapse; }
th,td { border:1px solid #000; padding:10px; }
Enter fullscreen mode Exit fullscreen mode

โญ 2. Editing Table Layouts

  • Change width
  • Merge cells
  • Add background colors

โญ 3. Creating Websites with Frames

(Old method; replaced by CSS layouts now)

Frameset Example 

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

Features:

  • Open pages inside frames
  • Control borders
  • Change scrollbars
  • Target links to frame

๐ŸŸฆ UNIT โ€“ V : Web Hosting + FTP

โญ 1. What is a Domain?

  • A domain is your website name.
  • Example: google.com

โญ 2. DNS

  • DNS = Domain Name System
  • Converts domain names to IP addresses.

โญ 3. How to Register a Domain

  • Use websites like

    • GoDaddy
    • Namecheap
    • Google Domains

  • Pay yearly fee.

โญ 4. What is Web Hosting?

  • A service that stores your website files on a server.

โญ 5. How to Get Hosting

  1. Choose hosting provider
  2. Buy plan
  3. Connect domain
  4. Upload website

โญ 6. Hosting Your Website

  • Upload files using cPanel or FTP
  • Set permissions
  • Test website online

โญ 7. FTP (File Transfer Protocol)

FTP is used to:

  • Upload files
  • Download files
  • Rename files
  • Delete files

Basic FTP Commands

  • ls โ€“ list files
  • cd โ€“ change directory
  • put filename โ€“ upload
  • get filename โ€“ download
  • rename old new โ€“ rename

FTP Softwares

  • FileZilla
  • WS_FTP
  • CuteFTP

๐Ÿ“ IMPORTANT EXAM QUESTIONS (Most Repeated)

โญ UNIT โ€“ I

  1. Explain types of HTML lists.
  2. Difference between relative & absolute links.
  3. Explain image maps with example.
  4. Explain tables & their attributes.

โญ UNIT โ€“ II

  1. What is CSS? Explain its types.
  2. Explain JavaScript event model.
  3. Difference between var, let, const.
  4. Explain JavaScript functions & arrays.

โญ UNIT โ€“ III

  1. What is WYSIWYG editor? Explain its advantages.
  2. How to optimize images for the web?

โญ UNIT โ€“ IV

  1. Explain accessible table design.
  2. What are frames? Explain types of framesets.

โญ UNIT โ€“ V

  1. What is a domain? Explain DNS.
  2. What is web hosting?
  3. Explain FTP and its commands.

Top comments (0)