HTML
HTML
Basic tags
<html>
<head>
<title>My Basic Web Page</title>
</head>
<body>
<h2>My Hobbies</h2>
<ul>
<li>Reading books</li>
<li>Listening to music</li>
<li>Exploring nature</li>
</ul>
<h2>Quote</h2>
<p>"The best way to predict the future is to invent it." - Alan Kay</p>
<h2>Contact Info</h2>
<p>Email: someone@example.com</p>
<p>Phone: 123-456-7890</p>
</body>
</html>
2.Table
<html>
<head>
<title>Simple HTML Table</title>
</head>
<body>
<h1>Exam Results</h1>
<table border="1">
<tr>
<th rowspan="2">Roll No</th>
<th rowspan="2">Name</th>
<th colspan="2">Marks</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>1</td>
<td>Aarav</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>Meera</td>
<td>92</td>
<td>88</td>
</tr>
<tr>
<td>3</td>
<td>Ravi</td>
<td>75</td>
<td>80</td>
</tr>
</table>
</body>
</html>
3.Form
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<p>
Full Name: <br>
<input type="text" name="fullname" id="fullname" placeholder="Enter
your full name" required maxlength="50">
</p>
<p>
Email: <br>
<input type="email" name="email" id="email"
placeholder="example@mail.com" required>
</p>
<p>
Password: <br>
<input type="password" name="password" id="password" required
minlength="6" maxlength="20">
</p>
<p>
Age: <br>
<input type="number" name="age" id="age" min="1" max="120"
value="18">
</p>
<p>
Gender: <br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</p>
<p>
Hobbies: <br>
<input type="checkbox" name="hobby1" value="reading" checked>
Reading<br>
<input type="checkbox" name="hobby2" value="sports"> Sports<br>
<input type="checkbox" name="hobby3" value="music" disabled>
Music (Disabled)
</p>
<p>
Country: <br>
<select name="country" required>
<option value="">--Select--</option>
<option value="india" selected>India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
</p>
<p>
Bio: <br>
<textarea name="bio" rows="4" cols="40" placeholder="Write about
yourself..."></textarea>
</p>
<p>
Read-only Info: <br>
<input type="text" value="Form Version 1.0" readonly>
</p>
<p>
<input type="submit" value="Register">
<input type="reset" value="Clear">
</p>
</form>
</body>
</html>
4.Webpage using CSS
(Internal)
<html>
<head>
<title>Styled Web Page</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
color: #333;
padding: 20px;
}
h1 {
color: #004080;
text-align: center;
}
p{
font-size: 16px;
line-height: 1.6;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
ul {
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
width: 250px;
}
li {
margin-bottom: 5px;
}
a{
color: #0066cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Welcome to My Web Page</h1>
</body>
</html>
(External)
Index.html file
<html>
<head>
<title>Web Page with External CSS</title>
<!-- Link to external CSS file -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
Style.css file
body {
background-color: #f9f9f9;
font-family: Verdana, sans-serif;
color: #333;
padding: 20px;
}
h1 {
color: #0066cc;
text-align: center;
}
p{
font-size: 16px;
line-height: 1.6;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
ul {
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
width: 250px;
}
li {
margin-bottom: 5px;
}
a{
color: #003366;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
5.Javascript
<html>
<head>
<title>Interactive Web Page</title>
<script>
window.onload = function() {
alert("Welcome to the Interactive Web Page!");
};
function greetUser() {
const name = prompt("What's your name?");
if (name) {
document.getElementById("greeting").innerHTML = "Hello, " + name +
"! Nice to see you here.";
}
}
function showTime() {
const now = new Date();
document.getElementById("time").innerHTML = "Current Time: " +
now.toLocaleTimeString();
}
function changeColor() {
const colors = ["#fce4ec", "#e0f7fa", "#fff9c4", "#f3e5f5", "#e8f5e9"];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.body.style.backgroundColor = randomColor;
}
setInterval(showTime, 1000);
</script>
</head>
<body>
<hr>
<hr>
<hr>
<hr>
<footer>
</body>
</html>
6.XML
Index.html
<html>
<head>
<title>Book Library from XML</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
h1 {
color: #333;
}
.book {
background: #fff;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
</style>
<script>
function loadXML() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
const xmlDoc = this.responseXML;
const books = xmlDoc.getElementsByTagName("book");
let output = "<h2>Book List</h2>";
for (let i = 0; i < books.length; i++) {
const title = books[i].getElementsByTagName("title")[0].textContent;
const author =
books[i].getElementsByTagName("author")[0].textContent;
const year = books[i].getElementsByTagName("year")[0].textContent;
output += `
<div class="book">
<strong>${title}</strong><br>
Author: ${author}<br>
Published: ${year}
</div>`;
}
document.getElementById("output").innerHTML = output;
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
}
</script>
</head>
<body onload="loadXML()">
Xml file
<?xml version="1.0" encoding="UTF-8"?>
<library>
<book>
<title>The Alchemist</title>
<author>Paulo Coelho</author>
<year>1988</year>
</book>
<book>
<title>Clean Code</title>
<author>Robert C. Martin</author>
<year>2008</year>
</book>
<book>
<title>The Hobbit</title>
<author>J.R.R. Tolkien</author>
<year>1937</year>
</book>
</library>
<book>
<title>The Alchemist</title>
<author>Paulo Coelho</author>
<year>1988</year>
</book>
<book>
<title>1984</title>
<author>George Orwell</author>
<year>1949</year>
</book>
</library>
book.xsd
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="library">
<xs:complexType>
<xs:sequence>
<xs:element name="book" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="year" type="xs:gYear"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
8.xml schema
Books.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="books.xsl"?>
<library xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="books.xsd">
<book>
<title>The Alchemist</title>
<author>Paulo Coelho</author>
<year>1988</year>
</book>
<book>
<title>Clean Code</title>
<author>Robert C. Martin</author>
<year>2008</year>
</book>
<book>
<title>The Hobbit</title>
<author>J.R.R. Tolkien</author>
<year>1937</year>
</book>
</library>
Books.xsd
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="library">
<xs:complexType>
<xs:sequence>
<xs:element name="book" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="year" type="xs:gYear"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
Books.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:output method="html" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<title>My Book Library</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
Index.html
<html>
<head>
<meta http-equiv="refresh" content="0; URL=books.xml" />
</head>
<body>
<p>If you're not redirected, <a href="books.xml">click here to view the
XML page</a>.</p>
</body>
</html>
Style.css
body {
font-family: Arial, sans-serif;
background-color: #f4f7f9;
padding: 20px;
}
h1 {
color: #333;
}
.book {
background-color: white;
border-left: 5px solid #4CAF50;
margin-bottom: 15px;
padding: 15px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.book h2 {
margin: 0;
color: #4CAF50;
}
9.authentication
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h2>Login Form</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
</body>
</html>
10.servlet
Message.html
<html>
<head>
<title>Message</title>
</head>
<body>
<h2>Hello from Java Program!</h2>
</body>
</html>
openHTML.java
import java.io.File;
import java.io.IOException;
import java.awt.Desktop;
public class OpenHTML {
public static void main(String[] args) {
try {
File htmlFile = new File("message.html"); // Make sure the path is
correct
if (htmlFile.exists()) {
Desktop.getDesktop().browse(htmlFile.toURI());
} else {
System.out.println("File not found.");
}
} catch (IOException e) {
e.printStackTrace();
}
}
}