КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Работа с текстом
| 1. Повторение теоретических сведений. |
| 2. Выполнение команд, представленных в таблице. | |
| 3. Выполнение практической работы. | |
| 4. Ответы на контрольные вопросы. | |
| 5. Выполнение теста. |
Цель: получить начальные сведения об 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. |
| 2. Леонтьев, Б.В. Web-дизайн: Тонкости, хитрости и секреты / Б.В. Леонтьев. –М.: Познавательная книга плюс, 1999. - С. 8-11. | |
| 3. Практикум по общей информатике: учеб.пособие / под. ред. В.П. Омельченко. – 2-е изд., перераб. и доп. – Ростов Н/Д: Феникс, 2007. –С. 310-358.: ил. – (Высшее образование) | |
| 4. Симонович, С.В. Специальная информатика: учебное пособие / С.В. Симонович, Г.А.Евсеев, А.Г. Алексеев. – М.: АСТ-ПРЕСС КНИГА, 2005. - С. 407-416. |
| a. Создать заготовку HTML-документа (структуру): - задать заголовок документа «Задание 1» - задать цвет фона страницы – голубой. |
| b. Сохранить документ в папке лабораторная работа №1 Вашего каталога, задав в качестве имени Фамилию и расширение .html. c.Открыть документ как Web-страницу. | |
| d. Добавить бегущую строку «Тольяттинский государственный университет», задав следующие атрибуты: - цвет фона бегущей строки – морской волны (aqua); - высота бегущей строки – 20 пиксель; - направление бегущей строки – слева; - режим вывода бегущей строки – альтернативное. | |
| e.Добавить заголовок 1 уровня – «Пробная страница». | |
| f. Добавить 2 абзаца текста используя, тэг абзаца: Цель создания данного документа – знакомство с основными тэгами HTML и приобретение навыков их использования. Пробную страницу создал (фамилия, имя, группа). | |
| g.Добавить горизонтальную линию. | |
| h.Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить. | |
| i. Добавить заголовок 2 уровня – «Некоторые стили форматирования». | |
| j. Задать шрифт – Arial, размер – 4, цвет – зеленый. | |
| k. Добавить список стилей форматирования (по образцу), начиная каждую строку с тэга разрыв строки: Этот текст жирный Этот текст наклонный Этот текст подчеркнутый Этот текст большой Этот текст маленький | |
| l. Добавить горизонтальную линию, задав толщину линии в 5 пиксель. | |
| m. Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить. | |
| n. Добавить заголовок 2 уровня – «Список определений». | |
| o. Увеличить размер шрифта на два пункта (+2). | |
| p. Добавить горизонтальную линию, сделав однотонную линию толщиной в 5 пиксель. | |
| q. Изменить цвет шрифта на синий. |
| 1.Что такое WWW, гипертекст, гиперссылка, HTML, Ноте page (домашняя страница), Web-сайт? |
| 2.Как определить код цвета, с помощью графического редактора PhotoShop? | |
| 3.Что такое тэг? Каких видов бывают тэги? Назначение атрибутов? Формат записи тэгов? | |
| 4.Опишите структуру HTML-документа? Где отображается заголовок HTML-документа? | |
| 5.Из каких обязательных частей состоит HTML-страница? |
Тест № 3
1. Какой тег является тегом перевода строки?
а) BR
б) TT
в) A
2. Какой тег не является тегом форматирования текста?
| а) B | в) I |
| б) TOP | г) BIG |
3. Какой тег не является тегом организации списка?
а) UL
б) TYPE
в) OL
г) MAP
д) LI
4. Какой тег встраивает изображение в файл?
| а) TABLE | в) IMG |
| б) ALIGN | г) ALT |
5. Какой тег не является параметром тега выравнивания ALIGN?
| а) LEFT | в) CENTER |
| б) RIGHT | г) TOP |
6.Какой тег не является параметром тега выравнивания VALIGN?
| а) MIDDLE | в) TOP |
| б) ROWS | г) BOTTOM |
7. Тег комментарий (альтернативный текст)?
| а) ALT | в) AREA |
| б) SRC | г) NAME |
8. Какой тег определяет активную область изображения?
| а) MAP | в) HREF |
| б) IMG | г) AREA |
9. Какой тег определяет фоновую картинку?
| а) BODY BGCOLOR | в) BODY TEXT |
| б) BODY LINK | г) BODY BACKGROUD |
10. Какой параметр тега определяет ширину картинки?
| а) ROWS | в) WIDTH |
| б) HEIGHT | г) RIGHT |
Дата добавления: 2015-09-14; просмотров: 298; Мы поможем в написании вашей работы!; Нарушение авторских прав |