Веб-Самоделкин

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

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

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

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

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

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

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

ВНИМАНИЕ

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

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

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

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

Теперь дополним код нашего HTML-документа, добавив в него между соответствующими тегами заголовок веб-страницы и основной текст. Назовем нашу страницу , а в качестве основного текста введем (рис. 2.4).

Добавление в код страницы заголовка и основного текста

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

Тестовая страница в окне Интернет-обозревателя

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

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

Добавление в программный код заглавия текста

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

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

Добавление курсивного и полужирного начертания

Теперь изменим цвет фона страницы. Для этого применим атрибут тега . Отметим, что этот атрибут не является обязательным: если он не используется – цвет фона по умолчанию будет белым (в чем мы уже могли убедиться). Сделаем цвет фона нашей страницы желтым, дополнив ее программный код так, как показано на рис. 2.8.

Изменение цвета фона веб-страницы

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

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

Изменение цвета шрифта веб-страницы