Date: 18/06/2024
Assignment 1: Creating a Basic HTML Page with Headings and Paragraphs.
Problem Description: Create a basic HTML page with a title in the <title> tag.
The page should include at least three different levels of headings ( <h1>, <h2>,
<h3>) and a paragraph for each heading explaining the importance of each heading
level in structuring an HTML document. Additionally, include a paragraph using the
<p> tag.
Source Code:
HTML Code:
<html>
<head>
<title>Assignment 1</title>
</head>
<body>
<!-- h1 is a header tag which is used to define the most important heading -->
<h1>Vaccum Tube</h1>
<p>A vacuum tube, also called a valve in British English, is an electronic device used in
many older model radios, television sets, and amplifiers to control electric current flow. The
cathode is heated, as in a light bulb, so it will emit electrons. This is called thermionic
emission.</p>
<!-- h2 is also a header tag but comes after h1 tag and the font size is a bit smaller than h1 tag
-->
<h2>RAM</h2>
<p>Random access memory (RAM) is the hardware in a computing device that provides
temporary storage for the operating system (OS), software programs and any other data in
current use so they're quickly available to the device's processor.</p>
<!-- h3 is also a header tag but comes after h2 tag and the font size is a bit smaller than h2 tag
-->
<h3>ROM</h3>
<p>ROM stands for Read-Only Memory. It is a non-volatile memory that is used to store
important information which is used to operate the system. As its name refers to read-only
memory, we can only read the programs and data stored on it. It is also a primary memory
unit of the computer system. </p><br>
<p>This are the basic computer peripherals</p>
</body>
</html>
Output:
Date: 18/06/2024
Assignment 2: Creating Lists and Adding Links.
Problem Description: Create an HTML page with a title, two paragraphs using
the <p> tag, and both an ordered list with at least three items and an unordered list
with at least five items using the <ul>, <ol> and <li> tags. Each list item should
describe one feature of HTML. Include at least two links within the lists using the <a>
tag, and ensure each link points to a different website and opens in a new tab.
Source Code:
HTML Code:
<html>
<head>
<title>Assignment 2</title>
</head>
<body>
<p>HyperText Markup Language (HTML) is the standard markup language for documents
designed to be displayed in a web browser. It defines the content and structure of web
content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and
scripting languages such as JavaScript.</p><br>
<p>Cascading Style Sheets (CSS) is a style sheet language used for specifying the
presentation and styling of a document written in a markup language such as HTML or
XML.</p><br>
<!-- Some features of HTML Language. -->
<ol>
<li>Structured Tags.</li>
<li>Hyperlinks can be made.</li>
<li>Lists can be made.</li>
</ol><br>
<ul>
<li>Styles can be changed such as font color,size,width,table border,color and etc.</li>
<li>Tables can be prepared.</li>
<li>HTML is not case-sensitive.</li>
<li>HTML is easy to access.</li>
<li>HTML is platform independent.</li>
</ul>
<a href="https://www.google.com/" target="_blank">Google</a><br><br>
<a href="https://www.youtube.com/" target="_blank">Youtube</a>
</body>
</html>
Output:
Date: 19/06/2024
Assignment 3: Combining HTML Elements.
Problem Description: Create an HTML page with a title, a heading using the
<h2> tag, and a paragraph describing a topic of your choice. The page should also
include a combination of both an ordered list and an unordered list with at least three
items each. Additionally, include at least three links within the lists using the <a> tag,
ensuring that each link points to a different website and opens in a new tab.
Source Code:
HTML Code:
<html>
<head>
<title>Assignment 3</title>
</head>
<body>
<h2>BASICS OF COMPUTER</h2>
<p>A computer is an electronic device that manipulates information, or data. It has the ability
to store, retrieve, and process data. You may already know that you can use a computer to
type documents, send email, play games, and browse the Web. You can also use it to edit or
create spreadsheets, presentations, and even videos.</p><br>
<!-- Basic knowledge on Computer -->
<ol>
<li>Hardware is any part of your computer that has a physical structure, such as the keyboard
or mouse. It also includes all of the computer's internal parts</li><br>
<li>Software is any set of instructions that tells the hardware what to do and how to do
it.</li><br>
<li>CPU is the heart of the computer, this is the component that actually executes
instructions.</li><br>
</ol><br>
<ul>
<li><a href="https://www.microsoft.com/en-in" target="_blank">Microsoft</a></li><br>
<li><a href="https://jadavpuruniversity.in/" target="_blank">Jadavpur
University</a></li><br>
<li><a href="https://www.caluniv.ac.in/" target="_blank">Calcutta University</a></li><br>
</ul>
</body>
</html>
Output:
Date: 19/06/2024
Assignment 4: Creating a Basic HTML Table.
Problem Description: Create an HTML page with a title in the <title> tag and a
heading using the <h1> tag. Add a basic HTML table using the <table> tag, with a
table header using the <thead> tag, a table body using the <tbody> tag, and at least
three rows of data. Each row should contain three columns, and the table should have
appropriate headings for each column using the <th> tag.
Source Code:
HTML Code:
<html>
<head>
<style>
td,th{
padding:8px;
}
</style>
<title>Assignment 4</title>
</head>
<body>
<h1>RESULT</h1>
<table border="2">
<thead>
<tr>
<th>NAME</th>
<th>DEPARTMENT</th>
<th>GPA</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rounak</td>
<td>Computer Sc.</td>
<td>9.5</td>
</tr>
<tr>
<td>Bikramjit</td>
<td>Chemistry</td>
<td>9</td>
</tr>
<tr>
<td>Pritam</td>
<td>Maths</td>
<td>9.1</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Date: 21/06/2024
Assignment 5: Styling an HTML Table.
Problem Description: Create an HTML page with a title, a heading using the
<h2> tag, and a paragraph describing the importance of styling tables. Add an HTML
table with a table header, table body, and at least four rows of data. Apply basic CSS
styling to the table, including border, padding, and background color for the header
row. Use inline styles or an internal stylesheet to achieve this.
Source Code:
HTML Code:
<html>
<head>
<style>
table,td,th{
border:2px solid black;
}
th,td{
text-align:center;
padding:10px;
}
th{
background-color:lightyellow;
}
</style>
<title>Assignment 4</title>
</head>
<body>
<h2>TABLE STYLE</h2>
<p>The HTML table allows users to arrange data int table and allows to format accordingly
which makes it attractive and easily readable.</p>
<table>
<thead>
<tr>
<th>Computer Generation</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td>1940-1956</td>
</tr>
<tr>
<td>Second</td>
<td>1956-1963</td>
</tr>
<tr>
<td>Third</td>
<td>1964-1971</td>
</tr>
<tr>
<td>Fourth</td>
<td>1971-till present</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS Code:
<style>
table,td,th{
border:2px solid black;
}
th,td{
text-align:center;
padding:10px;
}
th{
background-color:lightyellow;
}
</style>
Output:
Date: 21/06/2024
Assignment 6: Merging Cells in an HTML Table
Problem Description: Create an HTML page with a title, a heading using the
<h2> tag, and a paragraph explaining the use of merged cells in tables. Create an
HTML table with a table header and table body. The table should include at least five
rows of data and demonstrate the use of the colspan and rowspan attributes to merge
cells both horizontally and vertically. Ensure the table has a clear structure and is easy
to read.
Source Code:
HTML Code:
<html>
<head>
<style>
table{
border:2px solid black;
}
td,th{
padding:10px;
border:1px solid black;
}
</style>
<title>Assignment 6</title>
</head>
<body>
<h2>Score Board</h2>
<p>Cell Merging enhances the beauty of the table and also makes the table easily
readable.</p>
<table>
<thead>
<tr>
<th>Team</th>
<th>Player</th>
<th colspan="2">Statistics</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Team A</td>
<td>Player 1</td>
<td>Goal: 4</td>
<td>Assists: 7</td>
</tr>
<tr>
<td>Player 2</td>
<td>Goal: 6</td>
<td>Assists: 5</td>
</tr>
<tr>
<td rowspan="2">Team B</td>
<td>Player 3</td>
<td>Goal: 5</td>
<td>Assists: 6</td>
</tr>
<tr>
<td>Player 4</td>
<td>Goal: 3</td>
<td>Assists: 8</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Date: 24/06/2024
Assignment 7: Introduction to CSS Selectors and Properties.
Problem Description: Create an HTML page with a title in the <title> tag and a
heading using the <h1> tag. Write a paragraph explaining the role of CSS in web page
styling. Use internal CSS to demonstrate different types of selectors (element, class,
and ID) and properties. Apply styles to change the color, font size, and font family of
the text. Ensure you include examples of at least three different CSS properties and
values.
Source Code:
HTML Code:
<html>
<head>
<style>
.first{
color:red;
text-align:center;
}
#second{
font-size:20px;
text-align:center;
}
p{
font-famliy:arial;
}
div{
background-color:lightyellow;
}
</style>
<title>Assignment 7</title>
</head>
<body>
<h1 class="first">Role of CSS in Web Page Styling.</h1>
<div>
<p id="second">CSS is used for defining the styles for web pages. It describes the look and
formatting of a document which is written in a markup language. It provides an additional
feature to HTML. It is generally used with HTML to change the style of web pages and user
interfaces.</p>
</div>
</body>
</html>
CSS Code:
<style>
.first{
color:red;
text-align:center;
}
#second{
font-size:20px;
text-align:center;
}
p{
font-famliy:arial;
}
div{
background-color:lightyellow;
}
Output:
Date: 24/06/2024
Assignment 8: Applying Inline, Internal, and External Style Sheets.
Problem Description: Create an HTML page with a title, a heading using the
<h2> tag, and a paragraph explaining the difference between inline, internal, and
external CSS. In the same document, apply:
• Inline CSS to one heading to change its color.
• Internal CSS to style a paragraph with a specific font size and background color.
• An external CSS file to style the body background color and add padding to
another paragraph. Link the external CSS file to the HTML document
correctly.
Source Code:
HTML Code:
<html>
<head>
<style>
p{
font-size:20px;
background-color:lightYellow;
}
</style>
<link rel="stylesheet" href="C:\Users\DELL\OneDrive\Desktop\style.css">
<title>Assignment 8</title>
</head>
<body>
<h2 style="color:blue">Difference between inline, internal and external CSS.</h2>
<p>Inline CSS is used within HTML tag using the style attribute.<br><br>
Internal CSS is used within <head> section of HTML document.<br><br>
External CSS is used in a separate CSS file.</p>
</body>
</html>
CSS Code:
body{
background-color:lightblue;
padding:100px;
}
Output:
Date: 25/06/2024
Assignment 9: Formatting Text, Backgrounds, and Borders.
Problem Description: Create an HTML page with a title, a heading using the
<h3> tag, and three paragraphs. Use CSS to format the text by changing the font
family, font size, and font weight of the first paragraph. Apply a background color and
image to the second paragraph. Add borders to the third paragraph, experimenting
with different border styles, widths, and colors. Ensure all CSS is included in an
internal stylesheet within the HTML document.
Source Code:
HTML Code:
<html>
<head>
<style>
#first{
font-size:15px;
font-weight:bold;
font-family:verdana;
}
#second{
background-color:lightblue;
}
#third{
border:2px dashed red;
}
</style>
<title>Assignment 9</title>
</head>
<body>
<h3>Formatting Texts, Backgrounds and Borders.</h3>
<p id="first">I am studying in VIVEKANANDA COLLEGE.</p>
<p id="second"><img src="C:\Users\DELL\OneDrive\Pictures\Screenshots\Screenshot
2024-06-26 160635.png" width="500px"></p>
<p id="third">I want to complete my studies and want to work on AI.</p>
</body>
</html>
Output:
