Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Цель работы: Освоение приемов создания WEB-страниц с использованием HTML (Hyper Text Markup Language) - языка гипертекстовой разметки документов.
HTML-документ отличается от обычного текстового файла тем, что в нем присутствуют специальные команды - тэги, которые указывают правила форматирования документа. Тэги заключаются в треугольные скобки и, как правило, являются парными. Например:
<CENTER> обозначает вывод текста по центру
Этот текст будет расположен в середине экрана
</CENTER> обозначает окончание вывода текста по центру
В тэгах HTML не различают символы верхнего и нижнего регистров: тэг <CENTER> эквивалентен тэгу <center> или <Center>.
Тэгу могут присваиваться атрибуты. Атрибуты указываются в треугольных скобках сразу после имени тэга. Значение атрибута определяется после знака равенства. Например, с тэгом <FONT> (шрифт) может использоваться атрибут SIZE, задающий размер шрифта:
<FONT SIZE=5>
Этот тэг задает размер шрифта - 5.
</FONT>
Обычно HTML-документ обрамляется тэгами <HTML> и </HTML>.
Метка <HTML> сообщает броузеру WEB о считывании HTML-файла, а метка </HTML> обозначает конец HTML-файла.
Документ HTML состоит из двух частей: заголовок и тело.
Заголовок эквивалентен введению и используется для сбора информации о странице. Для определения заголовка применяются метки <HEAD> и </HEAD>. Применять метку <HEAD> следует сразу после метки <HTML>.
В секцию тело вводится текст и другие объекты, которые фактически являются страницей WEB. Для определения тела применяются метки <BODY> и </BODY>, которые идут сразу за меткой <HEAD>.
Таким образом, структура HTML-документа выглядит следующим образом:
<HTML>
<HEAD>
Заголовок документа
</HEAD>
<BODY>
Тело (основная часть документа)
</BODY>
</HTML>
Основное назначение элементов заголовка - это описание общего для всего документа параметров отображения. К таким параметрам можно отнести стиль отображения документа, общий базовый адрес гипертекстовых ссылок, общие гипертекстовые ссылки идентификатор и имя документа и т.п.
Наиболее часто используемым элементом заголовка является имя документа:
<TITLE> Название документа </TITLE>
Содержание элемента <TITLE> отображается в поле названия документа браузера.
Тег <МЕТА> также используется в пределах заголовка страницы и предназначен для того, чтобы включить любую полезную информацию, не определенную другими HTML тегами. Такая информация может быть извлечена серверами/клиентами для использования в идентификации, индексации и создании каталогов просматриваемых страниц.
Тег <МЕТА> не виден в браузере при просмотре страницы, но значительно увеличивает размер страницы. Если Вы хотите, чтобы Ваш сайт находился в числе первых, выдаваемых поисковыми машинами при запросах пользователей, то Вам нельзя игнорировать использование МЕТА - тега. Кроме того, необходимо правильно заполнять содержимое МЕТА - тегов.
Атрибуты МЕТА-тега: HTTP-EQUIV, Name и CONTENT.
HTTP - EQUIV. Этот атрибут определяет заголовок HTTP, которому принадлежит информация. Если семантика заголовка HTTP, названного этим атрибутом известна, то содержание может быть обработано на основании записанных здесь данных. Заголовки HTTP не чувствительны к регистру.
NAME. МЕТА - информационное имя. Если признак NAME - отсутствует, то данный атрибут может получить значение, равное значению HTTP-EQUIV.
CONTENT. МЕТА - информационное содержание, которое будет связано с данным именем и/или заголовком HTTP.
Типичные примеры использования МЕТА – тегов описаны ниже:
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=Windows-1251"> - используется браузерами для определения кодировки, с помощью которой была написана данная страница. "charset=koi8-r" - альтернативная кодировка. Существуют также кодировки ISO, LAT, DOS.
Внимание: не рекомендую вставлять на Вашу страничку данный код, потому что большинство серверов хранят данные в одной кодировке (например, koi8-r) и преобразуют их по запросу пользователя в нужную кодировку. Если сервер исправит Вашу первую кодировку во вторую, а пользователю выдаст третью, как смесь первой и второй, то никакие перекодировщики не смогут восстановить первоначальный текст на странице.
<META Name="author" Content="Ваши Ф.И.О., E-Mail"> - идентификация автора страницы.
<META Name="copyright" Content="Информация о вашей фирме"> - сохранение авторских прав, информация о Вашей фирме и тд.
<META Name="keywords" Content="Ваши ключевые слова"> -определяет список ключевых слов, используемых на данной странице. Необходим для поисковых машин.
<META Name="description" Content="Описание Вашей страницы"> - Краткое описание содержимого данной страницы. Необходим для поисковых машин.
<META HTTP-EQUIV="Expires" Content="Mon, 11 Jun 1998 00:00:01 GMT"> - предназначен для того, чтобы браузер брал страницу не из кэша, а по настоящему адресу.
<META Name="Publisher-Email" Content="Ваш_e-mail@сервер.домен"> - адрес издателя страницы (Ваш адрес).
<META Name="Publisher-URL" Content="Адрес Вашего сайта http://www.Ваш_сайт/"> - адрес Вашего сайта в сети Интернет.
<META Name="Generator" Content="Microsoft Notepad"> - описывается средство, с помощью которого была создана данная страница.
<META Name="revisit-after" Content="10 days"> - (не точно!) как часто обновляется информация на странице.
<META Name="ROBOTS" Content="Index,follow"> - (не точно!) предназначен для поисковых машин, постоянно сканирующих просторы сети Интернет.
<META HTTP-EQUIV="Refresh" Content="2"> - страница перечитывает сама себя через время x (в нашем случае x=2 секунды).
<META HTTP-EQUIV="Refresh" Content="x; URL=http://где.то/что-то.html" - этот вариант прочитает другую страницу через время x.
<META HTTP-EQUIV="pragma" Content="no-cache"> - запрещает кэширование страницы на локальном компьютере пользователя.
<META HTTP-EQUIV="Page-Enter" Content="BlendTrans(Duration=2.0)"> - Эффект появления страницы при входе на на неё..
<META HTTP-EQUIV="Page-Exit" Content="BlendTrans(Duration=2.0)"> - Эффект исчезания страницы при переходе по ссылке..
Тело документа состоит из:
Тэг <BODY> может иметь атрибуты перечисленные в таблице 1.
В данной таблице строка #ХХХХХХ определяет цвет в терминах RedGreenBlue в шестнадцатиричной нотации (приложение Б). Так если указать следующие атрибуты
<BODY BGCOLOR=#FFFFFF TEXT=#0000FF VLINK=#FF0000 LINK=#00FF00>,
то цвет текста определен как синий, фона - белый, пройденных ссылок - красный, а новых ссылок –зелёный.
Таблица 1 - Атрибуты тэга <BODY>
|
Атрибут |
Значение |
|
BGCOLOR=#FFFFFF |
Цвет фона |
|
TEXT=#0000FF |
Цвет текста |
|
VLINK=#FF0000 |
Цвет пройденных гипертекстовых ссылок |
|
LINK=#00FF00 |
Цвет гипертекстовой ссылки |
Цвет можно также задать словом. Например:
<BODY BGCOLOR=red> - браузер выведет цвет фона красным.
В языке HTML возможно использование заголовков шести уровней — от 1 до 6-го. Заголовок первого уровня считается самым главным и используется в качестве первого заголовка документа, например для выделения названия документа. Заголовки могут выделяться цветом или шрифтом, отличным от шрифта, исполь зуемого для отображения основного текста документа, Для задания заголовков используется следующий синтаксис:
<Нх>Текст заголовка</Нх>,
где х — это число от 1 до 6, указывающее уровень заголовка. Например, чтобы задать заголовок третьего уровня, необходимо использовать следующие тэги:
<Н3>Заголовок третьего уровня</НЗ>.
Примечание. Заголовок первого уровня обычно идентичен заголовку самого документа. Если документы состоят из нескольких частей, в заголовке указывается название части.
Для разбиения документов на параграфы в HTML-файлах используется специальный тэг <Р>, а не Enter, как в текстовых редакторах. Следует заметить, что пере ход на новую строку может произойти в любом месте документа, а несколько следующих подряд симво лов "пробел" заменяются на один. Игнорируются также конструкции типа "пробел" <Р> и "пробел" <Нх>.
Даже если текст состоит из двух строк, браузер игнорирует их, и новый параграф начинается после тэга <Р>.
Примечание. Параграфы должны быть разделены тэгами <Р>. Браузер игнорирует пустые строки и форматирование с помощью пробелов. Таким образом, документ. не содержащий тэгов <Р>, будет отображаться как один параграф. Исключение составляет текст, помеченный как ''преформатированный", о чем говорится ниже.
Отметим, что большинство браузеров помещает пустую строку после окончания параграфа для ясного указания на то, что параграф завершен.
Совместно с тэгом <Р> можно указать атрибуты параграфа. Атрибуты указываются с помощью директи вы ALIGN, которая может принимать, одно из следующих значений: center, left, right, и justify. Для того чтобы указать, что параграф не должен разбиваться на слова, можно использовать директиву NOWRAP. Вот так, например, можно задать параграф, выровненный слева и справа без разбиения на слова:
<Р ALIGN=Justify NOWRAP>.
Метка <P> может употребляться без конечной метки </P> потому что конец одного абзаца автоматически подразумевает начало следующего, и метка </P> становится ненужной.
Для принудительного разбиения строк используется тэг <BR>. Строки, разделенные этим тэгом, следуют одна под другой. В случае же применения тэга <Р> между строками выводится пустая строка.
В HTML-файл можно включать комментарии. Они подобны комментариям в компьютерной программе - вводимый текст не используется броузером при форматировании и читатель не может увидеть его напрямую. Комментарии, как и в компьютерной программе, не используются при компиляции и не поддаются просмотру, однако они станут видны если пользователь будет просматривать исходный файл.
В качестве комментария используются: имя сотрудника обновлявшего файл, название и версия продукта, использовавшегося для создания файла, дата вносимой правки. Чтобы поместить комментарий используется следующий тэг:
<!- *** ->
Сам текст комментария располагается вместо символов "***". Например:
<!-
/////////////////////////////////////////////////////////////////////////////////////////////////
Это - комментарий. Данный текст не отображается в окне браузера
////////////////////////////////////////////////////////////////////////////////////////////////
->
Для отображения горизонтальных разделителей используется тэг <HR>.
В языке HTML поддерживается создание простых, нумерованных и списков с определениями (definition list).
Простые списки, которые также называются маркированными, создаются с помощью тэгов <UL> и <LI>. Порядок создания списка следующий:
1) поместите в текст документа тэг <UL>;
2) пометьте каждый элемент списка тэгом <LI>;
3) завершите формирование списка тэгом </UL>.
Создание простого списка происходит следующим образом:
<UL>
<LI> Элемент 1
<LI> Элемент 2
<LI> Элемент 3
</UL>
Элементы списка, помечаемые тэгом <LI>, могут состоять из нескольких параграфов. В этом случае для разделения параграфов используется стандартный тэг <P>.
Нумерованные списки создаются с помощью тэгов <OL> и <LI>. Порядок создания списка следующий:
1) поместите в текст документа тэг <OL>;
2) пометьте каждый элемент списка тэгом <LI>;
3) завершите формирование списка тэгом </OL>,
B приведенном примере показано создание нумерованного списка:
<OL>
<LI> Элемент1
<LI> Элемент2
<LI> Элемент3
</OL>
Элементы списка, помечаемые тэгом <LI>, могут со стоять из нескольких параграфов. В этом случае для разделения параграфов используется стандартный тэг <P>.
Списки с определениями обычно содержат элемент, задаваемый тэгом <DT>, и определение, задаваемое тэгом <DD>. Большинство Web-браузеров отображает определения с новой строки. В приведенном примере показано создание списка с определением:
<DL>
<DT> FTP
<DD> Функция протокола TCP/IP, позволяющая пользователям получать бинарные и ASCII-файлы с FTP-cepeepoв.
<DT> Gopher
<DD> Система на базе меню для поиска текстовых и бинарных 'файлов на Internet-компьютepax.
</DL>
А так выглядит текст списка в браузере:
FTP
Функция протокола TCP/IP, позволяющая пользователям получать бинарные и ASCII-файлы с FTP-cepeepoв.
Gopher
Система на базе меню для поиска текстовых и бинарных 'файлов на Internet-компьютepax.
Отметим что элементы списка с определениями, помеченные тэгами <DT> и <DD>, могут состоять из нескольких параграфов, разделённых тэгом <P>.
Элементами списка могут быть и списки. Обычно ис пользуется не более трех уровней вложенности. При мер такого списка показан ниже.
<UL>
<LI>Города России
<UL>
<LI>Москва
<LI>Санкт-Петербург
</UL>
<LI>Балтийские страны:
<UL>
<LI>Таллин
</UL>
</UL>
Добавить бегущую строку можно при помощи следующего тэга:
<MARQUEE> Текст бегущей строки </MARQUEE>
Тэг <MARGUEE> может иметь следующие атрибуты:
BGCOLOR=#XXXXXX - цвет фона бегущей строки
DIRECTION="RIGHT" или DIRECTION="LEFT" - направление бегущей строки
BEHAVIOR=SCROLL - безостановочный скроллинг
BEHAVIOR=SLIDE - строка доходит до края и останавливается
BEHAVIOR=ALTERNATE - "маятник"
LOOP="число" ,где число - количество повторений
Также можно задать размер бегущей строки при помощи атрибутов:
WIDTH="320"
HEIGHT="30"
В данном случае браузер выведет бегущую строку шириной 320 и высотой 30 пикселей.
Основная мощь языка HTML заключается в возможности связи отдельных частей текста и иллюстраций с другими документами. Гипертекстовые ссылки выделяются в тексте документа специальным цветом, и активизировав их мышью, вы без труда сможете перемещаться по документам или частям одного документа. Для указания на ссылку в языке HTML используется тэг <А>. Чтобы включить ссылку в ваш документ, необходимо:
1) поместить в текст тэг <А>. Заметим, что после сим вола "А" следует пробел;
2) указать имя файла, содержащего документ, на который происходит ссылка в форме НREF=”имя_файла”. и закрывающую скобку >;
3) ввести текст, который будет содержать смысловую часть ссылки;
4) указать на завершение тэга <А>: </А>.
Пример простой ссылки:
<А HREF=”CHAPTER2.НТН">Глава 2</А>
В данном примере фраза "Глава 2" является ссылкой на HTML-документ, находящийся в файле CHAPTER2.HTM в том же каталоге, что и текущий документ. Если же документ находится в другом катало ге, то необходимо указать имя этого каталога, например:
<А HREF="BOOK/CHAPTER2.HTH">Глава 2</A>
Такие ссылки называются относительными ссылками. При необходимости можно использовать и абсолютные ссылки. При этом используются полные имена файлов в стандарте UNIX. Удобнее использовать относительные ссылки, так как они короче и сохраня ются при перемещении группы документов. Можно пользоваться следующими простыми правилами:
- для ссылок на не связанные между собой документы используются абсолютные ссылки;
-для ссылок на части документа, например на главы из книги, используются относительные ссылки.
Для указания местоположения файлов (HTML-доку ментов) в World Wide Web используются унифицированные адреса ресурсов — Uniform Resource Locator URI.). Такие адреса необходимы для ссылок на доку менты, которые находятся на других серверах. Уни фицированный адрес ресурса состоит из названия типа ресурса (FTP, HTTP), которое используется для задания протокола доступа к ресурсу, адреса серве ра и имени файла. Синтаксис URL выглядит следующим образом:
Scheme://host.domain[ : port ]/path/filename
где scheme может иметь одно из значений, приведенных в таблице 2.
Таблица 2 – Значения параметра scheme
|
Значение |
Описание |
|
File |
Ресурс располагается на локальном сервере или FTP-сервере с анонимным доступом |
|
Http |
Ресурс располагается на WWW-сервере |
|
Gopher |
Ресурс располагается на Gopher-сервере |
|
WAIS |
Ресурс располагается нa WAIS-сервере |
|
News |
Ресурс является группой новостей Usenet |
|
Telnet |
Ресурс представляет собой связь с Telnet |
Номер порта обычно пропускается, но при необхо димости может быть указан. В случае FTP-сервера номер порта равен 21. в случае Gopher-сервера — 70, а в случае HTTP-сервера — 80.
В качестве примера приведем ссылку на первую главу некой книги, которая располагается на HTTP-сервере www.cpress.ru:
<A HREF = "http://www.cpress.ru/BOOK/CHAPTERI.НТИ">Глава 1 </А>
В данном примере фраза "Глава 1" является ссылкой на файл /BOOK/CHAPTERl.HTM, расположенный на сервере www. cpress. ru.
Ссылки могут использоваться и для перемещения по частям документа. Предположим, что вы хотите создать ссылку из документа CHAPTER1 в один из разде лов документа CHAPTER2, который находится в файле СН2.НТМ. Сначала вы создаете именованную ссылку, в документе CHAPTER2:
<A NAME=”#CH2001”>,
а затем — ссылку на нее из документа CHAPTER1, указывая не только имя файла, но и имя ссылки, разделив их символом "*'':
<A HREF ="СН2.HTM#CH2001"> Более подробно см. главу 2</А>.
В данном случае фраза "Более подробно см. главу 2" является ссылкой на раздел в документе CHAPTER2.
Для организации ссылок внутри одного и того же документа используется точно такой же подход, но в адресе ссылки не указывается имя файла. Например, чтобы перейти в созданный выше раздел в документе CHAPTER2, необходимо создать следующую ссылку:
<А HREF="#СН2001">См. раздел 1 в этой главе </А>
Среди унифицированных адресов ресурсов есть один специальный, который используется для отправки электронной почты. Параметр sheme в этом случае имеет значение mailto, а пример использования такого адреса может выглядеть так: <А HREF = "mailto: editors@cpress.msk.su">Присылайте ваши комментарии</А>
В данном примере фраза "Присылайте ваши комментарии" является ссылкой для отправки электрон ной почты. При активизации такой ссылки браузер открывает специальное окно, куда можно ввести текст электронного послания по адресу, указанному после mailto.
Текст, заключенный между тэгамн <РRE> и </PRE> отображается так, как он выглядит к тексте документа, то есть с пробелами, новыми строками, табуляциями и т.п. Тэги <PRE> и </PRE> удобно использовать, например для публикации листингов. Отметим, что в преформатированном тексте можно использовать гиперссылки. Использование остальных тэгов нежелательно. Так как символы "<", ">" и " &" имеют специальное назначение в языке HTML, их следует заменить на специальные последовательности: <, > и & соответственно.
Примечание. Текст заключенный между тэгами <РRЕ> и </РRЕ>, отображается моноширинным текстом.
В языке HTML существуют специальные тэги для форматирования отдельных символов или групп символов. Эти тэги можно подразделить на два типа: логические и физические. Логические тэги; задают отличия символа или набора символов от других символов, а физические — точно указывают, какой должен быть формат (см. таблицы 3-5).
Браузер Netscape Navigator также поддерживает ряд нестандартных тэгов форматирования (таблица 5).
Таблица 3 - Логические тэги форматирования
|
Тэг |
Описание |
|
<DFN> |
Используется для выделения слова. Помеченное таким тэгом слово отображается наклонным шрифтом (italic) |
|
<ЕМ> |
Выделение. Помеченный этим тэгом текст отображается наклонным шрифтом (italic) |
|
<СIТЕ> |
Используется для ссылок на названия книг, фильмов и т.п. Помеченный этим тэгом текст отображается наклонным шрифтом (italic) |
|
<CODE> |
Используется для выделения исходного текста. Помеченный этим тэгом текст отображается фиксированным шрифтом (fixed-width) |
|
<STRONG> |
Используется для выделения символа или группы символов. Помеченный этим тэгом текст отображается полужирным шрифтом (bold) |
Таблица 4 - Физические тэги форматирования
|
Тэг |
Описание |
|
<В> |
Помеченный этим тэгом символ отображается полужирным шрифтом (bold) |
|
<I> |
Помеченный этим тэгом символ отображается наклонным шрифтом (italic) |
|
<TT> |
Помеченный этим тэгом символ отображается фиксированным шрифтом (ftxed-widtn) |
|
<U> |
Помеченный этим тэгом символ отображается с подчеркиванием |
|
<S> |
Помеченный этим тэгом символ отображается перечеркнутым |
|
<SUB> |
Помеченный этим тэгом символ отображается подстрочно |
|
<SUP> |
Помеченный этим тэгом символ отображается надстрочно |
Таблица 5 – Тэги работы со шрифтами
|
Тэг |
Описание |
|
<CENTER> |
Используется для центрирования текста по горизонтали |
|
<BLINK> |
Выделенный текст отображается с миганием |
|
<FONT SIZE=x> |
Задает размер шрифта. Х может принимать значения от 1 до 7 |
|
<FONT SIZE=+/-x> |
Увеличивает (+) или уменьшает (-)размер шрифта |
|
<BASE FONT SIZE=x> |
Задает размер основного шрифта. Х может принимать значения от 1 до 7. По умолчанию используется значение 3 |
|
<FONT СOLOR=#rrggbb"> |
Задает цвет шрифта в формате R-G-B |
Для использования тэгов форматирования следует применять следующие простые правила:
1) укажите необходимый тэг в виде <TAG>;
2) введите текст, который должен быть отформатирован особым образом:
3) завершите фрагмент тэгом </TAG>.
Четыре символа — "знак меньше" (<), "знак больше" (>), "амперсанд" (&) и "двойные кавычки" (") — имеют специальное назначение и поэтому не могут использоваться как обычные символы, можно применить тэги, заменяющие их (таблица 5).
Например, чтобы тэг <Р> отображался на экране, необходимо использовать следующую последовательность:
<P>
Существует еще несколько тэгов для вывода специальных символов (см.табл. 6).
Заметим, что с помощью тэга &*?; можно ввести любой символ из набора символов для данного шрифта. Например, символ может быть введен как:
©
Примечание. В отличие от всех остальных тэгов языка HTML тэги для вывода специальных символов должны вводиться только строчными (маленькими) буквами.
Таблица 6 - Тэги для вывода специальных символов
|
Тэг |
Символ |
Тэг |
Символ |
|
< |
< |
ö |
ö |
|
> |
> |
ñ |
ň |
|
& |
& |
È |
È |
|
" |
" |
® |
™ |
|
© |
© |
Большинство Web-браузеров позволяет отображать графические изображения, встроенные в документы. В версиях для Microsoft Windows поддерживаются изо бражения в форматах GIF и JPEG. Для включения в со став документа графического изображения используется тэг
<IMG SRC=image_URL>
где image_URL — унифицированный адрес ресурса для графического изображения. Синтаксис, используемый в адресах IMG SRC, точно такой же, что и синтаксис для ссылок (HREF). Если изображение имеет формат GIF, имя файла должно иметь расширение .gif, в случае же формата JPEG расширение имени файла должно быть .JPG. По умолчанию изобра жение выравнивается по нижней границе текста параграфа. Чтобы изменить тип выравнивания, можно использовать атрибут ALIGN. Его значения могут быть TOP, MIDDLE и BOTTOM (значение по умолчанию). Например, чтобы выровнять графическое изображение по верхней границе текста, используется следующий тэг:
<IMG ALIGN=TOP SRC=image_URL>
Если Web-браузеры не могут отображать графиче ские изображения, можно предусмотреть альтерна тивный текст, который будет отображаться вместо графического изображения. Для этого используется атрибут ALT:
<IMG SRC = "CPLOGO.GIF" ALT = "Наш логотип">
Для того чтобы пользователь мог просматривать включенные в документ графические изображения в отдельном окне, следует включить ссылки на них с помощью тэга <А>:
<A HREF =image_URL>link anchor</A>
Тот же синтаксис может использоваться для ссылок на встроенные звуки и анимацию — отличие только в расширении имени файла.
В таблице 8 перечислены наиболее распространенные типы файлов и их расширения.
Таблица 8 - Наиболее распространенные типы файлов и их расширения
|
Тип файла |
Расширение |
|
Обычный текст |
.txt |
|
НТМ L-документ |
.html или .htm |
|
Изображение в формате GIF |
.gif |
|
Изображение в формате TIFF |
.tiff |
|
Изображение в формате JPEG |
.jpg или .jpeg |
|
PostScript-файл |
.ps |
|
Звук в формате MP3 |
.mp3 |
|
Видео в формате QuickTime |
.mov |
|
Видео в формате MPEG |
.mpeg или .mpg |
Таблица в HTML, представляет собой находящуюся на экране прямоугольную сетку строк и столбцов.
Приведем смысл употребляемых терминов:
Все таблицы всегда начинаются с обрамления:
<TABLE>
</TABLE>
Остальные метки таблицы находятся между этими метками. О метке <TABLE> необходимо знать следующее:
Чтобы показать в таблице рамку, вместо метки <TABLE> применяется метка <TABLE BORDER> (однако при этом необходимо закрыть таблицу меткой </ТАВЕL>). Чтобы рамка отсутствовала, пользуйтесь меткой <TABLE>. Остальные действия по созданию таблицы реализуются четырехэтапным процессом:
Для добавления строки между метками <TABLE> и </TABLE> вставляются метка </TR> (Table Row - строка таблицы) и соответствующая конечная метка <./TR>: <TABLE BORDER>
<TR>
</TR>
</TABLE>
После этого строка разделяется на столбцы, для чего между метками <TR> и </TR> вставляются метки <TD> (Table Data - данные таблицы) и </TD>. Каждая комбинация <TD> </TD> представляет собой один столбец (ячейку в строке).
Для трехстолбцовой таблицы выполняется следующее:
<TABLE BORDER>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR> </TABLE>
Данные в клетку, вводят помещая текст между меткой <TD> и конечной меткой </TD>.
Когда создание первой строки закончено, нужно просто повторить процедуру для следующих строк таблицы.
Внутри меток <TD> и </TD> можно помещать текст, метки для форматирования текста. например <В> и <I>, списки и изображения.
В таблицах допускается смешивать текст и графику.
Так как одна строка кончается там, где начинается другая строка (или где кончается сама таблица), многие не указывают метку </TR>. Кроме того, так как один столбец кончается там, где начинается другой, можно обойтись без меток </TD>. Также метки <TD> часто помещаются на одной строке документа, чтобы подчеркнуть, что данные клетки находятся в одной строке таблицы.
Если ваша таблица содержит статистические сведения, данные или другую информацию желательно облегчить ее восприятие читателями, указав вверху каждого столбца метки описывающие содержимое столбца. Для этого достаточно одного - двух слов. Для определения надписи внутри строки применяются метки <ТН> и </ТН> с таким общим форматом:
<TR>
<ТН>Надпись первого столбца</ТН>
<ТН>Надпись второго столбца</ТН>
<ТН>и т.д. до бесконечности</ТН>
</TR>
Метка <ТН> очень похожа на метку <TD>. Отличие заключается в том. что браузер выводит текст, находящийся между метками <ТН> и </ТН>, жирным шрифтом и центрированным внутри клетки. Это помогает читателям отличить надпись от остальных данных таблицы. Надписи необязательны, их можно опустить, если для таблицы они не нужны.
Последним базовым элементом таблицы является название. Это короткое описание, показывающее читателю назначение таблицы. Для определения названия применяемся метка <CAPTION>:
<CAPTION ALIGN=где> Здесь находится название.</CAPTION>
Здесь где может быть ТОР (название вверху таблицы) или BOTTOM (название внизу таблицы).
Стандартным выравниванием для клеток таблицы является выравнивание влево для клеток данными (<TD>) и центрирование для клеток надписей (<ТН>). С помощью атрибута \LIGN внутри метки <TD> или <ТН> можно определить выравнивание текста влево, вправо или центрирование. Вот общий формат этих меток:
<TD ALIGN = выравнивание>
<TH ALIGN = выравнивание>
Здесь выравнивание может быть LEFT (влево), CENTER (по центру) или RIGHT право). Также можно выровнять текст в клетке по вертикали. Такой способ удобен, когда одна клетка большая (например, содержит много текста или относительно большое изображение) и желательно выровнять вертикальную позицию других клеток в той же строке таблицы. В этом случае в метках <TD> или <ТН> применяется атрибуты VALIGN вертикальное выравнивание):
<TD VALIGN = вертикальное>:
<TH VALIGN = вертикальное>
Здесь вертикальное может быть TOP, MIDDLE (принимается по умолчанию) или BOTTOM.
Если тэги <TD> и </TD> находятся рядом и между ними ничего нет. в браузере выглядит заполненной. Для получения на самом деле пустой клетки применяется такая комбинация меток: <TD><BR></TD>.
До сих пор каждый блок данных при вводе в таблицу занимал только одну клетку. Однако вполне возможны и допустимы блоки данных, занимающие две, три и более клеток. Говорят, такие клетки перекрывают несколько строк или столбцов, что удобно для надписей и графики.
Начнем с перекрытия нескольких столбцов. Для его реализации необходимо указать в метке <TD> или <ТН> атрибут COLSPAN (column span - перекрытие столбцов):
<TD COLSPAN=столбцы>
<TH COLSPAN=столбцы>
Здесь столбцы показывает, сколько столбцов перекрывает клетка
Перекрытие на несколько строк аналогично, но вместо атрибута COLSPAN в метках <TD> или <ТН> указывается атрибут ROWSPAN:
<TD ROWSPAN=Строки> .
<TH ROWSPAN=Строки>
Здесь значение строки представляет собой число строк, которые перекрывает клетка.
Размер рамки. Для изменения толщины рамки таблицы можно присвоить значение BORDER метки <TABLE>. Отметим, что толщина относится только к той части рамки. которая окружает внешнюю часть таблицы; внутренние рамки не изменяются. например. для вывода таблицы с рамкой в пять единиц толщины применяется такая метка:
<TABLE BORDER=5>
Ширина таблицы. Обычно браузер корректирует ширину таблицы в соответствии с текущимим размером окна. Но если необходимо определить для таблицы конкретную ширину в можно использовать атрибут WIDTH в метке <TABLE>. Можно определить значение в пикселях или. что более удобно, в процентах доступной ширимы окна. Например, чтобы таблица всегда занимала 75% ширины окна, применяется метка <ТАВLE>:
<TABLE WIDTH = 75%>
Ширина клетки. Допускается определять ширину отдельной клетки, добавляя атрибут WIDTH в метку <TD> или <ТН>. Значение определяется в пикселях или процентах таблицы. Отметим, что все клетки в столбце будут иметь одну и ту же ширину. В следующем примере клетка занимает 50% ширины таблицы:
<TD WIDTH=50%>
Интервал между клетками. По умолчанию браузеры допускают интервал только в единицы между каждой клеткой. Для изменения его применяется атрибут LSPACING для метки <TABLE>. Следующая метка увеличивает интервал до 10 единиц:
<TABLE CELLSPACINGS =10>
Промежуток между содержимым клетки и рамкой. Браузеры втискивают данные в метки максимально плотно. При этом они оставляют промежуток только в одну единицу содержимым клетки и ее рамкой. (Этот промежуток называется отбивкой клетки - padding.) Чтобы оставить данным больше места, применяется атрибут CELLPADDING и <TABLE>. Например, следующая метка указывает браузеру зарезервировать десять отбивки сверху, снизу, справа и слева от содержимого клетки: <TABLE CELLPADDING=10>.
http://books.net-soft.ru/html.htm - учебник HTML.
Основные тэги языка HTML
Структурные Тэги
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Весь документ |
<html> |
нет |
</html> |
|
Заголовок документа |
<head> |
нет |
</head> |
|
Название документа |
<title> |
нет |
</title> |
|
Комментарии |
<!-- |
нет |
--> |
|
Тело документа |
<body> |
background=«filename» bgcolor-«XXXXXX» text=«XXXXXX» Iink=«XXXXXX» vlink-«XXXXXX» |
</body> |
Базовые тэги для текста
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Разрыв строки |
<br> |
clear=left rightjnone |
нет |
|
Параграф |
<р> |
aligiv=left center right |
</р> |
|
Выделенный шрифт |
<b> |
нет |
</b> |
|
Наклонный шрифт |
<i> |
нет |
</i> |
|
Подчеркнутый шрифт |
<u> |
нет |
</u> |
|
Шрифт «пишущей машинки» |
<tt> |
нет |
</tt> |
|
Заголовок |
<h1-6> |
align=left|center|right |
</h1-6> |
|
++Х |
Увеличивает значение на 1 |
++ somevar увеличивает значение somevar на 1 |
|
Х++ |
Возвращает значение, затем увеличивает его на 1 |
somevar++ Возвращает значение somevar, затем увеличивает его на 1 |
|
--Х |
Уменьшает значение на 1 |
--somevar Уменьшает значение somevar на 1 |
|
X-- |
Возвращает значение, затем уменьшает его на 1 |
somevar— Возвращает значение somevar, затем уменьшает его на 1 |
Списки
|
Функция |
Тэг |
Атрибуты |
|
|
Неупорядоченный список |
<ul> |
type=disc|circle|square |
</ul> |
|
Упорядоченный список |
<ol> |
type=I|A|l|a|I|start=XX |
</ol> |
|
Элемент списка |
<li> |
type=disc|circle|square I|A|la||I|start=XX |
нет |
|
Список определений |
<dl> |
нет |
</dI> |
|
Элемент списка определений |
<dt> |
нет |
нет |
|
Определение |
<dd> |
нет |
нет |
Ссылки
|
Функция |
Тэг |
Атрибуты |
Парный Тэг- |
|
Ссылка |
<а> |
href=«filename» target=«windowname» |
</а> |
|
Закладка |
<а> |
Name=«markname» |
нет |
Графические изображения
|
Функция |
Тэг |
Атрибуты |
Парный Тэг- |
|
Графическое изображение |
<img> |
src=«filename» align=left right width-XXX height=XXX alt=«text» ISMAP USEMAP=«#mapname» |
нет |
Изображения-карты (imagemap)
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Определение карты |
<тар> |
nате=«mapnsme» |
</тар> |
|
Определение области |
<аrеа> |
shape=«rect|сirc1e |роly | point» |
нет |
Метатэги
|
Функция |
Тэг |
Атрибуты |
|
<META> для сервера |
http-equiv=«refresh» content= «seconds, filename» |
нет |
|
<META> для содержания |
name=«keywords/description/author/ generator/abstract/expiration» content=«your information» |
нет |
Таблицы
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Таблица |
border=X width=X cellspacing=X ceIlpadding=X bgcolor=«XXXXXX» |
||
|
Ряд таблицы |
<tr> |
align=Ieft|center|right valign=top|middle|bottom bgcoIor=«XXXXX» |
</tr> |
|
Ячейка |
<td> |
align=left|center|right valign=top|middle|bottom width=X nowrap colspan=X rowspan=X bgcolor=«XXXXXX» |
</td> |
|
Заголовок таблицы |
<th> |
align-left|center|right valign=top|middle| bottom width=X nowrap colspan=X rowspan=X bgcolor=«XXXXXX» |
</th> |
|
Заголовок |
<caption> |
align=left|center|right valign=top|middle|bottom |
</caption> |
Фреймы
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Набор фреймов |
<frameset> |
cols=«XX|XX%|*» rows=«XX]XX% *» |
</frameset> |
|
Определение фрейма |
<frame> |
src=«filename» name=«framename» noresize scroll=auto|yes|no marginwidth=«XX» marginheight=«XX» |
нет |
|
База фрейма |
<base> |
target=«framename»| «_self»| «_top»| «_parent» |
нет .'-' |
|
Нет поддержки фреймов |
<noframes> |
нет |
</nofrarnes> |
Формы
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Форма |
<form> |
method=get|put action=«programname» |
</form> |
|
Поле ввода |
<input> |
name=«variablename» type=text|password| checkbox|radio|submit|reset| image |
нет |
|
Список выбора |
<select> |
name=«variablename» size=XX multiple |
</select> |
|
Опция выбора |
<option> |
none |
нет |
|
Много строчный текст |
<textarea> |
name=«variablename» rows=XX cols=XX |
</textarea> |
Таблицы стилей
|
Функция |
Тэг |
Атрибуты |
Парный тэг |
|
Определение стиля |
<style> |
type=«texiycss» |
</style> |
|
Связь с CSS-файлом |
<link> |
rel=stylesheet type=«text/css» href=«URL» |
нет |
|
Элемент <SPAN> |
<span> |
style=«property:value;» |
</span> |
Часто используемые символы
|
Название |
Символ |
НТМL-эквивалент |
|
Амперсанд |
& |
&аmр; |
|
Знак «цент» |
С |
Scent; |
|
Знак «копирайт» |
© |
&сору; |
|
Знак «градус» |
0 |
° |
|
Больше чем |
> |
> |
|
Меньше чем |
< |
< |
|
Неразбивающий пробел |
|
|
Константы для представления цветов
|
Цвет |
Значение |
Цвет |
Значение |
|
aliceblue |
f0f8ff |
light salmon |
ffa07a |
|
antiquewhite |
faebd7 |
light sea green |
20b2aa |
|
aqua |
00ffff |
light sky blue |
87cefa |
|
aquamarine |
7fffd4 |
light slate gray |
778899 |
|
azure |
f0ffff |
light steel blue |
b0c4de |
|
beige |
f5f5dc |
light yellow |
Ffffe0 |
|
bisque |
ffe4c4 |
lime |
00ff00 |
|
black |
000000 |
lime green |
32cd32 |
|
blanchedalmond |
ffebcd |
linen |
faf0e6 |
|
blue |
0000ff |
magenta |
Ff00ff |
|
blue violet |
8a2be2 |
maroon |
800000 |
|
brown |
a52a2a |
mediumaquamarine |
66cdaa |
|
burlywood |
deb887 |
mediumblue |
0000cd |
|
cadetblue |
5f9ea0 |
medium orchid |
ba55d3 |
|
chartreuse |
7fff00 |
medium purple |
9370db |
|
chocolate |
d2691e |
medium sea green |
3cb371 |
|
coral |
ff7f50 |
medium slate blue |
7b68ee |
|
cornflowerblue |
6495ed |
medium spring green |
00fa9a |
|
cornsilk |
fff8dc |
medium turquoise |
48d1cc |
|
crimson |
dc143c |
medium violet red |
C71585 |
|
cyan |
00ffff |
midnight blue |
191970 |
|
dark blue |
00008b |
mint cream |
f5fffa |
|
dark cyan |
008b8b |
misty rose |
ffe4e1 |
|
dark goldenrod |
b8b60b |
moccasin |
ffe4b5 |
|
dark gray |
a9a9a9 |
navajowhite |
ffdead |
|
dark green |
006400 |
navy |
000080 |
|
dark khaki |
bdb76b |
oldlace |
fdf5e6 |
|
dark magenta |
8b008b |
olive |
808000 |
|
dark olive green |
556b2f |
olivedrab |
6b8e23 |
|
dark orange |
ff8c00 |
orange |
ffa500 |
|
dark orchid |
9932cc |
orangered |
ff4500 |
|
dark red |
8b0000 |
orchid |
da70d6 |
|
dark salmon |
e9967a |
palegoldenrod |
eee8aa |
|
dark sea green |
8fbc8f |
palegreen |
98fb98 |
|
dark slate blue |
483d8b |
paleturquoise |
afeeee |
|
dark slate gray |
2f4f4f |
palevioletred |
db7093 |
|
dark turquoise |
00cedi |
papayawhip |
ffefd5 |
|
dark violet |
9400d3 |
peachpuff |
ffdab9 |
ПРОДОЛЖЕНИЕ ПРИЛОЖЕНИЯ Б
|
deep pink |
ff1493 |
peru |
cd853f |
|
deep sky blue |
00bfff |
pink |
ffc0cd |
|
dim gray |
696969 |
plum |
dda0dd |
|
dodger blue |
1e90ff |
powder blue |
b0е0е6 |
|
firebrick |
b22222 |
purple |
800080 |
|
floralwhite |
fffaf0 |
red |
ff0000 |
|
forest green |
228b22 |
rosy brown |
bc8f8f |
|
fuchsia |
ff00ff |
royal blue |
4169e1 |
|
gainsboro |
dcdcdc |
saddle brown |
8b4513 |
|
ghost white |
f8f8ff |
salmon |
fa8072 |
|
gold |
ffd700 |
sandybrown |
f4a460 |
|
goldenrod |
daa520 |
seagreen |
2e8b57 |
|
gray |
808080 |
seashell |
fff5ee |
|
green |
008000 |
sienna |
a0522d |
|
greenyellow |
adff2f |
silver |
c0c0c0 |
|
honeydew |
f0fff0 |
sky blue |
87ceed |
|
hot pink |
ff69b4 |
slate blue |
6a5acd |
|
indian red |
cd5c5c |
slate gray |
708090 |
|
indigo |
4b0082 |
snow |
fffafa |
|
ivory |
fffff0 |
springgreen |
00ff7f |
|
khaki |
f0e68c |
steel blue |
4682b4 |
|
lavender |
e6e6fa |
tan |
d2b48c |
|
lavenderblush |
fff0f5 |
teal |
008080 |
|
lawngreen |
7cfc00 |
thistle |
d8bfd8 |
|
lemon chiffon |
fffacd |
tomato |
ff6347 |
|
light blue |
add8e6 |
turquoise |
40e0d0 |
|
light coral |
f08080 |
violet |
ee82ee |
|
light cyan |
e0ffff |
wheat |
f5deb3 |
|
Light goldenrod yellow |
fafad2 |
white |
ffffff |
|
light green |
90ee90 |
whitesmoke |
f5f5f5 |
|
light grey |
d3d3d3 |
yellow |
Ffff00 |
|
light pink |
ffb6d |
yellowgreen |
a9cd32 |