Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Информационные технологии в образовании.doc
Скачиваний:
1
Добавлен:
01.07.2025
Размер:
6 Мб
Скачать
☆

Практическая работа №3 создание web-страниц учебного назначения работа с текстом

    1. Повторение теоретических сведений.

  1. Выполнение команд, представленных в таблице.

  1. Выполнение практической работы.

  1. Ответы на контрольные вопросы.

  1. Выполнение теста.

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

Знать:

  • понятие гипертекста;

  • команды для работы с текстом;

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

Уметь:

  • разрабатывать электронное учебно-методическое пособие на основе технологии гипертекста;

  • использовать теги для разметки текста;

  • выполнять форматирование текста.

Формируемые компетенции: ПКНМ-7, ПКНИ-8, ПКНМ-3.

Д ля создания ЭУС будем использовать язык гипертекстовой разметки HTML (HyperText Markup Language).

Любая Web-страница должна начинаться с тега <HTML> и заканчиваться тегом </HTML>. Между тегами <HEAD>...</HEAD> идет заголовок, в котором устанавливаются параметры страницы. Затем между тегами <BODY>...</BODY> следует тело, содержащее информацию, публикуемую на странице.

Пример страницы:

<HTML> <HEAD> <TITLE> Электронный учебник </TITLE> </HEAD> <BODY> Содержание Web-страницы </BODY> </HTML>

Теги для работы с текстом

Исходный текст

Результат

<P> Переводит строку внутри абзаца </P>

Переводит строку внутри абзаца

<P> Используется <BR> для перевода строки внутри абзаца </P>

Используется

для перевода строки внутри абзаца

<P ALIGN="center"> Абзац будет выровнен по центру строки</P>

Абзац будет выровнен по центру строки

<Hx> Используется для выделения заголовков, где х – уровень заголовка от 1 до 6. <H1> Заголовок</H1>

<H2>Заголовок2</H2>

Заголовок

Заголовок2

<B> текст </B> жирное начертание текста

<I> текст</I> курсивное

<U>текст</U> подчеркнутое

текст

текст

текст

<HR> - горизонтальная линия

SIZE – длина, WIDTH – ширина, ALIGN - выравнивание линии. Например: <HR WIDTH="80%" SIZE="10" ALIGN="right">

Текст

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

  1. Леонтьев, Б.В. Web-дизайн: Тонкости, хитрости и секреты / Б.В. Леонтьев. –М.: Познавательная книга плюс, 1999. - С. 8-11.

  1. Практикум по общей информатике: учеб.пособие / под. ред. В.П. Омельченко. – 2-е изд., перераб. и доп. – Ростов Н/Д: Феникс, 2007. –С. 310-358.: ил. – (Высшее образование)

  1. Симонович, С.В. Специальная информатика: учебное пособие / С.В. Симонович, Г.А.Евсеев, А.Г. Алексеев. – М.: АСТ-ПРЕСС КНИГА, 2005. - С. 407-416.

    1. Создать заготовку HTML-документа (структуру):

  • задать заголовок документа «Задание 1»

  • задать цвет фона страницы – голубой.

    1. Сохранить документ в папке лабораторная работа №1  Вашего каталога, задав в качестве имени Фамилию и расширение .html.

    2. Открыть документ как Web-страницу.

    1. Добавить бегущую строку «Тольяттинский государственный университет», задав следующие атрибуты:

  • цвет фона бегущей строки – морской волны (aqua);

  • высота бегущей строки – 20 пиксель;

  • направление бегущей строки – слева;

  • режим вывода бегущей строки – альтернативное.

    1. Добавить заголовок 1 уровня – «Пробная страница».

    1. Добавить 2 абзаца текста используя, тэг абзаца:

Цель создания данного документа – знакомство с основными тэгами HTML и приобретение навыков их использования.

Пробную страницу создал (фамилия, имя, группа).

    1. Добавить горизонтальную линию.

    1. Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.

    1. Добавить заголовок 2 уровня – «Некоторые стили форматирования».

    1. Задать шрифт – Arial, размер – 4, цвет – зеленый.

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

Этот текст жирный

Этот текст наклонный

Этот текст подчеркнутый

Этот текст большой

Этот текст маленький

    1. Добавить горизонтальную линию, задав толщину линии в 5 пиксель.

    1. Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.

    1. Добавить заголовок 2 уровня – «Список определений».

    1. Увеличить размер шрифта на два пункта (+2).

    1. Добавить горизонтальную линию, сделав однотонную линию толщиной в 5 пиксель.

    1. Изменить цвет шрифта на синий.

  1. Что такое WWW, гипертекст, гиперссылка, HTML, Ноте page (домашняя страница), Web-сайт?

  1. Как определить код цвета, с помощью графического редактора PhotoShop?

  1. Что такое тэг? Каких видов бывают тэги? Назначение атрибутов? Формат записи тэгов?

  1. Опишите структуру HTML-документа? Где отображается заголовок HTML-документа?

  1. Из каких обязательных частей состоит HTML-страница?

Т ест № 3