2. ЯЗЫК HTML
HTML (Hypertext Markup Language) – это язык
разметки текстового документа для указания
формы представления информации, содержащейся
в этом документе.
С его помощью можно разместить:
Отформатированный текст
Графическое изображение;
Таблицы ;
Звук;
Видео файл.
2
3. ПРАВИЛА ЯЗЫКА
1. Все команды языка HTML называются тегами;
2. Все теги выделяются символами-ограничителями
(“<“ и “>”);
3. Между символами-ограничителями записывается
идентификатор тега и его параметр (атрибут);
4. Если есть открывающий тег, то есть и закрывающий;
5. Закрывающий тег записывается так же, как и
открывающий, но с символом “/” (слеш);
6. Пара из открывающего и закрывающего тегов
называется контейнером.
3
5. ЗАГОЛОВОК ДОКУМЕНТА HTML
Выделяется тегами <HEAD> и </HEAD>.
Содержит следующие теги:
<TITLE> - обозначает название
документа, отображаемое в строке заголовка
окна браузера
<META> - позволяет присвоить документу
следующие атрибуты:
5
6. Список ключевых слов, по которым этот
документ будут находить поисковые системы
в Интернете;
Сведения об авторах;
Название программы, при помощи которой
этот документ был изготовлен;
Любую дополнительную
информацию, описывающую документ.
6
7. АТРИБУТЫ ТЕГА <META>
content – дополнительная информация, которая
зависит от других атрибутов
name – имя блока дополнительной информации
Пример 1
<HTML>
<HEAD>
<TITLE>Моя первая страница HTML</TITLE>
</HEAD>
7
9. АТРИБУТЫ ТЕГА <BODY>
1. Изменение отступов в окне браузера
topmargin – регулирование отступа сверху
leftmargin – регулирование отступа слева
Пример2
Удаление всех отступов:
<BODY topmargin=“0” leftmargin=“0”>
2. Изменение цвета фона и текста
bgcolor – изменение цвета фона
text– изменение цвета текста
Пример3
<BODY bgcolor=“green” text=“red”>
3. Изменение цвета ссылок
link – задает цвет ссылки
vlink – определяет цвет используемой ссылки
alink –цвет активной гиперссылки
4. Вставка фонового изображения
background – определение цвета страницы, содержащей
графическую иллюстрацию
9
10. ВЫРАВНИВАНИЕ СТРОК ТЕКСТА
Строки текста выделяются тегами <P> и </P>
Пример 4
<BODY>
<P> Это первая строка</P>
<P> Это вторая строка</P>
</BODY>
10
11. АТРИБУТЫ ТЕГА <P ALIGN>
left – по левой границе
center – центрирование
right – по правой границе
Пример5
<HTML>
<HEAD>
<TITLE>Выравнивание</TITLE>
</HEAD>
<BODY>
<P align = right> Этот фрагмент выровнен по правой
границе</P>
<P align = left> Этот фрагмент выровнен по левой границе</P>
<P align = center> Центрирование строки</P>
</BODY>
</HTML>
11
12. САМОСТОЯТЕЛЬНОЕ ЗАДАНИЕ 1
Создать HTML-документ с заголовком:
Самостоятельное задание, с фоном и текстом любого
цвета (текст должен быть читаем).
В документе должно быть 3 строки со следующими
данными и атрибутами:
Строка 1:Число, месяц и год (выравнивание по центру)
Строка 2:Ваша фамилия, имя и отчество (выравнивание
по левому краю)
Строка 3:Отделение, номер группы (выравнивание по
правому краю)
12
14. ТЕГИ ДЛЯ ВЫДЕЛЕНИЯ ЗАГОЛОВКОВ:
<H1> - заголовки первого уровня
<H2> - заголовки второго уровня
<H3> - заголовки третьего уровня
<H4> - заголовки четвертого уровня
<H5> - заголовки пятого уровня
<H6> - заголовки шестого уровня
Пример 6
<H1 align = right> Заголовок первого
уровня, выровненный по правой границе </H1> 14
15. ТЕГ <BASEFONT>
Тег <BASEFONT> - предназначен для изменения базового размера
шрифта, его начертания и цвета
Атрибуты <BASEFONT>:
color – определяет цвет шрифта
size - задает базовый размер шрифта
Возможные значения атрибута SIZE:
Значения параметра Высота символов,
SIZE пиксели
1 9
2 10
3 12
4 14
5 18
6 24
7 36 15
16. Тег <FONT> - применяется для изменения
текущего размера относительно базового
значения, заданного тегом <BASEFONT>
В качестве значения можно указывать
значения со знаками «+» или «-»
16
17. Пример 7
<HTML>
<HEAD>
<TITLE> Изменение высоты символов </TITLE>
</HEAD>
<BODY>
<P><BIG>Примеры размеров символов</BIG></P>
<P>Образец символов нормальной высоты</P>
<P><SMALL>Образец символов уменьшенной высоты</SMALL></P>
<P><BASEFONT size = 3>Высота символов равна 3</P>
<P><FONT size = +3> Высота символов равна 3 + 3 = 6</P>
<P><FONT size = -1>Высота символов равна 3 - 1 = 2</P>
</BODY>
</HTML>
17
18. ЦВЕТ В ДОКУМЕНТАХ HTML
Символическое
название
Цвет
Численное
значение
Aqua Морская волна #00FFFF
Black Черный #000000
Blue Голубой #0000FF
Fuchsia Малиновый #FF00FF
Gray Серый #808080
Green Зеленый #008000
Lime Салатовый #00FF00
Maroon Темно-красный #800000
Navy Темно-синий #000080
Olive Оливковый #808000
Purple Пурпурный #800080
Red Красный #FF0000
Silver Серебряный #C0C0C0
Teal Темная морская волна #008080
Yellow Желтый #FFFF00
White Белый #FFFFFF
18
19. НАЗНАЧЕНИЕ ЦВЕТА В СТРОКЕ
Пример 8
<P> <FONT color=“#00FF00”> Салатовый
цвет</FONT></P>
19
21. ПРИМЕР 9
<HTML>
<HEAD>
<TITLE> Форматирование текста</TITLE>
</HEAD>
<BODY bgcolor = #FFFFFF>
<P>Выделение символов <B> Жирным начертанием</B></P>
<P>Выделение символов <I> курсивом</I></P>
<P>Выделение символов <U> Подчеркиванием</U></P>
<P>Выделение символов <STRIKE> Перечеркиванием</STRIKE></P>
<P><BIG>Крупные </BIG>символы и <SMALL> мелкие
</SMALL>символы</P>
<P><BLINK>Мигающие</BLINK>символы</P>
<P>H<SUB>2</SUB>O – это вода <SUP>*</SUP></P>
</BODY>
</HTML>
21
22. ВЫБОР ШРИФТА ПО ЕГО НАЗВАНИЮ
Face – позволяет указывать названия шрифтов, которыми надо
отобразить текст.
ПРИМЕР 9
<HTML>
<HEAD>
<TITLE> Образцы шрифтов</TITLE>
</HEAD>
<BODY bgcolor = white>
<P> <FONT face = “Arial Cyr, Arial, Helv DL”> Шрифт
гельветика</FONT></P>
<P> <FONT face = “Courier New Cyr, Courier New”> Шрифт
курьер</FONT></P>
<P> <FONT face = “Times New Roman Cyr, Times New Roman”>
Шрифт таймс</FONT></P>
</BODY>
</HTML> 22
23. САМОСТОЯТЕЛЬНОЕ ЗАДАНИЕ 2
Создать страницу HTML с заголовком Работа с текстом и цветом.
Документ должен содержать:
Строка 1: заголовок первого уровня, выровненный по центру с текстом:
«Подзаголовки на web-странице»
Строка 2: заголовок второго уровня с выравниванием по левой стороне с
текстом : « Если в документе HTML необходимо задать заголовки различных
уровней, то для оформления имеет смысл использовать специальные теги,
которые предназначены для выделения заголовков от первого до шестого
уровня.»
Строка 3: заголовок четвертого уровня, выровненный по правой границе с
фамилией и именем, выполнявшего задание.
Строка 4: заголовок шестого уровня, выровненного по правой стороне, с
настоящей датой (число, месяц, год)
23
24. САМОСТОЯТЕЛЬНОЕ ЗАДАНИЕ 3
Создать HTML документ с заголовком
Цвет в документах HTML. Документ должен
содержать:
1. Заголовок второго уровня по центру с
текстом : Работа с цветным текстом
2. Далее ввести стихотворение
посторчно, в котором
слова, обозначающие цвет выделить
аналогичным цветом
24
25. СТИХОТВОРЕНИЕ ДЛЯ ЗАДАНИЯ 3
Жил осьминог
Со своей осьминожкой,
И было у них осьминожков немножко.
Все они были
Разного цвета:
Первый - зелѐный,
Второй - фиолетовый,
Третий - как зебра,
Весь полосатый,
Чѐрные оба-
Четвѐртый и пятый,
Шестой - тѐмно-синий
От носа до ножек,
Жѐлтый-прежѐлтый -
Седьмой осьминожек,
Восьмой -
Словно спелая ягода,
Красный...
Словом, не дети,
А тюбики с краской.
25
26. САМОСТОЯТЕЛЬНОЕ ЗАДАНИЕ 4
Создайте HTML документ с заголовком: Радуга.
Текст документа:
К – каждый
О – охотник
Ж – желает
З – знать
Г – где
С – сидит
Ф – фазан.
Каждую букву выделить цветом по названию, сделать
цветной фон, а под тексом документа создать заголовок
первого уровня: РАДУГА, где каждая буква цветная.
26
27. ВСТАВКА СПЕЦИАЛЬНЫХ СИМВОЛОВ И
СИМВОЛЬНЫХ ОБЪЕКТОВ
В языке HTML определены четыре специальных
символа, которые нельзя вставить в обычный
текст, их необходимо заменить символьными
объектами:
Символ Заменяющий его символьный объект
< <
> >
& &
« "
27
29. АТРИБУТЫ ТЕГА <HR>
align – определяет выравнивание линии:
1.left
2. center
3. right
color – цвет разделительной линии
size – высота разделительной линии в пикселях
width – длина линии (указывается либо в
пикселях, либо в процентном отношении от
ширины окна)
noshade – плоская линия, без трехмерного
выделения тенями.
29
30. ПРИМЕР 10
<HTML>
<HEAD>
<TITLE>Горизонтальная разделительная линия</TITLE>
</HEAD>
<BODY bgcolor = #C0C0C0>
<P> Эта линия используется по умолчанию</P>
<HR>
<P>Линия без трехмерного выделения</P>
<HR noshade>
<P>Выравнивание по левой границе</P>
<HR size = 8 width = 50% align = left color = #FFFF00>
<P> Выравнивание по правой границе</P>
<HR size = 8 width = 50% align = right color = #800080>
<P> Центрирование</P>
<HR size = 8 width = 50% align = center color = #FF0000>
</BODY>
</HTML>
30
32. МАРКИРОВАННЫЙ СПИСОК
Создаются при помощи контейнера: <UL>
</UL>, содержащего в себе абзацы - пункты
списка, начинающегося с тега <LI>
Виды маркеров:
Disk – •
Circle – О
Square -
32
34. НУМЕРОВАННЫЙ СПИСОК
Создаются при помощи контейнера: <OL>
</OL>, содержащего в себе абзацы - пункты
списка, начинающегося с тега <LI>
Атрибуты тега <OL>:
Атрибут Отображаемый символ
Start Начальный номер для списка
Type : Тип нумерации:
Заглавными буквами
A
Строчными буквами
a
Заглавными римскими цифрами
I
i Прописными римскими цифрами
1 Арабскими цифрами 34
41. ФОНОВОЕ ИЗОБРАЖЕНИЕ
Фоновое изображение заполняет собой все пространство элемента для которого
оно задано.
ПРИМЕР 14
<HTML>
<HEAD>
<TITLE>Фоновое изображение</TITLE>
</HEAD>
<BODY background="../images/текстура.jpg" bgcolor="pink">
<P> <FONT size = +3> Здесь содержание документа</P>
</BODY>
</HTML>
41
42. ВСТРАИВАЕМЫЕ ИЗОБРАЖЕНИЯ
Для размещения на странице изображений используется
тег <IMG> </IMG>, имеющий единственный обязательный
параметр src, определяющий URL-адрес изображения.
ПРИМЕР 15.
<HTML>
<HEAD>
<TITLE>Тег img</TITLE>
</HEAD>
<BODY>
<IMG src="../images/fish.gif">
<P>Остальное содержимое документа</P>
</BODY>
</HTML>
42
43. ВЫРАВНИВАНИЕ ИЗОБРАЖЕНИЯ В ДОКУМЕНТЕ
Для выравнивания изображения применяют параметр
align со значениями left, right, center.
ПРИМЕР 16.
<HTML>
<HEAD>
<TITLE>Тег IMG с параметром</TITLE>
</HEAD>
<BODY>
<IMG src="../images/fish.gif" align="left">
<P>Картинка слева, а текст обтекает ее справа и этот текст может
занимать несколько строчек.</P>
</BODY>
</HTML>
43
44. РАЗМЕРЫ ИЗОБРАЖЕНИЙ
По умолчанию изображение отображается в браузере в
масштабе 1:1.
Для изменения ее размеров используют атрибуты тега
<IMG>:
width – устанавливает ширину иллюстрации
height – устанавливает высоту иллюстрации
Ширина и высота может быть задана в пикселях или в
процентах.
ПРИМЕР 17
<IMG src="M:курсHTML природа.jpg" align=“right" width
=600 height = 400>
44
45. РАМКА ВОКРУГ ИЗОБРАЖЕНИЯ
Параметр border тега <IMG> позволяет
задавать толщину рамки вокруг изображения (в
пикселях).
Нулевое значение означает отсутствие рамки.
ПРИМЕР 18
…
<img src="../images/fish.gif“ border="0">
<img src="../images/fish.gif“ border="3">
…
45
46. «ВСПЛЫВАЮЩАЯ ПОДСКАЗКА» ДЛЯ ИЗОБРАЖЕНИЙ
Эффект:
при наведении в документе HTML на изображение курсора, появляется
текстовая «всплывающая подсказка».(эффективно при отключенном
режиме загрузки изображений)
Используется параметр alt для тега <IMG>. Текст подсказки может
содержать любые символы кроме кавычек.
ПРИМЕР 19
…
<IMG src=“../images/fish.gif” alt="рыбка">
<IMG src=“../images/fish1.gif” alt="рыбка">
…
46
47. САМОСТОЯТЕЛЬНАЯ РАБОТА 7
Порядок выполнения работы:
1. Получить номер варианта у преподавателя.
2. Открыть файл с номером вашего варианта.
3. Создать документ HTML в соответствии с
изображением.
4. Сохранить документ HTML с именем файла:
Самостоятельное задание 7, Вариант (ваш
номер варианта).html
47
49. ПРОСТЕЙШАЯ ТАБЛИЦА
В тексте документа HTML определение
таблицы находится между открывающим тегом
<TABLE> и закрывающим тегом </TABLE>.
При этом в таблице:
• строки ограничиваются тегами <TR> </TR>
• столбцы – тегами <TD></TD>
49
51. АТРИБУТЫ ТЕГА <TABLE>
align –определяет выравнивание таблицы
background - растровое графическое
изображение, которое используется в качестве фона
для отображения таблицы
bgcolor - цвет фона для таблицы
border – толщина рамки в пикселях
bordercolor – цвет рамки
width - ширина таблицы в пикселях или в
процентах от ширины окна браузера
51
52. АТРИБУТЫ ТЕГА <TR>
align – определяет выравнивание текста в ячейках
таблицы:
left - слева
center - центр
right - справа
justify – по ширине
valign – параметр определяет выравнивание текста в
ячейке по вертикали:
top – выравнивание по верхней границе
middle – выравнивание по центру
bottom – выравнивание по нижней границе
52
53. АТРИБУТЫ ТЕГА <TD>
Чтобы создать пустую ячейку с рамкой записывают:
<TD> </TD>
align – определяет выравнивание текста в ячейках таблицы:
left - слева
center - центр
right - справа
justify – по ширине
bgcolor – цвет фона для ячейки
colspan – значение параметра определяет количество объединяемых ячеек в столбце
height – высота ячейки в пикселях
rowspan - значение параметра определяет количество объединяемых ячеек в строке
valign – параметр определяет выравнивание текста в ячейке по вертикали:
top – выравнивание по верхней границе
middle – выравнивание по центру
bottom – выравнивание по нижней границе
width – ширина ячейки в пикселях
53
54. ТЕГ <TH>
Используется для обозначения
заголовка таблицы.
Атрибуты аналогичны атрибутам тега <TD>.
54
55. ТЕГ <CAPTION>
Обозначает название таблицы, расположенное над таблицей или под таблицей.
Пример 21.
…
<TABLE> border width = 100%>
<CAPTION align = bottom> Табл.1. Таблица значений</CAPTION>
<TR>
<TD></TD><TD></TD><TD></TD>
</TR>
<TR>
<TD></TD><TD></TD><TD></TD>
</TR>
</TABLE>
…
55
58. 3 . М н о гоя рус н ы е «шапки»
Пример 24.
<HTML>
<HEAD>
<TITLE>Многоярусные шапки</TITLE>
</HEAD>
<BODY>
<TABLE border>
<TR>
<TH colspan = 3>Заголовок для всех столбцов</TH>
</TR>
<TR>
<TH colspan = 2>Столбец 1 и 2 </TH><TH>Столбец 3</TH>
</TR>
<TR>
<TD>000</TD><TD>001</TD><TD>002</TD>
</TR>
<TR>
<TD>010</TD><TD>011</TD><TD>012</TD>
</TR>
<TR>
<TD>100</TD><TD>101</TD><TD>102</TD>
</TR>
</TABLE>
</BODY>
<HTML>
58
59. 5. В ы р а в н и в а н и е текста в ячейках таблицы
Пример 25.
<HTML>
<HEAD>
<TITLE>Выравнивание в ячейках таблицы</TITLE>
</HEAD>
<BODY>
<TABLE border>
<TR>
<TD>
<TH rowspan = 2></TH>
<TH colspan = 3> Тип выравнивания</TH>
</TD>
</TR>
<TR>
<TD>
<TH >По левому краю </TH>
<TH>Центрирование</TH>
<TH>По правому краю</TH>
</TD>
</TR>
<TR>
<TH rowspan = 2>Направление</TH>
<TH>По вертикали</TH>
<TD>Этот текст выровнен по левому краю</TD>
<TD align = center>Этот текст отцентрирован</TD>
<TD align = right> Этот текст выровнен по правому краю</TD>
</TR>
<TR>
<TH>По горизонтали</TH>
<TD vaign = top>Вверху</TD>
<TD align = center>Посередине</TD>
<TD align = right> Этот текст выровнен по правому краю</TD>
<TD valign = bottom align = right>Внизу</TD>
</TR>
</TABLE>
</BODY>
<HTML>
59
