CodeLens — Kodeviser
html.html
HTML 27,131 bytes
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeLens - Lær HTML</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/css/style.css">
    <style>
        .sidebar-html h6 { color: var(--color-html); }
        .sidebar-html .menu-item.active { border-right-color: var(--color-html); }
        .explanation-html { border-right-color: var(--color-html); }
        .explanation-html strong { color: var(--color-html); }
        .code-header-html h5 { color: var(--color-html); }
        .code-header-html .code-info { color: var(--color-css); }
        
        /* Vis alt knapp */
        .btn-show-all {
            background: #e94560;
            color: #fff;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 0.85rem;
            width: 100%;
            transition: all 0.3s;
            margin-bottom: 10px;
        }
        .btn-show-all:hover {
            background: #c73652;
            transform: scale(1.02);
        }
        
        /* Nullstill alle knapp */
        .btn-reset-all {
            background: #fd971f;
            color: #1a1a2e;
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.75rem;
            width: 100%;
            transition: all 0.3s;
            margin-top: 5px;
        }
        .btn-reset-all:hover {
            background: #e0861a;
            transform: scale(1.02);
        }
        
        /* Status for lagring */
        .storage-status {
            font-size: 0.7rem;
            color: #75715e;
            margin-top: 5px;
            text-align: center;
        }
        .storage-status .saved {
            color: #53d8fb;
        }
        
        /* Rediger knapp i kodevinduet */
        .btn-edit-code {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #fd971f;
            color: #1a1a2e;
            border: none;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.8rem;
            cursor: pointer;
            z-index: 5;
            opacity: 0.7;
            transition: opacity 0.3s;
        }
        .btn-edit-code:hover {
            opacity: 1;
        }
        
        /* Preview knapp */
        .btn-preview {
            background: #53d8fb;
            color: #1a1a2e;
            border: none;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.85rem;
            transition: all 0.3s;
        }
        .btn-preview:hover {
            background: #3ac0e0;
            transform: scale(1.02);
        }
        
        .code-viewer {
            position: relative;
        }
        
        /* Lagringsindikator */
        .save-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-left: 5px;
        }
        .save-indicator.saved {
            background: #53d8fb;
            box-shadow: 0 0 10px #53d8fb;
        }
        .save-indicator.unsaved {
            background: #fd971f;
            box-shadow: 0 0 10px #fd971f;
        }
    </style>
</head>
<body>

    <header class="codelens-header">
        <div class="brand">
            <i class="fa fa-html5"></i> CodeLens
            <span>— Lær HTML</span>
        </div>
        <div class="nav-links">
            <a href="index.html"><i class="fa fa-home"></i> Hjem</a>
            <a href="css.html"><i class="fa fa-css3"></i> CSS</a>
            <a href="js.html"><i class="fa fa-code"></i> JS</a>
            <a href="../index.php"><i class="fa fa-folder-open"></i> Filbehandler</a>
        </div>
    </header>

    <div class="codelens-container">
        <div class="row g-4">
            <div class="col-md-3">
                <div class="sidebar sidebar-html">
                    <h6><i class="fa fa-list-ul"></i> HTML Emner</h6>
                    
                    <!-- Vis alt knapp -->
                    <button class="btn-show-all" onclick="showAllTopics(topics)">
                        <i class="fa fa-eye"></i> Vis alle emner
                    </button>
                    
                    <div class="menu-item active" data-id="structure" onclick="loadTopic('structure', topics)">
                        <i class="fa fa-sitemap"></i> Struktur
                    </div>
                    <div class="menu-item" data-id="head" onclick="loadTopic('head', topics)">
                        <i class="fa fa-cog"></i> &lt;head&gt;
                    </div>
                    <div class="menu-item" data-id="body" onclick="loadTopic('body', topics)">
                        <i class="fa fa-eye"></i> &lt;body&gt;
                    </div>
                    <div class="menu-item" data-id="div" onclick="loadTopic('div', topics)">
                        <i class="fa fa-square-o"></i> &lt;div&gt;
                    </div>
                    <div class="menu-item" data-id="span" onclick="loadTopic('span', topics)">
                        <i class="fa fa-i-cursor"></i> &lt;span&gt;
                    </div>
                    <div class="menu-item" data-id="headings" onclick="loadTopic('headings', topics)">
                        <i class="fa fa-header"></i> h1-h6
                    </div>
                    <div class="menu-item" data-id="closing" onclick="loadTopic('closing', topics)">
                        <i class="fa fa-question-circle"></i> Hvorfor /?
                    </div>
                    <div class="menu-item" data-id="attributes" onclick="loadTopic('attributes', topics)">
                        <i class="fa fa-tags"></i> Attributes
                    </div>
                    <div class="menu-item" data-id="footer" onclick="loadTopic('footer', topics)">
                        <i class="fa fa-credit-card"></i> &lt;footer&gt;
                    </div>
                    <div class="menu-item" data-id="lists" onclick="loadTopic('lists', topics)">
                        <i class="fa fa-list"></i> Lister
                    </div>
                    <div class="menu-item" data-id="links" onclick="loadTopic('links', topics)">
                        <i class="fa fa-link"></i> Lenker
                    </div>
                    <div class="menu-item" data-id="images" onclick="loadTopic('images', topics)">
                        <i class="fa fa-picture-o"></i> Bilder
                    </div>
                    
                    <hr style="border-color: var(--border-color);">
                    <div class="color-legend">
                        <span><span class="dot" style="background:#f92672;"></span> Tags</span>
                        <span><span class="dot" style="background:#a6e22e;"></span> Attr.</span>
                        <span><span class="dot" style="background:#e6db74;"></span> Verdier</span>
                        <span><span class="dot" style="background:#75715e;"></span> Kommentarer</span>
                    </div>
                    <div style="margin-top: 10px; display: flex; flex-direction: column; gap: 5px;">
                        <button class="btn btn-sm btn-outline-primary-html w-100" onclick="copyCode('codeWindow')">
                            <i class="fa fa-copy"></i> Kopier kode
                        </button>
                        <button class="btn btn-sm btn-outline-primary-html w-100" onclick="editCode('codeWindow')">
                            <i class="fa fa-pencil"></i> Rediger kode
                        </button>
                        <button class="btn-reset-all" onclick="resetAllCode(topics)">
                            <i class="fa fa-refresh"></i> Nullstill ALLE endringer
                        </button>
                    </div>
                    <div class="storage-status">
                        <i class="fa fa-database"></i> 
                        <span id="storageStatus">Endringer lagres lokalt</span>
                    </div>
                </div>
            </div>
            
            <div class="col-md-9">
                <div class="code-viewer">
                    <div class="code-header code-header-html">
                        <h5>
                            <i class="fa fa-file-code-o"></i> 
                            <span id="topicTitle">HTML Struktur</span>
                            <span id="saveIndicator" class="save-indicator saved"></span>
                        </h5>
                        <div class="code-info">
                            <i class="fa fa-tag"></i> HTML
                            <span class="ms-3"><i class="fa fa-clock-o"></i> 12 emner</span>
                            <button class="btn-preview ms-3" onclick="showLivePreview()">
                                <i class="fa fa-eye"></i> Live Preview
                            </button>
                        </div>
                    </div>
                    <div id="codeWindow" class="code-window">
                        <span class="comment">&lt;!-- HTML Struktur --&gt;</span>
                        <span class="doctype">&lt;!DOCTYPE html&gt;</span>
                        <span class="tag">&lt;html</span> <span class="attr">lang</span>=<span class="value">"fa"</span><span class="tag">&gt;</span>
                        <span class="tag">&lt;head&gt;</span>
                            <span class="tag">&lt;meta</span> <span class="attr">charset</span>=<span class="value">"UTF-8"</span><span class="tag">&gt;</span>
                            <span class="tag">&lt;title&gt;</span>Min Side<span class="tag">&lt;/title&gt;</span>
                        <span class="tag">&lt;/head&gt;</span>
                        <span class="tag">&lt;body&gt;</span>
                            <span class="comment">&lt;!-- Innhold --&gt;</span>
                            <span class="tag">&lt;h1&gt;</span>Velkommen!<span class="tag">&lt;/h1&gt;</span>
                        <span class="tag">&lt;/body&gt;</span>
                        <span class="tag">&lt;/html&gt;</span>
                    </div>
                    <!-- Rediger-knapp på kodevinduet -->
                    <button class="btn-edit-code" onclick="editCode('codeWindow')">
                        <i class="fa fa-pencil"></i> Rediger
                    </button>
                </div>
                
                <div id="explanation" class="explanation explanation-html">
                    <strong>🧱 HTML Struktur</strong><br>
                    En HTML-side består av tre hoveddeler:
                    <ul>
                        <li><span class="highlight">&lt;head&gt;</span> — Metadata og ressurser</li>
                        <li><span class="highlight">&lt;body&gt;</span> — Synlig innhold</li>
                        <li><span class="highlight">&lt;footer&gt;</span> — Bunntekst</li>
                    </ul>
                    <span class="code-in-text">&lt;!DOCTYPE html&gt;</span> forteller nettleseren at dette er HTML5.
                </div>
            </div>
        </div>
    </div>

    <script src="../assets/js/main.js"></script>
    <script>
        // ====== HTML Topics ======
        const topics = {
            structure: {
                title: 'HTML Struktur',
                code: `<span class="comment">&lt;!-- HTML Struktur --&gt;</span>
        <span class="doctype">&lt;!DOCTYPE html&gt;</span>
        <span class="tag">&lt;html</span> <span class="attr">lang</span>=<span class="value">"fa"</span><span class="tag">&gt;</span>
        <span class="tag">&lt;head&gt;</span>
            <span class="tag">&lt;meta</span> <span class="attr">charset</span>=<span class="value">"UTF-8"</span><span class="tag">&gt;</span>
            <span class="tag">&lt;title&gt;</span>Min Side<span class="tag">&lt;/title&gt;</span>
        <span class="tag">&lt;/head&gt;</span>
        <span class="tag">&lt;body&gt;</span>
            <span class="comment">&lt;!-- Innhold --&gt;</span>
            <span class="tag">&lt;h1&gt;</span>Velkommen!<span class="tag">&lt;/h1&gt;</span>
        <span class="tag">&lt;/body&gt;</span>
        <span class="tag">&lt;/html&gt;</span>`,
                explain: `<strong>🧱 HTML Struktur</strong><br>
                En HTML-side består av tre hoveddeler:
                <ul>
                    <li><span class="highlight">&lt;head&gt;</span> — Metadata og ressurser</li>
                    <li><span class="highlight">&lt;body&gt;</span> — Synlig innhold</li>
                    <li><span class="highlight">&lt;footer&gt;</span> — Bunntekst</li>
                </ul>
                <span class="code-in-text">&lt;!DOCTYPE html&gt;</span> forteller nettleseren at dette er HTML5.`
            },
            head: {
                title: '&lt;head&gt;',
                code: `<span class="tag">&lt;head&gt;</span>
        <span class="tag">&lt;meta</span> <span class="attr">charset</span>=<span class="value">"UTF-8"</span><span class="tag">&gt;</span>
        <span class="tag">&lt;title&gt;</span>Min Side<span class="tag">&lt;/title&gt;</span>
        <span class="tag">&lt;link</span> <span class="attr">rel</span>=<span class="value">"stylesheet"</span> <span class="attr">href</span>=<span class="value">"style.css"</span><span class="tag">&gt;</span>
        <span class="tag">&lt;script</span> <span class="attr">src</span>=<span class="value">"script.js"</span><span class="tag">&gt;&lt;/script&gt;</span>
        <span class="tag">&lt;/head&gt;</span>`,
                explain: `🧠 <strong>&lt;head&gt;</strong> — Hode-seksjonen<br>
                Inneholder <span class="highlight">metadata</span> som:
                <ul>
                    <li><span class="highlight">&lt;meta charset="UTF-8"&gt;</span> — Tegnsett</li>
                    <li><span class="highlight">&lt;title&gt;</span> — Tittelen i nettleserfanen</li>
                    <li><span class="highlight">&lt;link&gt;</span> — Kobler til CSS-filer</li>
                    <li><span class="highlight">&lt;script&gt;</span> — Kobler til JavaScript-filer</li>
                </ul>
                Innholdet i <span class="code-in-text">&lt;head&gt;</span> vises <strong>ikke</strong> på selve siden.`
            },
            body: {
                title: '&lt;body&gt;',
                code: `<span class="tag">&lt;body&gt;</span>
        <span class="tag">&lt;h1&gt;</span>Overskrift<span class="tag">&lt;/h1&gt;</span>
        <span class="tag">&lt;p&gt;</span>Dette er et avsnitt med tekst.<span class="tag">&lt;/p&gt;</span>
        <span class="tag">&lt;div&gt;</span>
            <span class="tag">&lt;h2&gt;</span>Undertittel<span class="tag">&lt;/h2&gt;</span>
            <span class="tag">&lt;p&gt;</span>Mer tekst i en boks.<span class="tag">&lt;/p&gt;</span>
        <span class="tag">&lt;/div&gt;</span>
        <span class="tag">&lt;/body&gt;</span>`,
                explain: `👁️ <strong>&lt;body&gt;</strong> — Hovedinnholdet<br>
                <span class="highlight">Alt</span> som skrives her inne, vises på nettsiden.
                <ul>
                    <li><span class="highlight">&lt;h1&gt;</span> til <span class="highlight">&lt;h6&gt;</span> — Overskrifter</li>
                    <li><span class="highlight">&lt;p&gt;</span> — Avsnitt/tekst</li>
                    <li><span class="highlight">&lt;div&gt;</span> — Boks for gruppering</li>
                </ul>
                <span class="code-in-text">&lt;body&gt;</span> er det viktigste området for synlig innhold.`
            },
            div: {
                title: '&lt;div&gt;',
                code: `<span class="tag">&lt;div</span> <span class="attr">class</span>=<span class="value">"boks"</span><span class="tag">&gt;</span>
        <span class="tag">&lt;h2&gt;</span>Overskrift i boks<span class="tag">&lt;/h2&gt;</span>
        <span class="tag">&lt;p&gt;</span>Tekst som hører til i boksen.<span class="tag">&lt;/p&gt;</span>
        <span class="tag">&lt;/div&gt;</span>`,
                explain: `📦 <strong>&lt;div&gt;</strong> — En "boks" for gruppering<br>
                <ul>
                    <li>Brukes til å <span class="highlight">gruppere</span> innhold</li>
                    <li>Kan gi <span class="highlight">styling</span> med CSS (farge, bredde, osv.)</li>
                    <li>Er <span class="highlight">blokk</span>-element — tar hele bredden</li>
                </ul>`
            },
            span: {
                title: '&lt;span&gt;',
                code: `<span class="tag">&lt;p&gt;</span>
        Dette er en setning med et 
        <span class="tag">&lt;span</span> <span class="attr">style</span>=<span class="value">"color: #e94560;"</span><span class="tag">&gt;</span>
        rødt ord
        <span class="tag">&lt;/span&gt;</span>
        i teksten.
        <span class="tag">&lt;/p&gt;</span>`,
                explain: `✏️ <strong>&lt;span&gt;</strong> — Inline-boks for tekst<br>
                <ul>
                    <li><span class="highlight">Inline</span> — tar kun plassen til teksten</li>
                    <li>Brukes for å <span class="highlight">style</span> en liten del av teksten</li>
                    <li>Ofte brukt med <span class="highlight">CSS</span> eller <span class="highlight">JavaScript</span></li>
                </ul>`
            },
            headings: {
                title: 'Overskrifter h1-h6',
                code: `<span class="tag">&lt;h1&gt;</span>Største overskrift<span class="tag">&lt;/h1&gt;</span>
        <span class="tag">&lt;h2&gt;</span>Underoverskrift<span class="tag">&lt;/h2&gt;</span>
        <span class="tag">&lt;h3&gt;</span>Nivå 3<span class="tag">&lt;/h3&gt;</span>
        <span class="tag">&lt;h4&gt;</span>Nivå 4<span class="tag">&lt;/h4&gt;</span>
        <span class="tag">&lt;h5&gt;</span>Nivå 5<span class="tag">&lt;/h5&gt;</span>
        <span class="tag">&lt;h6&gt;</span>Minste overskrift<span class="tag">&lt;/h6&gt;</span>`,
                explain: `📐 <strong>Overskrifter h1 til h6</strong><br>
                <ul>
                    <li><span class="highlight">&lt;h1&gt;</span> — Størst, brukes til hovedoverskrift</li>
                    <li><span class="highlight">&lt;h2&gt;</span> til <span class="highlight">&lt;h6&gt;</span> — Underoverskrifter</li>
                    <li>Viktig for <span class="highlight">SEO</span> (søkemotoroptimalisering)</li>
                </ul>`
            },
            closing: {
                title: 'Hvorfor / (slash)?',
                code: `<span class="comment">&lt;!-- Tagg med åpning og lukking --&gt;</span>
        <span class="tag">&lt;p&gt;</span>  <span class="comment">&lt;-- Åpning --&gt;</span>
        Dette er et avsnitt.
        <span class="tag">&lt;/p&gt;</span> <span class="comment">&lt;-- Lukking med / --&gt;</span>
        
        <span class="comment">&lt;!-- Selvlukkende tagger --&gt;</span>
        <span class="tag">&lt;br&gt;</span>  <span class="comment">&lt;-- Linjeskift --&gt;</span>
        <span class="tag">&lt;img</span> <span class="attr">src</span>=<span class="value">"bilde.jpg"</span><span class="tag">&gt;</span> <span class="comment">&lt;-- Bilde --&gt;</span>`,
                explain: `❓ <strong>Hvorfor bruker vi / (slash)?</strong><br>
                <ul>
                    <li>De fleste HTML-tagger er <span class="highlight">par</span>: <span class="code-in-text">&lt;tagg&gt;</span> og <span class="code-in-text">&lt;/tagg&gt;</span></li>
                    <li><span class="highlight">/</span> forteller at taggen <strong>slutter</strong></li>
                    <li>Noen tagger er <span class="highlight">selvlukkende</span> og trenger ikke /</li>
                </ul>`
            },
            attributes: {
                title: 'Attributes (egenskaper)',
                code: `<span class="comment">&lt;!-- Eksempler på attributter --&gt;</span>
        <span class="tag">&lt;a</span> <span class="attr">href</span>=<span class="value">"https://example.com"</span> <span class="attr">target</span>=<span class="value">"_blank"</span><span class="tag">&gt;</span>Lenke<span class="tag">&lt;/a&gt;</span>
        
        <span class="tag">&lt;img</span> <span class="attr">src</span>=<span class="value">"bilde.jpg"</span> <span class="attr">alt</span>=<span class="value">"Beskrivelse"</span> <span class="attr">width</span>=<span class="value">"200"</span><span class="tag">&gt;</span>
        
        <span class="tag">&lt;div</span> <span class="attr">class</span>=<span class="value">"container"</span> <span class="attr">id</span>=<span class="value">"hoved"</span><span class="tag">&gt;</span>Innhold<span class="tag">&lt;/div&gt;</span>`,
                explain: `🏷️ <strong>Attributter</strong> — gir ekstra info til tagger<br>
                <ul>
                    <li><span class="highlight">href</span> — URL for lenke</li>
                    <li><span class="highlight">src</span> — Filbane for bilde</li>
                    <li><span class="highlight">alt</span> — Alternativ tekst for bilde</li>
                    <li><span class="highlight">class</span> og <span class="highlight">id</span> — Brukes til CSS-styling</li>
                </ul>`
            },
            footer: {
                title: '&lt;footer&gt;',
                code: `<span class="tag">&lt;footer&gt;</span>
        <span class="tag">&lt;p&gt;</span>&copy; 2024 Mitt Selskap<span class="tag">&lt;/p&gt;</span>
        <span class="tag">&lt;a</span> <span class="attr">href</span>=<span class="value">"mailto:kontakt@eksempel.no"</span><span class="tag">&gt;</span>Kontakt oss<span class="tag">&lt;/a&gt;</span>
        <span class="tag">&lt;/footer&gt;</span>`,
                explain: `🦶 <strong>&lt;footer&gt;</strong> — Bunntekst<br>
                <ul>
                    <li>Plasseres vanligvis <span class="highlight">nederst</span> på siden</li>
                    <li>Inneholder ofte <span class="highlight">opphavsrett</span>, kontaktinfo, lenker</li>
                    <li>Kan også brukes inne i <span class="code-in-text">&lt;article&gt;</span> eller <span class="code-in-text">&lt;section&gt;</span></li>
                </ul>`
            },
            lists: {
                title: 'Lister',
                code: `<span class="comment">&lt;!-- Ordnet liste (nummerert) --&gt;</span>
        <span class="tag">&lt;ol&gt;</span>
            <span class="tag">&lt;li&gt;</span>Første<span class="tag">&lt;/li&gt;</span>
            <span class="tag">&lt;li&gt;</span>Andre<span class="tag">&lt;/li&gt;</span>
            <span class="tag">&lt;li&gt;</span>Tredje<span class="tag">&lt;/li&gt;</span>
        <span class="tag">&lt;/ol&gt;</span>
        
        <span class="comment">&lt;!-- Uordnet liste (punkter) --&gt;</span>
        <span class="tag">&lt;ul&gt;</span>
            <span class="tag">&lt;li&gt;</span>Eple<span class="tag">&lt;/li&gt;</span>
            <span class="tag">&lt;li&gt;</span>Banan<span class="tag">&lt;/li&gt;</span>
            <span class="tag">&lt;li&gt;</span>Appelsin<span class="tag">&lt;/li&gt;</span>
        <span class="tag">&lt;/ul&gt;</span>`,
                explain: `📋 <strong>Lister</strong><br>
                <ul>
                    <li><span class="highlight">&lt;ol&gt;</span> — Ordnet liste (nummerert)</li>
                    <li><span class="highlight">&lt;ul&gt;</span> — Uordnet liste (med punkt)</li>
                    <li><span class="highlight">&lt;li&gt;</span> — Liste-element</li>
                </ul>`
            },
            links: {
                title: 'Lenker',
                code: `<span class="comment">&lt;!-- Vanlig lenke --&gt;</span>
        <span class="tag">&lt;a</span> <span class="attr">href</span>=<span class="value">"https://google.com"</span><span class="tag">&gt;</span>Gå til Google<span class="tag">&lt;/a&gt;</span>
        
        <span class="comment">&lt;!-- Lenke som åpnes i ny fane --&gt;</span>
        <span class="tag">&lt;a</span> <span class="attr">href</span>=<span class="value">"https://google.com"</span> <span class="attr">target</span>=<span class="value">"_blank"</span><span class="tag">&gt;</span>
            Google (ny fane)
        <span class="tag">&lt;/a&gt;</span>
        
        <span class="comment">&lt;!-- Lenke til e-post --&gt;</span>
        <span class="tag">&lt;a</span> <span class="attr">href</span>=<span class="value">"mailto:hei@eksempel.no"</span><span class="tag">&gt;</span>Send e-post<span class="tag">&lt;/a&gt;</span>`,
                explain: `🔗 <strong>Lenker</strong> — navigasjon på nettet<br>
                <ul>
                    <li><span class="highlight">href</span> — Målet for lenken</li>
                    <li><span class="highlight">target="_blank"</span> — Åpner lenken i <span class="highlight">ny fane</span></li>
                    <li>Kan lenke til <span class="highlight">sider, filer, e-post</span> og mer</li>
                </ul>`
            },
            images: {
                title: 'Bilder',
                code: `<span class="comment">&lt;!-- Legge til bilde --&gt;</span>
        <span class="tag">&lt;img</span> <span class="attr">src</span>=<span class="value">"bilde.jpg"</span> <span class="attr">alt</span>=<span class="value">"Beskrivelse av bildet"</span><span class="tag">&gt;</span>
        
        <span class="comment">&lt;!-- Bilde med bredde og høyde --&gt;</span>
        <span class="tag">&lt;img</span> <span class="attr">src</span>=<span class="value">"bilde.jpg"</span> <span class="attr">alt</span>=<span class="value">"Beskrivelse"</span> 
             <span class="attr">width</span>=<span class="value">"300"</span> <span class="attr">height</span>=<span class="value">"200"</span><span class="tag">&gt;</span>`,
                explain: `🖼️ <strong>Bilder</strong> — visuelt innhold<br>
                <ul>
                    <li><span class="highlight">src</span> — Filbanen til bildet</li>
                    <li><span class="highlight">alt</span> — <span class="highlight">Viktig!</span> Beskrivelse for skjermlesere</li>
                    <li><span class="highlight">width</span> og <span class="highlight">height</span> — Størrelse i piksler</li>
                </ul>
                <span class="code-in-text">&lt;img&gt;</span> er en <span class="highlight">selvlukkende</span> tagg.`
            }
        };

        // Start med struktur
        window.onload = function() {
            loadTopic('structure', topics);
        };
    </script>
</body>
</html>
( ! ) Warning: Undefined variable $file in C:\wamp64\www\php.karimy.no\tools\codelens1\index.php on line 246 Call Stack #TimeMemoryFunctionLocation 10.0001362560{main}( )...\index.php:0 20.0003391952show_code_viewer( $filename = 'html.html', $content = '<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>CodeLens - Lær HTML</title>\n <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">\n <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\n <link rel="stylesheet" href="../assets/css/style.css">\n <style>\n .sidebar-html h6'..., $ext = 'html' )...\index.php:39
( ! ) Deprecated: dirname(): Passing null to parameter #1 ($path) of type string is deprecated in C:\wamp64\www\php.karimy.no\tools\codelens1\index.php on line 246
Call Stack
#TimeMemoryFunctionLocation
10.0001362560{main}( )...\index.php:0
20.0003391952show_code_viewer( $filename = 'html.html', $content = '<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>CodeLens - Lær HTML</title>\n <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">\n <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\n <link rel="stylesheet" href="../assets/css/style.css">\n <style>\n .sidebar-html h6'..., $ext = 'html' )...\index.php:39
30.0013425880dirname( $path = NULL )...\index.php:246
" class="btn"> Tilbake
( ! ) Warning: Undefined variable $file in C:\wamp64\www\php.karimy.no\tools\codelens1\index.php on line 249 Call Stack #TimeMemoryFunctionLocation 10.0001362560{main}( )...\index.php:0 20.0003391952show_code_viewer( $filename = 'html.html', $content = '<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>CodeLens - Lær HTML</title>\n <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">\n <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\n <link rel="stylesheet" href="../assets/css/style.css">\n <style>\n .sidebar-html h6'..., $ext = 'html' )...\index.php:39
( ! ) Deprecated: urlencode(): Passing null to parameter #1 ($string) of type string is deprecated in C:\wamp64\www\php.karimy.no\tools\codelens1\index.php on line 249
Call Stack
#TimeMemoryFunctionLocation
10.0001362560{main}( )...\index.php:0
20.0003391952show_code_viewer( $filename = 'html.html', $content = '<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>CodeLens - Lær HTML</title>\n <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">\n <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\n <link rel="stylesheet" href="../assets/css/style.css">\n <style>\n .sidebar-html h6'..., $ext = 'html' )...\index.php:39
30.0024425880urlencode( $string = NULL )...\index.php:249
&raw=1" class="btn btn-primary" target="_blank"> Åpne raw
Gå til læring