РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ (пояснение)

РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ (продолжение)

748.30K

Категория:

Интернет

Похожие презентации:

Основы языка HTML

Основы HTML - языка

Основы языка HTML

Основы HTML

Основы языка HTML

Основы HTML

Уроки WEB-мастера. Язык HTML

Язык разметки HTML

Язык HTML. Начальные сведения

Введение в web-технологии. Основы HTML. Создание дизайна сайта

Основы языка HTML

1. ОСНОВЫ ЯЗЫКА HTML

2. HTML (HyperText Manipulation Language)

язык, предназначенный для
создания форматированного
текста, который насыщен
изображениями, звуком,
анимацией и ссылками на другие
объекты, например,
гипертекстовые документы,
графические файлы и т.д.,
ОСНОВЫ ЯЗЫКА HTML

3. Тег (Tag)

команда HTML
ОСНОВЫ ЯЗЫКА HTML

4. Тег состоит из следующих элементов:

левой угловой скобки <
необязательного слэша /, который
означает, что тег является
конечным тегом, закрывающим
некоторую структуру
имени тега
необязательных атрибутов
правой угловой скобки >
ОСНОВЫ ЯЗЫКА HTML

5. Парный тег

имеет открывающий тег
<BODY>
закрывающий тег с тем же именем
</BODY>
В таких случаях два тега и часть
документа, отделенная ими,
образуют блок, называемый HTML
элементом
ОСНОВЫ ЯЗЫКА HTML

6. Атрибут тега

относящиеся к тегу уточнения
ОСНОВЫ ЯЗЫКА HTML

7. Спецификация атрибута

имя атрибута, например WIDTH;
знак равенства =;
значение атрибута, которое
задается строкой символов,
например, "80".
ОСНОВЫ ЯЗЫКА HTML

8. ОБЩИЙ ВИД ДОКУМЕНТА HTML

Операция
Начало/конец
документа
Служебная область
документа
Заголовок документа
Служебная
информация
Основная область
документа
Описание в языке
HTML
<HTML>…</HTML>
<HEAD>…</HEAD>
<TITLE>…</TITLE>
Атрибуты
тега
<META>
<BODY>…</BODY>
ОСНОВЫ ЯЗЫКА HTML

9.

<HTML>
<HEAD>Это заглавие</HEAD>
<TITLE>Здесь титул</TITLE>
<META keywords="экономика, математика"
content="text/html; charset="windows-1251">
<BODY>
Это тело страницы
</BODY>
</HTML>
ОСНОВЫ ЯЗЫКА HTML

10. РАЗБИЕНИЕ ТЕКСТА НА СТРОКИ И АБЗАЦЫ

Операция
Конец строки
Описание в языке
HTML
<BR>
Начало/конец абзаца
<P>…</P>
Горизонтальная линия <HR>
Предварительно
отформатированный
текст
<PRE>…</PRE>
ОСНОВЫ ЯЗЫКА HTML

11.

<HTML>
<HEAD>Это заглавие</HEAD>
<TITLE>Здесь титул</TITLE>
<META keywords="экономика,
математика"
content="text/html;
charset="windows-1251">
<BODY>
<BR>
Это тело страницы
<HR>
<PRE>
Предварительно
отформатированный
текст
</PRE>
</BODY>
</HTML>
ОСНОВЫ ЯЗЫКА HTML

12. ЗАГОЛОВКИ

Заголовки
с <H1>…</H1>,
первого по шестой <H2>…</H2>,
уровень
<H3>…</H3>,
<H4>…</H4>,
<H5>…</H5>,
<H6>…</H6>
ОСНОВЫ ЯЗЫКА HTML

13.

<BODY>
<BR>
<H1>Заголовок</H1>
Это тело страницы
<HR>
<PRE>
Предварительно
отформатированный
текст
</PRE>
</BODY>
ОСНОВЫ ЯЗЫКА HTML

14. ВЫРАВНИВАНИЕ ТЕКСТА

Операция
По левому
краю
По правому
краю
По центру
Описание в языке HTML
1. <LEFT>…</LEFT>
2. Атрибут ALIGN=LEFT
1. <RIGHT>…</RIGHT>
2. Атрибут ALIGN=RIGHT
1. <CENTER>…</CENTER>
2. Атрибут ALIGN=CENTER
ОСНОВЫ ЯЗЫКА HTML

15.

<BODY>
<BR>
<LEFT>
Влево
</LEFT>
<BR>
<CENTER>
По центру
</CENTER>
</BODY>
ОСНОВЫ ЯЗЫКА HTML

16. ФОРМАТИРОВАНИЕ ШРИФТОВ

Операция
Полужирный
Курсив
Подчеркнутый
Зачеркнутый
Пишущей машинки
Нижний индекс
Верхний индекс
Описание в языке
HTML
<B>…</B>
<EM>…</EM>
<U>…</U>
<S>…</S>
<TT>…</TT>
<SUB>…</SUB>
<SUP>…</SUP>
ОСНОВЫ ЯЗЫКА HTML

17.

<BODY>
<BR>
<B>Пример</B>
<EM>работы</EM>
<U>с</U>
<S>текстом</S>
<BR>
<TT>
Пишущая машинка
</TT>
<BR>
Что-то
<SUP>Верхний
индекс</SUP>
<BR>
Что-то <SUB>Нижний
индекс</SUB>
</BODY>
ОСНОВЫ ЯЗЫКА HTML

18. РАЗМЕР ШРИФТА

Операция
Размер шрифта по
умолчанию
Изменение размеров
шрифта для отдельных
фрагментов (размер 1
соответствует примерно 8
пт, 2 – пример 10 пт и т.д.)
Описание в языке
HTML
<BASEFONT
SIZE=1…7>
<FONT SIZE=1…7>
…
</FONT>
ОСНОВЫ ЯЗЫКА HTML

19. ГАРНИТУРА И ЦВЕТ ШРИФТА

Операция
Цвет шрифта и
фона для всего
документа
Описание в языке HTML
Атрибуты BGCOLOR и TEXT
тега <BODY>
Атрибуты FACE и COLOR
Гарнитура и
размер шрифта для тега <FONT>
отдельных
фрагментов
ОСНОВЫ ЯЗЫКА HTML

20.

<BODY
BGCOLOR=BLUE
TEXT=YELLOW>
<BR>
Жёлтый текст на
синем фоне
</BODY>
ОСНОВЫ ЯЗЫКА HTML

21.

<BODY>
<BR>
<FONT
FACE=Arial
COLOR=BL
UE>
Синиий Arial
</BODY>
ОСНОВЫ ЯЗЫКА HTML

22. Работа с цветом

“#RRGGBB”, где RR, GG, BB
соответственно интенсивность
красного, зеленого или синего
цветов. Интенсивность задается в
виде двузначного
шестнадцатеричного числа (от 00
до FF).
атрибут COLOR=”НАЗВАНИЕ
ЦВЕТА”
ОСНОВЫ ЯЗЫКА HTML

23. Стандартные цвета

Black (Черный)
= "#000000"
Silver (Серебро)
= "#C0C0C0"
Gray (Серый)
= "#808080"
White (Белый)
= "#FFFFFF"
Maroon (Темно-бордовый) = "#800000"
Red (Красный)
= "#FF0000"
Purple (Фиолетовый)
= "#800080"
Fuchsia (Фуксия)
= "#FF00FF"
ОСНОВЫ ЯЗЫКА HTML

24. Стандартные цвета

Green (Зеленый)
Lime (Известь)
Olive (Оливковый)
Yellow (Желтый)
Navy (Темно-синий)
Blue (Синий)
Teal (Чирок)
Aqua (Аква)
ОСНОВЫ ЯЗЫКА HTML
= "#008000"
= "#00FF00"
= "#808000"
= "#FFFF00"
= "#000080"
= "#0000FF"
= "#008080"
= "#00FFFF"

25. СОЗДАНИЕ СПИСКОВ

Операция
Нумерованный
Маркированный
Элемент нумерованного или
маркированного списка
Список определений
Термин в списке определений
Определение термина в списке
определений
ОСНОВЫ ЯЗЫКА HTML
Описание в языке
HTML
<OL>…</OL>
<UL>…</UL>
<LI>
<DL>…</DL>
<DT>
<DD>

26.

<BR>
Нумерованный
список
<OL>
<LI>Первый
<LI>Второй
<LI>...
</OL>
<BR>
Маркированный
список
<UL>
<LI>Первый
<LI>Второй
<LI>...
</UL>
ОСНОВЫ ЯЗЫКА HTML

27.

<BR>Список
определений
<DL>
<DT>Первый
термин
<DD>Первое
определение
<DT>Второй
термин
<DD>Второе
определение
</DL>
ОСНОВЫ ЯЗЫКА HTML

28. РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ

Операция
Вставка
Описание в языке HTML
<IMG SRC=”URL или относительный
адрес файла”>
Выравнивание
<IMG
ALLIGN={LEFT,
CENTER}>
Отмена
обтекания
<BR CLEAR={RIGHT, LEFT, ALL}>
ОСНОВЫ ЯЗЫКА HTML
RIGHT,

29. РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ (пояснение)

<IMG
SRC=”http://grsu.by/build.gif”>
<IMG SRC=”d:\work\build.jpg”>
ОСНОВЫ ЯЗЫКА HTML

30. РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ (продолжение)

Операция
Выравнивание текста
относительно
изображения
Размер пустых полей
под/над рисунком
Размеры изображения в
пикселах
Тест вместо
изображения
Описание в языке HTML
<IMG ALLIGN={TOP,
BOOTOM, MIDDLE}>
<IMG VSPACE=…,
HSPACE=…>
<IMG HEIGHT=…,
WIDTH=…>
<IMG ALT=”…”>
ОСНОВЫ ЯЗЫКА HTML

31. РАБОТА С ТАБЛИЦАМИ

Операция
Создание
Имя таблицы
Расположение
имени
Строка
Заголовки
столбцов
Данные ячейки
Объединение
ячеек
Описание в языке HTML
<TABLE>…</TABLE>
<CAPTION>…</CAPTION>
<CAPTION ALLIGN={TOP,
BOTTOM}>
<TR>…</TR>
<TH>…</TH>
<TD>…</TD>
Атрибуты COLSPAN, ROWSPAN
тега <TD> или <TH>
ОСНОВЫ ЯЗЫКА HTML

32. СОЗДАНИЕ ССЫЛОК

Операция
Создание ссылок
Задание
файла
ссылки
Задание
цветов
непросмотренных
и просмотренных
ссылок
Описание в языке HTML
<A>…</A>
<A
HREF=”URL
или
относительный адрес файла”>
<BODY LINK=…, VLINK=…>
ОСНОВЫ ЯЗЫКА HTML

33.

<BR>
<A HREF="http://grsu.by">
Гроднеский государственный
университет
</A>
ОСНОВЫ ЯЗЫКА HTML

34. СОЗДАНИЕ ССЫЛОК (продолжение)

Операция
Задание
графического
изображения,
которое является
ссылкой
Описание в языке HTML
<A>
<IMG
SCR=”URL
или
относительный адрес файла”>
</A>
ОСНОВЫ ЯЗЫКА HTML

35.

<A HREF="http:\\yandex.ru">
<IMG SRC="D:\КИТ\Yandex.gif">
</A>
ОСНОВЫ ЯЗЫКА HTML

36. БЕГУЩАЯ СТРОКА

Операция
Описание в языке HTML
Бегущая строка <MARQUEE>…</MARQUEE>
Атрибуты
Ширина поля в пикселах или WIDTH
процентах от ширины окна
Высота поля в пикселах
HEIGHT
Интервалы по горизонтали и HSPACE
вертикали между краями поля VSPACE
строки и основным текстом в
пикселах
Расположение текста в поле
ALIGN={TOP,
строки: вверху, внизу, посередине BOTTOM,
MIDDLE}
ОСНОВЫ ЯЗЫКА HTML

37. БЕГУЩАЯ СТРОКА (продолжение)

Цвет фона
Направление
движения
строки:
слева направо, справа
налево
Способ движения строки:
появляется с одного края,
исчезает за другим,
появляется с одного края,
останавливается у другого,
от одного края до другого
и обратно
BGCOLOR
DIRECTION=
{RIGHT, LEFT}
BEHAVIOR=
{SCROLL,
SLIDE,
ALTERNATE}
ОСНОВЫ ЯЗЫКА HTML

38. БЕГУЩАЯ СТРОКА (окончание)

Число повторений текста в
строке
Строка присутствует все
время на экране
Длина в пикселах, на
которую строка
перемещается за такт
Величина паузы между
отдельными тактами
перемещения текста в
тысячных долях секунды
ОСНОВЫ ЯЗЫКА HTML
LOOP (для
BEHAVIOR=SCROLL)
LOOP=INFINITE
SCROLLAMMOUNT
SCROLLDELAY

39. СОЗДАНИЕ ФРЕЙМОВ

Операция
Описание в языке HTML
Задание фреймов
<FRAMESET>…</FRAMEST>
между тегами </HEAD> и <BODY>
Распределение
Атрибуты COLS (для
раскладки фреймов в
расположенных в ряд фреймов) и
окне и размера каждого ROWS (для фреймов,
фрейма в пикселах или расположенных друг под другом)
процентах от размера
окна
Задание исходных
<FRAME SRC=”URL или
файлов для каждого
относительный адрес файла”>
фрейма
внутри фреймов
<FRAMESET>…</FRAMEST>
ОСНОВЫ ЯЗЫКА HTML

40. Атрибуты фрейма <FRAME>

Атрибуты фрейма <FRAME>
Ширина/цвет разделительной
полосы фрейма
Запрет на изменение
размеров фрейма в браузере
Отображение полос
прокрутки
Величина пустого поля
между верхней или боковыми
границами фрейма и началом
текста в пикселах
BORDER/BORDERCOLOR
NORESIZE
SCROLLING={YES,NO}
MARGINHEIGHT
MARGINWIDTH
ОСНОВЫ ЯЗЫКА HTML

41. Атрибуты фрейма <FRAME> (окончание)

Атрибуты фрейма <FRAME>
(окончание)
Задание имени фрейма
Изменение значения
содержимого одного из
фреймов с помощью
ссылки на другой фрейм
Вставка сообщений для
браузеров, не
поддерживающих
фреймы
NAME
<A HREF=”URL или
относительный адрес файла с
новым содержимым”
TARGET=”имя фрейма,
содержимое которого
изменяется”>
<NOFRAME><BODY>
текст сообщения
</BODY></NOFRAME>
ОСНОВЫ ЯЗЫКА HTML

42. Спасибо за внимание!

ОСНОВЫ ЯЗЫКА HTML

English Русский Правила