Hugging Face's logo

Spaces:
GGUFGuy
/
html-test
Running

App Files Community
html-test / index.html
GGUFGuy's picture
GGUFGuy
Update index.html
8fccb42 verified
Raw History Blame Contribute Delete
22.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Examples - Everything</title>
<style>
body {
margin: 0;
background: #111;
color: #eee;
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #222;
padding: 40px 20px;
text-align: center;
border-bottom: 2px solid #444;
}
header h1 {
margin: 0;
font-size: 42px;
}
nav {
background: #181818;
padding: 15px;
text-align: center;
position: sticky;
top: 0;
z-index: 10;
border-bottom: 1px solid #333;
}
nav a {
color: #66ccff;
margin: 0 10px;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
main {
max-width: 1100px;
margin: auto;
padding: 30px 20px;
}
section {
background: #1c1c1c;
margin: 25px 0;
padding: 25px;
border-radius: 12px;
border: 1px solid #333;
}
section h2 {
color: #66ccff;
margin-top: 0;
}
.card {
background: #252525;
padding: 20px;
margin: 15px 0;
border-radius: 10px;
border: 1px solid #444;
}
button {
padding: 10px 18px;
background: #333;
color: white;
border: 1px solid #666;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background: #444;
}
input,
textarea,
select {
background: #111;
color: white;
border: 1px solid #555;
padding: 8px;
border-radius: 5px;
margin: 4px;
}
textarea {
width: 90%;
max-width: 600px;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #555;
padding: 10px;
text-align: left;
}
th {
background: #333;
}
img {
max-width: 100%;
}
.gallery {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.gallery img {
width: 200px;
height: 140px;
object-fit: cover;
border-radius: 8px;
}
.center {
text-align: center;
}
pre {
background: #080808;
padding: 20px;
overflow-x: auto;
border-radius: 8px;
}
code {
color: #ddd;
}
footer {
background: #222;
text-align: center;
padding: 40px;
margin-top: 40px;
}
.big {
font-size: 30px;
}
</style>
</head>
<body>
<header>
<h1>HTML Examples</h1>
<p>One giant HTML file containing lots of examples</p>
</header>
<nav>
<a href="#headings">Headings</a>
<a href="#text">Text</a>
<a href="#links">Links</a>
<a href="#images">Images</a>
<a href="#lists">Lists</a>
<a href="#forms">Forms</a>
<a href="#tables">Tables</a>
<a href="#media">Media</a>
<a href="#javascript">JavaScript</a>
</nav>
<main>
<!-- ========================================= -->
<!-- BASIC HTML -->
<!-- ========================================= -->
<section>
<h2>1. Basic HTML</h2>
<p>This entire webpage is an HTML document.</p>
<p>
HTML stands for
<strong>HyperText Markup Language</strong>.
</p>
</section>
<!-- ========================================= -->
<!-- HEADINGS -->
<!-- ========================================= -->
<section id="headings">
<h2>2. Headings</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</section>
<!-- ========================================= -->
<!-- TEXT -->
<!-- ========================================= -->
<section id="text">
<h2>3. Text Formatting</h2>
<p>This is a normal paragraph.</p>
<p><strong>Bold text</strong></p>
<p><em>Italic text</em></p>
<p><u>Underlined text</u></p>
<p><mark>Highlighted text</mark></p>
<p><small>Small text</small></p>
<p><del>Deleted text</del></p>
<p><ins>Inserted text</ins></p>
<p>Water: H<sub>2</sub>O</p>
<p>Mathematics: x<sup>2</sup></p>
<p>
This is<br>
a line break.
</p>
<hr>
<p>Text after a horizontal line.</p>
</section>
<!-- ========================================= -->
<!-- LINKS -->
<!-- ========================================= -->
<section id="links">
<h2>4. Links</h2>
<p>
<a href="https://example.com">
Visit Example
</a>
</p>
<p>
<a
href="https://example.com"
target="_blank">
Open Example in a new tab
</a>
</p>
<p>
<a href="mailto:test@example.com">
Send an email
</a>
</p>
<p>
<a href="#forms">
Jump to the forms section
</a>
</p>
</section>
<!-- ========================================= -->
<!-- IMAGES -->
<!-- ========================================= -->
<section id="images">
<h2>5. Images</h2>
<p>Example image:</p>
<img
src="https://placehold.co/400x250"
alt="Placeholder image"
width="400">
<p>
Images can have alt text, dimensions, borders,
links, and more.
</p>
</section>
<!-- ========================================= -->
<!-- LISTS -->
<!-- ========================================= -->
<section id="lists">
<h2>6. Lists</h2>
<h3>Unordered List</h3>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grape</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Turn on computer</li>
<li>Open browser</li>
<li>Visit website</li>
</ol>
<h3>Nested List</h3>
<ul>
<li>
Linux
<ul>
<li>Arch</li>
<li>Debian</li>
<li>Manjaro</li>
<li>Ubuntu</li>
</ul>
</li>
<li>
Windows
<ul>
<li>Windows 7</li>
<li>Windows 8</li>
<li>Windows 10</li>
<li>Windows 11</li>
</ul>
</li>
<li>
macOS
</li>
</ul>
</section>
<!-- ========================================= -->
<!-- BUTTONS -->
<!-- ========================================= -->
<section>
<h2>7. Buttons</h2>
<button>Normal Button</button>
<button onclick="alert('Hello from JavaScript!')">
Click Me
</button>
<button onclick="changeMessage()">
Change Message
</button>
<p id="message">
This message can be changed.
</p>
</section>
<!-- ========================================= -->
<!-- FORMS -->
<!-- ========================================= -->
<section id="forms">
<h2>8. Forms</h2>
<form onsubmit="return submitForm(event)">
<label for="name">
Name:
</label>
<input
id="name"
name="name"
type="text"
placeholder="Enter your name">
<br><br>
<label for="password">
Password:
</label>
<input
id="password"
name="password"
type="password"
placeholder="Password">
<br><br>
<label for="email">
Email:
</label>
<input
id="email"
name="email"
type="email"
placeholder="you@example.com">
<br><br>
<button type="submit">
Submit
</button>
</form>
</section>
<!-- ========================================= -->
<!-- INPUT TYPES -->
<!-- ========================================= -->
<section>
<h2>9. Input Types</h2>
<p>
<label>Text:</label>
<input type="text">
</p>
<p>
<label>Password:</label>
<input type="password">
</p>
<p>
<label>Email:</label>
<input type="email">
</p>
<p>
<label>Number:</label>
<input type="number">
</p>
<p>
<label>Date:</label>
<input type="date">
</p>
<p>
<label>Time:</label>
<input type="time">
</p>
<p>
<label>Color:</label>
<input type="color">
</p>
<p>
<label>File:</label>
<input type="file">
</p>
<p>
<label>
<input type="checkbox">
Checkbox
</label>
</p>
<p>
<label>
<input
type="radio"
name="radio">
Radio option 1
</label>
<label>
<input
type="radio"
name="radio">
Radio option 2
</label>
</p>
<p>
<label>Range:</label>
<input type="range">
</p>
<p>
<label>Search:</label>
<input type="search">
</p>
<p>
<label>URL:</label>
<input type="url">
</p>
</section>
<!-- ========================================= -->
<!-- TEXTAREA -->
<!-- ========================================= -->
<section>
<h2>10. Text Area</h2>
<textarea
rows="10"
cols="50"
placeholder="Type something here..."></textarea>
</section>
<!-- ========================================= -->
<!-- SELECT -->
<!-- ========================================= -->
<section>
<h2>11. Dropdown Menu</h2>
<label for="os">
Choose an operating system:
</label>
<select id="os">
<option>Linux</option>
<option>Windows</option>
<option>macOS</option>
<option>FreeBSD</option>
<option>Other</option>
</select>
</section>
<!-- ========================================= -->
<!-- TABLE -->
<!-- ========================================= -->
<section id="tables">
<h2>12. Table</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Operating System</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>Linux</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Windows</td>
</tr>
<tr>
<td>Charlie</td>
<td>22</td>
<td>macOS</td>
</tr>
</table>
</section>
<!-- ========================================= -->
<!-- CARDS -->
<!-- ========================================= -->
<section>
<h2>13. Cards</h2>
<div class="card">
<h3>My Computer</h3>
<p>Ryzen 5 CPU</p>
<p>8 GB RAM</p>
<p>512 GB SSD</p>
<button>
View Details
</button>
</div>
<div class="card">
<h3>Another Computer</h3>
<p>Intel CPU</p>
<p>16 GB RAM</p>
<p>1 TB SSD</p>
<button>
View Details
</button>
</div>
</section>
<!-- ========================================= -->
<!-- SEMANTIC HTML -->
<!-- ========================================= -->
<section>
<h2>14. Semantic HTML</h2>
<article class="card">
<header>
<h3>Example Article</h3>
</header>
<p>
This demonstrates semantic elements
such as article, header, section, and footer.
</p>
<footer>
<small>
Article footer
</small>
</footer>
</article>
</section>
<!-- ========================================= -->
<!-- DETAILS -->
<!-- ========================================= -->
<section>
<h2>15. Expandable Content</h2>
<details>
<summary>
Click to expand
</summary>
<p>
This content was hidden until you
clicked the summary.
</p>
</details>
</section>
<!-- ========================================= -->
<!-- MEDIA -->
<!-- ========================================= -->
<section id="media">
<h2>16. Video</h2>
<video
width="640"
controls>
<source
src="video.mp4"
type="video/mp4">
Your browser does not support video.
</video>
</section>
<section>
<h2>17. Audio</h2>
<audio controls>
<source
src="music.mp3"
type="audio/mpeg">
Your browser does not support audio.
</audio>
</section>
<!-- ========================================= -->
<!-- IFRAME -->
<!-- ========================================= -->
<section>
<h2>18. IFrame</h2>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="Example video"
allowfullscreen>
</iframe>
</section>
<!-- ========================================= -->
<!-- PROGRESS -->
<!-- ========================================= -->
<section>
<h2>19. Progress Bar</h2>
<label for="progress">
Progress:
</label>
<progress
id="progress"
value="70"
max="100">
70%
</progress>
<p>
70% complete
</p>
</section>
<!-- ========================================= -->
<!-- CODE -->
<!-- ========================================= -->
<section>
<h2>20. Code</h2>
<pre><code>#include &lt;stdio.h&gt;
int main() {
printf("Hello, world!");
return 0;
}</code></pre>
</section>
<!-- ========================================= -->
<!-- IMAGE GALLERY -->
<!-- ========================================= -->
<section>
<h2>21. Image Gallery</h2>
<div class="gallery">
<img
src="https://placehold.co/400x300?text=Image+1"
alt="Image 1">
<img
src="https://placehold.co/400x300?text=Image+2"
alt="Image 2">
<img
src="https://placehold.co/400x300?text=Image+3"
alt="Image 3">
<img
src="https://placehold.co/400x300?text=Image+4"
alt="Image 4">
</div>
</section>
<!-- ========================================= -->
<!-- LOGIN -->
<!-- ========================================= -->
<section>
<h2>22. Login Form</h2>
<form onsubmit="login(event)">
<label for="loginUsername">
Username:
</label>
<input
id="loginUsername"
type="text"
required>
<br><br>
<label for="loginPassword">
Password:
</label>
<input
id="loginPassword"
type="password"
required>
<br><br>
<button type="submit">
Log In
</button>
</form>
<p id="loginResult"></p>
</section>
<!-- ========================================= -->
<!-- JAVASCRIPT -->
<!-- ========================================= -->
<section id="javascript">
<h2>23. JavaScript Examples</h2>
<button onclick="showTime()">
Show Current Time
</button>
<p id="clock">
Click the button.
</p>
<button onclick="randomNumber()">
Generate Random Number
</button>
<p id="random">
No number yet.
</p>
<button onclick="toggleText()">
Toggle Text
</button>
<p id="toggle">
👋 Hello! You can hide me.
</p>
</section>
<!-- ========================================= -->
<!-- FULL MINI SITE -->
<!-- ========================================= -->
<section>
<h2>24. Mini Website Example</h2>
<div class="card">
<header>
<h2>My Website</h2>
<p>Welcome!</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Projects</a>
<a href="#">About</a>
</nav>
<main>
<h3>My Projects</h3>
<div class="card">
<h4>Project One</h4>
<p>
This is my first project.
</p>
<button>
Learn More
</button>
</div>
<div class="card">
<h4>Project Two</h4>
<p>
This is my second project.
</p>
<button>
Learn More
</button>
</div>
</main>
<footer>
Mini website footer
</footer>
</div>
</section>
<!-- ========================================= -->
<!-- EXTRA HTML ELEMENTS -->
<!-- ========================================= -->
<section>
<h2>25. More HTML Elements</h2>
<p>
<abbr title="HyperText Markup Language">
HTML
</abbr>
</p>
<blockquote>
This is a block quotation.
</blockquote>
<q>
This is an inline quotation.
</q>
<p>
Keyboard:
<kbd>Ctrl</kbd>
+
<kbd>C</kbd>
</p>
<p>
Variable:
<var>x</var>
</p>
<p>
Output:
<samp>Hello World</samp>
</p>
<address>
Example address<br>
Example City
</address>
<p>
<time datetime="2026-08-25">
August 25, 2026
</time>
</p>
</section>
<!-- ========================================= -->
<!-- FINAL -->
<!-- ========================================= -->
<section class="center">
<h2 class="big">
🎉 That's a LOT of HTML!
</h2>
<p>
All of these examples are contained
inside this one HTML file.
</p>
<button onclick="alert('You reached the end! 🎉')">
Finish
</button>
</section>
</main>
<footer>
<p>
HTML Examples • 2026
</p>
<p>
Made with HTML, CSS, and JavaScript.
</p>
</footer>
<!-- ========================================= -->
<!-- JAVASCRIPT -->
<!-- ========================================= -->
<script>
function changeMessage() {
document.getElementById("message").textContent =
"🎉 The message changed!";
}
function submitForm(event) {
event.preventDefault();
alert("Form submitted!");
return false;
}
function login(event) {
event.preventDefault();
const username =
document.getElementById("loginUsername").value;
document.getElementById("loginResult").textContent =
"Welcome, " + username + "! 👋";
}
function showTime() {
const now = new Date();
document.getElementById("clock").textContent =
now.toString();
}
function randomNumber() {
const number =
Math.floor(Math.random() * 100) + 1;
document.getElementById("random").textContent =
"Random number: " + number;
}
function toggleText() {
const element =
document.getElementById("toggle");
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
</script>
</body>
</html>