Web PDF
Web PDF
Explain the following terms: WWW, HTTP, HTTPS, Web browser, Web Server
Ans. WWW (World Wide Web): A system of interlinked hypertext documents and
multimedia content accessible via the internet. It is commonly referred to as "the web."
HTTP (HyperText Transfer Protocol): A protocol used for transmitting hypertext across the
web. It defines how messages are formatted and transmitted, and how web servers and
browsers respond to various commands.
HTTPS (HyperText Transfer Protocol Secure): A secure version of HTTP, where data
exchanged between the client and the server is encrypted to enhance security.
Web Browser: A software application used to access information on the World Wide Web.
Common examples include Google Chrome, Firefox, and Safari.
Web Server: A server that hosts websites and delivers content to clients (usually browsers)
upon request using protocols like HTTP and HTTPS.
2. Server Response: The server processes the request and returns a response containing:
- A status code (e.g., 200 for OK, 404 for Not Found).
- The requested content (such as an HTML page, JSON data, etc.).
- Additional headers (content type, caching policies, etc.).
Q5. What is a web page and web browser? Explain how to create a simple web page?
Ans. Web Page: A web page is a document or resource available on the World Wide Web. It is
typically written in HTML and can include text, images, videos, and links to other web pages.
-Web Browser: A web browser is a software tool that allows users to access, navigate, and
interact with web pages. Examples include Chrome, Firefox, and Edge.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML Structure</title>
</head>
<body>
<h1>Main Heading</h1>
<p>This is a paragraph in a simple HTML structure.</p>
</body>
</html>
Q7. Explain any 7 basic tags of HTML with examples
Ans.
1 `<html>`: Defines the root of the HTML document.
2. `<head>`: Contains metadata, title, and linked resources.
3. `<body>`: Contains the visible content.
4. `<h1>` to `<h6>`: Define headings, with `<h1>` being the largest.
<h1>Heading 1</h1>
5. `<p>`: Defines a paragraph.
<p>This is a paragraph.</p>
6. `<a>`: Defines a hyperlink.
<a href="http://example.com">Click here</a>
7. `<img>`: Embeds an image.
<img src="image.jpg" alt="An Image">
Q8. Explain Heading tag and Paragraph tag in HTML with examples
Ans. Heading Tags (`<h1>` to `<h6>`): HTML provides six levels of headings, from `<h1>`
(largest) to `<h6>` (smallest). Headings are important for structuring the content of a
webpage.
Example:
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
Paragraph Tag (`<p>`): The paragraph tag is used to define a block of text. It automatically
adds spacing before and after the paragraph content.
Example:
<p>This is a simple paragraph.</p>
Q9. Explain How to set font colour and body background colour in HTML
Ans. You can set font color and background color using inline styles or CSS.:
Font Color: This is set using the `color` property in CSS or the `style` attribute in HTML.
Example:
-<p style="color: red;">This is red text.</p>
-Body Background Color: This can be done using the `background-color` property.
Example:
html
<body style="background-color: lightblue;">
<p>This page has a light blue background.</p>
</body>
Q10. What is an ordered list in HTML? Explain different types of ordered lists with
examples.
Ans. Ordered List (`<ol>`): An ordered list displays items in a sequence, usually numbered.
Q11. What is an unordered list in HTML? Explain different types of unordered lists with
examples.
Ans. Unordered List (`<ul>`): An unordered list displays items without a particular sequence,
typically marked with bullet points.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
You can customize the bullet style with the `type` attribute:
1. Disc (default):
<ul type="disc">
<li>Item 1</li>
<li>Item 2</li>
</ul>
2. Circle:
<ul type="circle">
<li>Item 1</li>
<li>Item 2</li>
</ul>
3. Square:
<ul type="square">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Q14. Explain how to attach an image in an HTML page. Also explain various attributes of it.
Ans. To add an image in an HTML page, you use the `<img>` tag. It is a self-closing tag that
does not require an end tag.
Attributes:
-`src`: Specifies the path of the image.
- `alt`: Provides alternative text if the image cannot be displayed.
- `width` and `height`: Set the size of the image.
Example:
<img src="image.jpg" alt="Sample Image" width="200" height="150">
Q15. Explain how to attach a video in an HTML page. Also explain various attributes of it.
Ans. To embed a video, you use the `<video>` tag.
Attributes:
- `src`: Specifies the video file location.
- `controls`: Adds play, pause, and volume controls to the video.
- `autoplay`: Makes the video start playing as soon as it loads.
- `loop`: Makes the video loop continuously.
Example:
<video src="video.mp4" controls width="500" height="300">
Your browser does not support the video tag.
</video>
Q16. Explain Autoplay, controls, height, width, muted, poster, src attribute of video tag
Ans.
- `autoplay`: Automatically starts playing the video when it is loaded.
- `controls`: Displays built-in controls for play, pause, and volume.
- `height` & `width`: Specify the size of the video.
- `muted`: Starts the video with the sound turned off.
- `poster`: Displays an image before the video starts playing.
- `src`: Specifies the location of the video file.
Q17. Explain how to attach an audio in an HTML page. Also explain various attributes of it.
Ans. To embed audio in an HTML page, you use the `<audio>` tag.
Attributes:
- `src`: Specifies the location of the audio file.
- `controls`: Displays built-in controls such as play, pause, and volume.
- `autoplay`: Starts the audio automatically when the page loads.
- `loop`: Plays the audio on a continuous loop.
- `muted`: Starts the audio with the volume muted.
Example:
<audio src="audio.mp3" controls>
Your browser does not support the audio element.
</audio>
Q18. Explain Table tag with its attributes
Ans. The `<table>` tag is used to define a table in HTML. Tables are structured with rows
(`<tr>`), headers (`<th>`), and data cells (`<td>`).
Attributes:
- `border`: Specifies the width of the table border.
- `cellpadding`: Defines the space between the cell content and its border.
- `cellspacing`: Defines the space between the table cells.
Example:
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
Example:
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
In this example:
- `cellpadding="10"` adds 10 pixels of space inside the cells around the content.
- `cellspacing="5"` adds 5 pixels of space between the cells themselves.
Example of `rowspan`:
<table border="1">
<tr>
<td rowspan="2">Rowspan Cell</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
</table>
Example of `colspan`:
<table border="1">
<tr>
<td colspan="2">Colspan Cell</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
Q21. Explain the following tags: `<br>`, `<hr>`, `<b>`, `<i>`, `<u>`, `<pre>`, `<sub>`,
`<sup>`
Ans. -`<br>`: Inserts a line break.
This is a line break. <br>This is a new line.
- `<hr>`: Inserts a horizontal rule.
<hr>
-`<b>`: Makes text bold.
<b>This text is bold.</b>
- `<i>`: Italicizes text.
<i>This text is italic.</i>
- `<u>`: Underlines text.
<u>This text is underlined.</u>
- `<pre>`: Pre-formats text (preserves whitespace and line breaks).
<pre>
Line 1
Line 2
</pre>
- `<sub>`: Subscript text.
H<sub>2</sub>O (Water molecule)
- `<sup>`: Superscript text.
E = mc<sup>2</sup>
Example:
<marquee direction="left" scrollamount="5">This is scrolling text.</marquee>
Q23. What is HTML form tag? Explain its importance in client-server architecture
Ans. The `<form>` tag is used to collect user input in an HTML page and send it to a server
for processing.
- Importance in Client-Server Architecture: Forms are essential for sending data from the
client (user) to the server. For example, login credentials or search queries are often sent
through forms.
Example:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
- `action`: Specifies the server endpoint that will process the form data.
- `method`: Defines how the data will be sent (`GET` or `POST`).
Q24. Explain Text fields, password field, submit button, reset button, file upload, and custom
button with its attributes and example
Ans.
1. Text Field (`<input type="text">`):
- Used for single-line text input.
<input type="text" name="username">
Q25. Explain radio button and check box with its attributes and example
Ans. Radio Button (`<input type="radio">`): Allows the user to select only one option from
a group.
Example:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
- Checkbox (`<input type="checkbox">`): Allows the user to select multiple options.
Example:
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports
Q26. Explain the drop-down list and text area with its attributes and example
Ans. Drop-down List (`<select>`): The drop-down list allows users to choose one option
from a set of options.
Attributes:
- `name`: Specifies the name of the drop-down list.
- `multiple`: Allows the user to select more than one option.
Example:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="bmw">BMW</option>
</select>
- Text Area (`<textarea>`): The text area allows users to input multi-line text.
Attributes:
- `rows`: Specifies the number of visible text lines.
- `cols`: Specifies the visible width of the text area.
Example:
Q27. Explain frame and frameset with its attributes and example
Ans. `<frame>` : The frame tag was used to define a window (or frame) in a frameset.
Frames allow you to divide the browser window into multiple sections where each section
can load a separate HTML document.
- `<frameset>` : This tag was used to organize multiple frames on a webpage.
Attributes:
- `rows`/`cols`: Define the size of rows or columns in the frameset.
Example:
<frameset cols="50%, 50%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
Note: Frames are outdated and no longer used in modern web development.
Q29. Explain section, article, aside, header, footer, nav, dialog, figure, date, time, week tags
of HTML5
Ans. `<section>`: Represents a generic section of a document.
<section>
<h2>Section Title</h2>
<p>This is a section.</p>
</section>
- `<article>`: Represents independent, self-contained content like a blog post or news article.
<article>
<h2>Article Title</h2>
<p>This is an article.</p>
</article>
- `<aside>`: Represents content that is tangentially related to the main content, such as a
sidebar.
<aside>
<p>This is a sidebar.</p>
</aside>
- `<header>`: Represents introductory content, typically containing navigational links or
introductory content.
<header>
<h1>Website Title</h1>
<nav>
<a href="#">Home</a>
<a href="#">Contact</a>
</nav>
</header>
- `<footer>`: Represents footer content at the end of a document or section.
<footer>
<p>Footer content here.</p>
</footer>
- `<nav>`: Represents navigation links.
<nav>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</nav>
- `<dialog>`: Represents a dialog box or window.
<dialog open>This is a dialog box.</dialog>
- `<figure>`: Used to group media (images, videos) and captions.
<figure>
<img src="image.jpg" alt="An image">
<figcaption>Image description.</figcaption>
</figure>
- `<date>`, `<time>`, `<week>`: These represent specific date/time inputs or elements in
HTML5 forms.
<input type="date">
<input type="time">
<input type="week">
Q30. Explain email, range, number tags with their attributes and example
Ans. Email (`<input type="email">`): Ensures the input is in a valid email format.
Example:
<input type="email" name="email" required>
- Range (`<input type="range">`): Allows users to select a value within a range.
Example:
<input type="range" min="1" max="100" value="50">
- Number (`<input type="number">`): Allows users to enter a number and control it with up
and down arrows.
Example: <input type="number" name="age" min="18" max="100">
Q31. What is CSS? Explain its importance with advantages and disadvantages
Ans. CSS (Cascading Style Sheets): CSS is used to control the look and feel of HTML
elements on a webpage. It is responsible for the visual presentation, including layout, colors,
fonts, and spacing.
Importance:
- CSS separates content from presentation, allowing you to design pages more efficiently.
- It makes it easier to apply consistent styles across multiple pages.
- It improves maintainability by centralizing style rules in external stylesheets.
Advantages:
- Separation of content and style: You can maintain a consistent design across many pages
by linking a single CSS file.
- Efficient code: CSS reduces redundancy by avoiding the need to repeat style rules in every
element.
- Easier maintenance: When changes are made to CSS files, the changes are reflected across
all linked pages.
Disadvantages:
- Browser compatibility issues: Some browsers may not fully support certain CSS
properties.
- Complexity for large projects: Large projects may require careful management of CSS to
avoid conflicts and maintain readability.