Рис. 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), создать новый документ и вставить изображение из буфера обмена.