Модуль 1. Общие сведения о языке HTML
HTML - HYPER TEXT MARKUP LANGUAGE, т.е. ссылочный язык гипертекстов.
Язык HTML представляет собой набор тэгов (tag) и содержимого. Тэги всегда образуют пары, заключенные в угловые скобки. Они сообщают браузеру что необходимо сделать с содержимым, расположенным между тэгами. Два тэга, открывающий и закрывающий, и часть текста, выделенная ими, образуют блок, который называется HTML-элементом.
Пример:
<HTML>
<HEAD>
<TITLE> Название
</HEAD>
<BODY bgcolor=cyan background="1.bmp">
<H1>1 строка</H1>
<H2>2 строка</H2>
…
…
<H6>6 строка</H6>
</BODY>
</HTML>
Основные тэги:- <A> - устанавливает гиперсвязь и якорь для гиперсвязи, т.е. определяет какое слово или предложение в тексте html-документа будет обеспечивать связь с ресурсом, например с файлом html.
Пример:
<A HREF="http://www.yandex.ru/index.html">Поисковая система Яндекс</A>
- <ADDRESS> - служит для предоставления контактной информации об авторе данного html-документа. При выводе на экран текст будет выделен специальным шрифтом и курсивом.
Пример:
<ADDRESS>chemisk@mail.ru</ADDRESS>
- <APPLET> - предназначен для вставки java-апплетов в документ html. Если браузер поддерживает java-апплеты, то он может запустись аплет на исполнение. В противном случае будет показано содержимое текста апплета.
- <AREA> - определяет область, реагирующую на нажатие кнопки мыши. Данный тэг является элементом тэга <MAP>, который в свою очередь является элементом тэга <IMG>.
Пример:
<AREA HREF="URL" COORDS="x1, y1, x2, y2">
Область может иметь различную форму, определяемую атрибутами тэга. По умолчанию форма области - прямоугольная.
Возможные атрибуты тэга <AREA>:
| Имя атрибута | Возможные значения | Описание | Примечание | | ALT | Строковые значения | Текстовое описание области, отображаемое при наведении курсора мыши на область | - | | COORDS | Строковые значения в форме, определяемой аттрибутом SHAPE | Определяет координаты области | Обязателен; может опускаться только в случае использованного по умолчанию прямоугольника | | HREF | "URL" (адрес) | Указывает адрес связанного документа | Обязателен | | NOHREF | NOHREF | Означает, что в данный момент область не работает | Текстовое описание области (если оно указано) будет отображаться и в этом случае | | SHAPE | RECT, CIRCLE, POLY | Форма области | По умолчанию имеет значение RECT |
- <B> - указывает что содержимое тэга нужно выделить полужирным шрифтом.
- <BASE> - задает базовый URL для всех URL в html-документе.
Пример:
<BASE HREF="http://www.myhome.ru/index.html">
<A HREF="images/myfoto.jpg">Фотография</A>
- <BASEFONT> - задает размер базового (основного) шрифта, применяемого к обычному тексту (не к заголовкам).
Пример:
<BASEFONT SIZE=n>, где n=1..7
- <BLOCKQUOTE> - предназначен для вставки длинных цитат. Отображается как отдельный абзац; часто с отступом и курсивным шрифтом (или выделенным другим способом).
- <BODY> - определяет тело html-документа. Документ html всегда состоит из заголовка и тела.
Возможные атрибуты тэга <BODY>:
| Имя атрибута | Возможные значения | Описание | | ALINK | Имя цвета или его цифровое значение в 16-ой записи | Устанавливает цвет для активной гипертекстовой связи (выделяет связь данным цветом в момент, когда пользователь нажал на нее) | | BACKGROUND | URL | Определяет адрес, где записан цвет фона и устанавливает данный цвет для фона текущей странички | | BGCOLOR | Имя цвета | Устанавливает цвет фона всего документа | | LINK | Имя цвета | Устанавливает цвет для невостребованной гипертекстовой связи | | TEXT | Имя цвета | Основной цвет для всего текста в html документе | | VLINK | Имя цвета | Устанавливает цвет для востребованной гипертекстовой связи |
- <BR> - применяется для принудительного перевода строки (но не абзаца).
- <CAPTION> - предназначен для выделения заголовка таблицы. Помещается выше или ниже таблицы. Атрибут ALIGN (выравнивание) может принимать значения top или bottom. По умолчанию, top (сверху).
- <CENTER> - предназначен для выравнивания по центру части документа.
- <CITE> - применяется для отображения ссылок на какие-либо источники (например, на название книги). Ссылка обычно отображается курсивом.
Пример:
Этот текст взят из журнала
<CITE>КомпьютерПресс</CITE>
- <CODE> - предназначен для отображения кода программы. Выводит текст моноширинным шрифтом, т.е. размер букв по вертикали и горизонтали одинаков.
- <DFN> - предназначен для выделения текста (например, курсивом). Многие браузеры не поддерживают <DFN>.
- <DIV> - применяется для разделения документа на части и применения к этим частям различных способов выравнивания. Атрибут ALIGN может принимать значения left, right или center.
- <EM> - предназначен для выделения текста подчеркиванием.
- <FONT> - позволяет определить размер и цвет шрифта.
Пример:
<FONT SIZE=n COLOR=#ff00ff>Текст</FONT>
Где атрибут SIZE определяет размер шрифта и может принимать значения от 1 до 7 или целое число со знаком (например, -2, +4). Число со знаком будет добавлено к текущему, базовому размеру шрифта, установленному тэгом <BASEFONT>.
- <H1>…<H6> - определяют заголовки различной степени важности. Данные тэги поддерживают использование атрибута выравнивания ALIGN.
- <HEAD> - устанавливает заголовок документа. Использование данного тэга никак не отображается визуально в окне браузера.
- <HR> - предназначен для разбивки текста по разделам html-документа. Представлен в виде горизонтальной черты во всю ширину экрана.
- <HTML> - является необязательным тэгом и никак не влияет на отображение документа. Может иметь атрибут VERSION строкового типа, который содержит информацию о версии html.
- <I> - предназначен для выделения текста курсивом.
- <IMG> - служит для включения графического изображения в документ.
Пример:
<IMG SRC="URL" ALT="текст">
Возможные атрибуты тэга <IMG>:
| Имя атрибута | Возможные значения | Описание | Примечание | | ALIGN | TOP, BOTTOM, MIDDLE, LEFT, RIGHT | Предназначен для позиционирования изображения относительно текущей текстовой строки | По умолчанию BOTTOM | | ALT | Строковые значения | Альтернативное текстовое описание изображения, которое будет отображаться в случае, когда браузер не может показать изображение | - | | BORDER | Целое число | Ширина бордюра (рамки) изображения в пикселях | Для отключения рамки используется BORDER=0 | | HEIGHT | Целое число | Высота изображения в пикселях | - | | HSPACE | Целое число | Ширина незаполненного пространства непосредственно слева и справа от изображения в пикселях | - | | ISMAP | ISMAP | Показывает, что изображение является картой образа, реагирующей на нажатие кнопки мыши | Когда пользователь щелкает мышкой на изображении этот атрибут обеспечивает передачу координат курсора | | SRC | "URL" | Адрес изображения | Обязателен | | USEMAP | "URL" | Фрагмент идентификатора для сайта клиента с картой образа | - | | VSPACE | Целое число | Высота незаполненного пространства выше и ниже изображения в пикселях | - | | WIDTH | Целое число | Ширина изображения в пикселях | - |
- <MAP> - используется как реагирующая на нажатие клавиши карта. Элемент MAP имеет имя, ссылка на которое может быть передана элементу IMG и содержит элементы AREA, которые определяют "горячие" зоны на связанном изображении и связывают их с URL.
Пример 1:
<MAP>
AREA элемент
</MAP>
Имеет единственно-возможный атрибут NAME строкового типа, который определяет имя карты.
Пример 2:
<IMG SRC="navbar.gif" BORDER=0 USEMAP="#mymap">
<MAP NAME="mymap"
<AREA HREF="help.html" ALT="Страница помощи"
SHAPE=RECT COORDS="0, 0, 118, 28">
SHAPE=RECT COORDS="184, 0, 276, 28">
<AREA HREF="images.html" ALT="Картинки"
SHAPE=RECT COORDS="118, 0, 184, 28">
<AREA HREF="mybio.html" ALT="Моя биография"
SHAPE=RECT COORDS="276, 0, 373, 28">
</MAP>
- <MENU> - предназначен для представления информации в виде меню. Многие браузеры представляют меню просто в виде нумерованного списка.
Пример:
<MENU>
<LI> 1-й элемент
<LI> 2-й элемент
</MENU>
Имеет единственно-возможный атрибут COMPACT. При его использовании будут сокращены промежутки между элементами меню (списка).
- <OL> - применяется в виде упорядоченного нумерованного списка.
Пример:
<OL>
<LI> 1-й элемент
<LI> 2-й элемент
</OL>
Возможные атрибуты тэга: <OL>
| Имя атрибута | Возможные значения | Описание | Примечание | | COMPACT | COMPACT | Применяется для уменьшения расстояния между элементами списка | - | | START | Целое число | Задает начальную цифру последовательности | По умолчанию имеет значение 1 | | TYPE | 1, a, A, i, I | Задает стиль нумерации | Чувствителен к регистру |
- <P> - применяется для представления обычного текстового абзаца. Выглядит как пустая строка, вставленная после текста, и отделяющая один абзац от другого.
Пример:
<P> абзац текста </P>
Имеет единственно-возможный атрибут ALIGN для выравнивания абзаца по левому (LEFT), правому (RIGHT) краям или по центру (CENTER).
- <PRE> - служит для представления в окне браузера предварительно отформатированного текста (с использованием нескольких подряд идущих пробелов и переводов строк). Текст отображается шрифтом одного размера, т.е. шрифтом типа телетайпного, в котором все символы оного и того же размера по горизонтали. Использование пробелов и переводов строк точно соответствует содержимому в пределах элемента PRE.
- <SMALL> - применяется для представления текста маленьким шрифтом (для обозначения текста меньшей важности).
- <STRIKE>- служит для представления перечеркнутого текста.
- <STRONG> - используется для сильного выделения текста полужирным шрифтом.
- <SUB> - используется для отображения подстрочных знаков, часто применяющихся для индексирования переменных. Отображается немного ниже уровня обычного текста и меньшим шрифтом.
- <SUP> - предназначен для отображения надстрочных знаков, часто применяющихся для показателей степеней. Отображается немного выше уровня обычного текста и меньшим шрифтом.
- <TITLE>- используется для задания внешнего заголовка документа. Данный заголовок может отображаться в окне заголовка программы просмотра, в списке результатов поиска, возвращаемом поисковым сервером, в списке истории и т.д.
- <U>- применяется для подчеркивания текста.
- <UL> - применяется для представления информации в форме списка без нумерации элементов.
Пример:
<UL>
<LI> 1-й элемент
<LI> 2-й элемент
</UL>
- Звуковоспроизведение
Пример:
<EMBED SRC="1.mid" width="140" height="50" align="middle" border="0" autostart=TRUE>
|
