Bcom&bsc Lab Manuel
Bcom&bsc Lab Manuel
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
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
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
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
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
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
PROGRAM:
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
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.
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.
<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.
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.
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.
Structural Elements
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
Link Elements
Image Elements
<img>: Insert an image into the webpage.
Form Elements
Table Elements
Other 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:
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).
The <img> tag is used to insert an image into an HTML document. It allows you to
display images on a webpage.
<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.
<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>.
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">
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.
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
CSS IDs
HTML5 introduced several significant new features that enhanced web development
capabilities.
Semantic Elements
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
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
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.
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.
The <audio> and <video> elements in HTML are used to embed audio and video
content directly into a webpage, respectively.
<audio> element:
<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.
<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>: