Инфоурок Информатика Другие методич. материалыЭлективный курс «Язык разметки гипертекста HTML» (для 11 класса)

Элективный курс «Язык разметки гипертекста HTML» (для 11 класса)

Скачать материал

Выберите документ из архива для просмотра:

Выбранный для просмотра документ Элективный курс Язык разметки гипертекста.doc

Элективный курс «Язык разметки гипертекста HTML».

(для 11 класса)

Пояснительная записка

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

Введение элективного курса обусловлено тем, что на изучение данной темы в 11 классе отводится только 6 часов. Это совершенно не достаточно для хорошего понимания большого объема информации и формирования навыков создания web-сайтов.

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

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

Курс рассчитан на 34 часа лекционно-практических занятий и проводится в течение учебного года по 1 часу в неделю. Продолжительность занятия составляет 1 час. Элективный курс рекомендован для учащихся 11-х классов старшей профильной школы.

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

Достижение цели реализуется с решением следующих задач:

ü Познакомить с видами web-сайтов, их функциональными, структурными и технологическими особенностями;

ü Сформировать навыки проектирования, конструирования, размещения и сопровождения web-сайта;

ü Сформировать навыки написания html-кодов;

ü Создать и разместить в сети Интернет собственный web-сайт по выбранной тематике;

ü Познакомиться с основами web‑дизайна;

В результате изучения данного элективного курса обучающиеся должны:

  • знать:
    • принципы и структуру устройства «Всемирной паутины», формы представления информации в сети Интернет;
    • способы работы с изученными программами (редакторы сайтов);
    • виды web-сайтов;
  • уметь:
    • найти, сохранить и систематизировать необходимую информацию из сети с помощью имеющихся технологий и программного обеспечения; овладеть браузерами Internet Explorer, Opera, Firefox;
    • спроектировать, изготовить и разместить в сети web-сайт, состоящий из 5-10 страниц на заданную тему;
    • программировать на языке HTML на уровне создания не менее 3-5 соответствующих элементов сайта;
    • передавать информацию в сеть Интернет с помощью специальных программ;
    • применять при создании web-страницы основные принципы web-дизайна и произвести анализ и сформулировать собственную позицию по отношению к их структуре, содержанию, дизайну и функциональности;
  • иметь навыки владения:
    • способами работы с изученными программами (редакторы сайтов);
    • необходимыми способами проектирования, создания, размещения и обновления web-сайта;
    • приемами организации и самоорганизации работы по изготовлению сайта;
    • опытом коллективного сотрудничества при конструировании сложных web-сайтов;
    • оценивания своих результатов, корректирования дальнейшей деятельности по созданию сайтов.

Программа элективного курса предусматривает проведение традиционных уроков, а также практических занятий, лабораторных работ, а также работа в группах. Изучение нового материала носит сопровождающий характер. Освоение курса предполагает, помимо посещения коллективных уроков, выполнение внеурочных самостоятельных домашних заданий. Курс завершается итоговым контролем в виде защиты творческих работ. Ученик должен продемонстрировать уровень достижения минимально необходимых результатов, обозначенных в целях и задачах курса.

Содержание курса

Раздел 1. Создание простейшего html‑документа. Форматирование текста (2 ч.)

В этом разделе учащиеся познакомятся с языком разметки гипертекста html, со структурой html-документа, с основными тегами форматирования текста, создания списков, научатся изменять цвет фона. На практике создадут простейший html-документ, используя известные им уже теги. А для закрепления материала выполнят лабораторную работу (приложение 3). В практической части создадут свою визитку.

 

Раздел 2. Вставка изображений в html-документ (2 ч.)

В этом разделе обучающиеся познакомятся с форматами графических файлов, их достоинствами и недостатками, изучат основные теги для вставки изображения и html-документ и для их преобразования (управление размерами, расположение на странице обрамление и др.). Для закрепления материала учащиеся выполняют лабораторную работу (приложение 4).

 

Раздел 3. Оформление html-документа. Таблицы (3 ч.)

В данном разделе учащиеся познакомятся и изучат основные теги оформления html-документа. Изучение направлено на работу с таблицами, научатся использовать основные атрибуты для форматирования таблиц. Для усвоения материала выполнят лабораторную работу (приложение 5). А также выполнят практическую работу на составление расписания.

 

Раздел 4. Оформление html-документа. Формы (2 ч.)

В этом разделе учащиеся научатся создавать формы в html-документе. Познакомятся с основными тэгами для создания форм, на практике создадут собственную форму «Анкета». Для закрепления материала выполнят лабораторную работу (приложение 6).

 

Раздел 5. Создание HTML-документа с помощью редакторов гипертекста (3 ч.)

В этом разделе обучающиеся познакомятся со способами организации информации на сайте, узнают об организации гипертекстовых связей между документами, научатся создавать текстовые гиперссылки и ссылки, изображения, менять их вид. Также выполнят лабораторную работу на усвоение материала (приложение 7).

 

Раздел 6. Оформление html-документа. Фреймы (3 ч.)

В данном разделе учащиеся познакомятся с фреймами, основными тэгами их создания, научатся использовать различные атрибуты для форматирования фреймов. В ходе лабораторной работы (приложение 8) закрепят навыки, а также повторят другие пройденные темы (такие, как таблицы, списки, вставка изображения и др.)

Раздел 7. Редакторы сайтов (4 ч.)

Изучив это раздел обучающиеся узнают возможности приложения Dreamweaver, MS SharePoint Designer 2007 и других редакторов при создании и редактировании сайтов. После изучения данного раздела учащиеся выполняют мини-проект в среде Dreamweaver на свободную тему.

 

Раздел 8. Виды сайтов (2 ч.)

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

 

Раздел 9. Основы web-дизайна (4 ч.)

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

 

Раздел 10. Проектирование сайта (2 ч.)

В этом разделе обучающиеся научатся разрабатывать концепцию, цели и структуру сайта, продумывать его внутренние и внешние связи, назначение каждой  страницы и элемента на ней. Эти задачи необходимо решить прежде, чем приступить к построению самого сайта.

 

Раздел 11. Размещение и поддержка сайта в сети (2 ч.)

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

Раздел 12. Выполнение  творческой  работы (4 ч.)

 

Знания, умения и предыдущие разработки необходимо применить для создания комплексного проекта – web-сайта на выбранную тему. Сайт разрабатывается в группе или индивидуально. Обучающимся потребуется спроектировать, изготовить и разместить сайт в сети Интернет. Выполненный проект необходимо защитить перед сокурсниками.

 

Раздел 13. Защита проекта (1 ч.)

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

 

Учебно-тематическое планирование

Наименование разделов и тем

Всего часов

Формы контроля

Всего

Теория

Практические занятия

Лабораторные работы

1. Создание простейшего html‑документа. Форматирование текста.

2

1

 

1

Самостоят. работа

2. Вставка изображений в html-документ.

2

1

 

1

Самостоят. работа

3. Оформление html-документа. Таблицы.

3

1

1

1

Самостоят. работа

4. Оформление html-документа. Формы.

2

1

 

1

Самостоят. работа

5. Создание HTML-документа с помощью редакторов гипертекста.

3

1

1

1

Самостоят. работа

6. Оформление html-документа. Фреймы.

3

1

1

1

Самостоят. работа

7. Редакторы сайтов.

4

1

3

 

Мини-проект

8. Виды сайтов.

2

1

1

 

Тест

9. Основы web-дизайна.

4

1

3

 

 

10. Проектирование сайта.

2

1

1

 

Самостоят. работа

11. Размещение и поддержка сайта в сети.

2

1

1

 

 

12. Выполнение творческой работы (разработка проекта).

4

 

4

 

 

13. Защита проектов.

1

 

1

 

Защита

Всего:

34

11

17

6

 

 

Список литературы для учителя:

1.     Microsoft Front Page 2003. Русская версия: Практическое пособие: пер. с англ. – М.: СП ЭКОМ, 2005. – 384 с.: ил.;

2.     Белов В. Ключи к успеху // Мир ПК. – 2006. – №8. – с. 68-70.;

3.     Гончаров А. HTML в примерах. С.-Пб.: Питер, 2003.;

4.     Гончаров А. Самоучитель HTML. С.-Пб: Питер, 2000.;

5.     Дригалкин В. В. HTML в примерах. Как создать свой Web-сайт: Самоучитель / В. В. Дригалкин. – М.: Изд-во «Вильямс», 2003. – 192 с.: ил.

6.      Информатика. Базовый курс. Учебник для ВУЗов / под ред. С.В. Симоновича. - СПб.: Питер. - 2000.

7.      Кришнамурти, Web-протоколы. Теория и практика / Б. Кришнамурти, Дж. Рексфорд. – М.: ЗАО «Издательство БИНОМ», 2002. – 592 с.: ил.

8.      Кузнецов М.В. Практика разработки Web-сайта / М.В. Кузнецов, И.В. Симдянов, С.В. Голышев. – СПБ.: БХВ-Петербург, 2005. – 960 с.: ил

9.      Лебедев С.В. Web-дизайн: учебное пособие по созданию публикаций для Интернет / С.В. Лебедев. – 3-е изд., перераб. и доп. – М.: Альянс-пресс, 2004.- 736 с

10. Мержевич В. В. Ускорение работы сайта: для веб-разработчиков / В.В. Мержевич. – СПб.: БХВ-Петербург, 2005. – 384с.: ил

11.  Миронов Д.Ф. Создание Web-страниц в MS Office 2000 / Д.Ф. Миронов. – СПб.: БХВ-Петербург, 2000. – 320 с.: ил.

12.  Шапошников И. В. Справочник Web-мастера. XML. – СПб.: БХВ-Петербург, 2001. – 304 с.: ил.

13.  Штайнер Г. HTML/XML/CSS / Г. Штайнер. – 2-е изд., перераб. – М.: Лаборатория Базовых Знаний, 2005. – 510 с.: ил.

Список литературы для учащихся

1.      Баричев С. Ваш  Office 2000 / С Баричев, О.Плотников// Москва, 2000.;

2.     Борисенко А. А. Web-дизайн. Просто как дважды два / А. А. Борисенко. – М.: Эксмо, 2008. – 320 с.;

3.      Валентайн Ч. XHTML/ Ч. Валентайн, К.М. Минник// 2001.;

4.     Гончаров А. HTML в примерах. С.-Пб.: Питер, 2003.;

5.     Гончаров А. Самоучитель HTML. С.-Пб: Питер, 2000.;

6.     Интернет. Энциклопедия. - 2-е изд. / под редакцией Л.Г.Мелиховой. – СПб.: ПИТЕР, 2000.;

7.     Матросов А. HTML 4.0 в подлиннике/ А.Матросов, А.Сергеев, М. Чаунин// БХВ-Петербург.: Санкт-Петербург, 2005.;

8.     Миронов Д. Создание Web-страниц в MS Office 2000. – Спб.: Питер. - 2000.;

9.     Морис Б. HTML в действии. СПб.: Питер, 1997 г. – 256 с.;

10.  Пауэлл Т. Web-дизайн/ Т. Пауэл// Санкт-Петербург, 2002.;

11.  Петюшкин А.В. HTML. Экспресс-курс. - СПб.: БХВ - Петербург, 2003

12. Соломенчук В. Интернет: краткий курс. - 2-е. - Спб.: Питер. - 2000.;

13.  Хеслоп П. HTML самого начала. - СПб: Санкт-Петербург, 2005.;

14.  Шафрин Ю. А.. Информационные технологии. 10-11 кл. - Москва, Лаборатория базовых знаний, 1999.

Лабораторные работы для профильного курса информатики на тему: «Язык разметки гипертекста HTML»

 

№ п/п

Тема лабораторной работы

Количество часов

1.

Создание простейшего HTML-документа. Форматирование документа. Списки.

1

2.

Вставка изображений в HTML-документ.

1

3.

Оформление HTML-документа. Таблицы.

2

4.

Оформление HTML-документа. Формы.

1

5.

Создание HTML-документа с помощью редакторов гипертекста.

2

6.

Оформление HTML-документа. Фреймы, таблицы, списки.

2

 

 

Лабораторные работы:

 

I. Создание простейшего файла HTML. Форматирование документа. Списки.

Учащийся должен:

Знать:

ü структуру HTML-документа; основные тэги для форматирования текста, создания фона и списков в различных вариантах;

ü пользоваться основными атрибутами для форматирования текста и создания списков в различных вариантах;

 

II. Вставка изображений в HTML-документ;

Учащийся должен:

Знать и уметь:

ü основные тэги вставки изображения;

ü пользоваться основными атрибутами для преобразования изображений в документе;

 

III. Оформление HTML-документа. Таблицы.

Учащийся должен:

Знать и уметь:

ü основные теги для создания таблиц в html-документе;

ü пользоваться основными атрибутами для форматирования таблиц;

 

IV. Оформление HTML-документа. Формы.

Учащийся должен:

Знать и уметь:

ü понятие форм, основные тэги для их создания;

ü пользоваться управляющими элементами разных типов;

 

V. Создание HTML-документа с помощью редакторов гипертекста.

Учащийся должен:

Знать и уметь:

ü понятие гиперссылки, основные тэги их создания;

ü создавать гиперссылки на текст и графические объекты;

 

VI. Оформление HTML-документа. Фреймы, таблицы, списки.

Учащийся должен:

Знать и уметь:

ü понятие фрэйма, основные тэги его создания;

ü пользоваться основными атрибутами для преобразования фрэйма;

ü пользоваться основными тэгами и атрибутами для создания таблиц и списков;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Приложение 3

Лабораторная работа №1

Тема: «Создание простейшего HTML-документа.

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

 

Цель работы: познакомиться со структурой html-документа и на основе создать свою страницу; изучить основные тэги форматирования текста и использовать их при создании страницы.

 

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

 

Теоретический материал:

Структура html-документа:

HTML-код страницы помещается внутрь контейнера <HTML> ... </HTML>, заголовок страницы в контейнер <HEAD> Заголовок </HEAD>.

Контейнер обязательно содержит открывающий и закрывающий теги.

В разделе описания заголовка можно указать заглавие документа, для этого используется тэг <TITLE> ... </TITLE> (имя страницы).

Весь остальной HTML-документ, включая весь текст, содержится внутри тэга <BODY> содержание </BODY> (содержание страницы).

 

<HTML> {начало страницы}

<HEAD> {описание страницы, заголовка}

<TITLE> название </TITLE> {имя страницы}

</HEAD> {закрытый тэг описания заголовка}

<BODY> {содержание страницы}

   текст

</BODY> {закрытый тэг описания страницы}

</HTML> {конец страницы}

 

Основные тэги форматирования html-документа:

Заголовок страницы задается с помощью тегов, где размер шрифта заголовка устанавливается с помощью Н1 (самый крупный) и до Н6 (самый мелкий)

Заголовок страницы целесообразно выделить самым крупным шрифтом: <H1> заголовок страницы </H1> (например, <H1> Все о компьютере </H1>)

</H1> заголовок страницы </H6> - в данном случае заголовок будет записан самым мелким шрифтом;

Если необходимо выровнять этот заголовок по правому краю, то это записывается следующим образом: <H1 ALIGN = “RIGHT”> Все о компьютере </H1>

<ALIGN = “RIGHT”> {выравнивание текста по правому краю}

<ALIGN = “CENTER”> {выравнивание текста по центру}

<ALIGN = “LEFT”> {выравнивание текста по левому краю}

Для задания параметров форматирования используется контейнер <FONT>...</FONT>, при этом используя различные атрибуты:

Атрибут FACE позволяет задать гарнитуру шрифта;

Атрибут SIZE – размер шрифта (может принимать иметь значение в диапазоне от 1 до 7);

Атрибут COLOR – цвет шрифта (можно задавать названием цвета (например, “red”, “green”, “blue” и так далее));

Например, <FONT SIZE = “7” FACE = “Arial” COLOR = “Blue> ... </FONT> (шрифт размера 7, тип шрифта – Arial, цвет - голубой);

Также можно задавать начертание текста или фрагмента текста:

<B> текст </B> - полужирный шрифт;

<I> текст </I> - начало текста курсивом;

<U>  текст </U> - подчёркивание;

Комбинированное выделение осуществляется следующим образом:

<Тэг-1><Тэг-2> фрагмент текста </Тэг-2></Тэг-1>

Например, <B><U> фрагмент текста </U></B> (текст полужирный и подчеркнутый);

При создании html-документов можно задавать и цвет самого фона страницы. Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее параметры: BGCOLOR - определяет цвет фона документа, TEXT  - задает цвет текста для всей страницы. Цвет также задается с помощью его названия (red”, “green”, “blue);

Например, <BODY BGCOLOR = “blueTEXT = “red”> - задание цвета фона и текста (фон голубого цвета, цвет шрифта - красный)

 

Списки:

Ненумерованный список располагается внутри контейнера <UL>…</UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: “disc” (диск),

square” (квадрат), “circle” (окружность). Например,

 

(маркированный список, маркер в виде окружности)

<UL TYPE = CIRCLE>

<LI> текст </LI>

<LI> текст </LI>

<LI> текст </LI>

</UL>

 

Ход работы:

1.     Создать, используя только тэги структуры, текстовый html-документ. Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB. Открыть документ в окне браузера и посмотреть, как он будет отформатирован.

2.     Заголовок страницы должен быть выровнен по центру, начертание – полужирный шрифт, тип шрифта - Comic Sans MS, размер – 1, цвет шрифта – голубой, подчеркивание;

3.     Задать цвет фона страницы – бирюзовый цвет;

4.     Текст должен состоять из трех абзацев, один абзац должен быть выровнен по левому краю, второй – по центру, а третий – по правому краю;

5.     Цвет текста в первом абзаце задать белым цветом, тип шрифта - Monotype Corsiva, размер – 7;

6.     Цвет текста во втором абзаце задать розовым цветом, тип шрифта - Arial, размер – 6;

7.     Цвет текста в первом абзаце задать желтым цветом, тип шрифта - Calibri, размер – 5;

8.     В нижнем правом углу создать маркированный список, состоящий из трех компонентов, цвет текста задать зеленым цветом;

 

Листинг html-программы:

 

<HTML>

<HEAD>

<TITLE> Компьютер </TITLE>

</HEAD>

<BODY bgcolor='orange'>

   <font face='Comic Sans Ms' color='red'>

   <H1 ALIGN = 'CENTER'> <u> Все о компьютере </u> </H1>

   </font>

<p align='left'> <font face='Monotype Corsiva' color='white' size=7> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </font></p>

<p align='center'> <font face='Arial' color='lime' size=6> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </font> </p>

<p align='right'> <font face='Calibri' color='yellow' size=5> На этом сайте вы можете узнать много новой и полезной информации для вас.</p>

<font color='aqua'>

<ul type=circle>

<li> <b> Компьютер </b> </li>

<li> <b> Терминологический словарь </b> </li>

<li> <b> Цены на товары </b> </li>

</ul>

</font>

</BODY>

</HTML>

 

 

Приложение 4

Лабораторная работа №2

Тема: «Вставка изображений в html-документ»

 

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

 

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

 

Теоретический материал:

 

<IMG SRC = “имя файла.jpg (gif, png)”>

<IMG SRC = “C:\Documents and Settings\User\ Мои документы\....jpg”>

<IMG SRC = “ имя файла. jpg (gif, png)”  ALIGN = “RIGHT”> выравнивание по правому краю

<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “LEFT”> выравнивание по левому краю

<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “TOP”> выравнивание текста по верхней кромке изображения

<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “BOTTOM”> выравнивание текста по левой кромке изображения

<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “MIDDLE”> выравнивание текста по средней кромке изображения

<IMG SRC = “ имя файла. jpg (gif, png)” BORDER = “3”> обрамление графического объекта

<IMG SRC = “ имя файла. jpg (gif, png)” HSPACE = “30” VSPACE = “30”> вставка пустой области вокруг изображения

<IMG SRC = “ имя файла. jpg (gif, png)” WIDTH = “110” HEIGHT = “220”> изменение размера изображения

<EMBED SRC = “ имя файла. wav> вставка звуковых объектов

<EMBED SRC = “ имя файла. wav WIDTH = “    ” HEIGHT = “    ”> атрибуты для задания размеров экранных элементов

 

Ход работы:

1.     Вставить изображение в текст:

           выравнивание текста по верхнему краю рисунка

 выравнивание текста по центру рисунка

 выравнивание текста по нижнему краю рисунка

 

2.     Использовать рамки вокруг рисунка:

 

  рисунок без рамки

 рамка 2 пикселя

 рамка 5 пикселей

 рамка 10 пикселей

 

 

3.     Создать плавающие рисунки с обтекающим текстом вокруг них:

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

 

4.     Изменить размеры изображения:

a.      рисунок  Без изменения размера

b.     рисунок  Параметр height=60

c.      рисунок  Параметр width=55

d.     рисунок Не пропорциональное изменения размера: height=40                width=80

5.     Создание плавающих рисунков с обтеканием текста вокруг них и отступом в 10 и 20 пикселей вокруг них


текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

текст текст текст текст текст текст текст текст текст

                 текст текст текст текст текст текст текст текст текст                  текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

 

6.     Вставить звук на страницу.

7.     Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB.

Листинг html-программы:

<HTML>

<HEAD>

<TITLE> Компьютер </TITLE>

</HEAD>

<BODY bgcolor='«#008080'>

   <font face='Comic Sans Ms' color='blue'>

   <H1 ALIGN = 'CENTER'> <u> Все о компьютере </u> </H1>

   </font>

<img src='D:\работа, учеба\для курсовика\dp_ua.gif' style='vertical-align:top' border='1'>

<font face='Monotype Corsiva' color='white' size=2> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</font> <br>

<img src='D:\работа, учеба\для курсовика\dp_ua.gif' style='vertical-align:middle' border='1'>

<font face='Arial' color='pink' size=2> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </font> <br>

<img src='D:\работа, учеба\для курсовика\dp_ua.gif' border='1'>

<font face='Calibri' color='yellow' size=2> На этом сайте вы можете узнать много новой и полезной информации для вас.</font> <br>

<hr>

<img src='D:\работа, учеба\для курсовика\dp_ua.gif'> <br>

<img src='D:\работа, учеба\для курсовика\dp_ua.gif' border='2'> <br>

<img src='D:\работа, учеба\для курсовика\dp_ua.gif' border='5'> <br>

<img src='D:\работа, учеба\для курсовика\dp_ua.gif' border='10'> <br>

<hr>

<img src='D:\работа, учеба\для курсовика\dp_ua.gif' align='left'> <img src='D:\работа, учеба\для курсовика\dp_ua.gif' align='right'> <font color='red' size=6><b> Процессор </b></font> - это центральное устройство, производящее обработку информации в двоичном коде.

<hr>

<img src='D:\работа, учеба\для курсовика\для лаб.jpg' width='39' height='53'><br>

<img src='D:\работа, учеба\для курсовика\для лаб.jpg' width='39' height='60'><br>

<img src='D:\работа, учеба\для курсовика\для лаб.jpg' width='55' height='53'><br>

<img src='D:\работа, учеба\для курсовика\для лаб.jpg' width='80' height='40'><br>

<hr>

<font face='Calibri' color='pink' size=5>

Публикации во Всемирной паутине реализуется с помощью web-сайтов.

<img src='D:\работа, учеба\для курсовика\dp_ua.gif' align='left' hspace='10' vspace='10'>

<img src='D:\работа, учеба\для курсовика\dp_ua.gif' align='right' hspace='10' vspace='10'>

Web-сайт по своей структуре напоминает  журнал, который содержит информацию, посвященную какой-либо теме  или проблеме. Как  журнал состоит из печатных страниц, так и web-сайт состоит из компьютерных web-страниц. Сайт является интерактивым средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может

<img src='D:\работа, учеба\для курсовика\dp_ua.gif' align='left' hspace='20' vspace='20'>

<img src='D:\работа, учеба\для курсовика\dp_ua.gif' align='right' hspace='20' vspace='20'>

зарегестрироваться на сайте, заполнить анкету и так далее. Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы. Гиперссылки также имеются на других web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту. Web-сайты являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию.</font>

<EMBED SRC = “ имя файла. wav WIDTH = “    ” HEIGHT = “    ”>

</BODY>

</HTML>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Приложение 5

Лабораторная работа №3

Тема: «Оформление html-документа. Таблицы».

 

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

 

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

 

Теоретический материал:

 

<TABLE>...</TABLE> {создание таблицы}

<ТR>создание строк таблицы</ТR>

<ТD> создание ячеек таблицы</ТD>

<ТН> текст, содержащийся в ячейке </ТН> - Заголовки столбцов таблицы

<САРТIОN> - Использование заголовков таблицы

width = "..." – ширина таблицы

align = "..." (горизонтальное положение)

align = "left " - прижать влево

align = "right" - прижать вправо

align = "center" - разместить по центру

valign = "..." (вертикальное положение)

valign = "top" - прижать вверх

valign = "bottom" - прижать вниз

valign = "middle" - разместить по центру

cellpadding="..." и cellspacing="..." определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым, а также и между ячейками.

border="..." – рисует рамку вокруг таблицы и каждой ячейки

colspan="..." и rowspan="..." -  позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.

Ход работы:

1.     Создайте таблицу следующего вида:

 

 

 

 

2.     Создайте таблицу следующего вида:

 

 

3.     Создать таблицы с различными параметрами рамки:

   Ширина рамки=1, расстояние между ячейками=10

 

 

 

 

   Ширина рамки=5, расстояние между ячейками=10

 

 

 

 

 

   Ширина рамки=10, расстояние между ячейками=10

 

 

 

 

 

4.     Построить таблицу следующего вида:

 

 

 

 

 

 

 

 

 

 

 

5.     Создать таблицу  с разными цветами ячеек

 

 

7.  Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB.

Листинг html-программы:

 

<HTML>

<HEAD>

<TITLE> Таблица </TITLE>

</HEAD>

<BODY bgcolor='pink'>

   <H1 ALIGN = 'CENTER'> <B> Таблицы в html-документе </B> </H1>

   <font FACE = 'Comic Sans MS' color='blue'>

   </font>

<table border>

<tr> <th colspan='5'> Список сотрудников </th> </tr>

<tr> <th> Фамилия  </th> <th> Имя </th> <th> Отчество </th> <th> Дата рождения </th> <th> Отдел </th> </tr>

<tr> <td> Гончаров </td> <td> Александр </td>  <td> Петрович </td> <td> 13.10.75 </td> <td rowspan='4'> Технический </td> </tr>

<tr> <td> Савчук </td> <td> Юрий </td> <td>  Олегович </td>  <td> 02.05.79  </td> </tr>

<tr> <td> Тарасов </td> <td> Алексей </td> <td> Сергеевич </td> <td> 27.02.72</td> <td> </td> <td>  </td></tr>

<tr> <td>  Данилов </td> <td> Петр </td> <td> Андреевич </td> <td> 17.10.77 </td> </tr>

</table>

<hr>

<table border='1' cellpadding='10'>

<tr> <th colspan='3'> 1 </th> </tr>

<tr> <th> 2 </th> <th> 3 </th> <th> 4 </th> </tr>

</table>

<br>

<table border='5' cellpadding='10'>

<tr> <th colspan='3'> 1 </th> </tr>

<tr> <th> 2 </th> <th> 3 </th> <th> 4 </th> </tr>

</table>

<br>

<table border='10' cellpadding='10'>

<tr> <th colspan='3'> 1 </th> </tr>

<tr> <th> 2 </th> <th> 3 </th> <th> 4 </th> </tr>

</table>

<br>

<hr>

 

<table border width='300' height='300'>

<tr>

  <th colspan='8' bgcolor='lime' align='center'> 1 </th>

   

</tr>

<tr>

  <th rowspan='6' bgcolor='yellow' align='center'> 4 </th>

  <th colspan='6' bgcolor='lime' align='center'> 2 </th>

  <th rowspan='6' bgcolor='yellow' align='center'> 5 </th>

</tr>

<tr>

  <th rowspan='4' bgcolor='yellow' align='center'> 3.1 </th>

  <th colspan='4' bgcolor='lime' align='center'> 3 </th>

  <th rowspan='4' bgcolor='yellow' align='center'> 3.2 </th>

</tr>

<tr>

  <th rowspan='2' bgcolor='yellow' align='center'> 6 </th>

  <td bgcolor='red' align='center'> 7 </td>

  <td bgcolor='blue' align='center'> 8 </td>

  <th rowspan='2' bgcolor='yellow' align='center'> 9 </th>

</tr>

<tr>

   <td bgcolor='pink' align='center'> 10 </td>

   <td bgcolor='purple' align='center'> 11 </td>

</tr>

<tr>

  <th colspan='4' bgcolor='lime' align='center'> 12 </th>

</tr>

<tr>

  <th colspan='6' bgcolor='lime' align='center'> 13 </th>

</tr>

<tr>

  <th colspan='8' bgcolor='lime' align='center'> 12 </th>

</tr>

</table>

 

<hr>

  <TABLE border width='550' height='300'>

     <TR>

      <Th rowspan='2' bgcolor='fuchisia' align='center'> 1 </Th>

      <th colspan='6'bgcolor='blue' align='center'> 2 </th>

     </TR>

 

     <TR>

      <TD bgcolor='white' align='center'> 3 </TD>

      <Th colspan='2' bgcolor='purple' align='center'> 4 </Th>

      <Th colspan='2' bgcolor='aqua' align='center'> 5 </Th>

      <TD bgcolor='brown' align='center'> 6 </TD>   

     </TR>

 

<TR>

      <th rowspan='3' bgcolor='silver' align='center'> 7 </th>

      <TD bgcolor='maroon' align='center'> 8 </TD>

      <th rowspan='2' bgcolor='green' align='center'> </th>

      <TD bgcolor='yellow' align='center'> 9.1 </TD>

      <TD bgcolor='yellow' align='center'> 9.2 </TD>

      <th rowspan='2' bgcolor='green' align='center'> </th>

      <TD bgcolor='white' align='center'> 10 </TD>

     </TR>

 

<TR>

      <TD bgcolor='white' align='center'> 11 </TD>

      <TD bgcolor='blue' align='center'> 9.3 </TD>

      <TD bgcolor='blue' align='center'> 9.4 </TD>

      <TD bgcolor='pink' align='center'> 12 </TD>

     </TR>

 

<TR>

      <TD bgcolor='lime' align='center'> 13 </TD>

      <Th colspan='2' bgcolor='teal' align='center'> 14 </Th>

      <Th colspan='2' bgcolor='Navy' align='center'> 15 </Th>

      <TD bgcolor='Maroon' align='center'> 16 </TD>

</TR>

 

  </TABLE>

  </BODY>

  </HTML>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Приложение 6

Лабораторная работа №4

Тема: «Создание форм в html-документа».

 

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

 

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

 

Теоретический материал:

<FORM>…</FORM> {создание формы}

<INPUT> - для ввода одной строки текста или одного слова

<INPUTTYPE=”text” – создает текстовое поле

Атрибут NAME служит для идентификации полученной информации

Атрибута SIZE задает длину поля ввода в символах

<INPUTTYPE=”radio” – создает переключатели (радиокнопки)

Атрибут VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO

Атрибут CHECKED - задает выбор кнопки по умолчанию

<INPUTTYPE=”checkbox” – создает флажки

<SELECT>…</SELECT> - реализует раскрывающийся список

<OPTION> - определяется каждый элемент раскрывающегося списка

TYPE = password - определяет окно для ввода пароля.

TYPE = reset - определяет кнопку, при нажатии на которую форма возвращается в исходное состояние.

 

Ход работы:

  

1.     Используя теги форм создайте анкету(опросный лист) на произвольную тему.

2.     В анкете должны быть отображены:

ü текстовые поля для ввода имени и фамилии;

ü поле пароля;

ü поле выбора из списка значений;

ü поле для ввода большого количества информации;

ü флажки;

ü переключатели;

ü кнопки сброса и подачи запроса;

 

 

 

Анкета

Фамилия: 
Имя:        
Отчество:

Введите пароль:

Введите дату рождения:

Укажите самый удобный способ для связи с вами:

Домашний телефон

Рабочий телефон

Электронная почта

Укажите ваше образование:

Немного о себе:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB.

   Листинг html-программы:

 

<HTML>

<HEAD>

<TITLE> Анкета </TITLE>

</HEAD>

<BODY>

<font>

<h1><Align='center'> <u><b> Анкета </b></u> </h1>

</font>

<form>

<font color='blue'>

Фамилия: <br>

<input type='text' name='name' size=30><br>

Имя: <br>

<input type='text' name='name' size=30><br>

Отчество:  <br>

<input type='text' name='name' size=30><br>

<hr>

Пароль: <br>

<input type='text' name='password' size=30>

<hr>

Введите дату рождения:<br>

<input type='text' name='name' size=2>

<select name='mounth'>

<option selected> Января

<option> Февраля

<option> Марта

<option> Апреля

<option> Мая

<option> Июня

<option> Июля

<option> Августа

<option> Сентября

<option> Октября

<option> Ноября

<option> Декабря

</select>

<input type='text' name='year' size=4>

<hr>

Укажите самый удобный способ для связи с вами:<br>

<input type='radio' name='group' Value='domtel'> <input type='text' name='name' size=30> <font color='green'> Домашний телефон </font><br>

<input type='radio' name='group' Value='rabtel'> <input type='text' name='name' size=30> <font color='green'>

Рабочий телефон </font><br>

<input type='radio' name='e-mail' Value='elpost'> <input type='text' name='name' size=30> <font color='green'> Электронная почта </font><br>

<hr>

Укажите ваше образование:<br>

<select name='education'>

<option selected> Нигде не учился

<option> Среднее общее образование

<option> Среднее полное образование

<option> Среднее специальное образование

<option> Среднее профессиональное образование

<option> Незаконченное высшее образование

<option> Высшее образование

<option> Два высших образования

</select>

<hr>

Немного о себе:</font> <br>

<textarea name='o sebe' rows=4 cols=30>

</textarea>

<br>

<hr>

<input type='reset' Value='Сброс'>

<input type='submit' Value='Послать'>

</form>   

</BODY>

</HTML>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Приложение 7

 

Лабораторная работа №5

Тема: «Создание html-документа

с помощью редакторов гипертекста».

 

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

 

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

 

Теоретический материал:

Создание гиперссылки на текст:

<A HREF = “ путь. htm ” текст ссылки   адрес на ссылку> </A>

 

Графическая ссылка:

<P>

<A HREF = “     “>

<IMG SRC = “путь и имя файла.jpg (gif, png)”  WIDTH = “60” HEITH = “52”>

</A>

</P>

 

Ход работы:

 

1. Преобразуйте домашнюю страницу в простой домашний сайт, связав отдельные части с помощью гиперссылок. Необходимо использовать все виды гиперссылок:

Обязательные страницы:

ü Главная страница;

ü Об авторе;

ü Моя школа;

ü Мой класс;

ü Моя будущая профессия.

2. Добавьте на ваши страницы следующие изображения, используя различные значения параметров тега <IMG>.

3. Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB.

 

 

Листинг html-программы:

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

<html>

<head>

<title> Рассказ обо мне...</title>

</head>

<body bgcolor='yellow'>

<h1> <p align='center'> <font face='Calibri' color='lime' size=7> <b> Рассказ обо мне... </b> </font> </p> </h1>

 <font face='Times new roman' color='blue' size=5>

<UL TYPE = CIRCLE>

<LI> <p align='center'> <A href='C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\об авторе.html'> Об авторе </a> </LI>

<LI> <p align='center'> <A href='C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\моя школа.html'>Моя школа </a> </LI>

<LI> <p align='center'> <A href='C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\мой класс.html'>Мой класс </a> </LI>

<LI> <p align='center'> <A href='C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\моя будущая профессия.html'>Моя будущая профессия </a> </LI>

</UL>

</font>

</p>

<p align='center'>

<img src='C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\20061003.jpg'  border=10 > </p>

</body>

</html>

Страница 2 (об авторе):

<html>

<head>

<title> Обо мне...</title>

</head>

<body bgcolor='pink'>

<h1> <p align='center'> <font face='Comic Sans ms' color='Purple' size=7> <b> Об авторе </b>

</font>

</p>

</h1>

 

<font face='Times new roman' color='blue' size=5>

<p>Меня зовут Тарас. Мне семнадцать лет. Я учусь в 11-м классе. Кроме меня в семье еще два ребенка - мой старший брат Олег и младшая сестренка Мария. Олегу 21 год, он ходит в университет. Он будет дантистом. Марии еще только двенадцать, она еще школьница. Я забыл упомянуть еще одного члена нашей семьи. Это - наш любимый пудель Тим.</p>

<p>Мои родители еще совсем не старые. Моей маме сорок, она работает в газете. Моему папе - сорок четыре, он работает инженером ЭВМ. Мои родители очень любят свои профессии.</p>

<p>В школе я учусь хорошо. Мои родители гордятся моими отметками. Я увлекаюсь спортом - играю в баскетбол. В летнее время мне нравится парусный спорт и виндсерфинг. Я участвую в различных соревнованиях по баскетболу.</p>

<p>Через год я закончу школу, и мне нужно решить, какую профессию выбрать. Я изучаю английский семь лет. Я хочу быть военным переводчиком. </p>

<p> Мои бабушка и дедушка уже на пенсии. Им нравится заниматься на приусадебном участке, они проводят там все свое время, выращивая помидоры, картошку, лук, клубнику, малину.</p>

</font>

<p align='center'>

<img src='C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\01-1.jpg' border=5>

<a href='главная.html' C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\01-1.jpg>

<img src='C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\cimg0413.jpg' border=5>

<a href='главная.html' C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\cimg0413.jpg>

</p>

</body>

</html>

Страница 3 (Моя школа):

<html>

<head>

<title> Моя школа</title>

</head>

<body bgcolor='red'>

<h1> <font face='Comic Sans MS' color='Orange' size=7> <b> Моя школа </b> </font> </h1>

<font face='Arial' color='yellow' size=5>

<p> Когда человек взрослеет, он понимает, что есть некоторые необходимые вещи и места, к которым всегда хочется возвращаться. Это такие вещи, как родина, родной дом и школа.</p>

<p> Моя школа - это трехэтажное здание, расположенное в жилых кварталах нашего города. Туда ходили все дети, живущие по соседству, потому что туда можно дойти пешком. За зданием школы есть спортплощадка, а перед школой зеленая лужайка с клумбами.</p>

<p> Школу построили несколько лет назад, поэтому классные комнаты были светлыми и просторными. В каждой классной комнате было три окна, а на подоконниках стояли цветы в горшках. Ученики (в основном девочки) отвечали за поливку цветов и делали это с особой любовью. На стенах класса висели карты, портреты, таблицы и схемы. </p>

<p> Наш класс был на втором этаже, окна выходили на школьный двор. В одном только нашем классе был классный руководитель. Он оказался очень добрым и знающим учителем, который не жалел времени, чтобы водить нас в интересные места и на выставки. Он был учителем русского языка и литературы. Мы его очень уважали. </p>

</font>

<p align='center'>

<img src='C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\ 8854.jpg' border=5>

<a href='главная.html' C:\Documents and Settings\User\Рабочий стол\ гиперссылки № 5\8854.jpg

</p>

</body>

</html>

Страница 4 (Мой класс):

<html>

<head>

<title> Мой класс</title>

</head>

<body bgcolor='aqua'>

<h1> <font face='Comic Sans MS' color='Orange' size=7> <b> Мой класс </b> </font> </h1>

<font face='Arial' color='black' size=5>

<p> Мне очень нравится учиться. Моя любимая пословица: "Век живи, век учись". Мне бы очень хотелось рассказать о нашей школьной жизни...</p>

<p> В одном только нашем классе был классный руководитель. Он оказался очень добрым и знающим учителем, который не жалел времени, чтобы водить нас в интересные места и на выставки. Он был учителем русского языка и литературы. Мы его очень уважали.</p>

<p> Наш класс был настолько дружным и сплоченным. И все это благодаря нашему классному руководителю. Мы всегда с удовольствием участвуем в мероприятиях, которые проводятся в школе и классе. Всегда ходим на выставки, в музеи, в кино, в театры и другие места культурного отдыха. </p>

<p> У меня есть лучший друг в классе. Его зовут Вова. Мы с ним сидим за одной партой. Мы вместе учимся уже 10 лет. Я рад, что у меня есть такой друг, которому я могу доверить все, он всегда меня поддерживает, а я его. Он, как и я, любит играть в баскетбол, поэтому мы вместе ходим на тренировки. Мы практически никогда не ссоримся, потому что дорожим нашей дружбой. У нас очень хорошие взаимоотношения со всем классом. И каждый день просто приятно приходить в школу. </p>

</font>

<p align='center'>

<img src='C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\P9200179.jpg' border=5>

<a href='главная.html' C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\P9200179.jpg>

<img src='C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\478574482.jpg' border=5>

<a href='главная.html' C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\478574482.jpg>

</body>

</html>

Страница 5 (Моя будущая профессия):

<html>

<head>

<title> Моя профессия</title>

</head>

<body bgcolor='orange'>

<h1> <font face='Comic Sans MS' color='Lime' size=7> <b> Моя будущая профессия </b> </font> </h1>

<font face='Monotype Corsiva' color='yellow' size=5>

<p> Я хочу быть переводчиком. Это интересная и полезная профессия.</p>

<p> У моих родителей большая библиотека, и они научили меня любить книги. Мне очень нравится читать. Мои любимые предметы в школе - английский, литература, география и история. Мои любимые писатели - Шекспир, Диккенс, Вальтер Скотт, Джек Лондон, Марк Твен.</p>

<p> Однажды на уроке литературы наша учительница сказала, что литературные произведения теряют большую часть своей красоты при переводе. Она сказала, что очень трудно переводить поэзию. С этого дня у меня есть мечта. Я хочу, чтобы у меня были мои любимые книги в оригинале, и я хочу знать языки, на которых они написаны. Так я могу насладиться подлинной красотой этих книг. </p>

<p>  Я хочу стать переводчиком по нескольким причинам. Это интересная профессия, потому что переводчик все время встречается с людьми из разных стран и культур и имеет возможность многое о них узнать. Кроме этого,та професси очень полезна, так как помогает людям понять друг друга. </p>

</font>

<p align='center'>

<img src='C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\perevodchik.jpg' border=5>

<a href='главная.html' C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\perevodchik.jpg>

<img src='C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\3d1d4ca3c1973baebe.jpg' border=5>

<a href='главная.html' C:\Documents and Settings\User\Рабочий стол\гиперссылки № 5\3d1d4ca3c1973baebe.jpg>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Приложение 8

 

Лабораторная работа №6

Тема: «Оформление html-документа.

Фрэймы. Таблицы. Списки».

 

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

 

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

 

Теоретический материал:

Нумерованный список находится в контейнере  <OL>...</OL>

Нумерованный список с параметрами, подразумевающийся по умолчанию:

<OL>

<LI> текст </LI>

<LI> текст </LI>

<LI> текст </LI>

</OL>

Список с арабскими цифрами (начинается с 1):

<OL TYPE = 1>

<LI> текст </LI>

<LI> текст </LI>

<LI> текст </LI>

</OL>

<FRAMESET>...</FRAMESET> - используется вместо тэга BODY
<FRAME> - определяет фрэйм

ROWS и COLS. ROWS="список  определений горизонтальных подокон" – определяет количество подокон

value – определяет фиксированную высоту подокна в пикселях

value% - определяет значение величины подокна в процентах

value* - все оставшееся место будет принадлежать данному фрэйму

COLS="список определений горизонтальных подокон" – делит окно по горизонтали

ROWS="список определений вертикальных подокон" –  делит окно по вертикали

SRC="url" - описывает URL документа, который будет отображен внутри данного фрэйма

NAME="frame_name" - описывает имя фрэйма

MARGINWIDTH="value" – используется, если автор документа хочет указать величину разделительных полос между фрэймами сбоку

MARGINHEIGHT="value" - для верхних и нижних величин разделительных полос

SCROLLING="yes | no | auto" - позволяет задавать наличие полос прокрутки у фрэйма

 

Ход работы:

 

1.     Создать страницу ссылок на ресурсы сети, обязательно с использованием фреймов. Имена файлов должны иметь маленькие латинские буквы!
В левом фрейме создать рубрики, оформить созданные ссылки в виде нумерованного списка:
1. поисковые системы;
2. каталоги;
3. литература;
в правом фрейме соответственно создать ссылки с названием и кратким описанием ресурсов;
- для поисковых систем, ссылки оформить в виде таблицы из двух колонок и нескольких строк. В левой колонке поместить рисунки-логотипы поисковых систем, в правой - гиперссылки на эти системы. (ссылки www.yandex.ru, www.rambler.ru, www.aport.ru, www.google.com, www.filesearch.ru).

Пример таблицы


- для каталогов, оформить созданные ссылки в виде нумерованного списка, (ссылки www.list.ru, www.rambler.ru.)
- для литературы, оформить созданные ссылки в виде нумерованного списка, ссылки разложить по рубрикам, например: библиотеки, техническая литература, стандарты. (ссылки www.citforum.ru, www.lib.ru, www.w3.org, http://pyramidin.narod.ru/html401/index.htm.)

2.     Сделать ссылку на эту страницу с главной страницы.

3.     Разместить файлы на сервере и просмотреть в браузере, проверить работоспособность всех ссылок.

4.     В исходном виде страницы укажите, в виде комментариев, для чего предназначена каждая группа тегов (каждый открывавший тег) и их свойства  (атрибуты).

 

Листинг  html-программы:

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

<html>

<head>

<title> Ресурсы сети </title>

</head>

<body bgcolor='orange'>

<h1> <p align> <font face='Monotype Corsiva' color='blue' size=7> <b> Ресурсы сети </b> </p> </font> </h1>

<font face='Calibri' color='yellow' size=5>

<p> Сеть Интернет растет очень быстрыми темпами, и найти нужную инфорацию среди миллиардов web-страниц и файлов становится все сложнее. Для поиска информации используются специальные поисковые серверы, которые содержат более или менее полную и постоянно обновляемую информацию о web-страницах, файлах и других документа, хранящихся на десятках миллионов серверов Интернета.</p>

<p> Различные поисковые системы могут использовать различные механизмы поиска, хранения и предоставления пользователю информации. Поисковые системы Интернета можно разделить на две группы:

<UL TYPE = CIRCLE>

<LI> Поисковые системы общего назначения </LI>

<LI> Специализированные поисковые системы</LI>

</UL>

</p>

<p> Современные поисковые системы часто являются информационными порталами, которые предоставляют пользователям не только возможности поиска документов в Интернете, но и доступ к другим информационным ресурсам (новостям, информации о погоде, о валютном курсе, интерактивным географическим картам и так далее).</p> </font>

<p>

<A HREF = 'C:\Documents and Settings\User\Рабочий стол\фрейм\главная.html'>

<Img src='C:\Documents and Settings\User\Рабочий стол\фрейм\yandex.jpg'> 

</A>

</p>

</body>

</html>

 

Вторая страница:

1 фрейм (заголовок)

<html>

<head>

<title> Фрэймы </title>

</head>

<body bgcolor='orange'>

<h1> <p align='center'><font face='Comic Sans MS' color='yellow' size=7> <b> Работаем с фрэймами... </b> </p></font> </h1>

</body>

</html>

 

2 левый фрэйм:

<html>

<head>

<title> Фрэймы </title>

</head>

<body bgcolor='orange'>

<h1> <p align='center'><font face='Comic Sans MS' color='yellow' size=7> <b> Работаем с фрэймами... </b> </p></font> </h1>

</body>

</html>

 

3 правый фрэйм:

 3.1. Поисковые системы;

<html>

<head>

<title> Поисковые системы </title>

</head>

<body bgcolor='pink'>

<h1>

<p align='center'>

<font face='Comic Sans MS' color='blue'> <b> Поисковые системы </b> </font> </p> </h1>

<table border>

<tr> <th colspan='5'> Поиск информации с помощью автоматических индексов </th> </tr>

<tr> <th> <img src='C:\Documents and Settings\User\Рабочий стол\фрейм\yandex.jpg'> </th>

<th> <A HREF = 'http://www.Yandex.ru' www.Yandex.ru> Yandex </A> </th>  </tr>

<tr> <th> <img src='C:\Documents and Settings\User\Рабочий стол\фрейм\1 задание для 7.jpg'> </th>

<th> <A HREF = 'http://www.Rambler.ru' www.Rambler.ru> Rambler </A> </th>  </tr>

<tr> <th> <img src='C:\Documents and Settings\User\Рабочий стол\фрейм\aport.jpg'>  </th>

<th> <A HREF = 'http://www.Aport.ru' www.Aport.ru> Aport </A> </tr>

<tr> <th> <img src='C:\Documents and Settings\User\Рабочий стол\фрейм\google.jpg'>  </th>

<th> <A HREF = 'http://www.Google.com' www.Google.com> Google </A> </tr>

<tr> <th> <img src='C:\Documents and Settings\User\Рабочий стол\фрейм\filesearch.jpg'>  </th>

<th> <A HREF = 'http://www.Filesearch.ru' www.Filesearch.ru> Filesearch </A> </tr>

</table>

<br>

</html>

 3.2. Каталоги;

<html>

<head>

<title> Каталоги </title>

</head>

<body bgcolor='yellow'>

<h1> <p align='center'> <font face='Comic Sans MS' color='red'> <b> Каталоги </b>  </p> </font> </h1>

 

<font face='Calibri' color='green' size=5>

<OL>

<LI> <A HREF = 'http://www.Yandex.ru' www.Yandex.ru> Yandex </A></LI>

<LI> <A HREF = 'http://www.Rambler.ru' www.Rambler.ru> Rambler </A> </LI>

<LI> <A HREF = 'http://www.List.ru' www.List.ru> List </A> </LI>

<LI> <A HREF = 'http://www.Google.com' www.Google.com> Google </A></LI>

<LI> <A HREF = 'http://www.Aport.ru' www.Aport.ru> Aport </A> </LI>

</OL>

</font>

</body>

</html>

 

 

 

 

 3.3. Литература;

<html>

<head>

<title> Литература </title>

</head>

<body bgcolor='aqua'>

<h1> <p align='center'><font face='Comic Sans MS' color='Lime'> <b> Литература </b></p></font> </h1>

<font face='Calibri' color='orange' size=7>

<OL>

<LI> <A HREF = 'http://www.citforum.ru' www.citforum.ru> Библиотека </A></LI>

<LI> <A HREF = 'http://www.lib.ru' www.lib.ru> Техническая литература </A> </LI>

<LI> <A HREF = 'http://pyramidin.narod.ru/html401/index.htm'> Стандарты </A> </LI>

</OL>

</font>

</body>

</html

 

 

 

 

 

 

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Элективный курс «Язык разметки гипертекста HTML» (для 11 класса)"

Методические разработки к Вашему уроку:

Получите новую специальность за 3 месяца

Режиссер-постановщик

Получите профессию

Фитнес-тренер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Получите профессию

Бухгалтер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Краткое описание документа:

Пояснительная записка В связи с бурно развивающимися информационными технологиями и ресурсами большое значение приобрела проблема изучения сетевых технологий, чтобы каждый мог создавать личностно значимую для него образовательную продукцию. Такой продукцией в данном курсе является web-сайт. Введение элективного курса обусловлено тем, что на изучение данной темы в 11 классе отводится только 6 часов. Это совершенно не достаточно для хорошего понимания большого объема информации и формирования навыков создания web-сайтов. Особенность изучаемого курса состоит в том, что он может использоваться во многих профилях старшей школы, так как он относится ко всем сферам современного общества – гуманитарным, естественно - научным, социальным, экономическим и другим.Тип элективного курса – межпредметный, в чем состоит его отличительная черта. Курс предусматривает интеграцию с другими учебными предметами: физика, химия, математика, русский язык и другие учебные предметы. Курс рассчитан на 34 часа лекционно-практических занятий и проводится в течение учебного года по 1 часу в неделю. Продолжительность занятия составляет 1 час. Элективный курс рекомендован для учащихся 11-х классов старшей профильной школы.Целью курса является научить обучающихся проектировать и конструировать сайты и подготовить их к осознанному выбору профессии. Достижение цели реализуется с решением следующих задач: Познакомить с видами web-сайтов, их функциональными, структурными и технологическими особенностями; Сформировать навыки проектирования, конструирования, размещения и сопровождения web-сайта; Сформировать навыки написания html-кодов; Создать и разместить в сети Интернет собственный web-сайт по выбранной тематике; Познакомиться с основами web-дизайна; В результате изучения данного элективного курса обучающиеся должны: знать: принципы и структуру устройства «Всемирной паутины», формы представления информации в сети Интернет; способы работы с изученными программами (редакторы сайтов); виды web-сайтов; уметь: найти, сохранить и систематизировать необходимую информацию из сети с помощью имеющихся технологий и программного обеспечения; овладеть браузерами Internet Explorer, Opera, Firefox; спроектировать, изготовить и разместить в сети web-сайт, состоящий из 5-10 страниц на заданную тему; программировать на языке HTML на уровне созданияне менее 3-5 соответствующих элементов сайта; передавать информацию в сеть Интернет с помощью специальных программ; применять при создании web-страницы основные принципы web-дизайна и произвести анализ и сформулировать собственную позицию по отношению к их структуре, содержанию, дизайну и функциональности; иметь навыки владения: способами работы с изученными программами (редакторы сайтов); необходимыми способами проектирования, создания, размещения и обновления web-сайта; приемами организации и самоорганизации работы по изготовлению сайта; опытом коллективного сотрудничества при конструировании сложных web-сайтов; оценивания своих результатов, корректирования дальнейшей деятельности по созданию сайтов. Программа элективного курса предусматривает проведение традиционных уроков, а также практических занятий, лабораторных работ, а также работа в группах. Изучение нового материала носит сопровождающий характер. Освоение курса предполагает, помимо посещения коллективных уроков, выполнение внеурочных самостоятельных домашних заданий. Курс завершается итоговым контролем в виде защиты творческих работ. Ученик должен продемонстрировать уровень достижения минимально необходимых результатов, обозначенных в целях и задачах курса. Содержание курса Раздел 1. Создание простейшего html-документа. Форматирование текста (2 ч.) В этом разделе учащиеся познакомятся с языком разметки гипертекста html, со структурой html-документа, с основными тегами форматирования текста, создания списков, научатся изменять цвет фона. На практике создадут простейший html-документ, используя известные им уже теги. А для закрепления материала выполнят лабораторную работу (приложение 3). В практической части создадут свою визитку. Раздел 2. Вставка изображений в html-документ (2 ч.) В этом разделе обучающиеся познакомятся с форматами графических файлов, их достоинствами и недостатками, изучат основные теги для вставки изображения и html-документ и для их преобразования (управление размерами, расположение на странице обрамление и др.). Для закрепления материала учащиеся выполняют лабораторную работу (приложение 4). Раздел 3. Оформление html-документа. Таблицы (3 ч.) В данном разделе учащиеся познакомятся и изучат основные теги оформления html-документа. Изучение направлено на работу с таблицами, научатся использовать основные атрибуты для форматирования таблиц. Для усвоения материала выполнят лабораторную работу (приложение 5). А также выполнят практическую работу на составление расписания. Раздел 4. Оформление html-документа. Формы (2 ч.) В этом разделе учащиеся научатся создавать формы в html-документе. Познакомятся с основными тэгами для создания форм, на практике создадут собственную форму «Анкета». Для закрепления материала выполнят лабораторную работу (приложение 6). Раздел 5. Создание HTML-документа с помощью редакторов гипертекста (3 ч.) В этом разделе обучающиеся познакомятся со способами организации информации на сайте, узнают об организации гипертекстовых связей между документами, научатся создавать текстовые гиперссылки и ссылки, изображения, менять их вид. Также выполнят лабораторную работу на усвоение материала (приложение 7). Раздел 6. Оформление html-документа. Фреймы (3 ч.) В данном разделе учащиеся познакомятся с фреймами, основными тэгами их создания, научатся использовать различные атрибуты для форматирования фреймов. В ходе лабораторной работы (приложение 8) закрепят навыки, а также повторят другие пройденные темы (такие, как таблицы, списки, вставка изображения и др.)Раздел 7. Редакторы сайтов (4 ч.) Изучив это раздел обучающиеся узнают возможности приложения Dreamweaver, MS SharePoint Designer 2007 и других редакторов при создании и редактировании сайтов. После изучения данного раздела учащиеся выполняют мини-проект в среде Dreamweaver на свободную тему. Раздел 8. Виды сайтов (2 ч.) В этом разделе обучающиеся познакомятся с различными видами сайтов, узнают как привлечь внимание посетителей, оптимально организовать информацию, обеспечить интерактивное взаимодействие с посетителями, познакомятся с критериями оценки сайтов. Раздел 9. Основы web-дизайна (4 ч.) В данном разделе обучающиеся увидят, что проектирование содержимого сайта – один из самых ответственных моментов при создании любого web-ресурса. Раздел 10. Проектирование сайта (2 ч.) В этом разделе обучающиеся научатся разрабатывать концепцию, цели и структуру сайта, продумывать его внутренние и внешние связи, назначение каждой страницы и элемента на ней. Эти задачи необходимо решить прежде, чем приступить к построению самого сайта. Раздел 11. Размещение и поддержка сайта в сети (2 ч.) В этом разделе обучающиеся научатся размещать подготовленные сайты в сети, оценивать предлагаемые провайдерами условия размещения и выбирать оптимальные, загружать на сервер свои файлы и тестировать web-страницы.Раздел 12. Выполнение творческой работы (4 ч.) Знания, умения и предыдущие разработки необходимо применить для создания комплексного проекта – web-сайта на выбранную тему. Сайт разрабатывается в группе или индивидуально. Обучающимся потребуется спроектировать, изготовить и разместить сайт в сети Интернет. Выполненный проект необходимо защитить перед сокурсниками. Раздел 13. Защита проекта (1 ч.) Защита проекта по компьютерной графике и web-дизайну – хороший способ для обучающихся показать свои художественные, графические и технические способности, т.к.задания носят межпредметную направленность и помогают выявить степень усвоения всего материала курса. Учебно-тематическое планирование Наименование разделов и тем Всего часов Формы контроля Всего Теория Практические занятия Лабораторные работы 1. Создание простейшего html-документа. Форматирование текста. 2 1 1 Самостоят. работа 2. Вставка изображений в html-документ. 2 1 1 Самостоят. работа 3. Оформление html-документа. Таблицы. 3 1 1 1 Самостоят. работа 4. Оформление html-документа. Формы. 2 1 1 Самостоят. работа 5. Создание HTML-документа с помощью редакторов гипертекста. 3 1 1 1 Самостоят. работа 6. Оформление html-документа. Фреймы. 3 1 1 1 Самостоят. работа 7. Редакторы сайтов. 4 1 3 Мини-проект 8. Виды сайтов. 2 1 1 Тест 9. Основы web-дизайна. 4 1 3 10. Проектирование сайта. 2 1 1 Самостоят. работа 11. Размещение и поддержка сайта в сети. 2 1 1 12. Выполнение творческой работы (разработка проекта). 4 4 13. Защита проектов. 1 1 Защита Всего: 34 11 17 6 Список литературы для учителя: Microsoft Front Page 2003. Русская версия: Практическое пособие: пер. с англ. – М.: СП ЭКОМ, 2005. – 384 с.: ил.; Белов В. Ключи к успеху // Мир ПК. – 2006. – №8. – с. 68-70.; Гончаров А. HTML в примерах. С.-Пб.: Питер, 2003.; Гончаров А. Самоучитель HTML. С.-Пб: Питер, 2000.; Дригалкин В. В. HTML в примерах. Как создать свой Web-сайт: Самоучитель / В. В. Дригалкин. – М.: Изд-во «Вильямс», 2003. – 192 с.: ил. Информатика. Базовый курс. Учебник для ВУЗов / под ред. С.В. Симоновича. - СПб.: Питер. - 2000. Кришнамурти, Web-протоколы. Теория и практика / Б. Кришнамурти, Дж. Рексфорд. – М.: ЗАО «Издательство БИНОМ», 2002. – 592 с.: ил. Кузнецов М.В. Практика разработки Web-сайта / М.В. Кузнецов, И.В. Симдянов, С.В. Голышев. – СПБ.: БХВ-Петербург, 2005. – 960 с.: ил Лебедев С.В. Web-дизайн: учебное пособие по созданию публикаций для Интернет / С.В. Лебедев. – 3-е изд., перераб. и доп. – М.: Альянс-пресс, 2004.- 736 с Мержевич В. В. Ускорение работы сайта: для веб-разработчиков / В.В. Мержевич. – СПб.: БХВ-Петербург, 2005. – 384с.: ил Миронов Д.Ф. Создание Web-страниц в MS Office 2000 / Д.Ф. Миронов. – СПб.: БХВ-Петербург, 2000. – 320 с.: ил. Шапошников И. В. Справочник Web-мастера. XML. – СПб.: БХВ-Петербург, 2001. – 304 с.: ил. Штайнер Г. HTML/XML/CSS / Г. Штайнер. – 2-е изд., перераб. – М.: Лаборатория Базовых Знаний, 2005. – 510 с.: ил. Список литературы для учащихся Баричев С. Ваш Office 2000 / С Баричев, О.Плотников// Москва, 2000.; Борисенко А.А. Web-дизайн. Просто как дважды два / А. А. Борисенко. – М.: Эксмо, 2008. – 320 с.; Валентайн Ч. XHTML/ Ч. Валентайн, К.М. Минник// 2001.; Гончаров А. HTML в примерах. С.-Пб.: Питер, 2003.; Гончаров А. Самоучитель HTML. С.-Пб: Питер, 2000.; Интернет. Энциклопедия. - 2-е изд. / под редакцией Л.Г.Мелиховой. – СПб.: ПИТЕР, 2000.; Матросов А. HTML 4.0 в подлиннике/ А.Матросов, А.Сергеев, М. Чаунин// БХВ-Петербург.: Санкт-Петербург, 2005.; Миронов Д.Создание Web-страниц в MS Office 2000. – Спб.: Питер. - 2000.; Морис Б. HTML в действии. СПб.: Питер, 1997 г. – 256 с.; Пауэлл Т. Web-дизайн/ Т. Пауэл// Санкт-Петербург, 2002.; Петюшкин А.В. HTML. Экспресс-курс. - СПб.: БХВ - Петербург, 2003 Соломенчук В. Интернет: краткий курс. - 2-е. - Спб.: Питер. - 2000.; Хеслоп П. HTML самого начала. - СПб: Санкт-Петербург, 2005.; Шафрин Ю. А.. Информационные технологии. 10-11 кл. - Москва, Лаборатория базовых знаний, 1999. Лабораторные работы для профильного курса информатики на тему: «Язык разметки гипертекста HTML» № п/п Тема лабораторной работы Количество часов 1. Создание простейшего HTML-документа. Форматирование документа. Списки. 1 2. Вставка изображений в HTML-документ. 1 3. Оформление HTML-документа. Таблицы. 2 4. Оформление HTML-документа. Формы. 1 5. Создание HTML-документа с помощью редакторов гипертекста. 2 6. Оформление HTML-документа. Фреймы, таблицы, списки. 2 Лабораторные работы: I. Создание простейшего файла HTML. Форматирование документа. Списки. Учащийся должен:Знать: структуру HTML-документа; основные тэги для форматирования текста, создания фона и списков в различных вариантах; пользоваться основными атрибутами для форматирования текста и создания списков в различных вариантах; II . Вставка изображений в HTML-документ; Учащийся должен:Знать и уметь: основные тэги вставки изображения; пользоваться основными атрибутами для преобразования изображений в документе; III. Оформление HTML-документа. Таблицы. Учащийся должен:Знать и уметь: основные теги для создания таблиц в html-документе; пользоваться основными атрибутами для форматирования таблиц; IV. Оформление HTML-документа. Формы. Учащийся должен:Знать и уметь: понятие форм, основные тэги для их создания; пользоваться управляющими элементами разных типов; V. Создание HTML-документа с помощью редакторов гипертекста. Учащийся должен:Знать и уметь: понятие гиперссылки, основные тэги их создания; создавать гиперссылки на текст и графические объекты; VI. Оформление HTML-документа. Фреймы, таблицы, списки. Учащийся должен:Знать и уметь: понятие фрэйма, основные тэги его создания; пользоваться основными атрибутами для преобразования фрэйма; пользоваться основными тэгами и атрибутами для создания таблиц и списков.

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 625 090 материалов в базе

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 21.04.2020 341
    • ZIP 134.1 кбайт
    • 17 скачиваний
    • Оцените материал:
  • Настоящий материал опубликован пользователем Идрисова Асильбика Тайгибовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Идрисова Асильбика Тайгибовна
    Идрисова Асильбика Тайгибовна
    • На сайте: 3 года и 3 месяца
    • Подписчики: 0
    • Всего просмотров: 78138
    • Всего материалов: 231

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Технолог-калькулятор общественного питания

Технолог-калькулятор общественного питания

500/1000 ч.

Подать заявку О курсе

Курс профессиональной переподготовки

Информатика: теория и методика преподавания в образовательной организации

Учитель информатики

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 487 человек из 71 региона

Курс повышения квалификации

Особенности подготовки к сдаче ЕГЭ по информатике и ИКТ в условиях реализации ФГОС СОО

36 ч. — 180 ч.

от 1700 руб. от 850 руб.
Подать заявку О курсе
  • Сейчас обучается 107 человек из 40 регионов

Курс профессиональной переподготовки

Разработка и сопровождение требований и технических заданий на разработку и модернизацию систем и подсистем малого и среднего масштаба и сложности

Системный аналитик

600 ч.

9840 руб. 5900 руб.
Подать заявку О курсе
  • Сейчас обучается 63 человека из 33 регионов

Мини-курс

Основы образовательной политики и информатики

4 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Информационные технологии и безопасность

6 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 45 человек из 24 регионов

Мини-курс

Российское движение школьников (РДШ): воспитательная работа

3 ч.

780 руб. 390 руб.
Подать заявку О курсе