Содержание
Модуль 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>
содержание вперед на
главную
|