Web Design and Development
1. What is meant by scripting language?
A scripting language is a programming language that is interpreted at runtime (not compiled) to
automate tasks or add interactivity to software. In web development, it runs either in the user's browser
(client-side) or on the server (server-side).
Client-side scripting (e.g., JavaScript ) runs in the browser to make web pages dynamic — like
showing pop-ups, validating forms, or updating content without reloading.
Server-side scripting (e.g., PHP , Node.js , Python ) runs on the web server to generate dynamic
pages, handle databases, and process form data.
Unlike compiled languages like C++ or Java, scripting languages are usually simpler and faster to write
for specific tasks.
<script>
alert("This is JavaScript — a scripting language!");
</script>
Scripting makes websites interactive. Without it, pages would be static — just text and images.
2. List some limitations of HTML?
HTML (HyperText Markup Language) defines the structure of a webpage but has several limitations:
No interactivity: HTML alone cannot respond to user actions like clicks or form input. JavaScript is
needed.
No styling: HTML cannot change colors, fonts, or layouts. CSS is required for design.
No logic or calculations: HTML can't perform math, make decisions, or loop through data.
No data storage: It can't save user preferences, login info, or remember anything between visits.
No security: HTML is visible to everyone (right-click → View Page Source). Sensitive data must be
handled securely on the server.
Think of HTML as the skeleton of a webpage. You need CSS for skin and JavaScript for movement.
3. Explain the role of the <head> and <body> sections in an HTML document.
The <head> and <body> are two main parts inside the <html> tag.
<head> – Behind-the-Scenes Info
This section contains metadata (data about the page) not shown directly to users.
<title> : Title shown in browser tab and search results.
<meta> : Defines charset, description, and keywords.
<link> : Connects external files like CSS or favicon.
<script> and <style> : Can be included here too.
<body> – Visible Content
This contains everything the user sees: text, images, links, buttons, forms, etc.
<head>
<title>My Website</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome!</h1>
<p>This content appears on screen.</p>
</body>
Analogy: <head> is the blueprint; <body> is the actual house.
4. Differentiate between block-level elements and inline elements. Give two examples of
each.
HTML elements are categorized by how they flow on a page.
Feature Block-Level Elements Inline Elements
Line Behavior Start on a new line Stay in line with text
Width Takes full container width Takes only needed space
Height/Width Can be set Cannot (unless styled)
Examples <div> , <p> , <h1> <span> , <a> , <img>
<div style="background:yellow;">Block: Full width</div>
<p>This is text with <span style="color:red;">red word</span>.</p>
5. What is the difference between <h1> and <h6> headings? Why are heading tags
important for SEO?
There are six heading levels:
<h1> : Main title (largest, most important)
<h2> to <h5> : Section and subsections
<h6> : Smallest heading (least importance)
SEO Importance: Search engines use headings to understand your content structure. A clear hierarchy
helps your page rank better.
Best Practices:
• Use only one <h1> per page.
• Use headings in order (don’t skip from h1 to h4).
• Include keywords naturally (e.g., <h1>Learn Web Development</h1> ).
6. Explain the difference between inline CSS and internal CSS with examples.
CSS styles HTML. Two ways to include it:
Inline CSS
Applied directly to an element using style="" . Affects only that element.
<p style="color:blue; font-size:18px;">Blue text</p>
Internal CSS
Defined in <style> tag inside <head> . Affects the whole page.
<head>
<style>
p { color: green; }
.highlight { background: yellow; }
</style>
</head>
For real projects, use external CSS (separate .css file) for better organization.
7. Write HTML code to insert an image with alternate text and fixed dimensions.
<img
src="sunset.jpg"
alt="Orange sunset over the ocean"
width="400"
height="250"
>
Why important?
• alt : Helps screen readers (accessibility) and SEO.
• width / height : Prevents layout shift when loading.
8. Differentiate between relative and absolute links in HTML.
Type Description Example
Relative Based on current file location <a href="about.html">About</a>
Absolute Full web address <a href="https://google.com">Google</a>
Use relative links for internal pages, absolute for external websites.
9. What is a favicon? Write the HTML code to add a favicon to a webpage.
A favicon is a small icon (16x16 px) shown in browser tabs and bookmarks.
<link rel="icon" href="favicon.ico" type="image/x-icon">
You can also use PNG or SVG:
<link rel="icon" href="favicon.png" type="image/png">
10. Differentiate between ordered and unordered lists.
Ordered List (<ol>)
Numbered list — order matters (e.g., steps).
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
Unordered List (<ul>)
Bulleted list — order doesn’t matter (e.g., features).
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
11. What is the difference between <div> and <span> tags?
Feature <div> <span>
Type Block-level Inline
Use
Group sections (layout) Style text parts
Case
<div <p>Word is <span
Example
style="padding:20px;">Section</div> style="color:red;">red</span></p>
12. Explain the role of the id and class attributes.
id: Unique identifier (only one per page). Used with # in CSS.
class: Reusable identifier (many elements). Used with . in CSS.
<h1 id="title">Main</h1>
<p class="note">Note 1</p>
<p class="note">Note 2</p>
#title { color: purple; }
.note { background: yellow; }
13. Write HTML code to create a login form.
<form action="/login" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Login">
</form>
14. Explain the difference between GET and POST methods.
Feature GET POST
Data in URL? Yes No
Secure? No (visible) Yes
Use Case Search, filters Login, registration
15. Purpose of action and method attributes in a form?
action: Where to send data (URL).
method: How to send (GET or POST).
<form action="/submit" method="POST">
...
</form>
Use POST for sensitive data, GET for search queries.
