Scribd
Upload
45 views

ADITYA WEB TECHNOLOGY FILE 6th Sem

The document discusses creating HTML forms and elements. It provides code for a simple web form with input elements like text, radio buttons, checkboxes and a submit button to demonstrate form handling in HTML.

Uploaded by

Aditya Prakash
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
45 views

ADITYA WEB TECHNOLOGY FILE 6th Sem

The document discusses creating HTML forms and elements. It provides code for a simple web form with input elements like text, radio buttons, checkboxes and a submit button to demonstrate form handling in HTML.

Uploaded by

Aditya Prakash
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

PRACTICAL-1

AIM: Introduction to HTML.


html - index.html
● It stands for Hyper Text Markup language. It provides a set of tags
suitable for making up webpages.

● It is a scripting language for web pages and output of programs can be


seen after using browser.

● It is a hypertext because it supports font style text, pictures, graphics


and animations.

● It is case sensitive.

● HTML documents are plain text file. These are created by using text
editor like Notepad.

1) HTML DOCUMENT STRUCTURE:

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text. </p>
</body>
</html>

● <!DOCTYPE html>: Declares the document type and version of


HTML.

● <html>: The root element that contains all other elements.


● <head>: Contains meta-information about the document, such as its
title and links to stylesheets.

● <title>: Specifies the title of the web page, shown in the browser's
title bar or tab.

● <body>: Contains the content of the web page, such as text, images,
and links.

2) HTML TAGS:
● <p>: Defines a paragraph.

● <b>: Defines bold text.

● <i>: Defines italic text.

● <u>: Defines underlined text.

● <strong>: Defines important text (usually rendered in bold).

● <em>: Defines emphasized text (usually rendered in italic).

● <ul>: Defines an unordered list.

● <ol>: Defines an ordered list.

● <li>: Defines a list item.


OUTPUT:
PRACTICAL-2
AIM: Run HTML Basic Tags on Web page.
html - index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Technology</title>
</head>

<body>

<p>This tag is used for paragraph writing. We can use alignment also
left/center/right. It is a container or paired tag.</p>

<h1>This is a heading h1 tag i.e. formatting tag. It shows the data or


content with varying sizes based on their header level. Headings are H1 to
H6.</h1>

<b>This tag is used for bold text</b>

</body>

</html>
OUTPUT:
PRACTICAL-3
AIM: Write a HTML code to display your CV on a web page
html - index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CV</title>
<link rel="stylesheet" href="./style.css">
</head>
<body class="body">
<div class="full">
<div class="left">
<div class="image">
<img src="PORTFOLIO.jpg" alt="User Img" style="width:150px;
height:150px;">
<br><br>
<div>Aditya Prakash</div>
</div>
<br>
<hr>
<div class="Contact">
<h2>Contact</h2>
<p><b>Email ID :</b> [email protected]</p>
<p><b>Mobile no :</b> 8825363795</p>
</div>
<hr>
<div class="Skills">
<h2>Skills</h2>
<ul>
<li><b>Programming Languages :</b> C++,python,java</li>
<li><b>Frontend :</b> HTML,CSS, JavaScript, React,
Bootstrap</li>
</ul>
</div>
<hr>
<div class="Language">
<h2>Spoken Language</h2>
<ul>
<li>English</li>
<li>Hindi</li>
</ul>
</div>
<hr>
<div class="Hobbies">
<h2>Hobbies</h2>
<ul>
<li>Exploring new places and food</li>
<li>Photography</li>
</ul>
</div>
</div>
<div class="right">
<hr>
<div class="name">
<h2>LAB 1 Web Technology</h2>
</div>
<div class="title">
<p>Web Developer</p>
</div>
<hr>
<div class="Summary">
<h2>Summary</h2>
<p>
Experienced Web Developer, professional proficient in Frontend.
Dedicated to innovation, problem-solving, and delivering high-impact results.
Strong communicator with a proven track record of success.
</p>
</div>
<hr>
<div class="Education">
<h2>Education</h2>
<table class="table">
<tr>
<th>Institution</th>
<th>Passing Year</th>
<th>Grades</th>
</tr>
<tr>
<td>DAV PUBLIC SCHOOL</td>
<td>2021</td>
<td>80.00%</td>
</tr>
<tr>
<td>Galgotias University</td>
<td>2025</td>
<td>80.1%</td>
</tr>
</table>
</div>
<hr>
<div class="project">
<ul>
<li>
<h2>Portfolio Website</h2>
<strong><p>It is a full responsive Personal Portfolio website
contains all information about me.</p></strong>
</li>
<li>
<h2>Usability Website Clone</h2>
<strong><p>Used HTML, CSS, JavaScript to make responsive
website</p></strong>
</li>
</ul>
</div>
<hr>
<hr>
</div>
</div>
</body>
</html>

Style.css
.body{
background-color: rgb(255, 206, 150);
}
.full{
background-color: rgb(253, 244, 234);
padding: 20px;
border-radius: 6px;
}
.image{
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
overflow: hidden;
border-radius: 50%;

}
.image img {
width: 100%;
height: auto;
border-radius: 50%;
}
.table,tr,td,th{
text-align: center;
border: 1px solid;
}
OUTPUT:
PRACTICAL-4
AIM: Table & Lists:-Develop and demonstrate a HTML document that
illustrates
a) Unordered List (UL)
b) Ordered List (OL) and Definition list (DL)
c) Table Alignment (Cell Spacing, Cell Padding, Height, Width, Border,
Rowspan , colspan)
d) Setting Different Table Attributes(Color, Image)

html - index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Lists and Tables</title>
<style>
/* Styles for table */
table {
border-collapse: collapse;
width: 100%;
border: 2px solid #000;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
/* Style for unordered and ordered lists */
.list {
margin-left: 20px;
}
</style>
</head>
<body>
<h1>HTML Lists and Tables</h1>
<!-- Unordered List (UL) -->
<h2>Unordered List (UL)</h2>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<!-- Ordered List (OL) -->


<h2>Ordered List (OL)</h2>
<ol class="list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

<!-- Definition List (DL) -->


<h2>Definition List (DL)</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
</dl>

<!-- Table -->


<h2>Table</h2>
<table cellspacing="10" cellpadding="5">
<tr>
<th colspan="2">Table Header</th>
</tr>
<tr>
<td rowspan="2">Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 2</td>
</tr>
<tr>
<td colspan="2">Row 3, Cell 1 and Cell 2</td>
</tr>
</table>

<!-- Table with Different Attributes -->


<h2>Table with Different Attributes</h2>
<table border="1" cellspacing="10" cellpadding="5">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td style="background-color: #ffeeba;">Cell 1</td>
<td style="background-image:
url('https://via.placeholder.com/50');">Cell 2</td>
</tr>
</table>
</body>
</html>
OUTPUT:
PRACTICAL-5
AIM: Design a web page using CSS (Cascading Style Sheets) which
includes the following:
a) Use different font, styles:
b) Set a background image for both the page and single elements on the
page.
c) Control the repetition of the image with the background-repeat property.
d) Define styles for links as
i. A:link
ii. A:visited
iii. A:active
iv. A:hover

html - index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Welcome to My Web Page</h1>
<p>This is a sample web page with different font styles and background
images.</p>
<a href="#">Visit our website</a>
</div>
</body>
</html>

Styles.css

body {
font-family: 'Roboto', sans-serif;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: #333;
}

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
font-weight: bold;
text-align: center;
color: #333;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

p{
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: justify;
}

a{
display: block;
width: 150px;
margin: 20px auto;
padding: 10px;
text-align: center;
color: #fff;
background-color: #007bff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}

a:hover {
background-color: #0056b3;
}
OUTPUT:
PRACTICAL-6
AIM: Create web page or form using Form Elements
html - index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Web Form</title>
</head>
<body>

<form action="#" method="post">


<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"
required></textarea><br>

<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br>

<label for="birthdate">Date of Birth:</label><br>


<input type="date" id="birthdate" name="birthdate" required><br>

<label for="favorite-color">Favorite Color:</label><br>


<input type="color" id="favorite-color" name="favorite-color"><br>

<label for="file">Upload File:</label><br>


<input type="file" id="file" name="file"><br>

<label for="terms">
<input type="checkbox" id="terms" name="terms" required>
I accept the terms and conditions
</label><br>

<input type="submit" value="Submit">


</form>

</body>
</html>
OUTPUT:
PRACTICAL-7
AIM: Write an HTML code to implement the concept of frames with 2
frames: 1 for hyperlinks and another for opening the content to that link.
html - index.html
<!DOCTYPE html>
<html>
<head>
<title>Frames Example with Iframes</title>
<style>
body, html {
height: 100%;
margin: 0;
}
.container {
display: flex;
height: 100%;
}
.menu {
width: 30%;
background-color: #f0f0f0;
padding: 10px;
box-sizing: border-box;
}
.content {
width: 70%;
border-left: 2px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
.menu a {
display: block;
padding: 8px;
margin: 5px 0;
text-decoration: none;
color: #000;
background-color: #ddd;
}
.menu a:hover {
background-color: #bbb;
}
</style>
</head>
<body>

<div class="container">
<div class="menu">
<a href="#page1" onclick="loadContent('Page 1', 'This is the content for
page 1.')">Page 1</a>
<a href="#page2" onclick="loadContent('Page 2', 'This is the content for
page 2.')">Page 2</a>
<a href="#page3" onclick="loadContent('Page 3', 'This is the content for
page 3.')">Page 3</a>
</div>
<div class="content" id="content">
<h1>Welcome</h1>
<p>Select a link from the menu to view content here.</p>
</div>
</div>

<script>
function loadContent(title, content) {
document.getElementById('content').innerHTML = '<h1>' + title +
'</h1><p>' + content + '</p>';
}
</script>

</body>
</html>
OUTPUT:
PRACTICAL-8
AIM: Write a JavaScript to design a simple calculator to perform the
following operations: sum, product, difference and quotient.

html - index.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
}
.calculator {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.calculator input, .calculator select, .calculator button {
width: 100%;
padding: 10px;
margin: 5px 0;
box-sizing: border-box;
}
</style>
</head>
<body>

<div class="calculator">
<h2>Simple Calculator</h2>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<select id="operation">
<option value="add">Addition</option>
<option value="subtract">Subtraction</option>
<option value="multiply">Multiplication</option>
<option value="divide">Division</option>
</select>
<button onclick="calculate()">Calculate</button>
<h3 id="result">Result: </h3>
</div>

<script>
function calculate() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var operation = document.getElementById('operation').value;
var result;

if (isNaN(num1) || isNaN(num2)) {
result = 'Please enter valid numbers';
} else {
switch (operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
if (num2 !== 0) {
result = num1 / num2;
} else {
result = 'Cannot divide by zero';
}
break;
default:
result = 'Invalid operation';
}
}

document.getElementById('result').textContent = 'Result: ' + result;


}
</script>

</body>
</html>
OUTPUT:

You might also like