Веб-Самоделкин. Как самому создать сайт быстро и профессионально

СОВЕТ

Настоятельно рекомендуется зарегистрировать созданный сайт в следующих поисковых машинах: http://webmaster.yandex.ru (http://webmaster.yandex.ru/), http://www.rambler.ru/doc/add_site.shtml (http://www.rambler.ru/doc/add_site.shtml), http://www.google.ru/intl/ru/addurl.html (http://www.google.ru/intl/ru/addurl.html), http://catalog.aport.ru/rus/add/AddUrl.aspx (http://catalog.aport.ru/rus/add/AddUrl.aspx) и http://top.mail.ru/add (http://top.mail.ru/add). Как показывает практика, регистрация веб-ресурса в этих системах является довольно эффективной. Кроме этого, воспользуйтесь сервисом http://1ps.ru (http://1ps.ru/): там вы можете оперативно и эффективно зарегистрировать свой веб-ресурс во многих каталогах.

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

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

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

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

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

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

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

• Сайт с огромным числом беспорядочно сваленных ссылок выглядит неряшливо, несолидно и неприветливо.

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

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

Итак, резюмируем вышесказанное.

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

Глава 2.

Основы веб-программирования с помощью языка HTML

Аббревиатура HTML знакома даже людям, которые по роду занятий далеки от веб-разработки. Она получила известность хотя бы потому, что адреса многих веб-страниц в Интернете заканчиваются расширением .html. Кроме этого, уже даже многие школьники знают: если есть желание создать свой сайт или заняться веб-разработкой – необходимо изучить хотя бы основы языка программирования HTML.

Общие сведения о языке программирования HTML

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

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

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

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

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

ПРИМЕЧАНИЕ

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

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

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

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

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

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

HTML «в действии», или Как просмотреть исходный код страницы

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

Функциональные возможности практически любого популярного Интернет-обозревателя (Internet Explorer, Mozilla Firefox, и др.) предусматривают просмотр HTML-кода текущей страницы, который обычно отображается в отдельном окне. Рассмотрим на конкретном примере, как это делается.

Откроем в Интернет-обозревателе Internet Explorer какую-либо страницу, например, сайт газеты «Советский спорт» – www.sovsport.ru (http://www.sovsport.ru/) (рис. 2.1).

Рис. 2.1. Страница для просмотра HTML-кода

Теперь выполним команду главного меню Вид ? Просмотр HTML-кода – в результате на экране откроется окно используемого по умолчанию текстового редактора (как правило, это «Блокнот»), в котором будет представлен исходный код открывшейся страницы (рис. 2.2).

Рис. 2.2. Просмотр HTML-кода

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

При необходимости вы можете вывести HTML-код на печать – для этого используйте штатную команду редактора «Блокнот» Файл ? Печать, вызываемую также нажатием комбинации клавиш Ctrl+P.

Отметим, что в разных Интернет-обозревателях команда, предназначенная для просмотра HTML-кода, может называться по-разному. Например, в обозревателе Mozilla Firefox она также находится в меню Вид, но называется Исходный код страницы, и ее можно вызвать также нажатием комбинации клавиш Ctrl+U.

Создание простейшей веб-страницы

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

Работать мы будем в любом текстовом редакторе, позволяющем сохранять созданные файлы с расширением html. Если вы пользуетесь операционной системой Windows, то вполне подойдет текстовый редактор «Блокнот», который входит в комплект ее поставки.

Итак, по обычным правилам работы в текстовом редакторе вводим в окне код, который представлен на рис. 2.3.

Рис. 2.3. Начальный этап создания простейшей веб-страницы

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

А текст, который мы ввели, представляет собой три пары тегов HTML-документа. Отметим, что большинство тегов языка HTML используются в паре: первый тег называется открывающим, а второй – закрывающим. Все закрывающие теги имеют в начале наклонную черту (например, на рис. 2.3 закрывающими тегами являются </title>, </body> и </html>).

Теги <html> и </html> предназначены для идентификации HTML-документа. Открывающий тег этой пары всегда следует в самом начале программного кода, а закрывающий тег – в самом его конце. Иначе говоря, тегом <html> начинается программный код страницы, а тегом </html> он завершается.

ВНИМАНИЕ

Пара тегов <html> и </html> является обязательным атрибутом любого HTML-документа.