Академический Документы
Профессиональный Документы
Культура Документы
Информатика 7 New
Информатика 7 New
И ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ
7-КЛАСС
1
ИНФОРМАТИКА
И ИНФОРМАЦИОННЫЕ
ТЕХНОЛОГИИ
7 КЛАСС
Учебник для 7 класса общеобразовательной школы
Республики Узбекистан
ТАШКЕНТ – 2023
2
Соловьёв К.В. Файзиева М.Р., Сайфуров Д.М.,
УДК 000(000) Атамуратов Р.К., Тиловова М.М., Багбекова Л.К.
КБК 00000000 Информатика и информационные технологии:
И-00 учебник для 7 класса - Ташкент:
Перевод: Республиканский образовательный центр, 2023. - 160 с.
УСЛОВНЫЕ ЗНАКИ
Это Вы знаете?
Запомнить!
ш Внимание!
scan me
ДОБРАТЬСЯ К ЦИФРОВЫМ РЕСУРСАМ
ВНИМАНИЕ!
...НА УЗБЕКСКОМ ЯЗЫКЕ
( dr.rtm.uz
- - L....:'1t=-----====='
Издана за счет Республиканского целевого книжного фонда.
ਣɳਡਢਡ.ਪਤɯਫਬਡਢɳਤਧɲਤ ਣɳਡਢਡ...ਬਤਭਧਨɳਨਣɲɲ
ɲਧɵਨਪਦਡɶɲɲਧਡਞਨਦɼɾਬਤਪਤ ਡਧɲਦਡɶɲɲ ɲ
ɴਲʇਲਯʃਲ਼ʌਮʁʈਯʊʆਯʆʊʍਲʉਮʎʆʆ ɴਲʇʊʗʌʆਯਮʊʆʉਮʎʆʆʆਯਯʁʆʃʓ
ʊਮʇʉʋʔʖʌਯਲਯ
ɴਲʇʊʗʌʆਯਮʊʆʉਮʎʆʆʆਯਯ
ɴਲʇਨਲ਼ʏਯʌʊʓਵਲ਼ʆਲ਼ʌਯʉਮਵ ʁʅʉʄʊਲ਼ʌʆ
ɴਲʇਯਲਯʁʃʏʆਲ਼ਯʈʆʅʃʊਰ ɴਲʇɲʊʌਯਲʍਯਰਲ਼ʆʋਮʊਯʈʔʆʊਲ਼ʌਲʉਯʊʌʁ
ਲ਼ʆਲ਼ʌਯʉʓਲ਼ʏʆਲ਼ʈਯʊʆʗʁʃਲʂʖਲ਼ʆਲ਼ʌਯʉ &ITGJ&SNRFYJ
ਲ਼ʏʆਲ਼ʈਯʊʆʗ
ɴਲʇਢʓʋʈʊਯʊʆਯਮਲʆʍʉਯʌʆʏਯਲ਼ʇʆਵ ɴਲʇਫʅʃਮʊʆਯʆਲਯʃਮʇʌʆਲʁਮʊʆਯ
ʋਯਲਮʎʆਰʁਲਮʅʈʆʏʊʓਵਲ਼ʆਲ਼ʌਯʉਮਵਲ਼ʏਯʌਮ ʆʅʀਲਮʄਯʊʆਰʁ&ITGJ&SNRFYJ
ɴਲʇɲʅʉਯਲਯʊʆਯʀʒਯʉਮʆʊʍਲʉਮʎʆʆ
ɴਲʇਢ$GREH$QLPDWHਲਮʀʌਮਲ਼
ɴਲʇਞʃʆਲʁਮʊʆਯʌਯʇਲ਼ʌʁਰ ਲ਼ʈʗʉʆ
ʆʊʍਲʉਮʎʆʆ
ɴਲʇʆўਫʅʃਮʊʆਯਲਮʅʈʆʏʊʓਵ
ɴਲʇਞʃʆਲʁਮʊʆਯʂਲਮʍʆʏਯਲ਼ʇਰ
ʆʊʍਲʉਮʎʆʆ ਮʊʆʉਮʎʆਰʁ&ITGJ&SNRFYJ
ɴਲʇਡʃʆʆʁʆʃਯʆʊʍਲʉਮʎʆʗ ਞʊʌਲʈʔʊਮʗਲਮʀʌਮ
ɴਲʇਞ
ϫϯʃʆਲʁਮʊʆਯ
ɴਲʇਞ
ਞʊʌਲʈʔʊਮʗਲਮʀʌਮ
ਣɳਡਢਡ..ਨɮਪਡɮਨਬਞਡ ਣɳਡਢਡ.;ਬਤਭਧਨɳਨਣɲɿ<<<
ਣਪਡɵɲɷਤਫਞਨਥɲਧɵਨਪਦਡɶɲɲ ɲɿɱɻਞ-921
ɴਲʇਞʉʋʔʖʌਯਲʊਮʗʂਲਮʍʆʇਮʆਯਯ ɴਲʇਨਲ਼ʊʁʓʁਯʀʌਯਵʊʈʂʆਰ
ʁʆʃʓ ϠϨϼϫ-921
ɴਲʇɶʁਯʌʁʓਯʉʃਯʈʆʆʍਲʉਮʌ ɴਲʇɵʊʁਯʀਲ਼ʌਲਮʊʆʎʆਲਮʀʌਮਲ਼
ʂਲਮʍʆʇʆ
ʌਯʇਲ਼ʌਮʉʆ
ɴਲʇਞʉʋʔʖʌਯਲʊਮʗʂਲਮʍʆʇਮʆਯਯ
ʁʆʃʓ ɴਲʇਪਮʅʉਯʑਯʊʆਯਲ਼ʋʆਲ਼ʇਮʆ
ʆʅʀਲਮʄਯʊʆਰʊਮʁਯʀਲ਼ʌਲਮʊʆʎਯ
ɴਲʇɲʊʌਯਲʍਯਰਲ਼ʋਲʂਲਮʉʉʓ
5MTYTXMTUʆʋਮʊਯʈʔʆʊਲ਼ʌਲʉਯʊʌʁ ɴਲʇਢਲ਼ʌਲਮʆʁਮʊʆਯʌਮʀʈʆʏʊʓਵʃਮʊʊʓਵ
ʊਮʁਯʀਲ਼ʌਲਮʊʆʎ
ɴਲʇਢʓʀਲʀʈਮਲ਼ʌʆʆʅʀਲਮʄਯʊʆʗ
ʉਯʌʃʓʇਮʃਲʆਲʁਮʊʆʗʆʇਲਮʐʆʁਮʊʆʗ ɴਲʇਪਮʅʉਯʑਯʊʆਯʍਲʉʊਮʁਯʀ
ɴਲʇਪਮʀʌਮਲ਼ਲ਼ʈʗʉʆ ਲ਼ʌਲਮʊʆʎਯ
ɴਲʇਞ ਞʊʌਲʈʔʊਮʗਲਮʀʌਮ ɴਲʇਢਲ਼ʌਲਮʆʁਮʊʆਯʂʆʋਯਲਲ਼ਲ਼ʓʈʇʆ
ਲਯʇʌʊਮʗਲਮʀʌਮ ʍਲਯਰʉʁʊਮʁਯʀਲ਼ʌਲਮʊʆʎ
ɴਲʇਪਮʀʌਮਲ਼ʌਯʇਲ਼ʌਮʉʆ ɴਲʇਪਮʅʉਯʑਯʊʆਯਮʃʆʆʁʆʃਯʊਮ
ʁਯʀਲ਼ʌਲਮʊʆʎਯ
ɴਲʇਲਮʇʌʆʏਯਲ਼ʇਮʗਲਮʀʌਮ
ਫʅʃਮʊʆਯʃʆʅਮਰʊਮਲ਼ʌਲਮʊʆʎʓ ਞʊʌਲʈʔʊਮʗਲਮʀʌਮ
ɴਲʇਞ
ɲਲ਼ʋʈʔʅʁਮʊʊਮʗʈʆʌਯਲਮʌਲਮ
ГЛАВА I.
4
ПРЕДСТАВЛЕНИЕ ИНФОРМАЦИИ НА
КОМПЬЮТЕРЕ
ИНСТРУМЕНТЫ
вы научитесь определять коды
символов в таблицах ASCII и Unicode.
Диада, триада, тетрада, таблицы ASCII,
Unicode
ИНФОРМАЦИОННЫЕ ПРОЦЕССЫ
Действия, осуществляемые с информацией, называются информационными
процессами. Такие процессы, как получение, передача, хранение и обработка
информации, отличаются друг от друга. Действия на компьютере
выполняются посредством информационных процессов.
Устройства ввода преобразуют информацию в сигнал или двоичный код, а
устройства вывода преобразуют информацию в сигнал или двоичный код,
готовый к приему.
5
ПРИЕМ ПЕРЕДАЧА
►
Входящая
. ~ // ~ ►
'-•i
информация Исходящая
информация
ХРАНЕНИЕ
'G)
. ✓
ф ,;- ..,..,- •
-~ - ~
---..........,J
Устройства памяти Устройства хранения информации
ОБРАБОТКА
Процессор
ВНИМАНИЕ
ш
Информация передается от источника в виде сигнала к получателю
информации по информационному каналу. Источником информации и
получателем может быть человек или техническое устройство.
ОСНОВНЫЕ ПОНЯТИЯ
(Аналоговый вид )
' ( Аналоговые
устройства )
. -
"-п'!
•
(Дискретный вид )
n
( Цифровые
устройства ) ~
0100000111010011110000110001100
0100000111111110101101000111010
выражение информации через
цифры 0 и 1.
Информация – это
разнообразные сведения, 12345
87890
получаемая из окружающей
среды через органы чувств
человека.
Числовая информация Графическая информация
ПРАКТИЧЕСКАЯ РАБОТА
a) s)
e)
8 ГЛАВА I.
ПРЕДСТАВЛЕНИЕ ИНФОРМАЦИИ НА
КОМПЬЮТЕРЕ
'
Процесс передачи Пример Источник Приемник i
информации
человек → человек
lJ информации
- 1
информации
-
человек → техника J
'
техника → человек
J
техника → техника
'
1 J J l _J
Какие еще случаи можно добавить? Объясните свои ответы.
ВОПРОСЫ ПО ТЕМЕ
ш
?
1. В каких формах человек получает информацию? Как насчет компьютеров?
Приведите примеры форм информации.
2. Что вы знаете об информационных процессах?
3. Приведите пример процессов обмена информацией между людьми. На примере
объясните функции источника информации, канала передачи и приемника.
ДОМАШНЕЕ ЗАДАНИЕ
ТЫ ЗНАЕШЬ ЭТО?
Информация, отображаемая на экране монитора, отражается в памяти
компьютера в виде двоичного кода (двоичный код, принятие одного из
двух состояний). Числовые системы являются типом кодирования
информации. При написании текста на компьютере полезны методы
кодирования в двоичной, десятичной, шестнадцатеричной системах
счисления.
2
ОСНОВНЫЕ ПОНЯТИЯ
4
Числовая система — это система присвоения чисел,
основанная на определенных правилах.
Основанием системы счисления - является общее
количество цифр в системе счисления.
Ранг числа (номер) – это позиция цифры в данном числе. Пятеричная
система счета
ИСТОРИЧЕСКИЕ ДАННЫЕ
В разные периоды числа выражались символом или системой символов
00
для выполнения арифметических операций. Завязывание узлов на веревке
и маркировка камней и досок — первое появление системы счисления.
Счет с помощью пальцев создал основу для развития системы счисления
пятерок, десятков, двенадцати и двадцати. У ряда африканских племен, а
также в Китае уже много лет используется пятизначная система
нумерации.
В древнеегипетской десятичной системе числа выражались последовательной
записью чисел. Если цифры выпадают более 9 раз, она проходит в
следующий раунд. Для каждого класса использовались картинки с
определенным содержанием.
о 2 3 4
@ · •••••••••
-----
5
10
6 7
• • ••••••••
11 12
8 9
13 14
15 16 17 18 19
ВНИМАНИЕ
ш
Символы, обозначающие числа , называются цифрами. Например, возьмем
число 25, видно, что здесь задействованы два числа (символа) - 2 и 5.
Все числа в системе счисления, составляют алфавит системы счисления.
Числа являются элементами алфавита, а общее количество цифр считается
основанием (силой) системы счисления.
Например, элементы алфавита десятичной системы счисления: 0, 1, 2, 3, 4,
5, 6, 7, 8, 9; лементы алфавита римскими цифрами: I, V, X, L, C, D, M.
Основание числа, выраженное в системе счисления, записывается в его
нижнем индексе. Например: 11012 означает, что число записано в двоичной
системе счисления.
Определим основание системы счисления как p . Если оно меньше десяти,
т . е. p < 10, то в качестве чисел используются числа от 0 до p–1 алфавита
десятичной системы счисления. Если основание системы счисления больше
десяти, т . е. p > 10, то числа от 0 до 9 и дополнительные символы, как
правило, буквы латинского алфавита A, B, C, D, E, F.
ВНИМАНИЕ
Для представления заданных чисел в системе счисления используются ш
только буквенные элементы, присутствующие в алфавите этой системы
счисления.
Например, в двоичной системе счисления числа представлены только
0 и 1: 11012, 1110101112.
ПРАКТИЧЕСКАЯ РАБОТА
ϑϦϹϦϮϩϦ
3 [1 + 6 [0 = 30
Упражнение 1. Число, данное в 3 [ + 6 1=30
десятичной системе, равно 30. Если
это число равно 36 в другой системе 3 [ 24
счисления, определите основание х=8
неизвестной системы счисления.
Решение:
Неизвестное основание обозначается
как x . Число 30 в десятичной системе
Ответ: Основание неизвестной
счисления равно числу в системе
системы счисления равно 8.
счисления x : 3010 = 36X
а) б) в) -,11 - . '_,,,,, г)
Fff
12 ГЛАВА I.
ПРЕДСТАВЛЕНИЕ ИНФОРМАЦИИ НА
КОМПЬЮТЕРЕ
1 1 1
ВОПРОСЫ ПО ТЕМЕ
ш
1. Дайте информацию об основании системы счисления и понятиях числа и цифры.
2. Объясните примерами использования систем счисления 5, 10, 12, 20.
3. Возьмите систему счисления и опишите основу и элементы системы счисления.
4. Запишите самое маленькое и самое большое 4-значное число в десятичной
системе счисления.
5. Приведите примеры позиционных и не позиционных систем счисления.
6. В какой системе счисления работает компьютер?
ДОМАШНЕЕ ЗАДАНИЕ
ТЫ ЗНАЕШЬ ЭТО?
Вся информация в памяти компьютера хранится в двоичной системе
счисления. Компьютерные программы, написанные в шестнадцатеричном
формате, преобразуются в двоичные с помощью специальных программ-
компиляторов и отправляются на центральный процессор для выполнения.
Специальные методы кодирования используются для преобразования чисел
из одной системы счисления в другую систему счисления.
Упражнение 1. Запишите последовательно числа в двоичной, четверной,
восьмеричной, десятичной, шестнадцатеричной системах счисления.
Решение:
ϡЀ 10 11 100
ϡЀ
ϡЀ
ϡЀ
МЕТОД КОДИРОВАНИЯυωρυρύω
Метод диадного кодирования используется для
Таблица диадного кодирования
преобразования числа из двоичного в четверичное и
наоборот, из четверичного в двоичное. Количество цифр, Четверичное Двоичное
образуемых в двоичной системе счисления, называется 0 00
длиной кода и обозначается i. Количество состояний
1 01
кодирования равно количеству цифр (элементов
алфавита) и обозначается N. 2 10
3 11
ВНИМАНИЕ
ш При представлении произвольных символов 0 и 1
количество цифр связано с длиной кода по
следующей формуле: N = 2i
Здесь N — количество закодированных чисел (состояние, символ, сигнал);
i — длина кода.
14
ГЛАВА I.
7528 ='--,----)
111101 0102. Ответ: 1111010102.
'--т--1 '--,----)
МЕТОД КОДИРОВАНИЯ ТЕТРАДАМИ
ВНИМАНИЕ
---- ш
Упражнение 4. 18610 = ?2
Вид 2:
σϩϥ 1: ͚ 186 2
186 ͚ 93 2
186 : 2 = 93 (0 остатка) 0 92 ͚ 46 2
93 : 2 = 46 (1 остаток) 1 46 ͚ 23 2
46 : 2 = 23 (0 остатка) 0 22 ͚ 11 2
23 : 2 = 11 (1 остаток) 1 10 ͚ 5 2
2
11 : 2 = 5 (1 остаток) 1 4 ͚ 2
2 1
5 : 2 = 2 (1 остаток) 1
0
2 : 2 = 1 (0 остаток)
Ответ: 18610 = 101110102 .
ЗАПОМНИТЬ!
Десятичная система счисления действует как мост при переводе чисел из
одной системы счисления в другую. То есть: 1) для перевода чисел из
одной системы счисления в другую систему счисления данное число
сначала переводится в десятичную систему счисления; 2) число в
десятичной системе счисления переводится в переводимую систему
счисления.
16 ГЛАВА I.
ПРЕДСТАВЛЕНИЕ ИНФОРМАЦИИ НА
КОМПЬЮТЕРЕ
ПРАКТИЧЕСКАЯ РАБОТА
Классная работа
ρϬϵϡϣϩϳϲϩϲϳϦϭϼϲϸϩϲϬϦϮϩЀϲϯϲϳϯϩϳϩϨϢϴϫϣ$%&'(ϩϷϩϵϱ ψϡϫϯϥ
ϩϱϴϪϳϦϾϬϦϭϦϮϳϼϡϬϵϡϣϩϳϡϣϥϣϯϩϸϮϯϪϲϩϲϳϦϭϦϲϸϩϲϬϦϮϩЀϏϰϱϦϥϦϬϩϳϦϥϬϩϮ
ϴϫϯϥϡϣϥϣϯϩϸϮϯϪ ϲϩϲϳϦϭϦϲϸϩϲϬϦϮϩЀ
ВОПРОСЫ ПО ТЕМЕ
ш
1. В каких случаях необходимо переводить числа из одной системы
счисления в другую систему счисления?
СЛОЖЕНИЕ
Сложение чисел в двоичной системе счисления осуществляется
0+0=0 на основании данной таблицы, аналогично правилам сложения
чисел в десятичной системе счисления. Для выполнения расчета
0+1=1 соответствующие разряды заданных сумматоров складываются
справа налево. Если результат в текущем разряде превышает
1+0=1
десять, к текущему разряду прибавляется разряд единицы, а к
1 + 1 = 10 одному старшему разряду прибавляется десятичный разряд.
18 ГЛАВА I.
ПРЕДСТАВЛЕНИЕ ИНФОРМАЦИИ НА
КОМПЬЮТЕРЕ
Например,
В десятичной системе счисления: В двоичной системе счисления:
1 1
+ 111
10
70 1001
Даже к действительным числам в двоичной системе счисления добавляются
соответствующие разряды по вышеизложенным правилам.
11 11
1110
+ + 1 1 1, 1 0 1
1011 1,
11001
ВЫЧИТАНИЕ В ДВОИЧНОЙ СИСТЕМЕ СЧИСЛЕНИЙ
Вычитание чисел в двоичной системе также выполняется на основе
заданной таблицы вычитания аналогично вычитанию чисел в десятичной
системе:
ВЫЧИТАНИЕ
Пример 3. 110112 – 1012 = ?2 Пример 4. 1010,012 – 1,0012 = ?2
0–0=0
V V
1–0=1
1 1 011 1 0 1 0, 0 1 0
1–1=0 – 101 – 1, 0 0 1
10 – 1 = 1 1 0 110 1 0 0 1, 0 0 1
0 0 0 0 0 0 0 1 1 1 1 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
ПРАКТИЧЕСКАЯ РАБОТА
2. Рассчитать:
а)11112+ 2468 + 8D16 в) 6115 + E98 – 100114
б) 57812 ∙ 112 –3547 г) 1AB16∙ 226 – 8610
ВОПРОСЫ ПО ТЕМЕ
ш
1. На что следует обратить внимание при выполнении арифметических
действий над числами в разных системах счета?
2. Описать арифметические действия, выполняемые над числами в двоичной
системе счисления.
3. Каким образом целые и действительные числа представлены в памяти
компьютера?
ДОМАШНЕЕ ЗАДАНИЕ
ТЫ ЗНАЕШЬ ЭТО?
ОСНОВНЫЕ ПОНЯТИЯ 27 26 25 24 23 22 21 20
0 1 0 0 0 0 0 1
Бит ( двоичная цифра ) — 1 1
1 байт
22 ГЛАВА I.
ПРЕДСТАВЛЕНИЕ ИНФОРМАЦИИ НА
КОМПЬЮТЕРЕ
N = 2j .
ВНИМАНИЕ
ш
Согласно формуле 256 = 28, то есть для представления 256 символов
требуется 8 бит длины кода.
Не всегда возможно выразить количество символов в алфавите в
степени двойки. Согласно формуле Хартли, если кодируемые сигналы, то
есть количество символов в алфавите, не представлены степенями
двойки, формула приводится к виду следующего неравенства:
2i-1 < N ≤ 2i
СВЕТИЛЬНАЯ ДОСКА
РАЗМЕР ФАЙЛА
Размер файла выражается в байтах и
более крупных единицах информации. ОСНОВНЫЕ ПОНЯТИЯ
оо.от
контекстном меню.
6. В появившемся диалоговом окне «Свойства» ок о-
v=I/t
l – объем информации;
t – время передачи.
ПРАКТИЧЕСКАЯ РАБОТА
Расширение файла
Адрес хранения
Размер файла
Общее время
ВОПРОСЫ ПО ТЕМЕ
ш
1. Охарактеризуйте единицы измерения информации.
ДОМАШНЕЕ ЗАДАНИЕ
ОСНОВНЫЕ ПОНЯТИЯ
33 161 193 i
01 SOH (Slart of Header)
.1 65 А
в
97 а
ь
129 Б
в
6 225 с
-1
02 sтх (Slart of Text) 34 66 98 130 162 в 194 226 т
03 ЕТХ (End ОfТОХ!) 35 # 67 с 99 с 131 г 163 г 195 227 у
04 ЕОТ (Елd ofТrans.) 36 $ 68 D 100 d 132 д 164 д 196 228 ф
05 ENQ (Enqulry) 37 о/о 69 Е 101 е 133 Е 165 е 197 + 229 х
06 АСК (Acl<nowtedgomont) 38 & 70 F 102 f 134 ж 166 ж 198 11 230 ц
07 BEL (Bell) 39 71 G 103 g 135 3 167 з 199 А 231 ч
н
к
08 BS (Вackspaco) 40 ( 72 104 h 136 и 168 и 200
. 1!, 232 ш
09 нт (Horizontal ТаЬ) 41 ) 73 1 105 1 137 й 169 к 201 233 т
10 LF (Llne feed) 42 74 J 106 1 138 к 170 л 202 234 ъ
к
i
11 vт (Vвttical ТаЬ) 43 + 75 107 k 139 л 171 :м 203 235 Ъ1
I
(Dcvico control t) q [)
18
19
20
DC2
DСЗ
DC4
(Dcvlco control 2)
(Dcvlco control З)
(Devico control 4)
50
51
52
2
3
4
82
83
84
R
s
т
114
115
116
r
s
t
146
147
148
т
у
ф
178
179
180
210
211
212
�
!:
�
242
243
244
-,
•/4
-
]
25 ЕМ (End of mcdlum) 57 9 89 у 121 у 153 щ 185 217 249
z
1
26 SUB (SuЬstrtuto) 58 : 90 122 z 154 ъ 186 218 250
27 ESC 59 91 123 155 ы 187 219 251
•'
(Escapo) : '
]
[ {
28 FS (Filo soparator) 60 < 92 1 124 1 156 ь 188 220 252 •
= э
•
29 GS (Group soparator) 61 93 ] 125 ) 157 189 \t 221 • 253 •
30
31
RS
us
(Rooord separa10t)
(Unit scparator)
62
63
>
?
94
95
А
-
126 - 158
159
ю
я
190
191
'-
,
222
223 •1 254
255 nbsp
127 DEL (Dolote) 1
- -
27
Решение:
н 172 10101100
и 168 10101000
г 163 10100011
R V в u F
а 160 10100000
S'1ift
+ ~ н и А
Ответ: 1000101010101100101010001010001110100000
ЗАПОМНИТЬ!
•
:/:=
In � + 00 µ
APYfHe umeonbl ...
0',
ПРАКТИЧЕСКАЯ РАБОТА
ДОМАШНЕЕ ЗАДАНИЕ
1. Закодируйте следующие тексты в двоичном формате, используя таблицу
кодировки символов ASCII:
Hardware; Software; Brainware.
2. Создать таблицу кодирования русских букв на основе кириллического
алфавита. Определите мощность алфавита, символы и длину кода для
табулирования. Кодируйте каждый символ в двоичном, десятичном и
шестнадцатеричном виде.
3. Подготовьте дополнительную информацию о таблице кодировки символов
UTF-8.
••
i~
1 ..
••
·=
•
•••
....
••••••
-~····· ----···~···
••••••
31
•
основа черная. При добавлении определенного количества
этих трех цветов получаются другие цвета. Когда красный,
зеленый и синий полностью соединяются, получается
RGB-модель белый цвет.
0 0 0 000 Черный
0 0 1 001 Синий
0 1 0 010 Зеленый
0 1 1 011 Циан
1 0 0 100 Красный
1 0 1 101 Розовый
1 1 0 110 Коричневый
Упражнение 2. Решение:
Размеры 640 × 480
Пиксельное изображение 24<24≤25
представлено 24 различными
i=5
цветами. Вычислить
I = 640 * 480 * 5 = 1 536 000 бит = 192 000 bt = 187,5 Кб.
информационный размер
изображения. Ответ: 187,5 Кб.
32 ГЛАВА I.
ПРЕДСТАВЛЕНИЕ ИНФОРМАЦИИ НА
КОМПЬЮТЕРЕ
ВНИМАНИЕ
ш
Если количество цветов, кодируемых для каждого цвета, уменьшится, то и
длина кода уменьшится.
ПРАКТИЧЕСКАЯ РАБОТА
5. Классная работа:
1) определить цвета, данные на картинке;
2) определить длину двоичного кода по
количеству цветов (N = 2i );
3) кодировать цвета в двоичном формате;
4) определить двоичный код изображения;
5) рассчитать размер изображения.
ВОПРОСЫ ПО ТЕМЕ
ш
1. Расскажите о пикселе.
2. Приведите примеры изображений в сантиметрах и дюймах.
3. Объясните принцип работы модели RGB.
ДОМАШНЕЕ ЗАДАНИЕ
1. Изображение размером 1280 x 720 представлено 16 777 216 различными
цветами.
Определить информационный размер изображения. Определить, как долго
будет передаваться изображение, если скорость передачи данных
составляет 30 Мбит/с.
2. Подготовить презентацию на тему «Цветовые модели».
34 ГЛАВА I.
ПРЕДСТАВЛЕНИЕ ИНФОРМАЦИИ НА
КОМПЬЮТЕРЕ
ТЫ ЗНАЕШЬ ЭТО?
КОДИРОВАНИЕ АУДИОИНФОРМАЦИИ
Современные компьютеры оснащены звуковой картой, обеспечивающей ввод и
вывод звуковой информации. Голос – это аналоговая информация. Микрофон
используется для ввода аналоговой информации в компьютер в виде
аналогового сигнала.
Непрерывный
ЦАП
Громкоговоритель
Аналоговый Дискретный
АЦП
Микрофон
Непрерывный Компьютер
о о
90 80 80
80
70
60
50
40
30
20
10
о
о 0,1 0,2 0,3 0,4 0,5 0,б 0,7 0,8 0,9 1
Время, 1 секунда
ЗАПОМНИТЬ!
КОДИРОВАНИЕ ВИДЕОИНФОРМАЦИИ
Видеофайлы, как и другие формы информации, кодируются в памяти
компьютера в двоичной системе счисления и хранятся в виде отдельного
файла. Видео и аудио в видеофайлах можно разделить, формат видеофайла
можно изменить.
ПРАКТИЧЕСКАЯ РАБОТА
ВОПРОСЫ ПО ТЕМЕ
ш
1. Каковы функции устройств АЦП и ЦАП?
2. Как звуковая информация хранится в памяти компьютера?
3. Какие типы аудиофайлов вы знаете?
4. Приведите примеры видеоинформации.
39
ДОМАШНЕЕ ЗАДАНИЕ
1. Если скорость передачи данных 30 Мбит/с, рассчитайте время, затрачиваемое на
передачу файлов, указанных в задании 6 (групповая работа).
2. Подготовить презентацию на тему «Компьютерное представление информации».
Презентация должна включать следующие направления:
1) информационные процессы;
7) размер файла.
а) 1 ГБ < 1024 Мб < 1024 Кб; в) 2048 Кб < 15,2 Мб < 0,5 Гб;
б) 5,6 Мб > 32,1 Гб > 22,8 Кб; г) 200 бит > 20 байт > 0,02 Кб.
а) v = i *˜M *˜t в) N = 2i
б) v = I/t г) N = m* i
40
ГЛАВА II.
ОБРАБОТКА ГРАФИЧЕСКОЙ ИНФОРМАЦИИ
_ _] _ _
ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ Вы научитесь дизайну в Adobe Photoshop.
Adobe Photoshop
ЗАПОМНИТЬ!
1 2 3 4
5 6 7 8
ПРАКТИЧЕСКАЯ РАБОТА
ВОПРОСЫ ПО ТЕМЕ
ш
1. Какие компьютерные устройства используются для ввода графических
изображений в память компьютера?
ДОМАШНЕЕ ЗАДАНИЕ
1. Используя знания, полученные в предыдущей теме, с помощью поисковых
систем своего персонального компьютера найдите изображения, подходящие
для видов компьютерной графики на интернет-страницах.
2. Разделите их на группы по видам компьютерной графики.
3. Прокомментируйте фотографии каждой группы по типу.
RGB СМУК
1. Цветовая модель RGB. Название цветовой модели
RGB, Red - красный, Green - зеленый и Blue - синий, произошли от начальных букв
этих цветов, которые можно смешивать для создания различных других цветов.
44 ГЛАВА II.
ОБРАБОТКА ГРАФИЧЕСКОЙ ИНФОРМАЦИИ
TIFF (Tagged Image File Format) — это формат для хранения растровых графических
изображений. TIFF — популярный формат для сохранения изображений высокого качества.
Он используется для сканирования, отправки факсов, распознавания текста, печати.
ЗАПОМНИТЬ!
ПРАКТИЧЕСКАЯ РАБОТА
ВОПРОСЫ ПО ТЕМЕ
1. Что такое цветовая модель?
ш
2. Перечислите цветовые модели.
ДОМАШНЕЕ ЗАДАНИЕ
ОСНОВНЫЕ ПОНЯТИЯ
ГРАФИЧЕСКИЕ РЕДАКТОРЫ
Adobe Photoshop был разработан Томасом Ноллом и позже
продан Adobe Systems Incorporated. В настоящее время входит в
набор приложений Adobe. В основном предназначен для работы
с растровыми изображениями, но также имеет несколько
векторных инструментов. Это самая популярная в мире
программа для редактирования растровых изображений. Файлы,
созданные в программе, сохраняются с расширением *.psd.
Adobe Photoshop работает с такими цветовыми моделями, как RGB, LAB,
CMYK. Возможности Adobe Photoshop обширны и обеспечивают большое
удобство в обогащении газет и журналов различными изображениями.
Например, с помощью программы можно различными способами
редактировать фотографии, удалять пятна с фотографий, обрабатывать и
восстанавливать старые фотографии, добавлять к фотографиям текст,
обогащать их дополнительными спецэффектами,
Adobe Illustrator Программное обеспечение Adobe Illustrator помогает
создавать векторную графику и работать с ней. Эта программа
-·
ПРАКТИЧЕСКАЯ РАБОТА
ВОПРОСЫ ПО ТЕМЕ
ш
1. Что такое графический редактор?
2. Какие графические редакторы вы знаете?
3. Перечислите функции Adobe Photoshop.
4. С каким расширением сохраняются файлы, созданные в Adobe Illustrator?
5. С каким расширением сохраняются файлы, созданные в Corel Draw?
ДОМАШНЕЕ ЗАДАНИЕ
Урок 13.
ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ADOBE PHOTOSHOP
ПАНЕЛЬ ИНТЕРФЕЙСА И ИНСТРУМЕНТОВ
Программное обеспечение Adobe Photoshop является лучшим и наиболее
универсальным программным обеспечением для редактирования растровых
изображений в электронном виде и предоставляет пользователям множество
возможностей.
51
+.
9.
6
7 [jJ llJ
- -п-
"'"""'
- "
4 - ... -
"
ф
G!/+ne
"4
,..,,,,
т tJ з.
11,
88
5 ~-
D с, Ш 8
Как только определенная область изображения будет ( ) EltpЬcal l•larquee Tool t•I
1
l2З eountтool !
·~.
.1..
• • ~ Spot Heзling Brush Tool
изображения.
54
ГЛАВА II.
ОБРАБОТКА ГРАФИЧЕСКОЙ ИНФОРМАЦИИ
курсором по изображению появится отдельное окно 1'}.[' Vertx:al Туре l•lask Tool т
для ввода текста. В этом окне вводятся размер ~ 'JГ HortD'ltal Туре t•lask Tool т
□. • 0 R«w,g\e Tool u
Q
19. Инструмент «Прямоугольник» (U). С помощью
Rounded Redangle Tool u
~
Q ElpS<!Tool u
инструмента можно рисовать различные геометрические
~
Д Trangle Tool u
фигуры. Q Polygon Tool u
/ lлeTool u
[Q]
CJ Cu51Dm Sh~pe Tool u
23. При двойном нажатии курсора в окне Set Background Color будет
создано новое окно (Color Picker) программы Adobe Photoshop.
Выберите нужный цвет в этом окне и нажмите кнопку «ОК» или
«Ввод».
Выбранный цвет можно применить к таким инструментам, как
«Кисть», «Карандаш», «Градиент».
(Q] [9, • [9 Stondord Scr-, ►lode 24. Change Screen Mode (F) – кнопка для работы с
□ Ful Scre,n ►lod• Wlth Menu Воr окнами, при активации окна Standard Screen Mode
[ ] Ful Scrиn Mode
изображение находится в стандартном состоянии.
Полноэкранный режим с панелью меню используется, когда изображение не
помещается на экране компьютера. Когда это окно активировано, строка
меню и панель инструментов остаются на экране. В полноэкранном режиме
на экране на черном фоне остается только изображение, панель
инструментов и строка меню.
ПРАКТИЧЕСКАЯ РАБОТА
+
OpenAs...
Open "s Sm•rt ОЬjю...
Ah:+Shift•Ctrt•O
Шаг 1. Для создания нового объекта в
.. _.. Open Recent программе сначала создается новое окно с
Close
CloseAП
Cut+W
Alt•Ctrt+W
помощью кнопки "Создать" из меню "Файл"
Cl~Othпs
Сlон t1nd Go to 811d9e...
Alt.+Ctrl•P
Shift-,.Ct1l+W
или горячей клавиши "Ctrl+N".
S.vo Ctrl+S
S.Veдs._ Shift+Ctrl•S
Rovm F12
,,? Expolt
ш ·-~--- D ---·--
"'
размер окна или использовать готовые D о
окна. lilllJ
помощью флажков в правой части окна, -·--·-- ... -·- 11"•-·- --··-
и окно можно сохранить с введенным D D D D
_,.. ____
размером. Окна нового размера ----· - ·--·-
р
---·-...
G) c::t ~
сохраняются в пункте «Сохранено».
56 ГЛАВА II.
ОБРАБОТКА ГРАФИЧЕСКОЙ ИНФОРМАЦИИ
,----1
Шаг 3. Выбирается бумага формата А4 и
используется раздел «Геометрические
фигуры» на панели инструментов
программы.
ВОПРОСЫ ПО ТЕМЕ
1. Из каких частей состоит окно программы Adobe Photoshop?
ш
2. Какие меню находятся в главном меню программы Adobe Photoshop?
ДОМАШНЕЕ ЗАДАНИЕ
Урок 14.
СПОСОБЫ РАЗМЕТКИ ОБЛАСТИ ИЗОБРАЖЕНИЯ,
ВЫРЕЗАНИЯ И ОКРАШИВАНИЯ
Adobe Photoshop имеет множество возможностей для работы с изображениями.
Например, определение области изображения, обрезка выбранной области изображения,
размещение области обрезки на другом изображении, объединение нескольких
изображений в одно изображение, применение к изображениям различных
эффектов(изменение цвета изображений), обработка их по-разному и т. д.
Ниже мы познакомимся с методами редактирования картинок более подробно.
----
&
"
1 изображение левой кнопкой
"·
--- мыши, вывести его в рабочую
область программы Photoshop
о -
...
...
' 00 • и отпустить кнопку мыши.
Изображение можно загрузить
.. в программу любым из этих
способов.
'·
о.
"·
"
-··--·-· - - - - - - - - - - -
- - ·-- - ,._ ,._
• ,t ♦ а •
·[
ii'
59
+8
,_ ~-- - - -·- Разрезанное яблоко можно воспроизвести
"· ..
... (!]
в нескольких экземплярах. Например,
.ш
"'
~
.,
-✓
•
•
D
.... D D
-·--·-.. -
размер рабочего окна 10х15 см. Для этого в
меню «Файл» выбирается раздел
IIJW ■
~ ~
т
о .•
•
Q.. ...
D D D о
• )
-- «Создать» (Ctrl+N) и открывается окно,
"· --·--•-· - ·---· -·--·--- ---··· показанное на рисунке. Здесь нужно ввести
необходимый размер:
D
...._. ~
р
D .. ...D
, ____
~
...
D
~----
-~ 1) «Ширина» (ширина) на 10;
2) «Высота» на 15;
3) выбрано «Сантиметры»;
4) в "Разрешение" вводится 300;
5) выбрано «Пиксели/Сантиметры»;
6) Цвет фона пункта "Содержимое фона" лучше выбрать белый;
7) В конце выбирается кнопка «Создать».
• п-~....,.1-"1'"'._ _____ . . ,
_ .. _ fil
..---- "'
" ц"
h 6
,,
а0о
А
:1
GI~ "'-"
активации.
1. Измените цвет выделенной области изображения на синий с помощью
раздела «Оттенок». Теперь видно, что его плотность и яркость изменились.
2. Используя часть «Насыщенность», вы можете перетащить левую часть
ползунка в конец, чтобы изменить цвет области на относительно темный цвет.
3. В части «Яркость» яркость цвета определяется перемещением ползунка до
тех пор, пока не будет создан нужный цвет.
ВОПРОСЫ ПО ТЕМЕ:
ш
1. Продемонстрируйте, как загружать изображения в Adobe Photoshop.
2. Как отредактировать изображение в Adobe Photoshop?
3. Как определяется объект с помощью инструмента «Прямоугольное выделение»?
4. Что делает инструмент исправления?
5. Как определяется объект с помощью Elliptical Marquee Tool?
ДОМАШНЕЕ ЗАДАНИЕ
1. Создайте изображение в Adobe Photoshop, которое
выглядит следующим образом:
а) размер окна 10×15 см;
б) размер картинки 3х4 см.
-~
• фильтры для выбора в списке слоев по атрибутам (2);
Liye r 2
• значок списка рабочих слоев позволяет скрыть или L
показать вид слоя (7);
@
G
п Layer 1
• значки (9):
с-:>
соединяет выбранные
слои друг с другом. □
-- 9
позволяет объединять
слои в одну группу.
fx. D Q. □ Е] 1шJ
ОПЕРАЦИИ НА СЛОЯХ
Создавать слои в Adobe Photoshop, изменять режим
наложения слоев, изменять стили слоев, создавать тени Name:l l\!13D
на изображениях через слои, делать слои прозрачными,
копировать, объединять в группу, перетаскивать выше или COlor 00 None
Если вам нужно удалить лишний слой, вы можете щелкнуть правой кнопкой
мыши по слою один раз и выбрать в открывшемся контекстном меню кнопку
«Удалить слой». Это также можно сделать, щелкнув левой кнопкой мыши
слой, который нужно
удалить, и поместив его в поле «Удалить слой».
Обычно для обработки изображения используют l.oy<,s Channols P.ths
ПРАКТИЧЕСКАЯ РАБОТА
2
Шаг 4. Чтобы объединить эти два слоя,
уменьшите Непрозрачность (1) до 50% и
нажмите кнопку «Применить преобразование» (2)
(«Ввод»), что приведет к следующему
состоянию. Непрозрачность будет установлена 1
обратно на 100%, а верхний слой будет активен.
ВОПРОСЫ ПО ТЕМЕ:
ш
1. Что такое слои в Adobe Photoshop?
2. Какое меню работает со слоями в Adobe Photoshop?
3. Как создать палитру слоев в Adobe Photoshop?
4. Как добавить новый слой в массив слоев?
ДОМАШНЕЕ ЗАДАНИЕ
•
-
lT V..tolT-Tcd
горизонтального и вертикального
т
lt-. 1'1("• Vonol Т- Ммk Toal т
1.oda&f ., + ~ 8 " l~ v
ПОМЕТИТЬ ТЕКСТ
РЕДАКТИРОВАТЬ ТЕКСТ
Для этого:
1) выберите инструмент «Текст» на панели инструментов или нажмите
клавишу «Т» на клавиатуре;
2) курсор перемещается по линии контура линии или фигуры. В
результате при появлении курсора однократно нажимается левая кнопка
мыши и вводится нужный текст;
3) для отображения текста внутри или снаружи контура выберите
«Инструмент выбора пути» (3) и переместите его в нужное положение с
нажатой левой кнопкой мыши;
ЗАПОМНИТЬ!
Если текст уже есть, текстовый ll.ilyers CNnnel5 hths
ОБРАЩЕНИЕ К ТЕКСТУ
«Тень» (7).
1r'1' 1
Loc · �
3. Вы можете создать текстовую тень я1оm
е
любого вида в результирующем окне.
П
.L-_J
4. После внесения необходимых настроек
е
нажмите кнопку «ОК». y;yero
. □ Ш lшl
71
Wкfth
• Непрозрачность-26; ·•
-1\ liL]• o...,...,._
600 Pixels V • Угол-120; .,.,
• Расстояние-6px;
н,;ght ~i..ьon Artl>o4rds
• Размер-3px; .,.,
300 [i] [lJ
o--cw.--
~
800 Plxels/lnch V
·- ~
!! C.UI V • Размер-10px;
-
о -.,..~
-
• Смягчение-0px; m
.:::..J
Напишите каждую букву слова Google на
отдельном слое в рабочей области. • Угол-120; ·-- m
t-. • ♦
• Высота-30;
~
30 '--"
~ Кind (!;] Q т п 8J • Для наложения цвета:
!OCN, • Палитра цветов – #84dc5;
f.З
•' + ~ а IOCN. вводится значение и
@ т
• нажимается кнопка «ОК».
G т ,.,..,,.
---
х
_
G т
G т
9
о а ...........
c•~~Clli8f)
..
....
х
@ т о
-- 8: .....
G
G п
т G
Sкkgrwnd 121
""'"'
0 1<
--
.."' .... .• .,.,.
L
0--
s
·--
о..--- 18
., "
~
показано на рисунке.
Google Google
72 ГЛАВА II.
ОБРАБОТКА ГРАФИЧЕСКОЙ ИНФОРМАЦИИ
стиль слоя».
Red
0 П sdprcund Orange
V o l,,,~
._. Hortzont>I
Выберите остальные слои, удерживая
v:i
)0
Vertlcal
Цк.nd None нажатой клавишу Shift, и щелкните
правой кнопкой мыши. В
-
Sharp
.,J
"'"'"' ., + 01sp
0
т . Smootl1
0
0
т
т
..
• Convert to Pa1c1oraph Text
В этом порядке:
• #ffcf00 для второй буквы «о»;
• буква "g" без изменений;
• на букву «l» #32а93б;
е • Букве «е» присвоены значения
цвета #de1b00.
ВОПРОСЫ ПО ТЕМЕ
ш
1. Расскажите последовательность написания текстов в Adobe Photoshop.
ДОМАШНЕЕ ЗАДАНИЕ
1. Создайте новый документ и напишите в нем свое имя.
2. Ваше имя будет выделено фиолетовым цветом, бочонок 24 размера.
3. Примените эффект «Рыбий глаз» к своему имени с помощью Text Warp.
4. Придайте тексту красный оттенок и сохраните документ как «Имя.psd».
Wldth
1920
н.,gt1I ArtЬows
Шаг 2. Отрегулируйте размер документа.
~-
-
3000
CdorМodo
8'1dcirourd Cont<nts
White
№w Guide Layout х
Шаг 3. Вставьте направляющие линии в
Pres.et: Custom
документ.
Taroet: cancel Для этого в пункте меню выберите «Вид» -
12 Columns Rows а f_rev1ew
«Новый макет направляющей». Из
полученного окна устанавливаются
Number 5
w,dth не oht
следующие значения:
Gutter Gutte
- Количество колонн - 5;
rJ Maroin – Расстояние между левым и правым
Тор: Left: Bottom: RJoht:
столбцами составляет 150 пикселей.
О рх 150 рх О рх 150 рх
.., -~-
~ +• с-- о --- ~ р .. ,. ♦ ❖- (\ Q D r.!)
:;
.
.__
-.. .......
* ......
'~ ili
.... ,,.......
.......
---
А.
)С
• ·--
. . ........
v- -
г 1iВ □
• -- •
--•
75
. ...... _ _ 1),o_,....,,o_W...,_Нolp
..........
+
~ ,.~-МA«Vol,...,.,,. u...,-1•"-"'(Q.flWC"IAI,....., . w
~----~-------~-----
,...... . . . . ~ .. ~ io:
~ +99890-000-00-00
9.
..__.. 4:Z•MAKTAB
f\
_._,. _._....,_. _, . . ,:.. . . .,_. i..o.•--\-
+ о- - о -- % ~ • 1" ► h 1 ,м ~ • ♦ ,;, •
11
v Transform ~
W 19Юрх Х 0,47 рх
~ t99tt0-000-00-00
"·
Н 150 рх У 374, 5 рх
"11
V APP4ti1ranc:e
с,
Stroke
"'·
76 ГЛАВА II.
ОБРАБОТКА ГРАФИЧЕСКОЙ ИНФОРМАЦИИ
........,.~
1' t+ lt
,.,,..
1 ... ♦ ·❖•
~ ♦99890-000-00-00
42-МАКТАВ
1 1 1
.
------
.,
..
42-МАКТАВ "
"'
V о --
Bosh sahifa YangiliЫar o cqituvchilar О, quvcl
■ Fil• Edit lmog• Layer Тур, S.lкt FiK•r ЗD v;.,,, Window Holp С1 х
+ §,
~ ♦'"890-000-00.00
'"'1 ..... ._
1~,,
.__. 42-МАКТАВ о.
'!.f
v
8
Transfcwm
w ,.,., .. х ISO рх
,,. ..
!,~ н ltOOpx у
4 ..... V
•!• . ~
oUQo,
Al9'1 •ncl Oistriь...t.
JI " h
V Quk::kAc.tions
~ Sм:qlround
30 ~s ~
~ 14",d . . . ., . . ~ t,111(;1/P) •
1,
.._ ...
+ D -
......
1~✓
... ,.,...
v c-.
9.
..,
if ~
''.Z.
-- 11] 111
'
'
- --...........
А1
0 8 0 '11
~,72,...f!Cti
г 1111 о ...
Oui• lpsum suspen• V ......
- D Х
+
IJnЬUfd- 1 81U~ (JtG81U)• х 11111J t IO.....a,ul02dtl2JSIIOtkaSeOИ}М8t~{R('ДIU) · х
.....--....-::: 1,
1~✓
- D -
'11' "~
li] GtJ
А1
~
'11
[!)
--
-.. ·- ...._.,n.......,...cti
о-
V
V
Г
.....,..~
.....
1111 О ...
L•r•m lрн•м d • l• r L o r ♦ м lp,uм 1110101
,lt omet , c•111ect ••
tu, odlpl,cln• ellt,
.... ...,.........
• lt 11 me t,co1н ♦ct• •
tu, o llllpl1cln8 ollt ,
MtiHЫe+ Mfibdie+
..........
■ н.i•.....,_~.,,.~r-юv-w-м.i, ~ х
,,
+
"'
Lor• m lp,um dolor
•
Lorem l p1um dolor Lorem l p1um dol, r
:.
•.t
D -
1it om• t, con1• ct• · 1it am• t, con••ct•• 1lt om• t , con,e ct1•
tur adlplнln• ellt, tur odi plн i n'I • lit,
liJ(l]
,
- ·---
tur adlpiicln• elit,
11 d do •iu1mod ied do elu1mod 11d do e lu1mod А1
t e mpor incididunt t e mpor lncld ldunt t e mpor lncldldunt
ut lobor• et dolor• ut lobore • t dolore ut labore •t dolor•
mognci cillqua. ma1na o llqua. mo1 no ollquo. ~
Oul, ip1um 1u1pen• Oul 1 lp,um 1u1p• n• O ui• lp1um 1u1p•n ·
dlн• ultrlc• 1 . , ovl-
do. Rl1u1 commodo
dlнe ultrlcet .,,avl• d i ,11 ultrlc• 1 1 ra vl•
~
•□ -
da. Al1u1 commodo da. Rl1u1 commo4o
v lv•rra ma• cena, vlveпo moe ce no1 vive rra maec• no1
accum1an l acu, vel accum,an lacu1 v•I ac cu m,an lacu1 ..,.1 Г 1111 О
taclli1i1. toclll1l1. toc111,1,.
1 1
Lor •m lp1um d olor 1lt am•t, con,ect•tur
odlplicln!I ellt, ,,d d o 1lu1ma d
l~========================================~vl
!1м• ф•iiло: lml!ПmlJ
!иn Ф•iiло: 1Photoshop (· .PSD;•.PDD;•.PSD1) v1
~ЫТЬПi!!IПКИ
Результат.
ВОПРОСЫ ПО ТЕМЕ
ДОМАШНЕЕ ЗАДАНИЕ
• ~-i.•--_
. __
,_ .., ...,...,..
, __ ....
•M-•I.,_,
.....
-
---.i-.
'4,о,_
....___.......
,___,., __ ............
,_ ,..,
,,
. .....
.
80 ГЛАВА III.
АНИМАЦИОННЫЕ ТЕХНОЛОГИИ
КОНЦЕПЦИЯ АНИМАЦИИ
Чем больше кадров содержит анимация, тем более плавным будет движение
при воспроизведении. Для создания иллюзии непрерывного движения частота
кадров не должна быть не меньше 12 кадров в секунду.
81
ИСТОРИЧЕСКАЯ ИНФОРМАЦИЯ
ВОПРОСЫ ПО ТЕМЕ
ш
1. Что такое анимация?
2. Какие виды анимации существуют?
3. Назовите преимущества компьютерной анимации?
4. Перечислите самые популярные анимационные фильмы.
ДОМАШНЕЕ ЗАДАНИЕ
СИСТЕМА RENDERFOREST
ПРАКТИЧЕСКАЯ РАБОТА
Создайте анимацию с помощью программы Easy Gif Animator.
:;:
1
Easy Wizards
а в
lnsert lnsert Вlank Delete Dupl,cate Мое Мое Ed,t Stltct AII Export Reverse
Frame Frame Frame Fr,me Up Down Frame Fг.mes Selected Selected
Frame
,.
..&, □ т
о □
~
7
~.. ~ То add picture fram~ click D on the 1
-4 и То create Ыank fram~ click Го on the
DD е.
··~::
DD
В ankframe Е3
Установите ширину и
Width: 1,00 !::feight 1,00 высоту рамки на 100 и
нажмите OK.
~olor: о
ок Cancel
87
.....
00
в
.... Е! ~ tJ.
··- ··-
~ lnltlt~
,,_ ,.,_
Dtktt ~t 1,.4
.. Uc fo,,
00
s.kct AI ~ Rf\otf,t
··-...
fr- fr-f Sdfcttd Sdfcttd
е
Го
~ о -~ ...
.,.,
• 1 □-
•
Го - - , .. V
112] 0
.. 1)
q
.,. / ,1 7
.j, от
-~
@р
С/
.,
~
..
,4
0~•- 6
•н
• 8
5
AnotNt.onPtopм16
~ ~tNWNtlOl'I
~ ~ Commn
OOonotrntJ~p,Мdte
Скопируйте
Homt f11n,ts Stltct1on An1nцt1on Htlp
00
в в в t Q
... 00 ,,..,. fJ,
созданный кадр. lnн:rt
fr.tmt
lnstrt 811nt
fr.1mt
Dtltlt
F,amt
Mo,t
u,,
Мс-
о,.
t
f1.aмt
StltctAJI
f111mts Stltcttd
RMISt
Stltcttd
Для этого 9
fllltllt
выберите ~ о
(dit
Width:
PrlМ~
,.. lяgin ~joying fulwr5'0n Wl"ltМd~dy-~
команду IZ) □■
--- 1р, V 0Smaath
9 .. 1]
«Дублировать /
от
~
рамку» (9) из 00
меню ~ 00.>>« ,, , .. d'
..
.
1-н~
«Рамки» или ,1
~ ~
одноименный
инструмент на
il
..
панели
инструментов.
Anim,tion Proptftits Fr1mtProp~
~ lm1gt Commt:nt
88
ГЛАВА III.
АНИМАЦИЯ ТЕХНОЛОГИИ
окрашен в зеленый
цвет. Для этого
в
11
- Е! ~ 1'
......
lrl1fft8'..-..:
~
..
··- ··- ··- ··- -··-.. ··-
Е!
,
[4 □□
... "" , .......
,.......
,...,__
□□ ~ ._ tJ.
,,_tt .......
O\loli<tlt lll;twlSt
Sdtctt6
~~fulw,,oon.wntdiattty. ~
выберите зеленый Го
Го 11 1
прямоугольник в li\ / .,
,. ,
00
рамки (10).
о
/ 00.s-
.. 1-Н
~ -
Выберите
А.
Q Ф.
инструмент
рисования на панели
инструментов и
щелкните левой
кнопкой мыши на
.,
10
F,-~
--
- ~ V 100ttl~ "•' Srt ' i - ~ ]
-'
В результате
образуется зеленый
круг.
Шаг 6. Вы можете предварительно просмотреть сгенерированную
анимацию, выбрав «Предварительный просмотр» в пункте меню. Чтобы
сохранить анимацию, выберите меню «Файл» и нажмите на команду
«Сохранить».
ВОПРОСЫ ПО ТЕМЕ
ш
1. Какие дополнительные анимации можно создавать в Easy Gif Animator?
2. Какова последовательность создания нового документа в Easy Gif Animator?
3. Перечислите функции Adobe Animate.
ДОМАШНЕЕ ЗАДАНИЕ
1. В строке меню есть несколько меню, и в каждом меню есть свои команды.
2. Через настройку интерфейса программа выделяет специальные области и
оборудование для создаваемых анимаций.
3. Панель инструментов содержит ряд компонентов, помогающих создавать,
редактировать и размещать на сцене графические объекты. Некоторое оборудование
разделено на специальные группы.
4. Вы можете написать программные коды на языке Action Script в раздел событий.
5. Панель свойств позволяет настроить параметры выбранного элемента, сцены или
оборудования.
6. В библиотеке хранятся медиафайлы, созданные в программе или импортированные
для использования в рабочем процессе. Для каждого документа создается отдельная
библиотека.
7. Сцена — определенная область определенного размера, где отображается созданная
анимация. Все события и объекты вне его не отображаются. Сцена используется как
пространство для хранения графики, текста и другой информации при разработке
анимации.
8. Слои позволяют расположить объекты в создаваемой анимации.
Объекты на одном слое можно рисовать и редактировать, не затрагивая объекты на
других слоях.
9. Используется для управления дисплеями в строке состояния, для управления
предыдущими и следующими кадрами.
10. Временная шкала контролирует процесс изменения состояния, цвета и положения
создаваемых графических объектов в определенный интервал времени. Эта панель
состоит из кадров, пронумерованных через определенный интервал. С левой стороны
расположены слои, в каждом из которых можно разместить отдельные графические
инструменты для дальнейшего применения анимации.
11. Активный документ — это текущий документ, созданный в программе и
организованный под названием «Без названия».
90
ГЛАВА III. АНИМАЦИННЫЕ ТЕХНОЛОГИИ
1 2
11
4 5 6
8
10
Интерфейс программы Adobe Animate можно удобно настроить через меню «Окно
— Рабочая область». В других версиях программы расположение панелей может
отличаться от показанного на картинке.
МАРКИРОВОЧНЫЕ ИНСТРУМЕНТЫ
•• 3D Rotation Tool
инструмент для преобразования 3D
Polygon Tool
Инструмент выбора многоугольника
•• 3D Translation Tool
инструмент для 3D-рендеринга
Lasso Tool
Дополнительное инструменты для
полевой маркировки
а
Оборудование для удаления точки на
кривой
•
Rectangle Primitive Tool
Инструмент для создания
прямоугольников
• •
Oval Primitive Tool
Оборудование для создания овалов
Инструмент для создания простых овалов
PolyStar Tool
•11
Pencil Tool
а
Инструмент для создания полигонов и
звезд Инструмент карандаш
•
Paint Brush Tool Brush Tool
Оборудование для малярных кистей
Инструмент кисть
•11
Bone Bind Tool
Eyedropper Eraser
11 а
Width
Ширина Оборудование для установки точек поворота
НАВИГАЦИОННЫЕ ИНСТРУМЕНТЫ
Camera Hand
• •
Rotation Tool Zoom
Оборудование для ротации сцен Увеличение
92
ГЛАВА III.
АНИМАЦИЯ ТЕХНОЛОГИИ
ПРАКТИЧЕСКАЯ РАБОТА
1:, 1ff f!, 1, 11\
ВОПРОСЫ ПО ТЕМЕ
ДОМАШНЕЕ ЗАДАНИЕ
1 Запустите инструмент масштабирования. Попробуйте увеличить и уменьшить
масштаб сцены.
2 Переместите сцену в рабочую область с помощью ручного инструмента.
3 Напишите свое имя и фамилию с помощью «Текстового инструмента».
4 После выполнения вышеуказанных задач сохраните активный документ с
расширением *.fla (Файл - Сохранить).
93
1...г
1
Режим «Сглаживание» позволяет сглаживать линии.
...г
..с
О)
.....
•
...
cu
,о
О'\
с:
Это также регулирует толщину линии;
V\ ~
..с
~
.....
о
о
Режим Ink аналогичен режиму Smooth, за исключением
того, что толщина линий меньше.
~
-
'SI"
с:
РЕДАКТИРОВАНИЕ ИЗОБРАЖЕНИЙ
В процессе создания анимации необходимо редактировать объекты в
нескольких кадрах. Примеры включают размер объекта, цвет, форму, положение
и контур.
Прежде чем вносить какие-либо изменения в объект, он определяется.
В Adobe Animate есть несколько инструментов для маркировки. Основное
маркировочное оборудование - «Инструмент выделения» (5).
•
6
•
7
ПРАКТИЧЕСКАЯ РАБОТА
ВОПРОСЫ ПО ТЕМЕ
ш
1. Какой инструмент в Adobe Animate можно использовать для
рисования прямых и изогнутых линий?
2. Каким инструментом программы Adobe Animate можно рисовать
геометрические фигуры?
3.Перечислите создателей интерфейса программы Adobe Animate.
4.Опишите функцию инструмента выделения.
5.Сколько различных линий можно нарисовать инструментом
"Карандаш"? Перечислите их.
ДОМАШНЕЕ ЗАДАНИЕ
1. Создайте простые изображения с помощью инструмента «Линия».
Добавить папку
Видимость
Слои Замок
СОЗДАТЬ СЛОЙ
БИБЛИОТЕКА ОБЪЕКТОВ
При создании анимации некоторые объекты нужно использовать несколько
раз. Эти часто используемые объекты можно хранить в библиотеке Adobe
Animate.
5
С помощью кнопки «ОК» объект
сохраняется в библиотеку (5).
99
ПРАКТИЧЕСКАЯ РАБОТА
1. В программе Adobe
Animate новый документ
создается с помощью New... Ctrl+N
команды «Файл — Новый».
2. Создайте для
документа три слоя и
назовите их car, road и
cloud.
4. Выберите команду
«Сохранить» из пункта
«Файл», и слой имя и
сохраняется с расширением
*.fla.
100 ГЛАВА III.
АНИМАЦИОННЫЕ ТЕХНОЛОГИИ
ВОПРОСЫ ПО ТЕМЕ
ш ДОМАШНЕЕ ЗАДАНИЕ
Активный кадр
Номер кадра
Свободный номер кадра
Слои
Ключевой кадр
Чем больше ключевых кадров в этом типе анимации, тем более естественным
будет казаться движение объектов.
ПРАКТИЧЕСКАЯ РАБОТА
ДЕЙСТВИЕ С АНИМАЦИЕЙ
АНИМАЦИЯ ФОРМЫ
Анимация формы — это процесс плавного, равномерного, плавного
преобразования объекта из одной формы в другую. При такой анимации
изображение может быть разделено на несколько частей или несколько
объектов могут быть преобразованы в единое изображение путем
постепенного изменения их внешнего вида (размера, цвета, формы). С
простыми фигурами удобнее работать в анимации форм.
ПРАКТИЧЕСКАЯ РАБОТА
3. С помощью клавиши "F5" добавьте
1. Импортируйте самолет и фоновые "Рамки" - нормальные кадры до 50-го
изображения в программу. кадра в слоях фона и самолета.
Разместите изображения на отдельных
слоях.
......,._
2. Преобразовать изображение самолета
loowl ....11:fJ'h_
c-•~-
в символ с помощью клавиши «F8» . ,-•..,.l(,oyt,-
c"ff_
,_,,_
с.,,.,,_
,_ ....°"""'"""'-
......
""'"- ,._
-~..- ~ ~
-·-
..
~ "" ._,,. ~)
'., L.t,t.,.,_
ц,_..,
104 ГЛАВА III.
АНИМАЦИОННЫЕ ТЕХНОЛОГИИ
ВОПРОСЫ ПО ТЕМЕ
ш ДОМАШНЕЕ ЗАДАНИЕ
3. Установить совместимость:
•1 2 3
••
□ Ключевой кадр — это кадр, содержащий □ Пустой ключевой кадр — ключевой
4
□
элемент. кадр, в котором нет элементов.
·• 1
·•
• i"J • •
2
3
4
~
~
–
–
–
–
создать многоугольник.
выделение поля.
создание полигонов и звезд.
добавить точку на кривую.
Начало HTML
Запрос
------....•
HT~tL мso~la rl
-:s:--2=::.7
----
t! !
, IIТJC.......,_,__ ...........
Ответ
ТЕКСТОВЫЙ РЕДАКТОР
При написании кодов веб-страниц с использованием языка HTML
используются программы текстового редактора:
- Блокнот (Notepad) — стандартная программа, входящая в состав операционной
системы Windows. Он позволяет вставлять код и сохранять сгенерированный
документ как веб-страницу. Сохраненную веб-страницу можно просмотреть позже
с помощью веб-браузера.
— Notepad++ — текстовый редактор, предназначенный для операционных систем
Windows. Распространяется как бесплатное программное обеспечение.
Программа выглядит простой и удобной.
— Sublime Text — редактор, объединяющий в тексте команды разных языков. С его
помощью писать HTML-теги удобно и просто. Программа распространяется
бесплатно с некоторыми ограничениями. Для использования всех возможностей
редактора необходимо приобрести его лицензию. Существуют также текстовые
редакторы для профессионалов веб-дизайна: Brackets, Atom, VS Code и другие.
ТЕГИ
Для создания веб-страницы и написания ее HTML-кода используются три типа
тегов.
1. Парные (закрытые) теги также
называются «открывающими» и
«закрывающими» тегами. название тега косая черта имя тега
Перед закрывающим тегом ставится
косая черта (/). Двойные теги всегда \ /
должны быть закрыты после <р> </р>
открытия. Если не закрыть, это открывающий тег закрывающий тег
может повлиять на другой код и
изменить страницу.
---------Н_______,
<!DOCTYPE html> Версия
HTML
<html>
11........................
<body> '.............~................................................................................
Тело — это информация, '.................................
видимая в браузере.
</body>
</html>
ТИП ТЕГА
1. <! DOCTYPE html> – тег объявления типа документа. HTML не является «чувствительным
к регистру» языком, поэтому все теги могут быть написаны как прописными, так и
строчными буквами. Но для того, чтобы код был красивым и понятным, следует выбрать
метод. Например:
<! DOCTYPE html> или <! Тип документа Html> или <! Тип документа HTML>
112 ГЛАВА IV.
WWW-ТЕХНОЛОГИЯ И ЯЗЫК HTML
1.9. Укажите папку с именем «веб-сайт» для сохранения документа. Введите имя
«index.html» в поле «Имя файла». В разделе Тип файла выберите Все файлы (*.*).
!;;::::=========================d
r.
Jиn ф4Й114: . се файлы
ВОПРОСЫ ПО ТЕМЕ
ш
1. Какие типы браузеров вы знаете?
2. Что такое гипертекст?
3. Какие языки используются для создания веб-страниц?
4. Какие типы тегов доступны?
ДОМАШНЕЕ ЗАДАНИЕ
<body bgcolor="lightyellow">
<body bgcolor="#FFF3AA">
Желаемые цвета можно получить на https://www.w3schools.com/colors/
colors_picker.asp.
ОСНОВНЫЕ ПОНЯТИЯ
Настройки по умолчанию — настройки, изначально примененные к элементу.
Форматирование — изменение стиля текста на веб-странице, например, цвета
шрифта.
Поддерживаемые шрифты — это шрифты, которые можно просматривать во
всех веб-браузерах.
[_о о_][_
<body bgcolor="lightgreen" text="#7E3487">
Цвет фона и текста страницы
<p> Цвет фона и текста страницы</p>
HTML РЕЗУЛЬТАТ
ЗАГОЛОВКИ
<h1>…</h1> — заголовок веб-страницы. Теги заголовков представлены в 6
различных стилях, с большим и малым размером шрифта.
ЗАГОЛОВОК
<p>…</p> — добавить абзац на веб-страницу. Каждый открытый тег <p> будет
отображать текст, начинающийся с новой строки.
HTML РЕЗУЛЬТАТ
ФОРМАТИРОВАНИЕ ТЕКСТА
r
Текст: <font face="Courier" size="2"
Текст: Изменяет тип, размер и цвет
color="red">Изменяет тип, размер и цвет шрифта.
</font> шрифта.
HTML РЕЗУЛЬТАТ
HTML РЕЗУЛЬТАТ
HTML РЕЗУЛЬТАТ
<del>…</del>, <s>…</s>, <strike>…</strike> — используется для зачеркивания
всего текста.
Эти теги можно использовать для отображения важного и неважного (но не
удаленного) или удаленного текста.
<p> Цена телефона Samsung: </p> Стоимость телефона Самсунг:
<p> <del> Было 3,5 млн сумов </del> Было 3,5 млн сумов
</p> <p> Сейчас всего 2,5 млн сумов. </p> Сейчас всего 2,5 млн сумов.
HTML РЕЗУЛЬТАТ
ВЫРАВНИВАНИЕ ПО ЦЕНТРУ
<center>…</center> — все записи внутри тега (могут быть тегами)
выравниваются по центру страницы. Все элементы внутри тега
отображаются в центре.
<center>
<p> Цена телефона Samsung: </p> Цена телефона Самсунг:
<p> <del> Была 3,5 млн сумов </del> Была 3,5 млн сумов
</p> </center>
HTML РЕЗУЛЬТАТ
117
БОЛЬШОЙ И МАЛЕНЬКИЙ
HTML РЕЗУЛЬТАТ
<p>Кружки:
<hr color="green"> Кружки:
Математика <br/>
Информатика <br/> Математика
Физика <br/> Информатика
</p> Физика
HTML РЕЗУЛЬТАТ
ПРАКТИЧЕСКАЯ РАБОТА
1.7.
<html>
<head>
<meta charset="UTF-8">
</head>
<body bgcolor="lightyellow" text="darkblue">
<h1 align="center">Сайт 37-й школы</h1>
<h2>Контакт</h2>
<p>Вы можете оставить все свои мысли о школе по адресу электронной почты
ниже.</p>
<p align="right"><i>Администрация школы</i></p>
<hr color="green">
<p><font face="Courier" size="2" color="red">Address:</font><br>
улица Махмуда Кошгари дом 61 </p>
<p><font face="Courier" size="2" color="red">Telefon:</font><br>
(+99866 233-07-15) </p>
<p><font face="Courier" size="2" color="red">Email:</font><br>
samarqandshahar.37idum@mail.ru </p>
<p><font face="Courier" size="2" color="red">Sayt:</font><br>
www.37idumshxtb.uz </p>
</body>
</html>
ВОПРОСЫ ПО ТЕМЕ
ш
1. Какой атрибут определяет цвет веб-страницы?
2. Укажите имя тега, который обрабатывает тип, размер и цвет шрифта, а также его
атрибуты.
3. Горизонтальная линия задается каким тегом?
4. Какие теги работают с информацией?
ДОМАШНЕЕ ЗАДАНИЕ
Examination subjects:
<ol type="I"><b>Examination subjects:</b>
<li>Mathematics I. Mathematics
<li>Informatics
II. Informatics
<li>English language
</ol> III. English language
HTML РЕЗУЛЬТАТ
<ul type="disc"><b>Examination
Examination subjects:
subjects:</b>
<li>Mathematics Mathematics
<li>Informatics Informatics
<li>English language
English language
</ul>
HTML РЕЗУЛЬТАТ
Если картинка находится в папке, то пишется адрес, где находится картинка, название
папки и название картинки. Например: images/fon.jpg.
<img src="images/tulip.jpg"
alt="Tulips" width="150"
height = "200" hspace = "10"
vspace="10" />
HTML РЕЗУЛЬТАТ
РАЗМЕЩЕНИЕ ФОТОГРАФИИ
Положение изображения в коде влияет на то, как оно будет отображаться на экране.
Например:
1) перед абзацем. Абзац начинается с новой строки после картинки;
<img src="images/tulip.jpg"
alt="Tulips" width="150" height = "200"/>
<p>Тюльпан (Tulip) — многолетнее
растение, принадлежащее к
семейству тюльпановых. </р><hr>
Lo1a (Тul1pa) -Johdoshlu oi)asiga mmwb ko'p )1lltk o'sнnlt.klзr twi:unuga ЬrзdL
HTML РЕЗУЛЬТАТ
125
HTML РЕЗУЛЬТАТ
<p> <img src="images/lola.jpg" Lolз (Таliрз) loladoshlзroilзsigз шansub ko'p yillik o•simliklзr шrL.-umiga kirзdi.
alt="Тюльпаны" width="150"
height = "200" align = "top"/>
Тюльпан (Tulip) — многолетнее
растение, принадлежащее к
семейству тюльпановых.
</p>
HTML РЕЗУЛЬТАТ
126 ГЛАВА IV.
WWW-ТЕХНОЛОГИЯ И ЯЗЫК HTML
ПОДПИСИ ИЗОБРАЖЕНИЙ
<figure>
<img src="images/navruz.jpg" width="70%"
alt="Праздник Навруз"><br />
<figcaption>Праздник Навруз в
Узбекистане</figcaption>
</figure>
ПРАКТИЧЕСКАЯ РАБОТА
<р>
<br />
</p>
</figure>
1.6. Сохраните файл, перейдите в папку с именем «website». Просмотрите файл
photo.html в браузере.
2.1. Выполните задания уроков 21–24 и 28–30 модуля «Intro to HTML» курса
«Front-End Development Track».
128
ГЛАВА IV.
WWW-ТЕХНОЛОГИЯ И ЯЗЫК HTML
ВОПРОСЫ ПО ТЕМЕ
ш
1. Какие типы списков существуют?
2. Какой тег используется для размещения изображения?
3. Что такое отображение местоположения изображения и через какой атрибут
оно реализовано?
4. Какой тэг используется для названия картинки?
ДОМАШНЕЕ ЗАДАНИЕ
СОЗДАТЬ ТАБЛИЦУ
Таблица создается с помощью тега <table>…</table>. Каждый тег, принадлежащий
таблице, записывается последовательно внутри этих тегов.
129
<table>
<tr> <td>1.1</td> <td>1.2</td> <td>1.2</td> </tr>
~~11 1 1
--------- ------------------------------------------------------------------------------------------- ---------
<tr>
---------_~
<tr>
<td>1.1</td>
~ <td>1.2</td>
_______-_______-______________!J__________________________ Jl___ ______ ___ ___ _J_ _ _ _ _
<td>1.2</td> </tr>
<td>1.1</td>
11 <td>1.2</td>
1 <td>1.2</td>
1</tr>
</table>
</tr>
<tr align="center">
<th scope="row">Доход:</th>
<td bgcolor="white" align="right">60 000
</td> <td bgcolor="white" align="right ">80 000
</td>
</tr>
</table>
HTML
ПРАКТИЧЕСКАЯ РАБОТА
<html>
<head>
1.1. Создайте новую страницу home.html в папке <meta charset=“UTF-8" >
с именем «веб-сайт». <title>37-школа</title>
Для логотипа и слайдера получите изображение </head>
у преподавателя или загрузите подходящее <body>
изображение из Интернета. </body>
</html>
133
-9919().000.QO.OO
~ 42-i\lAKTAВ
Xush kelibsiz!
2.1. Выполните задания уроков 21–24 и 28–32 модуля «Intro to HTML» курса
«Front-End Development Track».
135
ДОМАШНЕЕ ЗАДАНИЕ
Балы учеников.
Имя Математика Физика Англ. язык Технологии Родной язык
Дильшод 85 87 88 92 88
Рустам 91 81 78 71 74
Джахангир 81 86 88 84 92
Темур 84 86 87 82 81
Сардор 71 79 82 88 89
ОСНОВНЫЕ ПОНЯТИЯ
ЭЛЕМЕНТ <INPUT>
Тот факт, что пароль скрыт на экране, не означает, что данные передаются на
сервер защищенным образом. Поэтому его не следует использовать для
отправки конфиденциальной информации, такой как номера кредитных карт.
HTML РЕЗУЛЬТАТ
ЗАПОМНИТЬ!
type = "submit". Когда атрибут type элемента ввода имеет значение «submit»,
создается кнопка для отправки данных на странице на сервер.
Атрибут name может использоваться или не использоваться.
Атрибут value представляет текст в кнопке. Если атрибут не используется, в
качестве имени кнопки выводится значение по умолчанию "submit".
<form action="http://ex.uz/file.html"
Faylni PDF variantda yuklang:
method="post">
<p>Загрузите файл в формате PDF:</p> 1 Choose File I No file chosen
<input type="file" name="file" /><br />
<input type="submit" value="Сохранить" />
J Saqlash
</form>
1
HTML РЕЗУЛЬТАТ
141
Когда опция в элементе <option> выбрана, значение, указанное в его атрибуте value,
отправляется на сервер. Если пользователь не выбирает параметр, то значение
первого элемента <option> отправляется на сервер. В результирующем списке
можно выбрать только один вариант. Это похоже на список радиокнопок, если вы
хотите, чтобы все варианты отображались на экране - добавьте радиокнопки, если
это очень длинный список (например, список стран), то добавьте выпадающий
список, это лучше.
HTML РЕЗУЛЬТАТ
<fieldset>
<legend>Контактная информация</legend> Bog'lanish шa'luшotlai-i
<label>Email:<br /> Eшail:
<input type="text" name="email" /></label><br />
<label>Mobile:<br /> Mobile:
HTML РЕЗУЛЬТАТ
ПРАКТИЧЕСКАЯ РАБОТА
<!--for student-->
<tr align="center">
<td colspan="5"><h1>Студентам!</h1></td>
</tr>
2. Создайте настраиваемое поле данных, сгруппировав поля элементов
формы после заголовка:
Кiшsiz?
@ O'q11vcl1i О Talaba О O'qittl\•cl1i
ВОПРОСЫ ПО ТЕМЕ
ш
1. Какие элементы формы существуют?
2. Какой элемент используется для создания многострочного поля?
3. Перечислите элементы HTML5.
4. Как сгруппировать элементы формы?
145
ДОМАШНЕЕ ЗАДАНИЕ
ОСНОВНЫЕ ПОНЯТИЯ
<p>Требуемые страницы:
<ul>
<li><a href="http://dr.rtm.uz"
target=" _ blank">Цифровые ресурсы</a></li> Требуемые страницы:
<li><a href="http://www.ziyonet.uz"
target=" _ blank">Ziyonet </a></li> • Цифровые ресурсы
<li><a href="http://www.eduportal.uz" • Ziyonet
target=" _ blank">Образовательный портал</a></li> • Образовательный портал
</ul>
</p>
HTML РЕЗУЛЬТАТ
Текст между открывающим тегом <a> и закрывающим тегом </a>
используется как гипертекст. Вы также можете поставить изображение
вместо гипертекста. В этом случае при нажатии на изображение оно будет
переходить по гиперссылке. Браузеры обычно отображают гипертекст синим
цветом с подчеркиванием.
147
1 ' 1
1 В·L form
1 1 ;
: 1 г·.·. forms.html
1 1
formsama l.html
: (В 1mages
~ - - - - - -1_-_-_-_-_-_-~-- ~ i..:."" news
news — папка новостей ! sport --------
j i ndexЗ . html ~---------~
является дочерней папкой
для папки website. ! index4.html sport – папка sports
является дочерней папкой
!:;• ..... sport.htm l для папки website.
foto.html
! hello.html
j home.html
! news.html
i-. index.html
1..... resurs.html
148 ГЛАВА IV.
WWW-ТЕХНОЛОГИЯ И ЯЗЫК HTML
1. Перейдите из файла index.html внутри папки веб-сайта к файлу внутри этой папки:
<a href="resources.html">Ресурсы</a>
<a href="news/news.html">Новости</a>
<a href="news/sport/sport.html">Спорт</a>
<a href="../../index.html">Главная</a>
<a href="../news.html">Новости</a>
<h1 id="top">Книги</h1>
<a href="#xamsa">Хамса</a><br />
<a href="#shaitanat">Сатана</a><br />
<a href="#diyonat">Религия</a><br /><br />
<h2 id="Хамза">Алишер Навои</h2>
<p>В этой книге описано содержание всех эпосов Алишера Навои «Хамза». </p>
<h2 id="shaitanat">Тахир Малик</h2>
149
HTML
HTML РЕЗУЛЬТАТ
РАБОТА С IFRAME
iframe создает небольшое окно, вырезанное из страницы, в котором может
отображаться другая страница. Термин iframe происходит от аббревиатуры
английского слова inline frame. iframes можно просматривать на различных
веб-сайтах. Один из распространенных способов — встроить карту Google на
страницу. Содержимым iframe (расположенного на том же сервере или в
другом месте веб-сайта) может быть любая HTML-страница.
iframe создаются с помощью тегов <iframe> .... </iframe>. Ниже приведены его атрибуты:
<iframe
src="http://maps.google.co.uk/maps?q=технопарк+тошкент&output=embed"
width="650" height="450">
</iframe>
HTML
DELТEPA qтexnoPark
•к-тЕРс Chorsu Market
MIRZO
РЕЗУЛЬТАТ - - -~ ---
UlUGBDC
ПРАКТИЧЕСКАЯ РАБОТА
<!--main-->
<tr align="center">
<td colspan="5"><h1>Xush kelibsiz!</h1></td>
</tr>
<!--news-->
<tr align="center">
<td colspan="5"><h1 id="news">Yangiliklar!</h1>
</td>
</tr>
<!--for teacher-->
<tr align="center">
<td colspan="5"><h1 id="teacher">O‘qituvchilarga!</h1>
</td>
</tr>
<!--for student-->
<tr>
<td colspan="5"><h1 id="student">O'quvchilarga!</h1>
</td>
</tr>
1.2. При нажатии на каждый раздел раздела меню установите гиперссылку для
перехода в нужный раздел страницы.
<!--menu-->
<tr align="center" bgcolor="green" height="80">
<td><a href="index.html"><font size="6" color="white">Bosh sahifa
</font></a></td>
<td><a href="#news"><font size="6" color="white">Yangiliklar</font>
</a></td>
<td><a href="#teacher"><font size="6" color="white">O'qituvchilar
</font></a></td>
<td><a href="#student"><font size="6" color="white">O'quvchilar</font>
</a></td>
<td><a href="foto.html"><font size="6" color="white">Fotolavhalar
</font></a></td>
</tr>
1.3. Перейдите в нижний колонтитул HTML-документа. Вставьте адрес вашей школы,
используя элемент <iframe>.
<!--footer-->
<tr align="center" bgcolor="green">
<td colspan="5">
<iframe
src="http://maps.google.co.uk/maps?q=school73+toshkent&output=embed"
width="100%" height="250" frameborder="0" scrolling="no">
</iframe>
<p><font face="Courier" size="2" color="white">Manzil:</font>
Maxtumquli ko‘chasi 15 uy </p>
<p><font face="Courier" size="2" color="white">Telefon:</font>
(71)111-22-33 </p>
</td>
</tr>
1.4. Сохраните файл, перейдите в папку с именем «website». Просмотрите файл
home.html в браузере.
2.1. Выполните задания уроков 25–27 модуля «Intro to HTML» курса "Front-End
Development Track".
152
ГЛАВА IV.
WWW-ТЕХНОЛОГИЯ И ЯЗЫК HTML
ВОПРОСЫ ПО ТЕМЕ
ш
1. Какой тег используется для гиперссылок?
2. Как перейти с одной страницы на другую?
3. Какие гиперссылки используются для отправки сообщений электронной
почты?
4. Что такое iframe и для чего он используется?
ДОМАШНЕЕ ЗАДАНИЕ
ОСНОВНЫЕ ПОНЯТИЯ
Плагин — это дополнительный программный модуль, расширяющий
возможности программ.
PDF (Portable Document Format) — кроссплатформенный открытый формат
электронных документов, первоначально разработанный Adobe Systems с
использованием функций языка PostScript.
153
<object type="application/pdf"
data="pdf/kitob.pdf"
width="800"
height="600">
</object>
HTML РЕЗУЛЬТАТ
Нет необходимости вводить значения для всех атрибутов, таких как элементы
controls, autoplay, loop, используемые с элементом <video> в HTML5. Эти
атрибуты подобны переключателям включения/выключения. Если атрибут
присутствует, он активирует эту опцию. Если атрибут не существует, параметр
опускается. Если браузер не поддерживает элемент <video> или формат
используемого видео, то отображаются те, что находятся между <video> —
открывающим и </video> — закрывающим тегами.
<video src="video/dars.mp4"
poster="images/dars.jpg"
width="800" height="600"
preload
controls
loop>
</video>
РЕЗУЛЬТАТ
HTML
155
ПРАКТИЧЕСКАЯ РАБОТА
ВОПРОСЫ ПО ТЕМЕ
ш
1. Какие теги используются для размещения видео на странице?
2. Какие теги используются для встраивания аудио на страницу?
3. Как встроить видео в нескольких форматах на страницу, чтобы открыть
дополнительное встроенное видео в браузере?
ДОМАШНЕЯ РАБОТА
4) HTTP д) Интернет-протокол.
157
а) <img "birthday.jpg">
б) <i>Поздравляем!<i>
<a href="file.html">giperma
в) </a href="file.html">
г) <p>Новый абзац<\p>
5. Дана структура папок, в которых находится сайт. Напишите код для перехода с
одной страницы на другую.
Пример: Напишите код для перехода от index.html (главная страница сайта) к
resource.html.
<a href="resource.html">...</a>
FOLDERS
6. Тег <img> используется для размещения изображения на странице. .., website
ИСПОЛЬЗОВАННАЯ ЛИТЕРАТУРА
wiley&sons, 2020.
Cho‘lpon, 2013
6. Russell Chun. Adobe Animate CC Classroom in a Book. Adobe Press PTG. 2019. - 535 p.
7. Shay Howe. LEARN to code HTML&CSS: develop&style websites. –USA.: New readers,
2020.
9. https://www.w3schools.com/css/
10. https://html5book.ru/
11. https://turbologo.ru/blog/podbor-cveta-logo/
12. https://helpx.adobe.com/ru/photoshop/using/color.html
13. https://helpx.adobe.com/ru/lightroom-cc/user-guide.html
14. https://www.wigglepixel.nl/en/blog/what-are-color-models/
15. http://ciframagazine.com/post.php?id=117
16. https://www.adobe.com/ru/products/animate.html
17. http://uroki-flash-as3.ru/
18. https://scientificrussia.ru/articles/chto-my-znaem-o-sovremennoj-matematike
19. https://aliexpress.ru
20. https://bestcrosswords.ru
21. https://znanio.ru/
159
Образовательное издание
(на русском)
Перевод:
Соловьёв К.В.
Главный редактор:
А. Зульпихаров
Художники-дизайнеры:
Джуманёзова Р.
Технический редактор:
Ш. Тураханов
Страницы:
К. Рауфов
Проверил:
Н. Айматова
При сдаче учебника в аренду и возврате в конце учебного года вышеприведенная таблица заполняется
классным руководителем в соответствии со следующими критериями оценки.
Неплохое Обложка помята, края слегка поцарапаны, есть отрыв от корпуса учебника,
ремонтировался пользователем удовлетворительно.