Web конструирование на html

WEB-КОНСТРУИРОВАНИЕ НА HTML

1

ЯЗЫК HTML
HTML (Hypertext Markup Language) – это язык
разметки текстового документа для указания
формы представления информации, содержащейся
в этом документе.
С его помощью можно разместить:
Отформатированный текст
Графическое изображение;
Таблицы ;
Звук;
Видео файл.

2

ПРАВИЛА ЯЗЫКА
1. Все команды языка HTML называются тегами;
2. Все теги выделяются символами-ограничителями
(“<“ и “>”);
3. Между символами-ограничителями записывается
идентификатор тега и его параметр (атрибут);
4. Если есть открывающий тег, то есть и закрывающий;
5. Закрывающий тег записывается так же, как и
открывающий, но с символом “/” (слеш);
6. Пара из открывающего и закрывающего тегов
называется контейнером.

3

СТРУКТУРА ДОКУМЕНТА HTML

Документ
HTML

Тело
заголовок
документа

4

ЗАГОЛОВОК ДОКУМЕНТА HTML

Выделяется тегами <HEAD> и </HEAD>.
Содержит следующие теги:
<TITLE> - обозначает название
документа, отображаемое в строке заголовка
окна браузера
<META> - позволяет присвоить документу
следующие атрибуты:

5

 Список ключевых слов, по которым этот
документ будут находить поисковые системы
в Интернете;
 Сведения об авторах;

 Название программы, при помощи которой
этот документ был изготовлен;
 Любую дополнительную
информацию, описывающую документ.

6

АТРИБУТЫ ТЕГА <META>

 content – дополнительная информация, которая
зависит от других атрибутов
 name – имя блока дополнительной информации

Пример 1
<HTML>
<HEAD>
<TITLE>Моя первая страница HTML</TITLE>
</HEAD>

7

ТЕЛО ДОКУМЕНТА HTML
Ограничивается тегами <BODY> и
</BODY>, и отображается во внутренней
области окна браузера.

8

АТРИБУТЫ ТЕГА <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

ВЫРАВНИВАНИЕ СТРОК ТЕКСТА

Строки текста выделяются тегами <P> и </P>
Пример 4
<BODY>
<P> Это первая строка</P>
<P> Это вторая строка</P>
</BODY>

10

АТРИБУТЫ ТЕГА <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

САМОСТОЯТЕЛЬНОЕ ЗАДАНИЕ 1
Создать HTML-документ с заголовком:
Самостоятельное задание, с фоном и текстом любого
цвета (текст должен быть читаем).
В документе должно быть 3 строки со следующими
данными и атрибутами:
Строка 1:Число, месяц и год (выравнивание по центру)
Строка 2:Ваша фамилия, имя и отчество (выравнивание
по левому краю)
Строка 3:Отделение, номер группы (выравнивание по
правому краю)

12

ШРИФТОВОЕ ВЫДЕЛЕНИЕ

13

ТЕГИ ДЛЯ ВЫДЕЛЕНИЯ ЗАГОЛОВКОВ:
<H1> - заголовки первого уровня
<H2> - заголовки второго уровня
<H3> - заголовки третьего уровня
<H4> - заголовки четвертого уровня
<H5> - заголовки пятого уровня
<H6> - заголовки шестого уровня

Пример 6
<H1 align = right> Заголовок первого
уровня, выровненный по правой границе </H1> 14

ТЕГ <BASEFONT>
Тег <BASEFONT> - предназначен для изменения базового размера
шрифта, его начертания и цвета
Атрибуты <BASEFONT>:
color – определяет цвет шрифта
size - задает базовый размер шрифта
Возможные значения атрибута SIZE:

Значения параметра Высота символов,
SIZE пиксели
1 9
2 10
3 12
4 14
5 18
6 24
7 36 15

Тег <FONT> - применяется для изменения
текущего размера относительно базового
значения, заданного тегом <BASEFONT>
В качестве значения можно указывать
значения со знаками «+» или «-»

16

Пример 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

ЦВЕТ В ДОКУМЕНТАХ 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

НАЗНАЧЕНИЕ ЦВЕТА В СТРОКЕ
Пример 8
<P> <FONT color=“#00FF00”> Салатовый
цвет</FONT></P>

19

НАЧЕРТАНИЕ ШРИФТА
<B> - выделение полужирным начертанием
<I> - выделение наклонным начертанием (курсив)
<U> - выделение подчеркиванием
<STRIKE> - выделение перечеркиванием
<BIG> - крупные символы
<SMALL> - символы малого размера
<BLINK> - мигающий текст
<SUB> - подстрочный индекс
<SUP> - надстрочный индекс

20

ПРИМЕР 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

ВЫБОР ШРИФТА ПО ЕГО НАЗВАНИЮ
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

Создать страницу HTML с заголовком Работа с текстом и цветом.
Документ должен содержать:
Строка 1: заголовок первого уровня, выровненный по центру с текстом:
«Подзаголовки на web-странице»
Строка 2: заголовок второго уровня с выравниванием по левой стороне с
текстом : « Если в документе HTML необходимо задать заголовки различных
уровней, то для оформления имеет смысл использовать специальные теги,
которые предназначены для выделения заголовков от первого до шестого
уровня.»
Строка 3: заголовок четвертого уровня, выровненный по правой границе с
фамилией и именем, выполнявшего задание.
Строка 4: заголовок шестого уровня, выровненного по правой стороне, с
настоящей датой (число, месяц, год)

23

Создать HTML документ с заголовком
Цвет в документах HTML. Документ должен
содержать:
1. Заголовок второго уровня по центру с
текстом : Работа с цветным текстом
2. Далее ввести стихотворение
посторчно, в котором
слова, обозначающие цвет выделить
аналогичным цветом

24

СТИХОТВОРЕНИЕ ДЛЯ ЗАДАНИЯ 3
Жил осьминог
Со своей осьминожкой,
И было у них осьминожков немножко.

Все они были
Разного цвета:
Первый - зелѐный,
Второй - фиолетовый,
Третий - как зебра,
Весь полосатый,
Чѐрные оба-
Четвѐртый и пятый,
Шестой - тѐмно-синий
От носа до ножек,
Жѐлтый-прежѐлтый -
Седьмой осьминожек,
Восьмой -
Словно спелая ягода,
Красный...
Словом, не дети,
А тюбики с краской.

25

Создайте HTML документ с заголовком: Радуга.
Текст документа:
К – каждый
О – охотник
Ж – желает
З – знать
Г – где
С – сидит
Ф – фазан.
Каждую букву выделить цветом по названию, сделать
цветной фон, а под тексом документа создать заголовок
первого уровня: РАДУГА, где каждая буква цветная.

26

ВСТАВКА СПЕЦИАЛЬНЫХ СИМВОЛОВ И
СИМВОЛЬНЫХ ОБЪЕКТОВ

В языке HTML определены четыре специальных
символа, которые нельзя вставить в обычный
текст, их необходимо заменить символьными
объектами:
Символ Заменяющий его символьный объект

< &lt
> &gt
& &amp
« &quot

27

РАЗДЕЛЕНИЕ ПАРАГРАФОВ ГОРИЗОНТАЛЬНОЙ
ЛИНИЕЙ

Для включения в документ HTML
горизонтальной разделительной линии
используют тег <HR>.

28

АТРИБУТЫ ТЕГА <HR>
align – определяет выравнивание линии:
1.left
2. center
3. right
color – цвет разделительной линии
size – высота разделительной линии в пикселях
width – длина линии (указывается либо в
пикселях, либо в процентном отношении от
ширины окна)
noshade – плоская линия, без трехмерного
выделения тенями.
29

ПРИМЕР 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

СПИСКИ. ТИПЫ СПИСКОВ

31

МАРКИРОВАННЫЙ СПИСОК

Создаются при помощи контейнера: <UL>
</UL>, содержащего в себе абзацы - пункты
списка, начинающегося с тега <LI>
Виды маркеров:
Disk – •
Circle – О
Square -

32

ПРИМЕР 11
<HTML>
<HEAD>
<TITLE> Ненумерованные списки</TITLE>
</HEAD>
<BODY>
<UL>
<LI> яблоки </LI>
<LI> груши</LI>
<LI> бананы</LI>
</UL>
<UL>
<LI type = disk> апельсины </LI>
<LI type = circle> мандарины </LI>
<LI type = square> лимоны </LI>
</UL>
</BODY>
</HTML>

33

НУМЕРОВАННЫЙ СПИСОК
Создаются при помощи контейнера: <OL>
</OL>, содержащего в себе абзацы - пункты
списка, начинающегося с тега <LI>
Атрибуты тега <OL>:
Атрибут Отображаемый символ
Start Начальный номер для списка
Type : Тип нумерации:
Заглавными буквами
A
Строчными буквами
a
Заглавными римскими цифрами
I
i Прописными римскими цифрами
1 Арабскими цифрами 34

ПРИМЕР 12
<HTML>
<HEAD>
<TITLE> Нумерованные списки</TITLE>
</HEAD>
<BODY>
<OL>
<LI> яблоки </LI>
<LI> груши</LI>
<LI> бананы</LI>
</OL>
<OL type = a>
<LI > апельсины </LI>
<LI> мандарины </LI>
<LI > лимоны </LI>
</OL>
</BODY>
</HTML>

35

СПИСОК ОПРЕДЕЛЕНИЙ

Для размещения в документе HTML списка
определений каких-либо терминов, используют
теги <DL>, <DT>, <DD>.

36

ПРИМЕР 13
<HTML>
<HEAD>
<TITLE> Список определений</TITLE>
</HEAD>
<BODY>
<DL>
<DT><B>HTTP</B></DT>
<DD> Протокол передачи гипертекста</DD>
<DT> <B> HTML</B> </DT>
<DD>Язык разметки гипертекста</DD>
</DL>
<DL COMPACT>
<DT>А </DT>
<DD>Первая буква алфавита </DD>
<DT>Б </DT>
<DD>Вторая буква алфавита </DD>
<DT>В </DT>
<DD>Третья буква алфавита </DD>
</DL>
</BODY>
</HTML>
37

Создайте HTML документ с именем и заголовком: Работа со
списками1.Ваша ФИ.
Документ должен содержать следующий текст:

38

Создайте HTML документ с именем и заголовком:
Работа со списками2.Ваша ФИ
Вариант работы получить у преподавателя.

39

ГРАФИКА В ДОКУМЕНТАХ HTML

40

ФОНОВОЕ ИЗОБРАЖЕНИЕ
Фоновое изображение заполняет собой все пространство элемента для которого
оно задано.
ПРИМЕР 14
<HTML>
<HEAD>
<TITLE>Фоновое изображение</TITLE>
</HEAD>
<BODY background="../images/текстура.jpg" bgcolor="pink">
<P> <FONT size = +3> Здесь содержание документа</P>
</BODY>
</HTML>

41

ВСТРАИВАЕМЫЕ ИЗОБРАЖЕНИЯ
Для размещения на странице изображений используется
тег <IMG> </IMG>, имеющий единственный обязательный
параметр src, определяющий URL-адрес изображения.
ПРИМЕР 15.
<HTML>
<HEAD>
<TITLE>Тег img</TITLE>
</HEAD>
<BODY>
<IMG src="../images/fish.gif">
<P>Остальное содержимое документа</P>
</BODY>
</HTML>

42

ВЫРАВНИВАНИЕ ИЗОБРАЖЕНИЯ В ДОКУМЕНТЕ

Для выравнивания изображения применяют параметр
align со значениями left, right, center.
ПРИМЕР 16.
<HTML>
<HEAD>
<TITLE>Тег IMG с параметром</TITLE>
</HEAD>
<BODY>
<IMG src="../images/fish.gif" align="left">
<P>Картинка слева, а текст обтекает ее справа и этот текст может
занимать несколько строчек.</P>
</BODY>
</HTML>

43

РАЗМЕРЫ ИЗОБРАЖЕНИЙ
По умолчанию изображение отображается в браузере в
масштабе 1:1.
Для изменения ее размеров используют атрибуты тега
<IMG>:
width – устанавливает ширину иллюстрации
height – устанавливает высоту иллюстрации
Ширина и высота может быть задана в пикселях или в
процентах.
ПРИМЕР 17

<IMG src="M:курсHTML природа.jpg" align=“right" width
=600 height = 400>

44

РАМКА ВОКРУГ ИЗОБРАЖЕНИЯ
Параметр border тега <IMG> позволяет
задавать толщину рамки вокруг изображения (в
пикселях).
Нулевое значение означает отсутствие рамки.
ПРИМЕР 18

…
<img src="../images/fish.gif“ border="0">
<img src="../images/fish.gif“ border="3">
…

45

«ВСПЛЫВАЮЩАЯ ПОДСКАЗКА» ДЛЯ ИЗОБРАЖЕНИЙ

Эффект:
при наведении в документе HTML на изображение курсора, появляется
текстовая «всплывающая подсказка».(эффективно при отключенном
режиме загрузки изображений)

Используется параметр alt для тега <IMG>. Текст подсказки может
содержать любые символы кроме кавычек.
ПРИМЕР 19

…

<IMG src=“../images/fish.gif” alt="рыбка">

<IMG src=“../images/fish1.gif” alt="рыбка">

…

46

САМОСТОЯТЕЛЬНАЯ РАБОТА 7

Порядок выполнения работы:
1. Получить номер варианта у преподавателя.

2. Открыть файл с номером вашего варианта.

3. Создать документ HTML в соответствии с
изображением.
4. Сохранить документ HTML с именем файла:
Самостоятельное задание 7, Вариант (ваш
номер варианта).html

47

ПРОСТЕЙШАЯ ТАБЛИЦА

В тексте документа HTML определение
таблицы находится между открывающим тегом
<TABLE> и закрывающим тегом </TABLE>.
При этом в таблице:
• строки ограничиваются тегами <TR> </TR>
• столбцы – тегами <TD></TD>

49

ПРИМЕР 20
<HTML>
<HEAD>
<TITLE> Простейшая таблица </TITLE>
</HEAD>
<BODY>
<TABLE>
<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> 50

АТРИБУТЫ ТЕГА <TABLE>

align –определяет выравнивание таблицы
background - растровое графическое
изображение, которое используется в качестве фона
для отображения таблицы
bgcolor - цвет фона для таблицы
border – толщина рамки в пикселях
bordercolor – цвет рамки
width - ширина таблицы в пикселях или в
процентах от ширины окна браузера

51

АТРИБУТЫ ТЕГА <TR>
align – определяет выравнивание текста в ячейках
таблицы:
left - слева
center - центр
right - справа
justify – по ширине
valign – параметр определяет выравнивание текста в
ячейке по вертикали:
top – выравнивание по верхней границе
middle – выравнивание по центру
bottom – выравнивание по нижней границе

52

АТРИБУТЫ ТЕГА <TD>
Чтобы создать пустую ячейку с рамкой записывают:
<TD>&nbsp</TD>
align – определяет выравнивание текста в ячейках таблицы:
left - слева
center - центр
right - справа
justify – по ширине
bgcolor – цвет фона для ячейки
colspan – значение параметра определяет количество объединяемых ячеек в столбце
height – высота ячейки в пикселях
rowspan - значение параметра определяет количество объединяемых ячеек в строке
valign – параметр определяет выравнивание текста в ячейке по вертикали:
top – выравнивание по верхней границе
middle – выравнивание по центру
bottom – выравнивание по нижней границе
width – ширина ячейки в пикселях
53

ТЕГ <TH>

Используется для обозначения
заголовка таблицы.
Атрибуты аналогичны атрибутам тега <TD>.

54

ТЕГ <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

ПРИМЕРЫ ОФОРМЛЕНИЯ ПРОСТЕЙШИХ ТАБЛИЦ
1. Таблицы с заголовками столбцов и строк
Пример 22
<HTML>
<HEAD>
<TITLE>Таблица с заголовком</TITLE>
</HEAD>
<BODY>
<TABLE border>
<TR>
<TH>Столбец 1</TH><TH>Столбец 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> 56

2. Объединение ячеек таблицы
Пример 23.

<HTML>
<HEAD>
<TITLE>Объединение ячеек таблицы</TITLE>
</HEAD>
<BODY>
<TABLE border>
<TR>
<TH>Столбец 1</TH><TH colspan = 2>Столбец 2 и
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>

57

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

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

Web конструирование на html

More Related Content

Similar to Web конструирование на html (20)

Web конструирование на html