Scribd
Upload
34 views5 pages

Web Lab

It's a lab manual

Uploaded by

herex79237
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
34 views5 pages

Web Lab

It's a lab manual

Uploaded by

herex79237
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/ 5

Aim:

Introduction of HTML & CSS with their Application.

Introduction to HTML & CSS:


HTML (Hyper Text Markup Language) is the standard language for creating webpages. It
structures the content on a webpage by defining elements like headings, paragraphs, images,
links, and more. HTML uses tags (e.g., <h1>, <p>, <a>, etc.) to organize and display text, images,
and other multimedia elements.
CSS (Cascading Style Sheets) is a style sheet language used to control the appearance of
HTML elements. It allows web developers to separate the presentation (layout, colours, fonts) from
the content. With CSS, you can enhance the look and feel of a webpage, making it more visually
appealing and responsive across devices.

Applications of HTML & CSS:


1. Web Page Design: HTML and CSS are fundamental tools for building webpages. HTML
structures the content, while CSS enhances its presentation by applying layouts, fonts, and
colours.
2. Responsive Web Design: CSS enables the development of responsive websites, ensuring
they adjust and display well on different devices, from desktops to mobile phones.
3. Web Applications: Web-based applications use HTML for their structure and CSS for
styling. HTML forms, for example, allow user input, while CSS makes the interface user-
friendly.
4. Email Templates: HTML and CSS are also used in designing responsive and visually
appealing email templates for marketing campaigns and communication.
5. User Interface (UI) Components: HTML and CSS together help create reusable UI
components, such as buttons, navigation bars, forms, and modals, ensuring a consistent
user experience across a website or app.
These technologies form the backbone of modern web development, enabling the creation of
interactive, accessible, and visually compelling websites and applications.
Program 2:
Create a registration page for a static online bookstore with the help of HTML & CSS tags which
have these specific fields – Name, Email, Mob. No., Password, Conform Password, Submit
Button

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registeration form</title>
<style>
body{
display: grid;
place-content: center;
background-color: #8391d1;
padding: 20px;

}
.container{
max-width: 500px;
margin: 0 auto;
background-color: #a6b1e1;
padding:30px;
border-radius:8px;
box-shadow:0 0 10px rgba(0, 0, 0, 0.1)
}

.form-group label{
display: block;
margin-bottom: 5px;
}

</style>
</head>
<body>
<div class="container">
<form>
<h2>Registeration Form</h2>
<div class="form-group">
<label >Name:</label>
</div>
<input type="text" required><br>
<div class="form-group">
<label >Language:</label>
</div>
<select name="Select Language" id="Select Language">
<option value="English">English</option>
<option value="hindi">Hindi</option>
<option value="Urdu">Urdu</option>
<option value="Punjabi">Punjabi</option>
</select>
<br>
<div class="form-group">
<label>Nationality:</label>
</div>
<input type="radio" value="radio">India
<input type="radio" value="radio">Arab
<input type="radio" value="radio">North America
<input type="radio" value="radio">South America <br>
<div class="form-group">
<label>Authuor:</label>
</div>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox"><br>
<div class="form-group">
<label>Email:</label>
</div>
<input type="email"><br>
<div class="form-group">
<label>Contact:</label>
</div>
<input type="text"><br>
<div class="form-group" >
<label>Password:</label>
</div>
<div id="rcorners1">
<input type="pattern"><br >
</div>

<div class="form-group" id="mydiv" >


<input type="submit" value="Submit" >
</div>
</form>
</div>
</body>
</html>

Output:
Program 3:
Create a login Page For static online book store website with the help of HTML & CSS tag which
have fields – user name , password & login button.

Code:

<!DOCTYPE html>
<html lang="en">
<head><title>Login Form</title>
<title>Registration Forn</title>
<style>
body{
font-family: Arial, sans-serif;
place-content: Justify;
padding:20px;
background-color:rgb(183, 237, 237);
}
.container{
max-width: 250px;
margin: auto;
background-color: #c3dbe3;
padding: 30px;
border-radius: 30px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.473)
}
.container h2{
text-align: centre;
margin-bottom: 20px;
}
.form-group{
margin-bottom: 30px;
}
.form-group label{
display: block;
margin-bottom: 10px;
}
.form-group input,
.form-group select,
.form-group textarea{
width: 100%;
padding : 10px;
border : 1px solid #ccc;
border-radius: 4px;
}

</style>
</head>
<body>
<div class="container">
<h2>Login Form</h2>
<div class="form-group">
<label>User Name:</label>
<input type="text">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password">
</div>
<input type="Submit"></input>
</form>
</div>
</body>
</html>

Output:

You might also like