Создание и применение стилей

<DIV>

Таблицы

<TR>

<TH>

<TD>

Списки

<UL><LI></ul>Маркированный список. Пример:

Текст HTML кода	Вид
<UL> <LI> Пункт первый <LI> Пункт второй <LI> Пункт третий </ul>	Пункт первый Пункт второй Пункт третий

Элемент UL обозначает начало маркированного списка. Элемент LI отделяет один пункт от другого.

Задание произвольного вида маркеров.

Работа с графикой, звуком и видеоклипами

<IMG>

<EMBED>

Гиперссылки

<A></a>

Фреймы

Изображения-карты

Формы

Лабораторная работа №1

Тема. Оформление страницы

Цель. Создание простейшего документа HTML. Особенности оформления текстовой информации.

Задания

Запустите текстовый редактор Блокнот (Пуск4Программы4Стандартные4Блокнот).
Введите следующий документ:

<HTML>

<HEAD>

<TITLE>Оформление страницы </TITLE>

</HEAD>

<BODY>

Тема. Оформление страницы.

Первый лист

</BODY>

</HTML>

Сохранить документ в рабочем каталоге под именем index.htm. Не забудьте дать файлу расширение (.htm). Не закрывая редактор Блокнота выполните остальные пункты лабораторной работы.

3. Запустите программу Internet Explorer. Дайте команду (Файл4Открыть). Щелкните на кнопке Обзор и откройте файл index.htm. На экране отобразиться содержимое вашей первой страницы.

4. Вернитесь к тексту в Блокноте. Добавьте после тега <BODY> заголовок первого уровня, заключив его между тегами <H1></H1>.

5. Сохраните изменения в блокноте и для обновления страницы в Internet Explorer (Вид4 Обновить).

6. Введите заголовок второго и третьего и четвертого уровня. Примените атрибут центрирования к первому заголовку, выравнивание вправо и влево к третьему четвертому заголовку соответственно.

7. Введите текст стихотворения, начав его с тега <P>.

8. Используя, теги изменения начертания текста (курсив, полужирный, подчеркнутый, зачеркнутый) преобразуйте информацию на вашей странице.

9. Отобразите на вашей странице слово цветными буквами (каждая буква своим цветом).

10. Отобразите на вашей странице слово с различной высотой букв (каждая последующая бука больше предыдущей).

11. Замените тег <P> на <PRE>, затем на тег <NOBR>.

12. Измените цвет фона страницы с белого на любой другой тон.

13. Измените цвет фона на фоновый рисунок.

14. Используя тег <BR> нарисуйте в нижней части вашей страницы линия светло голубого цвета, толщиной в 20 пунктов, длинной в половину окна браузера, расположенную но центру экрана (горизонтальное выравнивание).

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

1. Где отображается содержимое тега <TITLE>?

2. Как и где отображается содержимое тега<BODY>?

3. Что происходит с содержимым окна при уменьшении ширины?

4. Сколько строк на экране занял текст помещенный в тег <BODY>? Почему?

5. Что отобразиться на экране при выполнении команды Internet Explorer (Вид4В виде HTML)?

6. Как измениться отображаемый фрагмент текста при использовании тега <P> или тега <NOBR>?

7. Что понимается под термином «Атрибут»?

8. В каком теге и какой атрибут можно изменить цвет текста во всем документе, в абзаце?

Лабораторная работа №2

Тема. Стилевое оформление текста

Цель.Создание и применение стилей для оформления текста.

Задания

1. Запустите текстовый редактор Блокнот. Создайте HTML файл, содержащий в заголовке окна наименование темы лабораторной работы. Задайте файлу имя 2.htm.

2. Создайте стиль для тега <BODY>. Задайте цвет фона – темно синий.

3. Введите абзац текста. Измените цвет и размер букв в веденном абзаце, используя тег <FONT>.

4. Создайте стиль для тега <P> с именем Paragraph1. Задав цвет и размер букв, стиль шрифта.

5. Введите еще один абзац текста. Примените к нему созданный вами стиль Paragraph.

6. Установите синий цвет для трех типов заголовков, используя возможность присвоения свойства нескольким тегам.

7. Наберите строку текста, задав размер шрифта 250 пикселей, цвет букв - белый.

8. Наберите строку текста, задав размер шрифта 65 пикселей, цвет букв – красный. Отобразите текст этой строки таким образом, чтобы он накладывался на текст первой строки, а не располагался ниже.

9. Создайте стиль:

.second {color: #FF00FF}

10. Примените созданный в пункте 9 стиль к двум заголовкам:

<H3 class= second> Стильный заголовок </H3>

<H3> Простой заголовок </H3>

Проанализируете, какой вид имеет текст заголовков.

11. Создайте CSS – файл для хранения таблицы стилей. Перенесите все стили в этот файл. Подключите этот файл к вашей странице используя тег <LINK>. Примените созданные вами стили на странице.

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

1. Какими способами можно изменить размер шрифта? Перечислите эти способы.

2. Назначение раздела <STYLE>?

3. Назначение тега <FONT>?

4. Перечислите атрибуты и их назначение для тега <FONT>.

5. Как задать одинаковые свойства сразу нескольким тегам?

6. Назначение символов “{“, ”}”?

7. Для какого тега и какие параметры заданы в примере: H3 {color : #000000; font-size: 14 px; font-family : Arial}.

8. Назначение тега <DIV>.

Лабораторная работа №3

Тема. Таблицы

Цель.Научиться представлять информацию в таблице.

Задания

1. Запустите текстовый редактор Блокнот. Создайте HTML файл, содержащий в заголовке окна наименование темы лабораторной работы. Задайте файлу имя 3.htm

2. Создайте простую таблицу. Содержащею три столбца и три строки.

3. Используя атрибут background, в теге <TABLE>, задайте в качестве фона таблицы рисунок.

4. Измените цвет первой строки на серый.

5. Объедините две ячейки в нижней строке.

6. Объедините две ячейки в первом столбце.

7. Измените толщину и цвет рамки в таблице.

8. Измените размер и цвет шрифта в одной из ячеек. Для изменения шрифта можете использовать любой способ, применяемый Вами в работе №2.

9. Создайте еще одну таблицу. Содержащею два столбца и три строки.

10. Уберите бордюр внешней рамки.

11. Задайте заголовок таблицы, используя тег <CAPTION>.

12. Задайте цвет заголовка таблицы.

13. Задайте цвет внутренней рамки.

14. Используя, тег <COLGROUP> измените внешний вид всех ячеек правого столбца.

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

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

2. Что задает атрибут cellpadding?

3. В каком теге применяется и что задает атрибут frame?

4. Для каких целей используются теги <TR>, <TH>, <TD>?

5. Как осуществить объединение строк? Объединение - столбцов?

6. Где выводиться содержимое тега <CAPTION>? Где размещается тег <CAPTION>?

7. Как задать цвет отдельной ячейки в таблице?

8. Как можно использовать стили применительно к таблице?

Лабораторная работа №4

Тема. Списки

Цель.Приобрести навыки работы со списками.

Задания

1. Запустите текстовый редактор Блокнот. Создайте HTML файл, содержащий в заголовке окна наименование темы лабораторной работы. Задайте файлу имя 4.htm

2. Создайте не нумерованный список из трех пунктов.

3. Создайте нумерованный список из трех пунктов. Нумерация, арабскими числами начиная с единицы.

4. Создайте нумерованный список из трех пунктов. Нумерация, римскими числами начиная с Ш.

5. Создайте нумерованный список из трех пунктов. Нумерация, буквенная начиная с буквы «С».

6. Создайте не нумерованный список их трех пунктов. Каждый, не нумерованный пункт, содержит нумерованный буквами (начиная с буквы «А») список из двух пунктов.

7. Создайте не нумерованный список с маркерами в виде кружков.

8. Измените цвет маркеров.

9. Измените вид маркеров на квадраты.

10. Создайте не нумерованный список с маркерами в виде рисунка.

11. Создайте список без маркеров, используя атрибут List-style-type = none.

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

1. Как увеличить размер (шрифт) маркеров?

2. Как задать начальное значение для нумерации списка?

3. Как задать цвет текста для списка?

4. Какова структура не нумерованного списка?

5. Как изменить внешний вид маркера?

6. Какова структура вложенного списка?