Scribd
Upload
4 views

JNA_HTML5_Explained

HTML (HyperText Markup Language) is a markup language used to structure web pages, while HTML5 is its fifth version that introduces new features like multimedia support and modern tags. The document includes a sample HTML and CSS code for a webpage titled 'JNA Secrets', showcasing its structure, styling, and content sections. Key elements include a header, navigation, main content with fragrance sections, and a footer.

Uploaded by

jelaherediano67
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

JNA_HTML5_Explained

HTML (HyperText Markup Language) is a markup language used to structure web pages, while HTML5 is its fifth version that introduces new features like multimedia support and modern tags. The document includes a sample HTML and CSS code for a webpage titled 'JNA Secrets', showcasing its structure, styling, and content sections. Key elements include a header, navigation, main content with fragrance sections, and a footer.

Uploaded by

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

What is HTML and HTML5?

HTML stands for HyperText Markup Language. It's not a programming language; it’s a
markup language that tells web browsers what parts a page has—like headings,
paragraphs, images, and links. Think of it like the skeleton of a website.

HTML5 is the fifth version of HTML. It added new features like built-in video/audio,
better support for mobile devices, and new tags (like <header>, <footer>, etc.). It’s what
modern websites use.

When you write <!DOCTYPE html>, it tells the browser: “This is an HTML5 document—
please use modern rules to show this page.”

HTML + CSS Page Explanation (Simple)

Full HTML + CSS Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JNA Secrets</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=UnifrakturCook&display=swap"
rel="stylesheet" />
<style>
body {
font-family: 'UnifrakturCook', cursive;
margin: 0;
padding: 0;
background: url('https://c4.wallpaperflare.com/wallpaper/883/240/54/japan-peach-
trees-wallpaper-preview.jpg') no-repeat center center fixed;
background-size: cover;
color: #333;
line-height: 1.7;
backdrop-filter: brightness(0.8);
}
*, *::before, *::after {
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background-color: #ffccbc;
padding: 20px;
text-align: center;
}
nav {
background-color: #ffb599;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
gap: 20px;
}
nav ul li a {
text-decoration: none;
color: #703f28;
font-weight: bold;
}
nav ul li a:hover {
color: #fff3e0;
}
main {
padding: 40px 20px;
}
section {
margin-bottom: 40px;
background: #fff;
padding: 20px;
border-radius: 10px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.item-card {
background: #ffe6d6;
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
text-align: center;
}
footer {
background-color: #ffccbc;
text-align: center;
padding: 15px;
}
@media (max-width: 600px) {
nav ul {
flex-direction: column;
gap: 10px;
}
}
</style>
</head>
<body>
<header>
<h1>JNA Secrets</h1>
</header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#mens-fragrances">Men's</a></li>
<li><a href="#womens-fragrances">Women's</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main class="container">
<section id="about">
<h2>About</h2>
<p>Welcome to JNA Secrets. Find your perfect scent.</p>
</section>
<section id="mens-fragrances" class="grid-container">
<div class="item-card">
<img src="image1.jpg" alt="Fragrance">
<h3>Fragrance 1</h3>
<p>Fresh and bold.</p>
<h4>$29.99</h4>
</div>
</section>
<section id="womens-fragrances" class="grid-container">
<div class="item-card">
<img src="image2.jpg" alt="Fragrance">
<h3>Fragrance 2</h3>
<p>Soft and sweet.</p>
<h4>$34.99</h4>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: [email protected]</p>
<p>Phone: 123-456-7890</p>
</section>
</main>
<footer>
<p>&copy; 2025 JNA Secrets - Find your signature scent</p>
</footer>
</body>
</html>

You might also like