Лекция 9. Основы HTML. Часть 2

Национальный аэрокосмический университет им. Н.Е.Жуковского «ХАИ»

ОСНОВЫ РАБОТЫ В ИНТЕРНЕТ.ЛЕКЦИЯ №9.HTML. Атрибуты тэгов. Цвета. Таблицы. Изображения и звуки. Списки. Текстовые блоки. Комментарии.

Фурманов Алексей Аркадиевич

Тэг состоит из:<имя_тэга имя_атрибута1=“значение_атрибута1”…>

где:имя_тэга = {html, body, meta, p, br, em, strong, b, i, …}имя_атрибута1 = {color, bgcolor, border, style, class, …}

Пример:<P color = “red” bgcolor=“#000”>Важное сообщение! </P>

Атрибуты тэгов

Цвета:1)записываются в 16-ричной форме либо константами (black)2)на один канал цвета приходится один байт (от 00 до FF)3)форма записи: #RRGGBB (Red|Green|Blue)от #000000 (“black”-чёрный) до #FFFFFF (“white”-белый)

#FF0000 - (“red”-красный), #0000FF - (“blue”-синий)

4) краткая форма: #abc = #aabbcc, #000 = #000000

Цвета

Таблицы строятся при помощи строк, в которых находятся ячейки. Строки располагаются сверху вниз, ячейки располагаются слева направо.

Тэг таблицы:<TABLE border=“1px” cellpadding=“5px” cellspacing=“5”>

Тэг строки:<TR>

Тэг ячейки:<TD> - ячейка данных<TH> - ячейка заголовка

Таблицы 1

Пример:

<TABLE>

<TR>

<TH>Заголовок 1</TH>

<TH>Заголовок 2</TH>

</TR>

<TR>

<TD>Ячейка 1.1</TD>


</TR>

<TR>



</TR>

</TABLE>

Таблицы 2

Заголовок 1 Заголовок 2

Ячейка 1.1 Ячейка 1.2


NB!1) cellpadding=“5” === cellpadding=“5px”2) можно задавать ширину и высоту в % (от контейнера таблицы)3) Ширина первой ячейки задаёт ширину первого столбца4) Высота первой ячейки задаёт высоту первой строки

Таблицы 31 – border (ширина границы таблицы)2 - cellpadding (расстояние от границы ячейки до содержимого ячейки)3 – cellspacing (расстояние между ячейками)4 – width (ширина таблицы)5 – height (высота таблицы)

ТекстТекст

ТекстТекст

13

35

4

2

2

Для объединения ячеек у них существуют следующие атрибуты:rowspan – объединение строкcolspan – объединение столбцов

Например:<TD colspan=“2” rowspan=“2”>

Таблицы 4

Пример:

<TABLE>

<TR>

<TH colspan=“2”>Заголовок</TH>

</TR>

<TR>


<TD rowspan=“2”>Ячейка 1.2</TD>

</TR>

<TR>


</TR>

</TABLE>

Таблицы 5

Заголовок


Ячейка 2.1

Тэг изображения:

<IMG src=“URL изображения” alt=“подпись” border=“ширина границы”>

Пример:

<IMG src=“http://mail.ru/myphoto.jpg” alt=“Это я” border=“1px”>

<IMG src=“myphoto.jpg” alt=“Это я” border=“0”>

<IMG src=“../myphoto.jpg” alt=“Это я” border=“0px”>

Тэг звука:

<BGSOUND src=“URL звукового файла” loop=“количество циклов повторения|INFINITE”>

Изображения и звуки

Списки нумерованные (1,2…) и маркированные (-,*).

Нумерованные:<OL start=“начальное значение” type=“тип маркера”>Нумерованный список</OL>type = 1,A,a,I,i

Маркированные:<UL type=“тип маркера”>Маркированный список</UL>type = circle ,square , disk

Элемент списка:<LI>Элемент списка</LI>

Списки

Пример вложенного списка:<UL>

<LI>Элемент 1</LI><LI>Элемент 2</LI><LI>

<OL start=“2” type=“A”><LI>Элемент 3.1</LI><LI>Элемент 3.2</LI>

</OL></LI>

</UL>

Списки 2

Текстовые блоки бывают: отдельные и встроенные.1) Отдельный текстовый блок – начинается с новой строки:<DIV>Текст</DIV>

2) Встроенный текстовый блок – внедрён в текущее предложение:<SPAN>Текст</SPAN>

Текстовые блоки

Для описания каких-либо заметок относящихся к HTML необходимо пользоваться комментариями:



Например:<!– Это наш список --><OL><LI></LI></OL>

Комментарии

Documents

Лекция 9. Основы HTML. Часть 2