КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Лекция № 14
|
|
|
|
Структура HTML-файла. Стандартный документ Интернет представляет собой текстовый файл, размеченный средствами формата HTML. Формат HTML позволяет не только размечать текст, но и создавать списки, таблицы, формы ввода данных и другие элементы оформления. Графика, аудио- и видеозаписи, доступные с Web-страниц, хранятся в отдельных файлах и документ содержит только ссылки на них (в отличие, например, от документа Microsoft Word). Элемент разметки или оформления, входящий в формат HTML, называется тег. Любой тег имеет общий вид
<ИМЯ>область действия тега</ИМЯ>
и действует на все, что расположено между треугольными скобками. Почти все теги (кроме <P>, <BR>, <IMG>) должны закрываться, причем закрытие тега отличается от открытия только наличием символа '/'. Теги могут вкладываться друг в друга иерархически, но без пересечений, то есть допустимо вложение вида <ТЕГ1><ТЕГ2></ТЕГ2></ТЕГ1>, но не <ТЕГ1><ТЕГ2></ТЕГ1></ТЕГ2>. Действие вложенных тегов объединяется, то есть, если внутрь тега, создающего жирное начертание шрифта, вложен тег курсива, в результате получится жирный курсив. Внутри открывающей части тег может содержать опции, уточняющие его действие и имеющие вид имя="значение".
HTML довольно "демократичен", неправильный тег или неправильное вложение тегов обычно не приводят к "зависаниям" браузера или каким-либо сообщениям об ошибках, хотя, разумеется, могут вызвать неправильное форматирование документа. Названия тегов нечувствительны к регистру символов. Создавать HTML-документы можно как в простом текстовом редакторе, например, в Блокноте Windows, так и с помощью специализированных программ, таких как Microsoft Frontpage. Для несложных документов подойдет и Microsoft Word-97 - если он установлен полностью, в нем поддерживается возможность чтения и сохранения HTML-файлов.
HTML-файл состоит из следующих частей:
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Основная часть документа
</BODY>
</HTML>
Обязательным является только открывающий тег <HTML>. В теге <HEAD> помещается заголовочная информация - в том числе, информация о содержании и кодировке документа, функции на JavaScript, а во вложенном теге <TITLE> - текст, отображаемый в заголовке окна браузера. Основной текст документа размещен внутри тега <BODY>.
6.2 Проблема совместимости HTML-файлов. Несмотря на то, что существует утвержденный стандарт языка HTML, различные браузеры могут интерпретировать одни и те же теги по-разному. Это связано как с различным пониманием стандартов, так и с конкуренцией браузеров. Поскольку 99% браузеров в мире - это Internet Explorer и Netscape Navigator, Web-мастер обычно стремится создать документ, одинаково выглядящий в этих двух программах. В обзоре мы рассматриваем только небольшую часть тегов - и только те, которые интерпретируются одинаково браузерами IE и NN.
6.3 Основные средства форматирования текста. Как и в Word, основой структуры текста в HTML является абзац. Для выделения абзаца служит тег <P>, закрывать который не обязательно. В теге <P> можно указать способ выравнивания текста абзаца в виде <P ALIGN="опция_выравнивания">. Для выравнивания текста абзаца по левому краю, правому краю, по центру или по ширине следует использовать, соответственно, опции LEFT, RIGHT, CENTER, JUSTIFY (последний - только в новых браузерах). Для форматирования текста абзацев используйте теги, приведенные в таблице 6.1.
| Тег | Пояснение | Образец |
| <H1>...</H1> | Заголовок 1 уровня | Заголовок1 |
| <H2>...</H2> | Заголовок 2 уровня | Заголовок2 |
| <H3>...</H3> | Заголовок 3 уровня | Заголовок3 |
| <H4>...</H4> | Заголовок 4 уровня | Заголовок4 |
| <H5>...</H5> | Заголовок 5 уровня | Заголовок5 |
| <H6>...</H6> | Заголовок 6 уровня | Заголовок6 |
| <BIG>...</BIG> | Большой | Большой |
| <SMALL>...</SMALL> | Маленький | Маленький |
| <SUP>...</SUP> | Верхний индекс | Верхний индекс |
| <SUB>...</SUB> | Нижний индекс | Нижний индекс |
| <B>...</B> | Жирный | Жирный |
| <I>...</I> | Курсив | Курсив |
| <U>...</U> | Подчеркнутый | Подчеркнутый |
| <S>...</S> | Перечеркнутый |
Таблица 6.1 Некоторые теги форматирования текста
Размерами и начертаниями шрифта можно управлять также с помощью тега <FONT FACE="Шрифт" SIZE="Размер">, где "Шрифт" - имя шрифта Windows, а размер указывается цифрой от 1 до 7, например, этот текст отформатирован тегом <FONT FACE="Arial" SIZE="5">. Разумеется, для корректного отображения текста каким-либо шрифтом он должен быть установлен на машине пользователя, поэтому следует избегать "экзотических" шрифтов (см.п. 2.7). По умолчанию браузеры поддерживают один стандартный масштабируемый шрифт (обычно это Times New Roman) и один шрифт для отображения предварительно отформатированного текста в теге <PRE> (обычно Courier New). В предварительно отформатированном тексте сохраняются переносы строк, пробелы и табуляции.6.4 Гиперссылки. Для создания гиперссылки служит тег вида <A HREF="URL_документа" TARGET="окно">текст ссылки</A>. URL может быть как абсолютным, так и относительным. URL, ссылающийся на закладку в текущем документе, имеет вид #имя_закладки, а для того, чтобы создать закладку, достаточно поместить нужное слово или фразу в тег <A NAME="имя_закладки">текст</A>. Если опция TARGET не указана, документ открывается в текущем окне браузера, а если указана в виде TARGET="_BLANK">, в новом окне. Текст ссылки внутри тега <A> может быть любым. Точно так же в тег <A> можно поместить и изображение.
6.5 Работа с рисунками. Как правило, браузеры поддерживают рисунки в форматах GIF и JPG. Первый из этих форматов обычно используется для хранения рисунков с четкими деталями, небольшим набором цветов и возможностью анимации ("мультипликация" на Web-страницах, графические кнопки, "украшения"), второй - для хранения полноцветной графики и фотоизображений.
Ссылка на рисунок оформляется тегом следующего вида:
<IMG SRC="URL рисунка" WIDTH="ширина" HEIGHT="высота" BORDER="рамка" ALIGN="выравнивание" HSPACE="отступ по горизонтали" VSPACE="отступ по вертикали" ALT="текст">. Закрывать этот тег не нужно. Опция SRC содержит абсолютный или относительный URL рисунка, если рисунок не найден, на его месте выведется пустая рамка. Хотя это единственная обязательная опция тега, указание всех остальных перечисленных опций настоятельно рекомендуется. Опции WIDTH и HEIGHT определяют ширину и высоту рисунка в пикселах (точках). Если ширина и высота не указаны, загрузка страницы замедляется и часто приводит к некрасивому эффекту "скачущего" текста на экране. Если указанные ширина и высота не соответствуют действительным размерам рисунка, при выводе он будет отмасштабирован, что также существенно замедляет загрузку (единственное допустимое исключение - уменьшение или увеличение при загрузке в 2 раза). Значение опции BORDER также указывается в пикселах и определяет ширину рамки вокруг рисунка. Если рамка не нужна, значением этой опции следует сделать 0. Опция ALIGN определяет размещение рисунка относительно текста, единственные понимаемые всеми браузерами значения - LEFT (слева) и RIGHT (справа). Опции HSPACE и VSPACE, указываемые в пикселах, определяют размер свободного места вокруг рисунка по горизонтали и вертикали. Рисунок не выглядит сливающимся с текстом при их значениях в пределах 5-15. Текст, переданный в опции ALT, выводится вместо рисунка, если в браузере отключен вывод рисунков или они не успели загрузиться, а также показывается в качестве подсказки при наведении "мышки" на рисунок. Обычно этот текст содержит 
название рисунка.
Пример:данная рамка для рисунка подготовлена с помощью тега <IMG SRC="null.gif" WIDTH="128" HEIGHT="32" HSPACE="10" VSPACE="10" ALIGN="LEFT" ALT="Пустая рамка">
6.6 Списки, разделители, специальные символы. HTML поддерживает нумерованный и маркированный списки, открывающиеся. соответственно, тегами <OL> и <UL>. Опция TYPE позволяет указать тип маркеров списка. Для нумерованного списка ее возможные значения - "A", "I" или "l"(по умолчанию), обозначающие, соответственно, нумерацию латинскими буквами, римскими или обычными цифрами. Опция START="число" нумерованного списка позволяет начать нумерацию с цифры, отличной от 1 или буквы, отличной от A. Отдельные элементы списка заключаются в тег <LI>. Для нумерованного списка можно изменить нумерацию, указав в теге <LI> опцию VALUE="число".
Кроме того, HTML поддерживает список определений, содержащий чередующиеся пары вида "термин"-"его описание". Список определений начинается с тега <DL>, термин выделяется тегом <DT>, а описание, которое обычно выводится со сдвигом вправо, тегом <DD>.
Для принудительного разрыва строки внутри абзаца служит тег <BR>. Если Вы хотите, напротив, запретить переносы в какой-то части текста, следует заключить ее в тег <NOBR>...</NOBR>.
Для отделения части текста горизонтальной чертой используйте тег <HR>. Опция ALIGN со значением LEFT, RIGHT или CENTER определяет выравнивание черты на странице, опция SIZE="размер" - толщину линии в пикселах, а опция WIDTH="ширина" - ширину, указанную в пикселах (например, 600) или процентах (100%). Если указана опция NOSHADE, линия создается без трехмерных эффектов. Пример:
Эта черта создана тегом вида <HR ALIGN="CENTER" SIZE="1" WIDTH="50%">
6.7 Управление цветами. Основной цветовой набор HTML-документа указывается через опции тега BODY. Это следующие опции: BGCOLOR="цвет" TEXT="цвет" LINK="цвет" ALINK="цвет" VLINK="цвет". Они обозначают, соответственно, цвет фона документа, цвет текста, цвет непосещенных ссылок, цвет активной (нажатой в данный момент) ссылки, цвет посещенных пользователем ссылок. Цвета можно указывать через их имена, либо через шестнадцатиричные коды. В первом случае имена цветов такие же, как в большинстве языков программирования. Все браузеры поддерживают стандартный цветовой набор Windows:
Кроме того, цвета можно вводить, указывая информацию о яркости красной, зеленой и синей компонент в шестнадцатиричном коде. В этом случае перед кодом цвета ставится символ #. Коды компонент могут принимать значения от 00 до FF включительно. Так, белому цвету соответствует код #FFFFFF, черному - #000000, красному - #FF0000, зеленому - #00FF00, синему - #0000FF и т.д. Для того, чтобы цвета документа корректно отображались различными браузерами и при 256-цветном режиме монитора, следует использовать только интенсивности компонент, равные 00, 33, 66, 99, CC и FF - всего насчитывается 216 таких цветов. Впрочем, 256-цветных мониторов остается все меньше и это требование постепенно теряет актуальность.
Указывая цвет любым из перечисленных способов, можно изменять цвет любой части текста, заключая ее в тег вида <FONT COLOR="цвет">часть текста</FONT>.
На многих Web-страницах в качестве фона используется какой-либо рисунок. Для использования рисунка в качестве фона достаточно поместить ссылку на него в опцию BGCOLOR="имя_рисунка" в тег BODY. Например, если фоновый рисунок называется bg.gif и размещен во вложенной папке images, тег будет выглядеть так: <BODY BGCOLOR="images/bg.gif">
6.8 Таблицы. Важным инструментом Web-дизайна являются таблицы, которые используются не только для размещения данных, но и для управления взаимным размещением текста и графики, создания колонок газетного типа и т.д. Следует помнить, однако, что браузер отображает содержимое таблицы только по окончании ее загрузки, поэтому если весь 50- или 100-килобайтный документ разместить в одной гигантской таблице, ни один пользователь, скорее всего, не дождется загрузки такого документа. Таблица размещается в теге <TABLE>, имеющем множество опций:
| Опция | Назначение |
| BORDER="число" | Ширина обрамления таблицы в пикселах |
| CELLSPACING="число" | Расстояние между ячейками в пикселах |
| CELLPADDING="число" | Определяет размер свободного пространства между границами ячейки и ее содержимым |
| WIDTH="ширина" | Требуемая ширина таблицы в пикселах или в процентах от ширины окна бруазера |
| ALIGN="выравнивание" | Способ выравнивания таблицы относительно текста. Допустимые значения - LEFT, RIGHT, CENTER |
| BACKGROUND="рисунок" | Вывод указанного рисунка в качестве фона таблицы |
| BGCOLOR="цвет" | Задается цвет фона таблицы |
| HSPACE="число" | Размер свободного пространства слева и справа от таблицы, в пикселах |
| VSPACE="число" | Размер свободного пространства сверху и снизу от таблицы, в пикселах |
Таблица формируется по строкам, причем, каждая строка заключена в тег <TR>...</TR>, а каждая ячейка строки - в тег <TD>...</TD>.Закрывать тег </TABLE> и теги строк и столбцов обязательно. Можно изменять оформление отдельных ячеек таблицы, используя в тегах <TR> и <TD> опции ALIGN, BACKGROUND, BGCOLOR так же, как в теге <TABLE>, а также опцию VALIGN для указания способа выравнивания ячеек по вертикали - TOP (по верхнему краю), BOTTOM (по нижнему краю) или CENTER (по центру).
Для того, чтобы растянуть ячейку таблицы на несколько строк или столбцов, в теге ячейки <TD> используются опции ROWSPAN="число" и COLSPAN="число", указывающие, сколько строк и сколько столбцов таблицы охватывает данная ячейка.
Пример:
| Характеристики | |||
| Средний рост, см | Средний вес, кг | ||
| Пол | Мужской | 177 | 73 |
| Женский | 166 | 65 |
Данная таблица создана с помощью следующего HTML-кода:
<table border="1" cellpadding="5" cellspacing="0"> <tr> <td colspan="2" rowspan="2"> </td> <td colspan="2">Характеристики</td> </tr> <tr> <td>Средний рост, см</td> <td>Средний вес, кг</td> </tr> <tr align="center"> <td rowspan="2">Пол</td> <td>Мужской</td> <td>177</td> <td>73</td> </tr> <tr align="center"> <td>Женский</td> <td>166</td> <td>65</td> </tr></table>Обратите внимание на оформление таблицы - как и при написании программ, при "ручном" создании Web-страниц удобнее всего набирать операторы одного уровня с одинаковым сдвигом вправо.
6.9 Другие возможности HTML. Мы не рассматривали множество интересных возможностей HTML, которые будут лишь кратко перечислены в этом разделе.
Многие документы содержат фреймы, то есть, разбивают окно браузера на несколько кадров, каждый из которых содержит свой документ (посмотрите пример). Часто, например, один фрейм используется для отображения меню, а второй выводит содержимое выбранного пункта меню. Использование фреймов может быть удобно, но порождает ряд проблем - например, кнопки "Вперед" и "Назад" на странице с фреймами могут работать некорректно, адрес выведеннго во фрейме документа бывает невозможно увидеть в адресной строке, сохранение документа с фреймами также может создать проблему (см. п. 2.8).
На некоторых страницах можно увидеть так называемые "картированные изображения" или Image-Map, когда рисунок разбит на несколько областей, каждая из которых является отдельной гиперссылкой. В случае умелого использования картирование создает удобные и наглядные средства навигации, но загрузка изображений может потребовать значительного времени, а если в браузере отключен вывод рисунков, таким меню невозможно пользоваться.
Для "обратной связи" с пользователем широко применяются формы, позволяющие создавать стандартные для современного интерфейса поля ввода, списки, переключатели, кнопки на Web-страницах. Например, заполнив форму в конце документа, Вы можете отправить информацию о себе по электронной почте (разумеется, если она есть на Вашей машине).
|
|
|
|
Дата добавления: 2014-01-04; Просмотров: 320; Нарушение авторских прав?; Мы поможем в написании вашей работы!