Основы работы в интернет

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

2. Тэг состоит из:
<имя_тэга имя_атрибута1=“значение_атрибута1”…>
где:
имя_тэга = {html, body, meta, p, br, em, strong, b, i, …}
имя_атрибута1 = {color, bgcolor, border, style, class, …}
Пример:
<P color = “red” bgcolor=“#000”>Важное сообщение! </P>
Атрибуты тэгов

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

4. Таблицы строятся при помощи строк, в которых находятся ячейки.
Строки располагаются сверху вниз, ячейки располагаются слева
направо.
Тэг таблицы:
<TABLE border=“1px” cellpadding=“5px” cellspacing=“5”>
Тэг строки:
<TR>
Тэг ячейки:
<TD> - ячейка данных
<TH> - ячейка заголовка
Таблицы 1

5. Пример:
<TABLE>
<TR>
<TH>Заголовок 1</TH>
<TH>Заголовок 2</TH>
</TR>
<TR>
<TD>Ячейка 1.1</TD>
<TD>Ячейка 1.2</TD>
</TR>
<TR>
<TD>Ячейка 2.1</TD>
<TD>Ячейка 2.2</TD>
</TR>
</TABLE>
Таблицы 2
Заголовок 1 Заголовок 2
Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.1

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

7. Для объединения ячеек у них существуют следующие атрибуты:
rowspan – объединение строк
colspan – объединение столбцов
Например:
<TD colspan=“2” rowspan=“2”>
Таблицы 4

8. Пример:
<TABLE>
<TR>
<TH colspan=“2”>Заголовок</TH>
</TR>
<TR>
<TD>Ячейка 1.1</TD>
<TD rowspan=“2”>Ячейка 1.2</TD>
</TR>
<TR>
<TD>Ячейка 2.1</TD>
</TR>
</TABLE>
Таблицы 5
Заголовок
Ячейка 1.1 Ячейка 1.2
Ячейка 2.1

9. Тэг изображения:
<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”>
Изображения и звуки

10. Списки нумерованные (1,2…) и маркированные (-,*).
Нумерованные:
<OL start=“начальное значение” type=“тип
маркера”>Нумерованный список</OL>
type = 1,A,a,I,i
Маркированные:
<UL type=“тип маркера”>Маркированный список</UL>
type = circle ,square , disk
Элемент списка:
<LI>Элемент списка</LI>
Списки

11. Пример вложенного списка:
<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

12. Текстовые блоки бывают: отдельные и встроенные.
1) Отдельный текстовый блок – начинается с новой
строки:
<DIV>
Текст
</DIV>
2) Встроенный текстовый блок – внедрён в текущее
предложение:
<SPAN>
Текст
</SPAN>
Текстовые блоки

13. Для описания каких-либо заметок относящихся к HTML
необходимо пользоваться комментариями:
<!-- Пример однострочного комментария -->
<!--
Пример многострочного комментария
-->
Например:
<!– Это наш список -->
<OL><LI></LI></OL>
Комментарии