MS Internet Explorer – средство просмотра гипертекста.

Программа MSIE служит для просмотра гипертекстовых документов формата HTML. Для запуска программы достаточно щелкнуть два раза по значку Internet, расположенному на Рабочем столе. А также можно запустить из Главного меню, выбрав команду Программы – Приложения –Internet – Internet Explorer.

В окне программы MSIE выделен ряд областей:

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

- В панели адреса – изображается адрес Internet для активной страницы Web. Эта панель используется и для перемещений по сети. Для этого нужно в панели адреса ввести адрес нужной страницы.

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

- В строке состояния изображается информация о состоянии MSIE в данный момент. Для получения подробной информации нужно расположить указатель мыши над значком в правой части строки состояния.

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

Программа MSIE позволяет перемещаться по системе Web несколькими способами:

- перейти к определенной странице, щелкнув по связи;

- перейти к определенной странице, указав адрес Internet (URL);

- вернуться к ранее просмотренным страницам при помощи команд Вперед и Назад;

- при помощи команд меню Файл;

- вернуться к излюбленным страницам, сохранив указатели на эти страницы.

MSIE позволяет распечатать любую страницу Web командой Печать из меню Файл. При этом на экране появляется общее диалоговое окно Печать.

MSIE позволяет записать любую страницу Web на диск в виде файла. При помощи команды Сохранить как из меню Файл можно сохранить страницу Web в одном из двух форматов – текстовом или HTML.

MSIE позволяет перекачивать файлы с некоторых серверов Web, позволяющих это сделать. Обычно MSIE отображает такие файлы в виде в виде связей. После щелчка на соответствующей связи появляется окно Сохранение документа, где нужно указать место записи файла. Перекачивание файла можно прервать щелчком на кнопке Останов.

MSIE способна работать с ярлыками страниц Web. Эти ярлыки могут указывать на информацию, которая находится в любом месте сети. Создав ярлык его можно поместить на Рабочий стол, отправить друзьям в сообщении электронной почты или внедрить в документ какого-либо приложения. Для создания ярлыка текущей страницы Web нужно вызвать команду Создать ярлык из меню Файл. После создания ярлыка его можно переместить, скопировать или переименовать. Двойной щелчок по ярлыку вызовет переход к той странице, на которую он указывает.

MSIE позволяет перетаскивать графические изображения и фрагменты текста из области документа и помещать их на Рабочий стол или в документы других приложений:

- Убедитесь, что MSIE не развернуто во весь экран, и что на экране видна часть Рабочего стола.

- Расположите указатель мыши над рисунком и нажмите левую кнопку мыши.

- Переместите указатель мыши на поверхность Рабочего стола. При этом вид указателя должен измениться.

- Отпустите кнопку мыши. На Рабочем столе должен появиться значок, соответствующий скопированному изображению.

MSIE может превратить рисунок страницы Web в обои Windows. Нужно щелкнуть правой кнопкой мыши на этом рисунке. Появится меню объекта, из которого нужно выбрать команду Установить обои Windows.

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

Некоторые составные части Internet строятся по иной, чем Web технологии: FTP и GOPHER. MSIE обеспечивает для работы с этими системами точно такой же интерфейс как и при работе с Web- серверами. Для подключения к FTP – серверу его адрес вводится точно также как и адреса страниц Web – т.е. в панели адреса или с помощью команды Открыть в меню Файл. Например, ftp://ftp.microsoft.com.

Если для подключения к FTP-серверу нужно указать пользовательские имя и пароль, то используется следующий формат запроса: ftp://имя:пароль@ftp.microsoft.com.

Создание Web-страницы.

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

Некоторые основные теги:

<HTML/ - начало документа,

</HTML/ - конец документа,

<TITLE/ - титульный заголовок страницы,

<BODY/ - часть документа, отображаемая на экране,

<H1/,<H2/,<H3/,<H4/ - размер шрифта,

<P/ - абзац,

<BR/ - начало строки,

<HR/ - горизонтальная разделительная линия.

 

Пример простейшего HTML – документа:

 

<HTML/

<HEAD/

<TITLE/ Простой HTML- документ </TITLE/

</HEAD/

<BODY/

<H1/ HTML - это совсем просто </H1/

Добро пожаловать в WWW <BR/ и мир HTML – документов

</BODY/

</HTML/

 

Символы верхнего и нижнего регистров в тегах не различаются.

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

Для указания на ссылку в языке HTML используется тег <A/. Чтобы включить ссылку в документ, необходимо:

- поместить в текст тег <A/ после которого следует пробел;

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

- указать на завершение тега </A/

 

Пример простой ссылки:

<A HREF=”CHAPTER2.HTM”/Глава 2</A/

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

<IMG SRC=”имя файла”/

Для создания HTML – документов в состав MSIE входит специальный редактор Microsoft Front Page Express. Кроме этого, Web – страницы можно создать с помощью приложений Office 97.

Например, текстовый редактор Word 97 предоставляет два способа создания Web – страниц: с помощью шаблона, либо преобразование в Web – страницу существующего Web – документа. Способ, которым каждое приложение Office 97 обрабатывает HTML, заключается в использовании специального модуля, который перекодирует стандарт данного приложения в формат HTML. Необходимо убедиться, что эти модули установлены: в меню СЕРВИС нужно выбрать пункт Шаблоны и надстройки. В списке надстроек нужно проверить наличие элементов HTML.DOT и HTML.WLL.

1. Находясь в Word, в меню Файл выбрать пункт Создать.

2. В появившемся окне выбрать вкладку Web – страницы и сделать двойной щелчок по шаблону МАСТЕР WEB – страниц. Появится диалоговое окно этого мастера.

3. Выбрать пункт Простая и щелкнуть на кнопке Далее. Появится список стилей, из которых выбрать Элегантный стиль и нажать кнопку Готово.

4. Появится окно документа с открытым шаблоном.

Порядок выполнения работы.

Задание 1. Создание простейшей Web-страницы

1. Запустите текстовый редактор Блокнот.

2. Введите следующий документ:

<HTML/

<HEAD/

<ТIТLЕ/Заголовок документа</ТIТLЕ/

</HEAD/

<BODY/

Содержание

документа

</BODY/

</HTML/

3. Сохраните этот документ под именем first.htm.

Перед сохранением убедитесь, что сброшен флажок Не показывать расширения для зарегистрированных типов файлов (Пуск / Настройка / Свойства папки / Вид). В противном случае редактор Блокнот может автоматически добавить в конец имени расширение.ТХТ.

4. Запустите программу Internet Explorer (Пуск / Программы / Internet Explorer),

5. Дайте команду Файл / Открыть. Щелкните на кнопке Обзор и откройте файл first.htm.

6. Посмотрите, как отображается этот файл – простейший корректный документ HTML. Где отображается содержимое элемента TITLE? Где отображается содержимое элемента BODY?

7. Как отображаются слова «Содержание» и «документа», введенные в двух отдельных строчках? Почему? Проверьте, что происходит при уменьшении ширины окна.

Задание 2. Изучение приемов форматирования абзацев

1. Откройте документ first.htm в программе Блокнот.

2. Удалите весь текст, находящийся между тегами <BODY/ и </BODY/. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY/, а его конкретное содержание может быть любым.

3. Введите заголовок первого уровня, заключив его между тегами <Н1/ и </Н1/.

4. Введите заголовок второго уровня, заключив его между тегами <Н2/ и </Н2/.

5. Введите отдельный абзац текста, начав его с тега <Р/. Пробелы и символы перевода строки можно использовать внутри абзаца произвольно.

6. Введите тег горизонтальной линейки <HR/.

7. Введите еще один абзац текста, начав его с тега <Р/.

8. Сохраните этот документ под именем paragraph.htm.

9. Запустите обозреватель Internet Explorer (Пуск / Программы / Internet Explorer).

10. Дайте команду Файл / Открыть. Щелкните на кнопке Обзор и откройте файл paragraph, htm.

11. Посмотрите, как отображается этот файл. Установите соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране.

Задание 3. Создание гиперссылок

1.Откройте документ first.htm в программе Блокнот.

2. Удалите весь текст, находящийся между тегами <BODY/ и </BODY/. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY/.

3. Введите фразу: Текст до ссылки.

4. Введите тег: <А HREF="first.htm"/.

5. Введите фразу: Ссылка.

6. Введите закрывающий тег </А/.

7. Введите фразу: Текст после ссылки.

8. Сохраните документ под именем link.htm.

9. Запустите обозреватель Internet Explorer (Пуск / Программы / Internet Explorer).

10. Дайте команду Файл / Открыть. Щелкните на кнопке Обзор и откройте файл link.htm.

11. Убедитесь в том, что текст между тегами < А / и </А/ выделен как ссылка (цветом и подчеркиванием).

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

13. Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.

Задание 4. Создание изображения и использование его на Web-странице

1. Откройте программу Paint (Пуск / Программы / Стандартные / Paint). Задайте размеры нового рисунка, например 50х50 точек (Рисунок / Атрибуты).

2. Выберите красный цвет переднего плана и зеленый цвет фона. Залейте рисунок фоновым цветом.

3. Инструментом Кисть нанесите произвольный красный рисунок на зеленый фон.

4. Сохраните рисунок под именем pic1.gif (в формате GIF).

5. Дайте команду Рисунок / Атрибуты. Установите флажок Использовать прозрачный цвет фона. Щелкните на кнопке Выбор цвета и выберите зеленый цвет, уже использованный на рисунке в качестве фонового.

6. Сохраните рисунок еще раз под именем pic2.gif (в формате GIF) и закройте программу Paint.

7. Если это задание выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.

8. Удалите весь текст, находящийся между тегами <BODY/ и </BODY/. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY/.

9. Введите произвольный текст (протяженностью 4-5 строк) и установите текстовый курсор в его начало.

10. Введите тег <IMG SRC="pic1.gif" ALIGN="BOTTOM"/.

11. Сохраните документ под именем picture.him.

12. Запустите обозреватель Internet Explorer.

13. Дайте команду Файл / Открыть. Щелкните на кнопке Обзор и откройте файл picture.htm. Посмотрите на получившийся документ, обращая особое внимание на изображение.

14. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="TOP". Сохраните файл под тем же именем.

15. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

16. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="LEFT". Сохраните файл под тем же именем.

17. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

18. Вернитесь в программу Блокнот и добавьте в тег <IMG/ атрибуты: HSPACE=40 VSPACE=20. Сохраните файл под тем же именем.

19. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

20. Вернитесь в программу Блокнот и измените имя рисунка: SRC="pic2.gif". Сохраните файл под тем же именем.

21. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов. В чем различие между двумя созданными рисунками?

Задание 5. Приемы форматирования текста

1. Если это задание выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.

2. Удалите весь текст, находящийся между тегами <BODY/ и </BODY/. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY/, а его конкретное содержание может быть любым.

3. Введите тег <BASEFONT SIZE="5" COLOR="BROWN"/. Он задает вывод текста по умолчанию увеличенным шрифтом и коричневым цветом.

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

5. Введите теги: < Р / <FONT SIZE="-2" FACE="ARIAL" COLOR="GREEN"/.

6. Введите очередной абзац текста, закончив его тегом </FONT/.

7. В следующем абзаце используйте по своему усмотрению парные теги: < В / (полужирный шрифт), < I / (курсив), <U/ (подчеркивание), < S / (вычеркивание), <SUB/ (нижний индекс), <SUP/ (верхний индекс).

8. В следующем абзаце используйте по своему усмотрению парные теги: <ЕМ/ (выделение), <STRONG/ (сильное выделение), <CODE/ (текст программы), <KBD/ (клавиатурный ввод), <SAMP/ (пример вывода), <VAR/ (компьютерная переменная).

9. Сохраните полученный документ под именем format.htm.

10. Запустите обозреватель Internet Explorer (Пуск / Программы / Internet Explorer).

11. Дайте команду Файл / Открыть. Щелкните на кнопке Обзор и откройте файл format.htm.

12. Изучите, как использованные элементы HTML влияют на способ отображения текста.

13. Вернитесь в программу Блокно т и измените документ так, чтобы элементы, задающие форматирование, были вложены друг в друга. Сохраните документ под тем же именем.

14. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы.

Задание 6. Приемы создания списков

1. Если это задание выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.

2. Удалите весь текст, находящийся между тегами <BODY/ и </BODY/. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY/, а его конкретное содержание может быть любым.

3. Вставьте в документ тег <OL TYPE="I"/, который начинает упорядоченный (нумерованный) список.

4. Вставьте в документ элементы списка, предваряя каждый из них тегом <LI/.

5. Завершите список при помощи тега </OL/.

6. Сохраните полученный документ под именем list.htm.

7. Запустите обозреватель Internet Explorer (Пуск / Программы / Internet Explorer).

8. Дайте команду Файл / Открыть. Щелкните на кнопке Обзор и откройте файл list.htm.

9. Изучите, как упорядоченный список отображается в программе Internet Explorer, обращая особое внимание на способ нумерации, заданный при помощи атрибута TYPE=.

10. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.

11. Вставьте в документ тег <UL TYPE="SQUARE"/, который начинает неупорядоченный (маркированный) список.

12. Вставьте в документ элементы списка, предваряя каждый из них тегом <LI/.

13. Завершите список при помощи тега </UL/. Сохраните документ под тем же именем.

14. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы, обратив внимание на способ маркировки, заданный при помощи атрибута TYPE=.

15. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.

16. Вставьте в документ тег <DL/, который начинает список определений.

17. Вставьте в список определяемые слова, предваряя соответствующие абзацы тегом <DT/.

18. Вставьте в список соответствующие определения, предваряя их тегом <DD/.

19. Завершите список при помощи тега </DL/. Сохраните документ под тем же именем.

20. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как выглядит при отображении Web-страницы список определений.

Задание 7. Создание таблиц

1. Если это задание выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.

2. Удалите весь текст, находящийся между тегами <BODY/ и </BODY/. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY/. В данном упражнении используется список номеров телефонов.

3. Введите тег <TABLE BORDER="10" WIDTH="100%"/.

4. Введите строку: <CAPTION АLIGN="ТОР"/Список телефонов</САРТION/.

5. Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом:

<TR BGCOLOR="YELLOW" ALIGN="CENTER"/ <ТН/Фамилия<ТН/Номер телефона

6. Определите последующие строки таблицы, предваряя каждую из их тегом <TR/ и помещая содержимое каждой ячейки после тега <TD/.

7. Последнюю строку таблицы задайте следующим образом:

<TR/<TD ALIGN="CENTER" COLSPAN="2"/Ha первом этаже здания

имеется бесплатный телефон-автомат.

8. Завершите таблицу тегом </TABLE/.

9. Сохраните документ под именем table.htm.

10. Запустите обозреватель Internet Explorer (Пуск / Программы / Internet Explorer).

11. Дайте команду Файл / Открыть. Щелкните на кнопке Обзор и откройте файл table.htm.

12. Изучите, как созданная таблица отображается в программе Internet Explorer, обращая особое внимание на влияние заданных атрибутов.

13. Измените ширину окна обозревателя и установите, как при этом изменяется внешний вид таблицы.

 

Задание 8. Создание описания фреймов

1. Запустите текстовый редактор Блокнот.

2. Введите следующий документ:

<HTML/

<HEAD/

<ТIТIЕ/Описание фреймов</ТIТIЕ/

</HEAD/

<FRAMESET ROWS="60%,*"/

<FRAME SRC="table.htm"/

<FRAMESET COLS="35%,65%" NORESIZE/

<FRAME SRC="flrst.htm"/

<FRAME SRC="links.htm"/

</FRAMESET/

</HTML/

3. Сохраните этот документ под именем frames.htm.

4. Запустите обозреватель Internet Explorer.

5. Дайте команду Файл / Открыть. Щелкните на кнопке Обзор и откройте файл frames.htm.

6. Изучите представление нескольких созданных ранее документов, в отдельных фреймах.

7. Посмотрите, что происходит при изменении ширины окна обозревателя.

8. Проверьте, можно ли изменить положение границ фреймов методом перетаскивания при помощи мыши.

9. Щелкните на ссылке, имеющейся в одном из фреймов, и посмотрите, как будет отображен новый документ.

10. Щелкните на кнопке Назад на панели инструментов и убедитесь, что возврат к предыдущему документу не нарушает структуру фреймов.

11. Вернитесь в программу Блокнот и измените структуру и параметры фреймов по своему усмотрению. Сохраните документ под тем же именем.

12. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Убедитесь, что измененный вид Web-страницы соответствует замыслу. Если это не так, вернитесь в программу Блокнот, найдите и исправьте ошибки.

 

Задание 9. Создание Web-документа с помощью редактора Frontpage Express

1. Запустите программу Frontpage Express (Пуск / Программы / Стандартные / Средства Интернета / Frontpage Express).

2. Введите в программе Frontpage Express произвольный текст документа.

3. С помощью панели инструментов форматирования отформатируйте текст по собственному усмотрению.

4. Для создания таблицы щелкните на кнопке Вставить таблицу на стандартной панели инструментов.

5. Для добавления иллюстраций используйте кнопку Вставить изображение на стандартной панели инструментов. Иллюстрации возьмите из папки C:/Windows.

6. Дайте команду Файл / Сохранить, щелкните на кнопке Как файл и задайте имя файла wysiwyg.htm. Подтвердите сохранение изображений, требующих преобразования формата.

7. Запустите обозреватель Internet Explorer (Пуск / Программы / Internet Explorer).

8. Дайте команду Файл / Открыть. Щелкните на кнопке Обзор и откройте файл wysiwyg.htm.

9. Убедитесь, что созданный документ правильно отображается обозревателем. Обратите внимание на наличие отличий вида документа при отображении в обозревателе и в программе Frontpage Express.

10. Измените ширину окна обозревателя и посмотрите, как при этом меняется вид документа.

11. Вернитесь в программу Frontpage Express и дайте команду Вид / HTML

12. Изучите автоматически сгенерированный код HTML, определите, как с помощью тегов HTML реализованы использованные команды форматирования.

4. Контрольные вопросы.

1. Какие ресурсы доступны в Internet?
2. Как найти нужную информацию в Internet?
3. Как скопировать файл по ftp?
4. Какие возможности предоставляет программа Internet Explorer?

Лабораторная работа № 18. Подготовка HTML-документа для web-сайта в сети Internet.

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

Требование к отчету

Отчет о проделанной работе должен содержать:

– название и цель работы;

– описание основных этапов работы и результатов их выполнения;

– письменные ответы на контрольные вопросы

 

Введение.

Документ, написанный на языке HTML, представляет собой текст, в который вписаны теги (markup tags) или теги разметки. Теги помогают программе просмотра разобраться, как должен быть расположен текст на экране, в каком месте будут находиться рисунки, хранящиеся в совсем других файлах, и т.д. С помощью тегов формируются связи с другими web-документами и ресурсами Интернета. Текст с тегами называется исходным кодом (Source). Просмотреть готовый файл, написанный на HTML, можно в программах просмотра (MicrosoftInternet Explorer). На экране просмотра теги не отображаются.

Теги – определенные последовательности символов, заключенные между знаками

< (меньше) и > (больше). Символ < обозначает начало тега, символ > обозначает конец тега. Все, что заключено между тегами, является HTML-документом.

Любой HTML-документ состоит их двух частей. Первая часть – заголовок, который находится между тегами< HEAD > и < / HEAD >. В нем содержится информация о документе, которая не выводится на экран. Название странички располагается между тегами < TITLE > и < / TITLE > и появляется в верхней части окна программы просмотра. Например, < TITLE > моя страничка < / TITLE >

Прописные или строчные буквы, используются в написание тегов, значения не имеет. Компьютер одинаково отреагирует на записи < title > и < TITLE >.

Вторая часть – тело, которое выводится на экран программой просмотра – текст, картинки, видеофрагменты и т.д. Оно заключается между тегами < BODY > и < / BODY>. Форматирующие теги бывают парными и непарными, открывающими и закрывающими. Область действия парного тега начинается с того места, где стоит открывающий тег, а кончается там, где встречается закрывающий. Признак закрывающего тега – символ /. Почти все форматирующие теги всегда следуют парами, и для открывающего тега должен существовать закрывающий.

Непарных тегов мало, например, для перехода на новую строку используется тег <br > (Line Break).

Сохраните созданный файл в вашей папке. Для этого выполните Файл\Сохранить как, затем откройте свою папку. В поле Имя файла наберите 1.html, а в поле Тип файла из раскрывающегося списка выберите Все файлы. Нажмите кнопку Сохранить.

Закройте Блокнот. Откройте свою папку. Найдите документ в формате html, он имеет такую же пиктограмму, как и документы из Интернета. Например,

Откройте документ и посмотрите результат.

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

<p> текст </p>

Вместе с тегом параграфа можно задать параметры выравнивания (align):

right – по правому краю.

left – по левому краю.

center – по центру.

Тег <p align = right > обеспечивает выравнивание теста параграфа по правому краю.

Тег <p align = left > обеспечивает выравнивание теста параграфа по левому краю.

Тег <p align = center > обеспечивает выравнивание теста параграфа по центру.

Еще один способ выравнивания текста

<right > текст </ right >

< left> текст </ left >

< center > текст </ center >

Для увеличения расстояние текста от левого края или нужна «красная строка», то после тега <p >поставьте (&nbsp;). Например,

<p> &nbsp; &nbsp; &nbsp; Текст

В основном тексте не должно быть переносов.

ЗАГОЛОВКИ

Для выделения логических частей текста используют заголовки (headings). Они обозначаются прописной или строчной латинской буквой h. Цифра после буквы указывает уровень заголовка (всего их может быть шесть). Как и любой текст, заголовки можно выравнивать по левому и правому полю, по центру. Переносы в заголовках запрещены.

Задание. Объясните значение каждого из тегов в данном примере. Наберите текст.

<h1 align=center > Информационные технологии в образовании < /h1 >

< h2 align=left> Преобразование информации < /h2 >

< h3 align=right> Коммуникационные технологии < /h3>

< h4 align=center> Интернет < /h4>

< h5 align=center> Поиск информации < /h5>

Откройте файл и убедитесь в правильности выполнения задания.

Фрагмент текста можно выделить полужирным шрифтом (Bold). Для этого используется открывающий тег <b> и закрывающий тег </b>.

Отдельные слова можно подчеркнуть (Underline). Для этого применяют <u> и </u>.

Часто для выделения используют курсив (Italic). Для этого служат теги <i> и </i>.

Можно заставить текст мигать (Blink), но таким выделением нужно пользоваться очень осторожно, поскольку мигающий текст трудно читается.

Если нужно выделить текст одновременно полужирным шрифтом и курсивом, то необходимо использовать следующие теги

<i><b> текст </b></i>

<b><i>текст </i> </b>

Запомните: тег, который открывался первым, закрывается последним. Теги вкладываются друг в друга.

Теги, управляющие шрифтами, имеют свои атрибуты. Можно увеличить или уменьшить размер шрифта, который измеряется в пунктах. Один пункт 0,353 мм или 1/72 дюйма. Он задается относительно размера, установленного в программе просмотра по умолчанию.

<font size=+n>текст</font>

<font size= -n>текст</font>

где n – число пунктов, на которое увеличивается или уменьшается размер шрифта.

Атрибут face означает название шрифта. Нужно иметь в виду, что в случае, если программа просмотра, с помощью которой посетитель будет просматривать вашу страничку в Интернет, не имеет такого шрифта, то текст будет недоступен.

<font size= «+7» color= «red» face= «Arial»> текст </font>

для выделения логических частей текста можно использовать горизонтальную линию (Horizontal Rule). Она обозначается тегом <hr>, закрывающий тег при этом не требуется. Перед тегом <hr> и после него не нужно ставить тег <p> или <br>, поскольку он сам по себе является переносчиком.

Пример.

Заголовок

<hr>

<br><br><br>текст

Чем больше <br>, тем дальше отстоит текст от линии.

У тега <hr> есть свои атрибуты, которые не являются обязательными.

<hr align=”...” color=”...”noshade size=”n”width=”n”>

Это означает

§ align=”...” - в кавычках обозначаем место расположения линии по правому краю (right), по левому краю (left) или по центру (center).

§ сolor= - цвет линии.

§ noshade - по умолчанию задается объемная линия.

§ size=”n” – толщина линии, где n – толщина в пикселях.

§ width=”n” или width=”n%” - где n – ширина в пикселях или процентах.

Самые часто употребляемые параметры – размер и толщина линии – задаются с помощью параметров size иwidth

<HR SIZE=2 WIDTH=”10%”>

Необходимо знать, что для экрана размером 800х600 максимальная ширина n=750. Если вы не укажите атрибут width, то линия получится во весь экран. Значение в % от свободного пространства обозначается n%.

Пример. если вы хотите, чтобы линия занимала ровно половину экрана, то ставьте 50%. В одном теге не может быть двух атрибутов width, значение атрибута указывается либо в %, либо в пикселях.

Горизонтальную линию можно нарисовать с помощью любого графического редактора, а затем вставить в html – код. Нарисуйте в отдельном файле любую линию, сохраните файл в ту же папку с расширением gif. Например, 1.gif. После этого вставьте ее в исходный код своей страницы.

< img src=”1.gif”>

ОФОРМЛЕНИЕ ТЕКСТА

 

Для сохранения элементов форматирования на Web-странице как и в оригинале (шрифт, размер шрифта, таблицы, размещение текста относительно границ листа и т.д.) используют парные теги <PRE> и </PRE>.

Задание. Создайте HTML-документ и сохраните его под именем ind3.htl в своей папке.

 

Между тегами <PRE> и </PRE> можно вставить несколько абзацев любого текста, скопированного из текстового редактора.

 

ОФОРМЛЕНИЕ СПИСКОВ

 

При оформлении информации в HTML часто возникает необходимость оформления маркированных, нумерованных и вложенных списков.

Маркированные списки.

Избегайте драматического эффекта:

§ По возможности избегайте пиктограммы «В процессе производства».

§ Используйте соответствующий язык.

§ Не перегружайте страницу большими изображениями.

§ Проверяйте ссылки на вашей странице.

В маркированном списке (Unordered List) каждому элементу списка соответствует маркер (bullet) – символ или графическое изображение. Для создания маркированного списка используют следующие теги

<p> Избегайте драматического эффекта:

<ul>

<li> Используйте соответствующий язык.

<li> Не перегружайте страницу большими изображениями.

<li> Проверяйте ссылки на вашей странице.

</ul>

Нумерованные списки.

Мультимедиа ресурсы.

1. Большая энциклопедия «Кирилл и Мефодий».

2. Мультимедиа энциклопедия науки и техники «От плуга до лазера 2.0».

3. Компьютерные фильмы-лекции ТПО «Северный очаг».

В нумерованном списке (Ordered List) каждому элементу предшествует его порядковый номер. Чтобы программа просмотра правильно расставила номера, нужно использовать теги разметки.

<p> Мультимедиа ресурсы.

<ol>

<li> Большая энциклопедия «Кирилл и Мефодий».

<li> Мультимедиа энциклопедия науки и техники «От плуга до лазера 2.0».

<li> Компьютерные фильмы-лекции ТПО «Северный очаг».

</ol>

По умолчанию программа вставляет арабские цифры (1, 2, 3, …).

Вложенные списки (Nested lists) сочетают в себе элементы обоих списков. Для их создания используются теги маркированного и нумерованного списков.

< p > Используемые ресурсы

<ul>

<li> Библиография

<li> Мультимедиа ресурсы

<ol>

<li> Большая энциклопедия «Кирилл и Мефодий».

<li> Мультимедиа энциклопедия науки и техники «От плуга до лазера 2.0».

<li> Компьютерные фильмы-лекции ТПО «Северный очаг».

</ol>

<li> Ресурсы Интернет

<ol>

<li> http://www.college.ru/metod_phys.html

<li> http://vio.fio.ru.

<li> http://intelteach.ru

</ol>

</ul>

Необязательным атрибутом тега <ul> является type, обозначающий тип маркера.

<ul type=”circle”> кружок

<ul type=”disk”> пустой кружок

<ul type=”square”> квадратик.

Необязательным атрибутом тега <ol>

<ol start=”n” type=” “>

start=”n”, где n – номер, с которого начинается нумерация.

type=” “ в кавычках пишутся буквы или цифры, например, А – большие буквы (А, В, С,…); а – маленькие буквы (a, b, c,...); I – римские цифры (I, II, III,...); 1 – арабские цифры (1, 2, 3, …).

Задание. Выполните страницу, текст которой будет организован с помощью списков сразу трех видов. Сохраните ее в своей папке под именем ind4.htm.

 

Откройте файл ind4.htm в программе просмотра на своем компьютере.

Попробуйте убрать <ul> и </ul>. В чем разница?

 

СОЗДАНИЕ СЛОВАРЯ ТЕРМИНОВ

 

Чтобы поместить на страничке словарь терминов, следует использовать тег <dt>. В этом случае текст располагается без отступа от левого поля странички.

Задание. Создайте в вашей папке файл с именем ind5.htm следующего содержания.

<HTML>

<HEAD>

<TITLE> Термины </TITLE>

</HEAD>

<BODY>

<dl>

<dt> Web server

<dd>Web-сервер. Сервер, хранящий и пересылающий HTML-документы и другие информационные ресурсы Интернет с использованием протокола HTTP. Его называют так же HTTP-сервером. </P>

<dt> HOME PAGE

<dd> «Домашняя страница». Головная, начальная страница, локальный архив. Первая страница какого-либо Web-сервера или логически связанной группы HTML документов. </P>

</dl>

</BODY>

</HTML>

Откройте и посмотрите получившуюся страницу.

Задание. Создайте свой собственный HTML-документ, в котором должны присутствовать:

§ Название странички.

§ Заголовки нескольких уровней, выровненные по центру, левому или правому полю.

§ Параграфы с текстом.

§ Фрагменты выделенного текста (с помощью полужирного шрифта, курсива, размера шрифта, горизонтальной линии).

§ Списки.

Сохраните этот файл в вашей папке под именем index.htm и просмотрите его с помощью программы просмотра.

Контрольные вопросы.

1. Что такое тег?

2. Что такое исходный код?

3. Какой символ обозначает начало тега? Какой символ обозначает конец тега?

4. Что такое парные теги? Приведите пример.

5. Из каких частей состоит HTML документ?

6. Как выделяется заголовок документа?

7. Как выделяется тело документа?

8. Какие теги позволяет создать параграф (новый абзац)?

9. Какие теги позволяют создавать маркированные и нумерованные списки?

 

Список литературы

Основная литература:

 

1. Максимов Н.В., Партыка Т.Л., Попов И.И. Информационные технологии в профессиональной деятельности – М.: ФОРУМ, 2010.- 496с.

2. Семакин И.Г. Информатика и ИКТ. Базовый уровень: учебник для 10-11 классов /. 4-е изд., – М.: БИНОМ. Лаборатория знаний, 2008. —234с.

3. Угринович Н.Д. Информатика и ИКТ. Базовый уровень: учебник для 10 класса/. – 4-е изд. – М.: БИНОМ, Лаборатория знаний, 2008 —260с.

4. Михеева Е.В., Информационные технологии в профессиональной деятельности. – М.: Издательский центр «Академия», 2008—211с.

 

Дополнительная литература:

 

1. Шафрин Ю. Основы компьютерной технологии. Учебное пособие. - Москва АБФ, 2009.

2. Журнал "ПОТРЕБИТЕ