Практическое занятие
Упражнение 19.1. Создание простейшей Web-страницы
Запустите текстовый редактор Блокнот(Пуск > Программы > Стандартные > Блокнот).
Введите следующий документ:
<HTML>
<HEAD> <Т1Т1Е>Заголовок документа</Т1Т1Е>
</HEAD>
<BODY>
Содержание
документа
</BODY> </HTML>
3. Сохраните этот документ под именем first.htm.
П еред сохранением убедитесь, что сброшен флажок Не показывать расширения для зарегистрированных типов файлов (Пуск > Настройка > Свойства папки > Вид). В противном случае редактор Блокнот может автоматически добавить в конец имени расширение .ТХТ.
Запустите программу Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл first.htm.
Посмотрите, как отображается этот файл — простейший корректный документ HTML. Где отображается содержимое элемента TITLE? Где отображается содержимое элемента BODY?
Как отображаются слова «Содержание» и «документа», введенные в двух отдельных строчках? Почему? Проверьте, что происходит при уменьшении ширины окна.
В этом упражнении мы создали простейший документ HTML Мы познакомились с особенностями форматирования документов HTML и их отображения при помощи обозревателя Internet Explorer.
У пражнение 19.2. Изучение приемов форматирования абзацев
Если это упражнение выполняется не сразу после предыдущего, откройте документ first, htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>, а его конкретное содержание может быть любым.
Введите заголовок первого уровня, заключив его между тегами <Н1 > и </Н1 >.
Введите заголовок второго уровня, заключив его между тегами <Н2> и </Н2>.
Введите отдельный абзац текста, начав его с тега <Р>. Пробелы и символы перевода строки можно использовать внутри абзаца произвольно.
Введите тег горизонтальной линейки <HR>.
Введите еще один абзац текста, начав его с тега <Р>.
Сохраните этот документ под именем paragraph.htm.
Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл paragraph.htm.
Посмотрите, как отображается этот файл. Установите соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране.
В этом упражнении мы создали документ HTML с разметкой абзацев. Мы определили, как влияют теги HTML на отображение соответствующих частей документа.
У пражнение 19.3. Создание гиперссылок
Если это упражнение выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>.
Введите фразу: Текст до ссылки.
Введите тег: <А HREF="first.htm">.
Введите фразу: Ссылка.
Введите закрывающий тег </А>.
Введите фразу: Текст после ссылки.
Сохраните документ под именем link.htm.
Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл link.htm.
Убедитесь в том, что текст между тегами <А> и </А> выделен как ссылка (цветом и подчеркиванием).
Щелкните на ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка.
Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.
В этом упражнении мы создали документ HTML, содержащий гиперссылки. Мы увидели, как гиперссылки отображаются в документе, и научились пользоватьтся ими.
У пражнение 19.4. Создание изображения и использование
его на Web-странице
Откройте программу Paint (Пуск > Программы > Стандартные > Paint). Задайте размеры нового рисунка, например 50x50 точек (Рисунок > Атрибуты).
Выберите красный цвет переднего плана и зеленый цвет фона. Залейте рисунок фоновым цветом.
Инструментом Кисть нанесите произвольный красный рисунок на зеленый фон.
Сохраните рисунок под именем picl .gif (в формате GIF).
Дайте команду Рисунок > Атрибуты. Установите флажок Использовать прозрачный цвет фона. Щелкните на кнопке Выбор цвета и выберите зеленый цвет, уже использованный на рисунке в качестве фонового.
Сохраните рисунок еще раз под именем pic2.gif (в формате GIF) и закройте программу Paint.
Если это упражнение выполняется не сразу после предыдущего, откройте документ first, htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>.
Введите произвольный текст (протяженностью 4-5 строк) и установите тек стовый курсор в его начало.
Введите тег <IMG SRC="pic1 .gif" ALIGN="BOTTOM">.
Сохраните документ под именем picture.htm.
Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл picture.htm. Посмотрите на получившийся документ, обращая особое внимание на изображение.
Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="TOP". Сохраните файл под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.
Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="LEFT". Сохраните файл под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.
Вернитесь в программу Блокнот и добавьте в тег <IMG> атрибуты: HSPACE=40 VSPACE=20. Сохраните файл под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.
Вернитесь в программу Блокнот и измените имя рисунка: SRC="pic2.gif'. Сохраните файл под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов. В чем различие между двумя созданными рисунками?
В этом упражнении мы научились вставлять изображения в документ. Мы выяснили, как влияют атрибуты тега <IMG> на способ отображения изображения. Мы узнали, как отображаются GIF-изображения, имеющие прозрачный цвет фона.
Упражнение 19.5. Приемы форматирования текста
Если это упражнение выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>, а его конкретное содержание может быть любым.
Введите тег <BASEFONT SIZE="5" COLOR="BROWN">. Он задает вывод текста по умолчанию увеличенным шрифтом и коричневым цветом.
Введите произвольный абзац текста, который будет выводиться шрифтом, заданным по умолчанию. Начните этот абзац с тега <Р>.
Введите теги: <Р> <FONT SIZE="-2" FACE="ARIAL" COLOR="GREEN">.
Введите очередной абзац текста, закончив его тегом </FONT>.
В следующем абзаце используйте по своему усмотрению парные теги: <В> (полужирный шрифт), <1> (курсив), <U> (подчеркивание), <S> (вычеркивание), <SUB> (нижний индекс), <SUP> (верхний индекс).
В следующем абзаце используйте по своему усмотрению парные теги: <ЕМ> (выделение), <STRONG> (сильное выделение), <CODE> (текст программы), <KBD> (клавиатурный ввод), <SAMP> (пример вывода), <VAR> (компьютерная переменная).
Сохраните полученный документ под именем format.htm.
Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл format.htm.
Изучите, как использованные элементы HTML влияют на способ отображения текста.
Вернитесь в программу Блокнот и измените документ так, чтобы элементы, задающие форматирование, были вложены друг в друга. Сохраните документ под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы.
Мы познакомились с некоторыми элементами языка HTML, которые могут использоваться для форматирования текста документа. Мы выяснили, как эти элементы воздействуют на отображение документа, и узнали, что такие элементы можно вкладывать друг в друга.
Упражнение 19.6. Приемы создания списков
Если это упражнение выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>, а его конкретное содержание может быть любым.
Вставьте в документ тег <OL TYPE="I">, который начинает упорядоченный (нумерованный) список.
Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.
Завершите список при помощи тега </OL>.
Сохраните полученный документ под именем list.htm.
Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл list.htm.
Изучите, как упорядоченный список отображается в программе Internet Explorer, обращая особое внимание на способ нумерации, заданный при помощи атрибута TYPE=.
10. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.
Вставьте в документ тег <ULTYPE="SQUARE">, который начинает неупорядо ченный (маркированный) список.
Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.
Завершите список при помощи тега </UL>. Сохраните документ под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы, обратив внимание на способ маркировки, заданный при помощи атрибута TYPE=.
Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.
Вставьте в документ тег <DL>, который начинает список определений.
Вставьте в список определяемые слова, предваряя соответствующие абзацы тегом <DT>.
Вставьте в список соответствующие определения, предваряя их тегом <DD>.
Завершите список при помощи тега </DL>. Сохраните документ под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как выглядит при отображении Web-страницы список определений.
М ы научились создавать списки средствами языка HTML и определять способ их нумерации (маркировки). Мы установили, как выглядят списки при их отображении в обозревателе Internet Explorer. Мы также научились создавать список определений.
Упражнение 19.7. Создание таблиц
Если это упражнение выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>. В данном упражнении используется список номеров телефонов.
Введите тег <TABLE BORDER="10" WIDTH="100%">.
Введите строку:<CAPTION ALIGN="ТОР">Списоктелефонов</САРТION>.
Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом:
<TR BGCOLOR="YELLOW" ALIGN="CENTER">
<ТН>Фамилия<ТН>Номер телефона
6. Определите последующие строки таблицы, предваряя каждую из их тегом <TR> и помещая содержимое каждой ячейки после тега <TD>.
7. Последнюю строку таблицы задайте следующим образом:
<TRXTD ALIGN="CENTER" COLSPAN="2">Ha первом этаже здания имеется бесплатный телефон-автомат.
Завершите таблицу тегом </TABLE>.
Сохраните документ под именем table.htm.
Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл toble.htm.
Изучите, как созданная таблица отображается в программе Internet Explorer, обращая особое внимание на влияние заданных атрибутов.
Измените ширину окна обозревателя и установите, как при этом изменяется внешний вид таблицы.
Мы познакомились с приемами создания таблиц средствами языка HTML для представления данных. Мы научились создавать таблицы и изменять их вид при помощи атрибутов тегов HTML,
V ta^ 15 мин
Упражнение 19.8. Создание описания фреймов
Запустите текстовый редактор Блокнот(Пуск > Программы > Стандартные > Блокнот).
Введите следующий документ:
<HTML>
<HEAD>
<Т1Т1Е>Описание фреймов</ТITLЕ>
</HEAD>
<FRAMESET ROWS="60%,*">
<FRAME SRC="table.htm">
<FRAMESET COLS="35%,65%" NORESIZE>
<FRAME SRC="first.htm">
<FRAME SRC="links.htm">
</FRAMESET> </HTML>
Сохраните этот документ под именем frames.htm.
Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл frames.htm.
Изучите представление нескольких созданных ранее документов, в отдельных фреймах.
Посмотрите, что происходит при изменении ширины окна обозревателя.
Проверьте, можно ли изменить положение границ фреймов методом перетаскивания при помощи мыши.
9. Щелкните на ссылке, имеющейся в одном из фреймов, и посмотрите, как будет отображен новый документ.
Щелкните на кнопке Назад на панели инструментов и убедитесь, что возврат к предыдущему документу на нарушает структуру фреймов.
Вернитесь в программу Блокнот и измените структуру и параметры фреймов по своему усмотрению. Сохраните документ под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Убедитесь, что измененный вид Web-страницы соответствует замыслу. Если это не так, вернитесь в программу Блокнот, найдите и исправьте ошибки.
М ы научились отображать в рамках одной Web-страницы несколько документов при помощи фреймов. Мы узнали, как фреймы отображаются обозревателем Internet Explorer. Мы исследовали особенности навигации с помощью гиперссылок по Web-странице, содержащей фреймы.
У пражнение 19.9. Создание Web-документа с помощью
редактора FrontPage Express
Запустите программу FrontPage Express (Пуск > Программы > Стандартные > Средства Интернета > FrontPage Express).
Введите в программе FrontPage Express произвольный текст документа.
С помощью панели инструментов форматирования отформатируйте текст по собственному усмотрению.
Для создания таблицы щелкните на кнопке Вставить таблицу на стандартной панели инструментов.
Для добавления иллюстраций используйте кнопку Вставить изображение на стандартной панели инструментов. Иллюстрации возьмите из папки C:\Windows.
Дайте команду Файл > Сохранить, щелкните на кнопке Как файл и задайте имя файла wysiwyg.htm. Подтвердите сохранение изображений, требующих преобразования формата.
Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл wysiwyg.htm.
Убедитесь, что созданный документ правильно отображается обозревателем. Обратите внимание на наличие отличий вида документа при отображении в обозревателе и в программе FrontPage Express.
Измените ширину окна обозревателя и посмотрите, как при этом меняется вид документа.
Вернитесь в программу FrontPage Express и дайте команду Вид > HTML.
Изучите автоматически сгенерированный код HTML, определите, как с помощью тегов HTML реализованы использованные команды форматирования.
13. Оцените качество получившегося кода HTML.
В Мы научились использовать редактор FrontPage Express для создания Web-документов. Мы узнали, как с его помощью форматируюттекст документа, создаюттаблицы и вставляют изображения. Мы исследовали полученный при этом код HTML.
- Введение
- Глава 1 Информация и информатика
- 1.1. Информация в материальном мире
- 1.2. Данные
- 1.3. Файлы и файловая структура
- 1.4. Информатика
- Подведение итогов
- Вопросы для самоконтроля
- Глава 2 Вычислительная техника
- 2.1. История развития средств вычислительной техники
- 2.2. Методы классификации компьютеров
- 2.3. Состав вычислительной системы
- Вопросы для самоконтроля
- Глава 3 Устройство персонального компьютера
- 3.1. Базовая аппаратная конфигурация
- 3.2. Внутренние устройства системного блока
- Системы, расположенные на материнской плате
- Периферийные устройства персонального компьютера
- Практическое занятие
- Глава 4 Функции операционных систем персональных компьютеров
- 4.1. Обеспечение интерфейса пользователя
- 4.2. Обеспечение автоматического запуска
- 4.3. Организация файловой системы
- 4.4. Обслуживание файловой структуры
- Управление установкой, исполнением и удалением приложений
- Обеспечение взаимодействия с аппаратным обеспечением
- 4.7. Обслуживание компьютера
- 4.8. Прочие функции операционных систем
- Вопросы для самоконтроля
- Глава 5 Основы работы операционной системы windows 98
- 5.1. Основные объекты и приемы управления
- 5.2. Файлы и папки Windows
- 5.3. Операции с файловой структурой
- 5.4. Использование Главного меню
- 5.5. Установка и удаление приложений Windows
- 5.6. Установка оборудования
- Практическое занятие
- Исследовательская работа
- Глава 6 Настройка операционной системы Windows 98
- 6.1. Настройка средств ввода-вывода данных
- 6.2. Настройка элементов оформления Windows 98
- 6.3. Настройка элементов управления Windows 98
- 6.4. Настройка средств автоматизации Windows 98
- 6.5. Настройка шрифтов
- 6.6. Прочие настройки Windows 98
- 6.7. Справочная система Windows 98
- Практическое занятие
- Самостоятельная работа
- Глава 7 Стандартные приложения
- 7.1. Стандартные прикладные программы
- 7.2. Принципы внедрения и связывания объектов
- 7.3. Служебные приложения Windows 98
- 7.4. Стандартные средства мультимедиа
- Средства обеспечения совместимости с приложениями ms-dos
- Практическое занятие
- Глава 8 Компьютерные сети, Интернет, компьютерная безопасность
- 8.1. Компьютерные сети
- 8.2. Интернет. Основные понятия
- 8.3. Подключение к Интернету
- 8.4. Вопросы компьютерной безопасности
- Практическое занятие
- Глава 9 Получение информации из Интернета
- 9.1. Основные понятия World Wide Web
- 9.2. Работа с программой Internet Explorer 5.0
- 9.3. Поиск информации в World Wide Web
- 9.4. Отправка и получение сообщений
- Практическое занятие
- Глава 10 Создание простых текстовых документов
- 10.1. Общие сведения о текстовом процессоре
- 10.2. Приемы работы с текстами в процессоре
- 10.3. Приемы и средства автоматизации разработки документов
- Практическое занятие
- Глава 11 Создание комплексных текстовых документов
- 11.1. Ввод формул
- 11.2. Работа с таблицами
- 11.3. Работа с диаграммами
- 11.4. Работа с графическими объектами
- Практическое занятие
- Глава 12 Обработка данных средствами электронных таблиц
- Создание электронных таблиц Microsoft
- 12.2. Применение электронных таблиц для расчетов
- Практическое занятие
- Глава 13 Работа с базами данных
- 13.1. Основные понятия баз данных
- 13.2. Проектирование баз данных
- 13.3. Работа с субд Microsoft Access 2000
- Практическое занятие
- Глава 14 Приемы и методы работы со сжатыми жанными
- 14.1. Теоретические основы сжатия данных
- 14.2. Программные средства сжатия данных
- Практическое занятие
- Исследовательская работа
- 14.3. Программные средства уплотнения носителей
- Практическое занятие
- Исследовательская работа
- Глава 15 Введение в компьютерную графику
- Основы представления графических данных
- 15.2. Представление графических данных
- Практическое занятие
- 15.3. Средства для работы с растровой графикой
- 15.4. Средства для работы с векторной графикой
- Практическое занятие
- Исследовательская работа
- Практическое занятие
- Исследовательская работа
- Глава 16 Векторный редактор
- 16.1. Особенности CorelDraw
- 16.2. Настройка параметров CorelDraw
- Совместное использование панелей инструментов, свойств, интерактивных средств
- Работа с графикой и текстом
- Практическое занятие
- Глава 17 Автоматизация обработки документов
- 17.1. Преобразование документов в электронную форму
- Практическое занятие
- 17.2. Автоматизированный перевод документов
- Практическое занятие
- Глава 18 Средства автоматизации научно-исследовательских работ
- 18.1. Компьютер как инструмент научной работы
- 18.2. Приемы работы с системой MathCad
- Практическое занятие
- Глава 19 Публикация web-документов
- 19.1. Создание Web-документов
- 19.2. Применение языка html
- 19.3. Работа в редакторе FrontPage Express
- 19.4. Публикация Web-документов
- Практическое занятие
- Исследовательская работа
- Глава 20 Основы программирования
- 20.1. Языки программирования
- 20.2. Системы программирования
- Алгоритмическое (модульное) программирование
- 20.4. Структурное программирование
- Объектно-ориентированное программирование
- 20.6. Проектирование программ
- 20.7. Пример на Бейсике. Разведение кроликов
- 20.8. Пример на Паскале. Раскрашивание круга
- Практические задания по программированию
- Рекомендуемая литература
- Глава 5 Основы работы операционной системы windows 98 114
- Глава 6 Настройка операционной 139
- Информатика. Базовый курс
- 196105, Санкт-Петербург, ул. Благодатная, д. 67в.
- 197110, Санкт-Петербург, Чкаловский пр., 15.