Текст книги "Готовимся к пенсии. Осваиваем Интернет"

Вставляем картинки

Чтобы вставить на страничку картинку, нужно применить тег <IMG>. Этот тег имеет свой атрибут src, который указывает путь к картинке. Если наша картинка под названием, например, foto.jpg лежит в той же папке, что и HTML-файл, можно написать просто: <img src="foto.jpg">. Если же картинка лежит в другой папке, скажем, в папке image, тогда и путь к картинке будет такой: <img src="image/foto.jpg">. Почему-то у многих новичков возникают страшные проблемы по прописыванию пути к картинке, хотя в этом ничего сложного нет.

Хорошо бы, кроме адреса картинки, явно указать ее размеры с помощью атрибутов width (ширина) и height (высота). Их значения можно узнать, например, в программе Adobe Photoshop. Применение этих атрибутов поможет браузеру корректно показать картинку на веб-странице.

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

Ну, и, чтобы картинки имели немного свободного пространства вокруг себя и не прилипали к тексту, который их окружает, укажите расстояние от картинки до ближайшего текста по горизонтали (атрибут hspace) и вертикали (атрибут vspace) в пикселах. Для тех, кто еще не знает, пиксел – это наименьший элемент изображения на экране монитора (попросту, точка).

Картинки можно располагать как по центру (атрибут center), так и по правому (атрибут right) или левому (атрибут left) краю. Это прописывается тегом <ALIGN> с соответствующими атрибутами: center, right или left. Надо также отметить, что расположение по левому краю принято по умолчанию.

С учетов всего сказанного картинку правильнее всего описать таким вот образом:

<IMG src="foto.jpg" width=400 height=250 hspace=10 vspace=10 align=right>

Ну, а теперь сделаем пример странички, где все уже вам должно быть знакомо (листинг П1.10).

А вот что получим на экране монитора. Причем, если навести мышку на картинку, появится надпись морской пейзаж (рис. П1.15).

Рис. П1.15. Вставка изображения

Adobe Photoshop: обрабатываем фотографии

Я не представляю себе работы без моей любимой программы Adobe Photoshop. Так что, если она у вас есть, – прекрасно! Если нет – постарайтесь установить. Я не буду рассказывать здесь обо всех возможностях программы, для этого понадобилась бы целая толстая книга. А вот некоторые моменты объясню.

Примечание

У вас могут быть различные версии этой программы, но основные функции остаются неизменными.

Надо также отметить, что Photoshop – очень и очень недешевое удовольствие. Однако люди как-то выходят из положения…

Вот главное окно Adobe Photoshop (рис. П1.16).

Рис. П1.16. Окно программы Adobe Photoshop

Чтобы загрузить в него свою картинку, необходимо выполнить команду меню File (Файл) | Open (Открыть) и из своих файлов выбрать нужное изображение (рис. П1.17).

Часто бывает, что картинка не нужна целиком – тогда можно отсечь ненужные части, воспользовавшись опцией обрезки. Сначала выделяем нужную область с помощью инструмента Rectangular Marquee Tool (Прямоугольное выделение), затем выбираем команду Image (Изображение) | Crop (Кадрировать), как показано на рис. П1.18, и у нас остается вырезанная область (рис. П1.19).

Но на этом не успокаиваемся. Если цвета кажутся недостаточно контрастными, их можно немного "вытянуть". Для этого нажимаем на клавиатуре комбинацию клавиш <Ctrl>+<L> либо в верхнем меню программы выбираем Image (Изображение) | Adjustments (Настройка) | Levels (Уровни) и пробуем перемещать движки на гистограмме, наблюдая за нашим изображением, пока результат не покажется нам приемлемым. Я вот сдвинула правый белый движок немного влево, чтобы слегка увеличить контрастность, что даст и ощущение некоторого повышения резкости изображения (рис. П1.20).

Рис. П1.17. Открытие файла

Рис. П1.18. Делаем обрезку

Рис. П1.19. Вырезанная область

Рис. П1.20. Работаем с уровнями

Однако и это не все! Мое изображение слишком велико, мне нужно его уменьшить. Нажимаем в меню: Image (Изображение) | Image Size (Размер изображения), как показано на рис. П1.21.

Рис. П1.21. Размер изображения

И видим следующую картину (рис. П1.22): ширина (Width) изображения – 2024 пиксела, высота (Height) – 1980. Это никуда не годится!

Но отчаиваться не стоит – просто впишем в поле ширины нужный размер, например 500, автоматически изменится и высота, поскольку у нас по умолчанию стоит галочка у опции Constrain Proportions (Сохранять пропорции). Так что высота сама установится на величину 489 пикселов (рис. П1.23).

И последнее. Изображение обязательно нужно сохранить оптимизированным для размещения в Интернете. Для этого выбираем команду File (Файл) | Save for Web (Сохранить для Web) – как показано на рис. П1.24.

Рис. П1.22. Слишком большой размер!

Рис. П1.23. Изменение размеров

Рис. П1.24. Сохраняем картинку для Web

А в открывшемся диалоговом окне выбираем формат изображения: JPEG, размер: Medium – обычно этого бывает достаточно (рис. П1.25). И сохраняем наше изображение под любым именем. Все, работа закончена.

Совет

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

Ссылки

Как можно с одной страницы сайта попасть на другую? Ответ прост – при помощи ссылок. На любом сайте есть меню, нажатия на пункты которого обеспечивает переход в нужный раздел. Все пункты меню, как текстовые, так и в виде картинок, являются ссылками. Когда вы задаете поиск в Яндексе, открываются страницы ссылок, нажимая на которые также попадаешь на другие страницы. Без ссылок невозможно было бы перемещаться по Интернету, так что это вещь очень нужная и полезная. Да и в простом тексте можно найти ссылку – как правило, они подчеркнуты и выделены иным (чаще всего синим) цветом.

Рис. П1.25. Выбираем формат изображения

А создаются ссылки при формировании веб-страницы очень просто. Для этого существует специальный тег <A>, имеющий свой закрывающий тег </A>.

Примечание

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

У тегов <A></A> имеется обязательный атрибут href, указывающий, куда именно следует переместить пользователя. Естественно, на самом деле пользователь никуда не перемещается, просто у него в браузере загружается нужная страничка. Ну, да не в этом суть. Главное, что эти ссылки дают возможность расширить границы Интернета.

Ссылки могут быть как относительными, связывающими две странички одного сайта, – например так:

✓ <a href="info.html">Информация о сайте</a>

✓ <a href="catalog.html">Каталог продукции</a>

✓ <a href="gest.html">Отзывы покупателей</a>

Само собой, что все HTML-файлы (странички) сайта при этом должны находиться в одном каталоге. Тогда нажимая на ссылки, мы сможем переходить на различные странички сайта: info.html, catalog.html или gest.html.

А бывают и абсолютные ссылки, которые могут вести как и на страничку этого же сайта, так и на другие ресурсы. Это обеспечивается прописыванием в строке HTML-кода полного пути к страничке. Например:

✓ <a href="http://www.yandex.ru">Поисковая система Яндекс</a>

✓ <a href="http://www.pensionerka.com">Социальная сеть пенсионеров</a>

Ссылкой может быть и картинка. Скажем, если имеется для социальной сети картинка, которая называется logo.jpg, то вид ссылки будет такой:

<ahref="http://www.pensionerka.com"><imgsrc="logo.jpg">Социальная сеть пенсионеров</a>

Совместим все это в одном файле (листинг П1.11).

В браузере это все будет выглядеть так, как показано на рис. П1.26.

Рис. П1.26. Ссылки

Каскадные таблицы стилей – CSS

Вообще, все уважающие себя веб-мастера используют в своей работе так называемые каскадные таблицы стилей (CSS). Что это такое? Сайт, как правило, состоит из нескольких страничек. Их может быть и десять, и сто, и даже несколько тысяч. Естественно, всем хочется, чтобы все странички выглядели красиво и были оформлены в едином стиле. Согласитесь, если вы захотите, чтобы заголовки на всех страницах были красного цвета, а текст – синим, то расписывать на каждой страничке все эти свойства весьма проблематично. Вот хитрые веб-мастера и придумали – все стили прописать в одном файле. А на всех страничках сайта дать ссылку на этот файл, и тогда все изменения можно будет производить в том одном файле, а на страничках все это станет изменяться автоматически. Файл стилей обычно называется style.css, где style – название файла, а css – его расширение. И на всех страничках сайта между тегами <HEAD> и </HEAD> пишется такая строчка:

<LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">

Откройте имеющийся у нас в наличии файл poedinok.html, добавьте к нему приведенную здесь строчку (листинг П1.12), сохраните под именем, например, poedinok2.html.

Затем создайте еще один файл – style.css (листинг П1.13).

Теперь, когда мы поместим файл style.css в один каталог с файлом poedinok2.html и откроем последний, то получим картину, изображенную на рис. П1.27.

Как видите, значение BODY {background-color: yellow;} дало желтый цвет фона нашей странички, P {color: blue;} – заставило цвет текста измениться на синий, а строчка H1 {color: red} придала красный цвет заголовку.

Рис. П1.27. Файл poedinok2.html со стилями

Таким образом, изменяя параметры в одном файле стилей, можно изменять очень многие свойства элементов целого комплекса веб-страничек на любые другие!

Размещение сайта в Интернете

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

Внимание!

Пусть создали вы сайт из нескольких страничек, но только одна из них является главной (веб-мастера ее иногда называют "мордой сайта"). Так вот – эта страничка всегда должна нести имя index. Расширение зависит от назначения, но сейчас не об этом. Страничка может называться index.html или index.htm, ну, или index.shtml, index.php. Главное – index, потому что по этому имени поисковые системы как раз и понимают, какую страничку сайта нужно открыть первой, чтобы пользователи сначала попадали на эту главную страницу, а уж потом – на прочие, пусть и не менее важные.

Начнем с бесплатных сервисов. Самым популярным является http://narod.yandex.ru/ (рис. П1.28).

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

Рис. П1.28. Народный сайт

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

Но есть еще платные сервисы – чтобы ими воспользоваться, прежде всего нужно купить для своего сайта хорошее доменное имя. Скажем, у меня вот такие оплаченные домены: pensionerka.ru, pensionerka.com, dikarka.ru и еще десятка три. Выбрать свободный домен можно в разных местах. Скажем на http://www.agava.ru, http://www.reg.ru, http://www.r01.ru и многих других. Сколько стоит домен? По-разному: от 100 до 500 рублей в год.

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

Рис. П1.29. Цены на хостинг от Агавы

Лично я все время пользуюсь сервисом http://www.agava.ru, расценки хостинга на нем на начало 2012 года приведены на рис. П1.29.

Дорого это или не очень, судите сами.

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

Итак, вот где стоит зарегистрироваться:

✓ http://webmaster.yandex.ru/ – в Яндексе;

✓ http://www.google.ru/intl/ru/addurl.html – в Google;

✓ http://top100.rambler.ru/ – в Рамблере;

✓ http://top.mail.ru/add/ – в рейтинге Mail.ru.

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

Самым лучшим счетчиком является счетчик от LiveInternet.ru. Зайдите на страничку регистрации: http://www.liveinternet.ru/add, введите свои данные, подберите подходящий по дизайну вашего сайта счетчик, затем скопируйте код счетчика и разместите его на всех страницах своего сайта.

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

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

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

✓ Один из них – каталог Яндекса. Можете попробовать подать заявку на страничке http://yaca.yandex.ru/add_free.xml.

Жалко только, что они не сообщают о решении, включать или не включать ваш ресурс в свой каталог. Если очень хочется туда попасть, пусть и небесплатно, то можно попробовать заполнить здесь заявку на платное размещение: http://yaca.yandex.ru/add_payed.xml. В этом случае в течение, как правило, 3-х дней вам хотя бы ответят – подходит или не подходит сайт для их каталога. Правда, платная регистрация довольно дорогая: 12 500 руб. плюс НДС.

✓ Еще один отличный каталог, совершенно бесплатный, но очень уважаемый: DMOZ.org. Подать заявку на принятие сайта в их каталог можно здесь: http://www.dmoz.org/.

Выберите там подходящий каталог, скажем, Home, затем выбирайте свой язык, скажем, Russian, и далее уже на русском выбирайте подходящую тему сайта, заполняйте необходимые поля для регистрации и отсылайте на регистрацию. Авось возьмут.

Есть еще каталог на Mail.ru: http://list.mail.ru/index.html. Здесь есть как бесплатная, так и платная регистрация – стоимость 12 000 рублей.

Бесплатная раскрутка сайта

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

Так что начнем с нее.

✓ Правильно прописывайте название странички в тегах <TITLE>Название странички сайта</TITLE>.

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

– на страничке файла про розы: <TITLE>Розы, все о розах</TITLE>

– на страничке файла про лилии: <TITLE>Лилии, все о лилиях</TITLE>

и т. д.

✓ В заголовок документа между тегами <HEAD> и </HEAD>, как правило, вставляйте описание странички и ключевые слова для нее:

– описание для странички, например, с розами:

<meta name="description" content="Роза – царица цветов. Она является украшением любого сада. Выращивание и уход за розами. Укрывание роз на зиму">

– ключевые слова для той же странички:

<metaname="keywords" content="розы, цветы, вырастить розы, уход за розами">

Дело в том, что описание странички будет выложено поисковиками при запросе пользователя, скажем, по слову розы. И от того, насколько привлекательным будет это описание, зависит, нажмет ли пользователь на ссылку, ведущую на ваш сайт, или уйдет к другим, более заманчивым в описании сайтам. Вот пример выдачи Яндекса по запросу розы (рис. П1.30).

Как видите, заглавие сайта взято из тега <TITLE>, а то, что ниже заглавия – как раз из описания сайта по атрибуту <description>. Так что, если бы наш сайт о розах был бы проиндексирован Яндексом, у нас была бы такая выдача:

Розы, все о розах

Роза – царица цветов. Она является украшением любого сада. Выращивание и уход за розами. Укрывание роз на зиму

Адрес нашего сайта

Рис. П1.30. Выдача поисковой системы Яндекс по запросу розы

✓ Главный, первый заголовок статьи прописывайте лучше тегами <H1>:

<H1>Как выращивать розы</H1>

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

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

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

✓ Старайтесь размещать на сайте интересные статьи, причем авторские, уникальные, ни в коем случае не украденные с чужого сайта. Поисковики это сразу обнаружат и накажут.

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

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

Добрый день!

Я владелец сайта "Розы", хотел бы обменяться с вами ссылкой. Наши сайты сходной тематики. Готов поставить вашу ссылку первым.

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

Другой способ раскрутки – размещение интересных статей с ссылками на ваш ресурс на других сайтах. Для этого существует и специальная служба – Miralinks: http://www.miralinks.ru/ (рис. П1.31).

Рис. П1.31. Служба miralinks

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

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

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