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
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
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