close

Вход

Забыли?

вход по аккаунту

?

246. Основы создания Web-страниц

код для вставкиСкачать
Федеральное агентство по образованию
Государственное образовательное учреждение
высшего профессионального образования
Воронежский государственный архитектурно-строительный университет
ОСНОВЫ СОЗДАНИЯ WEB-СТРАНИЦ
Рекомендовано редакционно-издательским советом
Воронежского государственного архитектурно-строительного
университета в качестве учебного пособия для студентов,
(в экономике)"
Воронеж 2006
Составители А.В. Распопов, Д.В.Меркулов, О.Е.Ефимова
УДК 681.3.066
Методические указания к лабораторным работам по курсу «Информационные технологии» [Электронный ресурс]: для студентов специальности
080801 / Воронеж. гос. арх.-строит, ун-т; сост.: А.В. Распопов, Д.В. Меркулов,
О.Е. Ефимова – Воронеж, 2006. - 38 с.
Методические указания предназначены для студентов специальности
080801 «Прикладная информатика (в экономике)» при изучении курса «Информационные технологии» и представляют собой руководство к выполнению лабораторно-практических работ по теме «Основы создания Web-страниц». Методические указания содержат значительный объем индивидуальных заданий, которые
должны быть выполнены каждым студентом при проведении лабораторных р абот.
Табл. , Библиогр. 5 назв.
Печатается по решению Редакционно-издательского совета Воронежского государственного архитектурно-строительного университета
Рецензент – А.А. Кононов, к. т. н., доц. кафедры ММВТ ВГАСУ
3
ВВЕДЕНИЕ
1.
ОСНОВНЫЕ ПОНЯТИЯ, ИНСТРУМЕНТЫ СОЗДАНИЯ
И ПРОСМОТРА WEB-СТРАНИЦ
Одним из основных сервисов Интернет сейчас с полным основанием можно
считать службу World Wide Web (WWW). Информация в WWW представлена в
виде так называемых гипертекстовых (или, более широко, гипермедийных) документов, которые могут содержать отформатированный текст, графику, аудио и
видеофрагменты. Основной особенностью гипертекстовых документов является
наличие активных зон, чувствительных к щелчку мыши. Активными могут быть
фрагменты текста, целые изображения и их части; щелчок по активной зоне вызывает загрузку связанного с этой зоной (целевого) документа.
Гипертекстовые документы для WWW представляют собой текстовые файлы, размеченные в соответствии со стандартами языка HTML (HyperText Markup
Language - язык разметки гипертекста), командам которого посвящена значительная часть данного пособия. Говоря о таких файлах, употребляют разные термины:
html-файл, html-документ, html-страница, Web-страница, WWW-страница и так
далее. Совокупность html-файлов, посвященных определенной теме, оформленных в едином стиле и связанных друг с другом гиперссылками, представляют собой Web-сайт.
Просмотр html-документов осуществляется с помощью программ-браузеров
(от английского browser), которые отображают документ в соответствии с htmlразметкой и обеспечивают навигацию по гиперссылкам.
1.1
Стандарты языка HTML
Язык разметки гипертекстовых документов HTML представляет собой с овокупность команд, называемых тегами (от английского tag). Встречающиеся в
тексте документа html-теги интерпретируются браузером при отображении документа. Целый ряд тегов указывает браузеру, как надо отформатировать текстовый
фрагмент (они задают размер, цвет, начертание, выравнивание текста). Другие теги определяют графическое оформление (фон документа, вставка изображений),
задают активные зоны и т.д. Каждый из многих десятков тегов позво ляет задать
какие-то параметры отображения документа.
Синтаксис и семантика языка HTML определяются в стандарте HTML.
Стандарты разрабатываются на основании многочисленных предложений, проходят ряд стадий. Разработка проводится группой под эгидой World Wid e Web
Consortium (W3C). Информацию "из первых рук" о стандартах, рекомендациях и
перспективах развития HTML можно найти в Интернет по адресу
http://www.w3.org/MarkUp. На этом сайте, также приводятся и периодически обновляемые ссылки на переводы данных документов, в частности, на русский язык
(http://www.w3.org/Consortium/Translation).
4
Основными вехами на пути развития стандартов HTML можно считать
принятие стандартов HTML 1.0, HTML 2.0, HTML 3.2. На момент написания этого пособия последней разработкой является стандарт HTML 4.01. Каждый вновь
принимаемый стандарт предоставляет в распоряжение web-мастера новые теги,
позволяющие сделать html-документ эффективным и внешне привлекательным.
1.2
Браузеры
В Интернет представлены разные типы информационных ресурсов, передача которых с компьютера на компьютер подчиняется определенным сетевым пр отоколам. Для гипертекстовых документов системы WWW это протокол http (HyperText Transfer Protocol - протокол передачи гипертекстов, то есть тех самых
html-документов, о которых идет речь). Обмен данными между компьютерами согласно определенному протоколу организуется программами двух типов: пр ограммами-серверами и программами-клиентами. Браузер – это программа-клиент.
Программа-сервер обеспечивает хранение информационных ресурсов и выдачу их по запросам программ-клиентов. Программа-клиент (браузер) должна
уметь формировать запросы серверу, принимать и интерпретировать для польз ователя получаемую с сервера информацию.
За годы развития Интернет был создан целый ряд программ просмотра гипертекстовых документов, но сейчас с большой долей уверенности можно сч итать, что Ваша потенциальная аудитория использует либо Netscape Navigator
фирмы Netscape Communications Corporation, либо Microsoft Internet Explorer
фирмы Microsoft Corporation. Каждая из этих фирм постоянно развивает и дорабатывает свой браузер, выпуская все новые версии.
В процессе создания новой версии браузера разработчики каждой из конкурирующих фирм, естественно, учитывают как рекомендации ныне действующего
стандарта HTML, так и предложения по его развитию, особенно те предложения,
которые выдвинуты данной фирмой. Результат очевиден:
браузеры разных фирм иногда по-разному интерпретируют теги в htmlдокументе;
существуют теги, поддерживаемые только браузерами конкретной фирмы;
браузеры устаревших версий “не понимают” тегов, соответствующих новым
стандартам.
В случае, когда в html-документе встречаются теги, неизвестные браузеру,
он их просто игнорирует без всяких сообщений об ошибках.
Таким образом, простой html-документ, не содержащий тегов, соответствующих последнему принятому стандарту HTML, скорее всего, будет адекватно
отображен практически всеми браузерами. Применяя же новинки последнего
стандарта, Вы, вероятно, лишитесь существенной части потенциальной аудитории, которая в лучшем случае не сможет в полной мере насладиться изяществом
оформления Вашего сайта, а в худшем - вообще не сможет получить никакой информации.
5
1.3
Редакторы html-документов
Поскольку html-документ представляет собой текстовый файл, его можно
подготовить в простейшем текстовом редакторе, например, в блокноте (Notepad).
Это очень поучительно, поскольку Вы поневоле изучите синтаксис html-тегов и
прочувствуете особенности структуры html-документа, но при этом все теги придется вводить вручную.
Наиболее часто, все же, используют специализированные редакторы, предназначенные именно для подготовки html-документов. Отличаясь друг от друга
спектром возможностей, предоставляемых разработчику, они обладают принципиально схожим интерфейсом, позволяя вставлять теги с помощью кнопок панелей инструментов либо команд меню, и задавать атрибуты тегов в диалоговых о кнах. При этом разработчик видит документ таким, каким он будет при просмотре
с помощью браузера. Возможен также просмотр и правка исходного текста htmlдокумента.
Особенно распространены html-редакторы фирм – разработчиков браузеров; на сегодняшний день это Netscape Composer и редакторы фирмы Microsoft
FrontPage и FrontPage Express.
Пожалуй, стоит поработать со всеми этими редакторами, оценить их положительные и отрицательные стороны и выбрать тот, который Вам больше понр авится. Не забывайте, что помимо возможностей, соответствующих стандарту
HTML, редакторы могут предлагать к использованию и набор "своих" тегов, которые поддерживаются не всеми браузерами.
Также, html-документ может быть получен преобразованием в html-формат,
например, из формата документов пакета Microsoft Office. Широко используемый
текстовый редактор Microsoft Word, а также, не менее популярные, Microsoft Excel и Microsoft Access, позволяют сохранить файл в формате html. При этом сохраняются, насколько это возможно, особенности форматирования символов и
абзацев, изображения, таблицы, списки и так далее. Надо отметить, что при таком
преобразовании исходный текст html-документа получается крайне избыточным и
нуждается в коррекции.
2.
ОСНОВЫ ЯЗЫКА HTML
Исчерпывающее описание стандартов HTML и учебные пособия для начинающих web-мастеров можно найти как на многочисленных интернетовских сайтах, так и в печатных. Здесь же мы ограничимся обзором базовых возможностей
HTML.
2.1
Синтаксис html-тегов
html-документ представляет собой текстовый файл с расширением *.htm
(Unix-системы могут содержать файлы с расширением *.html), содержащий собственно текст, который должен быть отображен в окне браузера, и команды раз-
6
метки – html-теги, определяющие внешний вид документа при их интерпретации
браузером.
html-тег записывается в угловых скобках (символы < >) и состоит из имени,
за которым может следовать список атрибутов (для большинства тегов необяз ательный). Имена и атрибуты представляют собой английские слова и аббревиатуры и почти всегда их смысл прозрачен.
Теги условно можно разделить на две группы. Теги одной группы (наз ываемые также контейнерами и парными тегами) имеют два компонента: открывающий (начальный) и закрывающий (конечный); закрывающий компонент имеет
то же название, но при записи перед названием ставится косая черта (символ /).
Между открывающим и закрывающим компонентами может располагаться текст
документа и другие теги. Фрагмент документа, расположенный между откр ывающим и закрывающим элементом тега-контейнера форматируется браузером согласно смыслу тега. Например, текст, расположенный между тегами <B> и </B>,
будет выведен полужирным начертанием (название тега – от английского bold).
Теги другой группы (называемые также автономными) не имеют конечного
компонента. При их интерпретации в отображаемый документ вставляется тот
или иной объект. Например, тег <IMG SRC="pict.gif">, встречающийся в тексте
html-документа, вызывает вставку графического изображения из файла pict.gif .
Атрибуты в списке отделяются друг от друга одним или несколькими пр обелами, либо символами табуляции, либо символами перевода строки; последовательность записи атрибутов несущественна. Подавляющее большинство атрибутов употребляются в виде пары название атрибута=значение атрибута. В случае, когда значение атрибута представляет собой более чем одно слово либо одно
число, его следует заключить в одинарные или двойные кавычки. В закрывающих
компонентах тегов атрибуты не указываются.
Рассмотрим пример тега с атрибутами:
Название атрибута
Значение атрибута
<FONT SIZE=+2 COLOR=RED>
Значение атрибута
Название атрибута
Название тега
Встретив такой тег в html-документе, браузер интерпретирует его, выводя
следующий за тегом текст символами, увеличенными относительно базового размера (SIZE=+2) и красного цвета (COLOR=RED); это форматирование текста
применяется до тех пор, пока не встретится закрывающий тег </FONT> .
Регистр символов в записи тегов и атрибутов значения не имеет.
7
2.2
Структура html-документа
Здесь приводится структура html-документа, не содержащего фреймов (о
фреймах см. раздел 10).
html-документ заключается в теги <HTML> и </HTML>. Между этими тегами располагаются две секции: секция заголовка (между тегами <HEAD> и
</HEAD>) и секция тела документа (между тегами <BODY> и </BODY>). Секция
заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера. Секция тела документа содержит текст, предназначенный для отображения браузером и теги, указывающие на способ форматирования текста, определяющие графическое офор мление документа, задающие параметры гиперссылок и так далее. Вот самый пр остой html-документ:
<HTML>
<HEAD>
</HEAD>
<BODY>
Самый простой html-документ
</BODY>
</HTML>
Браузер отобразит этот документ, выведя в своем окне строку "Самый пр остой html-документ", расположенную в секции тела документа. Секция заголовка
пуста, что не является синтаксической ошибкой, хотя на практике, конечно, в этой
секции следует задавать определенную информацию (см. подраздел 3.3). В теге
<BODY> могут быть указаны атрибуты, определяющие цвета текста и фон документа (см. раздел 5).
2.3
Адресация ресурсов
Местоположение информационных ресурсов в WWW может быть определено в абсолютной и относительной форме.
Адресация в абсолютной форме используется при ссылках на ресурсы,
находящиеся на других серверах. Универсальный адрес, определяющий местонахождение информационного ресурса, носит название URL (Uniform Resource
Locator - унифицированный адрес ресурса). URL состоит из двух частей, разделенных двоеточием. Первая часть указывает на тип сетевого протокола, который
зависит от типа ресурса. Например, если ресурс располагается на WWW-сервере,
это протокол http. Вторая часть включает в себя имя компьютера (сервера) в доменной системе имен и (если требуется) путевое имя файла. При записи путевого
имени названия каталогов разделяются косой чертой (символ /); в именах файлов
8
и каталогов различаются прописные и строчные буквы; пробелы не допускаются.
Вот примеры URL:
http://www.ixbt.com/cpu/intel-prescott.htm
Путевое имя файла
Доменное имя компьютера
Сетевой протокол
http://213.24.247.64:81100
ftp://listsoft.ru/pub/11089/dmaster.exe
mailto:Ivanov@newmail.ru
Последний URL, указывающий на протокол mailto и адрес электронной почты, стоит особняком в ряду других, поскольку не ссылается ни на какой информационный ресурс; это единственный тип URL, при записи которого не ставятся
после двоеточия две косые черты (символы //).
Адресация в относительной форме используется при ссылках на ресурсы,
находящиеся на том же сервере. При записи пути к файлу названия каталогов разделяются прямой косой чертой (символ /); переход по каталогам файловой системы на один уровень вверх обозначается двумя точками (символы ..). Чтобы было
понятнее, представим себе компьютер, например, с такой структурой каталогов,
содержащих html-файлы:
Win1251
start.htm
books.htm
Nature
Flora
Fauna
Town
forest.htm
river.htm
fox.htm
hare.htm
ecology.htm
people.htm
Адрес файла fox.htm относительно start.htm: Fauna/fox.htm
Адрес файла fox.htm относительно forest.htm: ../Fauna/fox.htm
Адрес файла ecology.htm относительно fox.htm:../../Town/ecology.htm
При адресации WWW-ресурсов (то есть html-документов) есть возможность
ссылаться и на фрагменты html-документов в виде:
http://www.ixbt.com/cpu/intel-prescott.htm#new, где после символа # указывается заранее определенный идентификатор фрагмента (метка) документа (см. раздел 7).
Задание к лабораторной работе №1 «Основные понятия, инструменты
создания и просмотра web-страниц. Основы языка HTML»
1. Тщательно изучить содержимое разделов 1 и 2 данного пособия.
9
2. Не пользуясь текстом методических указаний, сформулировать определения следующих терминов: гипертекстовый документ; язык HTML; Web-сайт;
браузер; редактор html-документов; парные и автономные теги; абсолютная и относительная адресация. Привести примеры.
3. Создать на диске отдельную директорию (папку) для Ваших будущих
Web-страниц. Например, по следующему пути:
../Мои документы/Студенты/№Группы/Фамилия_студента/HTML
4. Открыть Блокнот (notepad): Меню Пуск/Программы/Стандартные.
Набрать в нем пример из подраздела 2.2 и сохранить его с расширением: *.htm в
Вашей директории.
5. Открыть полученный html-документ браузером и убедиться в правильности результата его работы.
6. Внести в блокноте следующие изменения в данном примере: заключить,
выводимый браузером, текст в тег-контейнер с атрибутом (см. пример в подразделе 2.1). Сохранить измененный документ и открыть (обновить) его браузером.
Убедиться в действии произведенных изменений.
7. Загрузить измененный html-документ в Microsoft Word. Дописать в конце, выводимого браузером, текста: «и Word» и сохранить в том же файле. Просмотреть в блокноте изменения внесенные программой Microsoft Word. Сделать
выводы.
3.
ОСНОВНЫЕ ТЕГИ HTML
В этом разделе приводится описание ряда наиболее часто использующихся
тегов.
3.1 Комментарии
Браузеры игнорируют любой текст, помещенный между <!-- и -->. Это
удобно для размещения комментариев: <!-- Это комментарий -->.
3.2 Символьные примитивы (&-последовательности)
Символы <, >, " и & являются специальными символами HTML. При необходимости использования их в тексте, отображаемом браузером, следует применять символьные примитивы:
символ
соответствующий символьный примитив
<
&lt; (по первым буквам английских слов less than – меньше, чем)
>
&gt; (по первым буквам английских слов greater than – больше, чем)
&
&amp; (амперсанд)
"
&quot;
Например, для того, чтобы в окне браузера вывести формулу 2 < 3 , в тексте
html-документа придется записать: 2 &lt; 3 .
10
Помните: точка с запятой – обязательный элемент &-последовательности.
Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (строчными).
Вообще говоря, символьные примитивы определены для всех символов из
второй половины ASCII-таблицы (куда, естественно, входят и русские буквы).
Дело в том, что некоторые серверы не поддерживают восьмибитную передачу
данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в
виде &-последовательностей.
Стоит также упомянуть, по крайней мере, о символьных примитивах &copy;
(знак авторского права ), &reg; (зарегистрированный товарный знак ) и
&nbsp; (от английского nonbreaking space - неразрывный пробел).
3.3 Информация о документе в секции заголовка <HEAD>
В секции заголовка указывается информация о документе, которая используется тем или иным образом при его отображении. Он не является синтаксически
необходимым, но на практике обязательно должен присутствовать. Текст, заключенный между тегами <TITLE> ... </TITLE>, отображается в заголовке окна браузера. Фактически, это первая информация о содержании документа, которую видит пользователь еще до загрузки документа. Заголовок должен быть достаточно
кратким (рекомендуется не длиннее 64 символов) и в то же время емким, отражающим суть документа и способным заинтересовывать потенциальную аудиторию.
В секции заголовка обычно помещается и ряд тегов <META> с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о документе. По сути, META-инструкция – это способ определить некоторую переменную путем указания ее имени (атрибут NAME) и значения (атрибут CONTENT). Рассмотрим, наиболее типичные, META-инструкции:
1. <META NAME="description" CONTENT="Это пособие – учебник для тех,
кто хочет публиковать документацию любого рода в глобальной компьютерной
сети Интернет">. Определяет переменную description, содержащую краткое описание документа. Многие поисковые механизмы постоянно сканируют Интернет в
поисках html-файлов, отыскивают в них эту переменную, сохраняют ее в своих
базах данных и демонстрируют в ответ на запросы пользователей.
2. <META NAME="keywords" CONTENT="Интернет, HTML, WWW, пособие, публикация, гипертекст">. Определяет переменную keywords, содержащую
набор ключевых слов, описывающих содержание документа. На практике поиск
по ключевым словам очень удобно использовать при строительстве поискового
механизма, работающего в пределах одного сервера.
3. <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=
windows-1251">. Указывается тип кодовой таблицы (windows-1251, Koi8-R и другие), использованной при подготовке текстовой части документа. Включая подобные теги в документ, Вы избавляете свою аудиторию от необходимости
настраивать браузер на конкретную кодировку кириллицы.
11
4. <META HTTP-EQUIV="Refresh" CONTENT="[время]; URL=[документ]"
>. Дает браузеру примерно следующее указание: "Если через [время] секунд после завершения загрузки этого документа пользователь не перейдет к другому документу, начать загрузку ресурса [документ]". META-инструкцию Refresh можно
использовать, например, если Вы перенесли некоторый документ с одного сервера на другой. Вместо копии документа на старом сервере можно оставить короткое сообщение о переносе, включающее META-инструкцию Refresh и адрес документа на новом сервере. Если в качестве параметра [документ] подставить имя
файла, содержащего звук, через [время] секунд после загрузки html-файла начнется загрузка и проигрывание этого звука (при условии, конечно, что браузер пользователя поддерживает формат этого звукового файла). Очень удобно для всякого
рода приветствующих речей.
5. <META NAME="Author" CONTENT="Ivan Petrov">. Указывается автор
WWW-страницы.
6. <META NAME="GENERATOR" CONTENT="Mozilla/3.01Gold (Win95;
I) [Netscape]"> Указывается программа - редактор html-страницы.
4.
ФОРМАТИРОВАНИЕ ТЕКСТА
4.1 Разбиение текста
Отображение текста html-документа браузером имеет ряд особенностей.
Текст выводится в окно браузера слово за словом; при достижении правой
границы окна очередное слово переносится на новую строку. Таким образом, по
умолчанию (если не использованы специальные теги форматирования, например,
<PRE>), горизонтальной полосы прокрутки не появляется. Вертикальная полоса
прокрутки появляется, если документ не умещается в видимой части окна.
Весь так называемый пробельный материал (последовательно идущие пр обелы, символы табуляции, символы перевода строки) отображаются браузером
как один пробел. Например, пусть содержимое секции <BODY> имеет вид:
<BODY>
Попытаемся
вывести
лишние пробелы
и переводы строки
</BODY>
Тогда в окне браузера будет выведен текст без лишних пробелов и перевода стр оки: " Попытаемся вывести лишние пробелы и переводы строки ".
Для того, чтобы вывести в тексте ряд последовательных пробелов или несколько пустых строк, приходится применять различные теги. А именно:
каждый символьный примитив &nbsp; воспринимается как один пробел.
Например, текст html-документа:
<BODY>
шесть &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;пробелов
</BODY>
будет выглядеть как "шесть
пробелов"
12
Тег <P> (от английского paragraph) начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом. Абзац
не может быть пустым, то есть несколько последовательных тегов <P> интерпр етируются как один.
Фактически, форматирование абзацев сводится лишь к выравниванию. Вид
выравнивания может быть задан с помощью атрибута ALIGN, который может
принимать значения LEFT, CENTER и RIGHT, задающие выравнивание по левому краю, центру и правому краю окна браузера. Также по центру будет выровнен
и текст, заключенный в теги <CENTER> ... </CENTER>.
Применение закрывающего компонента для тега <P> не обязательно. Если
его нет, то заданный тип выравнивания сохраняется до следующего тега, задающего выравнивание, либо до конца документа.
Тег <BR> (от английского break) разрывает текстовый поток и вставляет
новую строку. Несколько последовательных тегов <BR> интерпретируются как
несколько пустых строк (в отличие от тега <P>). Межстрочный интервал одинарный. Закрывающего компонента тег не имеет.
Очень удобно использовать <BR> при публикации стихов:
<P>Однажды в студеную зимнюю пору<BR>
Сижу за решеткой в темнице сырой.<BR>
Гляжу - поднимается медленно в гору<BR>
Вскормленный в неволе орел молодой.</P>
<P>И шествуя важно, в спокойствии чинном,<BR>
Мой грустный товарищ, махая крылом,<BR>
В больших сапогах, в полушубке овчинном,<BR>
Кровавую пищу клюет под окном.</P>
Текст, заключенный между тегами <PRE> и </PRE> (от английского
preformatted – предварительно форматированный), отображается браузером как
есть: со всеми пробелами, символами табуляции и переносами строк. Это очень
удобно при создании простых таблиц.
Текст,
заключенный
между
тегами
<BLOCKQUOTE>
и
</BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем.
Тег <HR> описывает следующую горизонтальную линию:
Он может дополнительно включать атрибуты SIZE (определяет толщину
линии в пикселах) и/или WIDTH (определяет размах линии в процентах от ширины экрана). В следующем примере приведена небольшая коллекция горизонтальных линий:
<HR SIZE=2 WIDTH=100%><BR>
<HR SIZE=4 WIDTH=50%><BR>
<HR SIZE=8 WIDTH=25%><BR>
<HR SIZE=16 WIDTH=12%><BR> .
4.2 Форматирование символов
13
Теги форматирования символов подразделяют на две группы: теги физич еского форматирования (типографские элементы), с помощью которых можно
прямо указать, что шрифт на некотором участке текста должен быть жирным или
наклонным, и логического форматирования (идиоматические элементы), применяя которые мы меняем логический стиль, оставив интерпретацию этого стиля
браузеру. Все эти теги имеют как открывающий, так и закрывающий компонент.
Многочисленные теги несут разную смысловую нагрузку, но отображение текста,
заключенного между открывающим и закрывающим компонентами, при этом, не
столь разнообразно.
4.2.1 Логическое форматирование
При использовании логических стилей автор документа не может знать з аранее, что увидит на экране читатель. Разные браузеры толкуют одни и те теги
логических стилей по-разному. Некоторые браузеры игнорируют некоторые теги
вообще и показывают нормальный текст вместо выделенного логическим стилем.
Полужирным шрифтом отображается текст, заключенный между тегами:
<STRONG> ... </STRONG> (от английского strong emphasis – сильный акцент).
Курсивом (наклонным шрифтом) отображается текст, заключенный между
тегами:
<DFN> ... </DFN> (определение);
<EM> ... </EM> (от английского emphasis – акцент);
<CITE> ... </CITE> (цитата);
<VAR> ... </VAR> (от английского variable – переменная, рекомендуется
использовать для написания имен переменных).
Моноширинным щрифтом (шрифтом, имитирующим пишущую машинку,
то есть имеющим фиксированную ширину символа) отображается текст, заключенный между тегами:
<CODE> ... </CODE> (программный код, рекомендуется использовать для
фрагментов исходных текстов).
Также используются следующие теги (часто игнорируемые браузерами):
<SAMP> ... </SAMP> (от английского sample – образец, рекомендуется
использовать для демонстрации образцов сообщений, выводимых на экран
программами);
<KBD> ... </KBD> (от английского keyboard – клавиатура, рекомендуется
использовать для указания того, что нужно ввести с клавиатуры).
4.2.2 Физическое форматирование
Полужирным шрифтом отображается текст, заключенный между тегами:
<B> ... </B> (от английского bold).
Курсивом (наклонным шрифтом) отображается текст, заключенный между
тегами:
14
<I> ... </I> (от английского italic).
Моноширинным щрифтом отображается текст, заключенный между тегами:
<TT> ... </TT> (от английского TeleType).
Подчеркнутым отображается текст, заключенный между тегами:
<U> ... </U> (от английского underline).
Перечеркнутым отображается текст, заключенный между тегами:
<S> ... </S>(от английского strikethrough).
Как нижний индекс отображается текст, заключенный между тегами:
<SUB> ... </SUB> (от английского subscript).
Как верхний индекс отображается текст, заключенный между тегами:
<SUP> ... </SUP> (от английского superscript).
Подытожим наши знания о логических и физических стилях с помощью
примера. Заодно Вы сможете увидеть, как Ваш браузер показывает те или иные
логические стили.
<P>Теперь мы знаем, что фрагменты текста можно выделять
<B>жирным</B> или <I>наклонным</I> шрифтом. Кроме того, можно
включать в текст фрагменты с фиксированной шириной символа
<TT>(имитация пишущей машинки)</TT></P>
<P>Кроме того, существует ряд логических стилей:</P>
<P><EM>EM - от английского emphasis - акцент </EM><BR>
<STRONG>STRONG - от английского strong emphasis - сильный акцент
</STRONG><BR>
<CODE>CODE - для фрагментов исходных текстов</CODE><BR>
<SAMP>SAMP - от английского sample - образец </SAMP><BR>
<KBD>KBD - от английского keyboard - клавиатура</KBD><BR>
<VAR>VAR - от английского variable - переменная </VAR></P>
4.3 Параметры шрифта
Текст, заключенный между тегами <FONT ... > ... </FONT> имеет размер,
цвет и гарнитуру, задаваемую атрибутами:
Размер. Задается либо в форме абсолютного значения (число
SIZE = значение от 1 до 7), либо относительно размера основного шрифта (в
форме +n или -n).
COLOR = цвет
Цвет.
Предпочтительные гарнитуры для отображения текста;
FACE = список
названия перечисляются через запятую, например, FACE =
шрифтов
"Verdana, Helvetica, Arial, Sans-Serif".
4.4 Заголовки разных уровней внутри текста
Теги вида <Hn> ... </Hn> оформляют заключенный в них текст в виде заголовка уровня n. Значения n могут изменяться от 1 до 6. Заголовок высшего уровня
выводится наиболее крупным шрифтом. В заголовках можно использовать атр и-
15
бут выравнивания ALIGN со значениями LEFT (по умолчанию), RIGHT и
CENTER.
Задание к лабораторной работе №2
«ОСНОВНЫЕ ТЕГИ HTML. ФОРМАТИРОВАНИЕ ТЕКСТА»
1. Тщательно изучить содержимое разделов 3 и 4 данного пособия.
2. Выполнить все примеры, приведенные в данных разделах.
3. Создать html-страницу со свободной тематикой, оформив ее с использованием всего пройденного материала.
5.
ПРЕДСТАВЛЕНИЕ ЦВЕТА И ГРАФИКИ В HTML-ДОКУМЕНТАХ
В html-документе существует возможность указывать цвет фона документа,
фона ячеек таблиц и цвета текстовых фрагментов, в частности, цвета гиперссылок
(обычных, активных и посещенных).
5.1 Формы представления цвета
Значения цвета можно задавать в одной из двух, представленных ниже,
форм.
Первая форма использует задание цветов в RGB-палитре (Red-Green-Blue).
При этом код цвета указывается как шестиразрядное шестнадцатеричное число,
задающее интенсивность красной (первые две цифры), зеленой (следующие две
цифры) и синей (последние две цифры) составляющей.
Интенсивность каждой составляющей в шестнадцатеричной форме изменяется от 00 до FF. Очевидны коды черного (000000) и белого цветов (FFFFFF), а
также ярко-красного, ярко-зеленого и ярко-синего (FF0000, 00FF00 и 0000FF).
Миллионы оттенков (а именно, 166=16777216) могут быть заданы с помощью
RGB-триады. При задании цвета в качестве значения атрибута некоторого тега
перед шестнадцатеричным числом ставится символ #.
Возможно и задание цветов с помощью имен. Microsoft Internet Explorer
поддерживает 16 стандартных имен цветов (aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), а Netscape Navigator
- несколько сотен. В Netscape Navigator представлены, например, такие оттенки
синего: blue (5 вариантов), cornflowerblue, darkblue, darkslateblue, deepskyblue,
dodgerblue, lavender, lightblue
(5 вариантов), lightskyblue (5 вариантов),
lightslateblue, lightsteelblue (5 вариантов), mediumblue, mediumslateblue, midnightblue, navy, navyblue, powderblue, skyblue (5 вариантов), slateblue (5 вариантов), steelblue (5 вариантов), royalblue (5 вариантов). Каждому названию цвета соответствует определенная RGB-триада, например, цвету "navy" соответствует
"#000080".
Несмотря на принципиальную возможность задать миллионы цветов, надо
учитывать, что браузеры отображают лишь 256 цветов, причем у каждого браузе-
16
ра своя цветовая палитра. В этой палитре браузер подберет цвет, наиболее близкий к заданному.
5.2 Цвет текста и фон документа
Цвет основного текста, цвета гипертекстовых ссылок и фон документа описываются в начальном теге тела документа <BODY> с помощью атрибутов:
TEXT = цвет
Цвет основного текста документа.
LINK = цвет
Цвет не посещенных гиперссылок.
VLINK = цвет
Цвет посещенных гиперссылок.
Цвет активных гиперссылок (вспыхивает на мгновение
ALINK = цвет
при щелчку мыши по гиперссылке).
BGCOLOR = цвет Цвет фона документа.
Адрес графического файла, используемого при создаBACKGROUND=url
нии фонового изображения.
Все перечисленные атрибуты необязательны, однако их всегда стоит указ ывать, чтобы цветовая гамма документа не зависела от величин, принятых браузером по умолчанию.
Фоновое изображение обычно выбирают небольшим по размеру; браузер
помещает его в левый верхний угол окна документа и копирует, распространяя
мозаикой по горизонтали и вертикали, пока не будет заполнено все пространство
окна, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками. Это, например, дает возможность создания различных полосатых и клетчатых фонов с помощью элементарных гр афических изображений. Чуть сложнее создать текстурный фон: тут придется немного поэкспериментировать с маленькими образцами фона, чтобы не было з аметно "стыков". При этом, если указан атрибут BACKGROUND, то отменяется
цвет фона, заданный в BGCOLOR.
Важно отметить, что цвет фона и изображение-фон никак не отображаются
на бумаге при выводе html-документа на печать. Из этого есть одно важное практическое следствие: старайтесь не использовать текст белого цвета.
5.3 Графические форматы
Браузеры поддерживают три графических формата:
GIF - Graphic Interchange Format . При сохранении изображения в этом формате количество используемых цветов не должно превышать 256. Обычно этот
формат используют для небольших изображений, содержащих области одноро дной окраски с четкими границами. Формат GIF позволяет создать прозрачные
фрагменты изображения. Кроме того, этот формат поддерживает анимацию.
JPEG (JPG) - Joint Photography Experts Group. Этот формат допускает сохранение изображений, содержащих миллионы цветов, с тонкими цветовыми пер еходами. Например, фотографии обычно сохраняются в формате JPEG. Изображения в этом формате не могут иметь прозрачных областей.
17
PNG - Portable Network Graphics. Этот формат является развитием формата
GIF. Он обладает всеми преимуществами GIF и, при этом, не имеет ограничений в
количестве используемых цветов.
Несмотря на приведенные общие характеристики графических форматов
для WWW, выбрать оптимальный для конкретного изображения формат зачастую
можно только экспериментальным путем. При этом преследуется основная цель:
достичь хорошего качества изображения при минимальном размере файла.
5.4 Графические изображения
Тег <IMG> вставляет изображение в текстовый поток. Закрывающего компонента этот тег не имеет.
Обязательный атрибут:
SRC = url
адрес графического файла.
Основные необязательные атрибуты:
альтернативный текст, выводимый в режиме браузера
ALT = текст
без загрузки изображений;
толщина обрамляющей рамки в пикселах, 0 – отсутствие
BORDER = значение
рамки (по умолчанию);
высота изображения в пикселах (по умолчанию оригиHEIGHT = значение
нальная), либо в процентах от высоты окна браузера;
ширина изображения в пикселах (по умолчанию оригиWIDTH = значение
нальная), либо в процентах от ширины окна браузера;
свободное пространство слева и справа от изображения
HSPACE = значение
в пикселах;
свободное пространство сверху и снизу от изображения
VSPACE = значение
в пикселах;
выравнивание изображения по горизонтали или вертикали. Значения TEXTTOP, ABSCENTER, CENTER,
BOTTOM, ABSBOTTOM обеспечивают различные варианты вертикального выравнивания относительно текстоALIGN = значение
вой строки. При применении этих значений вставленное
изображение разрывает текстовый поток. Если заданы
значения LEFT либо RIGHT, изображение соответствующим образом будет выровнено по горизонтали;
указывается имя, задаваемое в теге MAP, задающем в
USEMAP = #имя
данном изображении области, чувствительные к щелчку
мыши
Несмотря на то, что формально обязательным является только атрибут SRC,
на практике необходимо указывать и альтернативный текст (атрибут ALT). Ведь
многие работают с браузером в режиме без загрузки изображений, особенно когда
связь плохая, и документ загружается долго. К тому же, до сих пор существуют
браузеры, не поддерживающие графики.
18
Значения атрибутов BORDER, HEIGHT и WIDTH тоже лучше указывать
явным образом, не полагаясь на умолчания. Само наличие атрибутов HEIGHT и
WIDTH говорит о возможности масштабирования исходного изображения. Увеличивать исходное изображение обычно бессмысленно, поскольку это ведет к потере качества. Масштабирование изображений в сторону увеличения применяется
в особых случаях, когда необходимо вывести цветные полосы либо прозрачные
"распорки" строго определенной ширины и высоты. При этом достаточно изготовить изображение размером 1х1 пиксел (нужного цвета или прозрачное) и вставить в документ, задав необходимые размеры.
Сильно уменьшенные варианты изображений используют довольно часто,
например, для создания каталога миниатюр, каждая из которых имеет гиперссылку на полномасштабное изображение.
Задание к лабораторной работе №3 «Представление цвета
и графики в html-документах»
1. Тщательно изучить содержимое раздела 5.
2. Используя атрибуты тега <BODY>, приведенные в подразделе 5.2, поэкспериментировать с заданием цветов, способами, указанными в 5.1.
3. Задействовать любой из доступных файлов-изображений (например, фоновые рисунки рабочего стола Windows) в Вашей html-странице.
4. Поэкспериментировать со всеми атрибутами тега <IMG>.
5. Загрузить несколько web-страниц различной тематики из сети Интернет.
Сделать выводы, об используемых в них различных сочетаниях цвета.
6. СПИСКИ
HTML позволяет создавать нумерованные (упорядоченные), маркированные (неупорядоченные) списки, а также так называемые списки определений (используются сравнительно редко). Фрагмент текста, представляющий собой с писок, заключается в теги:
<OL> ... </OL> упорядоченный список (от английского ordered list)
<UL> ... </UL> неупорядоченный список (от английского unordered list)
<DL> ... </DL> список определений (от английского definition list)
Каждый элемент упорядоченного или неупорядоченного списка заключается в теги <LI> ... </LI> (от английского list item). Элементы списка определений
заключается в теги <DT> ... </DT> (термин) либо <DD> .. </DD> (определение).
При выводе текста браузер располагает каждый элемент списка с новой строки,
предваряя его номером либо маркером в случае, соответственно, упорядоченного
или неупорядоченного списка.
В списке определений текст, заключенный между тегами <DD> ... </DD>,
сдвигается на некоторое количество позиций (в разных браузерах по-разному)
вправо относительно остального текста. Это свойство можно с успехом использ о-
19
вать и в том случае, когда по существу никакого списка нет, а просто надо сдвинуть ряд строк правее основного текста.
Тег <OL> имеет необязательные атрибуты:
TYPE = формат
Формат нумерации. Может иметь значения: арабские цифры (по умолчанию); прописные буквы; строчные буквы;
большие римские цифры; маленькие римские цифры.
START = значение Первый номер в списке (по умолчанию 1).
Тег <UL> имеет необязательный атрибут
TYPE = формат Формат маркера. Может иметь значения: Disc – диск (по
умолчанию); Circle – окружность; Square – квадрат.
Пример ненумерованного списка:
<UL>
<LI>Иван;
<LI>Данила;
<LI>белая кобыла
</UL>
Заменив </UL> на </OL>, получим пример нумерованного списка.
Пример списка определений:
<DL>
<DT>HTML
<DD>Термин HTML (HyperText Markup Language) означает 'Язык
маркировки гипертекстов'. Первую версию HTML разработал сотрудник
Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
<DT>html-документ
<DD>Текстовый файл с расширением *.htm (Unix-системы могут содержать
файлы с расширением *.html).
</DL>
Если определяемые термины достаточно коротки, можно использовать тег
<DL COMPACT>, например:
<DL COMPACT>
<DT>А
<DD>Первая буква алфавита
<DT>Б
<DD>Вторая буква алфавита
<DT>В
<DD>Третья буква алфавита
</DL>
Допустимы вложенные списки, они очень удобны при подготовке разного
рода планов и оглавлений:
<H1>HTML поддерживает несколько видов списков </H1>
<DL>
<DT>Ненумерованные списки
20
<DD>Элементы ненумерованного списка выделяются специальным символом и отступом слева:
<UL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент 3
</UL>
<DT>Нумерованные списки
<DD>Элементы нумерованного списка выделяются отступом слева, а также
нумерацией:
<OL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент 3
</OL>
<DT>Списки определений
<DD>Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит
более эффектно.
<P>Помните, что списки можно встраивать один в другой, но не следует закладывать слишком много уровней вложенности. </P>
<P>Обратите внимание, что внутри элемента списка может находиться несколько абзацев. Все абзацы при этом будут иметь одинаковое левое поле. </P>
</DL>
Задание к лабораторной работе №4 «Списки»
1. Тщательно изучить содержимое раздела 6.
2. Выполнить все примеры, приведенные в данном разделе.
3. Создать html-страницу со свободной тематикой, оформив ее с использованием всего пройденного материала.
7. ГИПЕРССЫЛКИ
В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного
фрагмента текста к другому. Системы помощи многих популярных программных
продуктов устроены именно по гипертекстовому принципу. При нажатии левой
кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к заранее назначенному документу или фрагменту документа.
Связь между html-документами и фрагментами документов организуется с
помощью тегов <A> ... </A> (от английского anchor - якорь).
Тег <A> употребляется в двух формах.
В первом случае – при создании гиперссылки. При этом, обязательным является атрибут HREF = url – адрес целевого документа. Текст и изображения,
21
размещенные между тегами <A> ... </A>, становятся активной зоной документа,
чувствительной к щелчку мыши, который вызывает загрузку целевого документа.
Текст гиперссылки выделяется подчеркиванием и цветом, указанным как знач ение атрибута LINK тега <BODY> (либо цветом по умолчанию). Из необязательных атрибутов здесь упомянем один: TARGET = имя – имя фрейма или окна для
вывода целевого документа.
Во втором случае – при создании якоря (метки) фрагмента. Здесь обязателен
атрибут NAME = имя – имя идентификатора фрагмента. Созданный в некоторой
точке документа якорь служит для того, чтобы была возможность ссылаться не на
весь документ целиком, а на его фрагмент. При создании ссылки на этот фрагмент
используется тег <A> с атрибутом HREF. Имя идентификатора фрагмента дописывается к адресу целевого документа через символ #.
Рассмотрим пример совместного использования якоря и гиперссылки.
Представим себе длинный документ book.htm, состоящий из нескольких глав. Создадим в точке начала каждой главы метку-якорь и дадим этим меткам удобные
имена, например:
.......
<A NAME="chapter1"></A> Глава 1. ........
.......
<A NAME="chapter2"></A> Глава 2. ........
.......
Следите за написанием имен якорей: большинство браузеров отличают
большие заглавные буквы от строчных.
Теперь можно создать гиперссылки из этого же документа, или из любого
другого, на указанные фрагменты. Приведем, например, гиперссылки на точку
документа, с которого начинается Глава 2.
Гиперссылка из того же документа:
<A HREF="#chapter2">переход к Главе 2</A>
Гиперссылка из другого документа, находящегося в том же каталоге:
<A HREF="book.htm#chapter2">переход к Главе 2</A>
Обратите внимание: если в адресе перехода не указан каталог, переход
будет выполнен внутри текущего каталога. Если в адресе перехода не указан
сервер, переход будет выполнен на текущем сервере. Из этого следует одно очень
важное практическое соображение. Допустим, Вы подготовили к публикации
некоторую группу html-документов, которые ссылаются друг на друга только по
имени файла и находятся в одном каталоге на Вашем компьютере. Тогда, вся эта
группа документов будет работать точно так же, если ее поместить в любой
другой каталог на любом другом компьютере, на локальной сети или ... в
Интернет! Таким образом, у Вас появляется возможность разрабатывать целые
коллекции документов без подключения к Интернет, и только после
окончательной готовности, подтвержденной испытаниями, помещать коллекции
документов на Интернет целиком.
Отметим, что тег <A> позволяет сделать активной зоной текстовый фрагмент или изображение целиком (например, <A HREF="pr.htm"> <IMG
22
SRC="picture.gif"> </A>). Для того, чтобы разные фрагменты одного изображения
ссылались на разные целевые документы, придется использовать тег <MAP>, реализующий чувствительное изображение-карту (см. раздел Изображение-карта).
Возможны также ссылки и на другие виды ресурсов:
<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>;
<A HREF="mailto:user@mail.box">Послать письмо</A>.
Задание к лабораторной работе №5 «Гиперссылки»
1. Тщательно изучить содержимое раздела 7.
2. Используя примеры, приведенные в данном разделе, создать гиперссылки с одного Вашего html-документа на другой, а также на фрагменты документа.
3. Проработать тематику и структуру Вашего курсового проекта. Начать
создание его отдельных элементов.
8. ИЗОБРАЖЕНИЕ-КАРТА
Иногда согласно дизайнерскому замыслу web-мастера в html-документ надо
поместить изображение, отдельные части которого должны переводить по г иперссылке на разные целевые документы. Один из очевидных примеров такого
изображения – географическая карта, щелкнув мышкой по определенным зонам
которой, мы переходим к соответствующим документам. В этом случае организовать ссылку с использованием тега <A> непосредственно нельзя, и приходится
либо "разрезать" изображение на несколько отдельных, состыковывать их и действовать обычным образом (см. раздел 7), либо использовать тег <MAP>.
У тега-контейнера <MAP> единственным обязательным атрибутом является
его имя NAME, которое должно быть использовано при описании атрибута
USEMAP тега IMG, описывающего изображение, призванного служить картой.
Внутри <MAP> каждой чувствительной к перемещению мыши зоне изображения
должен соответствовать тег <AREA> с атрибутами:
COORDS = список Список (через запятую) координат активной зоны (зависит от
типа заданной формы зоны).
HREF = url
Адрес целевого документа гиперссылки, связанного с указанной зоной.
SHAPE = форма
Возможные значения: circle (окружность – задается координатами центра и радиусом в пикселах); rectangle (прямоугольник
– задается координатами левого верхнего и правого нижнего
угла); polygon (многоугольник – задается координатами своих
вершин).
NOREF
Иногда бывает нужно указать, что данная зона (заданная атрибутом SHAPE и координатами COORDS) не является активной,
реакции на щелчок мыши нет.
23
Пусть, например, у нас есть изображение russia.gif размера 360х200 пиксела
и три html-документа, на которые надо организовать гиперссылки: peterburg.htm,
moscow.htm и yakutsk.htm.
Активными зонами изображения сделаем кружки, условно отмечающие местоположение на карте трех городов.
Центры кружков, если принять за точку отсчета (0,0) левый верхний угол
изображения, находятся примерно на уровне:
(47,58) – Санкт-Петербург (координаты указаны на картинке);
(46,82) – Москва;
(254,91) – Якутск.
Логично в данном случае выбрать окружность в качестве формы активной
зоны. Приняв, например, радиус этой окружности равным 8 пикселам (с избытком), реализовать гиперссылки можно с помощью следующего HTML-кода:
<IMG
SRC="russia.gif"
ALT="Карта
России"
WIDTH="360"
HEIGHT="200" BORDER=0 USEMAP="#mymap">
<MAP NAME="mymap">
<AREA SHAPE="circle" COORDS="47,58,8" HREF="peterburg.htm">
<AREA SHAPE="circle" COORDS="46,82,8" HREF="moscow.htm">
<AREA SHAPE="circle" COORDS="254,91,8" HREF="yakutsk.htm">
</MAP>.
Задание к лабораторной работе №6 «Изображение-Карта»
1. Тщательно изучить содержимое раздела 8.
2. Задействовать любой из доступных файлов-изображений (например,
фоновые рисунки рабочего стола Windows) для создания изображения-карты.
3. Использовать, помеченные Вами фрагменты изображения-карты, для
ссылок на разные целевые документы.
9. ТАБЛИЦЫ
24
Таблицы в html-документах используются не столько для того, чтобы располагать данные в обрамленных ячейках, сколько с целью позиционирования
фрагментов текста и изображений друг относительно друга. Действительно, помещая изображения и фрагменты текста в ячейки таблицы с невидимой границей,
можно добиться эффекта обтекания изображения текстом, расположить текст как
многоколоночный и так далее. Кроме того, таблица, состоящая из одной ячейки,
может очень эффектно выделить фрагмент текста, на который Вы хотите обратить
внимание читателя.
Основные теги, используемые для описания таблиц: <TABLE> ...
</TABLE>; <TR> ... </TR>; <TD> ... </TD>. Все табличные данные заключаются в
теги <TABLE> ... </TABLE>; описание каждого ряда ячеек заключается в теги
<TR> ... </TR>; содержимое каждой ячейки заключается в теги <TD> ... </TD>.
Таким образом, для описания, например, таблицы из двух строк (рядов),
каждая из которых содержит две ячейки, придется создать следующую конструкцию:
<TABLE>
<TR>
<TD> содержимое 1-ой ячейки первой строки </TD>
<TD> содержимое 2-ой ячейки первой строки </TD>
</TR>
<TR>
<TD> содержимое 1-ой ячейки второй строки </TD>
<TD> содержимое 2-ой ячейки второй строки </TD>
</TR>
</TABLE>
Ячейки таблицы могут содержать любые данные, допустимые в htmlдокументе, в частности, текст, изображения, текст с html-тегами. Допустимы также вложенные таблицы. Не следует оставлять ячейки таблицы незаполненными.
Если по Вашему замыслу какая-то ячейка должна выглядеть пустой, поместите в
нее хотя бы неразрывный пробел &nbsp;. Ячейки, не содержащие данных, могут
некрасиво выглядеть в Netscape Navigator: не отображаться заданный фон и рамки
ячеек.
Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером (если не задан атрибут ячейки NOWRAP); текст выводится слово за словом; при достижении правой границы ячейки очередное слово переносится на новую строку.
Ячейки таблицы могут охватывать несколько строк или столбцов; при описании таких ячеек используется атрибуты ROWSPAN и COLSPAN.
Теги, описывающие таблицы, имеют много атрибутов; все они необязательны. В данном пособии мы упомянем лишь те, которые одинаково поддерживаются браузерами Netscape Navigator и Microsoft Internet Explorer. Учтите, что даже
при использовании только этих атрибутов, таблицы могут выглядеть в разных
браузерах по-разному. Следовательно, как и во многих других случаях, уверенность в качестве Вашего сайта даст только тестирование во многих брауз ерах.
25
Атрибуты тега <TABLE> задают параметры таблицы в целом:
Устанавливает расположение таблицы по
ALIGN = значение
отношению к полям документа. Возможны
значения left, right и center.
BACKGROUND = url
Фоновое изображение для всей таблицы.
BGCOLOR = цвет
Фоновый цвет.
Толщина внешней рамки таблицы и ячеек в пикBORDER = значение
селах (0 - без обрамления).
Расстояние от границ ячейки до ее содержимого в
CELLPADDING = значение
пикселах.
CELLSPACING = значение Расстояние между ячейками в пикселах.
Свободное пространство слева и справа от таблиHSPACE = значение
цы в пикселах.
Свободное пространство сверху и снизу от табVSPACE = значение
лицы в пикселах.
Ширина таблицы. Задается либо в пикселах, либо
WIDTH = значение
в процентах от текущей ширины окна браузера.
Примеры: WIDTH=256; WIDTH=100%.
Атрибуты тега <TR> задают параметры данного ряда (при возникновении
противоречий атрибуты, заданные в теге <TABLE>, отменяются):
Выравнивание содержимого ячеек. Возможны значеALIGN = значение
ния left, right и center.
Фоновое изображение для ячеек данного ряда
BACKGROUND = url
таблицы.
BGCOLOR = цвет
Фоновый цвет для ячеек данного ряда.
Толщина рамки, обрамляющей ячейки данного ряда (0
BORDER = значение
- без обрамления).
Вертикальное выравнивание содержимого ячеек. ВозVALIGN = значение
можны значения top, center и bottom.
Атрибуты тега <TD> задают параметры данной ячейки (при возникновении
противоречий атрибуты, заданные в тегах <TABLE> и <TR>, отменяются):
Выравнивание содержимого ячейки. Возможны значеALIGN = значение
ния left, right и center.
BACKGROUND = url Фоновое изображение для ячейки таблицы.
BGCOLOR = цвет
Фоновый цвет для ячейки.
Толщина рамки, обрамляющей ячейку (0 – без обрамBORDER = значение
ления).
Вертикальное выравнивание содержимого ячейки.
VALIGN = значение
Возможны значения top, center и bottom.
Ширина ячейки. Задается либо в пикселах, либо в проWIDTH = значение
центах от ширины таблицы.
26
ROWSPAN = значение Указывает количество строк, охватываемых ячейкой.
Указывает количество столбцов, охватываемых ячейCOLSPAN = значение
кой.
При задании этого атрибута текст не располагается автоматически в ячейке. Отображается лишь та его
NOWRAP
часть, что умещается в видимой части ячейки. Может
появиться горизонтальная полоса прокрутки.
При работе с таблицами учтите, что указанное значение атрибута WIDTH
во многих случаях лишь "принимается к сведению" браузером. Заданные пропо рции в точности выдерживаются редко, браузер старается отобразить таблицу как
можно лучше (в его понимании).
Отметим, что любая ячейка таблицы может содержать в себе другую таблицу.
Пример таблицы:
<H1>Простейшая таблица </H1>
<TABLE BORDER=1> <!--Это начало таблицы-->
<CAPTION>
<!--Это заголовок таблицы-->
У таблицы может быть заголовок
</CAPTION>
<TR>
<!--Это начало первой строки-->
<TD>
<!--Это начало первой ячейки-->
Первая строка, первая колонка
</TD>
<!--Это конец первой ячейки-->
<TD>
<!--Это начало второй ячейки-->
Первая строка, вторая колонка
</TD>
<!--Это конец второй ячейки-->
</TR>
<!--Это конец первой строки-->
<TR>
<!--Это начало второй строки-->
<TD>
<!--Это начало первой ячейки-->
Вторая строка, первая колонка
</TD>
<!--Это конец первой ячейки-->
<TD>
<!--Это начало второй ячейки-->
Вторая строка, вторая колонка
</TD>
<!--Это конец второй ячейки-->
</TR>
<!--Это конец второй строки-->
</TABLE>
<!--Это конец таблицы-->
Задание к лабораторной работе №7 «Таблицы»
1.
2.
3.
проекте.
Тщательно изучить содержимое раздела 9.
Выполнить все примеры, приведенные в данном разделе.
Рассмотреть возможность использования таблиц в Вашем курсовом
27
10.
ФРЕЙМЫ
Фреймы (от английского frame) позволяют разбить окно браузера на области, в каждую из которых можно загрузить свой html-документ. При описании
гиперссылок в этом случае есть возможность отобразить целевой документ в любом фрейме из описанного набора.
Структура html-документа, задающего набор фреймов, отличается от простейшей, описанной в подразделе 2.2. Секция <HEAD> по-прежнему присутствует, а вместо секции <BODY>, описывающей содержание одного документа, используется конструкция, описывающая набор фреймов. При этом используются
два тега:
<FRAMESET> ... </FRAMESET> – описывает структуру набора фреймов;
указывает, на сколько фреймов и каких пропорций надо разбить окно браузера.
<FRAME> – для каждого фрейма указывает, какой документ и с какими параметрами первоначально загружается в фрейм.
10.1 Описание структуры набора фреймов
При описании структуры набора фреймов в теге <FRAMESET> ...
</FRAMESET> необходимо указать хотя бы один из атрибутов COLS или ROWS,
значения которых определяют количество строк и столбцов в разбиении и размеры получающихся фреймов. Размеры фреймов (ширина и высота) могут быть
определены тремя способами:
– в пикселах;
– в процентах от ширины либо высоты окна браузера;
– каждый символ * в описании размеров интерпретируется, как указание
отвести для фрейма равную часть от оставшегося пространства окна.
Например, описание:
<FRAMESET COLS = "50,30%,*">
задает разбиение окна на три столбца, первый из которых имеет ширину 50 пикселов, ширина второго составляет 30% от всей ширины окна, а остальное пр остранство отдается третьему столбцу.
Описание:
<FRAMESET ROWS = "20%,*,30%,*">
задает разбиение окна на четыре строки, первая из которых имеет высоту 20% от
высоты всего окна, третья - 30% от высоты всего окна, а остальное пространство
делится поровну между второй и четвертой строкой.
Описание:
<FRAMESET COLS = "30%,*" ROWS = "60%,*">
задает разбиение окна на два столбца, ширина первого из которых составляет 30%
от всей ширины окна, и на две строки, первая из которых имеет высоту 60% от
высоты всего окна. Таким образом, здесь получают четыре фрейма.
28
10.2 Общий вид html-документа, задающего набор фреймов
Описав структуру набора фреймов с помощью тега <FRAMESET>, для
каждого фрейма надо определить тег <FRAME>, обязательный атрибут SRC которого задает адрес документа, первоначально загружаемого в фрейм. Вот пример
html-документа, описывающего набор фреймов с минимальным набором атрибутов:
<HTML>
<HEAD>
<TITLE> Пример набора фреймов </TITLE>
</HEAD>
<FRAMESET COLS = "50%,*" ROWS = "30%,*">
<FRAME SRC = "Frame1.htm">
<FRAME SRC = "Frame2.htm">
<FRAME SRC = "Frame3.htm">
<FRAME SRC = "Picture.jpg">
</FRAMESET>
</HTML>
Обратите внимание на то, что тег <FRAME> не имеет закрывающего компонента.
Здесь описаны четыре фрейма соответствующих пропорций, в первые три
из которых первоначально загружаются html-документы Frame1.htm, Frame2.htm
и Frame3.htm, а в четвертый – графическое изображение из файла Picture.jpg.
Фреймы заполняются, начиная с верхнего левого, слева направо и сверху вниз,
так что набор фреймов в браузере имеет вид:
Изображение из
файла Picture.jpg
Допустимы вложенные наборы фреймов. Вот пример такого документа:
<HTML>
<HEAD>
<TITLE> Пример вложенных наборов фреймов </TITLE>
</HEAD>
29
<FRAMESET COLS = "*,70%">
<FRAME SRC = "Frame1.htm">
<FRAMESET ROWS = "*,*,50%">
<FRAME SRC = "Frame2.htm">
<FRAME SRC = "Frame3.htm">
<FRAME SRC = "Picture.jpg">
</FRAMESET>
</FRAMESET>
</HTML>
10. 3 Дополнительные атрибуты тегов <FRAMESET> и <FRAME>
Тег <FRAMESET> имеет ряд необязательных атрибутов, настраивающих
обрамление фреймов. Эти атрибуты различны для браузеров Netscape Navigator и
Internet Explorer, что затрудняет их применение.
Netscape Navigator:
Толщина рамки, обрамляющей ячейку (по умолBORDER = значение
чанию 5 пикселов; 0 - без обрамления).
BORDERCOLOR = цвет
Цвет обрамления.
Включение/выключение объемного обрамления
FRAMEBORDER = значение
(возможные значения: yes и no).
Internet Explorer :
FRAMESPACING = значение Промежуток между фреймами в пикселах.
Включение/выключение объемного обрамления
FRAMEBORDER = значение
(возможные значения: 1 и 0).
Те же атрибуты могут быть указаны и в теге <FRAME> для отдельного
фрейма. В этом случае они отменяют соответствующие атрибуты тега
<FRAMESET>. Как видно, возможен конфликт этих атрибутов, например знач ения атрибута FRAMEBORDER различаются для разных браузеров. Ряд других атрибутов тега <FRAME> одинаково интерпретируются браузерами:
30
Адрес документа, первоначально загружаемого
в фрейм. Обязательный атрибут.
NAME = имя
Имя фрейма. Используется при перенаправлении целевого документа по гиперссылке.
SCROLLING = значение
Полосы прокрутки (yes – выводятся в фрейме
всегда; no – не выводятся; auto – выводятся по
необходимости – по умолчанию).
NORESIZE
Если указан этот атрибут, то пользователь не
сможет изменять заданные размеры фрейма.
MARGINHEIGHT = значение Сверху и снизу от фрейма добавляется свободное пространство высотой в указанное количество пикселов.
MARGINWIDTH = значение Справа и слева от фрейма добавляется свободное пространство шириной в указанное количество пикселов.
SRC = url
10.4 Целевые фреймы
Если помещенный в фрейм документ содержит гиперссылки, то по умолчанию целевой документ загружается в тот же фрейм. Умолчание можно изменить,
указав имя фрейма (атрибут NAME тега <FRAME>) и использовав это имя в качестве значения атрибута TARGET тега <A> (см. раздел "Гиперссылки").
Например, дополним описание уже упоминавшегося фрейма:
<FRAME SRC = "Frame1.htm" NAME = "main">
Тогда, в каком бы фрейме не находился документ, содержащий гиперссылку, целевой документ можно отобразить в этом фрейме с помощью тега
<A HREF = "New.htm" TARGET = "main">
Если будет выбрана эта гиперссылка, документ New.htm будет загружен в
фрейм по имени main.
Помимо имен, даваемых фреймам автором сайта, в качестве значения атрибута TARGET могут использоваться следующие зарезервированные имена:
blank - целевой документ загружается в новое окно браузера;
top - целевой документ загружается в то же окно, но поверх всех фреймов,
занимая полностью пространство окна;
parent - если документ с гиперссылкой находится во вложенном наборе
фреймов, то целевой документ загружается в родительское окно или набор фреймов;
self - целевой документ загружается в тот же фрейм (соответствует умолчанию).
Используя фреймы, помните о следующих особенностях гиперссылок:
если атрибут TARGET не указан, целевой документ загружается по умолчанию в тот же фрейм;
если указано несуществующее имя фрейма, открывается новое окно браузера, получая при этом заданное имя;
31
для внешних ссылок следует задавать значения атрибута TARGET либо top,
либо blank, чтобы чужие сайты не отображались в Ваших фреймах, а занимали
полное окно.
Пожалуй, не стоит злоупотреблять применением имени blank, ибо часто
пользователи не замечают, что открылось новое окно, незакрытые окна множатся
и пользователь запутывается в них.
Задание к лабораторной работе №8 «Фреймы»
те.
1.
2.
3.
Тщательно изучить содержимое раздела 10.
Выполнить все примеры, приведенные в данном разделе.
Обязательно использовать аппарат фреймов в Вашем курсовом проек11.
Формы
Форма – это инструмент, с помощью которого html-документ может послать некоторую информацию в заранее определенную точку внешнего мира, где
данная информация будет каким-то образом обработана. В качестве такой "точки"
в большинстве случаев выступает программа, написанная на Перл или Си. Пр ограммы, обрабатывающие данные, переданные формами, часто называют CGIскриптами. Сокращение CGI (Common Gateways Interface) означает "общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования и возможностей
операционных систем.
Форма открывается тегом <FORM> и заканчивается тегом </FORM>. htmlдокумент может содержать в себе несколько форм, однако формы не должны
быть вложенными. html-текст, включая теги, может размещаться внутри форм без
ограничений. Тег <FORM> может содержать три атрибута, один из которых является обязательным:
Обязательный атрибут. Определяет, где находится обработчик формы.
Определяет, каким образом данные из формы будут переMETHOD = значение даны обработчику. Допустимые значения: POST и GET
(по умолчанию).
Определяет, каким образом данные из формы будут закоENCTYPE = значение дированы для передачи обработчику (по умолчанию: application/x-www-form-urlencoded).
ACTION = значение
11.1 Простейшая форма
Для того, чтобы запустить процесс передачи данных из формы обработчику,
нужен какой-то орган управления. Создать такой орган управления очень просто:
32
<INPUT TYPE=submit>
Встретив такую строчку внутри формы, браузер нарисует на экране кнопку
с надписью Submit, при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в теге <FORM>. Надпись на кнопке
можно задать путем введения атрибута VALUE="[Надпись]", например:
<INPUT TYPE=submit VALUE="Поехали!">
Пример простейшей формы:
<H1>Простейшая форма </H1>
<FORM ACTION="pr.htm"> <!--Это начало формы-->
<INPUT TYPE=submit VALUE="Назад, к началу">
</FORM> <!--Это конец формы-->
Надпись, нанесенную на кнопку, можно при необходимости передать обр аботчику путем введения в определение кнопки атрибута NAME=[имя], например:
<INPUT TYPE=submit NAME=button VALUE="Поехали!">
При нажатии на такую кнопку обработчик вместе со всеми остальными
данными получит и переменную button со значением Поехали!. В форме может
быть несколько кнопок типа submit с различными именами и/или значениями.
Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.
11.2 Типы элементов форм
Существуют и другие типы элементов. Каждый элемент <INPUT> должен
включать атрибут NAME=[имя], определяющий имя элемента (и, соответственно,
имя переменной, которая будет передана обработчику). Имя должно задаваться
только латинскими буквами. Большинство элементов <INPUT> должны включать
атрибут VALUE="[значение]", определяющий значение, которое будет передано
обработчику под этим именем. Однако, для элементов <INPUT TYPE=text> и
<INPUT TYPE=password>, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры. Основные типы элементов <INPUT>:
TYPE=text
Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах) и
MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах). Пример:
<INPUT TYPE=text SIZE=20 NAME=user VALUE="Иван">
Определяет окно шириной 20 символов для ввода текста. По умолчанию в
окне находится текст Иван, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в пер еменной user.
TYPE=password
Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только
вместо символов вводимого текста показывает на экране звездочки (*). Пример :
33
<INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=10>
Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов. Введенный пароль передается обработчику в переменной pw.
TYPE=radio
Определяет радиокнопку. Может содержать дополнительный атрибут
checked (показывает, что кнопка помечена – активна). В группе радиокнопок с
одинаковыми именами может быть только одна помеченная радиокнопка.
Пример:
<INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600 бит/с
<INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 бит/с <INPUT
TYPE=radio NAME=modem VALUE="28800"> 28800 бит/с
Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400
бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem
со значением 9600. Если пользователь отметит другую кнопку, обработчику будет
передана переменная modem со значением 14400 или 28800.
TYPE=checkbox
Определяет квадрат, в котором можно сделать пометку. Может содержать
дополнительный атрибут checked (показывает, что квадрат помечен – активен). В
отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть
несколько помеченных квадратов. Пример:
<INPUT TYPE=checkbox NAME=comp VALUE="PC"> Персональные компьютеры
<INPUT TYPE=checkbox NAME=comp VALUE="WS" checked> Рабочие
станции
<INPUT TYPE=checkbox NAME=comp VALUE="LAN"> Серверы локальных сетей
<INPUT TYPE=checkbox NAME=comp VALUE="IS" checked> Серверы Интернет
Определяет группу из четырех квадратов. Первоначально помечены второй
и четвертый квадраты. Если пользователь не произведет изменений, обработчику
будут переданы две переменные: comp=WS и comp=IS.
TYPE=hidden
Определяет скрытый элемент данных, который не виден пользователю при
заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке,
чтобы обработчик мог знать, с какой версией формы он имеет дело. Другие во зможные варианты использования Вы вполне можете придумать сами. Пример :
<INPUT TYPE=hidden NAME=version VALUE="1.1">
Определяет скрытую переменную version, которая передается обработчику
со значением 1.1.
TYPE=reset
34
Определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не
передаются, кнопка типа reset может и не иметь атрибута name. Пример:
<INPUT TYPE=reset VALUE="Очистить поля формы">
Определяет кнопку Очистить поля формы, при нажатии на которую форма
возвращается в исходное состояние.
Помимо элементов <INPUT>, формы могут содержать меню <SELECT> и
поля для ввода текста <TEXTAREA>. Меню <SELECT> из n элементов выглядит
примерно так:
<SELECT NAME="[имя]">
<OPTION VALUE="[значение 1]">[текст 1]
<OPTION VALUE="[значение 2]">[текст 2]
...
<OPTION VALUE="[значение n]">[текст n]
</SELECT>
Как Вы видите, меню начинается с тега <SELECT> и заканчивается тегом
</SELECT>. Тег <SELECT> содержит обязательный атрибут NAME, определяющий имя переменной, которую генерирует меню. Тег <SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню
можно выбрать несколько элементов. Большинство браузеров показывают меню
<SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту
окна в строках можно задать атрибутом SIZE=[число]). Меню <SELECT> в большинстве случаев отображается в виде выпадающего меню. Тег <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран данный элемент меню. Тег
<OPTION> может включать атрибут checked, показывающий, что данный элемент
отмечен по умолчанию. Разберем небольшой пример.
<SELECT NAME="selection">
<OPTION VALUE="option1" checked>Вариант 1
<OPTION VALUE="option2">Вариант 2
<OPTION VALUE="option3">Вариант 3
</SELECT>
Такой фрагмент определяет меню из трех элементов: Вариант 1, Вариант 2
и Вариант 3. По умолчанию выбран элемент Вариант 1. Обработчику будет передана переменная selection значение которой может быть option1 (по умолчанию),
option2 или option3.
Элемент <TEXTAREA> также достаточно прост. Например:
<TEXTAREA NAME=address ROWS=5 COLS=50>
А здесь – Ваш адрес...
</TEXTAREA>
Все атрибуты обязательны. Атрибут NAME определяет имя, под которым
содержимое окна будет передано обработчику (в примере — address). Атрибут
ROWS устанавливает высоту окна в строках (в примере — 5). Атрибут COLS
устанавливает ширину окна в символах (в примере — 50). Текст, размещенный
35
между тегами <TEXTAREA> и </TEXTAREA>, представляет собой содержимое
окна по умолчанию. Пользователь может его отредактировать или просто стереть.
Важно знать, что русские буквы в окне <TEXTAREA> при передаче обработчику
могут быть конвертированы в соответствующие им символьные объекты.
Пример
Для демонстрации использования форм написана небольшая программа на
PHP, которая находится по адресу:
http://206.31.82.215/hp/nc/fd-win.pht
Исходные данные в эту программу передаст следующая форма:
<H1>Несколько более сложная форма </H1>
<FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post>
<H2>Расскажите немного о себе...</H2>
<P>Указывать подлинные данные совсем не обязательно.
Для целей демонстрации вполне подойдут и вымышленные. </P>
<P>Имя: <INPUT TYPE=text SIZE=40 NAME=fn><BR>
Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR>
Пол: <INPUT TYPE=radio NAME=gender VALUE="male" checked>мужской
<INPUT TYPE=radio NAME=gender VALUE="female">женский<BR>
Возраст: <INPUT TYPE=text SIZE=5 NAME=age> лет<BR>
<INPUT TYPE=submit VALUE="Запустить обработчик"></P>
</FORM>
Заполняйте форму, жмите на кнопку и смотрите, что будет...
HTML предоставляет в Ваше распоряжение довольно мощный механизм
пересылки содержимого форм по электронной почте. Вот как это выглядит на
практике. Допустим, что мы слегка изменили пример и вместо строки
<FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post>
мы ввели строку
<FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain>
Обратите внимание, что мы изменили алгоритм кодирования на text/plain,
то есть фактически выключили кодирование вообще. Предположим теперь, что
пользователь указал, имя Иван, фамилию Петров, мужской пол и возраст 22 года.
Теперь вопрос: что произойдет, если пользователь нажмет на кнопку «Запустить
обработчик»? Ответ прост. На адрес user@mail.box электронной почтой автоматически будет отправлено сообщение следующего содержания:
fn=Иван
ln=Петров
gender=male
age=22
К сожалению, не все пользователи смогут воспользоваться такой формой.
Дело в том, что всю работу по составлению сообщения и запуску почтовой пр ограммы для его отправки фактически берет на себя браузер пользователя. Это
значит, что конфигурация доступа пользователя к Интернет должна обеспечивать
одновременное функционирование протокола передачи гипертекстов и протокола
36
доставки исходящей почты. Такое возможно не всегда. Тем не менее, даже если
это невозможно, то браузер просто выдаст сообщение об ошибке.
Задание к лабораторной работе №9 «Формы»
1. Тщательно изучить содержимое раздела 11.
2. Выполнить все примеры, приведенные в данном разделе.
3. Рассмотреть возможность использования аппарата форм в Вашем курсовом проекте.
Несколько советов
Не увлекайтесь тегами, соответствующими последним стандартам; помните
о владельцах устаревших версий браузеров.
Тестируйте Ваш сайт по возможности в различных браузерах разных версий, при различных разрешениях экрана.
Не полагаясь на умолчания, указывайте явным образом атрибуты тегов.
Помните о кодировке кириллицы (см. подраздел 3.3).
Прежде, чем использовать графические изображения, оцените размер файла. Если надо, потратьте время на обработку изображения, добиваясь приемлемого качества при минимальном размере файла;
Работая с редактором html-документов, не забывайте смотреть на исходный
html текст; часто его необходимо подправить. Особенно следите за относ ительной
адресацией ресурсов. Если Вы забыли сохранить документ перед тем, как вставлять в него изображения и гиперссылки, редактор использует абсолютную форму
адресации (ссылаясь на систему каталогов Вашего компьютера). В таком случае,
при переносе сайта на другой компьютер, гиперссылки перестают работать, из ображения отсутствуют.
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
0.
Прежде всего, надо попробовать самостоятельно поискать информацию в Интернет. Стоит только задать поисковой системе ключевое слово
"HTML", как Вы получите множество ссылок на описание стандартов HTML и
учебников по HTML (в частности, по-русски). Задайте ключевое слово "texture" и получите множество ссылок на сайты, предлагающих коллекции текстурных
фонов. Задайте ключевое слово "GIF" - получите не только ссылки на коллекции
анимированных GIF-ов, но и ссылки на некоммерческие программы анимации.
1.
Браун Марк Р. Использование HTML 4 / Марк Р. Браун, Джерри
Хоникатт. – М.; СПб.; К.: Издательский дом «Вильямс», 1999. – 784 с.
2.
Гончаров А. Самоучитель HTML. – СПб.: Питер, 2000. – 360 с.
3.
Захаркина В. В. Основы создания Web-страниц. – СПб.: Институт
«Открытое общество», 2000. – 23 с.
37
4.
Матросов А. В. HTML 4.0 / А. В. Матросов, А. О. Сергеев, М. П.
Чаунин. – СПб.: БХВ – Санкт-Петербург, 2000. – 672 с.
5.
Чувахин
Н.
Практическое
руководство
по
HTML
//
http://www.yi.com/home/ChuvakhinNikolai/, 1997.
СОДЕРЖАНИЕ
Введение
1. Основные понятия, инструменты создания и просмотра WEB-страниц
1.1 Стандарты языка HTML
1.2 Браузеры
1.3 Редакторы html-документов
2. Основы языка HTML
2.1 Синтаксис html-тегов
2.2 Структура html-документа
2.3 Адресация ресурсов
Задание к лабораторной работе № 1
3. Основные теги HTML
3.1 Комментарии
3.2 Символьные примитивы (&-последовательности)
3.3 Информация о документе в секции заголовка <HEAD>
4. Форматирование текста
4.1 Разбиение текста
4.2 Форматирование символов
4.2.1 Логическое форматирование
4.2.2 Физическое форматирование
4.3 Параметры шрифта
4.4 Заголовки разных уровней внутри текста
Задание к лабораторной работе № 2
5. Представление цвета и графики в html-документах
5.1 Формы представления цвета
5.2 Цвет текста и фон документа
5.3 Графические форматы
5.4 Графические изображения
Задание к лабораторной работе № 3
6. Списки
Задание к лабораторной работе № 4
7. Гиперссылки
Задание к лабораторной работе № 5
38
8. Изображение-Карта
Задание к лабораторной работе № 6
9. Таблицы
Задание к лабораторной работе № 7
10. Фреймы
10.1 Описание структуры набора фреймов
10.2 Общий вид html-документа, задающего набор фреймов
10.3 Дополнительные атрибуты тегов <FRAMESET> и <FRAME>
10.4 Целевые фреймы
Задание к лабораторной работе № 8
11. Формы
11.1 Простейшая форма
11.2 Типы элементов форм
Задание к лабораторной работе № 9
Несколько советов
Список использованных источников
Методические указания к лабораторным работам по курсу
«Информационные технологии» для студентов специальности 080801
Составители: к.т.н. Андрей Вячеславович Распопов,
к.т.н. Дмитрий Васильевич Меркулов,
Ольга Евгеньевна Ефимова
Редактор
Подписано в печать
2006. Формат 60×84 1/16. Уч.-изд. л.
Усл.-печ. л. . Бумага писчая. Тираж 100 экз. Заказ №
.
Отпечатано: отдел оперативной полиграфии Воронежского государственного
архитектурно-строительного университета
394006 Воронеж, ул. 20-летия Октября, 84
Документ
Категория
Без категории
Просмотров
3
Размер файла
493 Кб
Теги
создание, web, основы, 246, страница
1/--страниц
Пожаловаться на содержимое документа