Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете
Шрифт:
Создание простейшей веб-страницы
Начнем практику с создания простой веб-страницы с повторяющимся несколько раз текстом «Добро пожаловать!»
Хотя на данный момент существует большое количество различных 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. Отображение заголовков шести уровней в окне браузера
Обратите внимание, что в заголовке окна браузера отображается надпись Пробная страница, то есть содержимое «титула». Теперь начнем немного менять нашу пробную страницу, добавляя и удаляя элементы.
Использование изображений
Как мы уже сказали выше, при создании сайтов обычно используются изображения трех форматов: 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-страница была перемещена в другую папку