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

1

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

2

ЯЗЫК HTMLHTML (Hypertext Markup Language) – это язык разметки текстового документа для указания формы представления информации, содержащейся в этом документе.

С его помощью можно разместить:Отформатированный текстГрафическое изображение;Таблицы ;Звук;Видео файл.

3

ПРАВИЛА ЯЗЫКА

1. Все команды языка HTML называются тегами;

2. Все теги выделяются символами-ограничителями (“<“ и “>”);

3. Между символами-ограничителями записывается идентификатор тега и его параметр (атрибут);

4. Если есть открывающий тег, то есть и закрывающий;

5. Закрывающий тег записывается так же, как и открывающий, но с символом “/” (слеш);

6. Пара из открывающего и закрывающего тегов называется контейнером.

4

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

Документ HTML

заголовокТело

документа

5

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

Выделяется тегами <HEAD> и </HEAD>.

Содержит следующие теги:

<TITLE> - обозначает название документа, отображаемое в строке заголовка окна браузера

<META> - позволяет присвоить документу следующие атрибуты:

6

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

Сведения об авторах; Название программы, при помощи которой

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

описывающую документ.

7

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

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

name – имя блока дополнительной информации

Пример 1

<HTML>

<HEAD>

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

</HEAD>

8

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

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 – определение цвета страницы, содержащей графическую иллюстрацию

10

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

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

<BODY>

<P> Это первая строка</P>

<P> Это вторая строка</P>

</BODY>

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>

12

САМОСТОЯТЕЛЬНОЕ ЗАДАНИЕ 1

Создать HTML-документ с заголовком: Самостоятельное

задание, с фоном и текстом любого цвета (текст должен быть

читаем).

В документе должно быть 3 строки со следующими данными и

атрибутами:

Строка 1:Число, месяц и год (выравнивание по центру)

Строка 2:Ваша фамилия, имя и отчество (выравнивание по

левому краю)

Строка 3:Отделение, номер группы (выравнивание по правому

краю)

13

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

14

<H1> - заголовки первого уровня

<H2> - заголовки второго уровня

<H3> - заголовки третьего уровня

<H4> - заголовки четвертого уровня

<H5> - заголовки пятого уровня

<H6> - заголовки шестого уровня

Пример 6

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

ТЕГИ ДЛЯ ВЫДЕЛЕНИЯ ЗАГОЛОВКОВ:

15

ТЕГ <BASEFONT>

Тег <BASEFONT> - предназначен для изменения базового размера шрифта, его начертания и цвета

Атрибуты <BASEFONT>:

color – определяет цвет шрифта

size - задает базовый размер шрифта

Возможные значения атрибута SIZE:Значения параметра SIZE

Высота символов, пиксели

1 9

2 10

3 12

4 14

5 18

6 24

7 36

16

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

В качестве значения можно указывать

значения со знаками «+» или «-»

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>

18

ЦВЕТ В ДОКУМЕНТАХ HTMLСимволическое название Цвет

Численное значение

Aqua

Black

Blue

Fuchsia

Gray

Green

Lime

Maroon

Navy

Olive

Purple

Red

Silver

Teal

Yellow

Морская волна

Черный

Голубой

Малиновый

Серый

Зеленый

Салатовый

Темно-красный

Темно-синий

Оливковый

Пурпурный

Красный

Серебряный

#00FFFF

#000000

#0000FF

#FF00FF

#808080

#008000

#00FF00

#800000

#000080

#808000

#800080

#FF0000

#C0C0C0

Темная морская волна #008080

Желтый #FFFF00

White Белый #FFFFFF

19

НАЗНАЧЕНИЕ ЦВЕТА В СТРОКЕ

Пример 8

<P> <FONT color=“#00FF00”> Салатовый цвет</FONT></P>

20

НАЧЕРТАНИЕ ШРИФТА

<B> - выделение полужирным начертанием

<I> - выделение наклонным начертанием (курсив)

<U> - выделение подчеркиванием

<STRIKE> - выделение перечеркиванием

<BIG> - крупные символы

<SMALL> - символы малого размера

<BLINK> - мигающий текст

<SUB> - подстрочный индекс

<SUP> - надстрочный индекс

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>

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>

23


Создать страницу HTML с заголовком Работа с текстом и цветом. Документ

должен содержать:

Строка 1: заголовок первого уровня, выровненный по центру с текстом:

«Подзаголовки на web-странице»

Строка 2: заголовок второго уровня с выравниванием по левой стороне с

текстом : « Если в документе HTML необходимо задать заголовки различных

уровней, то для оформления имеет смысл использовать специальные теги,

которые предназначены для выделения заголовков от первого до шестого

уровня.»

Строка 3: заголовок четвертого уровня, выровненный по правой границе с

фамилией и именем, выполнявшего задание.

Строка 4: заголовок шестого уровня, выровненного по правой стороне, с

настоящей датой (число, месяц, год)

24


Создать HTML документ с заголовком Цвет в документах HTML. Документ должен содержать:

1.Заголовок второго уровня по центру с текстом : Работа с цветным текстом

2.Далее ввести стихотворение посторчно, в котором слова, обозначающие цвет выделить аналогичным цветом

25

СТИХОТВОРЕНИЕ ДЛЯ ЗАДАНИЯ 3Жил осьминог

Со своей осьминожкой,

И было у них осьминожков немножко.

Все они были

Разного цвета:

Первый - зелёный,

Второй - фиолетовый,

Третий - как зебра,

Весь полосатый,

Чёрные оба-

Четвёртый и пятый,

Шестой - тёмно-синий

От носа до ножек,

Жёлтый-прежёлтый -

Седьмой осьминожек,

Восьмой -

Словно спелая ягода,

Красный...

Словом, не дети,

А тюбики с краской.

26


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

27

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

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

Символ Заменяющий его символьный объект

< &lt

> &gt

& &amp

« &quot

28

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

Для включения в документ HTML

горизонтальной разделительной линии

используют тег <HR>.

29

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

align – определяет выравнивание линии:

1.left

2. center

3. right

color – цвет разделительной линии

size – высота разделительной линии в пикселях

width – длина линии (указывается либо в пикселях, либо в процентном отношении от ширины окна)

noshade – плоская линия, без трехмерного выделения тенями.

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>

31

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

32

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

Виды маркеров:

Disk – •

Circle – О

Square - ■

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

33


<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>

34

НУМЕРОВАННЫЙ СПИСОКСоздаются при помощи контейнера: <OL>

</OL>, содержащего в себе абзацы - пункты списка, начинающегося с тега <LI>

Атрибуты тега <OL>:Атрибут Отображаемый символ

Start Начальный номер для списка

Type : Тип нумерации:

A

Заглавными буквами

a

Строчными буквами

I

Заглавными римскими цифрами

i

Прописными римскими цифрами

1 Арабскими цифрами

Compact Список, отображается компактно с уменьшением расстояния между строками

35


<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>

36

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

Для размещения в документе HTML списка

определений каких-либо терминов, используют

теги <DL>, <DT>, <DD>.

37


<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>

38

САМОСТОЯТЕЛЬНОЕ ЗАДАНИЕ 5Создайте HTML документ с именем и заголовком: Работа со

списками1.Ваша ФИ.Документ должен содержать следующий текст:

39


Создайте HTML документ с именем и заголовком:

Работа со списками2.Ваша ФИ

Вариант работы получить у преподавателя.

40

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

41

ФОНОВОЕ ИЗОБРАЖЕНИЕ

Фоновое изображение заполняет собой все пространство элемента для которого

оно задано. ПРИМЕР 14<HTML>

<HEAD><TITLE>Фоновое изображение</TITLE>

</HEAD> <BODY background="../images/текстура.jpg" bgcolor="pink">

<P> <FONT size = +3> Здесь содержание документа</P> </BODY> </HTML>

42

ВСТРАИВАЕМЫЕ ИЗОБРАЖЕНИЯДля размещения на странице изображений используется

тег <IMG> </IMG>, имеющий единственный обязательный

параметр src, определяющий URL-адрес изображения.ПРИМЕР 15.

<HTML><HEAD>

<TITLE>Тег img</TITLE> </HEAD> <BODY>

<IMG src="../images/fish.gif"><P>Остальное содержимое документа</P>

</BODY></HTML>

43

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

Для выравнивания изображения применяют параметр align со значениями left, right, center.

ПРИМЕР 16.

<HTML> <HEAD>

<TITLE>Тег IMG с параметром</TITLE> </HEAD> <BODY>

<IMG src="../images/fish.gif" align="left"> <P>Картинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек.</P>

</BODY> </HTML>

44

РАЗМЕРЫ ИЗОБРАЖЕНИЙ

По умолчанию изображение отображается в браузере в

масштабе 1:1.

Для изменения ее размеров используют атрибуты тега <IMG>:

width – устанавливает ширину иллюстрации

height – устанавливает высоту иллюстрации

Ширина и высота может быть задана в пикселях или в

процентах.

ПРИМЕР 17

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

height = 400>

45

РАМКА ВОКРУГ ИЗОБРАЖЕНИЯ

Параметр border тега <IMG> позволяет задавать толщину рамки вокруг изображения (в пикселях).

Нулевое значение означает отсутствие рамки.ПРИМЕР 18

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

46

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

Эффект:

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

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

ПРИМЕР 19

…

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

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

…

47

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

Порядок выполнения работы:

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

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

3. Создать документ HTML в соответствии с изображением.

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

48

ТАБЛИЦЫ

49

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

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

При этом в таблице:• строки ограничиваются тегами <TR> </TR>• столбцы – тегами <TD></TD>

50

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

51

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

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

52

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

align – определяет выравнивание текста в ячейках таблицы:left - слеваcenter - центрright - справаjustify – по ширине

valign – параметр определяет выравнивание текста в ячейке по вертикали:

top – выравнивание по верхней границе middle – выравнивание по центруbottom – выравнивание по нижней границе

53

АТРИБУТЫ ТЕГА <TD> Чтобы создать пустую ячейку с рамкой записывают:

<TD>&nbsp</TD>

align – определяет выравнивание текста в ячейках таблицы:

left - слева

center - центр

right - справа

justify – по ширине

bgcolor – цвет фона для ячейки

colspan – значение параметра определяет количество объединяемых ячеек в столбце

height – высота ячейки в пикселях

rowspan - значение параметра определяет количество объединяемых ячеек в строке

valign – параметр определяет выравнивание текста в ячейке по вертикали:

top – выравнивание по верхней границе

middle – выравнивание по центру

bottom – выравнивание по нижней границе

width – ширина ячейки в пикселях

54

ТЕГ <TH>

Используется для обозначения

заголовка таблицы.

Атрибуты аналогичны атрибутам тега

<TD>.

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>

…

56

ПРИМЕРЫ ОФОРМЛЕНИЯ ПРОСТЕЙШИХ ТАБЛИЦ

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>100</TD><TD>101</TD><TD>102</TD></TR>

</TABLE></BODY>

<HTML>

57

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

<HTML><HEAD>

<TITLE>Объединение ячеек таблицы</TITLE></HEAD><BODY>

<TABLE border><TR>

<TH>Столбец 1</TH><TH colspan = 2>Столбец 2 и 3</TH></TR><TR>



<TD>100</TD><TD>101</TD><TD>102</TD></TR>

</TABLE></BODY>

<HTML>

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>100</TD><TD>101</TD><TD>102</TD></TR>

</TABLE></BODY>

<HTML>

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>

Education

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