406 1 информатика. 9 кл. в 2ч. ч.1.-горячев, островский и др_2015 -288с

Москва
2015
Федеральный государственный образовательный стандарт
Образовательная система «Школа 2100»
А.В. Горячев, С.Л. Островский, А.В. Паволоцкий,
Т.Л. Чернышёва, Д.В. Широков
ИНФОРМАТИКА
9 класс • Часть 19 класс • Часть 1

УДК 373.167.1:004+004(075.3)
ББК 32.81я721
Г67
Федеральный государственный образовательный стандарт
Образовательная система «Школа 2100»
Совет координаторов предметных линий Образовательной системы «Школа 2100» –
лауреат премии Правительства РФ в области образования
за теоретическую разработку основ образовательной системы нового поколения
и её практическую реализацию в учебниках
На учебник получены положительные заключения
по результатам научной экспертизы (заключение РАН от 14.10.2011 № 10106-5215/449),
педагогической экспертизы (заключение РАН от 24.01.2014 № 000384)
и общественной экспертизы (заключение НП «Лига образования» от 30.01.2014 № 177)
Руководитель издательской программы –
чл.-корр. РАО, доктор пед. наук, проф. Р.Н. Бунеев
Авторский коллектив:
А.В. Гиглавый – научный редактор, А.В. Горячев – автор концепции курса, научный
руководитель, С.Л. Островский (часть 1: модуль «Хранение и обработка больших объ-
ёмов данных»), А.В. Паволоцкий (часть 2: модуль «Алгоритмизация и программирова-
ние»), А.А. Семёнов (часть 1: модуль «Моделирование»), Т.Л. Чернышёва (часть 2: модуль
«Знакомство с математической логикой»), Д.В. Широков (часть 1: модуль «Создание
электронных изданий»; часть 2: модуль «Web-конструирование. Основы мастерства»)
ISBN 978-5-85939-997-0
ISBN 978-5-85939-941-3 (ч. 1)
© Горячев А.В., Островский С.Л., Паволоцкий А.В.,
Чернышёва Т.Л., Широков Д.В., 2012
© ООО «Баласс», 2012
Данный учебник в целом и никакая его часть не могут быть
скопированы без разрешения владельца авторских прав

3
3
Дорогие читатели!
Перед вами учебник по информатике для 9-го класса, созданный в
Образовательной системе «Школа 2100». Надеемся, вы помните, что осо-
бое внимание мы уделяем применению компьютеров в наиболее общих, уни-
версальных действиях, которые выполняют люди самых разных профессий в
самых разных ситуациях. Принято выделять три основные группы таких уни-
версальных действий:
• познавательные – связанные с поиском информации и работой со зна-
ниями (например, это такие темы, как поиск информации, моделирова-
ние, применение интеллект-карт, работа с большим объёмом данных),
• коммуникативные – связанные с общением и сотрудничеством (напри-
мер, это такие темы, как общение через промежуточное звено в виде
печатных, мультимедийных и электронных изданий и общение напрямую:
общение в Сети, публичные выступления),
• организационные (или регулятивные) – связанные с постановкой цели,
созданием и реализацией плана действий, оцениванием полученного
результата (например, это такие темы, как управление личными проек-
тами, организация времени, принятие решений).
Овладение такими видами универсальных действий – важная задача обу-
чения в школе. Об этом прямо записано в Федеральном государственном
образовательном стандарте – документе, имеющем силу закона. В 7-м и
8-м классах вы уже научились применять компьютер как инструмент при
выполнении некоторых универсальных действий и имеете полную возмож-
ность применять свои умения на уроках по другим учебным дисциплинам. Мы
надеемся, что именно так вы и поступаете.
С помощью этого учебника вы продолжите осваивать новые умения, кото-
рые также сможете применять на других уроках. В модуле «Создание элек-
тронных публикаций» вы сможете научиться создавать свои первые сайты
для публикации в сети Интернет. С помощью модуля «Хранение и обработка
больших объёмов данных» вы сможете научиться создавать базы данных
для хранения большого объёма табличной информации и искать нужную
информацию в этих базах данных, составляя запросы на поиск. Изучая очень
интересный модуль «Управление личными проектами», вы задумаетесь над
тем, в какой последовательности надо браться за накопившиеся дела и поче-
му очерёдность выполнения дел должна быть такой. Вы сможете научиться
планировать текущую деятельность, включая учебную, для того чтобы ста-
вить цели и добиваться их достижения.

4
Как работать с учебником
Просмотрите «Содержание», перелистайте учебник. Вы заметите, что он
разделён на модули. Вы будете изучать модули в том порядке, который
предложит учитель.
Практически в каждом модуле мы предусмотрели пять основных пара-
графов. Изучив эти параграфы, вы напишете проверочную работу, по ито-
гам которой узнаете, как вы освоили новый материал: ниже необходимого
уровня, на необходимом или повышенном уровне. Далее вы будете рабо-
тать самостоятельно, выполняя по указанию учителя задания того уровня,
которого вы пока не достигли. Если проверочная работа покажет, что вы
освоили и повышенный уровень, то вы будете выполнять задания самого
высокого – максимального уровня. Учитель в любой момент может пред-
ложить вам перейти на выполнение заданий более высокого уровня. По
окончании выполнения заданий учебника учитель проведёт итоговую про-
верочную работу.
Далее в модуле расположены дополнительные параграфы, задания к
ним и проверочные работы. Основные параграфы выделены в учебнике
зелёной полосой вверху страницы, дополнительные – розовой полосой.
Дополнительный материал, который вы не изучите на уроках, вы сможе-
те использовать на факультативах и кружках.
На уроках информатики вы сможете освоить умения, которые помогут
вам более эффективно использовать компьютеры и компьютерные сети
для решения возникающих в вашей жизни задач. Кроме того, учитель
может решить, что вам надо освоить умения, которые помогут вам зани-
маться разработкой новых компьютерных программ или заложат основы
профессиональной деятельности, тесно связанной с применением ком-
пьютерной техники.
Кроме того, наш учебник, как и все учебники Образовательной системы
«Школа 2100», поможет вам в развитии универсальных учебных дей-
ствий. В учебнике вам могут встретиться задания, обозначенные кружка-
ми и фоном разного цвета – это условные знаки. Каждый цвет соответ-
ствует определённой группе умений:
 –организовывать свои действия: ставить цель, планировать работу,
действовать по плану, оценивать результат;
 –работать с информацией: самостоятельно находить, осмысливать и
использовать её;

5
5
 –общаться и взаимодействовать с другими людьми, владеть устной и
письменной речью, понимать других, договариваться, сотрудничать;
 –развивать качества своей личности, оценивать свои и чужие слова
и поступки;
так обозначены задания, где нужно применить разные группы
умений, мы называем их жизненными задачами и проектами.
Для успешного изучения информатики и овладения универсальными учеб-
ными действиями на уроках используется проблемно-диалогическая обра-
зовательная технология. Поэтому структура параграфа, где вводится новый
материал, имеет в учебнике следующий вид.
ПОСТАНОВКА ПРОБЛЕМЫ УРОКА
Это подведение к теме (вопросу, цели) урока: вы обсуждаете проблему в
предложенном материале и формулируете главный вопрос урока (всем клас-
сом, в группе или в паре). Сравните свой вариант вопроса с авторским.
Авторские вопросы к параграфам расположены в «Содержании» под назва-
ниями параграфов и выделены курсивом.
НЕОБХОДИМЫЕ БАЗОВЫЕ ЗНАНИЯ
Так обозначены вопросы и задания по изученному материалу, который вам
необходим для открытия нового знания.
РЕШЕНИЕ ПРОБЛЕМЫ
Вы в группе, в паре или совместно с учителем, ведя диалог, осуществляете
поиск решения проблемы. Для решения проблемы вы работаете с текстом.
ОБОБЩЕНИЕ НОВЫХ ЗНАНИЙ
На этом этапе вы формулируете вывод и проверяете свои предположения,
сравнивая их с авторским решением проблемы – научными формулировка-
ми правил или определений.
ПРИМЕНЕНИЕ ЗНАНИЙ
Так обозначены задания на применение новых знаний.

6
ОПЕРАЦИИ
Раздел «Операции» позволит вам научиться выполнять действия с ком-
пьютерными программами, необходимые для решения учебных задач.
В конце модуля вы найдёте раздел «Решаем жизненные задачи и работа-
ем над проектами». Задачи и проекты могут выполняться как на уроках, так и
на факультативах и кружках.
Там же находится очень важный раздел «О профессиях». Прочитайте его
и подумайте, какие профессии вам больше по душе.
Что такое жизненные задачи?
Это проблемы, с которыми вы можете столкнуться в жизни и для решения
которых вам понадобятся разные знания и умения. Они оформлены следу-
ющим образом:
Название задачи
Ваша роль: человек, в роли которого вы должны себя представить, решая
проблему.
Описание. Условия, в которых возникла проблема.
Задание. То, что нужно сделать и получить в итоге.
Что такое проект?
Это любое самостоятельное дело, которое предполагает:
1) оригинальный замысел (цель);
2) выполнение работы за определённый отрезок времени;
3) конкретный результат, представленный в итоге.
Что можно считать результатом проекта?
 Предметы, сделанные своими руками: макеты, модели или вещи для
практического использования.
 Мероприятия: спектакли, фотовыставки, викторины, конференции,
праздники и тому подобное – при условии, что они подготовлены самими
учениками.
 Информационные продукты: газеты, книжки, плакаты, карты, стихотво-
рения, рассказы, доклады, отчёты об исследованиях и т.д.
 Решение конкретных проблем: изменение, улучшение конкретной ситуа-
ции, например уборка мусора на школьном дворе.

7
7
Правила проектной деятельности
1. Каждый может начать собственный проект.
2. Каждый может объединиться с другими в ходе работы над проектом.
3. Каждый может выйти из проекта при условии, что он не подводит
других.
4. Каждый может не участвовать ни в одном проекте.
Как оценить свои учебные достижения?
Для этого надо освоить алгоритм самооценки:
1. Какова была цель задания (что нужно было получить в результате)?
2. Вы выполнили задание (получен ли результат)?
3. Вы выполнили задание верно или с ошибкой?
4. Вы выполнили задание самостоятельно или с чьей-то помощью?
5. Вспомните, как вы ставите отметки. Определите свою отметку.

8 Модуль 1. Создание электронных изданий

9
Модуль 1. Создание электронных изданий
Этот модуль поможет вам:
 познакомиться со структурой и возможностями гипертекста;
 понять, какими бывают web-страницы и для чего они предназна-
чены;
 ориентироваться в многообразии стилей оформления web-
страниц;
 создавать собственные web-страницы и редактировать суще-
ствующие;
 познакомиться с возможностями оформления web-страниц с
помощью каскадных таблиц стилей (CSS);
 превращать эскиз будущей web-страницы в html-документ.
Для этого вам надо научиться:
 иллюстрировать web-страницы различными изображениями;
 создавать навигацию между несколькими страницами;
 описывать стили внутри html-файлов и привязывать к web-
страницам внешние css-файлы;
 создавать css-файлы с помощью редакторов «Блокнот» и Simple
CSS;
 применять css-стили к любым элементам web-страниц.

Введение
Интернет, или Всемирная паутина (по-английски WWW – World Wide
Web), был придуман не так давно – в 1991 году, однако сегодня не так-то
просто даже представить себе какую-либо сферу человеческой деятельно-
сти, которую он не затронул. Мы читаем с его помощью последние новости,
заказываем в интернет-магазине книги и технику, публикуем свои фотогра-
фии, выбираем маршрут путешествия, покупаем билет на поезд и... Список
можно продолжать бесконечно! Интернет состоит из огромного количества
web-сайтов; обычно их называют просто сайтами. По подсчётам аналитиков,
на начало 2011 года в Интернете насчитывалось свыше 270 миллионов
сайтов. Каждый сайт представляет собой совокупность web-страниц.
Не секрет, что очень многое зависит от внешнего вида web-страниц того
или иного сайта. Например, как много времени посетители потратят на его
изучение: погрузятся «с головой», забыв обо всём на свете, или уже через
минуту будут делать то же самое, но уже на другом сайте. Сколько посетите-
лей станут впоследствии постоянными покупателями, клиентами, пациента-
ми, деловыми партнёрами. Именно поэтому web-дизайн, то есть деятель-
ность, направленная на разработку оптимальной структуры web-страниц и их
художественное оформление, представляет собой огромную индустрию все-
возможных web-студий, количество которых только в России измеряется
сотнями, а то и тысячами.
Вы тоже можете стать мастерами Интернета, создателями web-сайтов,
web-дизайнерами! В этом модуле вы научитесь создавать собственные web-
страницы и сайты, грамотно и привлекательно их оформлять.

11§ 1. Создаём первую web-страницу
§ 1. Создаём первую web-страницу
Прочитайте утверждение:
«В отличие от страниц печатных изданий, web-страницы не имеют
физических границ: можно сделать сколь угодно широкую и длинную
web-страницу. Зачем же разбивать сайт на несколько web-страниц,
когда всю информацию можно разместить на одной? Тогда и гипер-
ссылки не понадобятся!»
 Как вы считаете, это утверждение справедливо? Встречались ли вам
сайты, состоящие из одной большой web-страницы? А задумывались ли вы,
как создаются web-страницы? Какие вопросы, по-вашему мнению, будут
решены в этом параграфе? Сформулируйте их. Сравните свою формулиров-
ку с авторской (с. 284 учебника).
Какими способами можно оформлять текст?
Вспомните, как вы работали в текстовом редакторе Блокнот.
Количество web-страниц, составляющих сайт, определяется его назначе-
нием. Наверняка многим знакомо название Википе'дия. Это самая большая
в мире энциклопедия, размещённая в Интернете. Её материалы переведены
на сотни языков. Создать новую статью для Википедии или отредактировать
уже существующую может любой из нас: именно поэтому количество статей
исчисляется сотнями тысяч и даже миллионами. Главная web-страница рус-
скоязычной версии Википедии выглядит так (рис. 1.1).
Всё, что выделено здесь синим цветом, – это гиперссылки. Гиперссылки
ведут нас на другие web-страницы. Очевидно, что невероятное количество
данных (текста, картинок, аудио- и видеоматериалов) необходимо размещать
маленькими порциями на отдельных web-страницах (одна страница – одна
статья), поскольку найти что-либо на одной огромной странице будет крайне
сложно.
Страницы, связанные гиперссылками, образуют гипертекст. Иногда гипер-
текст определяют как «текст, выполняющий действия по запросу».
Тем не менее иногда действительно встречаются сайты, состоящие из
одной страницы. Как правило, это временные web-страницы, на которых
размещена информация о том, что полноценный сайт находится в разработ-
ке и появится по данному адресу спустя некоторое время.
Вместе с тем существует немало сайтов, которые содержат небольшое
количество web-страниц (пять–десять) в силу того, что выполняют предста-
вительскую функцию: кратко рассказывают о той или иной компании, про-
дукте или услуге. Посмотрите на рис. 1.2: на странице, посвящённой выставке

Хорошая статья
Мария дель Кармен Поло-и-Мартинес Вальднес - супруга
испанского диктатора Франсиско Франко, первая леди
Испании (1939-1975).
В период диктатуры Франко в Испании Кармен Поло
играла важную роль в общественной и политической
жизни государства. По словам генерала-лейтенанта
Франко Слагадо-Арухо, она “была единственным
лицом, обладавшим подлинным влиянием”на каудильо.
Книги не всегда писались черным
по белому (на илл.).
За пять лет, пока жених из
Белоруссии дожидался
на берегах Невы взросления своей
невесты, он стал фаворитом
императрицы, а она - невестой
императора.
Попав в Альмерию, выходец из Восточной Европы
5 раз пытался стать“делателем халифов”.
За четыре года немцы
пережили два
футбольных позора.
В одном из городов
Коммунистическая улица
ведет прямо к кладбищу, а
улицы Карла Маркса и
Энгельса заканчиваются
тупиком.
Гильотина, созданная
усилиями философа еще в
XVIII веке, ни на секунду не
не прекращает работать и
по сей день, несмотря на
возражения критиков.
Знаете ли вы?
Из новых статей Википедии
Избранная статья
Аристид (ок. 530-467 до н. э.) - афинский государственный деятель, полководец
греко-персидских войн (500-449 гг. до н. э.).
Свою политическую деятельность Аристид начал будучи сторонником
реформатора Клисфена из рода Алкмеонидов. Позже он отошёл от
группировки Алкмеонидов и занял позицию политика вне группировок -
позицию уникальную, отличавшую его от всех остальных.
(далее...)
Участие
На других языках
Добро пожаловать в Википедию,
свободную энциклопедию, которую может редактировать каждый.
Сейчас в Википедии 881 805 статей на русском языке.
(550)
Заглавная
Избранное
Википедия - свободная энциклопедия
http://ru.wikipedia.org
Страница Безопасность Сервис
Чтение
100%Интернет
Рис. 1.1. Главная страница русскоязычной Википедии в окне браузера
Microsoft Internet Explorer
Рис. 1.2. Страница сайта, посвящённого выставке российской электроники
в 2013 году
Яндекс Видео МузыкаСловариНовостиМаркетКартыПочтаИзбранное
www.new-electronics.info
Выставка“Новая электроника”
Выставка /“Новая электроника”
Диск Рекомендуемые узлы
- Windows Internet Explorer
Funmoods
newElectronics/RUSSIA
ENG о выставке заявка на участие посетителю участнику реклама ВЫХОД
НОВАЯ
ЭЛЕКТРОНИКА
2013
26 28_МАРТА
МОСКВА
ЭКСПОЦЕНТР
НА КРАСНОЙ ПРЕСНЕ
главная
российская
выставка
электронных
компонентов
и модулей
получите обновления
следите за новостями
напишитенам
Поиск по сайту
Новая продукция мировых
компаний
Насыщенная деловая программа
с участием ведущих специалистов
Расширенные возможности для
контактов и сотрудничества
Ведущие российские
поставщики электронных
компонентов и модулей
соберутся на международной выставке -
“Новая электроника”
НОВОСТИ читать все
14.06.2012
Состав посетителей выставки_
Закончена обработка анкет
посетителей выставки“Новая электроника”
09.06.2012
Даты проведения выставки в
2013 году
_
_
По многочисленным просьбам
На сайте, на странице заказа
Пригласительных билетов
Команда“ЧипЭКСПО”постоянно
работает на повышение
30.03.2012
Новые команды сервиса_
13.04.2012
Мобильный путеводитель_
100%

российской электроники, совсем немного гиперссылок, однако она изобилует
большими красочными иллюстрациями, разнообразием шрифтов и пр.
Часто маленькие сайты, рассказывающие о деятельности компании
(например, типографии или фотостудии), называют сайтами-визитками, а
сайты, рекламирующие товар, услугу или событие, – промо-сайтами. Сайт,
посвящённый выставке российской электроники, – это как раз промо-сайт.
Большой класс сайтов – это интернет-магазины. К их дизайну предъяв-
ляются повышенные требования, так как от того, насколько удобно просма-
тривать товары, формировать заказы и следить за их выполнением, напря-
мую зависит количество покупателей. Здесь необходимо находить золотую
середину между большим объёмом информации и красочным оформлением
страниц (рис. 1.3).
Своеобразный набор правил, который позволяет пре-
вращать обычный текст в гипертекст, называется язы-
ком гипертекстовой разметки, по-английски – hypertext
markup language, или сокращённо HTML. Его придумал
в 1989 году знаменитый британский учёный Тим Бернерс-
Ли, после чего до создания глобальной сети оставались
считаные месяцы.
Тим Бернерс-Ли
(род. в 1955)
Рис. 1.3. Главная страница интернет-магазина электроники и бытовой техники
«Стартех»
Москва Магазины
139 см / 55", Full HD 3D с технологией
динамической подсветки Dynamic
Edge LED, X-Reality, встроенный Wi-Fi
и интернет-телевидение (читать далее...)
Телевизоры и видео
Товарные категории
Аудиотехника
Ноутбуки, планшеты
и компьютеры
Телефоны
Фото- и видеокамеры
Бытовая техника
Товары со скидками
Скоро в продаже
Распродажи
Отложить Контакты Посчитать
Товар дня Акции
Акции
Текущие
Завершенные
Сервис Поиск товаров
Корзина 5
Вход на сайт Регистрация Помощь (495) 123-45-67
Яндекс Видео МузыкаСловариНовостиМаркетКартыПочтаИзбранное
http://starr_tech.ru
Диск Рекомендуемые узлыв Коллекция веб - фрагм...
- Windows Internet Explorer
Funmoods
интернет-магазин
электроника и бытовая техника

Однако просто языка HTML было недостаточно: сразу после его изобре-
тения возникла необходимость в программах, которые смогли бы «читать»
web-страницы, то есть понимать гипертекст. Такие программы получили
название бра'узеров. Первым браузером был Mosaic, разработанный тогда
же, когда и гипертекст, в начале 90-х годов XX века; в наши дни наибольшее
распространение получили такие браузеры, как Microsoft Internet Explorer,
Mozilla Firefox, Opera, Google Chrome и другие (рис. 1.4).
Браузер Microsoft Internet Explorer входит в состав операционной системы
Windows, остальные можно скачать и установить на компьютер бесплатно.
Одно из важных требований, предъявляемых к современным сайтам: они
должны отображаться одинаково во всех распространённых браузерах.
В противном случае, например, одни посетители увидят подпись к рисунку, а
другие – нет, что может вызвать некоторые недоразумения. Это требование
называется кроссбраузерностью.
Попробуем создать свою собственную web-страницу, пусть не сразу такую
же большую, сложную и красочную, как у интернет-магазина.
Логика языка HTML достаточно проста. Сначала указывается, какой
фрагмент web-страницы мы описываем, например абзац текста, заголовок,
иллюстрацию, таблицу. Затем приводится собственно сам этот фрагмент –
текст, рисунок, ссылка и пр. А в конце необходимо отметить, что описание
фрагмента завершено и можно переходить к следующему фрагменту. Таким
образом, элемент html-документа может выглядеть так:
<p>Александр Сергеевич Пушкин</p>
Здесь буква «p», заключённая в угловые скобки, показывает, что далее
последует текст обычного абзаца, а буква «p» со слэшем – что текст абза-
ца закончен. Web-страница с таким элементом будет отображаться в окне
браузера так (рис. 1.5).
Microsoft Internet
Explorer
Mozilla Firefox Opera Google Chrome
Рис. 1.4. Эмблемы популярных браузеров

Буквы или слова, заключённые в угловые скобки, в том числе <p> и
</p>, – это своеобразные команды языка HTML; они называются те' гами.
Тег, предшествующий описанию фрагмента web-страницы, называется
открывающим, а тег, завершающий это описание, – закрывающим: его
сопровождает слэш. В большинстве своём теги являются парными, то есть
открывающими и закрывающими, однако встречаются и одиночные теги,
например <br>, отвечающий за вставку пустой строки.
Вернёмся к нашей web-странице. Она, как и любой html-документ, поми-
мо тегов, описывающих фрагменты гипертекста, содержит также некоторый
объём служебной информации. Во-первых, чтобы браузер мог отличить web-
страницу от обычного текстового документа, в самом начале её кода откры-
вается, а в самом конце закрывается тег <html>. Далее всё, что находит-
ся внутри этого тега, делится на два больших раздела: head («заголовок») и
body («тело») (рис. 1.6).
Рис. 1.5. Простейшая web-страница
Untitled Document - Windows Internet Explorer
C:Samplespage.html
Избранное
Untitled Document
Файл Правка Вид Избранное Сервис Справка_ _ _ _ _ _
Александр Сергеевич Пушкин
Рис. 1.6. Структура html-документа
<html>
</html>
<head>
</head>
...
<body>
</body>

В разделе head указывается всё, что не будет отображаться непосред-
ственно в окне браузера: название страницы, ключевые слова, по которым её
сможет найти поисковая система (например, Яндекс или Google), кодировка
(набор символов), а также некоторые другие данные. Раздел body, напротив,
содержит то, что пользователь увидит в браузере, – текст, графику, ссылки.
Итак, ниже приведён html-код web-страницы о Пушкине. Единственный
непарный тег здесь – <meta ...>; в нём как раз и устанавливается кирилли-
ческая кодировка (windows-1251):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Тег <title> отвечает за название web-страницы, которое отобража-
ется в заголовке окна браузера. На рис. 1.5 мы видим именно эту фразу –
«Untitled Document». Поменяем её, например, так:
<title>Страница о Пушкине</title>
и заголовок окна браузера станет другим (рис. 1.7).
Рис. 1.7. Web-страница с новым названием
Страница о Пушкине - Windows Internet Explorer
C:Samplespage.html
Избранное
Страница о Пушкине
Файл Правка Вид Избранное Сервис Справка_ _ _ _ _ _

На теге <title> раздел head заканчивается; за ним следует раздел
body. Пока в нём только один элемент – абзац
Чтобы продолжить оформление страницы, рассмотрим ещё четыре часто
употребляемых тега, как парных, так и одиночных:
<h1></h1> – заголовок;
<br> – пустая строка;
<img src="..."> – изображение; внутри кавычек указывается назва-
ние соответствующего файла;
<a href="..."></a> – ссылка; внутри кавычек указывается адрес, по
которому нужно перейти при нажатии на ссылку.
 Как вы считаете, почему тег заголовка обозначается именно h1? Для
чего нужна в обозначении единица? Бывают ли теги h2, h3 и т.д.?
Стоит обратить внимание на то, что даже если в тексте абзаца исполь-
зовать более одного пробела между словами или намеренно поместить два
идущих подряд слова на разных строках кода, это никак не отразится на ото-
бражении страницы в браузере. Для переноса текста на новую строку в пре-
делах одного абзаца необходимо использовать упомянутый выше тег <br>,
а для добавления второго и последующих пробелов между словами – ком-
бинацию  (от англ. non-breakable space – неразрывный пробел). Так,
следующий фрагмент html-кода приведёт к появлению в окне браузера тек-
ста, показанного на рис. 1.8.
Рис. 1.8. Форматирование абзацев
Александр Сергеевич Пушкин - Windows Internet Explorer
C:SamplesПушкинpage.html
Страница о Пушкине
Избранное Файл Правка Вид Избранное Сервис Справка_ _ _ _ _ _
100%Готово
Александр Сергеевич Пушкин родился в 1799 году
родился в 1799 году
Ничего не изменилось
Добавились пробелы
Часть абзаца перенесена на
новую строку

<p>Александр Сергеевич Пушкин
родился в 1799 году</p>
<p>Александр
Сергеевич Пушкин родился в 1799 году</p>
<p>Александр Сергеевич Пушкин родился    
    в 1799
году</p>
<p>Александр Сергеевич Пушкин
<br>родился в 1799 году</p>
Существует множество разновидностей сайтов. Некоторые из них
состоят из нескольких web-страниц (например, сайты-визитки или промо-
сайты), а некоторые – из сотен, тысяч и даже сотен тысяч. В основе
любых web-страниц лежит гипертекст, закодированный на языке HTML.
Структурными единицами этого языка являются теги.
1. Создайте новую папку в том месте, где укажет учитель; имя для неё при-
думайте по своему усмотрению (например, «Моя первая страница»).
2. Откройте папку paragraph_1, скопируйте оба находящихся там файла
(robot-small.jpg и robot-big.jpg) в созданную вами папку.
3. Откройте стандартное приложение Блокнот.
4. Создайте заготовку будущего html-документа:
Формат
<head>
<meta http-equiv=”Content-Type” content=”text/html; char-set=windows-1251” />
<title></title>
</head>
<body>
</body>
</html>
СправкаВидПравка
Безымянный - Блокнот
Файл
<html>

5. Дайте документу название «Роботы» (тег <title>). С помощью тега
<h1> создайте заголовок «Какими бывают роботы»:
6. Далее создайте обычный абзац с текстом. Напишите в нём: «Роботы
бывают такими:». Затем вставьте пустую строку, а за ней – картинку с пер-
вым роботом (файл robot-small.jpg) с помощью тега <img>:
<img src="robot-small.jpg">
После этого завершите абзац (тег </p>).
7. Наконец, создайте новый абзац, а в нём – фразу «Или такими», которая
станет гиперссылкой на вторую картинку (файл robot-big.jpg):
<a href="robot-big.jpg">Или такими</a>
Не забудьте завершить абзац. Должно получиться так:
8. Сохраните этот html-документ в созданной вами папке, где уже лежат
обе картинки. При этом в поле Тип файла вместо Текстовые докумен-
ты (*.txt) необходимо выбрать Все файлы, а после имени (оно может быть
любым, но обязательно набранным латинскими буквами или цифрами;
выберем, например, имя robots) – написать расширение html:
<h1>Какими бывают роботы</h1>
Формат
<head>
<title>роботы<title>
</head>
</html>
Файл
<html>
<body>
</body>
<p>Роботы бывают такими:
<br>
<img src=”robot-small.jpg”>
</p>
<p><a href=”robot-big.jpg”>или такими</a></p>
<h1>Какими бывают роботы</h1>
Формат
<head>
<title>роботы<title>
</head>
</html>
Файл
<html>
<body>
</body>

9. Посмотрите: в созданной вами папке появился новый html-файл.
Откройте его и проверьте, всё ли отображается правильно. Работает ли
гиперссылка?
После сохранения документа его можно закрыть. При необходимости вы
всегда можете продолжить его редактирование. Для этого необходимо выде-
лить файл: с помощью правой кнопки мыши вызвать контекстное меню,
выбрать пункт Открыть с помощью и далее – Блокнот.
Сохранить как
Моя первая страница
Упорядочить
robot-small.jpg
robot-big.jpg
Новая папка
Избранное
Загрузки
Недавние мест
Рабочий стол
Библиотеки
Видео
Документы
Изображения
Музыка
Домашняя группа
Компьютер
Имя файла:
Тип файла: Все файлы
Скрыть папки Кодировка: Сохранить Отмена
robots.html
ANSI

21
§ 2. Создание web-страниц в редакторе Nvu
Специалист в области web-разработок: Количество тегов языка
HTML измеряется сотнями. Некоторые из них определяют тип фраг-
мента web-страницы (абзац, ссылка, изображение), другие позволяют
изменять цвет, размер, начертание и другие параметры текста и т.д.
Я знаю почти все теги!
Начинающий разработчик: Неужели, чтобы оформлять web-
страницы, нужно помнить все эти теги и каждый раз набирать их вруч-
ную в Блокноте?
 Как вы считаете, какие трудности могут возникнуть у разработчи-
ка web-страниц, если он будет пользоваться только программой Блок-
нот? Сформулируйте проблему урока. Сравните свой вариант с авторским
(с. 284 учебника).
Что такое теги? Какие теги вы уже знаете? (§ 1)
Из каких двух блоков состоит html-документ? (§ 1)
Конечно же, создавать web-страницы с помощью Блокнота,
набирая html-код вручную, не очень эффективно. Существуют
программы, которые помогают генерировать теги автомати-
чески, а разработчику остаётся только выбирать, что разме-
стить в той или иной области страницы: заголовок, абзац, кар-
тинку, таблицу и пр. Такие программы называются визуаль-
ными HTML-редакторами, и к их числу относится бесплатный
редактор Nvu.
Иногда визуальные редакторы называют также WYSIWYG-редакторами,
от первых букв английской фразы What You See Is What You Get – «Что ты
видишь, то ты и получишь». Произносится эта аббревиатура так: визиви' г.
WYSIWYG-редакторы позволяют уже на стадии разработки web-страницы
видеть, как она будет отображаться в браузере. Создавая страницу в
Блокноте, мы этой возможности не имели.
Запустив редактор Nvu, мы увидим большую белую область – это наша
web-страница, пока пустая. Под этой областью, в самом низу окна имеется
панель режимов редактирования, содержащая четыре вкладки (рис. 1.9):

• Обычный: отображаются фрагменты web-страницы с подсказками
редактора Nvu.
• HTML-теги: то же, что и Обычный, но рядом с каждым элементом стра-
ницы появляется флажок соответствующего тега.
• Код: отображается непосредственно html-код, как в Блокноте, только с
удобным цветовым оформлением тегов.
• Предварительный просмотр: web-страница отображается так, как она
будет выглядеть в браузере.
Рис. 1.9. Окно редактора Nvu
Файл Правка Вид Вставка Формат Таблица Инструменты Справка
Создать Открыть Сохранить Опубликовать Просмотр Якорь Ссылка Изображение Таблица Формы
_ _ _ _ _ _ _ _
без_имени - Nvu
Заголовок 1
(нет класса) Пропорциональный
(без_имени)
0px
Обычный HTML-теги Код Предварительный просмотр
Панель компоновки
Панель форматирования
Пока пустая web-страница
Режимы редактирования web-страницы
Рис. 1.10. Режим html-тегов
Создать Открыть Сохранить Опубликовать Просмотр Якорь Ссылка Изображение Таблица Формы
343px
BODY
H1
PP
Какими бывают роботы
Роботы бывают такими:
IMG
A Или такими

23
Например, если открыть созданную нами ранее страницу о роботах в Nvu и
перейти в режим html-тегов, мы увидим то, что изображено на рис. 1.10.
• Как вы думаете, в каких случаях удобен каждый из четырёх режи-
мов редактирования? Представьте, что вам попалась уже готовая
web-страница, содержащая ошибку в html-коде. Каким режимом
редактирования вы бы воспользовались, чтобы обнаружить эту
ошибку?
Над областью web-страницы расположено ещё несколько панелей, одна
из которых – панель компоновки. Именно она позволяет web-разработчику
добавлять рисунки, таблицы и гиперссылки, даже если он вообще не знаком с
языком HTML и его тегами. Панель форматирования позволяет работать с
оформлением текста: менять его цвет, начертание, размер, добавлять отсту-
пы и т.п.
Язык HTML обладает встроенными средствами оформления текста, одна-
ко их ассортимент очень невелик и не совсем удобен. Поэтому уже с конца
90-х годов XX века для этой цели используется преимущественно язык CSS
(от англ. Cascading Style Sheets – каскадные таблицы стилей). «Привязать»
стиль оформления к тому или иному тегу можно несколькими способами.
Один из них – перечислить необходимые характеристики в атрибуте style
непосредственно в открывающем теге. Например, если в редакторе Nvu соз-
дать абзац
а затем выделить его и на панели форматирования выбрать полужирное
начертание и изменить цвет текста на зелёный, то в режиме Обычный мы
увидим непосредственно видоизменённый абзац (рис. 1.11)
Рис. 1.11. Форматирование абзаца в редакторе Nvu
_ _ _ _ _ _ _ _
(без_имени)
0px
Создать Открыть Сохранить Опубликовать Просмотр Якорь Ссылка Изображение
Поменяли цвет Поменяли начертание

а в html-коде появятся следующие изменения:
<p style="color: rgb(0, 153, 0); font-weight:
bold;">Александр Сергеевич
Пушкин</p>
Таким образом, придать нужное оформление любому тегу можно с помо-
щью атрибута style. Схематично это выглядит так:
<тег style="характеристика1: значение; характеристи-
ка2: значение; характеристика3: значение; ... ">Содер-
жимое тега</тег>
Со многими характеристиками, которые используются при создании сти-
лей для web-страниц, а также с другими способами привязки стилей к тегам
можно познакомиться в § 6–10. Пока же мы не будем углубляться в эти
вопросы, довольствуясь тем, что автоматически генерирует панель форма-
тирования Nvu.
Для создания web-страниц можно использовать визуальные HTML-
редакторы, такие, как Nvu. Они позволяют просматривать как html-код,
так и непосредственно внешний вид редактируемой web-страницы. Для
оформления элементов web-страниц используются стили, описываемые
языком CSS. Стиль можно привязать к конкретному тегу с помощью атри-
бута style.
1. Создайте новую папку в том месте, где укажет учитель; название для неё
придумайте по своему усмотрению.
2. Откройте папку paragraph_2_3, скопируйте все находящиеся там файлы
в созданную вами папку.
3. Откройте файл pushkin.html в редакторе Nvu.
4. Сделайте первую строку («Александр Сергеевич Пушкин») заголовком
вместо абзаца.
5. Поменяйте цвет этого заголовка с чёрного на любой другой.
6. Вместо строки «[рисунок юного Пушкина]» вставьте рисунок pushkin-
young.jpg. Для этого удалите строку, затем воспользуйтесь кнопкой Изобра-
жение на панели компоновки. В появившемся окне в поле Альтернативный
текст напишите «Юный Пушкин». Альтернативный текст позволяет пользова-

25
телям получить представление о том, что изображено на рисунке, даже если
тот по каким-то причинам не загрузился (например, в случае очень медлен-
ного или дорогого соединения с Интернетом, когда в браузере намеренно
отключают загрузку изображений). В принципе, вполне можно обойтись и без
альтернативного текста.
7. Подпись к этому рисунку («Саша Пушкин в детские годы») оформите или
другим цветом, или шрифтом меньшего размера (кнопка A на панели фор-
матирования).
8. Проделайте то же самое с гравюрой с изображением Царскосельского
лицея: удалите текст в квадратных скобках, вставьте рисунок lyceum-1.jpg,
оформите подрисуночную подпись по своему усмотрению.
9. Последнюю строку («Рисунок Царскосельского лицея, сделанный
Пушкиным-лицеистом») сделайте ссылкой на файл lyceum-2.jpg. Для этого
выделите её (полностью или частично – например, только слова «Рисунок
Царскосельского лицея»), затем воспользуйтесь кнопкой Ссылка на панели
компоновки.
10. Сохраните web-страницу. Посмотрите, как она выглядит в различных
вкладках панели режимов редактирования. Как изменился код? Появились
ли css-стили в качестве атрибутов некоторых тегов? Перейдите из редакто-
ра Nvu в созданную вами папку и откройте web-страницу с помощью брау-
зера. Всё ли отображается корректно?
ОПЕРАЦИИ
Смена формата абзаца
1. Поместить курсор в любую часть абзаца.
2. В самом низу окна Nvu найти строку состояния. Она отображает «путь»
к тому тегу, который соответствует местонахождению курсора, начиная
с тега <body>. Нажать на тег <p>, абзац выделится.
3. Поменять на панели форматирования пункт Абзац на пункт Заголо-
вок 1.
Обычный HTML-теги Код Предварительный просмотр
<body> <p>
Строка состояния

Изменение цвета
1. Выделить нужный фрагмент текста.
2. Выбрать указатель цвета на панели форматирования.
Добавление изображения
1. Нажать кнопку Изображение Изображение на панели компоновки.
2. В появившемся окне нажать кнопку Выбрать файл, указать нужный
рисунок, затем добавить альтернативный текст или отказаться от него.
Александр Сергеевич Пушкин[ile:/.../pushkin.html] - Nvu
_ _ _ _ _ _ _ _
37px
Создать Открыть Сохранить Опубликовать Просмотр Якорь Ссылка Изображение Таблица Формы Орфография Печать
Абзац
Абзац
Обычный текст
Адрес
Заданный формат
Генерируемое содержимое (div)
Выбор формата абзаца
_ _ _ _ _ _ _ _
Смиренная, одетая убого,
Но видом величавая жена
Над школою надзор хранила строго.
Александр Сергеевич Пушкин[ile:/.../pushkin.html] - Nvu
ин
ню я;
было много;

27
Добавление ссылки
1. Нажать кнопку Ссылка Ссылка на панели компоновки.
2. В появившемся окне нажать кнопку Выбрать файл, а затем в поле Тип
файлов указать Изображения или Все файлы. Далее выбрать требуемый
рисунок.
Адрес Размеры Внешний вид Ссылка
Адрес изображения:_
pushkin-young.jpg
Относительный URL
Всплывающая подсказка:_
Альтернативный текст:
Не использовать альтернативный текст
Предварительный просмотр изображения
Исходный размер:
Ширина: 238
Высота: 300
Выбрать файл..._
Дополнительно..._
Отмена Справка_ОК
Свойства изображения

§ 3. Оформление web-страницы
с помощью таблиц
Откройте web-страницу об А.С. Пушкине, созданную при изучении
§ 2. Посмотрите на расположение текста и картинок, оцените количе-
ство «пустого места» на странице.
• Как вы считаете, можно ли считать подобное размещение данных ра-
циональным? Сформулируйте тему урока в виде вопроса. Сравните свой
вариант с авторским (с. 284 учебника).
Как создавать новые web-страницы и редактировать существующие в
программе Nvu? (§ 2)
На нашей web-странице со стихами и картинками действительно очень
много свободного места: она неоправданно «вытянута» по вертикали, а
справа образуется широкая «белая полоса». Для того чтобы оптимизиро-
вать страницу, необходимо научиться располагать элементы не только друг
за другом, но и рядом, параллельно: в две–три колонки. Например, страница
могла бы выглядеть так, как показано на рис. 1.12.
На помощь приходят таблицы – очень удобные и простые средства язы-
ка HTML. Идея заключается в следующем: необходимо представить web-
страницу в виде нескольких таблиц с невидимыми границами так, чтобы
каждый блок, будь то фрагмент текста, изображение, пиктограмма и т.д.,
располагался в какой-либо из ячеек таблицы.
Таблица имеет следующий формат: сначала открывается тег <table>,
затем тег <tr>, отвечающий за строку таблицы, а затем – тег <td>, отве-
чающий за ячейку в данной строке. Как только ячейка описана, тег <td>
закрывается и открывается заново для описания второй ячейки. После того
как все ячейки на текущей строке описаны, закрывается тег <tr>, затем он
же открывается вновь для описания следующей строки. Когда описаны все
строки, закрывается тег <table> (рис. 1.13).

29§ 3. Оформление web-страницы с помощью таблиц
Рис. 1.12. Web-страница с более продуманным расположением элементов
В начале жизни школу помню я,
Там нас, детей беспечных, было много;
Неровная и резвая семья.
Толпою нашею окружена,
Приятным, сладким голосом, бывало,
С младенцами беседует она.
Ее чела я помню покрывало
И очи светлые, как небеса.
Но я вникал в ее беседы мало.
В 1811 году Пушкин становится одним из первых тридцати воспитанников знаменитого Царскосельского Императорского лицея.
Спустя годы поэт написал в своем стихотворении “19 октября” следующие строки:
Друзья мои,прекрасен наш союз!
Он как душа неразделим и вечен -
Неколебим, свободен и беспечен
Срастался он под сенью дружных муз.
Куда бы нас ни бросила судьбина,
И счастие куда б ни повело,
Всё те же мы: нам целый мир чужбина;
Отечество нам Царское село.
Стихотворение
о школе
о лицейских годах
Саша Пушкин в детские годы
Царскосельский лицей. Гравюра Ж. Мойера
C:SamplesПушкинpushkin.html
100%Готово
Рисунок Царскосельского лицея,
сделанный Пушкиным - лицеистом
_
Рис. 1.13. Структура таблицы в языке HTML
<tr>
<tr>
</tr>
</tr>
...
...
<td>
...
...
</td>
</td>
<td>
<table>
<table>
вся таблица
ячейки в пределах
одной строки
строки

• Напишите html-код следующей таблицы:
А Б
В Г
Д Е
Несколько идущих подряд строк можно объединять в блоки; им соответ-
ствует тег <tbody>. Это целесообразно делать, если, например, первая по-
ловина таблицы имеет одно оформление, а вторая – другое (рис. 1.14).
Если же оформление всех строк одинаково, то блоки можно и не созда-
вать, однако редактор Nvu по умолчанию всегда создаёт один блок при гене-
рировании новых таблиц.
Ширину таблицы можно указывать или в пикселях, или в процентах от раз-
мера той области web-страницы, где она расположена. В первом случае ши-
рина таблицы будет фиксированной, во втором – будет зависеть от ширины
окна браузера (рис. 1.15).
Рис. 1.15. Способы задания ширины таблицы
окно браузера окно браузера
700 пикселей 100%
Рис. 1.14. Структура таблицы с разбиением на блоки
разные блоки
со строками
<table>
</table>
<tr>
</tr>
...
...
<tr>
</tr>
<tbody>
</tbody>
...
<tbody>
</tbody>
...

Ширину столбцов таблицы можно также указывать или в пикселях, или в
процентах от ширины всей таблицы. Причём, если ширину не указать вооб-
ще, браузер сам назначит её, в зависимости от содержимого ячеек: те ячей-
ки, где много текста или большие изображения, будут широкими, другие –
узкими. Можно указать ширину всех столбцов, кроме одного (любого), тогда
браузер также самостоятельно вычислит её. Например, если три столбца из
четырёх имеют ширину 20%, то четвёртый получит значение 100% – 3•20% =
= 40% (рис. 1.16).
Высоту таблицы обычно не указывают: она складывается из высот отдель-
ных строк. Высота строки, в свою очередь, определяется содержимым (объ-
ёмом текста, размером картинок и пр.) или же может быть задана в пикселях.
Ячейки таблицы можно объединять, но иногда это приводит к тому, что
таблица, особенно большая, начинает «разъезжаться», то есть выверенные
значения ширины некоторых ячеек самопроизвольно нарушаются. По воз-
можности лучше избегать объединения ячеек.
Итак, представим оптимизированную структуру нашей web-страницы (см.
рис. 1.12) в форме таблиц. Сделать это можно разными способами, один из
них показан на рис. 1.17.
Ширину всей таблицы целесообразно назначить равной 100%. Первый
столбец, в котором содержатся только пояснения к стихотворениям, должен
быть небольшим – около 15%. Ширина второго столбца определится браузе-
ром автоматически (85%), её можно не задавать. В правых ячейках второй и
четвёртой строк нужно создать ещё по одной таблице (шириной также 100%),
чтобы разместить на одном уровне стихотворения и иллюстрации (рис. 1.18).
В этих таблицах для первого столбца можно отвести примерно 35–40%
ширины.
Стоит также отметить, что задание ширины таблиц с помощью процентов
позволяет web-страницам как бы «подстраиваться» под ширину окна брау-
зера: такие страницы часто называют «резиновыми». Их немного сложнее
разрабатывать, поскольку внешний вид «резинового» сайта должен быть
привлекательным как на маленьких экранах нетбуков, так и на больших ши-
Рис. 1.16. Браузер автоматически рассчитывает недостающую ширину
20 % 20 % 20 % 100 _ 60 = 40 %

Рис. 1.18. Разбиение web-страницы на ячейки таблицы (продолжение)
100%Готово
Друзья мои, прекрасен наш союз!
о школе
_
Первый столбец
Первый столбец
Второй столбец
Второй столбец
Рис. 1.17. Разбиение web-страницы на ячейки таблицы (начало)
о школе
100%Готово
Друзья мои, прекрасен наш союз!
_
Первый столбец Второй столбец
Первая строка
Вторая строка

рокоэкранных мониторах. Но зато всё свободное место используется мак-
симально эффективно. Страницы с фиксированной шириной таблиц раз-
рабатывать легче: они не меняются в зависимости от разрешения экра-
на, но, как правило, содержат много пустого места. В последнее время всё
чаще предпочтение отдаётся «резиновым» страницам.
Для более рационального размещения элементов на web-страницах
можно использовать таблицы. В зависимости от того, как задаётся шири-
на таблиц, страницы делятся на два вида: «резиновые» (ширина в процен-
тах) и фиксированные (ширина в пикселях). В «резиновых» страницах сво-
бодное место используется эффективнее.
1. Откройте в редакторе Nvu файл pushkin.html, с которым вы работали на
прошлом занятии.
2. Создайте новую web-страницу. Сразу сохраните эту страницу в той
же папке, где расположен файл pushkin.html, под новым именем, например
pushkin-new.html (в названии допустимы только латинские буквы, цифры и
некоторые знаки – дефис, подчёркивание, скобки и др.). При сохранении Nvu
предложит ввести заголовок, то есть содержимое тега <title>:
Придумайте заголовок и введите его.
3. Создайте на новой web-странице таблицу шириной 100% с четырьмя
строками и двумя столбцами в соответствии с рис. 1.17.
4. Двойной щелчок мышью в верхней левой ячейке вызовет окно со
свойствами таблицы. Укажите в нём ширину ячейки (15%). Ширина этой
верхней ячейки распространится на весь столбец. Теперь перейди-
те ко второй ячейке первого столбца, последовательно нажимая кнопку
Следующая. Установите в ней вертикальное выравнивание содержимого
Введите заголовок для текущей страницы.
Он поможет идентифицировать страницу в заголовке окна и закладках.
Заголовок страницы
OK Отмена

по верхнему краю. То же самое проделайте с нижней (четвёртой) ячейкой
первого столбца.
5. Создайте две пояснительные надписи в левом столбце, оформите их
с помощью панели форматирования. Перейдите к странице pushkin.html
(вкладка чуть ниже панели форматирования), выделите заголовок «Алек-
сандр Сергеевич Пушкин», скопируйте его (комбинация клавиш Ctrl+C), вер-
нитесь к новой странице, вставьте заголовок в первую ячейку второго столб-
ца (Ctrl+V). Проделайте то же самое с абзацем «В 1811 году Пушкин стано-
вится одним из первых...» – вставьте его в третью ячейку второго столбца.
Должно получиться примерно так:
6. Создайте две новые таблицы в соответствии с рис. 1.18.
7. Установите в каждой из ячеек новых таблиц вертикальное выравнива-
ние по верхнему краю. Перенесите со страницы pushkin.html все оставшиеся
данные.
8. Сохраните web-страницу и откройте её в браузере. Оцените результат.
9. Может оказаться полезным изменить расстояние между ячейками та-
блицы, если фрагменты текста из соседних ячеек будут прилегать друг к дру-
гу слишком близко.
(без_имени)
Файл Правка Вид Вставка Формат Таблица Инструменты Справка_ _ _ _ _ _ _ _
Таблица Формы Орфография
Абзац
Печать
1035px
60px
Обычный HTML - теги Код Предварительный просмотр
<body> <table> <tbody> <tr> <td> <p>
Стихотворение о школе
В 1811 году Пушкин становится одним из первых тридцати воспитанников знаменитого
Царскосельского Императорского лицея. Спустя годы поэт написал в своем стихотворении “19 октября”
следующие строки:
Стихотворение о
лицейских друзьях

ОПЕРАЦИИ
Создание новой страницы
Нажать кнопку Создать Создать на панели компоновки.
Создание таблицы
1. Нажать кнопку Таблица Таблица на панели компоновки.
2. В появившемся окне выбрать вкладку Точная и указать необходимые
параметры таблицы. В поле Рамка должно стоять значение 0, иначе у табли-
цы появятся видимые границы.
Создание новой таблицы внутри ячейки существующей таблицы
1. Если курсор уже стоит в ячейке существующей таблицы, то кнопка Таб-
лица на панели компоновки будет вызывать окно свойств непосредственно
данной таблицы. Поэтому для создания новой таблицы сначала надо вызвать
щелчком правой кнопкой мыши контекстное меню.
2. В контекстном меню выбрать пункт Вставить таблицу, затем – пункт
Таблица.
Вставка таблицы
Простая Точная Ячейка
Размер
Строк:
Столбцов:
Ширина:
Рамка:
Дополнительно...
_
_
_
_
_
4
2
100 % от размера окна
0
ОтменаOK
(без_имени)
Файл Правка Вид Вставка Формат Таблица Инструменты Справка_ _ _ _ _ _ _ _
Таблица Формы Орфография
Абзац
Печать
1035px
51px46px44px26px
Стихотворение о школе
В 1811 году Пушкин становится одним из первых тридцати воспитанников знаменитого
Царского Императорского лицея.Спустя годы поэт написал в своем стихотворении “19 октября”
следующие строки:
Стихотворение о
лицейских друзьях
Вставить таблицу
Отменить
Выделить все
Прервать стили текста
Создать ссылку...
Прервать ссылку
Удалить якори с именами
Свойства ячейки таблицы...
Выделить таблицу
Удалить таблицу
Объединить с ячейкой справа
Цвет фона ячейки или таблицы
_
_
_
__
_
_
_
_
_
_
_
Таблица...
Строка сверху
Строка снизу
Столбец до
Столбец после
Ячейка до
Ячейка после_
_
_
_
_
_
_
Курсор

Изменение ширины столбца
1. Выполнить двойной щелчок мышью внутри любой ячейки.
2. Указать значение ширины.
3. Нажать кнопку Применить.
4. Чтобы перейти к следующей ячейке, нажать кнопку Следующая.
Изменение вертикального выравнивания
1. Выполнить двойной щелчок мышью внутри любой ячейки.
2. Указать значение выравнивания.
3. Нажать кнопку Применить.
пикселов
Обычный
Таблица Ячейки
Выделение
Предыдущая_ _Следующая
Будут применены текущие изменения
перед преобразованием выделения
Размер
Высота:
Ширина:
Стиль ячейки:
Цвет фона: (Будет виден фон таблицы)
Разбивка текста на строки: Разбить на строки
15 % от размера таблицы
Выравнивание содержимого
Вертикальное:
Горизонтальное:
Посередине
Влево
Установите флажки, чтобы определить, какие свойства будут применены ко всем выбранным
ячейкам
Дополнительно_
OK Применить_ Отмена Справка_
Свойства таблицы
Ячейки
пикселов
Обычный
Выделение
Предыдущая_ _Следующая
Будут применены текущие изменения
перед преобразованием выделения
Размер
Высота:
Ширина:
Стиль ячейки:
Цвет фона: (Будет виден фон таблицы)
Разбивка текста на строки: Разбить на строки
Выравнивание содержимого
Вертикальное:
Горизонтальное:
Вверху
Влево
Установите флажки, чтобы определить, какие свойства будут применены ко всем выбранным
ячейкам
Ячейки
и се в

Изменение полей ячеек
1. Вызвать окно со свойствами таблицы – выполнить двойной щелчок мы-
шью внутри любой ячейки.
2. Выбрать вкладку Таблица.
3. Установить нужные значения полей.
Размер
Строки:
Столбцы:
Высота:
Ширна:
4
2
_
_
_
_ 100
% от размера окна
% от размера окна
Обрамления и поля
Рамка:
Поля:
Поля внутри ячейки:
_
_
_
0
2
2
пикселов
пикселов между ячейками
пикселов между рамкой ячейки и ее содержимым
Выравнивание таблицы:_ Влево Заголовок:_ Нет
Цвет фона: (будет виден фон страницы)

406 1 информатика. 9 кл. в 2ч. ч.1.-горячев, островский и др_2015 -288с

406 1 информатика. 9 кл. в 2ч. ч.1.-горячев, островский и др_2015 -288с

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to 406 1 информатика. 9 кл. в 2ч. ч.1.-горячев, островский и др_2015 -288с

Similar to 406 1 информатика. 9 кл. в 2ч. ч.1.-горячев, островский и др_2015 -288с (20)

406 1 информатика. 9 кл. в 2ч. ч.1.-горячев, островский и др_2015 -288с