Основы языка html
Синтаксис HTML-тегов
HTML-документ представляет собой текстовый файл, содержащий собственно текст, который должен быть отображен в окне браузера, и команды разметки – HTML-теги, определяющие внешний вид документа при их интерпретации браузером.
HTML-тег записывается в угловых скобках <…> и состоит из имени, за которым может следовать список атрибутов (для большинства тегов необязательный).
<Имя_тега название_атрибута=значение_атрибута >.
Например,
<B>
<IMG SRC="pict.gif">
<FONT SIZE=+2 COLOR=RED>
Имена и атрибуты представляют собой английские слова и аббревиатуры и почти всегда их смысл прозрачен.
Атрибуты в списке отделяются друг от друга одним или несколькими пробелами, либо символами табуляции, либо символами перевода строки; последовательность записи атрибутов несущественна.
В случае, когда значение атрибута представляет собой более чем одно слово либо одно число, его следует заключить в одинарные или двойные кавычки.
Регистр символов в записи тегов и атрибутов значения не имеет.
Теги условно можно разделить на две группы:
1. Теги-контейнеры имеют два компонента: открывающий <Имя_тега>, и закрывающий < / Имя_тега>.
Фрагмент документа, расположенный между открывающим и закрывающим элементом тега-контейнера форматируется браузером согласно смыслу тега. Например, текст, расположенный между тегами <B> и </B>, будет выведен полужирным начертанием.
Теги могут быть вложены друг в друга, для придания тексту сразу нескольких свойств. В этом случае, порядок закрытия тегов должен быть строго противоположен порядку их открывания. Например, <B><I> полужирный курсивный текст </I></B>
В закрывающих компонентах тегов атрибуты не указываются.
2. Автономные теги не имеют конечного компонента. При их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тег <IMG SRC="pict.gif">, встречающийся в тексте HTML-документа, вызывает вставку графического изображения из файла pict.gif.
Вот пример тега с атрибутами: <FONT SIZE=+2 COLOR=RED>
Встретив такой тег в HTML-документе, браузер интерпретирует его, выводя следующий за тегом текст символами, увеличенными относительно базового размера (SIZE=+2) и красного цвета (COLOR=RED); это форматирование текста применяется до тех пор, пока не встретится закрывающий тег </FONT> .
Структура HTML-документа
Здесь приводится структура HTML-документа, не содержащего кадров.
HTML-документ заключается в теги <HTML> и </HTML>. Между этими тегами располагаются две секции: секция заголовка (между тегами <HEAD> и </HEAD>) и секция тела документа (между тегами <BODY> и </BODY>). Секция заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера. Секция тела документа содержит текст, предназначенный для отображения браузером и теги, указывающие на способ форматирования текста, определяющие графическое оформление документа, задающие параметры гиперссылок и так далее. Вот самый простой HTML-документ:
<HTML>
<HEAD>
</HEAD>
<BODY>
Моя первая HTML-страница
</BODY>
</HTML>
Задание 2.
Что отобразит браузер в указанном примере? Проверьте, изменив содержимое файла first.htm согласно данному примеру.
Информация о документе в секции заголовка
В секции заголовка <HEAD> указывается информация о документе, которая используется при его отображении. Синтаксически не является необходимым, но на практике обязательно должен быть задан заголовок документа.
Текст, заключенный между тегами <TITLE> и </TITLE>, отображается в заголовке окна браузера. Фактически, это первая информация о содержании документа, которую видит пользователь еще до загрузки документа. Заголовок должен быть достаточно кратким и в то же время емким, отражать суть документа и заинтересовывать потенциальную аудиторию.
Задание 3.
Добавьте заголовок окна HTML-документа.
В секции заголовка обычно помещается и ряд тегов <META> с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о документе.
Атрибуты тега <META>:
1. Обязательным является атрибут CONTENT, в котором указывается значение метаинформации.
2. В качестве второго атрибута может использоваться атрибут HTTP-EQUIV (эквивалентное http-имя метаинформации, которое будет включено в http-заголовок html-документа при передаче его клиенту) либо атрибут NAME, задающий имя метаинформации.
Вот примеры метаинформации, задаваемой в секции заголовка:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> |
указывается тип кодовой таблицы (windows-1251, Koi8-R и другие), использованной при подготовке текстовой части документа; включая подобные теги в документ, Вы избавляете свою аудиторию от необходимости настраивать браузер на конкретную кодировку кириллицы. |
<META NAME="Author" CONTENT="Valentina Zaharkina"> |
указывается автор WWW-страницы. |
<META NAME="GENERATOR" CONTENT="Mozilla/3.01Gold (Win95; I) [Netscape]"> |
указывается программа-редактор HTML-страницы. |
<META NAME="KEYWORDS" CONTENT="фракталы, множество Мандельброта, динамические системы, fractal, Mandelbrot set, dynamical systems"> |
указывается через запятую набор ключевых слов, которые могут быть использованы рядом поисковых систем |
<META NAME="DESCRIPTION" CONTENT="Представляем информацию о творчестве учеников средней школы №1 г. Великие Луки”> |
приводится краткое описание содержания сайта. |
Форматирование абзацев
Задание 4.
1) Добавьте к HTML-документу текст. Сначала название текста, затем два–три абзаца по 4–5 строк (можно скопировать из данного документа).
2) Просмотрите результат в браузере.
Текст выводится в окно браузера слово за словом; при достижении правой границы окна очередное слово переносится на новую строку. Если документ не умещается в видимой части окна, то появляется вертикальная полоса прокрутки.
Весь так называемый пробельный материал (последовательно идущие пробелы, символы табуляции, символы перевода строки) отображаются браузером как один пробел. Например, если содержимое секции <BODY> имеет вид
<BODY>
Попытаемся вывести лишние пробелы
и переводы
строки.
</BODY>
то в окне браузера будет выведен текст без лишних пробелов и перевода строки.
Для того чтобы вывести в тексте ряд последовательных пробелов или несколько пустых строк, приходится применять различные теги:
Каждый символьный примитив воспринимается как один пробел; например, текст HTML-документа
<BODY> шесть пробелов </BODY>
будет выглядеть как "шесть пробелов"
Тег <BR> (от англ. break) разрывает текстовый поток и вставляет новую строку. Несколько последовательных тегов <BR> интерпретируются как несколько пустых строк. Межстрочный интервал одинарный. Закрывающего компонента тег не имеет.
Текст, заключенный между тегами <PRE> и </PRE> (от англ. preformatted), отображается так, как он был отформатирован предварительно, со всеми пробелами и переносами строк.
Тег <P> (от англ. paragraph) начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом. Абзац пустым быть не может, то есть несколько последовательных тегов <P> интерпретируются как один (в отличие от тега <BR>).
Тег <P> имеет необязательный атрибут ALIGN, указывающий на вид выравнивания абзаца. Атрибут ALIGN может принимать значения LEFT, CENTER и RIGHT, задающие выравнивание по левому краю, центру и правому краю окна браузера.
По центру будет выровнен и текст, заключенный в теги <CENTER> ... </CENTER>.
Применение закрывающих компонентов </P> и </CENTER>, вообще говоря, не обязательно. Если закрывающего компонента нет, то заданный тип выравнивания сохраняется до следующего тега, задающего выравнивание, либо до конца документа.
Задание 5.
Расположите название текста по центру (см. синтаксис тегов).
Отформатируйте один абзац тегами <PRE> и </PRE>, остальные тегом <P> с различными выравниваниями.
Форматирование символов
Теги форматирования символов подразделяют на две группы: теги физического форматирования и логического форматирования. Все эти теги имеют как открывающий, так и закрывающий компонент. Вот наиболее употребительные из этих тегов:
Физическое форматирование:
<B>Полужирный
шрифт </B>
Полужирный шрифт (от англ. bold)
<I>Курсив
</I> Курсив
(от англ. italic)
<S>Зачеркнутый
шрифт </S>
Зачеркнутый шрифт (от англ.
strikethrough)
<U>Подчеркнутый
шрифт </U>
Подчеркнутый шрифт (от англ.
underline)
<Tt>Шрифт
фиксированной ширины</TT>
fixed
шрифт (от англ. TeleType)
<SUP>Верхний
индекс</SUP> Верхний
индекс (от англ. superscript)
<SUB>Нижний
индекс </SUB>
Нижний индекс (от англ. subscript)
Теги форматирования могут быть вложены друг в друга в любом количестве. Помните про их своевременное закрытие (см. Синтаксис тегов).
Задание 6.
Добавьте к HTML-документу следующий текст:
Пример полужирного шрифта.
Пример курсивного подчеркнутого текста.
Пример показывающий
свойства вложенных
тегов.
Текст вышеописанного примера.
Обратите внимание на то, что каждый пример начинается с новой строки, а межстрочный интервал одинарный.
Логическое форматирование:
Полужирным шрифтом отображается текст, заключенный между тегами:
<STRONG> ... </STRONG> (сильное выделение)
Курсивом (наклонным шрифтом) отображается текст, заключенный между тегами:
<DFN> ... </DFN> (определение)
<EM> ... </EM> (выделение)
<CITE> ... </CITE> (цитата)
<VAR> ... </VAR> (переменная)
Моноширинным щрифтом отображается текст, заключенный между тегами:
<CODE> ... </CODE> (программный код)
Параметры шрифта
Текст, заключенный между тегами <FONT ... > ... </FONT> имеет размер, цвет и гарнитуру, задаваемую следующими атрибутами:
SIZE = значение |
размер; задается либо в форме абсолютного значения (число от 1 до 7), либо относительно размера основного шрифта (в форме +n или –n) |
COLOR = цвет |
цвет (см. ниже – представление цветов в html-документах) |
FACE = список шрифтов |
предпочтительные гарнитуры для отображения текста; названия перечисляются через запятую, например, FACE="Verdana,Helvetica,Arial,Sans-Serif" |
Представление цветов в HTML-документах
В HTML-документе существует возможность указывать цвет фона документа, фона ячеек таблиц и цвета текстовых фрагментов, в частности, цвета гиперссылок (обычных, активных и посещенных). Значения цвета можно задавать в одной из двух форм.
Первая форма использует задание цветов в 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 – несколько сотен. Каждому названию цвета соответствует определенная RGB-триада, например, цвету "navy" соответствует "#000080".
Несмотря на принципиальную возможность задать миллионы цветов, надо учитывать, что браузеры отображают лишь 256 цветов, причем у каждого браузера своя цветовая палитра. В этой палитре браузер подберет цвет, наиболее близкий к заданному.
Задание 7.
Выделите части Вашего документа различными цветами и размером шрифта.
Цвета основного текста и фон документа
Цвет основного текста, цвета гипертекстовых ссылок и фон документа описываются в начальном теге тела документа <BODY> с помощью атрибутов:
TEXT=цвет |
цвет основного текста документа |
LINK= цвет |
цвет непосещенных гиперссылок |
VLINK= цвет |
цвет посещенных гиперссылок |
ALINK= цвет |
цвет активных гиперссылок (вспыхивает на мгновение при щелчку мыши по гиперссылке) |
BGCOLOR= цвет |
цвет фона документа |
BACKGROUND=url |
адрес графического файла, используемого при создании фонового изображения (см. ниже – адресация ресурсов) |
Все перечисленные атрибуты необязательны, однако их стоит указывать, чтобы цветовая гамма документа не зависела от умолчаний браузера.
Фоновое изображение обычно выбирают небольшим по размеру; браузер помещает его в левый верхний угол окна документа и копирует, распространяя мозаикой по горизонтали и вертикали, пока не будет заполнено все пространство окна. Это, например, дает возможность создания различных полосатых и клетчатых фонов с помощью элементарных графических изображений. Чуть сложнее создать текстурный фон: тут придется немного поэкспериментировать с маленькими образцами фона, чтобы не было заметно "стыков".
Если указан атрибут BACKGROUND, отменяется цвет фона, заданный в BGCOLOR.
Задание 8.
Задайте цвет основного текста документа, цвет фона (или фоновое изображение) и цвет гиперссылок.
Адресация ресурсов
Местоположение информационных ресурсов в WWW может быть определено в абсолютной и относительной форме.
Адресация в абсолютной форме используется при ссылках на ресурсы, находящиеся на других серверах. Универсальный адрес, определяющий местонахождение информационного ресурса, носит название URL (Uniform Resource Locator – унифицированный адрес ресурса). URL состоит из двух частей, разделенных двоеточием. Первая часть указывает на тип сетевого протокола, который зависит от типа ресурса. Например, если ресурс располагается на WWW-сервере, это протокол http. Вторая часть включает в себя имя компьютера (сервера) в доменной системе имен и (если требуется) путевое имя файла. При записи путевого имени названия каталогов разделяются прямой косой чертой (символ /); в именах файлов и каталогов различаются прописные и строчные буквы; пробелы не допускаются. Вот примеры URL:
http://195.21.123.13:81100
ftp://everything.com/soft/prog.zip
mailto:Ivanov@hotmail.com
Последний URL, указывающий на протокол mailto и адрес электронной почты, стоит особняком в ряду других, поскольку не ссылается ни на какой информационный ресурс; это единственный тип URL, при записи которого не ставятся после двоеточия две косые черты (//).
Адресация в относительной форме используется при ссылках на ресурсы, находящиеся на том же сервере. При записи пути к файлу названия каталогов разделяются прямой косой чертой (символ /); переход по каталогам файловой системы на один уровень вверх обозначается двумя точками (символы ..). Например,
Fauna/fox.htm
../Fauna/fox.htm
../../Town/ecology.htm
При адресации WWW-ресурсов (т.е. HTML-документов) есть возможность ссылаться и на фрагменты HTML-документов в виде http://www.ecosafe.nw.ru/tspm/win/Science.htm#new, где после символа # указывается заранее определенный идентификатор фрагмента (метка) документа.
Графические изображения
Тег <IMG> вставляет изображение в текстовый поток. Закрывающего компонента этот тег не имеет. Обязательный атрибут:
SRC = url адрес графического файла
Основные необязательные атрибуты:
ALT = текст |
альтернативный текст, выводимый в режиме браузера без загрузки изображений |
BORDER = значение |
толщина обрамляющей рамки в пикселах; 0 означает отсутствие рамки (по умолчанию) |
HEIGHT = значение |
высота изображения в пикселах (по умолчанию оригинальная) либо в процентах от высоты окна браузера |
WIDTH = значение |
ширина изображения в пикселах (по умолчанию оригинальная) либо в процентах от ширины окна браузера |
HSPACE = значение |
свободное пространство слева и справа от изображения в пикселах |
VSPACE = значение |
свободное пространство сверху и снизу от изображения в пикселах |
ALIGN = значение |
выравнивание изображения по горизонтали или вертикали. Значения TEXTTOP, ABSCENTER, CENTER, BOTTOM, ABSBOTTOM обеспечивают различные варианты вертикального выравнивания относительно текстовой строки; при применении этих значений вставленное изображение разрывает текстовый поток. Если заданы значения LEFT либо RIGHT, изображение соответствующим образом будет выровнено по горизонтали; задание этих значений обеспечивает обтекание изображения текстом |
USEMAP = #имя |
указывается имя, задаваемое в теге MAP, задающем в данном изображении области, чувствительные к щелчку мыши |
Несмотря на то, что формально обязательным является только атрибут SRC, на практике следует указывать и альтернативный текст (атрибут ALT). Ведь многие работают с браузером в режиме без загрузки изображений, особенно когда связь плохая, и документ загружается долго. К тому же, до сих пор существуют браузеры, не поддерживающие графики.
Значения атрибутов BORDER, HEIGHT и WIDTH тоже лучше указывать явным образом, не полагаясь на умолчания. Само наличие атрибутов HEIGHT и WIDTH говорит о возможности масштабирования исходного изображения. Увеличивать исходное изображение обычно бессмысленно, поскольку это ведет к потере качества.
А вот сильно уменьшенные варианты изображений используют довольно часто, например, для создания каталога миниатюр, каждая из которых имеет гиперссылку на полномасштабное изображение.
Задание 9.
Вставьте графическое изображение в свой HTML-документ
Графические форматы
Браузеры поддерживают три графических формата:
• GIF – Graphic Interchange Format. При сохранении изображения в этом формате количество используемых цветов не должно превышать 256. Обычно этот формат используют для небольших изображений, содержащих области однородной окраски с четкими границами.
Формат GIF позволяет создать прозрачные фрагменты изображения. Кроме того, этот формат поддерживает анимацию.
• JPEG (JPG) – Joint Photography Experts Group. Этот формат допускает сохранение изображений, содержащих миллионы цветов, с тонкими цветовыми переходами. Например, фотографии обычно сохраняются в формате JPEG.
Изображения в этом формате не могут иметь прозрачных областей.
• PNG – Portable Network Graphics. Этот формат является развитием формата GIF; обладая всеми его преимуществами, не имеет ограничений в количестве используемых цветов.
Часто выбрать оптимальный для конкретного изображения формат можно только экспериментальным путем. При этом преследуется основная цель: достичь хорошего качества изображения при минимальном размере файла.
Списки
HTML позволяет создавать нумерованные (упорядоченные) и маркированные (неупорядоченные) списки. Фрагмент текста, представляющий собой список, заключается в теги:
<OL> ... </OL> упорядоченный список (от англ. ordered list)
<UL> ... </UL> неупорядоченный список (от англ. unordered list)
Каждый элемент списка заключается в теги <LI> ... </LI> (от англ. list item). При выводе текста браузер располагает каждый элемент списка с новой строки, предваряя его номером либо маркером. Допустимы вложенные списки.
Тег <OL> имеет необязательные атрибуты:
TYPE = формат
|
формат нумерации; может иметь значения: 1 арабские цифры (по умолчанию) A прописные буквы a строчные буквы I большие римские цифры i маленькие римские цифры |
START = значение |
первый номер в списке (по умолчанию 1) |
Тег <UL> имеет необязательный атрибут
TYPE = формат |
формат маркера; может иметь значения: Disc диск (по умолчанию) Circle окружность Square квадрат |
Задание 10.
Создайте следующие списки:
Говоря о таких файлах, употребляют разные термины:
HTML-файл,
HTML-документ,
Web-страница.
Значения цвета можно задавать в одной из двух форм:
I. Задание цветов в RGB-палитре.
II. Задание цветов с помощью имен.
Таблицы
Таблицы в HTML-документах используются не столько для того, чтобы располагать данные в обрамленных ячейках, сколько с целью позиционирования фрагментов текста и изображений друг относительно друга. Действительно, помещая изображения и фрагменты текстов в ячейки таблицы с невидимой границей, можно добиться эффекта обтекания изображения текстом, расположить текст как многоколоночный и так далее.
Все табличные данные заключаются в теги <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-тегами; допустимы вложенные таблицы. Не следует оставлять ячейки таблицы незаполненными; если по замыслу web-мастера какая-то ячейка должна выглядеть пустой, поместите в нее хотя бы неразрывный пробел . Ячейки, не содержащие данных, могут некрасиво выглядеть в Netscape Navigator: не отображается заданный фон и рамки ячеек.
Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером (если не задан атрибут ячейки NOWRAP); текст выводится слово за словом; при достижении правой границы ячейки очередное слово переносится на новую строку.
Ячейки таблицы могут охватывать несколько строк или столбцов; при описании таких ячеек используется атрибуты ROWSPAN и COLSPAN.
Теги, описывающие таблицы, имеют много атрибутов; все они необязательны. Здесь упомянем те, которые одинаково поддерживаются браузерами Netscape Navigator и Microsoft Internet Explorer. Учтите, что даже при использовании лишь этих атрибутов таблицы могут по-разному выглядеть в разных браузерах. Следовательно, как и во многих других случаях, уверенность в качестве Вашего сайта даст только тестирование в разных браузерах.
Атрибуты тега <TABLE> задают параметры таблицы в целом:
ALIGN = значение |
Выравнивание относительно текстового потока; возможны значения left, right и center |
BACKGROUND = url |
Фоновое изображение для всей таблицы (Microsoft Internet Explorer 3.0 и выше и Netscape Navigator 4.0 и выше) |
BGCOLOR = цвет |
Фоновый цвет |
CELLPADDING = значение |
Расстояние от границ ячейки до ее содержимого в пикселах |
CELLSPACING = значение |
Расстояние между ячейками в пикселах |
HSPACE = значение |
Свободное пространство слева и справа от таблицы в пикселах |
VSPACE = значение |
Свободное пространство сверху и снизу от таблицы в пикселах |
WIDTH = значение |
Ширина таблицы; задается в пикселах или в процентах от текущей ширины окна браузера; примеры: WIDTH=256; WIDTH=100% |
Атрибуты тега <TR> задают параметры данного ряда (при возникновении противоречий атрибуты, заданные в теге <TABLE>, отменяются).
ALIGN = значение |
Выравнивание содержимого ячеек; возможны значения left, right и center |
BACKGROUND = url |
Фоновое изображение для ячеек данного ряда таблицы (Microsoft Internet Explorer 3.0 и выше и Netscape Navigator 4.0 и выше) |
BGCOLOR = цвет |
Фоновый цвет для ячеек данного ряда |
BORDER = значение |
Толщина рамки, обрамляющей ячейки данного ряда; BORDER=0 –без обрамления |
VALIGN = значение |
Вертикальное выравнивание содержимого ячеек; возможны значения top, center и bottom |
Атрибуты тега <TD> задают параметры данной ячейки (при возникновении противоречий атрибуты, заданные в тегах <TABLE> и <TR>, отменяются).
ALIGN = значение |
Выравнивание содержимого ячейки; возможны значения left, right и center |
BACKGROUND = url |
Фоновое изображение для ячейки таблицы (Microsoft Internet Explorer 3.0 и выше и Netscape Navigator 4.0 и выше) |
BGCOLOR = цвет |
Фоновый цвет для ячейки |
BORDER = значение |
Толщина рамки, обрамляющей ячейку; BORDER=0 – без обрамления |
VALIGN = значение |
Вертикальное выравнивание содержимого ячейки; возможны значения top, center и bottom |
WIDTH = значение |
ширина ячейки; задается либо в пикселях, либо в процентах от ширины таблицы; |
ROWSPAN = значение |
указывает количество строк, охватываемых ячейкой |
COLSPAN = значение |
указывает количество столбцов, охватываемых ячейкой |
NOWRAP |
при задании этого атрибута текст не располагается автоматически в ячейке; отображается лишь та его часть, что умещается в видимой части ячейки; может появиться горизонтальная полоса прокрутки. |
При работе с таблицами учтите, что указанное значение атрибута WIDTH во многих случаях лишь "принимается к сведению" браузером. Заданные пропорции в точности выдерживаются редко, браузер старается отобразить таблицу как можно лучше (в его понимании).
Задание 11.
Создайте таблицу:
-
1
WIDTH = значение
ширина ячейки; задается либо в пикселях, либо в процентах от ширины таблицы;
2
ROWSPAN = значение
указывает количество строк, охватываемых ячейкой
3
COLSPAN = значение
указывает количество столбцов, охватываемых ячейкой
Заголовки разных уровней внутри текста
Теги вида <Hn> ... </Hn> оформляют заключенный в них текст в виде заголовка уровня n. Значения n могут изменяться от 1 до 6. Заголовок высшего уровня выводится наиболее крупным шрифтом.
Теги <H1>, <H2>, ... , <H6> могут иметь атрибут выравнивания ALIGN со значениями LEFT (по умолчанию), RIGHT и CENTER.
Символьные примитивы
Символы < > " и & являются специальными символами HTML; при необходимости использовать их в тексте, отображаемом браузером, следует применять символьные примитивы:
символ |
соответствующий символьный примитив |
символ |
соответствующий символьный примитив |
< > |
< > |
& " |
& " |
Например, для того, чтобы в окне браузера вывести формулу 2 < 3, в тексте HTML-документа придется записать: 2 < 3 .
Есть еще много десятков символьных примитивов, полный список которых приведен в описаниях стандартов HTML и некоторых справочниках. Здесь стоит упомянуть, по крайней мере, о символьных примитивах © (знак авторского права ©), ® (зарегистрированный товарный знак ®) и (от англ. nonbreaking space – неразрывный пробел).
Комментарий
Текст комментария размещается в теге <!--...... текст комментария ....... --> и не отображается в окне браузера.
Гиперссылки
Связь между HTML-документами и фрагментами документов организуется с помощью тегов <A> ... </A> (от англ. anchor – якорь). Тег <A> употребляется в двух формах.
В первом случае – при создании гиперссылки. В этом случае обязательным является атрибут
HREF = url
– адрес целевого документа.
Текст и изображения, размещенные между тегами <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>
Отметим, что тег <A> позволяет сделать активной зоной текстовый фрагмент или изображение целиком; для того же, чтобы разные фрагменты одного изображения ссылались на разные целевые документы, придется использовать тег <MAP>, реализующий чувствительное изображение-карту.
Задание 12.
Создайте метку в начале Вашего html-документа.
Создайте гиперссылку для перехода из конца документа в начало.
Создайте гиперссылку для перехода к другому документу:
а) сделайте активной зоной текстовый фрагмент;
б) сделайте активной зоной изображение (целиком).