сряда, 18 февруари 2026 г.

Сайт с меню



 Упражнение с меню, което се отваря в CONTENT чрез <iframe>.

📄 index.html (основен файл)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Моят учебен сайт</title>
</head>

<body>

<!-- HEADER -->
<table border="1" width="100%" height="80">
    <tr>
        <td align="center">
            <h1>МОЯТ УЧЕБЕН САЙТ</h1>
        </td>
    </tr>
</table>

<!-- NAVIGATION + CONTENT -->
<table border="1" width="100%" height="400">
    <tr>

        <!-- MENU -->
        <td width="20%" valign="top">
            <h3>МЕНЮ</h3>

            <a href="home.html" target="contentFrame">Начало</a><br><br>

            <a href="about.html" target="contentFrame">За нас</a><br><br>

            <a href="gallery.html" target="contentFrame">Галерия</a><br><br>

            <a href="contacts.html" target="contentFrame">Контакти</a><br><br>

            <a href="https://bg.wikipedia.org" target="contentFrame">
                Wikipedia
            </a>

        </td>

        <!-- CONTENT -->
        <td width="80%">
            <iframe name="contentFrame" width="100%" height="400">
            </iframe>
        </td>

    </tr>
</table>

<!-- FOOTER -->
<table border="1" width="100%" height="60">
    <tr>
        <td align="center">
            © 2026 Моето име
        </td>
    </tr>
</table>

</body>
</html>

📄 home.html

<!DOCTYPE html>
<html>
<body>

<h2>Начало</h2>
<p>Добре дошли в моя учебен сайт.</p>

</body>
</html>

📄 about.html

<!DOCTYPE html>
<html>
<body>

<h2>За нас</h2>
<p>Това е примерна страница за информация.</p>

</body>
</html>

📄 gallery.html

<!DOCTYPE html>
<html>
<body>

<h2>Галерия</h2>
<p>Тук могат да се добавят изображения.</p>

</body>
</html>

📄 contacts.html

<!DOCTYPE html>
<html>
<body>

<h2>Контакти</h2>
<p>Email: example@email.com</p>

</body>
</html>

С хоризонтално меню:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Елементарен уеб сайт</title>
</head>

<body>

<!-- HEADER -->
<table border="1" width="100%" height="80">
    <tr>
        <td align="center">
            <h1>HEADER</h1>
        </td>
    </tr>
</table>

<!-- HORIZONTAL MENU -->
<table border="1" width="100%" height="50">
    <tr align="center">

        <td>
            <a href="home.html" target="contentFrame">Начало</a>
        </td>

        <td>
            <a href="about.html" target="contentFrame">За нас</a>
        </td>

        <td>
            <a href="contacts.html" target="contentFrame">Контакти</a>
        </td>

        <td>
            <a href="https://bg.wikipedia.org" target="contentFrame">
                Wikipedia
            </a>
        </td>

    </tr>
</table>

<!-- CONTENT -->
<table border="1" width="100%" height="400">
    <tr>
        <td>
            <iframe name="contentFrame" width="100%" height="400">
            </iframe>
        </td>
    </tr>
</table>

<!-- FOOTER -->
<table border="1" width="100%" height="60">
    <tr>
        <td align="center">
            FOOTER
        </td>
    </tr>
</table>

</body>
</html>
 
Какво се промени?


✔ Менюто вече е отделна таблица

✔ Линковете са в една редица (<tr>)

✔ Всеки линк е в отделна клетка (<td>)

✔ Отварят се в iframe чрез target="contentFrame"
Публикувано от в
Етикети: