В качестве эксперимента добавим на нашу веб-страницу под рисунками небольшую таблицу, состоящую из двух строк и двух столбцов (четыре ячейки), добавив немного кода (листинг 3.2).
Листинг 3.2. Добавление таблицы под рисунками <html>
<html>
<head>
<title>МФУ для дома</title>
</head>
<body>
<h1>МФУ для дома</h1>
<img src="http://pcbee.ru/wp-content/uploads/2011/08/mfu_0.jpg"
alt="МФУ для дома фото" width="200" height="200">
<img src="mfu_0.jpg" alt="МФУ для дома фото" width="200"
height="200">
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</body>
</html>
При просмотре в браузере мы видим, что под рисунками появилась таблица с прозрачными границами, состоящая из четырех ячеек. В каждой ячейке есть надпись – Ячейка 1, Ячейка 2, Ячейка 3, Ячейка 4 (рис. 3.15).
Рис. 3.15. На странице появилась таблица с невидимыми границами, состоящая из четырех ячеек
Теперь мы предлагаем вам самостоятельное задание. Необходимо поместить первое изображение вместо надписи Ячейка 1, а второе – вместо надписи Ячейка 4. Если вы все сделаете правильно, то результат будет таким, как на рис. 3.16.
Рис. 3.16. Изображения в ячейках таблицы
Пример с использованием таблицы в качестве инструмента позиционирования изображений выбран неслучайно. Таблицу мы будем применять при описании конкретных вариантов размещения рекламных блоков.
Теперь пора перейти от обычных таблиц к каскадным таблицам стилей.
Введение в CSS
Ранее мы добавляли атрибуты к тегу img. Как вы понимаете, другие теги тоже могут содержать атрибуты, но иногда нет необходимости добавлять их в код HTML-страницы, о чем мы сейчас и расскажем.
Изначально заголовок на нашей странице размещен по левому краю и имеет черный цвет. Допустим, нужно выровнять его по центру и установить для него зеленый цвет. Для этого вносим изменения в код страницы в контейнере <h1></h1>: <h1 align="center"> <font color="green"> ФУ для дома</h1>, после чего заголовок будет размещен по центру страницы и окрасится в зеленый цвет (рис. 3.17).
Рис. 3.17. Заголовок размещен по центру за счет атрибута align
Если сайт состоит из 1000 страниц, то подобные изменения придется вносить в заголовки каждой из них.
Может случиться так, что через некоторое время снова понадобится разместить заголовок по левому краю, а цвет сделать синим. В этом случае придется вновь править код 1000 страниц. Как вы понимаете, это крайне неудобно. По этой причине все параметры форматирования (изменения внешнего вида) страницы выгодней держать в так называемых каскадных таблицах стилей – CSS. В таблице стилей можно указать, каким образом должно форматироваться содержимое тех или иных тегов веб-страницы, после чего один-единственный файл со стилями можно подключить к 1000 страницам и таким образом изменить их форматирование. Иными словами, изменения в каскадной таблице стилей приведут к изменениям на всех веб-страницах, к которым она подключена.
Перед созданием каскадной таблицы стилей мы уберем все форматирование заголовка первого уровня, то есть вернем все к состоянию, изображенному на рис. 3.16. Каскадную таблицу стилей мы будем создавать с помощью все того же Блокнота. Откройте Блокнот и наберите код из листинга 3.3.
Листинг 3.3. Содержимое файла каскадной таблицы стилей
h1
{
text-align: center;
color: green;
font-style:italic;
}
Наша таблица стилей должна отформатировать заголовок первого уровня следующим образом:
• выравнивание: по центру;
• цвет: зеленый;
• начертание: курсив.
Созданную таблицу стилей необходимо сохранить подобно тому, как мы сохраняли веб-страницу, но указать расширение. css. В нашем случае мы сохранили файл под именем style.css.
Для того чтобы подключить каскадную таблицу стилей к веб-странице, добавим в код страницы ссылку на CSS: <link rel="stylesheet" type="text/ css" href="style.css"> сразу перед закрывающим тегом </head>. Код нашей страницы на этом этапе выглядит, как в листинге 3.4.
Листинг 3.4. Код веб-страницы с подключенной таблицей CSS <html>
<html>
<head>
<title>МФУ для дома</title>
<!– Комментарий. Подключаем таблицу стилей –>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>МФУ для дома</h1>
<table>
<tr>
<td> <img src="http://pcbee.ru/wp-content/uploads/2011/08/mfu_0.jpg" alt="МФУ для дома фото" width="200" height="200"> </td>
<td>Ячейка 2</td>
</tr>
<td>Ячейка 3</td>
<td> <img src="mfu_0.jpg" alt="МФУ для дома фото" width="200"
height="200"> </td>
</body>
</html>
В код мы добавили комментарий, который заключен в соответствующие теги. Текст, находящийся внутри этих тегов, не будет отображаться на странице, но поможет нам вспомнить, какой элемент за что отвечает.
Совет
При создании или правке веб-страниц не ленитесь добавлять комментарии, так как в дальнейшем они помогут сэкономить время. Человек не в состоянии запомнить все, что он когда-то делал, поэтому комментарии дадут возможность освежить память. Если вы собираетесь удалять с веб-страницы большой фрагмент кода, но сомневаетесь в своих действиях, лучше «закомментируйте» этот фрагмент. Если понадобится вернуть все в исходное состояние, достаточно будет удалить теги комментариев.
После подключения каскадной таблицы стилей к веб-странице оценим полученный результат в браузере (рис. 3.18).
Рис. 3.18. Страница с подключенной таблицей стилей
Итак, мы создали веб-страницу и подключили к ней каскадную таблицу стилей. Теперь можно поставить заключительную точку: загрузить результат нашей работы в Интернет.
Публикация сайта
После того как мы создали одностраничный сайт, его необходимо опубликовать, то есть разместить на каком-либо хостинге Интернета. Для примера используем упомянутый ранее сервис «Народ», начав регистрацию на странице http://narod.yandex.ru (рис. 3.19).
Рис. 3.19. Сервис «Народ»
Наш сайт посвящен МФУ для дома, поэтому в процессе регистрации мы подобрали логин mfuhome, отображающий тематику нашего сайта. После регистрации, зная логин и пароль доступа к сервису, можно загрузить на него наш сайт.
Для загрузки сайта на бесплатный хостинг «Народа» воспользуемся популярным бесплатным FTP-клиентом FileZilla, который можно скачать с сайта http://filezilla-project.org. Для подключения к серверу с помощью FileZilla необходимо знать следующие данные:
• хост: mfuhome.ftp.narod.ru;
• логин: mfuhome;
• пароль.
Введя указанные данные, нужно нажать кнопку Быстрое соединение и подключиться к серверу по протоколу FTP, предназначенному для передачи данных (рис. 3.20).
Рис. 3.20. Подключение к серверу прошло удачно
Окно FileZilla разделено на две части: в левой отображаются файлы, размещенные на локальном компьютере, в правой – файлы, расположенные на сервере. Как видно из рис. 3.20, на сервере уже есть папка inc с полезной для начинающих веб-мастеров информацией и файл robots.txt, в котором находится информация, предназначенная для поисковой системы.
В левой части мы уже выделили знакомые вам файлы, теперь их можно скопировать на сервер, перетащив мышью с левой панели на правую. Попробуем зайти на сайт по адресу http://mfuhome.narod2.ru и посмотреть, что у нас получилось. Увы, браузер Google Chrome сообщает, что нет главной страницы (рис. 3.21).
Рис. 3.21. Страница недоступна
Дело в том, что браузер не смог найти главную страницу, которая должна называться особым образом, например index.htm, то есть содержать до расширения слово index. Чтобы исправить ошибку, переименуем файл, расположенный на сервере, из proba_pera.htm в index.htm. Для этого в контекстном меню выберем команду Переименовать (рис. 3.22).
Рис. 3.22. Переименование файла непосредственно на сервере
После переименования снова зайдем на сайт. Теперь страница отображается без проблем (рис. 3.23).
Рис. 3.23. Созданная нами страница доступна по адресу http://mfuhome.narod2.ru
Предлагаем вам еще немного потренироваться, используя новые теги.
• <p></p> – теги позволяют формировать абзацы. Вы уже, наверное, заметили, что в отличие от Microsoft Word абзацы разделены так называемой «отбивкой» – более широким отступом, чем между строками.
• <br> – это одиночный тег, который предназначен для перевода строки без образования нового абзаца (без отбивки).
• <a href ="url"> текст ссылки (анкор) <a> – ссылка на другую веб-страницу.
• <hr> – еще один одиночный тег, который создает горизонтальную линию, заполняющую всю свободную ширину экрана.
• <strong></strong> – теги выделяют текст полужирным.
3.4. Выводы
• Для работы над сайтами крайне важно знать основы HTML.
• Фотографии, полученные с помощью цифрового фотоаппарата, перед публикацией в Интернете необходимо обработать в растровых графических редакторах.
