Scribd
Upload
20 views16 pages

Prac 1 - 6

Uploaded by

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

Prac 1 - 6

Uploaded by

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

PRACTICAL NO 1

AIM – Installing, Configuring, and Using Developer Tools/Code Editor/Browser


THEORY –

Developer Tools:

 Developer tools are built into most modern browsers like Chrome, Firefox, and Edge. To
access them, right-click on any web page, select "Inspect", and the developer tools will
open. They allow you to inspect HTML, CSS, and JavaScript, debug, and see how the
page renders on different devices.

Code Editor:

 A code editor like VS Code is essential for writing HTML, CSS, and JavaScript.
o Installation: Download from the official website (https://code.visualstudio.com/),
install it, and set it up by customizing extensions for HTML, CSS, and JavaScript.
o Configuration: Configure your editor for web development by installing useful
extensions like Live Server (for real-time preview), Prettier (for code formatting),
and HTML/CSS support.

Browser:

 A modern browser such as Google Chrome or Mozilla Firefox is essential for viewing
and testing web pages. Always keep your browser updated for the latest features and
security patches.
PRACTICAL NO - 2
AIM – Creating Web Pages using different HTML tags
CODE –

Creating Web Pages Using Different HTML Tags

HTML is the standard markup language used to create web pages. Here's an example of a simple
web page that demonstrates the use of various HTML tags.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Web Page</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to My Web Page</h1>
<nav>
<a href="#about">About</a> |
<a href="#services">Services</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<!-- Main Content -->
<section id="about">
<h2>About Me</h2>
<p>This is a simple paragraph about me.</p>
<img src="profile.jpg" alt="My Profile Picture" width="200">
</section>

<!-- Unordered List -->


<section id="services">
<h2>Services</h2>
<ul>
<li>Web Development</li>
<li>Graphic Design</li>
<li>SEO Optimization</li>
</ul>
</section>

<!-- Footer Section -->


<footer id="contact">
<h2>Contact Me</h2>
<address>Email: [email protected]</address>
<p>&copy; 2024 My Web Page</p>
</footer>
</body>
</html>

Key HTML Tags Used:

 <html>: Root element of the HTML page.


 <head>: Contains meta-information about the page (like title, charset).
 <body>: Contains the content of the web page.
 <h1>, <h2>: Headings.
 <p>: Paragraph.
 <img>: Image tag.
 <ul>, <li>: Unordered list and list items.
 <footer>: Footer section.

Output: This code generates a simple web page with a header, navigation links, sections for
About, Services, and a footer for contact information.
PRACTICAL NO 3
AIM - Controlling the Look and Feel of a Web Page Using CSS
CODE -

Cascading Style Sheets (CSS) is used to style HTML content. You can change colors, fonts, layouts, and
more using CSS.

INTERNAL CSS

<!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>
<style>
/* Global Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
}
section {
margin: 20px;
padding: 20px;
background-color: white;
border-radius: 5px;
}
h1 {
color: #333;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Styled Web Page</h1>
<nav>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>

<section id="about">
<h2>About Me</h2>
<p>This section gives information about me. Styled with background color
and padding.</p>
</section>

<section id="services">
<h2>Services</h2>
<ul>
<li>Web Development</li>
<li>Graphic Design</li>
<li>SEO Optimization</li>
</ul>
</section>

<footer id="contact">
<p>&copy; 2024 My Web Page</p>
</footer>
</body>
</html>

Key CSS Concepts Used:

 body: Set the global font, background color, margin, and padding.
 header: A dark background with white text and centered content.
 nav a: Styled navigation links with space between them and no underline.
 section: Each section has margin, padding, and a white background to stand out.
 footer: The footer stays at the bottom of the page with a fixed position.

EXTERNAL CSS

/* General Styles */

body {

font-family: Arial, sans-serif; /* Sets the font for the page */

line-height: 1.6; /* Increases line spacing for readability */

margin: 0; /* Removes default margin */

padding: 0; /* Removes default padding */

background-color: #b22929; /* Light gray background color */

header {

background: #87ef37; /* Dark gray background for the header */

color: #d03896; /* White text color */


padding: 20px; /* Adds padding around the header */

text-align: center; /* Centers text in the header */

nav a {

color: hsl(0, 64%, 27%); /* White text for links */

text-decoration: none; /* Removes underline from links */

margin: 0 15px; /* Adds space between links */

nav a:hover {

text-decoration: underline; /* Underline links on hover */

section {

padding: 20px; /* Adds padding around sections */

margin: 20px; /* Adds margin around sections */

background: #ffffff; /* White background for sections */

border-radius: 8px; /* Rounded corners for sections */

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */

h1, h2 {

color: #35424a; /* Dark gray color for headings */


}

footer {

background: #35424a; /* Dark gray background for footer */

color: #ffffff; /* White text color */

text-align: center; /* Centers text in the footer */

padding: 20px; /* Adds padding around the footer */

position: relative; /* Positions footer */

bottom: 0; /* Sticks to the bottom of the page */

width: 100%; /* Full width footer */

/* Responsive Styles */

@media (max-width: 600px) {

nav a {

display: block; /* Stack links vertically on small screens */

margin: 10px 0; /* Adds vertical space between links */

Output: The page now has a modern look, with dark headers, a clean layout, and a footer that
stays fixed at the bottom of the screen.
PRACTICAL NO 4
AIM - Write JavaScript functions and control the different components of Web page by predefined
javascript objects

CODE –

JavaScript can control web page components using predefined objects such as document,
window, alert, and many more. Here's an example of how you can interact with a web page:

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Function Example</title>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<button onclick="changeTitle()">Click to Change Title</button>

<script>
// JavaScript function to change the title of the webpage
function changeTitle() {
document.getElementById("title").innerHTML = "Title Changed!";
document.body.style.backgroundColor = "#d3d3d3";
}
</script>
</body>
</html>

Explanation:

 document.getElementById("title").innerHTML : This modifies the text inside the HTML


element with the id="title".
 document.body.style.backgroundColor : Changes the background color of the web page.
 This allows interaction with the HTML DOM and control over its elements.
PRACTICAL NO – 5
AIM - Form Field Validation Using JavaScript

CODE -

Form validation ensures that users enter valid data before submitting it to the server. Here's an
example of a JavaScript function that validates form input fields:

Example Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Form Validation</title>

</head>

<body>

<form onsubmit="return validateForm()">

Name: <input type="text" id="name"><br><br>

Email: <input type="text" id="email"><br><br>

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

</form>

<script>

function validateForm() {

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;


if (name == "") {

alert("Name must be filled out");

return false;

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

if (!emailPattern.test(email)) {

alert("Please enter a valid email");

return false;

return true;

</script>

</body>

</html>

Explanation:

 Name Validation: The function checks if the "Name" field is empty, and alerts the user if it is.
 Email Validation: The function uses a regular expression (emailPattern) to ensure that the
input matches the structure of a valid email address.
PRACTICAL NO 6
AIM - Using jQuery Library to Apply Features on Web Pages
CODE –

jQuery is a lightweight JavaScript library that simplifies DOM manipulation and event handling.
Here's an example that demonstrates jQuery to hide and show elements on a web page.

Example Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>jQuery Example</title>

<!-- Including jQuery -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body>

<h1 id="heading">Hello, jQuery!</h1>

<button id="hideBtn">Hide</button>

<button id="showBtn">Show</button>

<script>

$(document).ready(function(){

// Hide element when the hide button is clicked

$("#hideBtn").click(function(){

$("#heading").hide();
});

// Show element when the show button is clicked

$("#showBtn").click(function(){

$("#heading").show();

});

});

</script>

</body>

</html>

Explanation:

 $(document).ready(): Ensures the DOM is fully loaded before running the jQuery functions.
 $("#hideBtn").click(): Hides the heading when the "Hide" button is clicked.
 $("#showBtn").click(): Shows the heading when the "Show" button is clicked.

jQuery simplifies tasks like event handling (.click()), showing/hiding elements (.show() and
.hide()), and DOM manipulation.

You might also like