Scribd
Upload
14 views

htmlcss1

Uploaded by

muthukumaran.42510
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

htmlcss1

Uploaded by

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

Q1)Develop a web application for higher

educational institutions – college/university using HTML and CSS (apply inline,

internal and external

styles - Use style properties for background, text effects, positioning, link).

<!DOCTYPE html>

<html>

<head>

<title>RESUME</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

background-color: #f9f9f9;

h1, h2 {

color: #333;

a{

color: #2a6496;

text-decoration: none;

a:hover {

text-decoration: underline;

table {

width: 100%;

border-collapse: collapse;

margin: 20px 0;

th, td {

border: 1px solid #ddd;


padding: 8px;

text-align: left;

background-color: #fff;

th {

background-color: #f2f2f2;

input[type="text"], textarea {

width: 100%;

padding: 8px;

margin: 5px 0;

box-sizing: border-box;

input[type="submit"], input[type="reset"] {

background-color: #4CAF50;

color: white;

padding: 10px 20px;

margin: 10px;

border: none;

cursor: pointer;

font-size: 16px;

input[type="submit"]:hover, input[type="reset"]:hover {

background-color: #45a049;

</style>

</head>

<body>

<center>

<h1><b><ins><a href="#">RESUME</a></ins></b></h1>

</center>
<hr>

<h2><i><ins><a href="#">EDUCATION</a></ins></i></h2>

<ul>

<li>

<table>

<tr>

<th>Degree</th>

<th>Institution</th>

<th>Duration</th>

</tr>

<tr>

<td><input type="text" placeholder="Enter degree" name="degree"></td>

<td><input type="text" placeholder="Enter institution" name="institution"></td>

<td><input type="text" placeholder="Enter duration" name="duration"></td>

</tr>

</table>

</li>

</ul>

<h2><i><ins><a href="#">DEPARTMENT</a></ins></i></h2>

<ul>

<li>

<table>

<tr>

<th>Department</th>

</tr>

<tr>

<td><input type="text" placeholder="Enter department" name="department"></td>

</tr>

</table>
</li>

</ul>

<h2><i><ins><a href="#">INTERNSHIP EXPERIENCED</a></ins></i></h2>

<ul>

<li>

<table>

<tr>

<th>Internship</th>

<th>Description</th>

</tr>

<tr>

<td><input type="text" placeholder="Enter internship" name="internship"></td>

<td><textarea id="message" name="description" rows="4" required></textarea></td>

</tr>

</table>

</li>

</ul>

<center>

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

<input type="reset" value="Reset">

</center>

</body>

</html>
Q2) Develop a website with suitable CSS layouts.

SOURCE CODE:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>My Personal Portfolio</title>

<style>

/* Basic Reset */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

color: #444;

line-height: 1.6;

background-color: #f0f0f0;
}

header {

background-color: #0073e6;

color: #fff;

padding: 20px;

text-align: center;

header h1 {

margin-bottom: 10px;

nav {

margin: 15px 0;

text-align: center;

nav a {

color: #fff;

text-decoration: none;

margin: 0 15px;

font-weight: bold;

nav a:hover {

text-decoration: underline;

.container {

width: 80%;

margin: auto;

padding: 20px;

section {

padding: 30px;

margin: 20px 0;
background-color: #fff;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

text-align: center;

h2 {

color: #0073e6;

margin-bottom: 10px;

footer {

background-color: #0073e6;

color: #fff;

text-align: center;

padding: 10px;

position: fixed;

bottom: 0;

width: 100%;

</style>

</head>

<body>

<header>

<h1>Welcome to My Portfolio</h1>

<nav>

<a href="#home">Home</a>

<a href="#about">About Me</a>

<a href="#projects">Projects</a>

<a href="#contact">Contact</a>

</nav>

</header>

<div class="container">
<!-- Home Section -->

<section id="home">

<h2>Home</h2>

<p>Welcome to my personal portfolio! Here you will find information about my skills, projects,
and experience.</p>

</section>

<!-- About Section -->

<section id="about">

<h2>About Me</h2>

<p>I am a passionate developer with a keen interest in web development and software
engineering. My goal is to create innovative and efficient solutions.</p>

</section>

<!-- Projects Section -->

<section id="projects">

<h2>Projects</h2>

<p>Explore some of the projects I have worked on. Each project showcases my skills and
dedication to delivering high-quality work.</p>

</section>

<!-- Contact Section -->

<section id="contact">

<h2>Contact</h2>

<p>Feel free to get in touch with me for collaborations or any inquiries. I am always open to new
opportunities!</p>

<p>Email: contact@myportfolio.com | Phone: (123) 456-7890</p>

</section>

</div>

<footer>

<p>&copy; 2024 My Portfolio. All Rights Reserved.</p>

</footer>

</body>

</html>
Q3)Design a web page using HTML and CSS.

Source code:

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

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f9f9f9;

color: #333;

header {

background-color: #4CAF50;

color: white;

text-align: center;
padding: 1em 0;

main {

padding: 20px;

h2 {

color: #4CAF50;

section {

margin: 20px 0;

footer {

background-color: #4CAF50;

color: white;

text-align: center;

padding: 1em 0;

position: fixed;

bottom: 0;

width: 100%;

</style>

</head>

<body>

<header>

<h1>Welcome to My Simple Web Page</h1>

</header>

<main>

<section>

<h2>About Me</h2>

<p>Hello! I'm learning web development and this is my simple webpage.</p>

</section>
<section>

<h2>My Interests</h2>

<p>I enjoy coding, reading, and hiking in my free time.</p>

</section>

</main>

<footer>

<p>&copy; 2024 My Simple Web Page. All rights reserved.</p>

</footer>

</body>

</html>

You might also like