Чат Telegram
Группа ВКонтакте
Табличная вёрстка HTML-страничек. Прототип сайта

Табличная вёрстка HTML-страничек. Прототип сайта

Всем привет, друзья! Что же, пришло время подвести итог о проделанной работе. Мы научились оформлять текст, работать со ссылками и картинками, даже изучили такую сложную тему как таблицы.

Я очень рад за тех из Вас, кто дошёл с самого начала курса до этого урока. Поверьте, таких как Вы - единицы. И несмотря на то, что данный курс доступен абсолютно для всех чуть ли не бесплатно, способность довести начатое до конца получается далеко не у всех. Продолжайте в том же духе! У Вас всё получится!

Теперь же давайте используем все наши знания в одном большом практическом занятии. В этом уроке мы самостоятельно создадим простой сайт из нескольких HTML-страничек.

В этом уроке было бы очень много буков. К счастью, у нас есть более удобный формат - видео :)

А в следующем уроке мы выложим получившийся мини-сайт в Интернет.

Результаты кода из видео:

styles.css:

body {
    background-image: url("background.jpg");
}

#layout {
    width: 100%;
    max-width: 1024px;
    margin: auto;
    background-color: white;
    border-collapse: collapse;
}

td {
    padding: 20px;
    vertical-align: top;
    border: solid 1px blue;
}

.bookImage {
    padding-right: 20px;
}

#header {
    font-size: 30px;
}

#footer {
    text-align: center;
}

index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Книги для программиста</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<table id="layout">
    <tr>
        <td colspan="2" id="header">
            <h1>Книги для программистов</h1>
        </td>
    </tr>
    <tr>

        <td>
            <h2>Совершенный код. Мастер-класс</h2>
            <img class="bookImage" align="left" src="1.jpg" alt="Совершенный код. Мастер-класс" width="60px">
            Более 10 лет первое издание этой книги считалось одним из лучших практических руководств по программированию...
            <br><br>
            <a href="buy1.html">Купить эту книгу</a>

            <br>
            <br>
            <hr>

            <h2>Git для профессионального программиста</h2>
            <img class="bookImage" align="left" src="2.jpg" alt="Git для профессионального программиста" width="60px">
            Эта книга представляет собой обновленное руководство по использованию Git в современных условиях...
            <br><br>
            <a href="buy2.html">Купить эту книгу</a>
        </td>

        <td width="300px">
            <h3>Меню</h3>
            <ul>
                <li><a href="index.html">Главная страница</a></li>
                <li><a href="about-us.html">О нас</a></li>
                <li><a href="contacts.html">Контакты</a></li>
            </ul>
        </td>
    </tr>
    <tr>
        <td id="footer" colspan="2">Все права защищены (c) 2019</td>
    </tr>
</table>

</body>
</html>

buy1.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Совершенный код. Мастер-класс - Книги для программиста</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<table id="layout">
    <tr>
        <td colspan="2" id="header">
            <strong>Книги для программистов</strong>
        </td>
    </tr>
    <tr>
        <td>
            <h1>Совершенный код. Мастер-класс</h1>
            <img class="bookImage" align="left" src="1.jpg" alt="Совершенный код. Мастер-класс" width="60px">
            Более 10 лет первое издание этой книги считалось одним из лучших практических руководств по программированию. ...

            <h2>Форма заказа</h2>
            <form action="/order" style="text-align: center">
                <label>
                    Адрес для доставки:
                    <input type="text" name="address" size="50">
                    <br>
                    <br>
                    <input type="submit" value="Заказать книгу">
                </label>
            </form>
        </td>

        <td width="300px">
            <h3>Меню</h3>
            <ul>
                <li><a href="index.html">Главная страница</a></li>
                <li><a href="about-us.html">О нас</a></li>
                <li><a href="contacts.html">Контакты</a></li>
            </ul>
        </td>
    </tr>
    <tr>
        <td id="footer" colspan="2">Все права защищены (c) 2019</td>
    </tr>
</table>

</body>
</html>

В следующем уроке мы выложим наши странички в Интернет, чтобы их могли увидеть другие люди. Всем пока!

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Комментарии (24)
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
loader
Есть вопрос по программированию?
Здесь быстро ответят!
Задать вопрос
Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
loader
Форум веб-разработчиков
Здесь все!
Перейти
loader
Логические задачи с собеседований