Scribd
Upload
57 views

Web Technology Lab

The document provides examples of HTML code for different purposes: 1. Displaying education details in a table 2. Creating a CV webpage 3. Creating a basic website with links to About, Services, and Contact pages

Uploaded by

Prajwol Acharya
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
57 views

Web Technology Lab

The document provides examples of HTML code for different purposes: 1. Displaying education details in a table 2. Creating a CV webpage 3. Creating a basic website with links to About, Services, and Contact pages

Uploaded by

Prajwol Acharya
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 11

Web Technology Lab

1. Write an HTML code to display your education details in a tabular


format.
<!DOCTYPE html>
<html>
<head>
<title>Education Details (Example)</title>
</head>
<body>
<h1>Education Details</h1>
<table border="1">
<tr>
<th>Degree</th>
<th>Institution</th>
<th>Year of Completion</th>
</tr>

<tr>
<td>10(SEE)</td>
<td>Nepal board</td>
<td>2023</td>
</tr>
<tr>
<td>11(SLCE)</td>
<td>Nepal board</td>
<td>2024</td>
</tr>
<tr>
<td>12(SLCE)</td>
<td>Nepal board</td>
<td>2025</td>
</tr>
<tr>
<td>Bachelor of Science</td>
<td>TU University </td>
<td>2026</td>
</tr>
<tr>
<td>Master of Science</td>
<td>TU University</td>
<td>2027(Expected)</td>
</tr>
</table>
</body>
</html>
2. Write an HTML code to display your CV on a web page.
<!DOCTYPE html>
<html >
<head>
<title>My CV</title>
</head>
<body>
<h1>My CV</h1>
<div>
<h2>Personal Information</h2>
<p>Name: Suraj Bhattarai</p>
<p>Date of Birth: January 1, 1997</p>
<p>Email: [email protected]</p>
<p>Phone: +977 234 567 890</p>
</div>
<div>
<h2>Education</h2>
<p>Bachelor of Science in Computer Science</p>
<p>TU University 2010-2014</p>
</div>
<div>
<h2>Work Experience</h2>
<p>Software Engineer</p>
<p>IBM Tech, 2014-Present</p>
<p>Responsibilities include developing web applications, troubleshooting
issues, and collaborating with cross-functional teams.</p>
</div>
<div>
<h2>Skills</h2>
<ul>
<li>Programming Languages: Java, JavaScript, Python</li>
<li>Web Technologies: HTML, CSS, React.js</li>
<li>Database Management: SQL, MongoDB</li>
<li>Version Control: Git</li>
</ul>
</div>
<div>
<h2>Languages</h2>
<p>English (Fluent), Spanish (Intermediate)</p>
</div>
</body>
</html>

3. Write an HTML code to create a Home page having three links: About
Us, Our Services and Contact Us. Create separate web pages for the
three links.
index.html (Home Page):
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<h1>Welcome to Our Website</h1>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</body>
</html>

about.html:
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
</head>
<body>
<h1>About Us</h1>
<p>Welcome to our website! We are a company dedicated to providing high-
quality services to our clients.</p>
</body>
</html>

services.html:
<!DOCTYPE html>
<html>
<head>
<title>Our Services</title>
</head>
<body>
<h1>Our Services</h1>
<p>Explore the range of services we offer to meet your needs.</p>
</body>
</html>

contact.html:
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<h1>Contact Us</h1>
<p>Feel free to get in touch with us for any inquiries or feedback.</p>
</body>
</html>
4. Write an HTML code to create a login form. On submitting the form, the
user should get navigated to a profile page.
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h2>Login</h2>
<form action="profile.html" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<button type="submit">Login</button>
</div>
</form>
</body>
</html>
5. Write an HTML code to create a Registration Form. On submitting the
form, the user should be asked to login with this new credentials.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Registration</h2>
<form action="login.html" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<button type="submit">Register</button>
</div>
</form>
</body>
</html>
6. Write an HTML code to create your Institute website, Department
Website and Tutorial website for specific subject.
Institute Website (index.html):
<!DOCTYPE html>
<html>
<head>
<title>My Institute</title>
</head>
<body>
<h1>Welcome to My Institute</h1>
<p>This is the official website of our institute.</p>
<p>Explore our programs, faculty, and facilities to learn more about what we
offer.</p>
<a href="department.html">Visit Our Department</a>
</body>
</html>
Department Website (department.html):
<!DOCTYPE html>
<html>
<head>
<title>Department of Computer Science</title>
</head>
<body>
<h1>Department of Computer Science</h1>
<p>Welcome to the Department of Computer Science!</p>
<p>Learn about our faculty, research areas, and academic programs.</p>
<a href="tutorial.html">Explore Tutorials</a>
</body>
</html>

Tutorial Website for Specific Subject (tutorial.html):


<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<h1>HTML Tutorial</h1>
<p>Welcome to our HTML tutorial website!</p>
<p>Here you'll find resources, examples, and exercises to help you learn
HTML.</p>
<p>Start learning HTML today!</p>
</body>
</html>

7. Write an HTML code to illustrate the usage of the following:


 Ordered List
 Unordered List
 Definition List
<!DOCTYPE html>
<html>
<head>
<title>List Examples</title>
</head>
<body>
<h2>Ordered List</h2>
<ol>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ol>

<h2>Unordered List</h2>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>

<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>

<dt>JavaScript</dt>
<dd>A programming language used for web development</dd>
</dl>
</body>
</html>
8. Write an HTML code to create a frameset having header, navigation and
content sections.
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="100px,*,100px">
<frame src="header.html" name="header">
<frame src="navigation.html" name="navigation">
<frame src="content.html" name="content">
</frameset>
</html>
9. Write an HTML code to demonstrate the usage of inline CSS.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; font-family: Arial;">Heading with Inline CSS</h1>
<p style="font-size: 16px; line-height: 1.5;">This is a paragraph with inline CSS
applied for styling.</p>
<div style="width: 200px; height: 200px; background-color: yellow; border: 1px
solid black;">
<p style="text-align: center; padding-top: 80px;">Styled Div</p>
</div>
</body>
</html>
10.Write an HTML code to demonstrate the usage of internal CSS.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
h1 {
color: blue;
font-family: Arial;
}
p{
font-size: 16px;
line-height: 1.5;
}

.styled-div {
width: 200px;
height: 200px;
background-color: yellow;
border: 1px solid black;
}

.styled-div p {
text-align: center;
padding-top: 80px;
}
</style>
</head>
<body>
<h1>Heading with Internal CSS</h1>
<p>This is a paragraph with internal CSS applied for styling.</p>
<div class="styled-div">
<p>Styled Div</p>
</div>
</body>
</html>
11.Write an HTML code to demonstrate the usage of external CSS.
HTML file (index.html):
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Heading with External CSS</h1>
<p>This is a paragraph with external CSS applied for styling.</p>
<div class="styled-div">
<p>Styled Div</p>
</div>
</body>
</html>

CSS file (styles.css):


h1 {
color: blue;
font-family: Arial;
}

p{
font-size: 16px;
line-height: 1.5;
}

.styled-div {
width: 200px;
height: 200px;
background-color: yellow;
border: 1px solid black;
}

.styled-div p {
text-align: center;
padding-top: 80px;
}

You might also like