Scribd
Upload
2 views

HTML Project

The document outlines practical assignments for a Bachelor of Computer Application course on Web Technologies at Jaggannath International Management School. It includes various HTML coding tasks such as creating web pages with basic tags, lists, tables, forms, and the usage of inline, internal, and external stylesheets. Each practical section provides specific aims and example code to demonstrate web development concepts.

Uploaded by

Yashika Tiwari 11th C
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

HTML Project

The document outlines practical assignments for a Bachelor of Computer Application course on Web Technologies at Jaggannath International Management School. It includes various HTML coding tasks such as creating web pages with basic tags, lists, tables, forms, and the usage of inline, internal, and external stylesheets. Each practical section provides specific aims and example code to demonstrate web development concepts.

Uploaded by

Yashika Tiwari 11th C
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 38

Jaggannath International Management School

Vasant Kunj ,New Delhi-110070

(Department of Information Technology)

Web Technologies

Bachelor of Computer Application


Semester -1
(2024-2028)
Subject –web Technologies
Subject code –BCA-105P
Session :August-December 2024

Submitted To: Submitted By:


Ms.Neha Chhabra Name: Yashika Tiwari
Assistant professor-Department of IT. EnrollmentNo:01921402024
JIMS,Vasant Kunj,New Delhi Class:BCA-1 Evening
Practical -1
Aim :write a program using at least 5 basic tags of html
Code:

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to My Web Page</h1>

<p>This is a simple web page created using basic HTML tags.</p>

<h2>List of My Favorite Things:</h2>

<ul>

<li>Coding</li> Aim

<li>Music</li>

<li>Traveling</li>

<li>Photography</li>

</ul>

</body>

</html>
Output
Practical-2
Aim: Make following four different web pages:

i. Formatting styles and Headings: Include Bold, Italics, Underline, Strike,


Subscript, Supescript and all six types of headings.
ii. Font Styles and Image tag.
iii. Marquee: Move text, image and hyperlink. iv.Other tags: br, hr, pre, p

Code: i
<html>
<head> <h1> <b> <i> <u> MY FIRST PROGRAM </u> </i> </b> </h1>
<head> <h2> <b> <i> <u> MY FIRST PROGRAM </u> </i> </b> </h2>
<head> <h3> <b> <i> <u> MY FIRST PROGRAM </u> </i> </b> </h3>
<head> <h4> <b> <i> <u> MY FIRST PROGRAM </u> </i> </b> </h4>
<head> <h5> <b> <i> <u> MY FIRST PROGRAM </u> </i> </b> </h5>
<head> <h6> <b> <i> <u> MY FIRST PROGRAM </u> </i> </b> </h6>
<title> web page </title>
</head>
<body >
<b>
x<sub>3</sub> + x<sup>3</sup>
=8
</b>
</body>
</html>
OUTPUT;
code ii

<html>

<head> <h1> <b> <i> <u> <center> MY FIRST PROGRAM </center> </u> </i> </b>
</h1>

<title> web page </title>

</head>

<body>

<b>

<font face="times new roman" size=5>

This image shows a computer.

<img src="https://media.geeksforgeeks.org/wp-content/uploads/20230426115225/computer-
image-660.jpg" align="right">

</b>

</body>

</html>
Output:
code iii

<html>

<head> <h1> <b> <i> <u> <center> MY FIRST PROGRAM </center></u> </i> </b>
</h1>

<title> web page </title>

</head>

<body>

<b>

<marquee>

<font face="times new roman" size=5>

This image shows a computer.

<img src="https://media.geeksforgeeks.org/wp-content/uploads/20230426115225/computer-
image-660.jpg" align="right" >

To know about computer go to

<a href="https://en.wikipedia.org/wiki/Computer"> COMPUTER </a>

</b>

</marquee>

</body>

</html>
Output:
code iv:

<html>

<head> <h1> <b> <i> <u> <center> MY first program</center> </u> </i> </b> </h1>

<title> web page </title>

</head>

<body>

<b> <hr>

<p> <pre>

this is my fisrt program

</pre>

</p>

</b>

</hr>

</body>

</html>
Output:
Practical-3
Aim:Write a program to create an ordered list.
Code:

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>ordered list</h1>

<ol>

<li>mango</li>

<li>papaya</li>

<li>orange</li>

<li>banana</li>

</ol>

</body>

</html>
Output:
Practical-4
Aim:write a program to create an unordered list
Code:

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>unordered list</h1>

<ul>

<li>mango</li>

<li>papaya</li>

<li>orange</li>

<li>banana</li>

</ul>

</body>

</html>
Output:
practical -5
Aim: Create a web page containing a background image and apply all the
background styling attributes

Code:

<html>

<head>

<title>Web Page with Background Image</title>

<style>

body {

background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-
736885_1280.jpg');

<!--Background styling attributes-->

background-size: cover;

background-repeat: repeat-4;

background-position: center;

background-attachment: fixed;

background-origin: content-box;
background-clip: border-box;

h1 {

color: white;

text-align: center;

margin-top: 20%;

font-size: 3em;

p{

color: white;

text-align: center;

font-size: 1.2em;

</style>

</head>

<body>

<h1>Welcome to My Website</h1>

</body>

</html>
Output:
Practical-6

Aim: Create an unordered list nested inside ordered list and apply the
following:
• Insert an image of Main item on top right corner of web page.
• Display heading as a marquee.
• Use different font styles and colors for different ordered list items.
• Insert horizontal line after each ordered item.

Code:

<HTML>
<HEAD>
<TITLE>LIST</TITLE>
<BODY>
<H1> GROCERY ITEMS </H1>
<OL>
<B> <I> <U><LI>MANGO
<LI> APPLE
<LI> BANANA</B> </I> </U>
<UL>
<LI> POTATO
<LI>TOMATO
<LI> LADY FINGER
</UL>
</OL>
<IMG
SRC=https://www.bhg.com/thmb/Mwd_YEkDbVg_fPsUDcWr3eZk9W0=/5645x0/filters:no
_upscale():strip_icc()/difference-between-fruits-vegetables-01-
5f92e7ec706b463287bcfb46985698f9.jpg ALIGN=”RIGHT” HIGHT=”200”
WIDTH=”200”>
</HEAD>
</HTML>
Output:

GROCERY ITEMS
1. MANGO
2. APPLE
3. BANANA
 POTATO
 TOMATO
 LADY FINGER
Practical-7

Aim: Design a table with row span and column span and make use of
attributes Colspan, rowspan, width, height, cellpadding, cellspacing etc.

Code:
<html>
<head>
<title> creating tables </title>
</head>
<style>
Table, th, td {
Border: 1px solid black;
}
</style>
<body >
<h1> <center> student details</center> </h1>
<table border=3 cellspacing=7 cellpadding=7>
<tr>
<th> name </th>
<th> enrollment no. </th>
<th colspan=”2”> class </th>
</tr>
<tr>
<td> Anushka </td>
<td rowspan=”1”>123 </td>
<td>Bca 1</td>
</tr>
<tr>
<td> Ramesh </td>
<td> 124</td>
<td> Bca </td>
</tr>
</table>
</body>
</html>
Output:
Practical-8

Aim: Design following Frame

Code:

<html>
<head>
<title> frames </title>
</head>
<frameset cols=”50%,50%”>
<frame src=”one.htm”>
<frameset rows=”35%,15%”>
<frame src=”two.htm”>
<frame src=”three.htm”>
</frameset>
</frameset>
</html>
Output
Practical-9
Aim: Design Student Registration form for
admission in college

Code:
<HTML>
<HEAD
><TITLE>STUDENT DETAILS</TITLE>
</HEAD>
<BODY>
<H3><CENTER>
STUDENT DETAILS</CENTER></H3>
<FORM METHOD= POST>
FIRST NAME
<INPUT TYPE=TEXT NAME =”ADDRESS” SIZE=20>
<BR> LAST NAME
<INPUT TYPE=TEXT NAME=”ADDRESS” SIZE=20 >
<BR>
<INPUT TYPE=NUM=”ADDRESS” SIZE=4>
<BR> PASSWORD
<INPUT TYPE=PASSWORD MAXLENGTH=10>
<BR> GENDER
<BR><INPUT TYPE=RADIO NAME=”GENDER”
VALUE= “MALE”> MALE<BR>
<INPUT TYPE=RADIO NAME=”GENDER”
VALUE=”FEMALE”> FEMALE<P>
<BR> COURSE
<BR><INPUT TYPE=RADIO NAME=”COURSE”
VALUE=”BCA”>BCA <BR>
<INPUT TYPE =RADIO NAME=”course” VALUE=
“BBA”> BBA<BR>
<INPUT TYPE=RADIO NAME=”COURSE” VALUE=
“BJMC”> BJMC<P>
<BR> PHONE NUMBER
<INPUT TYPE=TEXT NAME=”ADDRESS”SIZE=10>
<BR> E-MAIL ADDRESS
<INPUT TYPE=TEXT NAME=”ADDRESS” >
</BODY>
</HTML>
output

.
PRACTICAL- 10
AIM: Create a webpage showing the usage of Inline Style sheet.
Code:

<html>

<head>

<title>Inline Style Sheet Example</title>

</head>

<body bgcolor="beige">

<h1 style="color: red; text-align: center;">about inline style sheet</h1>

<p style="font-size: 18px; color: green;">This paragraph demonstrates the use of inline

styles. Each style is applied directly to the HTML element.</p>

<p style="font-size: 16px; line-height: 1.5;">Inline styles allow you to apply CSS rules
directly

to individual HTML elements. This can be useful for quick styling, but it is generally better
to use

internal or external stylesheets for larger projects to keep your HTML clean and
maintainable.</p>

<ul style="list-style-type: square;">

<li style="color: purple;">Inline styles are applied using the <code>style</code>

attribute.</li>

<li style="color: orange;">They take precedence over external and internal styles.</li>

<li style="color: brown;">Use inline styles for small changes, but avoid overusing them.</li>

</ul>

<h3 style="text-decoration: underline;">Benefits of Inline Styles</h3>

<p style="font-size: 14px;">Inline styles can be useful for:</p>

<ol>

<li style="color: teal;">Testing and debugging.</li>

<li style="color: maroon;">Quickly applying styles to specific elements.</li>


<li style="color: navy;">Making one-off style adjustments without editing stylesheets.</li>

</ol>

<p style="font-weight: bold;">Thank you for visiting my webpage!</p>

</body>

</html>
Output:
PRACTICAL- 11
AIM: Create a webpage showing the usage of Internal Style sheet.
Code:

<html>

<head>

<title> Internal Style Sheet Example </title>

<style>

body {

background-color: lightgray;

font-family: Arial, sans-serif;

h1 {

color: blue;

text-align: center;

p{

font-size: 16px;

color: darkgreen;

ul {

list-style-type: square;

margin: 20px;

li {

color: darkorange;

font-weight: bold;

}
h2 {

color: red;

h3 {

text-decoration: underline;

</style>

</head>

<body>

<h1>about internal stylesheet</h1>

<p>This webpage demonstrates the use of an internal stylesheet. Internal CSS is defined in
the

<code>&lt;head&gt;</code> section of the document.</p>

<p>Internal styles allow you to apply CSS rules to multiple elements on a single webpage.
This

approach keeps your styles organized and separate from your HTML content.</p>

<ul>

<li>Internal styles are placed within a <code>&lt;style&gt;</code> tag in the

<code>&lt;head&gt;</code> section.</li>

<li>They apply to all matching elements in the document.</li>

<li>They are useful for styling a single page without affecting other pages.</li>

</ul>

<h3>Benefits of Internal Styles</h3>

<p>Using internal styles can be beneficial for:</p>

<ol>

<li>Quickly changing the style of a single page.</li>

<li>Organizing styles specific to that page.</li>

<li>Avoiding conflicts with external stylesheets.</li>


</ol>

<p>Thank you for visiting my webpage!</p>

</body>

</html>
Output:
PRACTICAL- 12
AIM: Create a webpage showing the usage of External Style sheet.
Code:

Step 1: Create the HTML file (index.html)

<html>

<head>

<title>External Style Sheet Example</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1>Welcome to My Webpage</h1>

<p>This webpage demonstrates the use of an external stylesheet. The styles are defined in a

separate CSS file.</p>

<h2>About External Styles </h2>

<p>External styles allow you to apply CSS rules across multiple pages by linking the same

stylesheet.</p>

<ul>

<li>External styles are defined in a separate <code>.css</code> file.</li>

<li>You can link the same stylesheet to multiple HTML pages.</li>

<li>This approach helps keep your styles organized and maintainable.</li>

</ul>

<h3>Benefits of External Styles</h3>

<p>Using external styles can be beneficial for:</p>

<ol>

<li>Consistent styling across multiple pages.</li>


<li>Easier maintenance of styles in one place.</li>

<li>Faster loading times due to caching of the stylesheet.</li>

</ol>

<p>Thank you for visiting my webpage!</p>

</body>

</html>

Step 2: Create the CSS file (styles.css)

body {

background-color: lightgray;

font-family: Arial, sans-serif;

h1 {

color: blue;

text-align: center;

p{

font-size: 16px;

color: darkgreen;

ul {

list-style-type: square;

margin: 20px;

li {

color: darkorange;
font-weight: bold;

h2 {

color: red;

h3 {

text-decoration: underline;

}
Output:

You might also like