Чат PHP-разработчиков
Табличная вёрстка 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
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (20)


grigorov

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

ivashkevich

И Вам спасибо!

ol

Спасибо за урок!

ivashkevich

Всё, прошли курс?)

ol

Последний урок остался.

ivashkevich

Супер! Поздравляю!) Сможете написать мне в ВК с целью обратной связи?

ol

Спасибо) Конечно.

tishoma

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

ivashkevich

Спасибо, учту!

zlobni4

Добрый день! Спасибо за курс, все понятно и легко. Я как раз стремлюсь к изучению PHP, но стоит ли мне сначала взяться плотнее за css, js ?

ivashkevich

Привет! Есть два разных направления: frontend и backend. В современных серьезных компаниях принято разделять обязанности между программистами как раз по этим направлениям. Я для себя выбрал бэкенд и пишу на PHP. JS и CSS знаю очень поверхностно - в работе мне это не нужно.
Если хотите тоже в этом направлении развиваться, то будет достаточно одного только HTML. Про CSS и JS вообще сейчас можете не думать.

Lungren

Посоветуйте,пожалуйста, не могу уменьшить высоту хэдера.

ivashkevich

Код просто скопировали, или добавляли что-то своё?

Lungren

Не копировал, делал сам по вашим рекомендациям, конечно, пытался хэдэр немного уменьшить сам, чтобы он был полностью в экране. Он небольшой, просто сделать его чуть меньше.

С уважением, Сергей.

ivashkevich

Можно уменьшить отступы заголовка, добавив в стили:

#header h1 {
    margin-top: 5px;
    margin-bottom: 5px;
}

С этими значениями можно поиграться.

Ну и уменьшить сам размер шрифта можно через:

#header {
    font-size: 20px;
}
CoinDig1@mail.ru

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

ivashkevich

Приветствую, спасибо за отзыв :)
Мой facebook

radinpasha13@gmail.com

Здраствуйте,хотелось бы узнать кое-что по поводу данного курса.Как много информации о html он содержит?Много ли еще неизвестного остается для прошедших этот курс(только в html)?

ivashkevich

Чисто в HTML - тут почти всё есть. Если же по теме вёрстки, то есть ещё куча всего в CSS. Но если вы планируете стать Backend-разработчиком, то вам это не нужно.

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований