Scribd
Upload
67 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
67 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
We take content rights seriously. If you suspect this is your content, claim it here.
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: suraj@example.com</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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy