23.03.2017   3576

Табличная вёрстка 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">
            <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) 2017</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) 2017</td>
    </tr>
</table>

</body>
</html>

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

Следующий урок Предыдущий урок

Комментарии

 grigorov 2017-05-26 11:24:52
0

Спасибо за видеоурок, было очень познавательно!

Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности