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

В этом подразделе мы рассмотрим такую «фишку» uCoz, как конструктор. Он работает только на сайте и при условии, что вы вошли на сайт под учетной записью администратора. С помощью конструктора можно менять, добавлять блоки сайта, а также вносить изменения в шаблон даже без знания HTML.

Для того чтобы активизировать этот инструмент, необходимо зайти на сайт и авторизоваться. В админ-баре следует выбрать команду Конструктор → Включить конструктор. После включения режима Конструктор страница будет разделена на две части двойной линией (рис. 2.27).

Рис. 2.27. Страница в режиме конструктора

Теперь можно изменить содержание блоков. Для этого надо щелкнуть на изображении шестеренки. В базе uCoz собрано большое количество различных гаджетов (рис. 2.28).

Рис. 2.28. Гаджеты, доступные для добавления в блок

Кроме того, в режиме конструктора можно изменить надпись в заголовке сайта «Мой сайт». Для этого щелкаем на надписи, затем пишем свой вариант и нажимаем клавишу Enter. В данном случае заменим стандартную надпись названием нашего сайта – «Мои рецепты». После выполнения всех операций вновь нажимаем кнопку Конструктор, а затем – Сохранить изменения.

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

Рис. 2.29. Включение редактора главной страницы

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

Рис. 2.30. Главная страница сайта «Мои рецепты» www.moirecepty.ucoz.ru

Наш сайт трудно назвать шедевром, но и времени на его создание потребовалось совсем немного.

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

Хотя uCoz и позиционирует себя как сервис, позволяющий создавать динамические сайты на бесплатной основе, многие возможности доступны только за деньги. Расценки вряд ли можно назвать демократичными, поэтому мы не можем советовать использовать uCoz для создания коммерческих сайтов.

2.8. Стоит ли создавать сайты на бесплатном хостинге?

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

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

Многие подобные сайты канули в лету, но некоторые превратились в «живых мертвецов». Чтобы сохранить интригу, мы не будем сразу посвящать вас в суть использованного нами словосочетания со зловещей окраской, а познакомим с двумя заброшенными сайтами, размещенными на бесплатном хостинге «Народ».

Первый сайт называется «Мяу – все о кошках» (www.miaow7.narod.ru). Как вы понимаете, он посвящен братьям нашим меньшим. Что касается уникальности, то, увы, уникален только шаблон и то отчасти, так как фотографии для него взяты из Интернета (рис. 2.31).

Рис. 2.31. Сайт «Мяу – все о кошках»

Второй сайт нацелен на фанатов Гарри Поттера и размещен по адресу www.harry-potter-fan.narod.ru (рис. 2.32).

Рис. 2.32. Фан-сайт Гарри Поттера

Как и в первом случае, контент на 80 % неуникален. Как вы догадываетесь, сайты созданы детьми, в частности дочерьми одного из авторов книги. Совокупный доход с этих сайтов составляет около $50 в месяц. С одной стороны, сумма смехотворная, но, учитывая, что эти деньги практически падают с неба, очень даже неплохо. Сожалеть остается только о том, что таких сайтов лишь два, а не 100, ведь при таком раскладе «халявный» заработок превысил бы среднюю зарплату по Российской Федерации.

Так вот, понятие «живые мертвецы» наилучшим образом подходит для этих двух сайтов. Этими сайтами длительное время никто не занимается, но они продолжают жить и приносить доход. Более того, у них периодически наблюдается рост посещаемости.

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

• В любой момент хостер может «прикрыть» ваш сайт, если ему покажется, что вы нарушаете пользовательское соглашение.

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

• Хотя на сайт и удается привлечь прямых рекламодателей, цена за размещение рекламы меньше, чем на сайтах, размещенных на платном хостинге.

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

Хотя «народный» сайт можно протолкнуть в «Яндекс.Директ», существует жесткое ограничение на рекламу. Рекламный блок может быть только один, он должен располагаться в верхней части экрана и при этом нельзя изменить его внешний вид (цвет фона, шрифта и т. д.).

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

Совет

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

2.9. Выводы

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

• Если вы хотите получить большую гибкость при работе над сайтом, делайте выбор в пользу динамических сайтов.

• В качестве бесплатной площадки для экспериментирования с динамическими сайтами вполне подойдет uCoz.

• Бесплатный сыр только в мышеловке – не стоит делать ставку на бесплатный хостинг, тем более если сайт создается для заработка.

Развлекательно-познавательная часть повествования на этом заканчивается, и начинается подготовка к серьезной работе. Перед тем как перейти к теме создания «коммерческих» сайтов, настоятельно рекомендуем не пропускать следующую главу, посвященную HTML.

Глава 3
HTML и не только

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

3.1. Что такое HTML и стоит ли тратить время на его изучение?

Как мы уже сказали в главе 1, аббревиатура HTML определяет язык разметки гипертекста (Hyper Text Markup Language). По сути дела, гипертекст – это текст, описывающий особую разметку, которая указывает браузеру, где и в каком виде отображать содержимое веб-страницы. К примеру, браузер должен знать, что картинку надо выводить по центру, а текст под ней должен быть зеленого цвета.

Не стоит путать HTML с языками программирования. На языках программирования, таких как Java, C++, Pascal и т. д., пишутся программы, а с помощью HTML лишь размечается обычный текст, который после подобной разметки превращается в гипертекст.

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

Как увидеть гипертекст конкретной веб-страницы? Очень просто – необходимо щелкнуть правой кнопкой мыши на открытой веб-странице (но не на картинке) и выбрать команду для отображения исходного кода. Для браузера Google Chrome это команда Просмотр кода страницы, для Opera – Исходный код, а для Mozilla Firefox – Исходный код страницы.

Вот так, к примеру, выглядит HTML-код веб-страницы одного из сайтов, открытый в браузере Google Chrome (рис. 3.1).

Рис. 3.1. HTML-код веб-страницы

Первоначально все выглядит несколько пугающе, но, поверьте, со временем это нагромождение непонятных символов превратится в более или менее привычную картину. Уже сейчас можно увидеть наличие на странице английских слов, заключенных в угловые скобки, например <head>.

Это так называемые управляющие символы – tags, или «теги». Любой профессиональный веб-мастер знает HTML, как любой профессиональный музыкант знает нотную грамоту. Но стоит ли тратить время на изучение HTML начинающим веб-мастерам, если и без его знания можно создавать сайты? Действительно, создавая сайт на uCoz, мы обошлись без знания HTML, но только потому, что не меняли шаблон и не использовали сторонний HTML-код. Увы, в реальных условиях без этого не обойтись. Готовясь к серьезной работе, не стоит пропускать эту главу. Постарайтесь вникнуть в основы HTML, так как в дальнейшем это сократит время работы над вашими сайтами.

Перед тем как переходить к созданию веб-страницы, немного расскажем о картинках.

3.2. О картинках

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

Совет

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

Поскольку картинки – это далеко не последний элемент любой веб-страницы, стоит поговорить о них подробней.

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

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

В графических файлах хранятся изображения, которые могут быть растровыми и векторными. Применительно к созданию сайтов нас в первую очередь интересуют растровые изображения. Они хранятся в памяти компьютера в виде точек (пикселов) различного цвета.

К основным типам растровых графических файлов относятся GIF, JPG (JPEG), PNG, BMP и TIF. При создании сайтов необходимо использовать только форматы GIF, JPG (JPEG) и PNG.

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

JPEG – «любимый» формат пользователей Интернета. Именно в нем, как правило, хранятся фотографии, выложенные на различных сайтах. Формат JPEG позволяет хранить изображение с большим количеством цветов – около 16 млн.

PNG – очень перспективный формат применительно к Интернету. Был создан для замены формата GIF и устранил ограничения на количество цветов в 256. Увы, формат PNG не поддерживает анимацию, так что списывать со счетов GIF пока не приходится.

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

При работе над тестовым сайтом «Компьютер для чайников» нам пришлось довольно часто снимать скриншоты – снимки экрана. В простейшем случае при создании скриншота можно воспользоваться клавишей Print Screen. После нажатия клавиши Print Screen изображение экрана помещается в буфер обмена. Затем достаточно запустить любой растровый графический редактор (например Paint или Photoshop), создать новый документ и вставить изображение из буфера обмена.

Возможны два варианты снятия скриншотов с использованием клавиши Print Screen:

• если необходимо «сфотографировать» весь экран, нажимаем клавишу Print Screen;

• если необходимо сделать скриншот только активного окна, то используем сочетание клавиш Alt + Print Screen.

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

Рис. 3.2. Окно программы ScreenHunter

Перечислим основные особенности программы ScreenHunter.

• Запускается по умолчанию нажатием клавиши F6.

• Есть возможность захвата любой прямоугольной области экрана (Rectangular area), активного окна (Active windows), всего экрана (Full screen).

• Есть возможность захвата указателя мыши (Mouse pointer).

• Скриншот может сохраняться в указанную папку в форматах GIF, JPEG и BMP.

Чаще всего изображения, загруженные из Интернета, можно использовать на своих сайтах без обработки, чего нельзя сказать о фотографиях, полученных с цифрового фотоаппарата. К примеру, размер файла с фотографией, сделанной обычной «мыльницей», может достигать нескольких мегабайт. Если использовать на сайте необработанные фотографии, то страницы будут загружаться очень медленно. Это может привести к тому, что нетерпеливый пользователь покинет страницу, не дождавшись ее загрузки.

Подобными ошибками очень часто грешат начинающие веб-мастера, создающие сайты с помощью визуальных веб-редакторов типа FrontPage. Они вставляют на страницы необработанные фотографии, размер которых как по ширине, так и по высоте составляет несколько тысяч пикселов, а для того чтобы они полностью помещались на странице, уменьшают их масштаб отображения с помощью мыши. Хотя после подобного масштабирования картинка может выглядеть очень маленькой, размер файла остается прежним. Для примера взгляните на фрагмент веб-страницы, на которой присутствует изображение размером 155 х 117 пикселов, однако его реальные размеры 2816 х 2112 пикселов, а файл весит почти 3 Мбайт (рис. 3.3).

Рис. 3.3. Картинка выглядит очень маленькой, но размер файла почти 3 Мбайт

Никогда не допускайте подобных вольностей и обрабатывайте фотографии перед размещением на веб-страницах.

Если вы пользуетесь растровым графическим редактором Photoshop, то в меню File (Файл) выберите команду Save for Web & Devices (Сохранить для Сети и устройств). После этого будут доступны настройки, позволяющие быстро подготовить изображение для публикации в Интернете (рис. 3.4).

Рис. 3.4. Photoshop позволяет быстро подготовить изображение для публикации в Сети

Во многих случаях можно ограничиться изменением размера и качества изображения. К примеру, для блогов мы часто сохраняем изображение с размером 600 пикселов по большей стороне, а для параметра Quality (Качество) устанавливаем 51 %.

Если вы не дружите с Photoshop или привыкли пользоваться только легальным программным обеспечением, воспользуйтесь бесплатной программой FastStone Image Viewer. Это многофункциональный растровый редактор для операционных систем семейства Windows (сайт программы: www. faststone.org). Несмотря на то что FastStone Image Viewer бесплатен, он обладает неплохим набором функций. Перечислим его основные возможности:

• конвертирование изображений в различные растровые форматы;

• добавление надписей и водяных знаков на изображения;

• пакетная обработка изображений;

• удаление эффекта «красных глаз»;

• создание скриншотов.

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

Отдельно стоит сказать и о водяных знаках. Поскольку в Интернете процветает повальное заимствование чужих фотографий, иногда нелишне на своих фотографиях размещать водяной знак или надпись. Логично указывать на изображениях адрес вашего сайта – наверняка найдутся желающие на него заглянуть (рис. 3.5).

Рис. 3.5. В правом нижнем углу отображается надпись, созданная в программе FastStone Image Viewer

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

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

3.3. Немного практики

Сейчас мы проведем несколько небольших экспериментов, которые дадут возможность вникнуть в основы HTML. Мы постараемся рассказывать все таким образом, чтобы в вашей памяти закрепились базовые принципы создания веб-страниц. К примеру, вы должны запомнить, как правильно именовать файлы веб-страниц и по каким причинам на сайтах иногда не отображаются картинки.

Начнем практику с создания простой веб-страницы с повторяющимся несколько раз текстом «Добро пожаловать!»

Хотя на данный момент существует большое количество различных HTML-редакторов, многие из которых автоматизируют процесс написания HTML-кода, мы воспользуемся стандартным приложением Блокнот. Поскольку в Блокноте приходится все делать вручную, он позволяет быстрее вникнуть в процесс создания веб-страниц.

Примечание

На практике, если вам придется править HTML-код, воспользуйтесь приложением типа Notepad++ – это продвинутый блокнот с поддержкой синтаксиса многих языков программирования. Он не добавляет в код BOM – невидимые символы, из-за которых может нарушиться нормальная работа сайта.

Итак, запускаем приложение Блокнот, которое находится в папке со стандартными приложениями Windows (подобное приложение есть и в Linux), и набираем следующий текст (рис. 3.6).

Рис. 3.6. HTML-код тестовой страницы

Документ открывается тегом <html> (он дает понять браузеру, что здесь начинается веб-страница), а заканчивается тегом </html> (конец страницы).

Примечание

Тег <html> – корневой элемент в документе HTML 5.0. Его наличие обязательно.

Наклонная черта в закрывающем теге называется «слеш». В данном случае, поскольку слеш наклонен в правую сторону, он называется прямым слешем.

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

В контейнер <head></head> (с английского head переводится как «голова») помещается название документа и различная справочная информация, например ключевые слова. Сюда же добавлен контейнер <title></title>, в котором содержится название веб-страницы. Текст, помещенный в этот контейнер, отображается в заголовке окна браузера. Некоторые начинающие веб-мастера по незнанию не заполняют контейнер <title></title> или оставляют то, что прописывается по умолчанию веб-редакторами. Если взглянуть на скриншот предлагаемой ниже страницы, то можно увидеть, что она называется «Экспериментальные физические задачи. Механика», а на ее вкладке написано Новая страница 2, то есть содержимое контейнера <title></title> даже не дает намека о содержании веб-страницы (рис. 3.7).

Рис. 3.7. По надписи в заголовке окна браузера Новая страница 2 непонятно, чему посвящена веб-страница

Что произошло? Дело в том, что при работе над сайтом использовался популярный веб-редактор Microsoft FrontPage 2003, в чем можно убедиться, заглянув в HTML-код страницы. По умолчанию этот веб-редактор задает содержимое контейнера <title></title> как Новая страница 1, Новая страница 2 и т. д. Разработчику необходимо самому позаботиться о «правильном» наполнении контейнера.

Применительно к FrontPage 2003 нужно было открыть искомую страницу, в контекстном меню выбрать пункт Свойства страницы и изменить значение поля Название с Новая страница 2 на, к примеру, Экспериментальные физические задачи. Механика.

Далее идет контейнер <body></body> (с английского body переводится как «тело») – в него помещается основное содержимое страницы: текст, картинки, таблицы и т. д.

В нашем случае в контейнере <body></body> находятся шесть контейнеров, первым из которых является <h1></h1>, а последним – <h6></h6>. Это заголовки различных уровней, самый крупный из которых – hi. Как правило, при создании веб-страниц применяются только три первых заголовка, то есть hi, h2 и h3.

Внимание!

Никогда не оставляйте контейнер <title></title> пустым или не отражающим содержание страницы. В первую очередь на «титул» обращает внимание поисковый робот, пытаясь понять, какая информация размещена на странице. Несоблюдение этого правила, пожалуй, худшее, что можно сделать применительно к оптимизации сайта для поисковых машин.

Теперь можно просмотреть результат нашей работы в браузере. Для этого необходимо сохранить созданный документ как веб-страницу, то есть расширение файла должно быть .htm либо .html. Для этого заходим в меню Файл и выбираем команду Сохранить как. В появившемся окне в поле Имя файла указываем полное имя файла, в раскрывающемся списке Тип файла выбираем вариант Все файлы (рис. 3.8). Остается лишь нажать кнопку Сохранить.

Рис. 3.8. Сохранение кода в виде веб-страницы

Мы дали файлу имя proba_pera.htm. Обратите внимание, что оно набрано на латинице и вместо пробела указан знак нижнего подчеркивания. Всегда следуйте этому правилу при именовании файлов, предназначенных для размещения в Интернете. В противном случае есть большая вероятность того, что файл не удастся загрузить на сервер.

После сохранения файла как HTML-документа он будет открываться браузером, установленным в системе по умолчанию. В нашем случае это Google Chrome, который отобразил заголовки шести уровней (рис. 3.9).

Рис. 3.9. Отображение заголовков шести уровней в окне браузера

Обратите внимание, что в заголовке окна браузера отображается надпись Пробная страница, то есть содержимое «титула». Теперь начнем немного менять нашу пробную страницу, добавляя и удаляя элементы.