2. Способы форматирования HTML-документов

2. Способы форматирования HTML-документов


Задачи и их решения по информатике и математике
1. Создание простой страницы и отображение в браузере -->> Тема 1. Введение в программирование

Практическая работа №2. Способы форматирования HTML - документов.

Каждое действие желательно просматривать в браузере, чтобы лучше понять работу тегов и атрибутов HTML
Создание заголовков разных уровней.
Тег <H?> задает полужирным шрифтом заголовки различных размеров, размещая их по центру. Вместо знака ? проставляется одно из значений размеров заголовка от 1 до 7.
 
ЗАДАНИЕ 1:
  1. Откройте ранее сохраненный файл index.html
  2. Удалите теги сохранения форматирования <PRE> и </PRE> из текста.
  3. Введите <H2> и </H2> непосредственно перед и после первого заголовка соответственно.
  4. Введите <H3> и </H3> непосредственно перед и после второго заголовка.
  5. Сохраните и проанализируйте полученный результат в браузере.
  6. Уберите тег </H3> из текста документа. Как это отразилось в окне браузера.
  7. Восстановите тег и сохраните документ.

 
Создание абзаца (параграфа). Переход на новую строчку.
Тег <P> - задает разбивку текста на абзацы (параграфы). Имеет парный тег </P>, который задается при необходимости (каждый тег <p> добавляет пустую строку между абзацами).
Тег  <BR> - задает разбивку текста на отдельные строки.


ЗАДАНИЕ 2:
  1. Введите  теги <P> и </P> в начале и в конце (желательно) каждого куплета стихотворения и автора.
  2. Внутри куплетов перед каждой строчкой (кроме первых) введите тег <BR>. Результат просмотрите в браузере.
  3. Вставьте дополнительные пробелы между словами в заголовках (в первом – по одному, во втором – по три) командой &nbsp(дополнительный пробел). Результат просмотрите в браузере.
 
Вертикальное и горизонтальное форматирование текста.
Атрибут ALIGN=? в теле тега <P> - задает вертикальное размещение текста ( по умолчанию текст форматируется по левому краю).
Вместо знака вопроса проставляется одно из значений размещения: LEFT (по левому краю), CENTER (по центру), RIGHT (по правому краю), JUSTIFY (по ширине).
 
Пример:
<p align=right>Здравствуй, Дед мороз! </p>

Теги <CENTER>, </CENTER>  - задают горизонтальное выравнивание текста по центру (то же, что и команда <p align=center>)

ЗАДАНИЕ 3:
  1. Задайте горизонтальное выравнивание всего текста страницы.
  2. Оставьте первые два куплета форматированными по левому краю страницы.
  3. Разместите автора по правому краю страницы.
  4. Сохраните и просмотрите результат в браузере.
Размеры полей страницы.

LEFTMARGIN = ?
RIGHTMARGIN = ?
TOPMARGIN = ?

BOTTOMMARGIN =?
Атрибуты,   использующиеся в теле тега <BODY>, задают размеры левого, правого, верхнего и нижнего поля страницы соответственно.
Вместо знака вопроса проставляется размер полей страницы в пикселах.

Пример:
<BODY TOPMARGIN =100 BOTTOMMARGIN =100> - установлены одновременно верхнее и нижнее поля страницы размером в 100 пикселов

ЗАДАНИЕ 4:
  1. Изменяя размеры полей страницы, установите такие значения, чтобы она выглядела сбалансированной (перед просмотром эффектов разверните окно браузера на весь экран)
  2. Сохраните и просмотрите результат в браузере.
 
Смысловое выделение текста.
<B>, </B> - выделяет фрагмент, взятый в исходные парные теги полужирным шрифтом
<I>, </I> - выделяет фрагмент курсивным шрифтом
<U>, </U> - подчеркнутый шрифт
<STRIKE>, </STRIKE> - зачеркнутый шрифт

Например,
<P> <CENTER><B><U> Это полужирный зачеркнутый шрифт, имеющий горизонтальное выравнивание. </U></B></CENTER></P>

ЗАДАНИЕ 5:
  1. Выделите текст в вашей страничке по примеру ниже. 



Примечание:
Для выделения шрифта могут использоваться и другие теги:
 
<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:
  1. Добавьте в тексте документа после автора текущую дату.
  2. Задайте ее верхним индексом.
  3. Результат просмотрите в браузере.
Выбор типа шрифт и его размеров.
<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:
  1. Задайте размер, равный 2 для текста всей страницы.
  2. Задайте тип шрифта для всего текста «Bookman Old Style»; тип «Arial» для первого заголовка и тип «Courier New» для второго заголовка
  3. Установите буквицу для всех первых букв стиха (кроме последних двух строчек) по примеру:
  4. <FONT SIZE = 4>Ж</FONT>или – были дед и баба, и была у них курочка Ряба.
  5. Увеличьте размер шрифта для последних двух строчек при помощи тега <big> и задайте тип шрифта “Lucida Console”
  6. Уменьшите размер шрифта для автора на 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:
  1. Подберите цвет фона вашей странички.
  2. Задайте, исходя из цветовой гаммы фона, цвет заголовков и основного текста.
 
Вставка примечаний.
Примечания не отображаются в браузере, позволяют вносить в текст HTML – документа закладки, а также отменять действия команд без их удаления из документа.
<!--текст комментария-->

ЗАДАНИЕ 9:
  1. Вставьте в конце вашей странички следующий комментарий: «Я еще вернусь к доработке этого документа»
  2. Уберите любую строчку вашего документа с помощью комментария.
  3. Результаты просмотрите в браузере.
  4. Восстановите скрытую с помощью комментария строку.
Контрольные вопросы:
  1. Какие теги используются для создания HTML-документа?
  2. Какие теги используются для форматирования текста?
  3. Как сохранить HTML-документ?