Задания по теме урока

Если необходимо, скачайте файлы для заданий по ссылке (скачать).

Задание. Создайте фрагмент сайта “Замки Беларуси”

Страницы связаны гиперссылками. Для оформления сайта создайте и подключите к веб-страницам внешнюю таблицу стилей style.css.

Внешняя таблица стилей должна содержать описание следующих свойств:

• В качестве фона использовать изображение свитка из файла svitok.gif
• заголовок первого уровня: размер – 20 пикселей, выравнивание по центру; цвет текста – красный
• абзац: размер шрифта – 14 пикселей;
• таблица: 90% ширины окна, без границ;
• гиперссылка: размер шрифта 16 пикселей; оформление – без эффекта (т.е. удалить подчеркивание гиперссылки)

Фрагмент сайта содержит 5 страниц: главная страница (zamki.html) с изображениями и 4 зависимые страницы с описанием замков (1.html, 2.html, 3.html, 4.html).

Главная страница zamki.html:

• Заголовок первого уровня – Замки Беларуси
• Таблица – состоит из 4-х ячеек. В ячейках разместить картинки с замками и подписями.
• Создать гиперссылки для переходов со страницы zamki.html на соответствующую страницу.

Оформить страницы 1.html, 2.html, 3.html, 4.html в одном стиле:

• Заголовок первого уровня – название замка
• Изображение – фото замка. Установить ширину 80%, выравнивание по центру
• Абзац – описание замка
• Гиперссылки и изображения стрелок из соответствующих файлов

Домашнее задание

§ 11 учебного пособия, ответить на вопросы

 

Задания по теме урока

Если необходимо, скачайте файлы для заданий по ссылке (скачать)

Задание. Создайте фрагмент сайта “Цитаты Джозефа Аддисона”

Страницы связаны гиперссылками. Для оформления сайта создайте и подключите к веб-страницам внешнюю таблицу стилей style.css.

Внешняя таблица стилей должна содержать описание следующих свойств:

• В качестве фона используйте файл fon.jpg
• заголовок первого уровня: размер – 20 пикселей, выравнивание по центру; цвет текста – темно-синий
• абзац: размер шрифта – 16 пикселей;
• гиперссылка: размер шрифта 14 пикселей;
• горизонтальная линия: цвет – темно-серый.

Главная страница addison.htm:

Логическая структура документа:

• Заголовок первого уровня
• Горизонтальная линия
• Вставьте рисунки 1.jpg, 2.jpg, 3.jpg, 4.jpg
• Горизонтальная линия
• Абзац
• Горизонтальная линия
• Заголовок второго уровня
• Гиперссылка

Создайте HTML-документ answer.html по следующему образцу и установите ссылки между документами:

Домашнее задание

§ 11 учебного пособия, ответить на вопросы

Цель урока: изучить инструменты создания сайтов при визуальном веб-конструировании.

Визуальные web-редакторы – хороший способ сэкономить время на изучении web-программирования и быстро сделать сайт, наполнив его всей необходимой информацией. С одной стороны, для создания web-проекта с помощью подобной программы не нужно иметь специальных знаний и быть программистом. С другой стороны, приложения такого типа дают простор для творчества и гарантируют, что сайт не будет выглядеть точно так же, как тысячи других. В основе работы визуальных web-редакторов лежит свойство WYSIWYG – What You See Is What You Get (что видишь, то и получишь). Иными словами, в процессе редактирования web-страницы выглядят примерно так же, как будут отображаться в браузере.

Наиболее распространенные конструкторы сайтов (ссылки на веб-ресурсы):

• Tilda 
• SITE123
• Google Sites

Задания по теме урока

Информацию, которая поможет при выполнении заданий можно скачать по ссылке (скачать).

Задание. Разработать тематический сайт по теме “85-летие образования Витебской области“, используя конструктор сайтов.

Требования:

1. Не менее 5 страниц.
2. Наличие на страницах изображений, видео и аудио.
3. На главной странице краткое раскрыть тему, чему посвящен сайт.
4. В “подвале” сайта указать: школа, кто выполнил.
5. Приветствуется наличие встроенных объектов: слайдеров, тестов, викторин по теме, карт и др.

Пример: Фестивали Республики Беларусь

Домашнее задание

§ 10 учебного пособия, ответить на вопросы

Цель урока: изучить использование аудио и видео на веб-страницах.

 

Мультимедиа – компьютерная технология, обеспечивающая с помощью технических и программных средств совместное использование текста, графики, звука, анимации и видео.
Мультимедиа делают веб-страницу наиболее яркой и наглядной.

 Для вставки видео служит парный тег <audio> с обязательным атрибутом src, который указывает на аудиофайл. Для вставки видеоролика предназначен парный тег <video> с обязательным атрибутом src, который указывает на видеофайл.

Задания по теме урока

Если необходимо, скачайте файлы для заданий по ссылке (скачать).

Задание 1. Создайте веб-страницу, посвященную государственной символике Республики Беларусь, с именем Belarus.htm по образцу.

Текст взять из файла Государственная символика.txt.

1. Заголовок окна веб-страницы: Государственная символика Республики Беларусь.

2. Заголовок первого уровня: Государственная символика Республики Беларусь

3. Заголовок второго уровня: Государственный флаг Республики Беларусь.

4. Абзац с текстом о государственном флаге.

5. Видеоролик из файла flag.mp4. Отобразить на веб-странице панель управления видеороликом.

6. Заголовок второго уровня: Государственный герб Республики Беларусь.

7. Абзац с текстом о государственном гербе.

8. Изображение из файла emblem.jpg. Ширина изображения 40%, рамка 3 px.

9. Заголовок второго уровня: Государственный гимн Республики Беларусь.

10. Абзац с текстом о государственном гимне.

11. Аудио из файла anthem.mp3. Отобразить на веб-странице панель управления аудио.

Задание 2. Создайте внешнюю таблицу стилей style15.css. Не забудьте ее подключить в Belarus.htm

Внешняя таблица стилей должна содержать описание следующих свойств:

• тело документа: цвет фона – Snow;
• заголовок первого уровня: цвет текста — Navy; выравнивание по центру;
• заголовок второго уровня: цвет текста — DarkGreen; выравнивание по центру;
• абзац: цвет текста — DarkSlateGrey; выравнивание по ширине;

Подсказка! Как сделать картинки в HTML по центру.

Чтобы картинка разместилась по центру HTML документа, заключите тег картинки в известный вам тег <center></center>

<center><img src = “kartinka.jpg”></center>

Аналогично можно поступить и с другими элементами веб-страницы: например, с видео и аудио.

Домашнее задание

§ 9.2 учебного пособия, ответить на вопросы

Цель урока: изучить использование изображений на веб-страницах.

 

Тег <IMG> позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег <IMG> является одиночным.

Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. 

Атрибуты изображения

Задания по теме урока

Если необходимо, скачайте файлы для заданий по ссылке (скачать).

Задание 1.

Используя текст файла Брест.txt, создайте веб-страницу Brest.html с применением встроенной таблицы стилей:

Создайте логическую разметку (структура) веб-страницы. Для этого расставьте парные теги <h1>, <h2>, <h3>, <img>, <p> в текстовом документе Брест.txt:

• заголовок первого уровня: Приглашаем на экскурсию!;
• заголовок второго уровня: Никто не забыт, ничто не забыто!;
• заголовок третьего уровня: объявление об экскурсии;
• изображение из файла Brest.jpg;
• абзац: текст о Брестской крепости.

Создайте встроенную таблицу стилей, которая должна содержать описание следующих свойств:

• тело документа: фоновый цвет страницы — lavender; шрифт — Times;
• заголовок первого уровня: цвет текста — красный; размер шрифта — 32 пикселя; выравнивание по центру;
• заголовок второго уровня: размер шрифта — 24 пикселя; стиль начертания шрифта — курсив; выравнивание по правому краю;
• заголовок третьего уровня: размер шрифта — 22 пикселя; жирность шрифта — bold;
  выравнивание по центру;
• изображение: выравнивание – по центру, рамка — двойная сплошная линия черного цвета, т.е. border-style:double; толщина рамки — thick, т.е. border-width:thick;
• абзац: размер шрифта — 20 пикселей; выравнивание по ширине.

Для абзаца создайте класс с именем text. Т.е. запишите p.text { font-size: 20px; text-align: justify; }

Задание 2.

Используя текст файла Полоцк.txt, создайте веб-страницу Polotsk.html с применением внешней таблицы стилей

Логическая разметка (структура
веб-страницы):

• заголовок первого уровня: Музей белорусского книгопечатания;
• три абзаца с текстом о музее;
• два изображения из файлов Polotsk1.jpg, Polotsk2.jpg.

Внешняя таблица стилей должна содержать описание следующих свойств:

• тело документа: фоновое изображение из файла fon.jpg;
• заголовок первого уровня: шрифт – Arial; размер шрифта – 30 пикселей; цвет текста — красный; выравнивание по центру;
• абзац: размер шрифта — 18 пикселей; цвет текста — navy; стиль начертания шрифта – наклонный; выравнивание по ширине; отступ первой строки текста — 40 пикселей;
• изображение: выравнивание – по центру, рамка — сплошная линия; толщина рамки — 5 пикселей; цвет рамки — темно-красный.

Задание 4. Создайте веб-страницу, на которой разместите информацию об одной
достопримечательности города Витебска.

Логическая разметка (структура веб-страницы):

• заголовок первого уровня: Название достопримечательности:
• изображение достопримечательности:
• один абзац с названием достопримечательности;
• один абзац с кратким описанием особенности достопримечательности.

Домашнее задание

§ 9.1 учебного пособия, ответить на вопросы

Цель урока: изучить работу с каскадными таблицами стилей.

Таблицы используются для оформления таблично заданной информации, а также служат инструментом для табличной верстки. Использование таблиц — известный способ верстки, применяемый на множестве сайтов. Такая таблица фактически представляет собой модульную сетку, в которой удобно размещать отдельные элементы веб-страницы.

Таблица состоит из строк, строки состоят из ячеек.

Атрибуты тегов <table>, <tr>, <td>

Задания по теме урока

Если необходимо, скачайте файлы для заданий по ссылке (скачать).

Задание 1. Разберите пример создания таблицы из двух строк и трех столбцов. Таблица имеет ширину 50%, синюю рамку толщиной 3 пикселя, желтый цвет фона.

<html>
<head><title>Таблица</title></head>
<body>
    <table width=50%  border=3  bordercolor=blue bgcolor=yellow>
    <tr>
      <td>Ячейка 1-1</td>
      <td>Ячейка 1-2</td>
      <td>Ячейка 1-3</td>
    </tr>
    <tr>
      <td>Ячейка 2-1</td>
      <td>Ячейка 2-2</td>
      <td>Ячейка 2-3</td>
    </tr>
    </table>
</body>
</html>

Задание 2. Создайте веб-страницу с именем table.htm, содержащую таблицу с формулами площадей фигур, с применением встроенной таблицы стилей.

Логическая разметка (структура веб-страницы):

• заголовок первого уровня: Формулы площадей;
• таблица из четырех строк и двух столбцов; выравнивание по горизонтали по центру.

Таблица стилей должна содержать описание следующих свойств:

• заголовок первого уровня: цвет текста – синий; выравнивание по центру; размер шрифта – 30px;
• заголовок второго уровня: цвет – красный; размер шрифта – 20 пикселя;
• таблица: ширина 70%; фоновое изображение из файла kletka.gif; рамка – сплошная линия темно-синего цвета толщиной 2 пикселя; шрифт размером 16 пикселей с полужирным начертанием; выравнивание текста по центру;
• ячейка таблицы: ширина 50%; рамка – сплошная линия зеленого цвета толщиной 2 пикселя.

Задание 3. Используя текст файла Стихи о весне.txt, создайте веб-страницу с именем spring.htm, которая содержит две колонки текста. Для разделения текста на колонки создайте таблицу с невидимой границей.

Логическая разметка (структура веб-страницы):

• заголовок первого уровня: Стихи о весне;
• таблица из одной строки, строка состоит из двух ячеек;
• в ячейках: заголовок второго уровня (название стихотворения), затем предварительно отформатированный текст (стихотворение).

Таблица стилей должна содержать описание следующих свойств:

• тело документа: фоновое изображение из файла fon.jpg;
• заголовок первого уровня: выравнивание по центру;
• таблица: ширина 100%, шрифт размером 18 пикселей;

• ячейка таблицы: ширина 50%.

Задание4. Создайте веб-страницу с именем slovar.htm, с таблицей, содержащей фрагмент русско-белорусско-английского словаря из нескольких слов.

Например:

Домашнее задание

§ 8 учебного пособия, ответить на вопросы

Форма отправки файлов

Форма видна только зарегистрированным пользователям.

Цель урока: изучить работу с каскадными таблицами стилей.

CSS (от англ.Cascading Style Sheets – каскадные таблицы стилей) — формальный язык описания оформления веб-страниц, написанных с помощью языка разметки HTML. С помощью HTML описывается структура веб-страницы, а с помощью CSS — ее внешний вид.

Способы подключения CSS к документу

Таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных текстовых файлах, имеющих формат CSS. Правила внешней таблицы стилей применяются ко всем страницам сайта.

1) Встроенная таблица стилей описывается в самом веб-документе. Она располагается между тегами <style>и</style>, которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>. Тег <style>  должен иметь  обязательный атрибут type=”text/css”. 

Пример:

<html>
<head>
    <style type="text/css">
       p {color: gray;}
    </style>
</head>

<body>
  <p>Серый цвет текста во всех абзацах</p>
</body>
</html>

2) Внешняя таблица стилей представляет собой текстовый файл с расширением .css. Файл создается в редакторе кода, так же как и HTML-страница. Внешняя таблица стилей подключается к веб-документу с помощью тега <link>, располагающегося в этом документе между тегами <head>и</head>. Тег <link> должен иметь два атрибута: rel=”stylesheet”, который указывает тип ссылки, и href, имеющий значением адрес файла стилей.

Пример:

Код HTML ­страницы:

<html>
<head>
   <link rel="stylesheet" href="style.css">
</head>
   <body> <p> Текст </p></body>
</html>

CSS ­файл:

BODY{
background: #ffffcc;
color: #000000;
}

P{
font-style : italic;
font-size : 16px;
}

Синтаксис описания правил стиля

Каждое правило CSS из таблицы стилей имеет две основные части – селектор и блок объявлений.

В левой части правила указывается селектор, который определяет, на какие элементы документа распространяется правило.

В правой части правила располагается блок объявлений. Он помещается в фигурные скобки и, в свою очередь, состоит из одного или более объявлений, разделенных знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделенных знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.

селектор, селектор {
  свойство: значение;
  свойство: значение;}

Пример:

P, H3 {
   font-size: 14px;
   color: #ff0000;}

Свойства и значения селекторов

Задания по теме урока

Если необходимо, скачайте файлы для заданий по ссылке (скачать).

Задание 1. Разберите пример создания веб-страницы с применением встроенной таблицы стилей. Наберите текст (используйте текст из файла Стихи.txt) и сохраните документ в вашей рабочей папке с именем first_love.htm.

<html>
<head> <title> Встроенная таблица стилей </title>
<style type="text/css">
  body{
    background-image: url("fon.jpg"); color: navy;}
  H1{
    font-size: 28px;
    font-style: oblique;
    text-align: center; }
  H2{
    font-size: 14px;
    text-align: right; }
  p{
    font-size: 20px;
    font-family: Times;
    font-style: italic;
    font-weight: bolder; 
    text-align:center; }
</style>
</head>
<body>
  <h1>Не повторяется такое никогда</h1>
  <h2>Автор текста: Пляцковский М.</h2>
  <h2>Композитор: Туликов С.</h2> 
  <pre>
  <p>
  В школьное окно смотрят облака,
  Бесконечным кажется урок.
  Слышно, как скрипит перышко слегка
  И ложатся строчки на листок. </p>
  <p>
  Первая любовь... Звонкие года...
  В лужах голубых стекляшки льда...
  Не повторяется, не повторяется,
  Не повторяется такое никогда! </p>
</body>
</html>

Результат применения стиля показан на рисунке

Задание 2. В файле first_love.htm измените параметры стилей:

• заголовок первого уровня: размер шрифта – 40 пикселей;
• абзац: размер шрифта – 18 пикселей, семейство шрифта – Arial.

Проследите, как изменилось отображение документа при изменении параметров стилей.

Задание 3. Используя текст из файла Загадки.txt, создайте веб-страницу zagadki.htm с применением встроенной таблицы стилей.

Логическая разметка (структура веб-страницы):

• заголовок первого уровня: Интеллектуальная разминка;
• названия загадок – заголовки второго уровня;
• загадки – абзацы;
• отгадки – заголовки пятого уровня;
• между загадками – горизонтальные линии.

Таблица стилей должна содержать описание следующих свойств:

• тело документа: цвет фона страницы – #EFDFCF (бежевый); цвет текста – темно-синий;
• заголовок первого уровня: цвет – красный; выравнивание по центру;
• заголовок второго уровня: цвет – синий; выравнивание по центру;
• абзац: шрифт размером 17px; выравнивание по левому краю;
• заголовок пятого уровня: выравнивание по правому краю;
• горизонтальная линия: цвет – красный, ширина 90 %, высота 5px.

Задание 4. Разберите пример создания веб-страницы facts.htm с использованием внешней таблицы стилей style.css.

Код HTML страницы facts.htm:

<html>
<head> 
  <title> Использование внешней таблицы стилей</title> 
  <link rel="stylesheet"  href="style.css">
</head>
<body>
  <h1>Интересные факты о числах</h1>
  <h2>Знаете ли вы, что...</h2>
  <ul>
    <li> Термин «цифра» в переводе с арабского означает «ноль»
    <li> 1111111 x 1111111 = 1234567654321
    <li> Ни один лист бумаги невозможно сложить пополам больше семи раз
    <li> Число Гугол представляет собой единицу со 100 нулями
  </ul>
</body>
</html>

Содержимое файла style.css:

body{
  background: #cccccc;
  color:  #000000;}
H1{
  font-size: 36px;
  text-align: center;}
H2{
  font-size: 30px;
  text-align: center;}
li{
  list-style-type: circle;
  font-size: 20px;}

Результат применения стиля показан на рисунке

Задание 5. Создайте веб-страницу с применением встроенной таблицы стилей

Таблица стилей должна содержать описание следующих свойств:

• тело документа: цвет фона страницы – черный;
• цвет текста – белый;
• заголовок первого уровня: размер шрифта – 38 пикселей; выравнивание по центру;
• абзац: размер шрифта – 30 пикселей; жирность шрифта – bold; выравнивание по центру; голубая рамка из точек толщиной thick.

Домашнее задание

§ 8 учебного пособия, ответить на вопросы

Цель урока: изучить создание ссылок на веб-страницах.

Для создания гиперссылок на языке HTML служит парный тег <а>…</a> с обязательным атрибутом href, который указывает адрес перехода.

Задания по теме урока

Если необходимо, скачайте файлы для заданий по ссылке (скачать).

Задание 1. Рассмотрите примеры тегов для создания гиперссылок

Задание 2. Создайте главную страницу с именем links.html.

Добавьте атрибут тега H1, чтобы заголовок был выровнен по центру страницы. Задайте фон страницы (любой цвет, который вам нравится).

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

• web-page.html – страница, на которой вы даете определение термина “веб-страница”;
• htmlang.html – страница, на которой даете определение языка HTML;
• tag.html – страница, на которой рассказываете, что такое “тег”

На каждой из страниц web-page.html, htmlang.html, tag.html создайте ссылку На главную, позволяющую вернуться на страницу links.html.

Задание 3.

Используя текст из файла достопримечательности Витебска, создайте фрагмент сайта, состоящий из 6 страниц. Главная страница Vitebsk.htm содержит заголовок первого уровня и нумерованный список достопримечательностей. Элемент списка – гиперссылка на страницу, описывающую данную достопримечательность.

Каждая из страниц ratusha.htm, sobor.htm, shagal.htm, park.htm, teatr.htm, описывающих достопримечательности содержит название (заголовок первого уровня), абзацы текста и гиперссылку на главную страницу Vitebsk.htm.

Задание 4. Создайте веб-страницу stihi.htm. Добавьте в начало страницы оглавление, содержащее названия стихов, которые будут являться ссылкой для перехода к нужному стихотворению.

ШАРИК

Мне купили шарик синий.

Был он легкий и воздушный.

Ах, какой он был красивый,

Но ужасно непослушный.

Он все время в небо рвался,

Быть покорным не хотел.

И, едва я зазевался,

Шарик взял – и улетел.

Помашу ему ладошкой,

Хоть и жаль его немножко.

ПОЛОСАТАЯ КОШКА

Наша кошка полосата,

Словно зебра, как матрос.

Долго думал я, ребята,

Разгадал секрет полос:

Видно даром не теряла

Время бабушка её –

Внучке-кошечке вязала

Полосатое бельё.

Домашнее задание

§ 7.4 учебного пособия, ответить на вопросы

Цель урока: познакомиться с элементы оформления веб-страниц, научиться размещать текст на веб-странице.

Цвет в языке HTML может быть задан одним из двух способов:

1. названием (например: aqua, black, blue, cyan, red и др.);
2. шестнадцатеричным кодом, определяющим цвет в модели RGB. Цвет ко­дируется последовательностью из трех пар символов. Каждая представляет собой щестнадцатеричноезначение яркости каждой из трех составляющих цвета (красной, зеленой и синей) в диапазоне от нуля (00) до 255 (FF) (цифры шестнадцатеричной системы счисления: 0,1,2,3,4,5,6,7,8,9, А, В,С, D, Е, F).

Таблица цветов: перейти по ссылке.

Цвет и фон страницы

Структура страницы

Форматирование текста

Задания по теме урока

Если необходимо, скачайте файлы для заданий по ссылке (скачать).

Задание 1.

Создайте веб-страницу с зеленым фоном и белым текстом, как показано на рисунке. Скачать текст

Задание 2. Создайте веб-страницу Стихотворение.htm

1. Заголовок окна веб-страницы: Стихи.
2. Цвет страницы установите LightYellow, цвет текста страницы – фиолетовый.
3. Название стихотворения – заголовок первого уровня, выравнивание по центру.
4. Год написания – абзац, размер шрифта +2.
5. Заключите текст стихотворения в теги предварительного отформатированного текста.
6. Первое четверостишие – абзац с выравниванием по правому краю. Первые две строки – полужирное начертание, вторые две строки – курсив. Цвет текста – зеленый.
7. Второй абзац без атрибутов, но обратите внимание на расположение слов. Цвет текста – красный.

Задание 3. Создайте веб-страницу formula.htm

Этапы разработки сайта:

1. Определение тематики, целей и задач сайта;
2. проектирование структуры сайта и связей между страницами;
3. подготовка материалов (текста и графики);
4. описание логической структуры веб-страниц (логическая разметка) с по описание внешнего вида веб-страниц (задание стилей) с помощью каскадных таблиц стилей CSS;
5. тестирование сайта и размещение в сети.

Для создания веб-страниц используется язык разметки гипертекстовых документов HTML (HyperText Markup Language). Веб-страница представляет собой документ, в котором расставлены метки языка HTML. В качестве инструментов веб-конструирования могут использоваться текстовый редактор Блокнот, ре­дакторы визуального конструирования (Adobe Dreamweaver, NamoWebEditor и др.) и другие программы.

НТML-документы сохраняются с расширением .htm или .html. После сохранения результат работы можно просмотреть с помощью браузера.

Разметка документа — описание различных фрагментов документа и их взаимного расположения. Разметка выполняется с помощью тегов.

Парный тег: <тег> фрагмент, текста</тег>

Непарный тег: <тег> фрагмент текста.

Атрибуты (параметры) уточняют действие тегов:

• каждый тег имеет свой набор допустимых атрибутов;
• атрибуты указывают в открывающем теге;
• можно использовать несколько атрибутов, разделенных пробелами;
• атрибуты записываются в виде пары: имя=значение, причем нечисловое значение заключается в кавычки;
• если значение атрибута содержит только буквы английского алфавита, цифры, дефис и не содержит пробелов, кавычки можно опустить.

Вложение тегов

Теги могут вкладываться друг в друга иерархически, но без пересечений, т. е. допустимо вложение вида:

<тег1> <тег2>…</тег2> </тег1>

Структура документа HTML

<html>
   <head>
      <title>Заголовок окна</title>
   </head>
   <body>
	Содержание документа
   </body>
</html>

Задания по теме урока

Задание 1.

Откройте Notepad++, скопируйте предложенный код:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body bgcolor="aqua">
  <h1 align="center">
	<font="Arial" color="red"><u>Заголовок</u></font>
  </h1>
  <!-- Комментарий -->
  <p><font size="+2"><b>Первый</b> абзац.</font></p>
  <p align="center">Второй <i>абзац.</i></p>
  <a href="#">А это ссылка</a>
  <br>
  <hr>
  <!-- Простой список -->
  <h3>Список</h3>
  <ul type="square">
	<li>первый элемент списка</li>
	<li>второй элемент списка</li>
	<li>А вот вложенный список:
		<ol>
		<li>номер один</li>
		<li>номер два</li>
		</ol>
	</li>
	<li>продолжим список дальше</li>
  </ul>
  <hr>
  <h4><font color="red">Уравнение:</font></h4>
  x<sup>2</sup> + 14 = 48 
 </body>
</html>

Сохраните этот файл  как html-документ  и  откройте его  в  браузере.

В контекстном меню  открытой  в  браузере  веб-страницы  выберите “Просмотреть код страницы” или  воспользуйтесь  комбинацией клавиш Ctrl + U.

Обратите внимание, что при просмотре кода страницы в браузере выделяются теги, атрибуты, значения атрибутов и содержимое тегов.

Задание 2.

• Откройте программу Notepad++.
• Сохраните документ с именем Фамилия.html в своей рабочей папке.
• Сверните документ.
• Откройте созданный файл Фамилия.html с помощью браузера.
  На панели задач появится кнопка, соответствующая веб-странице.
  Далее работайте, переключаясь между окнами Notepad++ и браузера.
• Перейдите в Notepad++, наберите текст странички.

• Перейдите в окно браузера. Обновите страницу, нажав кнопку Обновить на Панели инструментов (или клавишу F5).

Задание 3.

Создайте веб-страницу с именем personal.htm

1. Заголовок окна веб-страницы: Моя персональная страничка 
2. Текст страницы: ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (Укажите свою фамилию, имя и отчество).
3. Мои увлечения …
4. Мои друзья …
5. Дополните текст информацией о себе, которой хотите поделиться.

Домашнее задание

§ 6 учебного пособия, ответить на вопросы

Цель урока: изучить создание приложения “Графический редактор” в среде разработки PascalABC.NET.

Задания по теме урока

Задание 1. Создание приложения «Графический редактор»

Создать и сохранить проект «Графический редактор»

• Разместить на форму
  •  рабочую  область для рисования (из группы «стандартные элементы управления») — PictureBox; компоненты, отображающие выбранный цвет для рисования и цвет фона (из группы «контейнеры») — Panel1, Panel2; компоненты для подписи кнопок (из группы «стандартные элементы управления») Lable1 и Lable2;Переименовать свойство «текст» Lable1 и Lable2 на имя Цвет1 и Цвет 2;компонент выбора цвета (из группы «диалоговые окна») — ColorDialog1;кнопки для смены цвета (из группы «стандартные элементы управления») button1 и button2 ;переименовать свойство «текст» button1 на (Сменить цвет1) и button2 на (Сменить цвет2) ;компонент выбора толщины линии (из группы «стандартные элементы управления») — numericUpDown1;компонент главное меню (из группы «меню и панели инструментов») — menuStrip1;
  • компоненты для работы с файлами (из группы «диалоговые окна»)  —  OpenFileDialog1, SaveFileDialog1;

• Установить значение свойства BackColor у компонентов Panel1 и Panel2 — Black и White соответственно.
• У свойств Value и Minimum для компонента numericUpDown1 установить значение 1.
• Создать структуру меню для menuStrip1;

Написать обработчики событий для компонентов:

Описание глобальных переменных
implementation
var gr: Graphics; 
    bm: Bitmap; 
    p_c: Pen;
    s_b: SolidBrush; 
    c_f, c_b: Color; 
    w: decimal;
    x1, y1, x2, y2: integer; m_d : boolean;
    F_N :string;

Обработчик событий Load формы
procedure Form1.Form1_Load(sender: Object; e: EventArgs);
begin
bm := new Bitmap(pictureBox1.Width,pictureBox1.Height); pictureBox1.Image := (Image)(bm);
gr := Graphics.FromImage(pictureBox1.Image); gr.Clear(Color.White);
  gr := pictureBox1.CreateGraphics; 
  c_f := Color.Black;
  p_c := new Pen(c_f, 1);
  c_b := Color.White;
  s_b := new SolidBrush(c_b);
end;

Обработчик событий numericUpDown1
procedure Form1.numericUpDown1_ValueChanged(sender: Object; e: EventArgs);
begin
  p_c.Dispose;
  w := numericUpDown1.Value;
  p_c := new Pen(c_f, (integer)(w));
end;

Обработчик событий кнопки Сменить цвет 1
procedure Form1.button1_Click(sender: Object; e: EventArgs);
begin
  colorDialog1.ShowDialog();
  c_f:=colorDialog1.color;
  w:=numericUpDown1.Value;
  p_c.Dispose;
  p_c:=new Pen(c_f, (integer) (w));
  panel1.BackColor:=c_f;
end;

Обработчик событий кнопки Сменить цвет 2
procedure Form1.button2_Click(sender: Object; e: EventArgs);
begin
  colorDialog1.ShowDialog(); 
  c_b := colorDialog1.color; s_b.Dispose;
  s_b := new SolidBrush(c_b);
  panel2.BackColor := c_b;
end;


Обработчик событий pictureBox1 событие MouseDown
procedure Form1.pictureBox1_MouseDown(sender: Object; e: MouseEventArgs);
begin
  m_d := true;
  x1 := e.x; y1 := e.y;
end;

Обработчик событий pictureBox1 событие MouseUp
procedure Form1.pictureBox1_MouseUp(sender: Object; e: MouseEventArgs);
begin
  m_d:=false;
end;

Обработчик событий pictureBox1 событие MouseMove
procedure Form1.pictureBox1_MouseMove(sender: Object; e: MouseEventArgs);
begin
  if m_d then
  begin
    gr.DrawLine(p_c,x1,y1,e.X,e.Y);
  end;
  //запомнить координаты для рисования следующего отрезка
  x1:=e.X; y1:=e.Y;
end;


Обработчик событий Файл - Новый 
procedure Form1.toolStripMenuItem4_Click(sender: Object; e: EventArgs);
begin
  //Файл - Новый
  gr:=pictureBox1.CreateGraphics;
  gr.Clear(c_b);
end;

Обработчик событий Файл - Открыть 
procedure Form1.toolStripMenuItem5_Click(sender: Object; e: EventArgs);
begin
  //Файл - Открыть
  openFileDialog1.ShowDialog();
  F_N:=openFileDialog1.FileName;
  Text:='Графический редактор '+F_N;
  PictureBox1.Load(F_N);
end;


Обработчик событий Файл - Сохранить 
procedure Form1.toolStripMenuItem6_Click(sender: Object; e: EventArgs);
begin
  //Файл - Сохранить
  saveFileDialog1.ShowDialog();
  F_N:=saveFileDialog1.FileName;
  PictureBox1.Image.Save(F_N);
  Text:='Графический редактор '+F_N;
end;

Обработчик событий Файл - Выход 
procedure Form1.toolStripMenuItem8_Click(sender: Object; e: EventArgs);
begin
  //Файл - Выход
  close;
end;

Обработчик событий Цвет - Цвет линии
procedure Form1.toolStripMenuItem9_Click(sender: Object; e: EventArgs);
begin
  //Цвет - Цвет линии
  ColorDialog1.ShowDialog();
  c_f:=colorDialog1.Color;
  w:=numericUpDown1.Value;
  p_c.Dispose;
  p_c:=new Pen(c_f,(integer) (w));
  panel1.BackColor:=c_f;
end;

Обработчик событий Цвет - Заливки
procedure Form1.toolStripMenuItem10_Click(sender: Object; e: EventArgs);
begin
  //Цвет - Цвет заливки
  ColorDialog1.ShowDialog();
  c_b:=colorDialog1.Color;
  s_b.Dispose;
  s_b:=new SolidBrush (c_b);
  panel2.BackColor:=c_b;
end;

Сохранить изменения и протестировать приложение.

Домашнее задание

§ 5 учебного пособия, ответить на вопросы после параграфа.

 

Задания по теме урока

Создание Блокнота.

1. Создать и сохранить проект «Блокнот»
2. Переименовать свойство «текст» имя Блокнот
3. Разместить на форму рабочую  область  для  текста  — TextBox1;
4. Разместить на форму диалоги  работы  с  файлами  —OpenFileDialog1, SaveFileDialog1;
5. Разместить на форму диалоги  для  настройки  внешнего  вида  приложения  —  FontDialog1, ColorDialog1;
6. Разместить на форму главное меню — MenuStrip1
7. Установит значение «истина» для свойства MultiLine

8. У свойства Dock значение Fill

 9. Установить значение вертикальная полоса для свойства ScrollBars – Vertical

10. Заполнить структуру меню MenuStrip1

11.  Написать обработчики пунктов меню:

Файл — Новый
implementation
var s:string;
var F_N:String;
procedure Form1.toolStripMenuItem4_Click(sender: Object; e: EventArgs);
begin
  TextBox1.Clear;
end;

Файл — Открыть
procedure Form1.toolStripMenuItem5_Click(sender: Object; e: EventArgs);
begin
  openFileDialog1.ShowDialog();
  s:=openFileDialog1.FileName;
  Text:='Блокнот '+s;
  TextBox1.Lines:=ReadAllLines(s);
end;

Файл — Сохранить
procedure Form1.toolStripMenuItem6_Click(sender: Object; e: EventArgs);
begin
  saveFileDialog1.ShowDialog();
  F_N:=saveFileDialog1.FileName;
  WriteAllLines(F_N,TextBox1.Lines);
    Text:='Блокнот '+F_N;
end;

Файл — Выход
procedure Form1.toolStripMenuItem7_Click(sender: Object; e: EventArgs);
begin
  close;
end;

Формат — Шрифт
procedure Form1.toolStripMenuItem8_Click(sender: Object; e: EventArgs);
begin
  fontDialog1.ShowDialog();
  TextBox1.Font:=fontDialog1.
  Font;
end;

Формат — Цвет текста      
procedure Form1.toolStripMenuItem9_Click(sender: Object; e: EventArgs);
begin
  colorDialog1.ShowDialog();
  TextBox1.ForeColor:=colorDialog1.Color;
end;

Формат — Цвет фона
procedure Form1.toolStripMenuItem10_Click(sender: Object; e: EventArgs);
begin
  colorDialog1.ShowDialog();
  TextBox1.BackColor:=colorDialog1.Color;
end;

12. Сохранить изменения и протестировать приложение.

Домашнее задание

§ 5 учебного пособия, ответить на вопросы после параграфа.

Задания по теме урока

Файлы изображений для заданий

Задание 1. Создать  проект,  в  котором самолет будет пролетать над городом

1. Установить размеры формы 760;450.

2.  Загрузить  изображение  города  в компонент  как  фон  формы  (свойство формы BackgroundImage).

3. Поместить на форму компонент PictureBox1 (изображение самолёта).  Установить прозрачный цвет фона для компонента PictureBox1 (значение Transparent у свойства  BackColоr). 

Установить режим изменения размера — AutoSize (свойство SizeMode).

4.  Написать  обработчик  события Load  для  формы  и  описать  начальное положение  самолета,  указав  координаты верхнего левого угла PictureBox1 за  пределами  формы. 

var x,y:integer;
procedure Form1.Form1_Load(sender: Object; e: EventArgs);
begin

 PictureBox1.Load('plane.png');
 x:=-PictureBox1.Width;
 y:=20;
 PictureBox1.Left:=x;
 PictureBox1.Top:=y;
 DoubleBuffered:=true;
end;

5.  Поместить на форму кнопку Button1. Изменить свойства Text у компонента Button1 на «Полетели!».

6.   Поместить на форму компонент Timer. Установить  значение  False  у свойства  таймера  Enabled  в  инспекторе объектов.

Установить  в  инспекторе  объектов  время  срабатывания  таймера, равным 10. 

7.  Написать  обработчик  события Click  для  компонента  Button1,  запустить таймер.

procedure Form1.button1_Click(sender: Object; e: EventArgs);
begin

  Timer1.Enabled:=True;
end;

8.  Написать  обработчик  события Tick  и  менять  в  нем  значение  свойства  Left  у  компонента  PictureBox1. Если  самолет  вылетел  за  границу,  то вернуть его в начальное положение.

procedure Form1.timer1_Tick(sender: Object; e: EventArgs);
begin

  x:=x+1;
  PictureBox1.Left:=x;
  if PictureBox1.Left>Width+PictureBox1.Width then
	x:=-PictureBox1.Width;
  PictureBox1.Left:=x;
end;

Домашнее задание

§ 4.4 учебного пособия, ответить на вопросы после параграфа.

Цель: изучить элемент управления для вставки рисунка, построение графиков функций и диаграмм.

Задания по теме урока

Файлы для заданий можно скачать по ссылке

Задание 1. Создать проект, разместить  в  нем  фоновое  изображение  на  форме.  При  нажатии  на  кнопку  поверх  фонового  изображения  должно  появиться  другое изображение.

1. Изменить свойство Text у формы на «Рисунок на форме».

2.  Установить  размеры  формы  Width = 670, Height =  450.

3.  Загрузить  фоновое  изображение  для  формы (backgroundImage).

Задать  для  свойства  формы  BackgroundImageLayout  значение  Stretch.

4.  Поместить  на  форму  компонент  изображение (PictureBox).

5.  Для компонента PictureBox установить значение для свойства Visible = False (изображение невидимо при запуске приложения). Размеры  Width  =  200, Height = 120.  Свойство  SizeMode  =  StretchImage.

6.  Загрузить  изображение  в  компонент  PictureBox (На элементе управления).  Изображение  может  быть  формата  PNG,  или  GIF  с  прозрачным  фоном,  или  формата  BMP  с  фоном  однородного  цвета.  Свойство  BackColor = Transparent.

7. Поместить на форму кнопку. Написать  обработчик  события  Click  для компонента Button1.

procedure Form1.button1_Click(sender: Object; e: EventArgs);
begin
  PictureBox1.Top:=220;
  var rnd:Random:=new Random();
  PictureBox1.Left:=rnd.Next(300);
  PictureBox1.Visible:=True;
end;

8. Устранить  мерцание  с  помощью  включения  двойной  буферизации: 

DoubleBuffered:= true;

Эта  команда  должна  быть  прописана  в  обработчике  события  Load  для  формы.

Задание 2. Добавьте в проект ещё одно животное (белку). Для размещения белки нужно добавить ещё одну кнопку. Местоположение определить случайным образом в верхушке какого-либо дерева.

Задание 3. Построение графиков функций

Пример.  Создать  проект  и  построить  график  функции y = x*sin(x)  на промежутке, заданном пользователем.

Этапы  выполнения  задания

1.  Поместить  на  форму  компоненты: PictureBox, два компонента Label, 

два  компонента  TextBox  и  компонент Button.

2.  Изменить свойства Text у компонентов Label1, Label2 на x0 и xn соответственно.

3.  Изменить свойства Text у компонентов TextBox1 и TextBox2 на –20 и 20 соответственно.

4.  Изменить свойства Text у компонента Button1 на «Построить график».

5.  Написать  обработчик  события Click  для  компонента  Button1  и  строить в нем график функции по точкам.

procedure Form1.button1_Click(sender: Object; e: EventArgs);
var x,y,h,k,x0,xn:real;x1,y1,n,c_x,c_y:integer;
gr:Graphics;
bm:Bitmap;
p_c:Pen;
begin
//подготовка графической области для рисования по пикселям
bm:=new Bitmap(PictureBox1.Width,Picturebox1.Height);
pictureBox1.Image:=(Image)(bm);
gr:=Graphics.FromImage(pictureBox1.Image);
//закраска графической области белым цветом
gr.Clear(Color.White);
// количество точек
n:=10000;
// концы промежутка
x0:=StrToFloat(TextBox1.Text);
xn:=StrToFloat(TextBox2.Text);
// центр области построения
c_x:=PictureBox1.Width div 2;
c_y:=PictureBox1.Height div 2;
// масштабный коэффициент
k:=PictureBox1.Width/(xn-x0);
// шаг
h:=(xn-x0)/n;
x:=x0;
//оси
p_c:=new Pen(Color.Black,1);
gr.DrawLine(p_c,0,c_y,2*c_x,c_y);
gr.DrawLine(p_c,c_x,0,c_x,2*c_y);
 for var i:=1 to n do
  begin
    y:=x*sin(x);
    x1:=trunc(x*k)+c_x;
    y1:=trunc(-y*k)+c_y;
//проверка попадания точки в графическую область
if (y1>=0)and(y1<2*c_y) then
    bm.SetPixel(x1,y1,Color.Blue);
    x:=x+h;
   end;
   end;

5.1.  Нарисовать  оси  координат  в виде  двух  перпендикулярных  линий, пересекающихся в центре компонента PictureBox.

5.2.  Чтобы  получить  видимость сплошной линии, количество точек, 

которые  образуют  график  функции,  должно  быть  не  менее  10  000 (n = 10 000).

5.3.  Шаг  изменения  значения x определяется как 

5.4.  При  построении  нужно  учитывать масштаб: ширина компонента  PictureBox  должна  соответствовать  длине  заданного  промежутка. 

Тогда масштабный коэффициент можно рассчитать по формуле 

5.5.  Поскольку  расположение  осей координат  на  экране  не  совпадает с  расположением  осей,  принятым в  математике,  то  нужно  преобразовать координаты: точке (0; 0) должна  соответствовать  точка  в  центре 

компонента  PictureBox.  Для  этого полученное значение x нужно увеличить  на  величину c_x= PictureBox1.Width div  2,  а  значение у  на  c_y =PictureBox1.Height div  2.  Так  как ось  Y  направлена  вниз,  а  не  вверх, то  у  значения  Y  нужно  еще  поменять  знак  на  противоположный. 

На  канве  будет  закрашиваться  точка  с  координатами 

(x_ekr = x ∙ k  + c_x,y_ekr= –y ∙ k + c_y).

5.6.  Необходимо  учитывать,  что при  вычислении  значения x  и  y будут  вещественными,  а  значения графических  координат  могут  быть только целыми. Поэтому перед прорисовкой  точки  нужно  преобразовать  вещественные  числа  в  целые  с помощью функции trunc.

5.7.  Некоторые  точки  графика при  построении  могут  оказаться  за пределами  графической  области, поэтому  необходима  проверка  значения y1: значение должно быть неотрицательным  и  меньше  высоты графической области.

Домашнее задание

§ 4.1-4.3 учебного пособия, ответить на вопросы после параграфа.

Цель урока: познакомиться с зыком гипертекстовой разметки документа HTML. Изучить структуру HTML-документа, теги и атрибуты, гиперссылки.

Этапы разработки сайта:

1. Определение тематики, целей и задач сайта;
2. проектирование структуры сайта и связей между страницами;
3. подготовка материалов (текста и графики);
4. описание логической структуры веб-страниц (логическая разметка) с по описание внешнего вида веб-страниц (задание стилей) с помощью каскадных таблиц стилей CSS;
5. тестирование сайта и размещение в сети.

Для создания веб-страниц используется язык разметки гипертекстовых документов HTML (HyperText Markup Language). Веб-страница представляет собой документ, в котором расставлены метки языка HTML. В качестве инструментов веб-конструирования могут использоваться текстовый редактор Блокнот, ре­дакторы визуального конструирования (Adobe Dreamweaver, NamoWebEditor и др.) и другие программы.

НТML-документы сохраняются с расширением .htm или .html. После сохранения результат работы можно просмотреть с помощью браузера.

Разметка документа — описание различных фрагментов документа и их взаимного расположения. Разметка выполняется с помощью тегов.

Парный тег: <тег> фрагмент, текста</тег>

Непарный тег: <тег> фрагмент текста.

Атрибуты (параметры) уточняют действие тегов:

• каждый тег имеет свой набор допустимых атрибутов;
• атрибуты указывают в открывающем теге;
• можно использовать несколько атрибутов, разделенных пробелами;
• атрибуты записываются в виде пары: имя=значение, причем нечисловое значение заключается в кавычки;
• если значение атрибута содержит только буквы английского алфавита, цифры, дефис и не содержит пробелов, кавычки можно опустить.

Вложение тегов

Теги могут вкладываться друг в друга иерархически, но без пересечений, т. е. допустимо вложение вида:

<тег1> <тег2>…</тег2> </тег1>

Структура документа HTML

<html>
   <head>
      <title>Заголовок окна</title>
   </head>
   <body>
	Содержание документа
   </body>
</html>

Задания по теме урока

Задание 1.

Откройте Notepad++, скопируйте предложенный код:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body bgcolor="aqua">
  <h1 align="center">
	<font="Arial" color="red"><u>Заголовок</u></font>
  </h1>
  <!-- Комментарий -->
  <p><font size="+2"><b>Первый</b> абзац.</font></p>
  <p align="center">Второй <i>абзац.</i></p>
  <a href="#">А это ссылка</a>
  <br>
  <hr>
  <!-- Простой список -->
  <h3>Список</h3>
  <ul type="square">
	<li>первый элемент списка</li>
	<li>второй элемент списка</li>
	<li>А вот вложенный список:
		<ol>
		<li>номер один</li>
		<li>номер два</li>
		</ol>
	</li>
	<li>продолжим список дальше</li>
  </ul>
  <hr>
  <h4><font color="red">Уравнение:</font></h4>
  x<sup>2</sup> + 14 = 48 
 </body>
</html>

Сохраните этот файл  как html-документ  и  откройте его  в  браузере.

В контекстном меню  открытой  в  браузере  веб-страницы  выберите “Просмотреть код страницы” или  воспользуйтесь  комбинацией клавиш Ctrl + U.

Обратите внимание, что при просмотре кода страницы в браузере выделяются теги, атрибуты, значения атрибутов и содержимое тегов.

Задание 2.

• Откройте программу Notepad++.
• Сохраните документ с именем Фамилия.html в своей рабочей папке.
• Сверните документ.
• Откройте созданный файл Фамилия.html с помощью браузера.
  На панели задач появится кнопка, соответствующая веб-странице.
  Далее работайте, переключаясь между окнами Notepad++ и браузера.
• Перейдите в Notepad++, наберите текст странички.

• Перейдите в окно браузера. Обновите страницу, нажав кнопку Обновить на Панели инструментов (или клавишу F5).

Задание 3.

Создайте веб-страницу с именем personal.htm

1. Заголовок окна веб-страницы: Моя персональная страничка 
2. Текст страницы: ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (Укажите свою фамилию, имя и отчество).
3. Мои увлечения …
4. Мои друзья …
5. Дополните текст информацией о себе, которой хотите поделиться.

Домашнее задание

§ 6 учебного пособия, ответить на вопросы

Форма отправки файлов

Форма видна только зарегистрированным пользователям.

 

Задания по теме урока

Задание 1.

1. Создать новое приложение (форму).

Задать:

• Имя проекта – вычислитель. 
• Цвет формы – любой (на усмотрение учащегося)
• Размер формы – 500; 400
• Расположение на экране монитора – 200; 200

2. Добавить на форму три метки label1, label2 и label3. Изменить свойства шрифта для этих компонентов так, чтобы текст хорошо читался, цвет текста контрастировал с цветом формы. Например:

3. Добавить на форму две кнопки. Указать для них следующие свойства:

Задание 2. Добавить на форму три поля TextBox (Edit). Изменить свойства шрифта для этих компонентов:

Задание 3. Создать  обработчик события Click для кнопки button1, которая отвечает за действие сложение:

Создать  обработчик события Click для кнопки button2, которая отвечает за действие деление:

Задание 4. Самостоятельно доработать проект – добавить на форму ещё две кнопки: -, *. По аналогии создать обработчик события Click для них, которые отвечают за действия вычитание и умножение.

Домашнее задание

§ 3.4 учебного пособия, ответить на вопросы после параграфа.

Цель урока: изучить проектирование интерфейса оконного приложения с использованием элементов управления кнопка (Button) и метка (Label).

 

Задания по теме урока

Задание 1. Создать новое приложение (форму).

Задать:

• Имя проекта – Гадание. 
• Цвет формы – голубой
• Размер формы – 500; 400
• Расположение на экране монитора – 200; 200

Задание 2. Добавить на форму три кнопки. Указать для них следующие свойства:

Создать  обработчик  события Click для  кнопки  button1  и  изменить цвет  формы  на  зелёный. Команда:

BackColor:=Color.Green

Создать  обработчик  события Click  для  кнопки  button2  и  изменить цвет  формы  на  изображение. Команда:

BackgroundImage:=Image.FromFile('4.jpg')

Для работы с изображениями:

•  файл с изображением должен находиться в папке проекта. (Скачать изображение)

Чтобы картинка любого размера полностью вписывалась в форму, для формы в инспекторе объектов выполните настройку:

Создать  обработчик  события Click  для  кнопки  button3 – закрыть форму:

Close

Задание 3. Добавить на форму метку label1. Изменить свойства шрифта для компонента label1: Font (цвет шрифта – жёлтый, размер – 24, стиль — жирный курсив).

Очистить поле Text у метки. Установить значение true у свойства метки Autosize. (см. скриншот Инспектор объектов)

В обработчик события Click для кнопки button1 дописать команду:

label1.Text:= 'Зелёный';

В обработчик события Click для кнопки button2 дописать команду:

label1.Text:= 'Осень!';

Домашнее задание

§ 3.1-3.3 учебного пособия, ответить на вопросы после параграфа.

 

Задания по теме урока

1. Наберите пример 2.11

2. Выполните упражнение №1 с.14

3. Внесите изменения в предыдущее задание так, чтобы:

• Вариант 1. цвет формы менялся только в диапазоне красных оттенков;
• Вариант 2. цвет формы менялся только в диапазоне синих оттенков; 
• Вариант 3. цвет формы менялся только в диапазоне зеленых оттенков;

4. Выполните №2 с.15 так, чтобы:

• Вариант 1. размеры увеличиваются на 5;
• Вариант 2. размеры увеличиваются в 2 раза; 
• Вариант 3. размеры уменьшаются на 15;

5. Выполните упражнение №3 (с выбором своего цвета)

Домашнее задание

§ 2 учебного пособия, ответить на вопросы после параграфа.