Scribd
Upload
37 views17 pages

Bcom&bsc Lab Manuel

The document outlines a syllabus for a Web Designing Lab course for B Com and BSc students, detailing various HTML programming experiments. Each experiment includes specific aims, example programs, and descriptions of HTML elements and their functions. Additionally, it provides a set of viva voice questions and answers related to HTML concepts, including the structure of HTML documents, common elements, and the purpose of tags.

Uploaded by

principal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
37 views17 pages

Bcom&bsc Lab Manuel

The document outlines a syllabus for a Web Designing Lab course for B Com and BSc students, detailing various HTML programming experiments. Each experiment includes specific aims, example programs, and descriptions of HTML elements and their functions. Additionally, it provides a set of viva voice questions and answers related to HTML concepts, including the structure of HTML documents, common elements, and the purpose of tags.

Uploaded by

principal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

WEB DESIGNING LAB (B Com)/ INTRODUCTION TO WEB

DESIGNING LAB (BSc)

Syllabus
(B Com): Simple HTML programs. HTML Programs using form and controls. Web design
using HTML.
(BSc): Create a basic HTML page with the necessary elements. Create a web page with
ordered list and unordered list with at least three list item each. Create webpage with list of
websites and create clickable hyperlink to each website. Creating a simple contact form ith
fields for name, email, subject, and message. Create a set of radio buttons and checkboxes
with appropriate labels. Create an HTML document and apply inline CSS styles to different
elements (e.g., text color, background color, font size). Create an external CSS file and link it
to an HTML document to apply these styles into the HTML document.

EXPERIMENT 1

IMPLEMENTATION OF BASIC HTML TAGS

AIM: To Implement basic HTML Tags

PROGRAM:

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World! </h1>
<p>This is a paragraph of text on my first HTML page. </p>
</body>
</html>
Description
 <!DOCTYPE html>: Declares the document type and version of HTML.
 <html>: Root element of the HTML document.
 <head>: Contains meta-information about the document.
 <title>: Sets the title of the webpage (shown in the browser tab).
 <body>: Contains the content of the webpage.
 <h1>: Heading level 1.
 <p>: Paragraph of text
OUTPUT/ RESULT
EXPERIMENT 2

IMPLEMENTATION OF HYPERLINKS AND IMAGE

AIM: To implement Links and Images in a html document

PROGRAM :

<!DOCTYPE html>
<html>
<head> <title>Links and Images</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>Click <a href="example.html">here</a> to visit </p>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>

OUTPUT/ RESULT
EXPERIMENT 3

IMPLEMENTATION OF A WEB PAGE WITH ORDERED LIST AND UNORDERED


LIST

Aim – To implement a web page with ordered list and unordered list with at least
three items each

PROGRAM :

<!DOCTYPE html>
<html>
<head>
<title>Lists Example</title>
</head>
<body>
<h1>Lists Example</h1>
<h2>Unordered List</h2>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li> </ul>
<h2>Ordered List</h2>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol> </body>
</html>

OUTPUT/ RESULT
EXPERIMENT 4

Creating a simple contact form

AIM: To creating a simple contact form with fields for name, email and message

PROGRAM :

<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
</head>
<body>
<h1>Contact Form</h1>
<form action="/submit_form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"
cols="50"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

OUTPUT/ RESULT
EXPERIMENT 5

Create a set of radio buttons and checkboxes with appropriate labels

AIM: Write a program to create a form with Name, Address, Gender, Qualification,
Hobbies, skills and Experience.

PROGRAM :

<!DOCTYPE html>
<html>
<head>
<title>Personal Information Form</title>
</head>
<body>
<h2><center>Personal Information</center></h2>
<form>
<b>Name:</b> <input type="text" id="name" name="name"><br><br>
<b>Address:</b><textarea id="address" name="address"></textarea><br><br>
<b> Email: </b><input type="email" id="email" name="email" ><br><br>
<b> Phn: </b> <input type="tel" id="phone" name="phone"><br><br>
<b>Gender :</b> <br><br>
<input type="radio" id="male" name="gender" value="male">Male
<input type="radio" id="female" name="gender" value="female">Female
<input type="radio" id="other" name="gender" value="other">Other <br><br>
<b> Qualification :</b><br><br>
<input type="radio" id="highSchool" name="qualification"
value="highSchool">High School <br>
<input type="radio" id="bachelor" name="qualification"
value="bachelor">Bachelor's Degree<br>
<input type="radio" id="master" name="qualification" value="master">
Master's Degree<br>
<input type="radio" id="phd" name="qualification" value="phd">
PhD<br><br>
<b>Hobbies :</b><br><br>
<input type="checkbox" id="reading" name="hobbies" value="reading">
Reading <br>
<input type="checkbox" id="traveling" name="hobbies" value="traveling">
Traveling<br>
<input type="checkbox" id="gaming" name="hobbies" value="gaming">
Gaming<br>
<input type="checkbox" id="cooking" name="hobbies"
value="cooking">Cooking<br><br>
<b>Skills:</b> <br><br>
<input type="checkbox" id="programming" name="skills"
value="programming"> Programming<br>
<input type="checkbox" id="design" name="skills"
value="design">Design<br>
<input type="checkbox" id="writing" name="skills" value="writing">
Writing<br>
<input type="checkbox" id="communication" name="skills"
value="communication">Communication<br><br>
<b> Experience:</b>
<select id="experience" name="experience">
<option value="0-1">0-1</option>
<option value="1-2">1-2</option>
<option value="2-3">2-3</option>
<option value="3-4">3-4</option>
<option value="4-5">4-5</option>
<option value="5+">5+</option>

</select><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>

OUTPUT/ RESULT
EXPERIMENT 6

Implementation of an HTML document to apply inline CSS styles to


different elements

AIM: To Implementation of an HTML document to apply inline CSS


styles to different elements (e.g., text color, background color, font size)

PROGRAM:

<! DOCTYPE html>


<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; font-size: 36px;">This is a blue heading</h1>
<p style="color: green; font-family: Arial;">This is a green paragraph.</p>
<div style="background-color: yellow; width: 200px; height: 100px;">
<p style="color: red;">This paragraph is inside a yellow div.</p>
</div>
</body>
</html>

OUTPUT/ RESULT
EXPERIMENT 7

Create an external CSS file and link it to an HTML document to apply these styles
into the HTML document

AIM: To create an external CSS file and link it to an HTML document to apply these
styles into
the HTML document

PROGRAM :

<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Style.css
h1 {
color: blue;
font-size: 36px;
}
p{
color: green;
font-family: Arial;
}

OUTPUT/ RESULT
VIVA VOICE QUESTIONS AND ANSWERS

1. What is HTML and what is its purpose?

HTML (HyperText Markup Language) is a standard markup language used to


create web pages. It provides a structure for organizing content on a webpage and defines
how elements should be displayed in a web browser.

Its main purpose is to:

 Create the structure of a webpage: This includes defining the layout, content, and
relationships between different elements.
 Define the content of a webpage: This includes text, images, links, and other media.
 Provide instructions for how the browser should display the content: This
involves using tags and attributes to specify formatting, styling, and behavior.

2. What are the basic building blocks of an HTML document (e.g., elements, attributes, tags)?

The basic building blocks of an HTML document are elements, attributes, and tags.

 Elements: These are the fundamental units of an HTML document. They are enclosed
within opening and closing tags, and they define the content and structure of the page.
For example, <p> (paragraph), <h1> (heading), and <img> (image) are all elements.
 Attributes: These are additional properties that can be added to elements to modify
their behavior or appearance. They are placed within the opening tag of an element
and are separated by spaces. For example, <img src="image.jpg" alt="An image">
uses the src and alt attributes to specify the image source and alternative text.
 Tags: These are the delimiters that mark the beginning and end of an element. They
consist of angle brackets (< and >) and the element name. For example, <p> and </p>
are the opening and closing tags for a paragraph element.

3. Explain the difference between elements and attributes.

Elements and attributes are both fundamental components of HTML, but they serve
different purposes.

Elements define the content and structure of an HTML document. They are the building
blocks that enclose the content of a webpage. For example, <p> (paragraph), <h1> (heading),
and <img> (image) are all elements.

Attributes are additional properties that can be added to elements to modify their behavior or
appearance. They provide more specific information about an element. For example, the
<img> element can have attributes like src to specify the image source, alt to provide
alternative text, and width and height to set the dimensions.

 Elements are the main building blocks of HTML, defining the overall structure and
content.
 Attributes are used to modify the behaviour and appearance of elements, providing
additional details.
4. What is the head section of an HTML document used for?

The head section of an HTML document is used to provide metadata and information
about the webpage. It contains elements that are not directly displayed on the page but are
important for the browser, search engines, and other tools to understand and process the
content.

Common elements found in the head section include:

 <title>: Sets the title of the webpage, which appears in the browser's tab or title bar.
 <meta>: Provides metadata about the webpage, such as keywords, description, author,
and viewport settings.
 <link>: Links external resources to the HTML document, such as CSS stylesheets,
JavaScript files, and icons.
 <style>: Contains inline CSS styles, but it's generally recommended to use external
CSS files for better organization and maintainability.
 <script>: Contains JavaScript code that can be executed on the webpage.

5. What is the body section of an HTML document used for?

The body section of an HTML document is where the visible content of the
webpage is placed. This is the part that users will see and interact with when they visit the
page.

Common elements found in the body section include:

 Heading elements: <h1>, <h2>, <h3>, etc., are used to define the structure and
hierarchy of the content.
 Paragraphs: <p> elements are used to create paragraphs of text.
 Lists: <ul> (unordered list) and <ol> (ordered list) are used to create lists of items.
 Images: <img> elements are used to insert images into the webpage.
 Links: <a> elements are used to create hyperlinks to other pages or resources.
 Forms: <form> elements are used to create interactive forms for collecting user input.
 Tables: <table>, <tr>, and <td> elements are used to create tables of data.
 Divisions: <div> elements are used to group elements together and apply styles to
them.

6. Name some common HTML elements and their uses

Structural Elements

 <html>: The root element of an HTML document.


 <head>: Contains metadata about the webpage, such as title, links to stylesheets, and
scripts.
 <body>: Contains the visible content of the webpage.

Text Elements

 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Heading elements of different levels.
 <p>: Paragraph.
 <span>: Inline container used for styling text within a paragraph.

List Elements

 <ul>: Unordered list (bulleted list).


 <ol>: Ordered list (numbered list).
 <li>: List item.

Link Elements

 <a>: Anchor element used to create hyperlinks.

Image Elements
<img>: Insert an image into the webpage.
Form Elements

 <form>: Creates a form for collecting user input.


 <input>: Creates various input fields, such as text, password, checkbox, radio button,
and submit button.
 <label>: Associates a label with a form element.
 <select>: Creates a dropdown list.
 <textarea>: Creates a multi-line text input field.

Table Elements

 <table>: Creates a table.


 <tr>: Defines a table row.
 <td>: Defines a table cell.

Other Elements

 <div>: A general-purpose container for grouping elements.


 <section>: Defines a section of a document.
 <article>: Represents a self-contained article.
 <header>: Defines a header for a document or a section.
 <footer>: Defines a footer for a document or a section.

7. What is the difference between block-level and inline elements?

Block-level elements occupy the entire width of their parent container and start on a new
line. They create a new block for their content. Examples of block-level elements include:

 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>


 <p>
 <div>
 <ul>
 <ol>
 <li>
Inline elements do not start on a new line and only take up the space they need. They are
displayed in-line with other content. Examples of inline elements include:
 <span>
 <a>
 <img>
 <b>
 <i>

8. What is hyperlink in HTML?

A hyperlink in HTML is a clickable link that takes the user to a different web page,
section of the same page, or another resource. It is created using the <a> element (short for
anchor).

9. What is the purpose of the <img> tag?

The <img> tag is used to insert an image into an HTML document. It allows you to
display images on a webpage.

Key attributes of the <img> tag:

 src: Specifies the URL of the image file.


 alt: Provides an alternative text description for the image, which is used by screen
readers and displayed if the image cannot be loaded.
 width and height: Optional attributes to specify the width and height of the image in
pixels. If not specified, the image will be displayed in its original size.

10. What are the different types of list in HTML?

There are two main types of lists in HTML:

1. Unordered Lists (<ul>):

 Create lists where the items are not numbered or ordered.


 Use the <li> element to define each list item.
 By default, unordered lists are displayed with bullets.

2. Ordered Lists (<ol>):

 Create lists where the items are numbered or ordered.


 Use the <li> element to define each list item.
 By default, ordered lists are displayed with numbers.

11. How do you create a table in HTML?

To create a table in HTML, you use the following elements:

 <table>: Defines the entire table.


 <tr>: Defines a table row.
 <td>: Defines a table cell (data cell).
Explanation:

 <table>: This element defines the entire table structure.


 <tr>: Each row in the table is defined using a <tr> element.
 <th>: The <th> element is used to define header cells, which are typically
displayed in a different font weight or style.

 <td>: The <td> element defines data cells, which contain the actual table
data.

12. Explain the use of the <form> element and its associated elements.

The <form> element in HTML is used to create interactive forms that allow users to
input data. It provides a structure for collecting and submitting user information.

Associated elements within a <form>:

 <input>: Creates various input fields, such as text boxes, password fields,
checkboxes, radio buttons, and submit buttons.
 <label>: Associates a label with a form element, making it easier for users to
understand the purpose of the field.
 <select>: Creates a dropdown list of options.
 <textarea>: Creates a multi-line text input field.
 <button>: Creates a button for submitting or resetting the form.
 <fieldset>: Groups related form elements together.
 <legend>: Provides a caption for a <fieldset>.

13. How do you link a CSS file to an HTML document?

To link a CSS file to an HTML document, you use the <link> element in the
<head> section.

HTML
<link rel="stylesheet" href="your_stylesheet.css">

 rel="stylesheet": This attribute specifies that the linked resource is a stylesheet.


 href="your_stylesheet.css": This attribute specifies the URL of the CSS file.
Replace "your_stylesheet.css" with the actual filename and path to your CSS file.

14. What is the difference between inline, internal, and external stylesheets?

Inline Stylesheets:

 Definition: CSS styles are directly applied to individual HTML elements using the
style attribute.
 Syntax: <element style="property: value;">
 Example: <p style="color: blue; font-size: 18px;">This is a paragraph.</p>
 Pros: Easy to apply styles to specific elements.
 Cons: Can make HTML code less readable and maintainable, especially for large
projects.
Internal Stylesheets:

 Definition: CSS styles are defined within the <head> section of an HTML document
using the <style> element.
 Syntax: <head><style>/* CSS rules */</style></head>
 Pros: Keeps CSS styles within the same document, making it easier to manage for
smaller projects.
 Cons: Can clutter the HTML code, especially for larger projects with many styles.

External Stylesheets:

 Definition: CSS styles are defined in a separate .css file and linked to the HTML
document using the <link> element.
 Syntax: <link rel="stylesheet" href="styles.css">

 Pros: Separates HTML and CSS, improving readability and maintainability. Allows
for reuse of styles across multiple HTML documents.
 Cons: Requires an additional file to be linked to the HTML document.

15. Explain the concept of cascading in CSS

Cascading in CSS refers to the process of determining which style declaration takes
precedence when multiple styles are applied to the same element. The rules for cascading are
as follows:

1. Specificity: The most specific rule wins. This means that styles defined for a
particular element, class, or ID will override more general styles. For example, a style
defined for an element with a specific ID will override a style defined for all elements
of that type.
2. Importance: Styles marked with the! important declaration have the highest priority
and will override any other styles, regardless of specificity. However, using! important
should be used sparingly as it can make your stylesheets difficult to maintain.
3. Inheritance: Styles can be inherited from parent elements to child elements. For
example, a font size defined on a <body> element will be inherited by all its child
elements unless overridden by a more specific rule.
4. Origin: Styles defined in the browser's user agent stylesheet have the lowest priority.
Styles defined in your own stylesheets (either internal or external) have higher
priority.

16. How do you apply CSS styles to HTML elements using the class and id attributes?

CSS classes and IDs provide ways to target specific elements within an HTML
document and apply styles to them.

CSS Classes

 Multiple elements: Classes can be applied to multiple elements to style them


consistently.
 Syntax:
o In HTML: <element class="className">
o In CSS: .className { properties: values; }

CSS IDs

 Unique identifier: IDs must be unique within an HTML document.


 Syntax:
o In HTML: <element id="uniqueId">
o In CSS: #uniqueId { properties: values; }

17. What are some new features introduced in HTML5?

HTML5 introduced several significant new features that enhanced web development
capabilities.

Semantic Elements

 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>: These


elements provide more meaningful structure to web pages, making them easier to
understand for both humans and machines.

Multimedia

 <audio> and <video> elements: These elements allow for the direct embedding of
audio and video content within web pages.
 HTML5 canvas: Provides a 2D drawing API for creating dynamic graphics and
animations.

Forms

 **<input type="date">, <input type="time">, <input type="number">, <input


type="email">, <input type="url">, <input type="search">: These input types provide
better user experiences for specific data input.
 <datalist>: Provides a list of suggested values for an <input> element.
 <output>: Displays the result of a calculation or form submission.

Local Storage

 Web Storage API: Allows web applications to store data locally on the user's device,
persisting even after the browser is closed.

Web Workers

 Web Workers API: Enables JavaScript code to run in the background, improving
performance and responsiveness.

Geolocation

 Geolocation API: Allows web applications to access the user's geographic location.
Drag and Drop

 Drag and Drop API: Enables users to drag and drop elements within a webpage.

WebSockets

 WebSockets API: Provides full-duplex communication between a browser and a


server, enabling real-time updates.

Offline Application Cache

 Application Cache Manifest: Allows web applications to cache resources and


function offline.

18. What is the purpose of the <canvas> element?

The <canvas> element in HTML provides a 2D drawing API for creating dynamic
graphics and animations on a webpage. It's a blank canvas that you can draw on using
JavaScript code.

Key features and uses of the <canvas> element:

 Drawing shapes: You can draw lines, rectangles, circles, arcs, and other shapes using
JavaScript methods like beginPath(), moveTo(), lineTo(), stroke(), and fill().
 Creating animations: By updating the canvas content repeatedly using JavaScript's
requestAnimationFrame() method, you can create smooth animations and interactions.
 Image manipulation: You can load images onto the canvas and manipulate them
using various techniques like scaling, rotating, and applying filters.
 Game development: The <canvas> element is often used for creating simple games
or game prototypes due to its flexibility and performance.
 Data visualization: You can visualize data using charts, graphs, and other visual
representations on the canvas.

19. What is the <audio> and <video> elements used for?

The <audio> and <video> elements in HTML are used to embed audio and video
content directly into a webpage, respectively.

<audio> element:

 Purpose: Plays audio files.


 Attributes:
o src: Specifies the URL of the audio file.
o controls: Adds playback controls to the audio element.
o autoplay: Automatically starts playing the audio when the page loads.
o loop: Plays the audio repeatedly.
o muted: Mutes the audio by default.

<video> element:
 Purpose: Plays video files.
 Attributes:
o src: Specifies the URL of the video file.
o controls: Adds playback controls to the video element.
o autoplay: Automatically starts playing the video when the page loads.
o loop: Plays the video repeatedly.
o muted: Mutes the video by default.
o width and height: Specify the dimensions of the video player.

20. What is the difference between <section> and <div> elements?

<section> and <div> are both HTML elements used to group related content on a
webpage. However, they have distinct semantic meanings and are used in different contexts.

<div>:

 Generic container: It's a general-purpose element that can be used to group any
content.
 No specific meaning: It doesn't convey any semantic meaning about the content it
contains.
 Styling and layout: Often used for styling and layout purposes.

<section>:

 Thematic grouping: It represents a thematic grouping of content.


 Semantic meaning: Conveys that the content within it is a distinct section or article.
 Content structure: Used to structure the main content of a page or a major
subdivision of a page.

You might also like