СОЗДАНИЕ САЙТА ПРИ ПОМОЩИ
ЯЗЫКА РАЗМЕТКИ ГИПЕРТЕКСТА HTML
(практические работы)
Чегодаева Анастасия Владимировна
преподаватель
информатики и информационных технологий в профессиональной деятельности, БПОУ
ВО «Кадуйский энергетический колледж»
высшее образование
Практическая работа № 2.
«Форматирование HTML-документа»
Цель: познакомиться с тегами форматирования HTML-документа; научиться выравнивать
текст и заголовки, задавать начертание и цвет фрагментам текста, создавать
горизонтальную линию.
Оборудование: компьютер, браузер, инструкционная
карта практической работы.
ЗАДАНИЕ 1: Задайте основному тексту сайта
выравнивание по ширине, используя значение justify параметра ALIGN, и размер шрифта,
например, 4
(не больше размера шрифта заголовка).
Для этого:
1.
Откройте папку «Proekt» →
откройте первую страницу сайта при помощи программы Блокнот.
2.
В html-коде первой страницы
после тега <BODY> наберите следующее:
<P><font ALIGN=justify
COLOR="black" size=4>,
а закрывающийся тег следует поставить в конце основного текста. Это позволит
всему тексту задать один формат.
3.
Сохраните изменения Нtml-кода
первой страницы сайта.
4.
Посмотрите, как теперь
изменилась web-страница в браузере.
5.
Если необходимо
откорректировать информацию страницы,
то: снова открываете файл Str1.htm при помощи программы Блокнот, вносите в html-код
соответствующие изменения, сохраняете и смотрите вашу страницу после
редактирования, выбрав вверху окна браузера команду Обновить (значок 
).
ЗАДАНИЕ 2: В Нtml-коде первой страницы задайте параметры
форматирования для заголовка (цвет, шрифт, размер) или необходимому
фрагменту текста при помощи тега <FONT>
и его атрибутов (см. дополнительную информацию к ПР № 2), а также задайте начертание
текста при помощи тегов, задающих начертание текста (см. дополнительную
информацию к ПР № 2).
Для этого:
1.
Аналогично примерам 1 и 2
задайте цвет и начертание фрагментам текста и заголовку страницы.
Пример 1: задание параметров форматирования и начертания для
заголовка страницы:
<h2 ALIGN=Center><font COLOR="FF3333"><B>Компьютерные сети</B></h2></font>
(в данном примере цвет заголовка красный, начертание
- полужирное)
Пример 2: форматирование фрагмента текста - выделение в тексте определения «Сетевые
технологии»: <font color="FF0066"><B>сетевые
технологии</B></font>
(в данном примере цвет текста розовый, начертание
текста - полужирное)
2.
Сохраните изменения Нtml-кода
первой страницы сайта.
3.
Посмотрите, как теперь
изменилась web-страница в браузере.
4.
Если необходимо
откорректировать информацию страницы,
то: снова открываете файл Str1.htm при помощи программы Блокнот, вносите в html-код
соответствующие изменения, сохраняете и смотрите вашу страницу после
редактирования, выбрав вверху окна браузера команду Обновить (значок ).
ЗАДАНИЕ 3: Создайте горизонтальную линию при помощи тега
<HR>, которая занимает всю ширину окна браузера. Кроме того, задайте
линии цвет и толщину, при помощи параметров тега <HR> (см. дополнительную
информацию к ПР № 2).
Для этого:
1.
В Нtml-коде первой страницы
перед тегом <BODY> после тегов форматирования заголовка наберите
следующее:
<hr WIDTH=100% NOSHADE SIZE=2
COLOR="FF3333">
(цвет горизонтальной линии – красный, размер – 2, длина -
во всю ширину окна браузера)
2.
Сохраните изменения Нtml-кода
первой страницы сайта, посмотрите изменения в браузере и, при необходимости,
откорректируйте содержимое страницы.
3.
Аналогично отформатируйте
другие страницы сайта.
4.
Покажите выполненную работу
преподавателю.
Дополнительная информация к практической работке № 2:
1.
Тег <FONT> и его
атрибуты.
Тег <FONT> и его атрибуты позволяют задать
параметры форматирования шрифта любого фрагмента текста.
Для тега <FONT> могут задаваться следующие атрибуты:
·
FASE позволяет задавать гарнитуру шрифта (например,
FASE=”Arial”);
·
SIZE задаёт размер шрифта в неких
"абсолютных" единицах от 1 до 7 (например, SIZE=4);
·
COLOR устанавливает цвет шрифта, который может
задаваться с помощью стандартных имён или в формате #RRGGBB (например,
COLOR=”green” или COLOR=”#00000FF”).
2.
Теги, задающие начертание
текста.
|
Название контейнера
|
Действие
|
|
<B></B>
|
Отображает текст полужирным шрифтом
|
|
<I></I>
|
Отображает текст курсивом
|
|
<TT></TT>
|
Отображает текст моноширинным шрифтом
|
|
<U></U>
|
Отображает текст подчёркнутым
|
3.
Горизонтальные линии.
Другим методом разделения документа на части является проведение
горизонтальных линий. Они визуально подчеркивают законченность той или иной
области страницы.
Тег <HR> позволяет провести горизонтальную
линию в окне большинства
браузеров.
Этот тег не является контейнером, поэтому не требует
закрывающего тега.
До и после линии автоматически вставляется пустая строка.
Параметры тега <HR>:
Align
- выравнивает линию по краю или центру и имеет значения: left, right, center;
Width
- устанавливает длину линии в пикселах или процентах от ширины окна
браузера;
Size
- устанавливает толщину линии в пикселах;
Noshade - отменяет рельефность линии;
Color
- указывает цвет линии, при этом используется формат RGB или стандартное имя.
Например: <HR WIDTH=100% NOSHADE SIZE=3
COLOR="FF3333">.
(цвет горизонтальной линии – красный, размер – 3, длина -
во всю ширину окна браузера)
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.