Текст книги "Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете"

Как мы уже сказали выше, при создании сайтов обычно используются изображения трех форматов: JPG (JPEG), GIF и PNG. Мы ограничимся только JPEG-файлами.

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

Примечание

Изображение, которое мы используем для примера, можно загрузить, пройдя по ссылке www.pcbee.ru/wp-content/uploads/2011/08/mfu_0.jpg. Сохраните это изображение на Рабочем столе под именем mfu_0.jpg.

Для вставки рисунков используется тег <img src="URL">, где URL – это адрес картинки.

Для изменения нашей страницы необходимо открыть HTML-файл в Блокноте. Для этого щелкаем на значке файла правой кнопкой мыши и выбираем команду Открыть с помощью → Блокнот. Далее изменим текст согласно образцу (рис. 3.10).

Рис. 3.10. Добавление в HTML-код ссылок на изображения

Первое изображение хранится на сервере в Интернете, а второе – на Рабочем столе вместе с веб-страницей. Просматривая страницу в окне браузера, мы убеждаемся, что картинки исправно отображаются (рис. 3.11).

Рис. 3.11. Одинаковые файлы с изображениями, добавленными на веб-страницу, находятся в разных местах

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

Рис. 3.12. Второй рисунок не отображается, так как HTML-страница была перемещена в другую папку

Причина заключается в том, что браузер «пытается найти» файл с изображением в той же папке, где находится веб-страница, но там его нет. Наверняка подобную картину вы видели на некоторых сайтах. На своих сайтах необходимо избегать проблем с отображением рисунков.

Что делать, если рисунок не отображается?

• Проверить, есть ли это изображение по указанной в HTML-коде ссылке.

• Посмотреть, правильно ли указан путь к картинке.

• Проверить, правильно ли указано имя файла. К примеру, вместо названия файла name.jpg вы могли написать name.jpeg.

Нелишне вспомнить такое определение из курса информатики: полное имя файла – это путь к файлу вместе с именем файла. В случае с абсолютной ссылкой указывается именно полное имя файла, и даже если веб-страница будет перемещена, файл будет найден (если, конечно, он не удален). В случае с относительной ссылкой путь к файлу указывается относительно того каталога, где находится веб-страница.

Внимание!

Главное, что вы должны понять из этого примера, – в действительности никаких изображений на веб-странице нет – есть только ссылки на эти изображения и указание на то, в каком месте вебстраницы и как они должны отображаться.

Если проводить аналогию с текстовым редактором типа Microsoft Word, то там мы, как правило, внедряем изображения в документ, то есть они реально присутствуют в текстовом файле. Однако при использовании Word возможен такой вариант вставки изображения, как на веб-странице. Иначе говоря, картинка будет отображаться в тексте, но файл с ней будет храниться отдельно от документа. Если удалить файл с изображением, то картинка перестанет отображаться и в документе Word.

До сих пор мы не использовали атрибуты тегов, с помощью которых можно менять свойства объекта, соответствующего тегу. Для начала рассмотрим такие атрибуты тега <img>, как alt, width и height.

• alt – позволяет добавлять к картинке так называемый альтернативный текст. Если в браузере отключить показ картинок (это часто приходилось делать во время коммутируемого доступа к Интернету, чтобы ускорить загрузку веб-страниц), то вместо картинок можно увидеть текст, который дает пользователю понять, что изображено на рисунке. На данный момент альтернативный текст более важен не для удобства пользователей, а для обеспечения возможности поиска по картинкам, как это делают современные поисковые сервисы.

• width и height – если вы немного знаете английский язык, то уже догадались, что речь идет о ширине и высоте изображения. Пример выше показывает, что браузер и без этих атрибутов корректно отображает картинки. Но, как и в случае с тегом alt, нам необходимо подыграть поисковым сервисам, которые при выполнении поиска по картинкам предоставляют пользователям возможность указать размер изображения. К примеру, Google позволяет искать изображения не только по таким критериям, как большие, средние, маленькие, но и по точному размеру в пикселах. Более того, есть возможность указать тип изображения: цветное или черно-белое (рис. 3.13).

Рис. 3.13. При поиске изображений Google позволяет указывать различные параметры рисунка

Как вы уже, наверное, догадались, необходимую информацию для подобного поиска Google берет из атрибутов width и height. Соответственно, при создании сайтов было бы неразумно отказаться от их использования.

Сейчас мы применим указанные выше атрибуты на нашей тестовой странице. Нужно изменить HTML-код согласно листингу 3.1.

Листинг 3.1. Использование атрибутов alt, width и height <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" >

</body>

</html>

Теперь можно посмотреть, какие изменения произошли на веб-странице. После использования атрибута alt появился альтернативный текст, а добавление атрибутов width и height привело к появлению рамки, показывающей размер изображения (рис. 3.14).

Рис. 3.14. Результат использования атрибутов alt, width и height

Теперь пришла пора немного рассказать об использовании таблиц. Но перед тем как продолжить, вернем нашу страницу на Рабочий стол, чтобы отображались обе картинки.

Работая с текстовыми редакторами, мы не раз использовали таблицы, чтобы, к примеру, более наглядно представить числовую информацию. В сайтах у таблиц изначально было несколько другое предназначение: размещение элементов веб-страницы по своим местам (позиционирование). Иными словами, в ячейки таблицы помещались определенные элементы: меню сайта, заголовок, картинки, текст и т. д. Иногда границы делались невидимыми, и при просмотре веб-страницы пользователь видел лишь результат верстки с помощью таблицы, даже не догадываясь о ее существовании.

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

В качестве эксперимента добавим на нашу веб-страницу под рисунками небольшую таблицу, состоящую из двух строк и двух столбцов (четыре ячейки), добавив немного кода (листинг 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. Изображения в ячейках таблицы

Пример с использованием таблицы в качестве инструмента позиционирования изображений выбран неслучайно. Таблицу мы будем применять при описании конкретных вариантов размещения рекламных блоков.

Теперь пора перейти от обычных таблиц к каскадным таблицам стилей.

Ранее мы добавляли атрибуты к тегу 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.

• Фотографии, полученные с помощью цифрового фотоаппарата, перед публикацией в Интернете необходимо обработать в растровых графических редакторах.

• На фотографиях, авторские права на которые принадлежат вам, стоит размещать водяные знаки или надписи с адресом сайта.

• При загрузке файлов на сервер удобно использовать протокол FTP. В качестве FTP-клиента подойдет бесплатная программа FileZilla.

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

Глава 4
Создание динамического сайта на платном хостинге

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

4.1. Работа с платежными системами

Перед тем как перейти к теме покупки платных услуг, а именно хостинга и доменов, необходимо ответить на вопрос, каким образом их оплачивать. Самыми удобными способами оплаты хостинга и доменов являются электронные платежные системы. Наиболее популярны в России «Яндекс.Деньги» и WebMoney.

«Яндекс.Деньги» – это удобный способ быстро оплачивать покупки и услуги в Интернете. Если у вас нет учетной записи на «Яндексе», то можно начать регистрацию со страницы https://money.yandex.ru/. Если учетная запись есть, то можно зайти в почту и перейти по ссылке Деньги, после чего вам будет предложено открыть кошелек. Для этого понадобится лишь создать платежный пароль для доступа к «Яндекс. Кошельку». Пароли от почтового ящика и платежный пароль не совпадают. Это сделано не случайно, а в целях повышения безопасности. Страница «Яндекс.Деньги» выглядит, как на рис. 4.1.

Рис. 4.1. Страница платежной системы «Яндекс.Деньги»

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

Примечание

Периодически интерфейс веб-страниц претерпевает изменения. По этой причине не удивляйтесь, если ваша страница платежной системы «Яндекс.Деньги» будет отличаться от приведенной на рис. 4.1.

Самый простой способ пополнить счет – отправить деньги через терминал для оплаты мобильной связи, которым пользовался, наверное, каждый современный человек. Увы, не все терминалы позволяют переводить средства на «Яндекс.Деньги», это особенно проблематично в небольших населенных пунктах. В этом случае вы можете купить карты предоплаты в почтовом отделении, продажа которых началась с весны 2011 г.

Если на вашей почте таких карт не продают, то можете пополнить свой счет в «Яндекс.Деньгах» наличным почтовым переводом. Для этого вам нужно заполнить форму на странице http://money.yandex.ru/prepaid/post/?from=isrch (рис. 4.2).

Рис. 4.2. Форма для пополнения счета в «Яндекс.Деньгах» наличным почтовым переводом

После заполнения формы необходимо распечатать готовый бланк и прийти с ним в ближайшее отделение Почты России для оплаты наличными. В примере мы указали сумму для оплаты 1000 руб. Этих денег должно хватить на оплату доменного имени и хостинга начального уровня на один год с учетом возможных процентов, которые будут сниматься при переводе денег.

Внимание!

Если у вас несколько учетных записей на «Яндексе», заполняйте указанную форму на странице только той учетной записи, куда должны прийти деньги.

Узнать обо всех возможных способах пополнения «Яндекс. Кошелька» можно, пройдя по ссылке https://money.yandex.ru/prepaid/?from=bal.

WebMoney – платежная система, позволяющая работать как с российскими рублями, так и с другими денежными единицами, например долларами США и евро. Для регистрации в системе WebMoney необходимо пройти по ссылке http://www.webmoney.ru и нажать кнопку Регистрация. Для пользователей, у которых возникнут проблемы с регистрацией, на странице https://start.webmoney.ru размещен видеокурс, где подробно рассмотрен процесс создания кошелька WebMoney (рис. 4.3).

Рис. 4.3. На странице https://start.webmoney.ru размещен видеокурс, в котором показано, как создать кошелек WebMoney

Каждый зарегистрированный пользователь системы WebMoney имеет свой WMID – регистрационный номер пользователя. Управлять WMID можно разными способами по выбору участника системы:

• WM Keeper Classic – профессиональное приложение под Microsoft WindowsTM;

• WM Keeper Light – браузерная версия с персональными сертификатами;

• WM Keeper Mini – браузерная версия с базовой функциональностью;

• WM Keeper Mobile – приложение для мобильных телефонов.

Внимание!

В плане безопасности самым надежным из перечисленных приложений для ПК является WM Keeper Classic. Однако после переустановки операционной системы у начинающих пользователей могут возникнуть проблемы при восстановлении работы WM Keeper Classic. По этой причине есть смысл первоначально воспользоваться браузерными версиями приложений.

Пополнить кошелек WebMoney можно с мобильного телефона, воспользовавшись страницей сайта «Платежный мир» https://www.ruru.ru/init-payment/346 (рис. 4.4).

Рис. 4.4. Страница сайта «Платежный мир» для пополнения кошелька WebMoney

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