Табличная вёрстка 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>В следующем уроке мы выложим наши странички в Интернет, чтобы их могли увидеть другие люди. Всем пока!
Комментарии