Web Designing

1. Introduction to Web Designing

Web designing is the process of planning, designing and creating websites. It deals with structure, visual appearance, content arrangement and interactive parts that users see and use in a browser.

Easy way to understand: Think of a website as a building. Planning is the architectural plan, HTML is the structure, CSS is the decoration and JavaScript is the behaviour.

Importance of Web Designing

Online Presence

Organizations can introduce themselves and their services online.

Communication

Websites can provide announcements, news and contact information.

Education

Schools can provide notes, assignments, quizzes and learning materials.

Business

Businesses can display products and services to customers.

HTML + CSS + JavaScript

HTML
Structure

+

CSS
Appearance

+

JavaScript
Behaviour

→

Web Page

2. Website Planning

Website planning means deciding what the website should achieve, who will use it, what pages are required and how the pages will connect before coding begins.

Planning Steps

Identify the purpose.
Identify the target audience.
Collect information.
Determine required pages.
Create a sitemap.
Plan the layout.
Select colours and fonts.
Prepare media.
Select technologies.
Develop the website.
Test the website.
Publish and maintain it.

Sitemap Example

Home
├── About Us
├── Courses
│  ├── Web Designing
│  ├── Networking
│  └── Video Editing
├── Gallery
├── Exams
└── Contact Us

3. HTML – HyperText Markup Language

HTML is the standard markup language used to create and structure content on webpages.

Example 1: Basic HTML Page

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>

<body>

    <h1>Welcome to My Website</h1>

    <p>
        This is my first webpage.
    </p>

</body>
</html>

Outcome / Preview

Common HTML Elements

Element	Purpose	Example
<h1>	Main heading	<h1>Web Design</h1>
<p>	Paragraph	<p>Welcome.</p>
<a>	Hyperlink	<a href="about.html">About</a>
<img>	Image	<img src="logo.png">
<div>	Container	<div>Content</div>

HTML Attributes

<img
    src="computer.jpg"
    alt="Computer laboratory"
    width="500"
>

Outcome / Preview

Computer Laboratory

This represents an image with alternative text.

4. CSS – Cascading Style Sheets

CSS controls the appearance, layout and presentation of HTML elements.

CSS Syntax

h1 {
    color: red;
    text-align: center;
    font-size: 35px;
}

Outcome / Preview

Three Ways of Applying CSS

Method	Description	Use
Inline	CSS written inside an HTML element.	Small changes.
Internal	CSS written inside a style element.	One-page websites.
External	CSS stored in a separate CSS file.	Multi-page websites.

External CSS

<link
rel="stylesheet"
href="style.css"
>

Outcome / Preview

5. JavaScript

JavaScript is a programming language used to add interactivity and dynamic behaviour to webpages.

Example

<button onclick="showMessage()">
    Click Me
</button>

<script>

function showMessage(){

    alert("Welcome to SAKIM IMPACT!");

}

</script>

Outcome / Interactive Preview

Click the button to see the JavaScript outcome.

Variables

let studentName = "John";
let age = 20;
let course = "Web Designing";

6. Links and Navigation

Links allow users to move between pages, websites and sections.

Basic Link

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

Outcome / Preview

About Us

7. Images and Multimedia

Images, audio and video improve visual communication.

Adding an Image

<img
src="image.jpg"
alt="College computer laboratory"
width="500"
>

Outcome / Preview

Computer Laboratory

Adding Video

<video controls width="600">

    <source
    src="video.mp4"
    type="video/mp4"
    >

</video>

Adding Audio

<audio controls>

    <source
    src="audio.mp3"
    type="audio/mpeg"
    >

</audio>

Important: Large multimedia files can slow down websites. Optimize media before publishing.

8. Tables and Lists

HTML Table

<table>

<tr>
    <th>Student</th>
    <th>Course</th>
</tr>

<tr>
    <td>John</td>
    <td>Web Designing</td>
</tr>

</table>

Outcome / Preview

Student	Course
John	Web Designing
Mary	Networking

Unordered List

<ul>

<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>

</ul>

Outcome / Preview

HTML
CSS
JavaScript

9. HTML Forms

Forms are used to collect information from users.

Example Registration Form

<form>

<label>Full Name:</label>
<input type="text">

<label>Email:</label>
<input type="email">

<label>Course:</label>

<select>
    <option>Web Designing</option>
    <option>Networking</option>
</select>

<button type="submit">
Submit
</button>

</form>

Outcome / Preview

10. Responsive Web Design

Responsive web design creates websites that adapt to different screen sizes such as desktop, tablet and smartphone.

Media Query

@media (max-width: 768px){

    .container{
        width:100%;
    }

    h1{
        font-size:28px;
    }

}

Outcome / Preview

11. Web Hosting and Publishing

Web hosting is a service that stores website files and makes them available through the Internet.

Term	Meaning
Domain Name	Human-readable website address.
Web Hosting	Service that stores website files online.
Web Server	System that stores and delivers website resources.
Web Browser	Software used to access webpages.
URL	Address used to locate an Internet resource.

Common File Structure

MyWebsite/

├── index.html
├── about.html
├── courses.html
├── contact.html

├── css/
│   └── style.css

├── js/
│   └── script.js

└── images/
    ├── logo.png
    └── banner.jpg

12. Practical Activities

Activity 1

Create a personal website using HTML.

Activity 2

Create a college website.

Activity 3

Create a navigation menu.

Activity 4

Create a registration form.

Activity 5

Style a website using external CSS.

Activity 6

Create a responsive website.

Activity 7

Add JavaScript interaction.

Activity 8

Publish a completed website.

13. Theory Examination

SAKIM IMPACT

WEB DESIGNING THEORY EXAMINATION

COLLEGE EXAMINATION STYLE

Time: 60 Minutes | Total Questions: 20

Examination Instructions

Enter your name and registration number.
Answer all questions.
Select only one answer for each question.
Do not refresh the page while an examination is in progress.
Click Submit & Mark Exam when finished.
Your answers will be locked after submission.
The correct answers will be displayed after marking.
Your result will automatically be saved for future reference.

Candidate Name

Admission / Registration No.

14. Practical Examination

SAKIM IMPACT

WEB DESIGNING PRACTICAL EXAMINATION

Time: 2 Hours | Total: 50 Marks

Practical Examination Instructions

Complete the tasks using HTML, CSS and JavaScript.
Create a professional webpage.
Use meaningful headings and navigation.
Apply CSS styling.
Make the page responsive.
Add at least one interactive JavaScript feature.
Save your work before submitting.

Candidate Name

Registration Number

Task 1 – HTML Structure

Create a webpage for a college called SAKIM IMPACT COLLEGE. Include a heading, paragraph, image area and navigation menu.

Marks: 10

Task 2 – CSS Design

Use CSS to create a professional colour scheme, cards, buttons, spacing and page layout.

Marks: 10

Task 3 – Navigation

Create navigation links for: Home, About, Courses, Gallery and Contact.

Marks: 5

Task 4 – Registration Form

Create a registration form containing: Name, Email, Phone, Course and Submit button.

Marks: 10

Task 5 – JavaScript

Add JavaScript that displays a message when a button is clicked.

Marks: 5

Task 6 – Responsive Design

Use a CSS media query to make the webpage suitable for mobile devices.

Marks: 5

Task 7 – Code Quality

Use properly organized, readable and valid HTML/CSS/JavaScript.

Marks: 5

Practical marking note: This browser-only version provides the practical task and candidate submission record. A teacher can inspect the student's actual project files and award the practical marks. Automatic code-quality assessment would require a more advanced backend system.

15. Saved Examination Records

Examination records are stored in this browser using localStorage. They remain available after refreshing or closing the browser, provided the browser's stored data is not cleared.

1. Introduction to Web Designing

Importance of Web Designing

Online Presence

Communication

Education

Business

HTML + CSS + JavaScript

2. Website Planning

Planning Steps

Sitemap Example

3. HTML – HyperText Markup Language

Example 1: Basic HTML Page

Common HTML Elements

HTML Attributes

Computer Laboratory

4. CSS – Cascading Style Sheets

CSS Syntax

Three Ways of Applying CSS

External CSS

5. JavaScript

Example

Variables

6. Links and Navigation

Basic Link

Navigation Menu

7. Images and Multimedia

Adding an Image

Adding Video

Adding Audio

8. Tables and Lists

HTML Table

Unordered List

9. HTML Forms

Example Registration Form

10. Responsive Web Design

Media Query

11. Web Hosting and Publishing

Common File Structure

12. Practical Activities

Activity 1

Activity 2

Activity 3

Activity 4

Activity 5

Activity 6

Activity 7

Activity 8

13. Theory Examination

SAKIM IMPACT

WEB DESIGNING THEORY EXAMINATION

Examination Instructions

14. Practical Examination

SAKIM IMPACT

WEB DESIGNING PRACTICAL EXAMINATION

Practical Examination Instructions

Task 1 – HTML Structure

Task 2 – CSS Design

Task 3 – Navigation

Task 4 – Registration Form

Task 5 – JavaScript

Task 6 – Responsive Design

Task 7 – Code Quality

15. Saved Examination Records