index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Complete - Interactive Learning Guide</title>
    <meta name="description" content="Your website description goes here">
    <meta name="keywords" content="comma-separated, keywords, for, your, site">
    <meta name="author" content="Your Name or Organization">

    <!-- Open Graph and Twitter Card Meta Tags -->
    <meta property="og:title" content="Your Page Title">
    <meta property="og:description" content="Your page description">
    <meta property="og:image" content="URL of image">
    <meta property="og:url" content="URL of page">
    <meta name="twitter:card" content="summary_large_image">

    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="icon" type="image/png" href="/favicon.png">
    
</head>

<body class="dark-theme">
    <nav class="navbar">
        <div class="logo" id="logo-container" role="button" tabindex="0" aria-label="Toggle theme">
            <!-- <img class="main-logo" src="/images/logo.png\" alt="HTML Complete Logo"> -->
            <svg class="main-logo" viewBox="0 0 200 70" src="/images/logo1.svg">
            <defs>
                <linearGradient id="pancakeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
                    <stop offset="50%" style="stop-color:#FFA500;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#FF8C00;stop-opacity:1" />
                </linearGradient>
            </defs>
            <ellipse cx="50" cy="85" rx="45" ry="8" fill="#8B4513" opacity="0.3" />
            <ellipse cx="50" cy="75" rx="40" ry="6" fill="url(#pancakeGradient)" />
            <ellipse cx="50" cy="65" rx="38" ry="6" fill="url(#pancakeGradient)" />
            <ellipse cx="50" cy="55" rx="35" ry="6" fill="url(#pancakeGradient)" />
            <ellipse cx="50" cy="45" rx="33" ry="6" fill="url(#pancakeGradient)" />
            <ellipse cx="50" cy="35" rx="30" ry="6" fill="url(#pancakeGradient)" />
            <rect x="45" y="15" width="10" height="15" fill="#FFD700" rx="2" />
            </svg>
            <span>HTML Complete</span>
        </div>

        <button class="menu-toggle" id="menu-toggle" aria-label="Toggle navigation menu">
            ☰
        </button>
    </nav>

    <aside class="cake-sidebar" id="cake-sidenav" role="navigation" aria-label="HTML topics navigation">
        <div class="sidebar-header">HTML Sections</div>
        <div id="left-cake-nav-inner">
            <!-- Navigation Links based on your flow chart -->
            <a href="#" class="nav-link" onclick="loadContent('html_home.html')">HTML HOME</a>
            <a href="#" class="nav-link" onclick="loadContent('html_introduction.html')">HTML Introduction</a>
            <a href="#" class="nav-link" onclick="loadContent('html_editors.html')">HTML Editors</a>
            <a href="#" class="nav-link" onclick="loadContent('html_basics.html')">HTML Basics</a>
            <a href="#" class="nav-link" onclick="loadContent('html_elements.html')">HTML Elements</a>
            <a href="#" class="nav-link" onclick="loadContent('html_attributes.html')">HTML Attributes</a>
            <a href="#" class="nav-link" onclick="loadContent('html_heading.html')">HTML Headings</a>
            <a href="#" class="nav-link" onclick="loadContent('html_paragraphs.html')">HTML Paragraphs</a>
            <a href="#" class="nav-link" onclick="loadContent('html_styles.html')">HTML Styles</a>
            <a href="#" class="nav-link" onclick="loadContent('html_formatting.html')">HTML Formatting</a>
            <a href="#" class="nav-link" onclick="loadContent('html_quotations.html')">HTML Quotations</a>
            <a href="#" class="nav-link" onclick="loadContent('html_comments.html')">HTML Comments</a>
            <a href="#" class="nav-link" onclick="loadContent('html_colors.html')">HTML Colors</a>
            <a href="#" class="nav-link" onclick="loadContent('html_css.html')">HTML CSS</a>
            <a href="#" class="nav-link" onclick="loadContent('html_links.html')">HTML Links</a>
            <a href="#" class="nav-link" onclick="loadContent('html_images.html')">HTML Images</a>
            <a href="#" class="nav-link" onclick="loadContent('html_favicon.html')">HTML Favicons</a>
            <a href="#" class="nav-link" onclick="loadContent('html_page_title.html')">HTML Page Title</a>
            <a href="#" class="nav-link" onclick="loadContent('html_tables.html')">HTML Tables</a>
            <a href="#" class="nav-link" onclick="loadContent('html_lists.html')">HTML Lists</a>
            <a href="#" class="nav-link" onclick="loadContent('html_block_inline.html')">HTML Block & Inline</a>
            <a href="#" class="nav-link" onclick="loadContent('html_divs.html')">HTML Divs</a>
            <a href="#" class="nav-link" onclick="loadContent('html_classes.html')">HTML Classes</a>
            <a href="#" class="nav-link" onclick="loadContent('html_id.html')">HTML ID</a>
            <a href="#" class="nav-link" onclick="loadContent('html_iframes.html')">HTML iframes</a>
            <a href="#" class="nav-link" onclick="loadContent('html_javascript.html')">HTML JavaScript</a>
            <a href="#" class="nav-link" onclick="loadContent('html_file_paths.html')">HTML File Paths</a>
            <a href="#" class="nav-link" onclick="loadContent('html_layout.html')">HTML Layout</a>
            <a href="#" class="nav-link" onclick="loadContent('html_responsive.html')">HTML Responsive</a>
            <a href="#" class="nav-link" onclick="loadContent('html_computercode.html')">HTML Computer Code</a>
            <a href="#" class="nav-link" onclick="loadContent('html_semantic.html')">HTML Semantic</a>
            <a href="#" class="nav-link" onclick="loadContent('html_style_guide.html')">HTML Style Guide</a>
            <a href="#" class="nav-link" onclick="loadContent('html_entities.html')">HTML Entities</a>
            <a href="#" class="nav-link" onclick="loadContent('html_symbols.html')">HTML Symbols</a>
            <a href="#" class="nav-link" onclick="loadContent('html_emojis.html')">HTML Emojis</a>
            <a href="#" class="nav-link" onclick="loadContent('html_charsets.html')">HTML Charsets</a>
            <a href="#" class="nav-link" onclick="loadContent('html_url_encode.html')">HTML URL Encode</a>
            <a href="#" class="nav-link" onclick="loadContent('html_vs_xhtml.html')">HTML vs XHTML</a>
        </div>
    </aside>

    <main class="main-content" id="main-content">
        <div class="container hideable" id="intro-section">
            <h2>HTML is the standard markup language for creating Web pages.</h2>
            <ul>
                <li><strong>Definition of HTML:</strong> HTML is an acronym for Hyper Text Markup Language</li>
                <li><strong>Framework:</strong> HTML defines the organization of a webpage's framework</li>
                <li><strong>Elements:</strong> HTML is composed of various elements</li>
                <li><strong>Annotations:</strong> HTML elements annotate content, specifying roles like "heading,"
                    "paragraph," "link," and more</li>
            </ul>
        </div>

        <div class="container-view" id="content-container" style="display: none;">
            <!-- Content loaded dynamically here -->
        </div>

        <div class="container hideable" id="welcome-section">
            <h1>HTML COMPLETE <em>Just Add Thinking!</em></h1>

            <h2>Welcome to the World of Web Creation</h2>
            <p>
                Imagine having the power to build your own corner of the internet, to craft digital landscapes that come
                to life with just a few keystrokes. That's the promise and allure of HTML—the language that forms the
                backbone of the web. If you're ready to embark on an exciting journey into the realm of web development,
                you've come to the right place.
            </p>

            <h2>Unveiling the Mystery of HTML</h2>
            <p>
                HTML, or HyperText Markup Language, is the enchanting script that weaves together the fabric of the
                internet. It's the language spoken by your browser, instructing it on how to structure and display the
                content you see on your favorite websites. From the humble text you read to the captivating images and
                interactive forms, HTML is the silent maestro orchestrating the symphony of the digital world.
            </p>

            <h2>Why Should You Learn HTML?</h2>
            <ol>
                <li>
                    <h3>Empower Your Creativity</h3>
                    <p>
                        HTML is your paintbrush, and the browser is your canvas. Learning HTML means unlocking the
                        ability to turn your wildest ideas into tangible digital experiences. Want to create a personal
                        blog, showcase your portfolio, or build an interactive storytelling site? HTML is your first and
                        essential step.
                    </p>
                </li>
                <li>
                    <h3>Gateway to Web Development</h3>
                    <p>
                        Dreaming of becoming a web developer? HTML is your passport to this exciting realm. As you delve
                        into the world of web development, you'll discover how HTML harmonizes with other languages like
                        CSS for styling and JavaScript for interactivity. Together, they form a powerful trio that can
                        breathe life into any digital creation.
                    </p>
                </li>
                <li>
                    <h3>Open the Door to Opportunities</h3>
                    <p>
                        In the ever-evolving tech landscape, HTML remains a constant. Mastering this foundational
                        language opens doors to diverse opportunities—from web development roles to content creation
                        positions. It's a skill that's not only timeless but also in perpetual demand.
                    </p>
                </li>
            </ol>

            <h2>Let the Journey Begin</h2>
            <h3>Your First Glimpse of HTML</h3>
            <p>
                Here is the basic HTML structure you will need in creating your very first HTML document:
            </p>
        </div>

        <div class="container hideable" id="code-example">
            <h2>Advanced HTML Boilerplate</h2>
            <div class="code-container">
                <svg class="clipboard-icon" onclick="copyCode(this)" viewBox="0 0 24 24" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z"
                        fill="currentColor" opacity="0.7" />
                </svg>
                <pre><code>
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Your Awesome Website&lt;/title&gt;
    &lt;meta name="description" content="Your website description goes here"&gt;
    &lt;meta name="keywords" content="comma-separated, keywords, for, your, site"&gt;
    &lt;meta name="author" content="Your Name or Organization"&gt;

    &lt;!-- Open Graph and Twitter Card Meta Tags --&gt;
    &lt;meta property="og:title" content="Your Page Title"&gt;
    &lt;meta property="og:description" content="Your page description"&gt;
    &lt;meta property="og:image" content="URL of image"&gt;
    &lt;meta property="og:url" content="URL of page"&gt;
    &lt;meta name="twitter:card" content="summary_large_image"&gt;

    &lt;!-- Favicon --&gt;
    &lt;link rel="icon" type="image/png" href="/favicon.png"&gt;

    &lt;!-- Link to your main CSS file --&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;

    &lt;!-- Optional: Link to a CSS reset or normalize file --&gt;
    &lt;link rel="stylesheet" href="css/normalize.css"&gt;

&lt;/head&gt;
&lt;body&gt;

    &lt;header&gt;
        &lt;h1&gt;Website Title&lt;/h1&gt;
        &lt;nav aria-label="Main Navigation"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
    &lt;/header&gt;

    &lt;main&gt;
        &lt;section&gt;
            &lt;h2&gt;Section Title&lt;/h2&gt;
            &lt;p&gt;Your content goes here.&lt;/p&gt;
        &lt;/section&gt;

        &lt;section aria-labelledby="section-heading"&gt;
            &lt;h2 id="section-heading"&gt;Another Section&lt;/h2&gt;
            &lt;p&gt;More content.&lt;/p&gt;
        &lt;/section&gt;

        &lt;!-- Example of WAI-ARIA usage for a custom interactive element --&gt;
        &lt;div role="button" aria-pressed="false" tabindex="0"&gt;Interactive Button&lt;/div&gt;

        &lt;!-- Example of internationalization consideration: language attribute --&gt;
        &lt;p lang="es"&gt;Hola, mundo!&lt;/p&gt;

        &lt;!-- Example of an index list --&gt;
        &lt;ul class="index"&gt;
            &lt;li&gt;Item 1&lt;/li&gt;
            &lt;li&gt;Item 2&lt;/li&gt;
        &lt;/ul&gt;

    &lt;/main&gt;

    &lt;footer&gt;
        &lt;p&gt;&amp;copy; 2025 Your Website&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- Link to your main JavaScript file --&gt;
    &lt;script src="js/script.js" defer&gt;&lt;/script&gt;

    &lt;!-- Optional: Add Google Analytics or other scripts here --&gt;
    &lt;script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID"&gt;&lt;/script&gt;
    &lt;script&gt;
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'YOUR_GA_ID');
    &lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
    </code></pre>
            </div>
        </div>
    </main>

<script src="script.js" defer></script>
</body>

</html>