DEV Community

King coder
King coder

Posted on

Frequently Asked Questions for Exam Preparation(WEB-DESIGNING)

🟦 UNIT – I : HTML + HTTP + IMAGES + TABLES + FRAMES

⭐ Q1. What is HTTP? Explain features, methods, and status codes. (10 Marks)

Definition

HTTP (HyperText Transfer Protocol) is a communication protocol used for transferring data between client (browser) and server.

Features of HTTP

  1. Stateless – Server does not remember previous requests.
  2. Connectionless – Connection closes after response.
  3. Client–Server model – Browser sends request, server sends response.
  4. Plain-text protocol – Easy to read and debug.
  5. Supports caching – Makes websites load faster.

HTTP Methods

Method Use
GET Retrieve data
POST Send data
PUT Update
DELETE Remove

HTTP Status Codes

Code Meaning
200 Success
301 Moved Permanently
403 Forbidden
404 Not Found
500 Server Error

⭐ Q2. Explain HTML structure with example. (5 Marks) 

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • <!DOCTYPE html> → HTML5 declaration
  • <html> → Root element
  • <head> → Contains metadata
  • <body> → Visible content

⭐ Q3. Explain all HTML Text Formatting Tags with examples. (5 Marks)

Tag Use Example
<b> Bold <b>Bold</b>
<i> Italic <i>Italic</i>
<u> Underline <u>Underline</u>
<strong> Important <strong>Important</strong>
<em> Emphasis <em>Emphasis</em>
<mark> Highlight <mark>Text</mark>
<sup> Superscript 52
<sub> Subscript H2O

⭐ Q4. Explain all types of lists with examples. (5 Marks)

1️⃣ Unordered List 

<ul><li>Apple</li><li>Mango</li></ul>
Enter fullscreen mode Exit fullscreen mode

2️⃣ Ordered List 

<ol><li>First</li><li>Second</li></ol>
Enter fullscreen mode Exit fullscreen mode

3️⃣ Definition List 

<dl>
 <dt>HTML</dt>
 <dd>HyperText Markup Language</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

⭐ Q5. Explain hyperlinks with types & examples. (10 Marks)

1. External Link 

<a href="https://google.com">Google</a>
Enter fullscreen mode Exit fullscreen mode

2. Internal Link 

<a href="about.html">About</a>
Enter fullscreen mode Exit fullscreen mode

3. Email Link 

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

4. Internal Page Jump 

<a href="#top">Go to Top</a>
Enter fullscreen mode Exit fullscreen mode

5. Download Link 

<a href="notes.pdf" download>Download PDF</a>
Enter fullscreen mode Exit fullscreen mode

⭐ Q6. Explain images with attributes, types & examples. (10 Marks)

Basic: 

<img src="photo.jpg" alt="My Photo" width="200">
Enter fullscreen mode Exit fullscreen mode

Attributes:

  • src – file path
  • alt – alternative text
  • width, height – dimensions
  • title – tooltip

Image Formats:

Format Use
JPG Photos
PNG Transparent images
GIF Animations

⭐ Q7. Explain Image Map with example. (5 Marks) 

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

⭐ Q8. Explain tables with rowspan & colspan. (10 Marks) 

<table border="1">
 <tr>
   <th rowspan="2">Name</th>
   <th colspan="2">Marks</th>
 </tr>
 <tr>
   <td>Math</td><td>Sci</td>
 </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

⭐ Q9. What are frames? Explain types with example. (10 Marks)

Column Frames: 

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

Row Frames: 

<frameset rows="30%,70%">
Enter fullscreen mode Exit fullscreen mode

Nested Frames: 

<frameset cols="25%,75%">
 <frame src="left.html">
 <frameset rows="50%,50%"> ... </frameset>
</frameset>
Enter fullscreen mode Exit fullscreen mode

🟦 UNIT – II : CSS + JAVASCRIPT

⭐ Q10. Explain types of CSS with examples. (5 Marks)

Inline CSS 

<p style="color:red;">Hello</p>
Enter fullscreen mode Exit fullscreen mode

Internal CSS 

<style>h1{color:blue;}</style>
Enter fullscreen mode Exit fullscreen mode

External CSS 

<link rel="stylesheet" href="style.css">
Enter fullscreen mode Exit fullscreen mode

⭐ Q11. Explain CSS Selectors (Tag, Class, ID). (5 Marks) 

p {color:red;}     /* Tag Selector */
.red {color:blue;} /* Class Selector */
#box {color:green;} /* ID Selector */
Enter fullscreen mode Exit fullscreen mode

⭐ Q12. Explain CSS Box Model. (5 Marks) 

+-------------------+
|     MARGIN        |
|  +-------------+  |
|  |  BORDER     |  |
|  | +---------+ |  |
|  | | PADDING | |  |
|  | | CONTENT | |  |
|  | +---------+ |  |
|  +-------------+  |
+-------------------+
Enter fullscreen mode Exit fullscreen mode

Includes:

  • Content
  • Padding
  • Border
  • Margin

⭐ Q13. Explain JavaScript Variables & Data Types. (5 Marks)

Declaring: 

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

Data Types:

  • Number
  • String
  • Boolean
  • Object
  • Array

⭐ Q14. Explain JavaScript Operators with examples. (5 Marks)

Arithmetic: 

let sum = 10 + 5;
Enter fullscreen mode Exit fullscreen mode

Comparison: 

10 > 5
Enter fullscreen mode Exit fullscreen mode

Logical: 

if(a > 10 && b < 20)
Enter fullscreen mode Exit fullscreen mode

⭐ Q15. Explain JavaScript Arrays & Functions. (8 Marks)

Array Example: 

let fruits = ["Apple","Banana","Mango"];
Enter fullscreen mode Exit fullscreen mode

Function Example: 

function add(a,b){ return a+b; }
Enter fullscreen mode Exit fullscreen mode

⭐ Q16. Explain Error Handling. (5 Marks) 

try {
  let a = k;
} catch(e) {
  alert("Error Found");
}
Enter fullscreen mode Exit fullscreen mode

🟦 UNIT – III : WYSIWYG EDITORS + IMAGES

⭐ Q17. What is WYSIWYG? Advantages? (5 Marks)

WYSIWYG = What You See Is What You Get

Advantages:

  • No coding needed
  • Drag & drop
  • Instant preview
  • Auto formatting

Examples:

Dreamweaver, Expression Web, Amaya

⭐ Q18. What is Image Optimization? (5 Marks)

Reducing file size without losing quality.

Methods:

  • Compressing
  • Using proper formats
  • Reducing resolution

🟦 UNIT – IV : ACCESSIBLE TABLES + FRAMES

⭐ Q19. What are Accessible Tables? (5 Marks)

Tables designed for screen readers and better UX.

Example: 

<table>
 <caption>Student List</caption>
 <thead><tr><th>Name</th><th>Age</th></tr></thead>
 <tbody><tr><td>Abhi</td><td>20</td></tr></tbody>
</table>
Enter fullscreen mode Exit fullscreen mode

⭐ Q20. Define: <thead>, <tbody>, <tfoot>. (5 Marks)

  • <thead> → Contains headings
  • <tbody> → Main table data
  • <tfoot> → Summary footer

🟦 UNIT – V : WEB HOSTING + DNS + FTP

⭐ Q21. What is a Domain? (2 Marks)

A domain is a website name like google.com or nexgenstudio.com.

⭐ Q22. What is DNS? Explain with diagram. (5 Marks)

DNS = Domain Name System
Converts domain → IP address.

Example:
google.com → 142.250.182.78

⭐ Q23. What is Web Hosting? Explain types. (5 Marks)

Types:

  • Shared Hosting
  • VPS Hosting
  • Dedicated Hosting
  • Cloud Hosting

⭐ Q24. Explain FTP & Commands. (10 Marks)

FTP = File Transfer Protocol
Used to upload website files to server.

Commands:

  • ls → list
  • cd → change dir
  • put file → upload
  • get file → download
  • rename old new → rename

⭐ Q25. Steps to Upload Website via FileZilla. (5 Marks)

  1. Open FileZilla
  2. Enter hostname, username, password
  3. Connect
  4. Open public_html
  5. Upload files
  6. Visit website

⭐ Q26. What is the Difference Between Relative and Absolute Link?

✅ Relative Link

A relative link points to a page within the same website or same folder.
It does not include the full website URL.

✔ Example: 

<a href="about.html">About Us</a>
Enter fullscreen mode Exit fullscreen mode

This works only inside the same website because it assumes the file "about.html" exists in the same folder.

✔ When to use?

  • When linking pages inside your own website
  • For easy file management
  • For local development

✅ Absolute Link

An absolute link contains the complete URL, including protocol (http/https) and domain name.

✔ Example: 

<a href="https://www.google.com">Google</a>
Enter fullscreen mode Exit fullscreen mode

This link works from anywhere in the world, because it gives the full address.

✔ When to use?

  • When linking to another website
  • When linking to external pages
  • When sharing content across the internet

⭐ Q27. What is CSS? How can we access an external .css file in our website? Explain with example?

CSS (Cascading Style Sheets) is a stylesheet language used to control the design, layout, and appearance of a webpage.
HTML creates the structure, while CSS adds color, spacing, fonts, borders, backgrounds, animations, etc.

✔ Uses of CSS:

  • Makes webpages attractive
  • Controls layout (positioning, spacing)
  • Improves user experience
  • Saves time because one CSS file can style the entire website

⭐ Types of CSS

  1. Inline CSS
  2. Internal CSS
  3. External CSS (Most commonly used) ← asked in question

✅ How to Access/Link an External CSS File in a Website

External CSS means writing all styling rules inside a separate file with the extension:

style.css
Enter fullscreen mode Exit fullscreen mode

We connect this CSS file to an HTML page using the <link> tag inside <head>.

⭐ Syntax for Linking External CSS 

<link rel="stylesheet" href="style.css">
Enter fullscreen mode Exit fullscreen mode

⭐ Full Example (Easy and Exam-Ready)

👉 Step 1: Create an external CSS file named style.css 

body {
    background-color: lightblue;
}

h1 {
    color: darkblue;
    text-align: center;
}

p {
    font-size: 18px;
}
Enter fullscreen mode Exit fullscreen mode

👉 Step 2: Link this file in HTML using <link> tag 

<!DOCTYPE html>
<html>
<head>
    <title>External CSS Example</title>

    <!-- Linking CSS file -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Welcome to My Website</h1>
    <p>This paragraph is styled using external CSS.</p>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

⭐ How it Works? (Easy Explanation)

  1. HTML loads first.
  2. Browser sees <link rel="stylesheet" href="style.css">
  3. Browser opens the external file style.css
  4. CSS rules are applied to HTML elements
  5. The webpage becomes styled and beautiful

Here is an even more easy, simple and scoring answer — perfect for writing in your exam.

⭐ Q28 Explain the Concept of Web Designing. Write steps to create the Home Page of your University Website in Amaya.

🟦 What is Web Designing? (Very Simple Answer)

Web Designing means creating how a website looks and how the user uses it.

It includes:

  • Designing layout
  • Adding text, images, colors, and buttons
  • Creating menus
  • Making the website attractive
  • Making pages easy to use

In short:
👉 Web designing is the process of creating the visual look and structure of a website.

🟦 Steps to Create a Home Page of University Website in Amaya

Here are the steps in the simplest form:

✔ Step 1: Open Amaya

Open the Amaya Web Editor on your computer.

✔ Step 2: Create a New Web Page

Go to File → New → HTML Document
A blank webpage will appear.

✔ Step 3: Add Page Title

At the top, set the title as:
“My University – Home Page”

This title appears in the browser tab.

✔ Step 4: Insert University Name

Click on the page and type the name:
XYZ University

Select it → choose Heading 1 (H1) to make it large.

✔ Step 5: Insert University Logo

Go to Insert → Image
Select the logo file and adjust its size.

✔ Step 6: Add Navigation Menu

Insert links like:

  • Home
  • About Us
  • Courses
  • Departments
  • Contact Us

Using Insert → Link.

✔ Step 7: Add University Description

Insert a short introduction paragraph:

"XYZ University is known for quality education and excellent campus facilities."

Use Insert → Text.

✔ Step 8: Add Campus Images

Go to Insert → Image
Add photos of campus buildings or students.

✔ Step 9: Add a Table for Quick Info

Use Insert → Table

Example:

Info Details
Established 1995
Location Ranchi
Courses BCA, MCA, BBA, MBA

✔ Step 10: Add Footer

At the bottom of the page, type:

© 2025 XYZ University • Email: info@xyz.edu

✔ Step 11: Apply Basic Formatting

Use toolbar to:

  • Change font color
  • Center headings
  • Add background color
  • Adjust spacing

✔ Step 12: Save and Preview

Go to File → Save
Open in browser to check your home page.

⭐ Q29 Write css code That Define five class of paragraph with different background , color , margin , padding and border style. 

<p class="p1">This is paragraph style 1.</p>
<p class="p2">This is paragraph style 2.</p>
<p class="p3">This is paragraph style 3.</p>
<p class="p4">This is paragraph style 4.</p>
<p class="p5">This is paragraph style 5.</p>
Enter fullscreen mode Exit fullscreen mode 
**/* Paragraph Class 1 */
.p1 {
    background-color: lightblue;
    color: darkblue;
    margin: 20px;
    padding: 15px;
    border: 2px solid blue;
}

/* Paragraph Class 2 */
.p2 {
    background-color: lightgreen;
    color: darkgreen;
    margin: 25px;
    padding: 10px;
    border: 3px dotted green;
}

/* Paragraph Class 3 */
.p3 {
    background-color: #f7e3e3;
    color: maroon;
    margin: 15px;
    padding: 20px;
    border: 2px dashed red;
}

/* Paragraph Class 4 */
.p4 {
    background-color: #fff3cd;   /* Light yellow */
    color: #856404;              /* Dark yellow text */
    margin: 30px;
    padding: 12px;
    border: 4px double orange;
}

/* Paragraph Class 5 */
.p5 {
    background-color: #e2eafc;   /* Light purple */
    color: #2a2a72;              /* Dark blue/purple */
    margin: 18px;
    padding: 18px;
    border: 2px groove purple;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)