Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Страница 11
Чтобы было понятнее, приведем аналогию с автомобилем. Когда человек учится в автошколе, ему преподают не только Правила дорожного движения, но и читают курс устройства автомобиля. Ведь даже если человек не планирует заниматься самостоятельно ремонтом и обслуживанием машины, уж коль он сел за руль – он должен иметь хотя бы общее представление об устройстве того, чем он управляет. По крайней мере, он будет знать, что если во время движения машину «потянуло» в сторону – видимо, у нее спустило колесо, если застучал мотор – нужно срочно остановиться, а если машина заглохла – возможно, у нее кончился бензин, и т. д.
То же самое касается веб-разработки. Человек, который занимается созданием и администрированием сайтов, должен хотя бы в общих чертах понимать, что, например, полужирное начертание можно получить только после применения соответствующих тегов, а если веб-страница отображается какими-то непонятными символами – скорее всего, нужно разобраться с кодировкой символов, и т. д.
ПРИМЕЧАНИЕ
В этой книге мы познакомимся с языков HTML именно на том минимальном уровне, который необходим каждому веб-разработчику, независимо от того, как он намеревается создавать и администрировать сайты – вручную или с помощью специально предназначенных программных средств. Для более детального изучения данного языка обратитесь к специальной литературе.
Если бы не было языка HTML, все использование Интернета свелось бы к безликим текстовым посланиям, не имеющим какого-то форматирования, яркого красочного оформления, мультимедиа, эргономики и дизайна. Однако самой главной функцией языка программирования HTML является возможность связывать веб-страницы между собой с помощью гиперссылок. Эти гиперссылки могут находиться, например, на навигационных инструментах веб-ресурсов, либо следовать прямо в тексте. Например, если навигационная панель сайта содержит ссылку
Услуги
, то при щелчке мышью на этой ссылке вы попадете на страницу с описанием услуг либо условий их предоставления.Также удобно использовать гиперссылки непосредственно в тексте. Например, на сайте содержится следующий текст:
Наша компания организована в 2000 году. Сегодня мы рады предложить нашим клиентам широкий ассортимент товаров и услуг, причем на выгодных условиях. Более подробно о сотрудничестве с нами вы можете узнать в нашем отделе сбыта.
В этом тексте жирным курсивом выделены места возможных гиперссылок. При щелчке мышью на ссылке
товаров
иуслуг
посетитель перейдет на страницу с описанием предлагаемых компанией соответственно товаров и услуг. По ссылкеусловиях
посетитель перейдет на страницу с описанием условий приобретения товаров и услуг, а ссылкаотделе сбыта
предназначена для перехода на страницу с информацией об отделе сбыта компании и его контактными данными.Стоит отметить, что гиперссылка является исключительно полезным инструментом. Более того – без нее невозможно представить себе современный Интернет. Ведь во Всемирной Паутине содержится невообразимое количество информации на сотнях миллионов веб-страниц. В этом безбрежном море информации удается ориентироваться лишь с помощью гиперссылок.
HTML «в действии», или Как просмотреть исходный код страницы
Не все пользователи Интернета знают, что при желании можно просмотреть исходный HTML-код любой веб-страницы. Кстати, многие именно с этого начинают свой первые опыты в сфере веб-разработки: посмотрев «реальное» отображение страницы, а после этого изучив ее HTML-код, можно получить общее представление о структуре, синтаксисе и приемах использования этого языка.
Функциональные возможности практически любого популярного Интернет-обозревателя (Internet Explorer, Mozilla Firefox, и др.) предусматривают просмотр HTML-кода текущей страницы, который обычно отображается в отдельном окне. Рассмотрим на конкретном примере, как это делается.
Откроем в Интернет-обозревателе Internet Explorer какую-либо страницу, например, сайт газеты «Советский спорт» – 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 закрывающими тегами являются
,