Scribd
Upload
41 views

aman web tech

Uploaded by

virajmittal23
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
41 views

aman web tech

Uploaded by

virajmittal23
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

PROGRAM – 1

Objective - Write HTML, CSS, Java scripts code to design your


Resume.
Code:-
resume.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aman Rathore - Resume</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1> Aman Rathore </h1>
<p>Email: [email protected] | Phone: 7037572038</p>
<p>Address: VILL Nagla sharki , Budaun</p>
<p>LinkedIn: <a href="https://www.linkedin.com/in/Aman Rathore"
target="_blank">Aman Rathore</a></p>
</header>
<section>
<h2>Education</h2>
<p>Currently Pursuing B.Tech in CSE (AI-ML)<br>Ajay Kumar Garg Engineering
College</p>
<p>Diploma in Computer Science and Engineering | Government Polytechnic Roorkee
Bharei , Barelliy | Score: 75%</p>
<p>10th Standard | mharishi Vidhya mandir | Score: 85%</p>
</section>
<section>
<h2>Skills</h2>
<p>Problem Solving, Data Structures and Algorithms, C, HTML, CSS, Python, Machine
Learning</p>
</section>
<section>
<h2>Projects</h2>
<h3>Machine Learning Projects</h3>
<ul>
<li>Movie Recommendation System</li>
<li>chess</li>

1
</ul>
<h3>Front-end Projects</h3>
<ul>
<li>quiz</li>
<li>flappy word using python</li>
<li>snake water gun</li>
</ul>
<h3>SQL Projects</h3>
<ul>
<li>Library Management System</li>
</ul>
</section>
<section>
<h2>Hobbies</h2>
<p>Playing volleyball, Travelling, Listening to Music</p>
</section>
</body>
</html>

style.css:-
body {
font-family: 'Arial', sans-serif;
margin: 20px;
line-height: 1.6;
background-color: white;
}
header {
color: black;
padding: 10px;
text-align: center;
}
header h1 {
margin: 0;
}
section {
margin: 20px 0;
}
h2 {
color: #333;
}
ul {
list-style-type: none;

2
padding: 0;
}
li {
margin-bottom: 8px;
}
a{
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

Output:-

3
PROGRAM – 2

Objective - Write HTML/Java scripts to display your CV in


navigator, your Institute website, Department Website and
Tutorial website for specific subject.
Code:-
resume.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aman Rathore - Resume</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1> Aman Rathore </h1>
<p>Email: [email protected] | Phone: 7037572038</p>
<p>Address: VILL Nagla sharki , Budaun</p>
<p>LinkedIn: <a href="https://www.linkedin.com/in/Aman Rathore"
target="_blank">Aman Rathore</a></p>
</header>
<section>
<h2>Education</h2>
<p>Currently Pursuing B.Tech in CSE (AI-ML)<br>Ajay Kumar Garg Engineering
College</p>
<p>Diploma in Computer Science and Engineering | Government Polytechnic Roorkee
Bharei , Barelliy | Score: 75%</p>
<p>10th Standard | mharishi Vidhya mandir | Score: 85%</p>
</section>
<section>
<h2>Skills</h2>
<p>Problem Solving, Data Structures and Algorithms, C, HTML, CSS, Python, Machine
Learning</p>
</section>

4
<section>
<h2>Projects</h2>
<h3>Machine Learning Projects</h3>
<ul>
<li>Movie Recommendation System</li>
<li>chess</li>

</ul>
<h3>Front-end Projects</h3>
<ul>
<li>quiz</li>
<li>flappy word using python</li>
<li>snake water gun</li>
</ul>
<h3>SQL Projects</h3>
<ul>
<li>Library Management System</li>
</ul>
</section>
<section>
<h2>Hobbies</h2>
<p>Playing volleyball, Travelling, Listening to Music</p>
</section>
</body>
</html>

style.css:-
body {
font-family: 'Arial', sans-serif;
margin: 20px;
line-height: 1.6;
background-color: white;
}
header {
color: black;
padding: 10px;
text-align: center;
}
header h1 {
margin: 0;
}
section {
margin: 20px 0;

5
}
h2 {
color: #333;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 8px;
}
a{
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

website.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Useful Links</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
margin: 20px;
}
h1 {
color: #333;
text-align: center;
}
.link-container {
margin-top: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
.link {

6
margin-bottom: 15px;
font-size: 18px;
color: #007bff;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.link:hover {
color: #0056b3;
}
</style>
</head>
<body>
<h1>Useful Links</h1>
<div class="link-container">
<a class="link" href="https://www.akgec.ac.in/" target="_blank">AKGEC Institute
Website</a>
<a class="link" href="https://www.akgec.ac.in/departments/computer-science-and-
engineering/" target="_blank">CSE Department Website</a>
<a class="link" href="file:///C:/Users/sarth/OneDrive/Desktop/cp/resume.html"
target="_blank">My CV</a>
<a class="link" href="https://www.youtube.com/channel/UCxs6M6Um-
IYd9eD3XUHRlkg/playlists" target="_blank">Tutorial Website</a>
</div>
</body>
</html>

Output:-

7
PROGRAM – 3
Objective - Write HTML, CSS, Java scripts code to design your
blogging webpage.
Code:-
blog.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MY BLOG</title>
<style>
header {
text-align: center;
font-family: "Times New Roman", sans-serif;
}
body {
font-family: "Times New Roman", Times, serif;
}
nav {
text-align: center;

8
background-color: gray;
padding: 10px;
margin-bottom: 20px;
}
nav a {
margin: 0 10px;
text-decoration: none;
color: white;
padding: 5px 10px;
border-radius: 5px;
transition: background-color 0.3s;
}
nav a:hover {
background-color: darkgray;
}
h1, h2, h3 {
color: #333;
margin-top: 0;
}
p{
color: black;
}
body{
background-image: url('back.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
overflow: hidden;
}
</style>
</head>
<body>
<header>
<h1>Web Development Fundamentals for Beginners</h1>
<nav>
<a href="https://html.com/" target="_blank">HTML</a>
<a href="https://www.w3schools.com/css/" target="_blank">CSS</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
target="_blank">JavaScript</a>
</nav>
</header>
<h3>What is Web Development?</h3>

9
<P>Web development is the process of creating websites or web applications. It involves
designing, building, and maintaining websites using programming languages such as HTML,
CSS, and JavaScript, along with frameworks and tools to enhance functionality and user
experience. Web development encompasses both front-end development (client-side) for
designing the visible parts of a website and back-end development (server-side) for managing
data and handling requests from users.</P>
<h3>What is meant by the term Front end?</h3>
<p>Front-end development creates the visible part of websites or apps. It involves coding with
HTML, CSS, and JavaScript to make them look good and work smoothly for users.</p>
<h3>HTML</h3>
<p>HTML, or Hypertext Markup Language, is the standard markup language used to create
web pages. It provides the structure and content of a web page by using a system of tags to
define various elements such as headings, paragraphs, links, and images. HTML is the backbone
of web development and is essential for creating static and dynamic websites.</p>
<h3>CSS</h3>
<p>CSS, or Cascading Style Sheets, is a language used to style and format HTML elements
on web pages. It allows developers to control the visual presentation of content, including layout,
colors, fonts, and spacing. By separating the presentation from the content, CSS enables
consistent styling across multiple pages and enhances the overall user experience. In essence,
CSS serves as the design language of the web, making websites visually appealing and user-
friendly.</p>
<h3>JavaScript</h3>
<p>JavaScript is a versatile programming language primarily used for web development. It
enables interactive features on websites, such as dynamic content, user interaction, and
animations. With JavaScript, developers can manipulate webpage elements, handle events, and
communicate with servers, enhancing the overall user experience. Additionally, JavaScript is
supported by all major web browsers, making it a widely adopted language for building modern
web applications.</p>
</body>
</html>

Output:-

10
PROGRAM – 4
Objective - Write HTML, CSS, Java scripts code to design a student
registration Form and save the entries in Excel File.
Code:-
SRF.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

11
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Information Form</title>
<link rel="stylesheet" href="stylesSRF.css">
</head>
<body>
<div class="container">
<h2>Student Information Form</h2>
<form id="studentForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="rollNo">Roll No:</label>
<input type="text" id="rollNo" name="rollNo" required><br>
<label for="branch">Branch:</label>
<input type="text" id="branch" name="branch" required><br>
<label for="section">Section:</label>
<input type="text" id="section" name="section" required><br>
<label for="year">Year:</label>
<input type="text" id="year" name="year" required><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea><br>
<button type="button" onclick="submitForm()">Submit</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></
script>
<script src="script.js"></script>
</body>
</html>

stylesSRF.css:-
.container {
width: 50%;
margin: 0 auto;
text-align: center;
}
h2 {
font-size: 35px;
margin-bottom: 20px;

12
}
.line {
border-top: 1px solid #ccc;
margin-bottom: 20px;
}
form {
margin-top: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
input, textarea {
margin-bottom: 20px;
padding: 10px;
width: calc(100% - 22px);
border: 1px solid #ccc;
border-radius: 5px;
transition: border-color 0.3s ease;
}
input:focus, textarea:focus {
border-color: #007bff;
outline: none;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}

script.js:-
function submitForm() {
var name = document.getElementById("name").value;
var rollNo = document.getElementById("rollNo").value;
var branch = document.getElementById("branch").value;
var section = document.getElementById("section").value;

13
var year = document.getElementById("year").value;
var dob = document.getElementById("dob").value;
var email = document.getElementById("email").value;
var address = document.getElementById("address").value;
var formData = [
["Name", "Roll No", "Branch", "Section", "Year", "Date of Birth", "Email", "Address"],
[name, rollNo, branch, section, year, dob, email, address]
];
var wb = XLSX.utils.book_new();
var ws = XLSX.utils.aoa_to_sheet(formData);
XLSX.utils.book_append_sheet(wb, ws, "Student Information");
var wbout = XLSX.write(wb, {bookType:'xlsx', type:'array'});
saveAs(new Blob([wbout],{type:"application/octet-stream"}), 'student_information.xlsx');
alert("Form submitted successfully!");
}
Output:-

14
PROGRAM – 5
Objective - Write a Java applet to display the Application Program
screen i.e. calculator and other.
Code:-
SimpleCalculator.java:-
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class SimpleCalculator extends JFrame implements ActionListener {
private JTextField display;
private String currentOp = "";
private double result = 0;
private boolean startNewNumber = true;
public SimpleCalculator() {
setTitle("Simple Calculator");

15
setSize(300, 400);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLayout(new BorderLayout());
display = new JTextField("0");
display.setFont(new Font("Arial", Font.BOLD, 30));
display.setEditable(false);
display.setHorizontalAlignment(JTextField.RIGHT);
display.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));
add(display, BorderLayout.NORTH);
JPanel buttonPanel = new JPanel();
buttonPanel.setLayout(new GridLayout(4, 4,10,10));
String[] buttons = {
"7", "8", "9", "/",
"4", "5", "6", "*",
"1", "2", "3", "-",
"0", ".", "=", "+"
};
for (String buttonText : buttons) {
JButton button = new JButton(buttonText);
button.addActionListener(this);
buttonPanel.add(button);
}
add(buttonPanel, BorderLayout.CENTER);
}
public void actionPerformed(ActionEvent e) {
String command = e.getActionCommand();
if ("0123456789.".contains(command)) {
if (startNewNumber) {
display.setText(command);
startNewNumber = false;
} else {
display.setText(display.getText() + command);
}
} else if ("/-*+= ".contains(command)) {
if (!startNewNumber) {
if (currentOp.isEmpty()) {
result = Double.parseDouble(display.getText());
} else {
result=performOperation(result, currentOp, Double.parseDouble(display.getText()));
display.setText(String.valueOf(result));
}
currentOp = command;
startNewNumber = true;

16
} else {
currentOp = command;
}
if (command.equals("=")) {
currentOp = "";
}}}
private double performOperation(double x, String op, double y) {
switch (op) {
case "+":
return x + y;
case "-":
return x - y;
case "*":
return x * y;
case "/":
if (y == 0) {
JOptionPane.showMessageDialog(this, "Cannot divide by zero!", "Error",
JOptionPane.ERROR_MESSAGE);
return 0;
}
return x / y;
default:
return 0;
}}
public static void main(String[] args) {
SimpleCalculator calculator = new SimpleCalculator();
calculator.setVisible(true);
}
}

Output:-

17
12 + 3 =

PROGRAM – 6
Objective - Writing program in XML for creation of DTD, which
specifies set of rules. Create a style sheet in CSS/ XSL & display
the document in internet explorer.

18
Code:-
Books.xml:-
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Rules.css"?>

<books>
<heading>Welcome To GeeksforGeeks</heading>
<book>
<title>Web Programming</title>
<author>Author - Chris Bates</author>
<publisher>Publisher - Wiley</publisher>
<edition>Edition - 3</edition>
<price>Price - 300</price>
</book>
<book>
<title>Internet World Wide Web</title>
<author>Author - Ditel</author>
<publisher>Publisher - Pearson</publisher>
<edition>Edition - 3</edition>
<price>Price - 400</price>
</book>
<book>
<title>Computer Networks</title>
<author>Author - Forouzan</author>
<publisher>Publisher - McGraw Hill</publisher>
<edition>Edition - 5</edition>
<price>Price - 700</price>
</book>
<book>
<title>DBMS Concepts</title>
<author>Author - Navathe</author>
<publisher>Publisher - Oxford</publisher>
<edition>Edition - 5</edition>
<price>Price - 600</price>
</book>
<book>
<title>Linux Programming</title>
<author>Author - Subhitab Das</author>
<publisher>Publisher - Oxford</publisher>
<edition>Edition - 8</edition>
<price>Price - 300</price>
</book>
</books>

19
Rules.css:-
books {
color: black;
background-color : white;
width: 100%;
}
heading {
color: green;
font-size : 40px;
text-align: center;
}
heading, title, author, publisher, edition, price {
display : block;
}
title {
font-size : 25px;
font-weight : bold;
}
Output:-

20

You might also like