Редактирование страницы HTML
Министерство образования и науки РФ
Брянский государственный технический университет
Кафедра: «Экономика, организация производства, управление»
Лабораторная работа №4
ЯЗЫК РАЗМЕТКИ HTML
По предмету:
«Сетевыеинформационные
технологии»
Выполнили:
Студентки гр.09-ЭК(б)
Лахтикова С.С.
Котова М.М.
Проверила:
Александрович Е. В.
2011 г.
ЦЕЛЬ РАБОТЫ
Ознакомление с особенностями форматирования документов HTML и их отображения при помощи обозревателя InternetExplorer. Изучение разметки абзацев. Создание документа, содержащего гиперссылки, графику. Изучение атрибутов тега <IMG>. Ознакомиться с элементами языка HTML, которые могут использоваться для форматирования текста документа. Научиться создавать списки средствами языка HTML и определять способ их нумерации (маркировки). Ознакомиться с приемами создания таблиц средствами языка HTML для представления данных, создавать таблицы и изменять их вид при помощи атрибутов тегов HTML. Научиться отображать в рамках одной Web-страницы несколько документов при помощи фреймов.
ТЕОРЕТИЧЕСКИЕ ПОЛОЖЕНИЯ
Создание страницы 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>
Редактирование страницы HTML
Парный тег <FONT> позволяет управлять параметрами шрифта. Он должен обязательно содержать хотя бы один из атрибутов:
1. COLOR=”шестнадцатеричный код цвета”,
2. FACE=гарнитура шрифта,
3. SIZE=размер от 1 до 7.
Элементы стиля
· <I>.....</I>Курсив(Italic)
· <B>...</B>Усиление(BOLD)
· <TT>...</TT> Телетайп
· <U>...</U>Подчеркивание
· <S>...</S> Перечеркнутый текст
· <BIG>...</BIG> Увеличенный текст
· <SMALL>...</SMALL> Уменьшенный текст
· <SUB>...</SUB>Подстрочные символы
· <SUP>...</SUP>Надстрочные символы
Существуют списки трех видов:
· упорядоченные (нумерованные),
· неупорядоченные (ненумерованные),
· списки определений.
Они создаются при помощи парных тегов:
<OL> для упорядоченного списка,
<UL> для неупорядоченного,
<LI> для элементов списка,
<DL> для списка определений,
<DD> для определений,
<DT> для определяемых терминов.
Таблицы используют для представления больших объемов текста, а также для точного размещения элементов страниц. Таблица в языке HTML задается при помощи парного тега <TABLE>. Она может содержать заголовок таблицы, определяемый тегом <CAPTION>, и строки таблицы, задаваемые при помощи парных тегов <TR>. Каждая строка таблицы содержит ячейки таблицы, которые могут относится к двум разным типам:
<TH> ячейки в заголовках таблиц,
<TD> обычные ячейки.
Язык HTML позволяет в рамках одной WEB-страницы отобразить несколько документов. Для этого страница должна быть разбита на несколько областей — фреймов. Тело документа <BODY> заменяется описанием фреймов, задаваемых парным тегом <FRAMESET>. Атрибуты: COLS= разбиение окна вертикально, ROWS= разбиение окна горизонтально.
ПРАКТИЧЕСКИЕ ЗАДАНИЯ
Задание 1. Создание простейшейWeb-страницы.
1. Запустим текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).
2. Введём следующий документ:
3. <HTML>
<HEAD><TITLE>Заголовок документа</TITLE></HEAD><BODY>
Содержание документа
</BODY>
</HTML>
4. Сохраним этот документ под именем first.html.
5. Запускаемпрограмму Internet Explorer (Пуск>Программы> Internet Explorer).
6. Даём команду Файл> Открыть. Щелкните на кнопке Обзор и откройте файл first.html.
7.
8.слова "Содержание" и "документа", введенные в двух отдельных строчках отображаются на одной строке.При уменьшении ширины окна текст остаётся на одной строке.
Задание 2. Изучение приемов форматирования абзацев.
1. Откроем документ first.html в программе Блокнот.
2. Удалим весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будем вводить в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>.
3. Введём заголовок первого уровня: Графиня, заключив его между тегами <H1> и </H1>.
4. Введите заголовок второго уровня: Граф, заключив его между тегами <H2> и </H2>.
5. Вводим отдельный абзац текста, начав его с тега <P>: Граф любит графиню.
6. Вводим тег горизонтальной линейки <HR>.
7. Вводим еще один абзац текста, начав его с тега <P>: Графиня – красавица!
8. Сохраняем этот документ под именем paragraph.html
9. Запускаемобозреватель Internet Explorer (Пуск>Программы> Internet Explorer).
10. Даём команду Файл> Открыть. Щелкните на кнопке Обзор и откройте файл paragraph.html
11. 
Задание 3. Создание гиперссылок.
1. Открываем документ first.html в программе Блокнот.
2. Удаляем весь текст, находящийся между тегами <BODY> и </BODY>. Текст помещаем после тега <BODY>.
3. Вводим фразу: Текст до ссылки.
4. Вводимтег: <A HREF="first.html">.
5. Вводим фразу: Ссылка.
6. Вводим закрывающий тег</А>.
7. Вводим фразу: Текст после ссылки.
8. Сохраняем документ под именем link.html
9. Запускаемобозреватель Internet Explorer (Пуск>Программы> Internet Explorer).
10. Даём команду Файл> Открыть. Щелкните на кнопке Обзор и открываем файл link.html
Задание 4. Создание изображения и использование его на Web-странице.
1. Открываем программу Paint (Пуск > Программы > Стандартные > Paint). Задаём размеры нового рисунка.
2. Выбираем красный цвет переднего плана и зеленый цвет фона. Заливаем рисунок фоновым цветом.
3. Инструментом Кисть наносим произвольный красный рисунок на зеленый фон.
4. Открываем этот рисунок в Microsoft Photo Editor и сохраняем рисунок под именем pict.gif (в формате GIF).
5. Даём команду Рисунок > Атрибуты. Устанавливаем флажок Использовать прозрачный цвет фона. Щелкаем на кнопке Выбор цвета и выбираем зеленый цвет, уже использованный на рисунке в качестве фонового.
6. Сохраняем рисунок еще раз под именем pic2.gif (в формате GIF) и закройте программу Microsoft Photo Editor.
Задание 5. Приемы форматирования текста.
1. Открываем документ first.html в программе Блокнот.
2. Удаляем весь текст, находящийся между тегами <BODY> и </BODY>.Вводим свой текст.
3. Вводимтег<BASEFONT SIZE="5" COLOR="BROWN">. Он задает вывод текста по умолчанию увеличенным шрифтом и коричневым цветом.
4. Вводим произвольный абзац текста, который будет выводиться шрифтом, заданным по умолчанию. Начните этот абзац с тега<Р>.
5. Вводимтеги: <Р><FONT SIZE="-2" FACE="ARIAL" COLOR="GREEN">.
6. Вводим очередной абзац текста, закончив его тегом </FONT>.
7. В следующем абзаце используем парный тег:<I> (курсив).
8. В следующем абзаце используем парный тег: <ЕМ> (выделение).
9. Сохраните полученный документ под именем format.html
10. Запускаемобозреватель Internet Explorer (Пуск>Программы> Internet Explorer).
11. Даёмкоманду Файл> Открыть. Щелкаем на кнопке Обзор и открываем файл format.html
Задание 6. Приемы создания списков.
1. Открываем документ first.html в программе Блокнот.
2. Удаляем весь текст, находящийся между тегами <BODY> и </BODY.
3. Вставляем в документ тег <OL TYPE="I">, который начинает упорядоченный (нумерованный) список.
4. Вставляем в документ элементы списка, предваряя каждый из них тегом <LI>.
5. Завершаем список при помощи тега </OL>.
6. Сохраняем полученный документ под именем list.html
7. Запускаемобозреватель Internet Explorer (Пуск>Программы> Internet Explorer).
8. Даём команду файл> Открыть. Щелкните на кнопке Обзор и откройте файл list.html
9. 
10. Возвращаемсяв программу Блокнот и устанавливаем текстовый курсор после окончания введенного списка.
11. Вставляем в документ тег <UL TYPE="square">, который начинает неупорядоченный (маркированный) список.
12. Вставляем в документ элементы списка, предваряя каждый из них тегом <LI>.
13. Завершаем список при помощи тега </UL>. Сохраняем документ под тем же именем.
14. 
15. Возвращаемся в программу Блокнот и устанавливаем текстовый курсор после окончания введенного списка.
16. Вставляем в документ тег <DL>, который начинает список определений.
17. Вставляем в список определяемые слова, предваряя соответствующие абзацы тегом <DT>.
18. Вставляем в список соответствующие определения, предваряя их тегом <DD>.
19. Завершаем список при помощи тега </DL>. Сохраняем документ под тем же именем.
20. Возвращаемся в программу InternetExplorer и щелкаем на кнопке Обновить на панели инструментов. Смотрим, как выглядит при отображении Web-страницы список определений.
Задание 7. Создание таблиц.
1. Открываем документ first.html в программе Блокнот.
2. Удаляем весь текст, находящийся между тегами <BODY> и </BODY>.
3. Введемтег<TABLE BORDER="10" WIDTH="100%">.
4. Введемстроку: <CAPTION ALIGN="TOP">Списоктелефонов</CAPTION>.
5. Первая строка таблицы должна содержать заголовки столбцов. Определим ее следующим образом:
<TR BGCOLOR="YELLOW" ALIGN="CENTER"><TH>Фамилия<TH>Номертелефона
6. Определим последующие строки таблицы, предваряя каждую из них тегом <TR> и помещая содержимое каждой ячейки после тега <TD>.
7. Последнюю строку таблицы задаём следующим образом: <TR><TD ALIGN="CENTER" COLSPAN="2">Ha первом этаже здания имеется бесплатный телефон-автомат.
8. Завершаем таблицу тегом </TABLE>.
9. Сохраняем документ под именем table.html
10. Запускаемобозреватель Internet Explorer (Пуск>Программы> Internet Explorer).
11. Даём команду Файл> Открыть. Щелкните на кнопке Обзор и откройте файл table.html
Задание 8. Создание описания фреймов.
1. Запускаем текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).
2. Вводим следующий документ:
<HTML>
<HEAD><TITLE>Описание фреймов </TITLE></HEAD>
<FRAMESET ROWS="60%,*">
<FRAME SRC="table.htm">
<FRAMESET COLS="35%,65%" NORESIZE><FRAME SRC="first.htm"><FRAME SRC="links.htm">
</FRAMESET>
</HTML>
3. Сохраняем этот документ под именем frames.html
4. Запускаемобозреватель Internet Explorer (Пуск>Программы> Internet Explorer).
5. Даём команду Файл> Открыть. Щелкните на кнопке Обзор и откройте файл frames.html
КОНТРОЛЬНЫЕ ВОПРОСЫ
2. Теги - это темы сообщения. Для каждого сообщения может быть несколько тем. Например, если мы собираетесь запоститьсообщение про антивирус Касперского, например, то вашими темами будут: антивирус, вирус, безопасность, защита. Четырех тем уже достаточно. Можно расширить конечно указав в тегах: черви, worm, трояны и прочее, до бесконечности.
3. HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге.
8. Фрейм (англ. frame — кадр, рамка) — в общем случае, отдельная область, отображаемая на мониторе, содержащая некоторую информацию.
Синонимы слова фрейм - встроенная рамка, динамическая область, управляемая область и т.д.
В языке HTML и веб-дизайне фрейм - часть окна браузера для представления отдельной веб-страницы.
Распознать визуально фреймы на веб-странице сложно или невозможно, если не просмотреть её программный код. В общем случае фрейм - это прямоугольник.
Каждый фрейм имеет свой url-адрес. При нажатии на любую из ссылок, расположенных в одном фрейме, можно рассматривать страницы, показанные в другом фрейме.