0% found this document useful (0 votes)
4 views25 pages

HTML

The document contains various HTML examples demonstrating basic web page structures, including a simple HTML page, a table for exam results, a user registration form, and a styled web page using both internal and external CSS. It also includes JavaScript for interactivity, XML for data representation, and XML schema for validation. Additionally, there are examples of an authentication login page and a book library using XML and XSLT for display.

Uploaded by

nishuuu8901
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
4 views25 pages

HTML

The document contains various HTML examples demonstrating basic web page structures, including a simple HTML page, a table for exam results, a user registration form, and a styled web page using both internal and external CSS. It also includes JavaScript for interactivity, XML for data representation, and XML schema for validation. Additionally, there are examples of an authentication login page and a book library using XML and XSLT for display.

Uploaded by

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

1.

Basic tags
<html>
<head>
<title>My Basic Web Page</title>
</head>
<body>

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

<p>This is a simple HTML page using only basic tags.</p>

<h2>My Favorite Image</h2>


<img src="https://via.placeholder.com/200" alt="Sample Image">

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

<h2>Visit My Favorite Website</h2>


<p><a href="https://www.wikipedia.org" target="_blank">Click here to
visit Wikipedia</a></p>

<p>&copy; 2025 My Website</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>

<h1>User Registration Form</h1>

<form action="submit.html" method="post">

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

<p>This is a sample webpage with <span class="highlight">internal


CSS</span> applied.</p>

<h2>Most Used Websites</h2>


<ul>
<li><a href="https://www.google.com" target="_blank">Google</a></li>
<li><a href="https://www.wikipedia.org"
target="_blank">Wikipedia</a></li>
<li><a href="https://www.github.com" target="_blank">GitHub</a></li>
</ul>

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

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


<p>This is a sample webpage using <span class="highlight">external
CSS</span>.</p>

<h2>My Favorite Websites</h2>


<ul>
<li><a href="https://www.google.com" target="_blank">Google</a></li>
<li><a href="https://www.wikipedia.org"
target="_blank">Wikipedia</a></li>
<li><a href="https://www.github.com" target="_blank">GitHub</a></li>
</ul>

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

<h1> My JavaScript Web Page</h1>

<p id="greeting">Click the button below to get a greeting!</p>


<button onclick="greetUser()">Greet Me</button>

<hr>

<h2> Live Time Display</h2>


<p id="time">Loading time...</p>

<hr>

<h2> Make It Colorful</h2>


<p>Click the button to change the background color randomly:</p>
<button onclick="changeColor()">Change Background Color</button>

<hr>

<h2> About This Page</h2>


<p>This page is made using basic HTML and JavaScript. It
demonstrates:</p>
<ul>
<li>JavaScript alerts and prompts</li>
<li>Dynamic content updates</li>
<li>Live clock using setInterval</li>
<li>Random background color changer</li>
</ul>

<hr>

<footer>

<p> Created by Nishant — Powered by JavaScript</p>


</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()">

<h1> XML Book Library (Offline)</h1>


<div id="output">Loading books from XML...</div>
</body>
</html>

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>

7.validate Xml file


Book.xml
<?xml version="1.0" encoding="UTF-8"?>
<library xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="book.xsd">

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

<h1> Book List from XML</h1>


<div class="library">
<xsl:for-each select="library/book">
<div class="book">
<h2><xsl:value-of select="title"/></h2>
<p><strong>Author:</strong> <xsl:value-of select="author"/></p>
<p><strong>Year:</strong> <xsl:value-of select="year"/></p>
</div>
</xsl:for-each>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

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>

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


</form>

</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();
}
}
}

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