Практическая работа №2.
Способы форматирования HTML - документов.
Каждое действие желательно просматривать в браузере, чтобы лучше понять работу тегов и атрибутов HTML
Создание заголовков разных уровней.
Тег <H?> задает полужирным шрифтом заголовки различных размеров, размещая их по центру. Вместо знака ? проставляется одно из значений размеров заголовка от 1 до 7.
ЗАДАНИЕ 1:
- Откройте ранее сохраненный файл index.html
- Удалите теги сохранения форматирования <PRE> и </PRE> из текста.
- Введите <H2> и </H2> непосредственно перед и после первого заголовка соответственно.
- Введите <H3> и </H3> непосредственно перед и после второго заголовка.
- Сохраните и проанализируйте полученный результат в браузере.
- Уберите тег </H3> из текста документа. Как это отразилось в окне браузера.
- Восстановите тег и сохраните документ.
Создание абзаца (параграфа). Переход на новую строчку.
Тег <P> - задает разбивку текста на абзацы (параграфы). Имеет парный тег </P>, который задается при необходимости (каждый тег <p> добавляет пустую строку между абзацами).
Тег <BR> - задает разбивку текста на отдельные строки.
ЗАДАНИЕ 2:
- Введите теги <P> и </P> в начале и в конце (желательно) каждого куплета стихотворения и автора.
- Внутри куплетов перед каждой строчкой (кроме первых) введите тег <BR>. Результат просмотрите в браузере.
- Вставьте дополнительные пробелы между словами в заголовках (в первом – по одному, во втором – по три) командой  (дополнительный пробел). Результат просмотрите в браузере.
Вертикальное и горизонтальное форматирование текста.
Атрибут ALIGN=? в теле тега <P> - задает вертикальное размещение текста ( по умолчанию текст форматируется по левому краю).
Вместо знака вопроса проставляется одно из значений размещения: LEFT (по левому краю), CENTER (по центру), RIGHT (по правому краю), JUSTIFY (по ширине).
Пример:
<p align=right>Здравствуй, Дед мороз! </p>
Теги <CENTER>, </CENTER> - задают горизонтальное выравнивание текста по центру (то же, что и команда <p align=center>)
ЗАДАНИЕ 3:
- Задайте горизонтальное выравнивание всего текста страницы.
- Оставьте первые два куплета форматированными по левому краю страницы.
- Разместите автора по правому краю страницы.
- Сохраните и просмотрите результат в браузере.
LEFTMARGIN = ?
RIGHTMARGIN = ?
TOPMARGIN = ?
BOTTOMMARGIN =?
Атрибуты, использующиеся в теле тега <BODY>, задают размеры левого, правого, верхнего и нижнего поля страницы соответственно.
Вместо знака вопроса проставляется размер полей страницы в пикселах.
Пример:
<BODY TOPMARGIN =100 BOTTOMMARGIN =100> - установлены одновременно верхнее и нижнее поля страницы размером в 100 пикселов
ЗАДАНИЕ 4:
- Изменяя размеры полей страницы, установите такие значения, чтобы она выглядела сбалансированной (перед просмотром эффектов разверните окно браузера на весь экран)
- Сохраните и просмотрите результат в браузере.
Смысловое выделение текста.
<B>, </B> - выделяет фрагмент, взятый в исходные парные теги полужирным шрифтом
<I>, </I> - выделяет фрагмент курсивным шрифтом
<U>, </U> - подчеркнутый шрифт
<STRIKE>, </STRIKE> - зачеркнутый шрифт
Например,
<P> <CENTER><B><U> Это полужирный зачеркнутый шрифт, имеющий горизонтальное выравнивание. </U></B></CENTER></P>
ЗАДАНИЕ 5:
- Выделите текст в вашей страничке по примеру ниже.
Примечание:
Для выделения шрифта могут использоваться и другие теги:
<STRONG> - полужирный или курсивный, для выделения особенно важных частей текста
<EM> - курсив
<DEL>- текст, для последующего удаления (зачеркнутый)
<INS> - придание смыслового оттенка тексту (курсив, полужирный)
Например,
<H6> Сетевые адаптеры </H6><DEL>$50</DEL><INS>$45</INS>
Надстрочное и подстрочное начертание шрифта.
<SUP>, </SUP> - теги надстрочных символов
<SUB>, </SUB> - теги подстрочных символов
Например,
<P> Это пример <SUP> над </SUP> строчных и <SUB> под </SUB>строчных индексов</P> - 9
X <SUP> n </SUP> + Y<SUP> n </SUP>= Z<SUP> n </SUP>
Это пример надстрочных и подстрочных символов Xn +Yn =Zn
ЗАДАНИЕ 6:
- Добавьте в тексте документа после автора текущую дату.
- Задайте ее верхним индексом.
- Результат просмотрите в браузере.
<FONT FACE="?">, </FONT> - задается перед блоком текста, шрифт которого требуется изменить.
Вместо знака ? поставьте одно или несколько названий или типов шрифта.
Примеры:
<P><FONT FACE = “Times New Roman”>Это пример одного из шрифтов</P>
<P><FONT FACE = “Times New Roman, Palatino Linotype, Arial”>Если первый из выбранных шрифтов не поддерживается браузером, то берется следующий по списку шрифт и т.д.</P>
<P><FONT FACE = “monospace, serif, sans-serif”>Это примеры типов шрифта</P>
<BASEFONT SIZE=?> - тег задает размер текста всей страницы, вместо знака ? проставляется одно из значений размера от 1 до 7
<FONT SIZE=?>, </FONT> - теги размера шрифта отдельного фрагмента
Пример 1:
<BODY>
<H3> Фрукты и овощи, Inc.</H3>
<BASEFONT SIZE =4>
<P>для всего текста задается размер шрифта, равный 4 </P>
</BODY>
Пример 2:
<BODY>
<P><FONT SIZE = 1>Это шрифт размера 1</FONT></P>
<P><FONT SIZE =+2>Увеличение на 2 единицы исходного размера текста</FONT></P>
<P><FONT SIZE = -7>Уменьшение на 7 единиц исходного размера текста</FONT></P>
</BODY>
теги <SMALL>, </SMALL> и <BIG>, </BIG> соответственно уменьшение или увеличение исходного размера шрифта
Например:
<P>приходите к нам в субботу на <BIG> большую ярмарку!</BIG><SMALL>Дождя не предвидется. </SMALL></P>
ЗАДАНИЕ 7:
- Задайте размер, равный 2 для текста всей страницы.
- Задайте тип шрифта для всего текста «Bookman Old Style»; тип «Arial» для первого заголовка и тип «Courier New» для второго заголовка
- Установите буквицу для всех первых букв стиха (кроме последних двух строчек) по примеру:
- <FONT SIZE = 4>Ж</FONT>или – были дед и баба, и была у них курочка Ряба.
- Увеличьте размер шрифта для последних двух строчек при помощи тега <big> и задайте тип шрифта “Lucida Console”
- Уменьшите размер шрифта для автора на 1 при помощи команды <font size=-1>
атрибут BGCOLOR=? в теле дескриптора <BODY> - задает цвет фона страницы, вместо знака вопроса проставляется код или название цвета.
Атрибут TEXT=? в теле тега <BODY> - цвет всего текста страницы, вместо знака ? поставьте значение или код цвета.
<FONT COLOR=?> - цвет отдельного фрагмента текста
Пример:
<BODY BGCOLOR = blue Text=black>, черные символы на голубом фоне
<P><FONT COLOR = #FF0000> Этот пример задания цвета фрагмента текста с помощью кода</FONT></P>
<P><FONT COLOR = purpule> Этот пример задания цвета фрагмента текста с помощью названия</FONT></P>
ЗАДАНИЕ 8:
- Подберите цвет фона вашей странички.
- Задайте, исходя из цветовой гаммы фона, цвет заголовков и основного текста.
Вставка примечаний.
Примечания не отображаются в браузере, позволяют вносить в текст HTML – документа закладки, а также отменять действия команд без их удаления из документа.
<!--текст комментария-->
ЗАДАНИЕ 9:
- Вставьте в конце вашей странички следующий комментарий: «Я еще вернусь к доработке этого документа»
- Уберите любую строчку вашего документа с помощью комментария.
- Результаты просмотрите в браузере.
- Восстановите скрытую с помощью комментария строку.
- Какие теги используются для создания HTML-документа?
- Какие теги используются для форматирования текста?
- Как сохранить HTML-документ?
Комментарии пользователей
Добавить комментарийИзвините, но у Вас не достаточно прав для добавления комментария.