Управление начертанием символов

Создание Web-страниц

Цель работы: познакомиться с основами HTML, создать гипертекстовый документ.

Слово «WWW» (World Wide Web) относится к той немногочисленной категории понятий, название которых известно всем, однако далеко не всякий в состоянии правильно объяснить, что же это в сущности такое. Довольно часто приходится слышать, как WWW отождествляют с Internet, что, мягко говоря, не совсем верно. На самом деле Web – это одна из частей Internet, которая на протяжении последних 5-6 лет стала феноменально популярной и способствовала гигантскому скачку развития Сети в целом.

WWW можно назвать графическим интерфейсом для работы с Internet. «World Wide Web» переводится как «всемирная паутина», и название достаточно точно определяет суть явления. WWW – гигантская сеть страниц (документов), связанных между собой гиперссылками. Это действительно очень напоминает своими колоссальными размерами и структурой паутину (web), протянувшуюся по всему миру.

HTML

Основа WWW – файлы в формате HTML (Hyper Text Markup Language – язык разметки гипертекста), или гипертекстовые страницы. Гипертекст – это легкая в использовании и чрезвычайно мощная система связанных слов и фраз, позволяющая легко перемещаться по особым образом организованным страницам. Она связывает фразу или слово одной страницы с любой другой страницей, абзацем, фразой или словом (рис. 4.1).

Если развить идею гипертекста и включить в него графику, видео и звук, мы получим гипермедиа. Гипермедиа – среда, основанная, как и гипертекст, на взаимосвязях, в которой в качестве гиперссылок могут выступать визуальные и аудиокомпоненты. Гипертекст и гипермедиа являются фундаментальными для WWW технологиями, а HTML – средство для работы с этими технологиями.

Файлы HTML состоят из команд форматирования, текста и ссылок на другие файлы или объекты (графика, звуки, программы). Средство просмотра HTML-документов, интерпретирует код HTML, содержащийся в файле, и согласно командам форматирования собирает готовую Web-страничку.

Рис. 4.1 – Справка MS Word, выполненная с использованием гипертекста (правое окно). Щелчок мышью по подчеркнутым объектам вызывает переход в другое окно Справки, или вызов справки-определения, или демонстрацию каких-либо действий

Фактически, файлы HTML состоят из обычного текста: вы можете просмотреть исходный код файла в любом текстовом редакторе, включая Блокнот Windows (Notepad). Но в этом случае вы увидите не web-страничку, а лишь текст в сочетании с метками HTML, из которых программа-браузер ее генерирует. Редактировать web-документы вы также можете, используя самый обычный Блокнот. Именно так и поступают многие опытные web-дизайнеры, несмотря на то, что сейчас существует большое количество визуальных редакторов web-страниц. Эти редакторы зачастую обладают очень богатыми средствами и предоставляют пользователю возможность создавать великолепно выглядящие страницы, используя многочисленные шаблоны и библиотеки картинок, как правило, входящие в комплект поставки редактора.

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

Одним из самых популярных визуальных редакторов является Netscape Composer, входящий в состав пакетов Netscape Navigator Gold и Netscape Communicator (www.netscape.com). Популярностью также пользуются пакеты Microsoft FrontPage (www.microsoft.com/frontpage), Macromedia HomeSide, Macromedia Dreamweaver (www.macromedia.com/software/dreamweaver) и NetObjects Fusion (www.netobjects.com).

Простые и легкие способы для создания Web-страниц существуют и в Microsoft Word. Используя мастер Web-страниц (Файл | Создать | Web-страницы | Мастер Web-страниц), можно создать отдельную Web-страницу или целый Web-узел (рис. 4.2). Можно разместить на Web-узле уже созданные Web-страницы и документы Word. Чтобы сделать Web-страницы более динамичными и привлекательными, можно использовать различные темы.

Рис. 4.2 – Диалоговое окно Мастера Web-страниц в MS Word 2000

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

Итак, писать нашу первую страничку мы будем в Блокноте.

Загружаемый файл

В WWW существует негласное правило, согласно которому первый файл, загружаемый браузером с какого-либо сервера по умолчанию, должен называться index.html. Таким образом, если вы явно не указываете имя документа, который вам требуется, а пишете только имя сервера, например www.yahoo.com, автоматически будет загружен файл index.html, находящийся на этом сервере, т. е. фактически будет выполнена команда https://www.yahoo.com/index.html.

Поэтому, первый файл, который вам необходимо создать, будет называться index.html. Для этого вам придется освоить лишь несколько команд форматирования и оформления текста в формате HTML.

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

Метка языка HTML, или тег (англ. tag), или дескриптор, является основным средством разметки документа. При написании теги отделяются от остального текста угловыми скобками: «<» и «>». Регистр символов при этом не имеет никакого значения, но хорошим тоном считается набор тегов в верхнем регистре, т. е. заглавными буквами. Это помогает визуально отделить теги от основного текста при последующем редактировании.

Существует два вида тегов: требующие закрытия (т. е. ограничения действия) и не требующие закрытия. Например, дескриптор , изменяющий начертание шрифта на наклонное, является тегом, требующим закрытия, т. к. если он не будет закрыт, то весь текст, следующий после него, будет наклонным. Закрывающим элементом всегда служит тот же самый тег, но со знаком «/» после первой угловой скобки.

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

Основные теги

Первыми метками, которые необходимо разместить на будущей web-странице, будут <HTML> и </HTML>. Этот тег начинает и завершает любую страницу, указывая браузеру на то, что данная страница описана на HTML. На странице закрывающий тег будет стоять самым последним, в конце документа.

Все, что вы будете набирать далее, должно быть расположено между этими метками.

Следующие метки необходимы для создания заголовка HTML-документа. Тег <HEAD> </HEAD> служит для определения заголовка документа, т. е. части файла, содержащей подробную информацию о документе, как-то: заголовок окна документа, имя создателя, индексный текст, используемый для помещения информации о странице в поисковые системы, и глобальные переменные, такие, как применяемая в документе кодировка и т. п. Этот тег также требует закрытия.

Этот тег имеет достаточно большое количество дескрипторов, служащих для описания документа и располагающихся в его заголовке. Их теги должны располагаться в заголовке между <HEAD> и </HEAD>.

В рамках данной работы, достаточно познакомиться с дескриптором <TITLE>

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

Пример.

<TITLE>Моя первая web-страничка </TITLE>

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

Помимо заголовка, HTML-документ имеет также «тело». «Тело», как и «голова», ограничивается с двух сторон соответствующим тегом <BODY> … </BODY>.

Таким образом, структура страницы выглядит следующим образом:

<HTML>

<HEAD>

<TITLE>Моя первая web-страничка </TITLE>

</HEAD>

<BODY>

Информационное наполнение

</BODY>

</HTML>

Наберите это в текстовом редакторе, сохраните как текстовый документ с именем index.txt, затем щелкните по имени сохраненного файла и измените его название на index.html. Теперь, если вы откроете этот файл в браузере, то увидите озаглавленную страницу, содержащую крайне мало информации...

Этот файл со структурой страницы вы можете использовать в дальнейшем как шаблон для ваших HTML-документов.

Параметры страницы

В открывающий тег <BODY> могут входить элементы, определяющие параметры страницы, такие, как используемый фоновый рисунок, цвет и размер основного шрифта и гиперссылок, цвет фона и т. п. Цвета этих элементов web-страницы указываются в шестнадцатеричном исчислении. Для облегчения нелепого труда по вычислению шестнадцатеричного кода вашего любимого цвета создано огромное количество небольших программ.

В таблице 4.1 приведены коды основных цветов.

Таблица 4.1 – Шестнадцатеричные коды основных цветов

Наименование цвета	Шестнадцатеричный код
составляющие цвета
Red	Green	Blue
Красный	FF
Желтый	FF	FF
Зеленый		FF
Голубой		FF	FF
Синий			FF
Пурпурный	FF		FF
Черный
Белый	FF	FF	FF

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

При таком варианте описания раздела <BODY> явно указываются только цвета фона и основного текста. Цвет гиперссылки и посещенной гиперссылки устанавливаются автоматически, в соответствии с настройками браузера.

Для того чтобы оформить страничку фоновым рисунком (обоями), в теге <BODY> нужно указать параметр BACKGROUND=”имя файла”. Естественно, графический файл с фоновым рисунком должен находиться в текущем каталоге. В качестве фонового рисунка могут быть использованы только файлы формата GIF или JPEG. Пример использования этого параметра:

Регистр символов в имени файла имеет значение.

После создания тега <BODY> с указанием цветов можно приступить к наполнению странички информационным содержимым.

Управление шрифтами

Для оформления и форматирования текста в HTML-документах применяется в общем-то небольшое количество тегов. Если текст не оформлен никакими дескрипторами, то отображаться он будет в соответствии с настройками браузера пользователя.

Для управления шрифтовым оформлением WEB-страниц предназначен дескриптор . Этим тегом указываются параметры шрифта, такие, как размер, цвет и название. Параметры шрифта в теге указываются в кавычках в любом порядке.

Определяя шрифт документа, помните, что при просмотре странички будут использоваться те шрифты, которые установлены на компьютере пользователя, а не на вашем компьютере. И если вы будете использовать на страничках необычные шрифты, никто кроме вас их не увидит.

В настоящее время стандартными шрифтами, использующимися в WWW, являются Times New Roman и Courier New. Также вы можете пользоваться и шрифтом Arial, так как он распространен не менее широко, чем указанные. Пользоваться другими шрифтами нет смысла, поскольку они недостаточно популярны.

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

Текст.

Управление начертанием символов

Для установки параметров Жирный (Bold), Курсив (Italic) и Подчеркнутый (Underlining), используются теги , , . Как вы можете догадаться, эти теги требуют закрытия и могут использоваться, перекрывая действие друг друга.

Пример.

Жирный

Жирный-Курсив

 Жирный-Курсив-Подчеркнутый 

Форматирование абзацев

Как известно, на странице текст размещается в абзацах. Для определения абзаца в HTML используется тег . Он имеет параметр ALIGN, управляющий выравниванием текста параграфа с помощью аргументов:

– выравнивание текста по левому краю экрана;

– выравнивание текста по правому краю экрана;

– выравнивание текста по центру экрана;

– полное выравнивание текста по обоим краям экрана.

Для размещения любого объекта по центру строки существует тег <CENTER>. Он вполне применим также и к тексту.

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

На странице этот текст будет располагаться в две строки.

Размещение рисунков

Для размещения картинок на Web-страницах существует тег <IMG>, имеющий обязательный параметр SRC="URL" (источник=путь к файлу) и несколько необязательных.

Пример написания тега.

<IMG SRC="logo.gif" BORDER=0 HEIGHT=120 WIDTH=160 ALIGN=LEFT

HSPACE=10 VSPACE=10 ALT="Логотип">

Здесь SRC="URL" – путь к файлу изображения. Если файл находится в том же каталоге, что и документ, из которого к нему обращаются, то путь к нему указывать не нужно – требуется указать только имя файла (сохраняя регистр букв). Если файл изображения находится в другом каталоге, требуется указать путь к файлу от каталога, где находится документ, из которого к нему обращаются.

Если файл с изображением находится на другом сервере, необходимо указать полный путь к файлу:

BORDER=pixels – необязательный параметр, указывающий, рамку какой ширины (в пикселах) следует генерировать вокруг изображения. В большинстве случаев рамка не требуется; чтобы она не отображалась, значение параметра BORDER нужно полагать равным нулю.

HEIGHT=pixels и WIDTH=pixels – значения этих параметров указывают браузеру размеры изображения (в пикселах), чтобы при загрузке страницы браузер мог не дожидаться, пока загрузится все изображение, а оставить для него необходимое место и сначала загрузить текст страницы.

Поскольку текст всегда загружается быстрее, чем графика, имеет смысл всегда указывать эти параметры.

ALIGN=TOP, MIDDLE, BOTTOM, LEFT, RIGHT.

Параметр ALIGN управляет выравниванием изображения на странице. Значения LEFT и RIGHT ведают размещением картинки с выравниванием относительно левого или правого края страницы.

Значения BOTTOM, LEFT, RIGHT управляют выравниванием изображения по вертикали относительно текста, стоящего перед ним. ВОТТОМ – выравнивание текста по нижнему краю, МIDDLE – по центру, ТOP – выравнивание по верхнему краю изображения.

Для размещения изображения по центру страницы можно использовать тег <CENTER>, например:

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

Таблицы

Таблицы в HTML являются удобным средством форматирования как собственно таблиц, так и «нетабличной» информации. В последнем случае таблицы используют для того, чтобы добиться жестко заданного взаимного расположения частей WWW-страницы в окне программы просмотра.

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

1) ячейки, содержащие подзаголовки частей таблицы;

2) «обычные» ячейки с данными.

Ячейки могут содержать как форматированный в соответствии с правилами HTML текст, так и графику. Таблица может иметь подпись. Флаги и атрибуты, используемые для описания таблиц на HTML, приведены в таблицах 4.2 и 4.3.

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

Таблица 4.2 – Флаги

Флаг	Назначение
<TABLE>... </TABLE>	Определяет таблицу. Если этот флаг имеет атрибут BORDER=n, то таблица будет заключена в рамку толщиной n пикселов
<CAPTION>... </CAPTION>	Необязательный элемент. Определяет подпись к таблице. По умолчанию подпись располагается вверху, а при использовании атрибута ALIGN=BOTTOM – внизу таблицы
<TR>	Обозначает строку таблицы
<TH>	Обозначает ячейку с подзаголовком, который по умолчанию выводится жирным шрифтом и располагается по центру
<TD>	Обозначает ячейку таблицы. По умолчанию текст в ячейке смещен влево и отцентрирован по вертикали

Таблица 4.3 – Атрибуты

Атрибут	Назначение
ALIGN = LEFT \| CENTER \| RIGHT	Выравнивание содержимого ячейки влево, по центру или вправо по горизонтали
VALIGN = TOP \| MIDDLE \| BOTTOM	Выравнивание содержимого ячейки по верхней кромке, по центру или по нижней кромке по вертикали
COLSPAN=n	Число столбцов, занятых данной ячейкой
ROWSPAN=n	Число строк таблицы, занятых данной ячейкой
NOWRAP	Запрет разрыва строк текста внутри ячейки с переносом на следующую строку, в случае, если длинная строка не умещается в ячейке

Пример описания таблицы на HTML

<CAPTION>Таблица 1</CAPTION>

<TR>

<TH ROWSPAN=2>Ячейка 1 занимает 2 строки (Заголовок столбца)

<TH COLSPAN=2>Ячейка 2 занимает 2 столбца (Общий заголовок 2-х столбцов)

<TR>

<TD>Ячейка 3 (Заголовок столбца)

<TD>Ячейка 4 (Заголовок столбца)

<TR>

<TD>Ячейка 5 (Данные)

<TD>Ячейка 6 (Данные)

<TD>Ячейка 7 (Данные)

</TABLE>

На экране это будет выглядеть следующим образом:

Таблица 1
Ячейка 1 занимает 2 строки (Заголовок столбца)	Ячейка 2 занимает 2 столбца (Общий заголовок 2-х столбцов)
Ячейка 3 (Заголовок столбца)	Ячейка 4 (Заголовок столбца)
Ячейка 5 (Данные)	Ячейка 6 (Данные)	Ячейка 7 (Данные)

Гиперссылки

Для того чтобы объединить несколько страниц в один сайт, естественно необходимо связать их гиперссылками. Как вы уже знаете, это основной принцип построения WWW.

Гиперссылка может быть присвоена любому элементу, расположенному на странице. Для организации гиперссылки существует специальный тег <A>. Между открывающим и закрывающим тегами может находиться текст или изображение – именно этот элемент и будет объектом, с которого производится гиперссылка.

Синтаксис этого тега имеет много параметров, в данной работе мы рассмотрим только те, которые нам сейчас необходимы. Он состоит из имени тега <A>, обязательного параметра HREF="URL" и необязательного параметра TARGET.

Параметр HREF="URL" является основной частью тега <А> и указывает, на какой документ ссылается данный элемент страницы. Гиперссылка может указывать на любой документ, который существует в виде файла: на другую страничку, изображение, файл программы, мультимедиа-объекты и т. д. Правила указания URL для тега <A> такие же, как и для параметра SRC тега <IMG>, т. е. если документ, на который ссылается данный элемент страницы, находится в том же каталоге сервера, то указывается только имя файла. Если же этот документ находится на другом сервере, требуется указать полный URL.

Параметр TARGET является необязательным и требуется только для того, чтобы определить, в каком окне должен открываться документ, на который организована гиперссылка. Если параметр TARGET не указан, новый документ будет открыт в том же окне. Если указать параметр TARGET c зарезервированным именем "_blank", документ, на который указывает гиперссылка, будет открыт в новом окне. Пример использования тега <A>:

Мой любимый журнал <A HREF="https://www.XXXXX.ru"

TARGET="_blank">XXXXX</A>

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

https://www.chem.msu.su:8081/rus/wwwbook/

https://postroika.ru/

https://html.manual.ru/

Лабораторное задание

1. Используя основные теги HTML, создать личную Web-страницу в текстовом редакторе Блокнот.

Страница должна содержать текст, гиперссылки, рисунки, таблицы. Использовать управление параметрами страницы, управление шрифтами, форматирование абзацев.

В работе могут быть использованы любые графические изображения, в том числе из библиотеки изображений, обычно находящейся по адресу С:\Program Files\Microsoft Office\Clipart.

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

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

Приложение

Тематика Web-страниц

1. Мое портфолио

2. Моя группа

3. Электронные магазины: российский и зарубежный опыт.

4. Маркетинг в Интернет.

5. Сетевая реклама.

6. IP–телефония.

7. Компьютерный рынок России.

8. Свободно распространяемое ПО.

9. Информационное пиратство.

10. Базы данных российских экономических информационных ресурсов.

11. Базы данных российских правовых информационных ресурсов.

12. Информационные ресурсы Архивного фонда РФ.

13. Информационные ресурсы Государственной системы статистики.

14. Электронные библиотеки в Интернет.

15. Российские новостные онлайновые СМИ.

16. Российские поисковые системы.

17. Электронные информационные ресурсы органов власти Томской области.

18. Томские Интернет-провайдеры.

19. Электронные СМИ г. Томска.

20. Томские компьютерные фирмы.

Управление начертанием символов

Поиск по сайту