AWT PRACTICAL FILE
Program -1
Aim: Write code to display a list (ordered and unordered list) of IT
Companies.
Theory:
Lists in HTML
In HTML, lists are used to group related items together. There are mainly two types:
1. Ordered List (<ol>)
● Items are shown in a specific order.
● Each item is numbered automatically.
● Tag used: <ol> (ordered list) and <li> (list item).
2. Unordered List (<ul>)
● Items are shown without order.
● Each item has a bullet (•) by default.
● Tag used: <ul> (unordered list) and <li> (list item).
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Input:
<html>
<Head>
<title>Companies List</title></Head>
<body>
<H1 align='center'>Dell</H1>
<H2 align='center'>Company Profile and operations</H2>
<p>
Founded:
1984 by Michael Dell (then a college student)
Originally named PC’s Limited, later became
Dell Inc. Headquarters:
Round Rock, Texas, USA
Type:
Private Company (was public, then went private in 2013, and returned to
public markets in 2018)
</p>
<H2 align='center'>What it does</H2>
<p>
Dell Technologies is a global leader in technology that provides a wide
range of hardware, software, and services, including:
💻 1. Consumer & Business PCs
Inspiron (home use & students)
XPS (premium ultrabooks)
Alienware (high-performance gaming)
Latitude (business laptops)
Vostro (small business laptops)
🖥 2. Desktops & Workstations
OptiPlex (business PCs)
Precision (engineering/design workstations)
🖧 3. Servers & Storage
PowerEdge servers
PowerVault & Dell EMC storage systems
☁ 4. Cloud & Data Solutions
Through Dell EMC, it offers enterprise-level cloud computing, virtualization,
and data storage solutions.
🛡 5. Cybersecurity & Infrastructure
Dell provides cybersecurity tools, infrastructure modernization, and hybrid
cloud solutions for businesses.
</p>
</body>
</html>
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Output:
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Program-2
Part - a
Aim: Write a code to apply a link(anchor tag) on the list of companies to
show details about the respective companies.
Theory:
The anchor tag <a> is used to create a hyperlink in HTML. It makes text or
an image clickable so the user can jump to another webpage, a file, or
even a specific location in the same page.
Important Attributes
● href: the destination link (website, page, or file).
● target: decides how the link opens.
○ _self → opens in the same tab (default).
○ _blank → opens in a new tab.
Input:
<html>
<Head>
<title>Companies List</title></Head>
<body>
<H1>IT Companies Ordered List</H1>
<ol>
<li>DELL</li>
<li>IBM</li>
<li>HCL</li>
<li>Wipro</li>
<li>Infotech</li>
<li>Corizo</li>
<li>Google</li>
<li>Microsoft</li>
<li>SAP Labs</li>
<li>Genpact</li>
<li>NIIT</li>
<li>Infosys</li>
</ol>
<H1>IT Companies Unordered List</H1>
<ul>
<li>DELL</li>
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
<li>IBM</li>
<li>HCL</li>
<li>Wipro</li>
<li>Infotech</li>
<li>Corizo</li>
<li>Google</li>
<li>Microsoft</li>
<li>SAP Labs</li>
<li>Genpact</li>
<li>NIIT</li>
<li>Infosys</li>
</ul>
<a href="C:/Users/LENOVO/Desktop/[Link]"target='_blank'>DELL</a>
<a href="C:/Users/LENOVO/Desktop/[Link]"target='_blank'>IBM</a>
</body>
</html>
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Output:
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Part - b
Write a code to create a menu bar using lists.
Theory:
A menu bar in HTML can be created using lists. An unordered list (<ul>) is
used as the container, and each list item (<li>) represents a menu
option. Inside each list item, an anchor tag (<a>) is added to make the
menu options clickable. With CSS, the list can be styled horizontally to
look like a navigation bar.
Input:
<html>
<Head>
<title>Companies List</title></Head>
<body>
<H1>IT Companies Ordered List</H1>
<ol>
<li>DELL</li>
<li>IBM</li>
<li>HCL</li>
<li>Wipro</li>
<li>Infotech</li>
<li>Corizo</li>
<li>Google</li>
<li>Microsoft</li>
<li>SAP Labs</li>
<li>Genpact</li>
<li>NIIT</li>
<li>Infosys</li>
</ol>
<H1>IT Companies Unordered List</H1>
<ul style="list-style-type:none;">
<li style="display: inline;">DELL</li>
<li style="display: inline;">IBM</li>
<li style="display: inline;">HCL</li>
<li style="display: inline;">Wipro</li>
<li style="display: inline;">Infotech</li>
<li style="display: inline;">Corizo</li>
<li style="display: inline;">Google</li>
<li style="display: inline;">Microsoft</li>
<li style="display: inline;">SAP Labs</li>
<li style="display: inline;">Genpact</li>
<li style="display: inline;">NIIT</li>
<li style="display: inline;">Infosys</li>
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
</ul>
<ul style="list-style:none; display:inline;">
<li>Microsoft</li>
<li>SAP Labs</li>
<li>Genpact</li>
<li>NIIT</li>
</ul>
<a href="C:/Users/LENOVO/Desktop/[Link]"target='_blank'>DELL</a>
<a href="C:/Users/LENOVO/Desktop/[Link]"target='_blank'>IBM</a>
</body>
</html>
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Output:
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Program 4
Aim: Design Table layouts.
Theory: Styles used:
● border: 1px solid black; → Adds black borders.
● border-style: dotted; → Borders will be dotted.
● padding → Creates space inside the cells (top, bottom, left, right = 10px).
● border-collapse: collapse; → Removes double borders, making it look neat.
● colspan (Column Span) : A cell spreads horizontally across
multiple columns.
● rowspan (Row Span):A cell spreads vertically across multiple rows.
Input:
Part a
TABLE 1 Layout
<html>
<title>Table layout</title>
<body>
<table style="width:70%; height:40%">
<style>
table,th,td{ border:1px solid black; border-style:dotted;padding-
left:10px; padding-right:10px;padding-top:10px;padding-
bottom:10px;border-collapse:collapse}
</style>
<tr text-align:center;>
<td rowspan="2" colspan="2">1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td colspan="2">6</td>
</tr>
<tr><td colspan="2">7</td>
<td>8</td>
<td>9</td>
</tr></body></html>
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Output:
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Part - b
TABLE 2 LAYOUT
<html>
<title>Table layout</title>
<body>
<table style="width:40%; height:10%">
<style>
table,th,td{ border:1px solid black; border-style:dotted;padding-
left:10px; padding-right:10px;padding-top:10px;padding-bottom:10px;
border-collapse:collapse;text-align:center}
</style>
<tr>
<td colspan="4">1</td>
</tr>
<tr>
<td rowspan="2" colspan="2" >2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</body>
</html>
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Output:
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Program 5
Aim: Design a Web Page on the Timetable of your course using table tag
along with styling.
Input:
<html>
<Head>
</Head>
<body>
<font size=6px>
<caption>Timetable of Bsc-IT big honours
<title>AMITY UNIVERSITY NOIDA</title>
</font>
<table>
<style>
table,th,td
{
border:1px solid black;
}
</style>
<table border="1" cellpadding="5" cellspacing="0">
<th>Monday</th>
<tr>
<td>09:15-10:10</td>
<td>BS105-Behavioral Sciences</td>
<td>11:15-12:10</td>
<td>CSIT248-AWT(Theory)</td>
<td>14:15-15:10</td>
<td>CSIT246-DBMS(Theory)</td>
<td>15:15-16:10</td>
<td>SW102-HVCO</td>
</tr>
<th>Tuesday<th>
<tr>
<td>11:15-12:10</td>
<td>CSIT246-DBMS(Theory)</td>
</tr>
<th>Wednesday</th>
<tr>
<td>11:15-12:10</td>
<td>BS105-Behavioral Sciences</td>
<td>14:15-15:10</td>
<td>CSIT247-OOPJ(Theory)</td>
<td>15:15-16:10</td>
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
<td>CSIT248-AWT(Lab)</td>
<td>16:15-17:10</td>
<td>CSIT248-AWT(Lab)</td>
</tr>
<th>Thursday</th>
<tr>
<td>09:15-10:10</td>
<td>CSIT246-DBMS(Lab)</td>
<td>10:15-11:10</td>
<td>CSIT246-DBMS(Lab)</td>
<td>12:15-13:10</td>
<td>CSIT247-OOPJ(Theory)</td>
</tr>
<th>Friday</th>
<tr>
<td>15:15-16:10</td>
<td>CSIT247-OOPJ(Lab)</td>
<td>16:15-17:10</td>
<td>CSIT247-OOPJ(Lab)</td>
</tr>
</body>
</html>
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Output:
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Program 6
Aim: Design log in form using table elements.
Input:
<html>
<head>
<body>
<title>Log in form</title>
</head>
<Legend>Login form</Legend>
<form>
<FIELDSET><br>
<label for="username:">Enter your Username:</label><br>
<input type="Login"id="Username",name="Username"><br>
<label for="password:">Enter your password:</label><br>
<input type="password"="Password"><br>
<input type="submit">
<input type="reset"><br>
</FIELDSET>
</form>
</body>
</html>
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons
Output:
Name: Ritika Rai, Enrollment No.:A010178724020, Bsc-IT Big Hons