Лекция 9. Основы HTML. Часть 2.
-
Upload
alexey-furmanov -
Category
Documents
-
view
273 -
download
15
description
Transcript of Лекция 9. Основы HTML. Часть 2.
![Page 1: Лекция 9. Основы HTML. Часть 2.](https://reader035.fdocuments.net/reader035/viewer/2022062319/5562ecc6d8b42a213b8b4cc6/html5/thumbnails/1.jpg)
Национальный аэрокосмический университет им. Н.Е.Жуковского «ХАИ»
ОСНОВЫ РАБОТЫ В ИНТЕРНЕТ.ЛЕКЦИЯ №9.HTML. Атрибуты тэгов. Цвета. Таблицы. Изображения и звуки. Списки. Текстовые блоки. Комментарии.
Фурманов Алексей Аркадиевич
![Page 2: Лекция 9. Основы HTML. Часть 2.](https://reader035.fdocuments.net/reader035/viewer/2022062319/5562ecc6d8b42a213b8b4cc6/html5/thumbnails/2.jpg)
Тэг состоит из:<имя_тэга имя_атрибута1=“значение_атрибута1”…>
где:имя_тэга = {html, body, meta, p, br, em, strong, b, i, …}имя_атрибута1 = {color, bgcolor, border, style, class, …}
Пример:<P color = “red” bgcolor=“#000”>Важное сообщение! </P>
Атрибуты тэгов
![Page 3: Лекция 9. Основы HTML. Часть 2.](https://reader035.fdocuments.net/reader035/viewer/2022062319/5562ecc6d8b42a213b8b4cc6/html5/thumbnails/3.jpg)
Цвета:1)записываются в 16-ричной форме либо константами (black)2)на один канал цвета приходится один байт (от 00 до FF)3)форма записи: #RRGGBB (Red|Green|Blue)от #000000 (“black”-чёрный) до #FFFFFF (“white”-белый)
#FF0000 - (“red”-красный), #0000FF - (“blue”-синий)
4) краткая форма: #abc = #aabbcc, #000 = #000000
Цвета
![Page 4: Лекция 9. Основы HTML. Часть 2.](https://reader035.fdocuments.net/reader035/viewer/2022062319/5562ecc6d8b42a213b8b4cc6/html5/thumbnails/4.jpg)
Таблицы строятся при помощи строк, в которых находятся ячейки. Строки располагаются сверху вниз, ячейки располагаются слева направо.
Тэг таблицы:<TABLE border=“1px” cellpadding=“5px” cellspacing=“5”>
Тэг строки:<TR>
Тэг ячейки:<TD> - ячейка данных<TH> - ячейка заголовка
Таблицы 1
![Page 5: Лекция 9. Основы HTML. Часть 2.](https://reader035.fdocuments.net/reader035/viewer/2022062319/5562ecc6d8b42a213b8b4cc6/html5/thumbnails/5.jpg)
Пример:
<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
![Page 6: Лекция 9. Основы HTML. Часть 2.](https://reader035.fdocuments.net/reader035/viewer/2022062319/5562ecc6d8b42a213b8b4cc6/html5/thumbnails/6.jpg)
NB!1) cellpadding=“5” === cellpadding=“5px”2) можно задавать ширину и высоту в % (от контейнера таблицы)3) Ширина первой ячейки задаёт ширину первого столбца4) Высота первой ячейки задаёт высоту первой строки
Таблицы 31 – border (ширина границы таблицы)2 - cellpadding (расстояние от границы ячейки до содержимого ячейки)3 – cellspacing (расстояние между ячейками)4 – width (ширина таблицы)5 – height (высота таблицы)
ТекстТекст
ТекстТекст
13
35
4
2
2
![Page 7: Лекция 9. Основы HTML. Часть 2.](https://reader035.fdocuments.net/reader035/viewer/2022062319/5562ecc6d8b42a213b8b4cc6/html5/thumbnails/7.jpg)
Для объединения ячеек у них существуют следующие атрибуты:rowspan – объединение строкcolspan – объединение столбцов
Например:<TD colspan=“2” rowspan=“2”>
Таблицы 4
![Page 8: Лекция 9. Основы HTML. Часть 2.](https://reader035.fdocuments.net/reader035/viewer/2022062319/5562ecc6d8b42a213b8b4cc6/html5/thumbnails/8.jpg)
Пример:
<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
![Page 9: Лекция 9. Основы HTML. Часть 2.](https://reader035.fdocuments.net/reader035/viewer/2022062319/5562ecc6d8b42a213b8b4cc6/html5/thumbnails/9.jpg)
Тэг изображения:
<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”>
Изображения и звуки
![Page 10: Лекция 9. Основы HTML. Часть 2.](https://reader035.fdocuments.net/reader035/viewer/2022062319/5562ecc6d8b42a213b8b4cc6/html5/thumbnails/10.jpg)
Списки нумерованные (1,2…) и маркированные (-,*).
Нумерованные:<OL start=“начальное значение” type=“тип маркера”>Нумерованный список</OL>type = 1,A,a,I,i
Маркированные:<UL type=“тип маркера”>Маркированный список</UL>type = circle ,square , disk
Элемент списка:<LI>Элемент списка</LI>
Списки
![Page 11: Лекция 9. Основы HTML. Часть 2.](https://reader035.fdocuments.net/reader035/viewer/2022062319/5562ecc6d8b42a213b8b4cc6/html5/thumbnails/11.jpg)
Пример вложенного списка:<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
![Page 12: Лекция 9. Основы HTML. Часть 2.](https://reader035.fdocuments.net/reader035/viewer/2022062319/5562ecc6d8b42a213b8b4cc6/html5/thumbnails/12.jpg)
Текстовые блоки бывают: отдельные и встроенные.1) Отдельный текстовый блок – начинается с новой строки:<DIV>Текст</DIV>
2) Встроенный текстовый блок – внедрён в текущее предложение:<SPAN>Текст</SPAN>
Текстовые блоки
![Page 13: Лекция 9. Основы HTML. Часть 2.](https://reader035.fdocuments.net/reader035/viewer/2022062319/5562ecc6d8b42a213b8b4cc6/html5/thumbnails/13.jpg)
Для описания каких-либо заметок относящихся к HTML необходимо пользоваться комментариями:<!-- Пример однострочного комментария -->
<!--Пример многострочного комментария-->
Например:<!– Это наш список --><OL><LI></LI></OL>
Комментарии