Scribd
Upload
3 views

HTML_CSS_Experiment

The document outlines the creation of a simple website for ABC College using HTML5 and CSS. It includes the HTML code for the index page and a feedback page, as well as the CSS styles for layout and design. The website features a welcoming message, an image, and a feedback form for user input.

Uploaded by

borawakejayraj5
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
3 views

HTML_CSS_Experiment

The document outlines the creation of a simple website for ABC College using HTML5 and CSS. It includes the HTML code for the index page and a feedback page, as well as the CSS styles for layout and design. The website features a welcoming message, an image, and a feedback form for user input.

Uploaded by

borawakejayraj5
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/ 4

Experiment No.

1: Creation of Website using HTML5 and CSS

HTML Code for Index Page (index.html)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="College Profile">

<title>College Profile</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<h1>Welcome to ABC College</h1>

</header>

<main>

<p>Welcome to ABC College, a place of excellence and innovation. Our institution is dedicated to nurturing talent

and providing top-notch education.</p>

<img src="college.jpg" alt="ABC College" style="width:300px;height:auto;">

<nav>

<a href="index.html">Home</a> |

<a href="page2.html">Feedback</a>

</nav>

</main>
</body>

</html>

HTML Code for Feedback Page (page2.html)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Feedback Form">

<title>Feedback Form</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<h1>Feedback Form</h1>

</header>

<main>

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

<label for="name">Name:</label><br>

<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label><br>

<input type="email" id="email" name="email" required><br><br>


<label for="feedback">Feedback:</label><br>

<textarea id="feedback" name="feedback" rows="4" required></textarea><br><br>

<button type="submit">Submit</button>

</form>

<nav>

<a href="index.html">Home</a>

</nav>

</main>

</body>

</html>

CSS Code (styles.css)

body {

font-family: Arial, sans-serif;

line-height: 1.6;

margin: 0;

padding: 0;

background-color: #f4f4f9;

color: #333;

header {

background: #333;

color: #fff;
padding: 10px 0;

text-align: center;

main {

padding: 20px;

text-align: center;

nav a {

color: #333;

text-decoration: none;

padding: 5px 10px;

border: 1px solid #333;

border-radius: 5px;

margin: 0 5px;

nav a:hover {

background: #333;

color: #fff;

You might also like