PW-1_H02.pptx............................

Kadi Sarva Vishwavidyalaya
B P College of Computer Studies - BCA
BCA SEMESTER – I
Subject Name : Project Work - I
Subject Code : SEC201-1C
Webpage Development
Group No : PW-I_H02

Table of Contents
Specification Slide No.
Group Details
Project Title
Project Definition
Overview
Detail Information
Innovative Findings
Project Learning's
Conclusion
Reference
Specification Slide No.
Group Details
Project Title :-INFORMATION TECHNOLOGYWE─BPAGE DEVELOPMENT
Task 1 : 1.1. Code 5,6
1.2. Output 7
Task 2 : 2.1. Code 9,10,11,12
2.2. Output 13
Task 3 : 3.1. Code 15,16,17
3.2. Output 18
Task 4 : 4.1. Code 20,21,22,23,
24
4.2. Output 25
Task 5 : 5.1. Code 27,28,29,,30
5.2. Output 31
Project Work Learning's

S. No. STUDENT NAME ENROLLMENT NUMBER ROLL NUMBER EXAM NUMBER
1 SAFI RAJKUMAR
SATNARAYAN
23BCA04363 Temp_H58
2 MARADIYA
MOHMADKAIF
AYUBBHAI
23BCA04149 Temp_H22
3 MANIAR
MOHAMAD ZAID
23BCA04146 Temp_H20
4 ACHARYA VRAJ
ASHVINKUMAR
23BCA04003 Temp_H01
Group Details
Group No. : PW-I_H02

Task 1: Designing a List using List tag: Order List, Unordered List & Nested List.
• HTML Structure: This code showcases the basic structure of an HTML document, which includes the
<html>, <head>, and <body> elements. The <head>section typically contains metadata, while the <body>
section contains the visible content of the webpage.
• Background Color: The bgcolor attribute in the <body> tag is used to set the background color of the
webpage. In this case, it's set to "#7A7A85," which represents a grayish-blue background color.
• Headings: HTML headings are defined using the <h1> and <h2> tags. In this code, you have an<h1>with the
text "Games" and two <h2>headings, "Outdoor Games" and "Indoor Games." Headings are important for
structuring content and improving accessibility.
• Lists: Two types of lists are used in this code-an unordered list (<ul>) for outdoor games and an ordered list
(<ol> for indoor games. Lists are a fundamental way to present and organize information in a structured
manner.

☆ CODE
<html>
<head>
<title>Game Lists</title>
</head>
<body bgcolor = "#7A7A85">
<h1><u>Games</u></h1>
<h2>Outdoor Games</h2>
<ul>
<li>Football</li>
<li>Cricket</li>
<li>Basketball</li>
<li>Tennis</li>
<li>Baseball</li>
</ul>

<h2>Indoor Games</h2>
<ol>
<li>Chess</li>
<li>Table Tennis</li>
<li>Snooker</li>
<li>Board Games</li>
<li>Video Games</li>
</ol>
</body>
</html>

Task 2: Creation of Table which includes all the tags including colspan and rowspan
• HTML Structure: The code follows the basic structure of an HTML document with the shtrr <head> and
<body> elements. The head-section typically contains metadata, while the <body> section contains the
visible content of the webpage
• Background Color : The bgcolor attribute in the <body>tag sets the background color of the webpage to a
light blue color, specified as "#CCCCFF
• Table: The code creates an HTML, table using the <table> element. Tables are used to organize and display
data in rows and columns.
• Table Attributes: Several attributes are used with the <table> element to control its appearance and layout
border="1" adds a border to the table, height="400px" and width="40%" set the table's height and width,
and style="font-size: 40px;" adjusts the font size within the table.
• Table Headers: The first row of the table contains the headers for the days of the week (Sun, Mon, Tue,
Wed, Thu Fri Sat). These are underlined and styled with different colors for Sundays ("Sun")
• Table Data: The subsequent rows of the table represent the dates for the month of October 2023. Days are
organized by weeks, and Sundays are marked in red.

☆ Code
<html>
<head>
<title>Month Calendar</title>
</head>
<body bgcolor="#CCCCFF" align="centre">
<u><h1>Octomber-2023</h1></u></th>
<table border="1" align="centre" height="400px" width="40%" style="font-size: 40px;>
<tr align="centre">
<td style="color: red;"><u>Sun</u></td>
<th><u>Mon</u></th>
<th><u>Tue</u></th>
<th><u>Wed</u></th>

Task 3: Formatting Tags Which includes all the formatting tags using HTML and CSS.
• HTML Structure: The code follows the standard structure of an HTML document with the <html> <head>
and <body> element,
• Body Styling: The CSS code in the <style>block sets the background color of the body to a shade of green
(#009933, it also defines font family, margins, and padding for the entire page.
• Font Styling: The code demonstrates font styling using HTML tags such as <strong> for bold text, <em> for
italic text, and <U> for underlined text. However, CSS is a better practice for text formatting.
• Hyperlinks: The code includes a hyperlink (anchor) using the <tag. The anchor text is styled with a blue
color #0074d9 The attribute specifies the URL the hyperlink points to.

<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color:#009933;
margin: 0;
padding: 0;
}
p{
font-color:blue;
}
h1 {
color: #333;
text-align: centre;
}
☆ Code

p {
color: #666;
font-size: 18px;
text-align: left;
margin: 20px;
padding: 10px;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
u {
text-decoration: underline;
}

a {
color: #0074d9;
}
</style>
</head>
<body>
<h1><u>Formatting Example</u></h1>
<p><font color="#ffccff">This is a <strong>bold</strong> </p>
<p><em><font color="red">This is a text italic paragraph</em></p>
<p><u> <font color="yellow">You can also have underlined text.</u> </p>
<p> <font color="black">You can <a href=https://bpccs.org <p><font color="blue">BPCCS
Website.</p>
</body>
</html>

• Image Path: Ensure that the image path is correct and accessible. In your code.you have used an absolute path
(C:IT Projectamitabh bachchan.jpg). When hosting a website, use relative paths or provide a valid online image
URL .
• CSS Style for Underline: In the underline class, you attempted to create an underline with dashed style, but the
property should be text-decoration, not just decoration. So, it should be text-decoration: underline dashed.
• HTML Structure: Consider organizing your HTML with proper structure. You could include separate sections for
the header, summary, experience, and awards, making your code more readable and maintainable.
Task4: Create Resume.

<html>
<head>
<title>Amitabh Bachchan - Resume</
title>
<style>
body {
font-family: Arial;
background-color: yellow;
}
h1 {
font-size: 36px;
color: blue;
}
☆ Code

h2 {
font-size: 24px;
color: red;
}
p {
font-size: 16px;
}
li {
margin-bottom: 10px;
}
.center{
display:block;
margin-left:auto;
margin-right:auto;

border : solid red 5px;
}
.underline{
font-size : 25px;
decoration : dashed-underline;
}
</style>
</head>
<body>
<h1 align="center"><u>AmitabhBachchan</u></h1>
<img class = "center" src="C:IT Projectamitabh bachchan.jpg"
width="200"
height="200" >

<b> <p class = "underline" align="center"> Legendary Bollywood
Actor</p> </b>
<h2><u>Summary</u></h2>
<p>Amitabh Bachchan is a renowned Indian film actor, producer, and
television
host. He has appeared in over 200 Indian films in a career spanning five
decades and
is one of the most influential actors in the history of Indian cinema.</p>
<h2><u>Experience</u></h2>
<ul>
<li>
<h3>Lead Actor, Bollywood</h3>
<p>Acted in numerous iconic films, such as Sholay, Deewar, and Zanjeer.</
p>
</li>
<li>

<h3>Television Host</h3>
<p>Hosted the popular TV show
Kaun Banega Crorepati.</p>
</li>
</ul>
<h2><u>Awards</u></h2>
<ul>
<li>Padmashree Award (1984)</li>
<li>Padma Bhushan (2001)</li>
<li>Padma Vibhushan (2015)</li>
</ul>
</body>
</html>

Task 5: Designing of Webpage which includes all the previous 4 tasks and your own creativity using HTML and CSS.
• Use of css we can give bg colour, font size and colour and give margin,
height, width also give header and footer and write hexadecimal
numbers to give best colour to bg and font.
• We also used header for giving it proper heading .
• We used text align to customize the information.
• We used p tag for paragraph either give customized size to font or we
can go one task to another task with only one click.

<html>
<head>
<title> Webpage</title>
<style>
body {
font-family: sans-serif;
margin : 0;
background-color: #CBCEEA;
}
header {
background-color:#080F63 ;
color: #fff;
padding : 15px;
text-align: center;
☆ Code

}
footer {
background-color: #080F63;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom : 0;
width: 100%;
}
a:hover{
background-color:#080F63;
color:#CBCEEA;
}
</style>

</head>
<body>
<header>
<h1> Webpage</h1>
</header>
<text align="center"><b>
<p style="font-size : 20px"><a href= "C:IT Projecttask1.html"> This is a task 1 </a></
p>
<p> In a task 1 we Created Indoor and Outdoor Games Using ul and ol Tags.</p>
<p style="font-size : 20px"><a href= "C:IT ProjectTask2.html"> This is a task 2 </
a></p>
<p> In a task 2 we created October-2023 calendar Table which includes all the tags
including colspan and rowspan.</p>

<p style="font-size : 20px"><a href= "C:IT Projecttask3.html"> This is a task 3 </a></
p>
<p> In a task 3 we created Formatting Tags Which includes all the formatting tags
using HTML and CSS.</p>
<p style="font-size : 20px"><a href= "C:IT ProjectTask4 (1).html"> This is a task 4 </
a></p>
<p> In a task 4 We created Shri Amitabh Bachchan resume .</p>
</b></text>
<footer>
<p style="font-size : 25px"><b>Our Creativity </b></p>
</footer>
</body>
</html>

PROJECT LEARNING
• Here we learned that…
• How to code order list , unordered list and Nested list.
• To arrange the information in an order as well as by point wise we use the order and
unordered list.
• We can easily make a table by using table tag.
• The reader can easily know the information of table in one look.

• From the task 4 we learned that with the use of css we can give bg colour, font size and colour and
give margin, height, width and do lot's of more designing. We also used h1 tag for give it proper
heading. We used image tag to give it customized image.We also used b tag for bold sentences and p
tag for paragraph. We used ul tag to give bullets to all syntaxes and used h2 and h3 tag for better
headings.
• From the task 5 we learned that with the use of css we can give bg colour, font size and colour and
give margin, height, width also give header and footer and write hexadecimal numbers to give best
colour to bg and font. We also used header for giving it proper heading . We used text align to
customize the information. We used p tag for paragraph either give customized size to font or we can
go one task to another task with only one click. And last we used footer to make ending cool and
attractive in down side.

PW-1_H02.pptx............................

More Related Content

Similar to PW-1_H02.pptx............................ (20)

Recently uploaded (20)

PW-1_H02.pptx............................