2017-11-01
228
Документ HTML представляет собой набор вложенных элементов. Элементы - это контейнеры, в которых размещаются: текст, графика, гипертекстовые ссылки, инструкции управления отображением.
Каждый контейнер начинается последовательностью типа <имя_элемента список_атрибутов> и заканчивается последовательностью типа </имя_элемента>. Первая последовательность называется тегом начала элемента, а вторая последовательность называется тегом конца элемента. Инструкции управления изображением также являются тэгами – тэгами начала. Исторически сложилось так, что ряд элементов потеряли в процессе развития языка свои тэги конца и, таким образом, превратились в инструкции управления отображением. Сам документ является также элементом, который может иметь две формы: форму обычного документа, форму фрейма.
Документ в целом должен быть отмечен как документ в формате HTML. Для этого он должен начинаться командой <HTML> и заканчиваться командой </HTML>.
Документ состоит из 2 частей:
- заголовка – информация о документе, которая не выводится на экран, называется заголовком. Он заключается в контейнер <HEAD> </HEAD>. В заголовке содержится название странички. Оно располагается между тэгами <TITLE> и </TITLE>;
- собственно документа (BODY).
Общая схема документа в формате HTML выглядит следующим образом:
< HTML >
< HEAD > <TITLE> Заголовок </tinle> </HEAD>
< BODY атрибуты_тела_документа >......< /BODY >
< /HTML >
Документ-фрейм имеет несколько другой вид. Собственно -- это контейнер для других HTML-документов.
Параметры тэга <BODY>
| BGCOLOR | Определяет цвет фона |
| BACKGROUND | Указывает путь изображения, которое следует использовать в качестве фона |
| TEXT | Определяет цвет текста |
| LINK | Определяет цвет ссылки, которая не была посещена |
| VLINK | Определяет цвет ссылки, которая была посещена |
| ALINK | Определяет цвет, которым выделяется активная ссылка |
| LEFTMARGIN | Определяет ширину левого поля в пикселях |
| TOPMARGIN | Определяет ширину верхнего поля в пикселях |
Пример:
<BODY BGCOLOR ="red" TEXT="white" >......</BODY>
Устанавливает цвет фона - красный, цвет текста - белый.
<BODY BACKGROUND ="1n.jpg" TEXT="white" >......</BODY>
Фоном стала картинка из файла 1n.jpg {файл находится в той же папке, где и основной файл HTML}, цвет текста - белый.
Вставка рисунка
Вставка рисунка графики в текст происходит при помощи использования тэга IMG: < IMG SRC=адрес_картинки >.
Атрибуты
| Атрибут | Значения | Действие |
| ALIGN | LEFT | Значение LEFT позволяет организовать обтекание текста справа от картинки |
| RIGHT | Обтекание текста слева от картинки | |
| ТОР, BOTTOM, CENTER | Выравнивают картинку относительно текущей строки текста. | |
| BORDER | Значение этого атрибута определяет толщину рамки вокруг картинки |
Ссылки
Гипертекстовая ссылка имеет вид:
< A HREF=адрес_ресурса > идентификатор ссылки < /A >.
Представленная выше ссылка - это обычная текстовая гипертекстовая ссылка, но можно использовать в качестве ссылки картинку. В этом случае вместо идентификатора ссылки нужно вставить рисунок:
< A HREF=адрес_ресурса >
< IMG SRC="картинка" >
< /A >
адрес_ресурса - это имя файла HTML, на который происходит ссылка.
Заголовки
< Hx >... < /Hx > Уровень заголовка. Символ "х" принимает значение от 1-6.
Возможно использование параметра ALIGN.
Параграфы
<P> текст </P> печатает текст, перед которым вставляется пустая строка.
Возможно использование параметра ALIGN.
Свойства текста
< B >...< /B > Жирный шрифт
< I >... < / I > Курсив
< U >... < /U > Подчеркивание
< TT >…< /TT > Печатная машинка
< STRIKE >…< /STRIKE > Зачеркивание
< BIG >…</BIG > Крупный
< SMALL >…< /SMALL > Мелкий
< SUB >…< /SUB > Нижний индекс
< SUP >…< /SUP > Верхний индекс
< PRE >... < /PRE > Отмена форматирования
< FONT SIZE= размер COLOR= цвета >... < /FONT > Управление шрифтом
Вместо определенного номера можно задать относительный размер шрифта, например +3 или -1.В этом случае размер шрифта увеличивается или уменьшается на указанную величину относительно установленного шрифта.
< FONT SIZE= +3 COLOR= "#FFСС55" >... < /FONT > Здесь цвет задан в шестнадцатеричном коде.
FF первые 2 цифры указывают сколько в цвете красного.
СС вторые 2 цифры указывают сколько в цвете зелёного.
55 третьи 2 цифры указывают сколько в цвете синего.
Пример:
"#FF0000" - КРАСНЫЙ
"#00FF00" - ЗЕЛЕНЫЙ
"#0000FF" - СИНИЙ
"#BCF88F" - НЕЖНО РОЗОВЫЙ
Линия <HR>
<HR SIZE=размер WIDTH=длина линии ALIGN=ПАРАМЕТРЫ>
Пример:
<HR SIZE=2 WIDTH=50% ALIGN= LEFT> горизонтальная линия шириной в 2 пикселя на половину экрана прижата к левому краю.
Переход на новую строку <BR>
Списки
<OL TYPE=тип>... </OL> Тэг начала и конца нумерованного списка
TYPE= 1 Стандартная цифровая нумерация 1,2,3,4,…(с какого номера начать)
TYPE=А Прописные буквы А,B,C,…
TYPE=a Строчные буквы a,b,c,d,…
TYPE= I Римские цифры I,II,III,IV,V,…
<LI> Флаг разметки
<UL TYPE=тип>... </UL> Тэг начала и конца маркированного списка
TYPE=DISK Круглая жирная точка
TYPE=CIRCLE Окружность
TYPE=SQUARE Маленький черный квадрат
<LI> Флаг разметки
Таблица
Таблица создается с помощью контейнера <TABLE> …</TABLE >.
Команда < TABLE > может иметь следующие параметры:
BORDER- ширина бордюра;
WIDTH - ширина таблицы;
BGCOLOR - цвет фона под таблицей.
Между тэгами <TABLE> …</TABLE> может располагаться:
<CAPTION>….</CAPTION> Текст, расположенный между этими тэгами выводится в виде заголовка таблицы. Можно использовать параметр ALIGN=TOP (название над таблицей), BOTTOM (название под таблицей);
<TH>…</TH> название столбца (строки). Возможные параметры (ALIGN, VALIGN, COLSPAN, ROWSPAN, BGCOLOR, WIDTH);
<TR>…</TR> определяет строку таблицы.
Параметры:
| ALIGN | LEFT | выравнивание по левому краю |
| RIGHT | выравнивание по правому краю | |
| CENTER | выравнивание по центру | |
| VALIGN | TOP | выравнивание по верхнему краю |
| BOTTOM | выравнивание по нижнему краю | |
| MIDDLE | выравнивание по середине | |
| BGCOLOR | цвет фона внутри строки | |
| BORDER | размер рамки строки | |
| BORDERCOLOR | цвет рамки строки | |
| COLSPAN=N | объединение N ячеек в строке |
< TD >…< /TD > Определяет столбец таблицы. Параметры
| ALIGN, VALIGN, BGCOLOR, BORDER, BORDERCOLOR | |
| ROWSPAN=N | объединение N ячеек в столбце |
Фреймы
Фрейм – независимые прокручиваемые окна, объединенные в окне браузера.
Контейнер для создания фреймов: <FRAMESET>….</FRAMESET>.
Параметры:
| COLS | вертикальное разбиение окна |
| ROWS | горизонтальное разбиение окна |
| BORDER | размер рамки |
Для описания окон используется не парный тэг <FRAME>
Параметры:
| SRC="имя файла" | задание имени файла, которое загружается в окно |
| SCROLLING="NO" | запрет полосы прокрутки. |
| BORDER | ширина рамки. |
| BORDCOLOR | цвет рамки. |
| NAME | присваивает окну имя |
| MARGINWIDTH | задание отступа от рамки |
| MARGINHEIGHT | задание отступа от рамки |
Структура документа, который является контейнером для других документов, выглядит следующим образом:
--- главный файл------/Нет контейнера <BODY>/-------
<HTML>
<FRAMESET COLS="30%,40%,*">
<FRAME SRC="A.HTM" SCROLLING="NO">
<FRAME SRC="B.HTM" MARGINWIDTH=1 MARGINHEIGHT=1 >
<FRAME SRC="C.HTM">
</FRAMESET>
</HTML>
Здесь головное окно разделено на 3 вертикальных: 1-е окно имеет размер 30% от размера всего экрана, в нем запрещена полоса прокрутки; 2-е окно имеет размер 40% от всего экрана и изображение в нем выровнено по верху и по ширине; 3-е окно занимает весь оставшееся экран.(Можно вместо файлов HTML загружать в окна рисунки формата.gif или.jpg.)
Файлы A.HTM, В.HTM, С.HTM должны быть созданы и находится в этой же папке.
