Простейшее форматирование
Выравнивание. Усиление текста.
Авторское форматирование. Текстовые ссылки и цитаты.
Цель: Научится простейшему форматированию HTML-документа.
Содержание:
Учебная задача 1
Учебная задача 2
Учебная задача 3
Учебная задача 4
Практика
Учебная задача 1: Изучить понятие выравнивания текста.
Тег абзаца <P>, записанный без атрибутов, выравнивает текст по левому краю страницы. Можно запрограммировать вывод текста по правому краю или по центру:
<P> | – выравнивает абзац по левому краю |
<P align=left> | – выравнивает абзац по левому краю |
<P align=right> | – выравнивает абзац по правому краю |
<P align=center> | – выравнивает абзац по центру |
Примеры 1:
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <TITLE> Абзац выровнен слева </TITLE> </HEAD> <BODY> <H1 align=center> Абзац выровнен слева </H1> <HR> <P> Словарь Вильяма Шекспира, по подсчету исследователей, составляетслов. Словарь негра из людоедского племени "Мумбо-Юмбо" составляет 300 слов. Эллочка Щукина легко и свободно обходилась тридцатью. </BODY> </HTML> |
К содержанию
Учебная задача 2: Изучить понятие усиление текста.
Часто, кроме заголовков, которые располагаются на отдельных строках, требуется выделить где-то в тексте отдельные слова, чтобы подчеркнуть их значение, сконцентрировать на них внимание пользователя. Для такого выделения предназначен блок <STRONG>...</STRONG>. Текст обычно выводится полужирным начертанием.
Для выделения слов и усиления используется также блок <EM>...</EM>. Текст, заключенный в этом блоке, отображается курсивом.
Блок <DFN>...</DFN> применяется для определения в тексте тех или иных терминов. Слово-термин обычно выделяется курсивом.
Блок <SAMP>...</SAMP> служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины.
Блок <KBD>...</KBD> используется для текста, который пользователь вводит с клавиатуры. Блок <CODE>...</CODE> – для фрагментов кода программ. Показывается на экране шрифтом фиксированной ширины.
Пример 2:
<HTML> <HEAD> <TITLE>Логическое форматирование</TITLE> </HEAD> <BODY> <P><CITE>Учиться, учиться и еще раз учиться!</CITE><HR> <P><CODE>class HelloJava</CODE><HR> <P><DFN>Тег – от английского tag</DFN><HR> <P><EM>class HelloJava</EM><HR> <P>Ввести команду <KBD>JAVAC</KBD><HR> <P><STRONG>Прочтите внимательно!</STRONG><HR> <P><VAR>x</VAR> является переменной<HR> </BODY> </HTML> |
К содержанию
Учебная задача 3: Изучить Тег <PRE>.
При показе документа на экране браузеры игнорируют в тексте идущие подряд пробелы и символы конца строки. Из этого правила, однако, есть исключение. Блок <PRE>...</PRE> заставляет браузер выводить текст на экран так, как он записан в программе – со всеми пробелами и концами строк. Это удобно при показе сложных страниц.
Пример 3:
Фрагмент текста соответствующей программы:
<BODY> <H1 align=center>Иллюстрация 1</H1> <HR> <H2>Стихи о разнице вкусов</H2> <P><STRONG>Владимир Маяковский</STRONG> <PRE> Лошадь сказала, взглянув на верблюда: "Какая гигантская лошадь-ублюдок". Верблюд же вскричал: "Да лошадь разве ты?! Ты просто-напросто - верблюд недоразвитый". И знал лишь Бог седобородый, что это - животные разной породы. 1928 </PRE> </BODY> |
К содержанию
Учебная задача 4: Изучить текстовые ссылки и цитаты
Название книги, статьи можно выделить при помощи блока <CITE>...</CITE> (цитата). Большинство браузеров изображает такую ссылку курсивом (наклонным шрифтом). Эту же команду можно использовать для оформления небольших внутристрочных цитат.
Большие цитаты лучше выделять из основного текста при помощи команды <BLOCKQUOTE>...</BLOCKQUOTE>. Браузер отображает такую цитату с большим, чем у обычного текста, левым и правым отступом от края страницы.
Пример 4:
Текст соответствующей программы:
<BODY> <H1 align=center>Иллюстрация 2</H1> <HR> <P>На первой странице была памятная запись: <PRE> Верблюд 180 р. Баран 30 р. Кумыс 1 р. 75 к. итого - 211 р. 75 к. </PRE> <P align = right> <CITE>"Двенадцать стульев"</CITE><BR> Илья Ильф, Евгений Петров </BODY> |
К содержанию
Практика
1. Выполни пример 1.
2. Выполни пример 2
3. Выполни пример 3
4. Выполни пример 4
