Theory without output HTML CSS
Uploaded by
ayushsatvaseTheory without output HTML CSS
Uploaded by
ayushsatvase VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
Practical No. 1
Aim: Introduction to HTML & working with HTML tags
Theory:-HTML stands forHyper Text Markup Language.
● TML
H is the standard markup language for creating Web pages.
● HTML describes the structure of a Web page.
● HTML elements tell the browser how to display the content.
● HTML elements label/tags pieces of content such as "heading", "paragraph", "link", etc.
Some Useful Tags:-
<!--...--> Defines a comment
<a> Defines a hyperlink
<b> Defines bold text
<body> Defines the document's body
<br> Defines a single line break
<button> Defines a clickable button
<code> Defines a piece of computer code
<div> Defines a section in a document
<form> Defines an HTML form for user input
<h1> to <h6> Defines HTML headings
<head> Contains metadata/information for the document
<header> Defines a header for a document or section
<hr> Defines a thematic change in the content
<html> Defines the root of an HTML document
<img> Defines an image
<marquee> Defines for creating scrollable text or images
<table> Defines a table
<title> Defines a title for the document
Roll No.- 12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
HTML Code:-
<!
<!DOCTYPE
html
>
<
html
lang
="
en
">
<
head
>
<
meta
charset
="
UTF-8
">
<
meta
name
="
viewport
"
content
="
width=device-width,
initial-scale=1.0
">
<
title
>first html code </
title
>
</
head
>
<
body
>
<
h1
>Ayush Satwase</
h1
>
<
h3
>BE Computer Scinece Engineering Second Year
</
h3
>
<
p
>
"Hi, I'm Ayush! I'm pursuing a BE in Computer
Science Engineering,<
br
> and
addicted to coding. Always eager to learn and build cool stuff!"</
p
>
</
body
>
</
html
>
Roll No.- 12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
Output:-
Results:-Thus I have Studied HTML & Used various HTML tags.
Roll No.- 12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
Practical No. 2
Aim: Introduction to CSS-Cascading Style Sheets& working with CSS commands
Theory:-CSS stands for Cascading Style Sheets.
● CSS describes how HTML elements should be displayed on screen, paper, or in other
edia.
m
● CSS saves a lot of work. It can control the layout of multiple web pages all at once.
● External stylesheets are stored in CSS files.
● CSS is the language we use to style an HTML document.
● CSS describes how HTML elements should be displayed.
CSS Syntax:-
● A CSS rule consists of a selectorand a d
eclarationblock:
T
● he selector points to the HTML element to style (h1).
● The declaration block (in curly braces) contains one or more declarations separated by
semicolons.
● Each declaration includes a CSS property name and a value, separated by a colon.
Example:-save asmystyle.css
<style >
body
{
background-color :
orange ;
font-family:
verdana
}
h1
{
color:
blue;
font-size :
12px
}
p
{
font-size
:
32px
;
color:
red
;
text-align:
center
;}
<
/style >
Linking CSS file with HTML:-
<html
>
<
link
rel="stylesheet"
href ="mystyle.css">
<
body
>
<
h1
>
My First CSS Example
<
/
h1 >
<
p
>
T
his is a paragraph. <
/
p>
<
/body
>
<
/html
>
Roll No.-12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
Code->
<!
DOCTYPE
html
<
html
lang
="
en
">
<
head
>
<
meta
charset
="
UTF-8
">
<
meta
name
="
viewport
"
content
="
width=device-width,
initial-scale=1.0
">
<
title
>Introduction to CSS</
title
>
<
link
rel
="
stylesheet
"
href
="
mystyle.css
">
</
head
>
<
body
>
<
header
>
<
h1
>Practical No 2 </
h1
>
</
header
>
<
nav
>
</
nav
>
hey this is the basic html css code which implements basic tags and selection
properties !!
<
section
class
="
intro
">
<
h2
>hey my name is ayush</
h2
>
<
p
>In this practical i have studied about
css selector and their properties</
p
>
</
section
>
<
section
class
="
why
">
<
h3
>WHY CSS ?</
h3
>
<
p
>css is stylesheet that style our html code
whith their properties</
p
>
<
button
>Mat lagao hath :></
button
>
</
section
>
<
section
class
="
example
">
<
h3
>Basic CSS Example</
h3
>
<
p
>This section demonstrates various CSS properties
applied to HTML elements.</
p
>
<
button
>Dont Try Buddy</
button
>
</
section
>
<
aside
>
<
p
>CSS makes web pages more attractive and
user-friendly!</
p
>
Roll No.-12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
</
aside
>
<
footer
>
<
p
>&
copy
; C skill Lap 2 Practical No 2</
p
>
</
footer
>
</
body
>
</
html
>
CSS CODE :
*
{
margin:
0
;
padding:
0;
box-sizing:
border-box
;
font-family:
Arial
,
sans-serif
;
}
body
{
background-color: #f4f4f4;
color: #333;
line-height:
1.6
;
padding:
20
px
;
}
header
{
background-color: #3498db;
color:
white
;
padding:
15
px
;
text-align:
center
;
}
nav
ul
{
list-style:
none
;
display:
flex
;
justify-content:
center
;
background-color: #2c3e50;
padding:
10
px
;
}
Roll No.-12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
nav
ul
li
{
margin:
0
15
px
;
}
nav
ul
li
a
{
color:
white
;
text-decoration:
none
;
font-weight:
bold
;
}
.
intro
, .
why
, .
example
{
background:
white
;
padding:
20
px
;
margin:
20
px
0
;
border-radius:
5
px
;
box-shadow:
2px
2px
10
px
rgba
(
0
,
0
,
0
,
0.1
);
}
button
{
background: #e74c3c;
color:
white
;
padding:
10
px
15
px
;
border:
none
;
cursor:
pointer
;
border-radius:
5
px
;
transition:
0.3
s
;
}
button
:
hover
{
background: #c0392b;
}
aside
{
background: #f39c12;
color:
white
;
padding:
10
px
;
text-align:
center
;
margin:
20
px
0
;
font-weight:
bold
;
Roll No.-12 Ayush . J . Satwase
HVPM College of Engineering & Technology
Department of Computer Science & Engineering
C Skill Lab 2
Practical No.3
Aim: Design web pages for your School/College/Store/Business containing at least 2 Pages
using HTML & CSS tags.
Theory:- Description about href & list tags & use it in your code.
Software used :- Notepad editor, Web Browser.
Program Code:- Paste-
● HTML Code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Government Secondary And Higher Secondary Ashram School Doma</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<aside class="sidebar">
<nav>
<ul>
<li><a href="#" onclick="showSection('home')">Home</a></li>
<li><a href="#" onclick="showSection('faculty')">Faculty</a></li>
<li><a href="#" onclick="showSection('info')">Information</a></li>
<li><a href="#" onclick="showSection('admission')">Admission</a></li>
</ul>
</nav>
</aside>
<main class="main-content">
<header class="main-header">
<h1>Government Secondary And Higher Secondary Ashram School Doma</h1>
</header>
<section id="home" class="content-section">
<div class="info-text">
<h3>About School</h3>
<p>Government Secondary and Higher Secondary Ashram School, Doma is located in the Melghat
region of Amravati
district. It is a government institution managed by the Tribal Development Department.
The school offers education from Grades 1 to 12, with streams in both Arts and Science. It was
established
Roll No:- 12 Name : Ayush . J . Satwase
HVPM College of Engineering & Technology
Department of Computer Science & Engineering
C Skill Lab 2
to provide quality education to Adivasi (tribal) students, addressing the educational gaps in the
region.
The school also provides hostel facilities for both boys and girls.</p>
</div>
<div class="gallery-section">
<h3>School Gallery</h3>
<div class="gallery">
<img src="G 1.jpg">
<img src="G 2.jpg">
<img src="G 3.jpg">
<img src="G 4.jpg">
<img src="G 5.jpg">
</div>
</div>
</section>
<section id="faculty" class="content-section" style="display: none;">
<h2>Our Staffs</h2>
<div class="faculty-list">
<div class="faculty-card">
<h4>Mr. S.V. Chaudhry</h4>
<p>Principal</p>
</div>
<div class="faculty-card">
<h4>Mr. Sunil Bhilavekar</h4>
<p>Chemistry Teacher</p>
</div>
<div class="faculty-card">
<h4>Mr. P.B. Patil</h4>
<p>English Teacher</p>
</div>
<div class="faculty-card">
<h4>Mr. Rathod Sir</h4>
<p>Mathematics Teacher</p>
</div>
<div class="faculty-card">
<h4>Mr. Anjali Raut Mam</h4>
<p>Physics Teacher</p>
</div>
<div class="faculty-card">
<h4>Mr. Akhare Mam</h4>
<p>Biology Teacher</p>
</div>
<div class="faculty-card">
<h4>Mr. Wadhve Sir</h4>
Roll No:- 12 Name : Ayush . J . Satwase
HVPM College of Engineering & Technology
Department of Computer Science & Engineering
C Skill Lab 2
<p>Marathi Teacher</p>
</div>
</div>
</section>
<section id="info" class="content-section" style="display: none;">
<h2>College Information</h2>
<p><strong>Address:</strong> AT POST Doma , Chikhaldara ,
Amravati, Maharashtra
PIN Code: 444807 (INDIA)</p>
<p><strong>Email:</strong> ashramdoma@gmail.com</p>
<p><strong>Phone:</strong> 27070610202</p>
<h3>Campus Facilities</h3>
<ul class="facilities">
<li>Wi-Fi Enabled Campus</li>
<li>Digital Classrooms</li>
<li>Indoor & Outdoor Stadium</li>
<li>Computer Labs</li>
<li>Boys & Girls Hostel</li>
<li>Free Educaion For All Students</li>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11336.641874096727!2d7
7.56079473661953!3d21.546602011395898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x
3bd65d5078e3263f%3A0x135bf3454271bd05!2sGovt%20Ashram%20School%20Doma!5e0!3m2!1sen!2
sin!4v1745254781705!5m2!1sen!2sin"
width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</ul>
</section>
<section id="admission" class="content-section" style="display: none;">
<h2>Admission Form</h2>
<form class="admission-form">
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<label for="grade">Grade Applying For:</label>
<select id="grade" name="grade" required>
<option value="">Select</option>
<option value="1">1st Grade</option>
<option value="2">2nd Grade</option>
<option value="3">3rd Grade</option>
Roll No:- 12 Name : Ayush . J . Satwase
HVPM College of Engineering & Technology
Department of Computer Science & Engineering
C Skill Lab 2
<option value="4">4th Grade</option>
<option value="5">5th Grade</option>
<option value="6">6th Grade</option>
<option value="7">7th Grade</option>
<option value="8">8th Grade</option>
<option value="9">9th Grade</option>
<option value="10">10th Grade</option>
<option value="11">11th Grade</option>
<option value="12">12th Grade</option>
</select>
<label for="message">Additional Information:</label>
<textarea id="message" name="message" rows="4"></textarea>
<button type="submit">Submit Application</button>
</form>
</section>
<footer>
<p>Dream.Acheive.Succeed</p>
</footer>
</main>
</div>
<script>
function showSection(id) {
const sections = document.querySelectorAll('.content-section');
sections.forEach(section => {
section.style.display = (section.id === id) ? 'block' : 'none';
});
}
</script>
</body>
</html>
● CSS Code-
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background-color: #f5f7fa;
color: #333;
}
.wrapper {
display: flex;
min-height: 100vh;
}
Roll No:- 12 Name : Ayush . J . Satwase
HVPM College of Engineering & Technology
Department of Computer Science & Engineering
C Skill Lab 2
.sidebar {
width: 220px;
background-color: #2c3e50;
color: white;
padding: 20px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}
.sidebar h2 {
text-align: center;
margin-bottom: 30px;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar li {
margin: 20px 0;
}
.sidebar a {
color: white;
text-decoration: none;
font-weight: bold;
}
.sidebar a:hover {
text-decoration: underline;
}
.main-content {
flex-grow: 1;
padding: 30px;
}
.main-header {
background-color: #fe7743;
color: white;
padding: 20px;
border-radius: 5px;
margin-bottom: 20px;
text-align: center;
}
.content-section {
background-color: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.dual-gallery {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin-top: 30px;
Roll No:- 12 Name : Ayush . J . Satwase
HVPM College of Engineering & Technology
Department of Computer Science & Engineering
C Skill Lab 2
}
.gallery {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.gallery img {
width: 200px;
height: 130px;
object-fit: cover;
border-radius: 5px;
border: 1px solid #ccc;
}
#home {
background: url('Background\ Image.jpg') no-repeat center center;
background-size: cover;
color: white;
position: relative;
z-index: 1;
}
#home::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: -1;
border-radius: 8px;
}
#home .info-text,
#home .gallery-section {
position: relative;
z-index: 2;
}
.faculty-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.faculty-card {
background-color: #f6e9ff;
padding: 15px;
border-radius: 5px;
flex: 1 1 200px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.facilities {
padding-left: 20px;
list-style-type: square;
}
Roll No:- 12 Name : Ayush . J . Satwase
HVPM College of Engineering & Technology
Department of Computer Science & Engineering
C Skill Lab 2
footer {
text-align: center;
margin-top: 30px;
padding: 15px;
background-color: #273F4F;
color: white;
border-radius: 5px;
}
.admission-form {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}
.admission-form label {
font-weight: bold;
}
.admission-form input,
.admission-form select,
.admission-form textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: 'Segoe UI', sans-serif;
font-size: 14px;
}
.admission-form button {
padding: 12px;
background-color: #f5c712;
color: white;
border: none;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}
.admission-form button:hover {
background-color: #f5c712;
}
Roll No:- 12 Name : Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
Practical No. 4
Aim: Create your class Timetable/Mark sheet Table/Daily Diet Table using table tag.(any one)
Software used :-
Theory:- Description about various table tag of HTML(table, tr, td, th etc.)with syntax.
Program Code:-Code for Creating class timetable using various table tag.
● HTML Code-
!
< DOCTYPE
html
>
<
html
lang
="
en
">
<
head
>
<
meta
charset
="
UTF-8
">
<
meta
name
="
viewport
"
content
="
width=device-width,
initial-scale=1.0
">
<
title
>Workout Schedule</
title
>
<
link
rel
="
stylesheet
"
href
="
mystyle.css
">
<
header
>
<
h1
>Weekly Workout Schedule Body Banayege
Ab </
h1
>
</
header
>
<
section
class
="
table-container
">
<
table
>
<
thead
>
<
tr
>
<
th
>Day</
th
>
<
th
>Workout Type</
th
>
<
th
>Duration</
th
>
<
th
>Focus Area</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
>
<
td
>Monday</
td
>
<
td
>Resistance Sand Flyes,
Roll No.-12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
umbell Chest Press,
D
Incline Push-Up,
Alternating Plank Row</
td
>
<
td
>45 min</
td
>
<
td
>Chest</
td
>
</
tr
>
<
tr
>
<
td
>Tuesday</
td
>
<
td
>Squat Jumps,
Single Leg Hip Thrust,
Clamshells,
Romanian Deadlift</
td
>
<
td
>60 min</
td
>
<
td
>Legs</
td
>
</
tr
>
<
tr
>
<
td
>Wednesday</
td
>
<
td
>Box Uumos,
Pulsing Squats,
Skj Jumps,
Toe Taps</
td
>
<
td
>30 min</
td
>
<
td
>Cardio</
td
>
</
tr
>
<
tr
>
<
td
>Thursday</
td
>
<
td
>Deadlift,
Dumbell Shrugs,
Opposite Arm/Leg Rases,
Resistance eand Face Pulls</
td
>
<
td
>40 min</
td
>
<
td
>Back</
td
>
</
tr
>
<
tr
>
<
td
>Friday</
td
>
Roll No.-12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
<
td
>Standing cblicue twists,
Suitcase Crunches,
Plank,
Eicyc!e Crunches</
td
>
<
td
>50 min</
td
>
<
td
>Abs</
td
>
</
tr
>
<
tr
>
<
td
>Saturday</
td
>
<
td
>Tricep Kickbacks,
Hammer Curls,
Overhead Circles,
Lateral Raises</
td
>
<
td
>60 min</
td
>
<
td
>Arms</
td
>
</
tr
>
<
tr
>
<
td
>Sunday</
td
>
<
td
>Aaj kuch nhi thak gya hu rest
chahiye</
td
>
<td
>koi limit nhi </
td
>
<
td
>Recovery</
td
>
</
tr
>
</
tbody
>
</
table
>
</
section
>
/
< body
>
</
html
>
Roll No.-12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
C
● SS Code-
*
{
margin:
0
;
padding:
0
;
box-sizing:
border-box
;
font-family:
Arial
,
sans-serif
;
}
body
{
background-color: #f4f4f4;
color: #333;
padding:
20
px
;
text-align:
center
;
}
header
{
background-color: #3498db;
color:
white
;
padding:
15
px
;
font-size:
24
px
;
}
.
table-container
{
margin:
20
px
auto
;
width:
80
%
;
overflow-x:
auto
;
}
table
{
width:
100
%
;
border-collapse:
collapse
;
background:
white
;
box-shadow:
2
px
2
px
10
px
rgba
(
0
,
0
,
0
,
0.1
);
border-radius:
5
px
;
}
Roll No.-12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
thead
{
background-color: #2c3e50;
color:
white
;
}
th
,
td
{
padding:
15
px
;
border:
1
px
solid
#ddd;
text-align:
center
;
}
tbody
tr
:
nth-child
(
even
) {
background-color: #f9f9f9;
}
tbody
tr
:
hover
{
background-color: #ecf0f1;
}
@
media
(max-width:
768
px
) {
.
table-container
{
width:
100
%
;
padding:
10
px
;
}
table
{
font-size:
14
px
;
}
}
Roll No.-12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
Practical No. 5
im:Create any HTML Information Input form usinglabel, textbox, text area, checkbox, radio
A
button, select box etc. controls using HTML & CSS code
Software used:- Notepad, Web Browser.
T heory:- Description about various table tags of HTML- <input>, <label>, <select>,
ET
<textarea>, <button>, <fieldset>, <legend>, <datalist>, <output>, <option> with syntax.
Program Code:- Code for HTML Information Input form using various HTML tags.
● H
TML Code-
<!DOCTYPE html>
<html lang="en">
O
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
C
<title>Food Order Form</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
M
<div class="container">
<h2>Food Order Form</h2>
<form action="#" method="post">
VP
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>
<label for="address">Delivery Address:</label>
<textarea id="address" name="address" rows="3" required></textarea>
H
<label for="food">Select Food Item:</label>
<select id="food" name="food">
<option value="Pizza">Pizza</option>
<option value="Burger">Burger</option>
<option value="Pasta">Pasta</option>
<option value="Sandwich">Sandwich</option>
<option value="Salad">Salad</option>
</select>
Roll No.-12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
<label>Choose Extras:</label>
<div class="checkbox-group">
<input type="checkbox" id="cheese" name="extras" value="Extra Cheese">
<label for="cheese">Extra Cheese</label>
<input type="checkbox" id="spicy" name="extras" value="Extra Spicy">
<label for="spicy">Extra Spicy</label>
<input type="checkbox" id="sauce" name="extras" value="Extra Sauce">
ET
<label for="sauce">Extra Sauce</label>
</div>
<label>Payment Method:</label>
<div class="payment-options">
<input type="radio" id="cod" name="payment" value="Cash on Delivery"
required>
O
<label for="cod">Cash on Delivery</label>
<input type="radio" id="card" name="payment" value="Credit/Debit Card">
<label for="card">Credit/Debit Card</label>
</div>
C
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" value="1"
required>
<button type="submit">Place Order</button>
M
<button type="reset" class="reset">Reset</button>
</form>
</div>
VP
</body>
</html>
CSS Code-
●
* {
margin: 0;
H
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background-color: #f8f9fa;
display: flex;
Roll No.-12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
}
.container {
ET
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
O
width: 100%;
max-width: 450px;
} C
h2 {
text-align: center;
color: #e74c3c;
margin-bottom: 15px;
M
}
label {
font-weight: bold;
VP
margin-top: 10px;
display: block;
}
input, select, textarea {
width: 100%;
H
padding: 10px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
Roll No.-12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
input:focus, select:focus, textarea:focus {
border-color: #e74c3c;
outline: none;
box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}
textarea {
ET
resize: none;
}
.checkbox-group, .payment-options {
display: flex;
O
flex-wrap: wrap;
gap: 10px;
margin-top: 5px; C
}
button {
width: 100%;
padding: 12px;
M
margin-top: 15px;
border: none;
border-radius: 5px;
VP
font-size: 16px;
cursor: pointer;
transition: 0.3s ease-in-out;
}
button[type="submit"] {
H
background-color: #e74c3c;
color: white;
}
button[type="submit"]:hover {
background-color: #c0392b;
}
Roll No.-12 Ayush . J . Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
button.reset {
background-color: #7f8c8d;
color: white;
}
button.reset:hover {
background-color: #4d5656;
ET
}
@media (max-width: 600px) {
.container {
width: 100%;
O
padding: 15px;
}
input, select, textarea { C
font-size: 14px;
}
}
M
VP
H
Roll No.-12 Ayush . J . Satwase
HVPM College of Engineering & Technology
Department of Computer Science & Engineering
C Skill Lab 2
Program No. 6
Aim: Create your resume using HTML tags also experiment with colors, text , link , size
and also other tags you studied.
Software used:- Notepad, Browser.
Theory:- Description about various table tag of HTML/CSS such as colors, text , link & size with
syntax.
Roll No:- 12 Name : Ayush J. Satwase
HVPM College of Engineering & Technology
Department of Computer Science & Engineering
C Skill Lab 2
HTML Code :
<html>
<body style="background-color:powderblue;">
<title>My Resume</title> <head>
<style>
* { max-width: 700px; margin: auto; }
body { min-width: 500px; }
#header { height: 40px; width: 100%; background-color: #ffffff;; position: fixed; z-index: 1; }
.left { height: 1000px; width: 45px; background-color: #2f65af; float: left; position: fixed; }
.stuff { display: inline-block; margin-top: 6px; margin-left: 55px; width: 75%; height: 1000px;
} @media only screen and (max-width: 430px) { .left, .stuff { width: 100%; margin-left: 10px;
} } </style> </head>
<body> <div id="header"></div>
<div class="left"></div>
<div class="stuff">
<br><br> <h1><center>Resume</center></h1>
<hr> <p style="text-align:inherit;">NAME:- Ayush Jagan Satwase </p>
<p style="text-align:inherit;">QUALIFICATION:- BE (CSE) 2nd Year</p>
<p style="text-align:inherit;">CONTACT:- 8989872746</p>
<p style="text-align:inherit;">EMAIL:- ayushsatvase08@gmail.com
<br>
<input type="image" src=
"C:\Users\akkii\Downloads\ayushhhhhhhhhhhhhhhhhhhhhhhh.jpg" width="200"
height="200">
<br><br> <h3>EDUCATIONAL QUALIFICATION :-</h3>
<hr> <table border="3">
<tr> <th>SR.NO</th>
<th>COURSE</th>
<th>UNIVERSITY/BOARD</th>
<th>YEAR OF PASSING</th>
<th>PERSENTAGE</th>
</tr>
<tr> <th>1</th>
<th>B.E.(CSE)</th>
<th>SANTA GADGE BABA UNIVERSITY AMRAVATI</th>
<th>1<sup>st</sup>year</th>
<th>7.64 CGPA</th> </tr>
<tr> <th>2</th>
Roll No:- 12 Name : Ayush J. Satwase
HVPM College of Engineering & Technology
Department of Computer Science & Engineering
C Skill Lab 2
<th>B.E.(CSE)</th>
<th>SANTA GADGE BABA UNIVERSITY AMRAVATI</th>
<th>2<sup>st</sup>year pursuing</th>
<th>--</th> </tr>
<tr> <th>3</th>
<th>HSC</th>
<th>MAHARASHTRA BOARD</th>
<th>2022</th>
<th>79.17%</th></tr>
<tr> <th>3</th>
<th>SSC</th>
<th>MAHARASHTRA BOARD</th>
<th>2020</th>
<th>88.00%</th> </tr> </table>
<br><br> <h3>SKILLS:-</h3>
<hr> <P>intermediate of windows,C , Java , Web-Dew </P>
<br><br> <h3>ACHIEVEMENTS:-</h3>
<hr> <P>1) 3<sup>rd</sup> Prize In video editing at youedit.</P>
<br><br> <h3>STRENGHT:-</h3>
<hr> <p>Good Communication Skill, absolutely comfortable with Regional language like
MARATHI AND HINDI</p>
<br><br> <h3>PERSONAL INFORMATION :-</h3> <hr>
<ul> <li><p>Date of birth:- 18<sup>th</sup> May 2005</p></li>
<li><p>Address:-AT.PO.Katkumbh tq. Chikhaldara Dist. Amravati, pincode:-444807</p></li>
<li><p>Marital status :- Unmarride </p></li>
<li><p>Nationlity:- INDIAN </p></li>
<li><p>Gender:- Male</p></li>
<li><p>Mother toungue :- Marathi</p></li>
<li><p>Language of comfert :- Marathi, Hindi</p></li></ul>
<br><br> <h3>DECLERATION:-</h3>
<hr> <br> <p>I hereby declear that above mentioned information is correct to the best of by
knowledge and i bear the responsablity for the correctness of the above mentioned
particular. </p><br><br>
<footer style="background-color: #ffcccc; width: 1000px; height: 45px; text-align: right;
"><h4>Student Name : Ayush Jagan Satwase </h4></footer> </body> </html>
Roll No:- 12 Name : Ayush J. Satwase
VPM College of Engineering & Technology
H
Department of Computer Science & Engineering
C Skill Lab 2
Program No. 7
Aim: Introduction to JavaScript & executing First JavaScript Code.
Software used:- Notepad, Web Browser
Theory:-
What is JavaScript?
Features of Java Script?
How to Link JavaScript File in HTML ?
Basic Useful Fucnctions in JavaScript?
How to Execute JavaScript Code?
Program Code Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Intro</title>
</head>
<body>
<h1>Welcome to JavaScript!</h1>
<p> hello guyzzzzz...!! </p>
<button onclick="displayMessage()">Click me!</button>
<script>
function displayMessage() {
alert("Hello, Welcome to my profile!");
}
</script>
</body>
</html>
Roll No :- 12 Ayush . J . Satwase
HVPM College of Engineering & Technology
Department of Computer Science & Engineering
C Skill Lab 2
Program No. 8
Aim: Give JavaScript Code to get Current Date & Time.
Software used:- Notepad, Web Browser
Theory:- Description about functions Used.
Program Code Example- <!DOCTYPE
html>
<html>
<head></head>
<body>
<h1> Current Date & Time Using Java Script:-</h1>
<p id="DT"></p>
<script> var date = new Date();
document.getElementById("DT").innerHTML = date;
</script>
</body>
</html>
Roll No: 12 Name : Ayush.J.Satwase
Output:-
Roll No: 12 Name : Ayush.J.Satwase
You might also like
- Payer - Authentication - SO - API Mar20No ratings yetPayer - Authentication - SO - API Mar20241 pages
- Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with EaseFrom EverandHypertext Markup Language (HTML) Fundamentals: How to Master HTML with EaseNo ratings yet
- WEB TECHNOLOGY_39072812_2025_01_23_16_04No ratings yetWEB TECHNOLOGY_39072812_2025_01_23_16_0435 pages
- Web Design and Internet Programming Lab Manual (2)No ratings yetWeb Design and Internet Programming Lab Manual (2)18 pages
- Lecture 0 - CS50's Web Programming With Python and JavaScriptNo ratings yetLecture 0 - CS50's Web Programming With Python and JavaScript1 page
- ICT---lab-9-20112024-120205pm-20112024-023814pmNo ratings yetICT---lab-9-20112024-120205pm-20112024-023814pm8 pages
- It Spring Edutech: Chapter 1: Getting Started With HTMLNo ratings yetIt Spring Edutech: Chapter 1: Getting Started With HTML12 pages
- Venkata Ramana Reddy WB Designing File 2k24CSUN0208 - ConvertNo ratings yetVenkata Ramana Reddy WB Designing File 2k24CSUN0208 - Convert18 pages
- Foundations of Computing From Hardware Essentials to Web DesignNo ratings yetFoundations of Computing From Hardware Essentials to Web Design25 pages
- Guru Gobind Singh Indraprastha University E-CommerceNo ratings yetGuru Gobind Singh Indraprastha University E-Commerce39 pages
- Basics of HTML and Css From Scratch PDFNo ratings yetBasics of HTML and Css From Scratch PDF20 pages
- Web Technology Study Material GTU - 23042016 - 032646AM PDF100% (1)Web Technology Study Material GTU - 23042016 - 032646AM PDF82 pages
- Web Technologies Material For Degree Students100% (2)Web Technologies Material For Degree Students42 pages
- A Project Report On: Alumni Management SystemNo ratings yetA Project Report On: Alumni Management System33 pages
- Blood Bank and Donor Management Report PHPNo ratings yetBlood Bank and Donor Management Report PHP91 pages
- Advance-E-Auction-System-Using-Python-DjangoNo ratings yetAdvance-E-Auction-System-Using-Python-Django6 pages
- CSS Microproject F1 - PDF CSS Microproject F1 PDFNo ratings yetCSS Microproject F1 - PDF CSS Microproject F1 PDF12 pages
- Download ebooks file Programming PHP 2nd Edition Covers PHP 5 Rasmus Lerdorf all chapters100% (4)Download ebooks file Programming PHP 2nd Edition Covers PHP 5 Rasmus Lerdorf all chapters50 pages
- Experiement 11 .MSK Home Automation WEBIOPiNo ratings yetExperiement 11 .MSK Home Automation WEBIOPi21 pages
- ACCESS?query2 Achar Endereços de Pessoas Pelo CPF de GratisNo ratings yetACCESS?query2 Achar Endereços de Pessoas Pelo CPF de Gratis475 pages
- Fundamentals of Web Development 3rd Edition Randy Connolly 2024 Scribd DownloadNo ratings yetFundamentals of Web Development 3rd Edition Randy Connolly 2024 Scribd Download50 pages
