- •Введение
- •1. Цель работы
- •2. Порядок выполнения работы
- •3. Теоретические положения
- •3.1. Создание страницы html
- •3.2 Редактирование страницы html
- •4. Практические задания Задание 1. Создание простейшей Web-страницы.
- •Задание 2. Изучение приемов форматирования абзацев.
- •Задание 3. Создание гиперссылок.
- •Задание 4. Создание изображения и использование его на Web-странице.
- •Задание 5. Приемы форматирования текста.
- •Задание 6. Приемы создания списков.
- •Задание 7. Создание таблиц.
- •Задание 8. Создание описания фреймов.
- •4. Содержание отчета
- •5. Контрольные вопросы
- •6. Список рекомендуемой литературы
- •Приложение
1. Цель работы
Цель проведения лабораторной работы: ознакомление с особенностями форматирования документов HTML и их отображения при помощи обозревателя Internet Explorer. Изучение разметки абзацев. Создание документа, содержащего гиперссылки, графику. Изучение атрибутов тега <IMG>. Ознакомиться с элементами языка HTML, которые могут использоваться для форматирования текста документа. Научиться создавать списки средствами языка HTML и определять способ их нумерации (маркировки). Ознакомиться с приемами создания таблиц средствами языка HTML для представления данных, создавать таблицы и изменять их вид при помощи атрибутов тегов HTML. Научиться отображать в рамках одной Web-страницы несколько документов при помощи фреймов.
На выполнение лабораторной работы отводится 6 часов.
2. Порядок выполнения работы
1. Изучение теоретических вопросов.
2. В папке Мои документы создать вложенную папку с именем HTML, для хранения всех файлов, созданных при выполнении задания. В текстовом процессоре Блокнот создать Web-документ. Просмотреть документ в коде HTML и в программе Internet Explorer.
3. В текстовом процессоре Блокнот создать документ HTML, содержащий форматированный текст. Просмотреть документ в Internet Explorer.
4. Включить рисунок в ранее созданный файл. Просмотреть измененный файл в Internet Explorer
5. Создать файл с разметкой таблицы и просмотреть его в Internet Explorer.
6. Создать с файл c гиперссылками на ранее созданные документы. Просмотреть в Internet Explorer, с помощью гиперссылок по очереди вывести содержимое документов.
7. Создать файл, размечающий фреймы, в которых показать ранее созданные документы. Просмотреть разметку фреймов в Internet Explorer.
8. Ответы на контрольные вопросы.
9. Оформление отчета.
10. Сдача зачета по выполненной работе.
Студент допускается к выполнению лабораторной работы только после собеседования с преподавателем.
3. Теоретические положения
3.1. Создание страницы html
Все документы HTML имеют одну и ту же структуру, определяемую определенным набором тегов. Теговую модель можно представить в следующем виде: <имя элемента, список атрибутов> содержание элемента </имя элемента>.
Например, применим тег <P> (новый параграф в тексте):<P align=center>Это новый параграф</P> В рассмотренном примере
-
P — это имя тега;
-
align=center — атрибут тега, указывающий на то, что текст внутри параграфа необходимо разместить по центру;
-
Это новый параграф — содержание параграфа;
-
/P — закрывающий тег, указывающий на конец параграфа;
Гипертекстовая ссылка определяется при помощи парного тега <A>. Обязательным атрибутом является HREF=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка, ссылка может быть локальной.
Примеры:
-
<A HREF="http://www.eopu.tu-bryansk.ru"> Сайт кафедры ЭОПУ</A>
-
<A HREF="http://www.eopu.tu-bryansk.ru/index.html#point"> Ссылка на второй абзац внутри документа "ЭОПУ"</A>.
Для представления графики используют форматы файлов GIF и JPEG. Для вставки рисунка используется текстовый элемент, задаваемый непарным тегом <IMG>. Тег <IMG> должен содержать обязательный атрибут SCR=, задающий адрес URL файла с изображением.
Пример: <img SRC="http://www.tu-bryansk.ru /images/logo.gif">
Любой гипертекстовый документ состоит из двух частей: заголовка документа (HEAD) и тела документа (BODY)
<HTML> <HEAD>
<TITLE> Содержание заголовка </TITLE>
</HEAD> <BODY> Содержание тела документа
…………………………..
…………………………..
………………………….
</BODY> </HTML>