WEB DESIGNING NOTES for students and beginners .pdf

GPS Computer Academy offers a comprehensive Web Designing Course designed to equip students with the skills required to create modern, responsive, and visually appealing websites. In today’s digital era, businesses and individuals need websites that are not only functional but also engaging. Our course ensures you gain hands-on experience in both the technical and creative aspects of web design.

1. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
Introduction to Web Designing
Web designing is the process of creating and maintaining websites. It involves planning,
conceptualizing, and arranging content on the internet in a visually appealing and user-friendly
way. A well-designed website not only looks attractive but also provides an excellent user
experience (UX) and is easy to navigate.
Key Objectives of Web Designing
1. Visual Appeal: Creating an aesthetically pleasing layout with images, colors, and
typography.
2. Usability: Ensuring the website is easy to use and navigate.
3. Functionality: Making sure all features like forms, links, and buttons work correctly.
4. Responsive Design: Optimizing the website for desktops, tablets, and smartphones.
5. Accessibility: Ensuring the website is accessible to all users, including those with
disabilities.
Components of Web Designing
 Layout: The structure and arrangement of elements on a web page.
 Color Scheme: Choosing appropriate colors that align with the brand and appeal to
users.
 Typography: Selecting readable fonts and sizes for better user experience.
 Graphics & Images: Using visuals to enhance communication and engagement.
 Navigation: Creating menus, buttons, and links for smooth movement across pages.
Importance of Web Designing
 First impressions matter: A professionally designed website builds credibility.
 Improves user engagement and retention.
 Helps in achieving business goals, like generating leads or sales.
 Enhances search engine rankings through good design and SEO practices.
Tools Used in Web Designing
 Text Editors: VS Code, Sublime Text, Notepad++
 Graphics Tools: Adobe Photoshop, Illustrator, Canva, Figma

2. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
 Prototyping Tools: Figma, Adobe XD
 Web Technologies: HTML, CSS, JavaScript
Conclusion
Web designing is not just about making a website look good—it’s about creating a functional,
user-friendly, and engaging experience for visitors. A successful web designer blends creativity,
technical knowledge, and understanding of user behavior to craft websites that deliver value.


Basics of Internet & Web
1. What is the Internet?
 The Internet is a global network of computers connected to share information and
resources.
 It allows communication through emails, websites, social media, and more.
 Key Features:
o Worldwide connectivity
o Data sharing
o Access to information

2. What is the Web (World Wide Web)?
 The Web is a collection of websites and web pages accessible over the Internet.
 Websites are hosted on servers, and users access them via web browsers like Chrome,
Firefox, or Edge.
 Difference between Internet and Web:
Internet Web (WWW)
Global network connecting computers A collection of websites on the Internet
Includes email, file sharing, chat, etc. Specifically for accessing web pages
Infrastructure Service/application

3. Important Terms

3. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
 Website: A set of related web pages under a single domain name (e.g.,
www.example.com).
 Web Page: A single document on a website, written in HTML.
 URL (Uniform Resource Locator): The web address of a page (e.g.,
https://www.example.com).
 Domain Name: A human-readable address for a website (example.com).
 Web Hosting: The service of storing website files on a server to make them accessible
online.

4. How the Web Works
1. Client-Server Model:
o Client (browser) sends a request to the server.
o Server processes the request and sends the web page back to the client.
2. HTTP/HTTPS Protocols:
o HTTP = HyperText Transfer Protocol (communication between client and server)
o HTTPS = Secure version with encryption for safe data transfer

5. Types of Websites
 Static Websites: Fixed content, simple HTML pages.
 Dynamic Websites: Content changes based on user interaction (e.g., social media, e-
commerce).
 Responsive Websites: Adjust layout based on screen size (mobile, tablet, desktop).

6. Web Browsers
 Software used to access websites.
 Examples: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari.
 Functions: Display web pages, download files, run scripts, manage bookmarks.

7. Summary
Understanding the basics of the Internet and the Web is essential for web designing. A website is
just one component of the web, and knowing how it works helps in planning, designing, and
deploying effective websites.

4. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134


HTML (HyperText Markup Language)
HTML is the standard language used to create and structure web pages. It tells the web browser
how to display text, images, links, and other content. HTML uses tags to define elements on a
web page.

1. Basic Structure of an HTML Document
Every HTML page has a basic structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to Web Designing </h1>
<p>This is a paragraph of text. </p>
</body>
</html>
Explanation:
 <!DOCTYPE html> → Declares the document type.
 <html> → Root element of an HTML page.
 <head> → Contains metadata, title, and links to CSS/JS files.
 <title> → The title of the page shown in the browser tab.
 <body> → Contains all visible content of the web page.

2. Important HTML Tags
Tag Description Example
<h1> to <h6>
Headings (h1 = largest,
h6 = smallest)
<h1>Main Title</h1>
<p> Paragraph <p>This is a paragraph.</p>
<a> Hyperlink
<a href="https://www.example.com">Visit
Site</a>

5. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
Tag Description Example
<img> Image <img src="image.jpg" alt="Description">
<ul> / <ol> /
<li>
Unordered / Ordered lists <ul><li>Item 1</li></ul>
<table> / <tr>
/ <td>
Table and its rows/cells <table><tr><td>Data</td></tr></table>
<form> /
<input>
Forms and input fields <form><input type="text"></form>
<div> Division / section of page <div class="container"></div>
<span>
Inline container for
styling
<span>Text</span>

3. Attributes in HTML
Attributes provide additional information about an element.
 href → URL for links
 src → Source of an image
 alt → Alternative text for images
 id → Unique identifier
 class → CSS class for styling
Example:
<a href="https://www.google.com" target="_blank">Open Google</a>
<img src="logo.png" alt="Company Logo">

4. Forms and Input Fields
Used to collect user data:
<form>
Name: <input type="text" name="username"><br>
Email: <input type="email" name="email"><br>
<input type="submit" value="Submit">
</form>

5. Lists
 Unordered List (bullets):

6. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
 Ordered List (numbers):
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

6. Importance of HTML
 Forms the structure of all web pages.
 Works with CSS (for styling) and JavaScript (for interactivity).
 Foundation for learning advanced web development frameworks.


CSS (Cascading Style Sheets)
CSS is a style sheet language used to describe the presentation of an HTML document. It
controls the layout, colors, fonts, and overall appearance of web pages. While HTML
structures content, CSS makes it visually appealing.

1. Importance of CSS
 Separates content (HTML) from design (CSS).
 Enhances the look and feel of websites.
 Enables responsive design for different devices (desktop, tablet, mobile).
 Allows consistent styling across multiple pages using external stylesheets.

2. Types of CSS
1. Inline CSS: Applied directly to an HTML element using the style attribute.

7. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
<p style="color: blue; font-size: 16px;">Hello World!</p>
2. Internal CSS: Written within the <style> tag in the <head> section.
<head>
<style>
p {
color: red;
font-size: 18px;
}
</style>
</head>
3. External CSS: Written in a separate .css file and linked using <link> tag.
<head>
<link rel="stylesheet" href="style.css">
</head>

3. CSS Syntax
selector {
property: value;
}
Example:
h1 {
color: navy;
text-align: center;
}

4. Common CSS Properties
Property Description Example
color Text color color: red;
background-color Background color background-color: lightblue;
font-size Size of text font-size: 20px;
font-family Font style font-family: Arial, sans-serif;
text-align Text alignment text-align: center;
margin Space outside an element margin: 10px;
padding Space inside an element padding: 5px;
border Border around an element border: 1px solid black;

8. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
5. CSS Selectors
 Element Selector: Selects HTML elements.
 p { color: green; }
 Class Selector: Selects elements with a specific class.
 .button { background-color: blue; }
 ID Selector: Selects a unique element with a specific ID.
 #header { font-size: 24px; }
 Group Selector: Apply same style to multiple elements.
 h1, h2, h3 { color: purple; }

6. CSS Layouts
 Flexbox: For flexible and responsive layouts.
.container {
display: flex;
justify-content: space-between;
}
 Grid: Create complex grid-based designs.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
 Positioning: static, relative, absolute, fixed, sticky.

7. Responsive Design
 Makes websites adapt to different screen sizes.
 Media Queries Example:
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}

8. Advantages of CSS
 Speeds up page loading by separating style from content.

9. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
 Easy maintenance and updates.
 Improves accessibility and user experience.
 Enables animations and interactive effects.


JavaScript (Basics)
JavaScript (JS) is a high-level, interpreted programming language used to make web pages
interactive and dynamic. While HTML provides structure and CSS adds style, JavaScript adds
functionality to websites.

1. Importance of JavaScript
 Adds interactivity: Buttons, forms, animations, pop-ups.
 Manipulates HTML and CSS dynamically.
 Handles events like clicks, mouse movements, and form submissions.
 Supports modern web development frameworks (React, Angular, Vue).

2. Basic Syntax
 Variables: Store data values.
let name = "Pushpendra";
const age = 25;
var city = "Jaipur";
 Data Types:
o String → "Hello"
o Number → 100
o Boolean → true / false
o Array → [1, 2, 3]
o Object → {name: "Pushpendra", age: 25}

3. Operators

10. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
Operator Description Example
+ Addition / Concatenation 5 + 5 = 10
- Subtraction 10 - 5 = 5
* Multiplication 5 * 2 = 10
/ Division 10 / 2 = 5
= Assignment x = 10
== / === Equality 5 == '5' → true

4. Functions
Reusable blocks of code.
function greet(name) {
alert("Hello, " + name + "!");
}
greet("Pushpendra");

5. Conditional Statements
 if…else
let age = 18;
if(age >= 18){
console.log("You are an adult");
} else {
console.log("You are a minor");
}

6. Loops
 for loop:
for(let i=1; i<=5; i++){
console.log(i);
}
 while loop:
let i = 1;
while(i <= 5){
console.log(i);
i++;
}

11. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134

7. Events
JavaScript responds to user actions like clicks, mouse movements, and form submissions.
<button onclick="alert('Button Clicked!')" >Click Me</button>

8. DOM (Document Object Model) Manipulation
JavaScript can change HTML content dynamically.
document.getElementById("demo").innerHTML = "Hello JavaScript!";
Common Methods:
 getElementById() → Access element by ID
 getElementsByClassName() → Access elements by class
 querySelector() → Select first matching element
 addEventListener() → Attach events to elements

9. Importance in Web Designing
 Enhances user experience.
 Validates forms before submission.
 Creates interactive menus, slideshows, and animations.
 Essential for modern web development alongside HTML & CSS.


Graphics & UI/UX in Web Designing
Graphics and UI/UX play a crucial role in web designing, as they directly impact how users
perceive and interact with a website. A well-designed interface keeps users engaged and ensures
a positive experience.

1. Importance of Graphics in Web Design

12. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
 Makes the website visually appealing and professional.
 Helps convey information quickly and effectively.
 Enhances brand identity with logos, colors, and images.
 Improves user engagement and reduces bounce rate.
Common Graphic Elements:
 Images and icons
 Logos and branding graphics
 Backgrounds and textures
 Illustrations and infographics
Tools for Graphics:
 Adobe Photoshop – Photo editing and design
 Adobe Illustrator – Vector graphics and illustrations
 Canva – Simple online design tool
 Figma / Adobe XD – UI/UX design and prototyping

2. UI (User Interface)
User Interface (UI) refers to the visual elements of a website or application that users interact
with.
Key Elements of UI:
 Navigation menus (top bars, sidebars)
 Buttons, icons, and links
 Forms and input fields
 Layouts and grids
 Typography and color schemes
Principles of Good UI Design:
 Consistency – Same style and elements across the site
 Clarity – Clear and understandable interface
 Feedback – Users know what actions are happening (e.g., loading, success)
 Simplicity – Avoid clutter; keep navigation intuitive

3. UX (User Experience)

13. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
User Experience (UX) is about how users feel and interact with a website. It focuses on
usability, accessibility, and overall satisfaction.
Key Aspects of UX:
 Usability: Ease of navigation and interaction
 Accessibility: Making the website usable for people with disabilities
 Speed: Fast-loading pages enhance experience
 Responsiveness: Works well on desktops, tablets, and mobiles
 Engagement: Keeps users interested and encourages actions
UX Design Process:
1. Research – Understand user needs
2. Wireframing – Plan the layout and structure
3. Prototyping – Create interactive mockups
4. Testing – Collect user feedback and improve
5. Implementation – Develop and launch the website

4. Importance of UI/UX in Web Designing
 Good UI/UX increases user satisfaction and retention.
 Reduces bounce rate and improves conversion rates.
 Strengthens brand reputation and credibility.
 Makes websites accessible and enjoyable for everyone.


Hosting & Deployment in Web Designing
After designing and developing a website using HTML, CSS, and JavaScript, the next step is to
make it accessible online. This involves hosting the website on a server and deploying it so that
users can visit it through a web browser.

1. What is Web Hosting?
 Web Hosting is a service that provides storage space on a server for your website files
(HTML, CSS, images, etc.).

14. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
 It allows your website to be accessible via the Internet.
Types of Hosting:
1. Shared Hosting: Multiple websites share the same server; cost-effective, suitable for
small websites.
2. VPS Hosting (Virtual Private Server): A server is divided into virtual servers; more
control and resources.
3. Dedicated Hosting: Entire server dedicated to one website; best for large, high-traffic
sites.
4. Cloud Hosting: Uses multiple servers to host websites; scalable and reliable.

2. Domain Name
 A Domain Name is the human-readable address of your website (e.g.,
www.example.com).
 It is registered through a domain registrar and points to your web host’s server.

3. Website Deployment
Deployment is the process of uploading your website files to a server so that it is live online.
Deployment Methods:
 FTP (File Transfer Protocol): Using tools like FileZilla to upload files to the server.
 cPanel / Hosting Dashboard: Most hosting providers offer an interface to manage files.
 GitHub Pages / Netlify / Vercel: Free or cloud-based hosting solutions for static and
dynamic sites.

4. Steps to Host and Deploy a Website
1. Register a domain name (e.g., GoDaddy, Namecheap).
2. Choose a hosting provider (e.g., Bluehost, HostGator, Netlify).
3. Upload website files using FTP or hosting dashboard.
4. Connect domain to hosting server by updating DNS settings.
5. Test your website to ensure it works online.

15. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
5. CMS Platforms for Hosting
 WordPress: Popular platform for blogs and business websites.
 Wix / Shopify: Drag-and-drop builders for easy deployment.
 These platforms handle hosting, design, and deployment in one place.

6. Importance of Hosting & Deployment
 Makes your website accessible to users worldwide.
 Ensures website files are secure and backed up.
 Impacts website speed, uptime, and reliability.
 Essential step in turning a local project into a live, professional website.

SEO (Search Engine Optimization) Basics
SEO is the process of optimizing a website so that it ranks higher on search engine results
pages (SERPs) like Google, Bing, and Yahoo. A well-optimized website attracts more organic
(free) traffic and improves visibility online.

1. Importance of SEO
 Increases website traffic and leads.
 Improves brand visibility and credibility.
 Enhances user experience by making the site faster and mobile-friendly.
 Reduces marketing costs by generating organic traffic.

2. Types of SEO
1. On-Page SEO: Optimizations done within the website.
o Using relevant keywords in content, titles, and meta descriptions.
o Optimizing headings (H1-H6), images (alt text), and URLs.
o Improving page speed and mobile responsiveness.
2. Off-Page SEO: Actions taken outside the website to improve ranking.
o Building backlinks from other reputable websites.
o Social media sharing and engagement.

16. WEB DESIGNING NOTES

TRANING AND PLACEMENT – TALLY ,RSCIT, WEB DESIGNING, DIGITAL MARKETING, GRAPHIC DESGNING,
BCA ,MCA SIKAR ROAD , JAIPUR - 8104046134
o Guest posting and influencer collaborations.
3. Technical SEO: Optimizing the backend structure of the website.
o Creating an XML sitemap for search engines.
o Using robots.txt to control crawling.
o Ensuring secure HTTPS connection.
o Fixing broken links and errors.

3. Important SEO Elements
Element Purpose
Title Tag Shows the page title in search results.
Meta Description Brief summary of the page content.
Keywords Words/phrases users search for.
Header Tags (H1-H6) Organize content and highlight important topics.
Alt Text (Images) Describes images for search engines and accessibility.
Internal Linking Links to other pages on the same website.
Backlinks Links from external websites, improve authority.

4. SEO Best Practices
 Use unique and relevant content.
 Optimize website speed and performance.
 Ensure mobile-friendly design.
 Use clean and readable URLs.
 Add structured data/schema markup to help search engines understand content.
 Regularly monitor performance using Google Analytics and Google Search Console.

5. Benefits of SEO
 Higher search engine rankings.
 More organic traffic without paid ads.
 Better user engagement and retention.
 Increased brand awareness and credibility.