Scribd
Upload
41 views31 pages

Lab Adp 01

Uploaded by

727824tucs102
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
41 views31 pages

Lab Adp 01

Uploaded by

727824tucs102
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 31

Lab experiment 1

Design a web page using HTML basic tags


AIM:
TO DESIGN A WEB PAGE USING HTML TAGS

BACKGROUND THEORY:
<!DOCTYPE> Defines the document type
The title Attribute
Mouse over this paragraph, to display the title attribute as a tooltip.

<p> tag in HTML is used to define a paragraph of text. It is a block-level element,


which means it typically occupies the full width of its parent container, and it
automatically adds space before and after the content,

SOURCE CODE:
<!DOCTYPE html>

<head>

<title>

HTML BASIC TAGS

</title>

</head>

<body>

<h1>My first HTML page</h1>

<p>This is working</p>

</body>

OUTPUT:
RESULT:
By using basic html tags the webpage is created
Lab experiment 2

Develop web site with suitable contents and links.


AIM:
TO CREATE WEB SITE WITH SUITABLE CONTENTS AND LINKS
BACKGROUND THEORY:
.<center>Tag:
The <center> tag in HTML was used to center – align content, such as text or other elements,
within its parent container. However, the <center> tag is deprecated in HTML5 and is not
recommended for use in modern web development.

2.<p>Tag:
The <p> tag in HTML is used to define a paragraph of text. It is a block-level element, which
means it typically occupies the full width of its parent container, and it automatically adds
space before and after the content, providing separation between other elements.
3.<em>Tag:
The <em> tag in HTML is used to emphasize text, usually by rendering it in italic style. The
purpose of the <em> tag is to indicate that the content inside it should be stressed or given
special importance within a sentence or passage.
4.<pre>Tag:
The <pre> tag in HTML is used to define preformatted text, which means the text inside the
<pre> tag is displayed exactly as written in the HTML source code, including any white
spaces, line breaks, and indentation. This makes it ideal for displaying code, ASCII art, or any
text where preserving the original formatting is important.
5.<b>Tag:
The <b> tag in HTML is used to bold text. However, it is important to note that the <b> tag is
primarily a stylistic tag and does not convey any semantic meaning about the content. This
means that it simply changes the appearance of the text (usually making it bold) but does not
indicate that the text is of any particular importance.
6.<body>Tag:
The <body> tag in HTML is used to define the body of an HTML document, which contains
all the visible content of a web page. Everything that appears on the page, such as text,
images, links, videos, forms, and other elements, is placed Inside the <body> tag. It is one of
the most important structural elements in an HTML document.

7.<dl>Tag:
The <dl> tag in HTML is used to define a definition list, which is a list of terms and their
corresponding definitions. It is commonly used for displaying glossary-like content, where
you list terms
SOURCE CODE:
<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body bgcolor="aqua">

<pre>

<center><p> <b>Sri Krishna College Of Technology</b></P></center>

<center> <P><b>Department of Computer Science and Engineering</b></P></center>

<em>Class : I – CSE B Section</em>

<em>Course Name : 23IT101 – Application Development Practices</em>

<em>Date : 24-9-2024</em>

<center><p><b>Personal Details</b></p></center>

<em><i>Name : DIPENDARNATH A</i></em>

<em><font color="slateblue">Class</font> :<font color="tomato"> I B.E.


CSE</font></em>

<em>Father's Name : ANANDHA KUMAR R</em>

<em>DOB : 03-08-2006 </em>

<em>Address : C-22 MAGICIAN STREET BLOCK-10 NEYVELI </em>

<em>Mobile No : 9442240109</em>

<em>Statement Of The Purpose : A Dream Come True College.Once A SKCTian Always A SKCTian.It
is a Beautiful College.</em>

<center><p><b>Skill Section</b></p></center>

<em><UL><LI>Programming Languages : HTML, Java, C++, Python</LI></UL></em>

<em><UL><LI>Tools : UML</LI></UL></em>

<em><UL><LI>Technologies : Web Development, Cloud Computing</LI></UL></em>

<center><p><b>Education Section</b></p></center>

<em><ol type="I">

<li>10th Standard : JAWAHAR HIGHER SECONDARY SCHOOL NEYVELI</li>

<li>12th Standard : JAWAHAR HIGHER SECONDARY SCHOOL NEYVELI </li>


<li>College :Sri Krishna College Of Technology,2024-2028</li>

</ol></em>

<a href="http://127.0.0.1:5500/Untitled-da.html">GO</a>

</pre>

</body>

</html>

SCREEN SHOT:
RESULT:
By using html tags the personal detail webpage is created
Lab experiment 3

Design web pages using lists and tables.

AIM:
Design web pages using lists and tables.

BACKGROUND THEORY:
.<head>Tag:
The <head> tag in HTML is a container for metadata and resources that define the structure
and behavior of a webpage, but it doesn’t display content directly on the page. It is placed
inside the <html> tag and precedes the <body> tag.
2.<center>Tag:
The <center> tag in HTML was used to center-align content such as text, images, or other
HTML elements. It was introduced in early HTML specifications to align content
horizontally in the center of its parent container.
3. <tr>Tag:
The <tr> tag in HTML is used to define a table row in an HTML table. It is a container
element that wraps around <td> (table data) or <th> (table header) elements within a <table>.
The <tr> tag helps organize content into rows, allowing data to be displayed in a tabular
format.
4. <th>Tag:
The <th> tag in HTML is used to define table header cells within a table. It represents a
heading for a group of table cells, and its contents are typically displayed in bold and
centered by default. The <th> tag helps provide a description or title for each column or row
in the table, making it easier for users to understand the data.

5. <td>Tag:
The <td> tag in HTML is used to define table data cells within a table. Each <td> element
represents a single cell in a table row and is placed inside a <tr> (table row) tag. The <td> tag
holds the data or content of the table and is typically used alongside <th> (table header)
elements to create a complete table structure.

SOURCE CODE:
<!DOCTYPE html>

<html>

<head>

<title>SKCT</title>

</head>

<body>

<center>

<h1 >Time Table For SKCT CSE-'B'</h1>


<table border="5" style="border-spacing: 10px" width="1250px" height="500px">

<tr bgcolor="blue" style="color: rgb(255, 0, 0,1);" >

<th>Day</th>

<th>9:00 am - 10:00 am</th>

<th>10:00 am - 10:45 am</th>

<th>11:00 am - 12:00 am</th>

<th rowspan="6">LUNCH BREAK</th>

<th>1:15 pm - 2:15 pm</th>

<th>2:15 pm - 3:15 pm</th>

<th rowspan="6">BREAK</th>

<th>3:30 m - 4:30 pm</th>

</tr>

<tr bgcolor="yellow">

<td>1</td>

<td>C++</td>

<td>C++</td>

<td>C++</td>

<td>PHY</td>

<td>MATHS</td>

<td>ADP</td>

</tr>

<tr >

<td>2</td>

<td>DLD</td>

<td>CHE</td>

<td>ADP</td>

<td>PHY</td>

<td>C++</td>

<td>C++</td>

</tr>

<tr bgcolor="yellow">
<td>3</td>

<td>ADP</td>

<td>BIO</td>

<td>DLD</td>

<td>MATHS</td>

<td>TWS</td>

<td>CHE</td>

</tr>

<tr>

<td>4</td>

<td>ADP</td>

<td>ADP</td>

<td>BIO</td>

<td>DLD</td>

<td>PHY</td>

<td>BIO</td>

</tr>

<tr bgcolor="yellow">

<td>5</td>

<td>DLD</td>

<td>LAB</td>

<td>LAB</td>

<td>MATHS</td>

<td>CHE</td>

<td>MATHS</td>

</tr>

</table>

</center>

</body>

</html>
SCREEN SHOT:

RESULT:
Created web pages using lists and tables.
Lab experiment 4

Build a web client-side Login, Registration form


and Dashboard with drop down menus

AIM:
TO CREATE web client-side Login, Registration form and Dashboard
with drop down menus

BACKGROUND THEORY:
<a>Tag:
It looks like you may have meant to ask about the <a> tag in HTML, which is used to create
hyperlinks. If you were referring to something else, feel free to clarify
The

<p> tag in HTML is used to define a paragraph of text. It is a block-level element, which
means it typically occupies the full width of its parent container, and it automatically adds
space before and after the content,
.<center>Tag:
The <center> tag in HTML was used to center – align content, such as text or other elements,
within its parent container. However,

<center> tag is deprecated in HTML5 and is not


recommended for use in modern web development.

SOURCE CODE:
<!DOCTYPE html>

<html>

<head>

<title>Workshop Registration</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: gainsboro;
margin: 0;

padding: 20px;

backdrop-filter: blur(px);

.container {

max-width: 600px;

margin: auto;

background: white;

padding: 20px;

border-radius: 50px;

backdrop-filter: blur(20px);

background-color: transparent;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

h1, h2 {

color: #333;

label {

display: block;

margin-top: 10px;

input[type="text"],

input[type="email"],

input[type="tel"],

input[type="password"],

select,

input[type="file"] {

width: 500px;

padding: 10px;

margin-top: 5px;

border: 1px solid #ccc;


border-radius: 4px;

input[type="radio"],

input[type="checkbox"] {

margin-top: 10px;

button {

background-color: #007BFF;

color: white;

padding: 10px 15px;

border: none;

border-radius: 4px;

cursor: pointer;

margin-top: 20px;

button:hover {

background-color: #0056b3;

.resource {

margin-top: 20px;

padding: 10px;

border: 1px solid #ddd;

border-radius: 4px;

.resource-image {

max-width: 100%;

height: auto;

border-radius: 4px;

</style>

</head>
<body style="background-image: url(cart.jpg);">

<div class="container">

<h1>Workshop Registration Form</h1>

<form action="#" method="POST" enctype="multipart/form-data"><center>

</video></center>

<h2>Personal Information</h2>

<label for="name">Full Name:</label>

<input type="text" id="name" name="name" required>

<label for="email">Email Address:</label>

<input type="email" id="email" name="email" required>

<label for="contact">Contact Number:</label>

<input type="tel" id="contact" name="contact" required>

<label for="contact">Register Number:</label>

<input type="tel" id="contact" name="contact" required>

<label>Gender:</label>

<input type="radio" id="male" name="gender" value="male" required>

<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female"><label


for="female">Female</label>

<label>Preferred Date and Topic:</label>

<select name="topic" required>

<option value="">Select one</option>

<option value="cloud-computing">Day 1: Cloud Computing</option>

<option value="machine-learning">Day 2: Machine Learning</option>

<option value="data-analytics">Day 3: Data Analytics</option>

</select>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>


<h2>Payment Information</h2>

<label for="receipt">Upload Payment Receipt:</label>

<input type="file" id="receipt" name="receipt" accept=".jpg, .jpeg, .png, .pdf" required>

<h2>Resource Persons</h2>

<div class="resource">

<h3>Day 1: Cloud Computing</h3>

<p><strong>Mr.Rohit</strong><br>Expert in Cloud Infrastructure and Services</p>

</div>

<div class="resource">

<h3>Day 2: Machine Learning</h3>

<p><strong>Mr.Virat</strong><br>Data Scientist with 10+ years of experience in AI</p>

</div>

<div class="resource">

<h3>Day 3: Data Analytics</h3>

<p><strong>Mr.Dhoni</strong><br>Analyst specializing in Business Intelligence</p>

</div>

<label>

<input type="checkbox" required>

I agree to the terms and conditions of the workshop.

</label>

<button type="submit">Submit Registration</button>

</form>

</div>

</body>

</html>

OUTPUT IMAGE
Result:
Created a web client-side Login, Registration form and Dashboard with drop down menus
Lab experiment 5

Develop a HTML form and validation using HTML5


features.
AIM:
To create a HTML form and validation using
HTML5 features.
BACKGROUND THEORY:
[3:54 pm, 27/11/2024] Jaya Surya Skct Madurai: The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

[3:54 pm, 27/11/2024] Jaya Surya Skct Madurai: The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

[3:54 pm, 27/11/2024] Jaya Surya Skct Madurai: The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="ADP_.CSS">
</head>
<body>
<div id="abc">
<pre>
<h1>SKI-KART</h1>
<input type="search" placeholder="SEARCH">
<pre> <button><a href="https://www.amazon.in/electronics/b/?
ie=UTF8&node=976419031&ref_=nav_cs_electronics">ELECTRONICS</a></button>
<button><a href="https://www.amazon.in/s?
k=kitchen+accessories+items+for+home&crid=YNYFJFBAVX5F&sprefix=ki%2Caps
%2C248&ref=nb_sb_ss_ts-doa-p_1_2">KICTHEN</a></button> <button><a
href="https://www.amazon.in/s?k=fashion&crid=33SKACRTE88MD&sprefix=fashion%2Caps
%2C267&ref=nb_sb_noss_2">FASHION</a></button> <button><a
href="https://www.redbus.in">TRAVEL</a></button> <button> <a
href="https://www.amazon.in/amazonpay/home?ref_=nav_cs_apay">SKI_PAY</a>
</button> <button><a
href="https://www.primevideo.com/offers/nonprimehomepage/ref=dv_web_force_root">S
KI_PRIME</a> </button> <button><a href="#ref">KEYBOARD</a></button>
<button><a href="#ref1">GAMING LAPTOP</a> </button> </pre>
</pre>
</div>
<div id="sec">
<pre><a href="https://www.asus.com/in/"> <img src="ASUS”></a> <a
href=https://www.lenovo.com> <img src=LENOVO”></a> <a
href="https://www.infinixmobiles.in/"><img src="INFINIX” ></a> <a
href="https://www.dell.com/en-in/shop/scc/scr/laptops?~ck=mn&gacd=10415953-9027-
5761040-297509714-
0&dgc=PLA&gad_source=1&gclid=CjwKCAjwjsi4BhB5EiwAFAL0YMbZszrj7EzPzMZ5XAVFj1X_
wIpIWNAS-cTVtR7DKGlwKdWJDQDmAhoCd88QAvD_BwE&gclsrc=aw.ds"> <img src="DELL”
a>
<a href="https://store.acer.com/en-“ ></a> <a href="https://www.samsung.com/in/?
cid=in_pd_ppc_google_im-mobile-smartphone-all-dtc_sales_samsung-book4-all-
2024_eshop-pmax-pla_23sep2024-na_1ur-503228l-2024-eshop-bau-performancemax-
cpc_pfm--21741953002------x--
&gad_source=1&gclid=CjwKCAjwjsi4BhB5EiwAFAL0YPVwazZmuIMD9AJmWBYMt43qaKE7rU
nuwueeUcLehkdJg7ciIv94yRoCGwkQAvD_BwE"><img src="SAMSUNG” </a> <a
href="https://www.hp.com/in-en/shop/?
intel_sem&gad_source=1&gclid=CjwKCAjwjsi4BhB5EiwAFAL0YD4kajUlTK9tlJmv81mSqCboLe
alnAdHcYXznfdsu5xtFAHaekiX5RoCFW0QAvD_BwE&gclsrc=aw.ds"><img src="HP” </a>
<a href="https://www.dell.com/en-in/gaming/alienware"><img src="ALIEN WARE” ></a>
</pre>
</div>
<div>
SCREEN SHOT:

Result:
Developed a HTML form and validation using HTML5 features.

Lab experiment 6
Create a website using HTML: To embed an image
map in a web page. To fix the hot spots. Show all
the related information when the hot spots are
clicked

AIM:
TO CREATE A WEBSITE WITH IMAGE MAPPING AND TO SHOW
RELATED INFORMATION ABOUT
BACK GROUND THEORY:
<h1>Tag:
The <h1> tag is an HTML element used to define the most important heading on a
webpage. It represents the main topic or theme of the page content.
2.<map>Tag:
The <map> tag in HTML is used to define an image map, which allows you to create
clickable areas within an image. Each clickable area, called a hotspot, can link to a different
URL or trigger a JavaScript action. The <map> tag works in conjunction with the <area> tag,
which specifies the coordinates and behavior for each hotspot.
3.<area>Tag:
The <area> tag in HTML is used in conjunction with the <map> tag to define
clickable areas (also known as “hotspots”) within an image map. Each <area> element
represents a specific region of an image that can be clicked on, and typically, each area links
to a different destination or performs a specific action.

4.<img>Tag:
The <img> tag in HTML is used to embed images in a webpage. It allows you to
display images such as photographs, illustrations, and icons, enhancing the visual content of
your site. The <img> tag is an empty tag, meaning it doesn’t have a closing tag, and it has
several important attributes that control how the image appears and behaves.
5.<table>Tag:
The <table> tag in HTML is used to create a table on a webpage. Tables are often
used for displaying tabular data, such as lists, schedules, financial data, or any other
information that can be organized into rows and columns.
6.<tr>Tag:
The <tr> tag in HTML is used to define a table row in an HTML table. It is an
essential part of creating structured data within tables, and it is used to group a set of table
cells (<td>) or table headers (<th>) together in a horizontal line, representing one row of data
or headers

SOURCE CODE:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<div><img src="tamil nadu map.webp" alt="map not found" usemap="#feelmap" width="900"


height="900">

</div>

<div><map name="feelmap">

<area shape="poly"
coords="327,635,366,567,417,542,453,528,475,570,450,592,432,601,415,619,383,626,359,618"
title="" href="http://127.0.0.1:5500/file.html">//madurai

<area shape="poly" coords="311,657,383,683,446,677,463,626,424,606,369,621" title=""


href="https://virudhunagar.nic.in/about-district/">//virdunagar

<area shape="poly"
coords="244,305,331,281,303,303,368,331,379,383,354,401,296,374,333,395,237,329,259,366"
title="" href="https://erode.nic.in/about-district/">//erode

<area shape="poly"
coords="507,548,561,591,541,560,586,558,571,511,563,474,508,465,473,481,479,519" title=""
href="https://en.wikipedia.org/wiki/Pudukkottai">//pudukootai

<area shape="poly" coords="300,790,340,850,291,841,334,813,275,823" title=""


href="https://en.wikipedia.org/wiki/Kanyakumari">//kanya

<area shape="poly"
coords="533,180,580,162,607,181,660,159,625,144,661,205,645,221,612,212,586,214,587,252,577,
268,523,273,502,241,518,210" title=""
href="https://tiruvannamalai.nic.in/about-district/">//thiruvanamlai

<area shape="poly"
coords="303,542,345,471,425,469,455,534,410,549,372,563,359,541,320,550,315,500,450,505,385,
478" title="" href="https://dindigul.nic.in/about-district/">//dindukal
<area shape="poly"
coords="399,142,368,250,343,189,464,181,498,228,463,241,433,222,402,201,328,238,431,157,494,
245" title="" href="https://en.wikipedia.org/wiki/Krishnagiri">krisnagirii

<area shape="poly"
coords="630,293,665,306,665,331,667,358,643,381,608,364,559,360,547,336,589,327,618,322,618,
308,575,363" title="" href="https://cuddalore.nic.in">//cudddlaore

</div>

</body>

</html>

SCREEN SHOT:

Result:
embed an image map in a web page. To fix the hot spots.
Lab experiment 7

Apply style specification in HTML page using CSS

AIM:

TO CREATE A WEBPAGE IN HTML USING CSS

BACKGROUND THEORY:
External CSS
With an external style sheet, you can change the look of an entire website by changing just
one file!
Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property
SOURCE CODE:

HTML CODE:
<!DOCTYPE html><html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

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

</head>

<body>

<header>

<div class="logo">

<h1>Product Reviews Hub</h1>


</div>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Categories</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Submit a Review</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

<div class="heading">

<h1>product review</h1>

<div class="input_box">

<input type="text" placeholder="NAME" required>

<i class='bx bx-user'></i>

</div>

<div class="input_box">

<input type="password" placeholder="CUSTOMER_ID" required>

<i class='bx bxs-user-detail'></i>

</div>

<div class="remember">

<label for="remember"><input type="checkbox">remember me</label>

</div>

<div class="discribe">

<input type="text" placeholder="sugesstion to improve our products">

<label for="rating">how would you rate our product</label>

</div>

<footer>

&#169;ALL COPY RIGHTS CLAIMED || MADE WITH BOXGO.COM

</footer>
</body>

</html>

CSS CODE:
*{ border: 2px solid rgba(79, 70, 70, 0.2);

margin: 0; margin-left:500px ;

padding: 0; }

box-sizing: border-box; .heading h1{

font-family: Arial, Helvetica, sans-serif; text-align: center;

} padding: 0px;

body{ }

padding: 20px; .input_box input{

background-image: url(cart3.png); width: 415px;

background-size: cover; height: 40px;

} border-radius: 10px;

.heading{ background: transparent;

justify-content: center; position: relative;

align-items: center; padding: 20px 45px 20px;

height: 100vh; margin-bottom: 20px;

width: 425px; margin-top: 20px;

height: 400px; border-color: 2px solid rgba(237, 231, 231, 0.2);

background-color: transparent; .input_box input::placeholder{

color: aliceblue; text-align:rigth;

border-radius: 20px; position: relative;

padding:px; font-size: large;

backdrop-filter:blur(20px); font-weight: bolder;

.input_box i{ a{ color: aliceblue

position: absolute; text-decoration: none;

right: 20px; font-weight: bolder;

} }

.discribe{ .remember{

align-items: center; margin-bottom: 20px;

} }

.discribe input{ header ul{

height:80px; display: inline-block;


width: 420px; }

align-items:right; h1{

border-radius: 20px; font-size: 50px;

font-family: 'Courier New', Courier, monospace; }

font-weight: bolder; header nav ul {

font-size: large; list-style: none;

border-color:rgba(244, 235, 235, 0.2); display: flex;

background-color: transparent; }

border-color: rgb(236, 232, 232); header nav ul li {

} margin-left: 20px;

.remember label{ }

margin: 20px; footer{

margin-right:140px; height: 20px;

font-weight: bolder; }

font-family: 'Courier New', Courier, monospace;

Result:
Applied style specification in HTML page using CSS
Lab experiment 8

Develop dynamic web application using HTML,


CSS and JavaScript.
AIM:

To create dynamic web application using HTML,


CSS and JavaScript.
BACKGROUND THEORY:
Linking CSS*
You can link an external CSS file using the `<link>` tag:

<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>

Replace `”styles.css”` with the path to your CSS file.


*Linking JavaScript*
You can link an external JavaScript file using the `<script>` tag:

<head>
<script src=”script.js” type=”text/javascript”></script>
</head>

Replace `”script.js”` with the path to your JavaScript file.


*Alternative Placement for JavaScript*
You can also place the `<script>` tag at the end of the `<body>` section, just before the
closing `</body>` tag. This can improve page loading times.

<body>
<!—Your HTML content here →
<script src=”script.js” type=”text/javascript”></script>
</body>

SOURCE CODE:
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="java_script01.js"></script>
<link rel="stylesheet" href="java.css">
</head>
<body>
<div>
<label for="age">AGE:<input type="number" id="age" name="ag"></label><br>
<br>
<button onclick="ifelsecondition()">CHECK ELIGIBILITY</button><br>
<button onclick="forcondition()" id="12">TABLE</button>
<p id="neligible"></p><br>
<p id="nseligible"></p><br>
<p id="eligible"></p><br>
</div>

</body>
</html>

CSS CODE:
div{
border: solid;
border-radius: 20px;
background-repeat: no-repeat;
backdrop-filter: blur(5px);
width: 500px;
border-color:burlywood;
}
label{
margin :125px;
padding: 20px;
}
button{
padding: 7px;
margin: 10px;
text-align: center;
justify-content: center;
justify-items: center;
margin-left: 165px;
border-radius: 5px;
}
button{
margin-left: 175px;
}
input{
margin-top: 20px;
width: 155px;
}
body{
background-image: url(download.jpg);
justify-content: center;}
JAVA CODE:
function ifelsecondition()
{
let x=document.getElementById("age").value;
if (x<18)
document.getElementById("neligible").innerText="Not eligible";
else if((x>18) && (x<60))
document.getElementById("nseligible").innerText="eligible not a senior citizen";
else
document.getElementById("eligible").innerText="Eligible and senior citizen";
}
function forcondition(){
let x=document.getElementById("age").value;
for(let i=1;i<x;i++)
{
var tab=i+"*"+x+"="+i*x;
document.write(tab);
document.write("<br>");

//document.getElementById("eligible").innerHTML ="<br>";
}
}

SCREEN SHOT:
Result:
Develop dynamic web application using HTML, CSS and JavaScript

You might also like