Редактирование страницы HTML

Министерство образования и науки РФ

Брянский государственный технический университет

 
  Редактирование страницы HTML - student2.ru

Кафедра: «Экономика, организация производства, управление»

Лабораторная работа №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.

Редактирование страницы HTML - student2.ru

8.слова "Содержание" и "документа", введенные в двух отдельных строчках отображаются на одной строке.При уменьшении ширины окна текст остаётся на одной строке.

Редактирование страницы HTML - student2.ru

Задание 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. Редактирование страницы HTML - student2.ru

Задание 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

Редактирование страницы HTML - student2.ru

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

1. Открываем программу Paint (Пуск > Программы > Стандартные > Paint). Задаём размеры нового рисунка.

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

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

4. Открываем этот рисунок в Microsoft Photo Editor и сохраняем рисунок под именем pict.gif (в формате GIF).

Редактирование страницы HTML - student2.ru

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

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

Редактирование страницы HTML - student2.ru

Задание 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

Редактирование страницы HTML - student2.ru

Задание 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. Редактирование страницы HTML - student2.ru

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

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

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

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

14. Редактирование страницы HTML - student2.ru

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

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

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

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

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

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

Редактирование страницы HTML - student2.ru

Задание 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

Редактирование страницы HTML - student2.ru

Задание 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

Редактирование страницы HTML - student2.ru

КОНТРОЛЬНЫЕ ВОПРОСЫ

2. Теги - это темы сообщения. Для каждого сообщения может быть несколько тем. Например, если мы собираетесь запоститьсообщение про антивирус Касперского, например, то вашими темами будут: антивирус, вирус, безопасность, защита. Четырех тем уже достаточно. Можно расширить конечно указав в тегах: черви, worm, трояны и прочее, до бесконечности.

3. HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге.

8. Фрейм (англ. frame — кадр, рамка) — в общем случае, отдельная область, отображаемая на мониторе, содержащая некоторую информацию.

Синонимы слова фрейм - встроенная рамка, динамическая область, управляемая область и т.д.

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

Распознать визуально фреймы на веб-странице сложно или невозможно, если не просмотреть её программный код. В общем случае фрейм - это прямоугольник.

Каждый фрейм имеет свой url-адрес. При нажатии на любую из ссылок, расположенных в одном фрейме, можно рассматривать страницы, показанные в другом фрейме.

Наши рекомендации