Простейшее форматирование
Специальные символы. Тире и кавычки.
Неразрывный пробел. Цветовое оформление
Цель: Научится простейшему форматированию HTML-документа.
Содержание:
Учебная задача 1
Учебная задача 2
Учебная задача 3
Учебная задача 4
Практика
Учебная задача 1: Изучить понятие вставки специального символа в документ
Поскольку символы < и > воспринимаются браузером как начало и конец тега, возникает вопрос: а как показать эти символы на экране, если они нужны в тексте? Еще вопрос: можно ли вывести несколько подряд идущих пробелов (ведь браузер игнорирует лишние пропуски)?
&имя; | &код; |
Для этих символов, а также для некоторых других предусмотрено специальное кодирование последовательностями знаков, которые заменяют желаемые символы. Код состоит из символа & (амперсанд), имени или числового значения и завершающего символа ; (точка с запятой):
Не для всех символов в стандарте HTML предусмотрены мнемонические имена. Но любой символ можно закодировать по его числовому коду. Вот несколько примеров:
меньше | < | < | < |
больше | > | > | > |
амперсант | & | & | & |
неразрывный пробел | |   | |
копирайт | © | © | © |
тире | – | — | |
левая кавычка | « | « | « |
правая кавычка | » | » | » |
левая кавычка | “ | “ | |
правая кавычка | ” | ” | |
номер | № | ¹ | |
слеш | / | / | |
# | # | ||
коммерческое а | @ | @ |
Замечание. Все буквы, составляющие имя специального знака, должны быть строчными (то есть маленькими). Использование, например, таких обозначений, как © и & не допускается.
Пример 1:
<HTML> HEAD> META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <TITLE> Специальные знаки </TITLE> </HEAD> <BODY> <H1 align=center> Специальные знаки </H1> <HR> <P> Для задания абзаца используется команда <<STRONG>P</STRONG>>. </BODY> </HTML> |
К содержанию
Учебная задача 2: Изучить вставку тире и кавычки в документ
При создании любого текста необходимо правильно записывать тире и кавычки. Нередко можно видеть, как вместо тире на страницах записывают дефис, а вместо кавычек – знак дюйма.
Дефис ( - ) используется как знак переноса и для соединения частей сложного слова. Тире же (–), наоборот, вставляет в текст как бы небольшую паузу. Это разные знаки. Тире должно быть длиннее дефиса. Дефис имеет код &#;, а тире – код — Пример:
Текст программы:
Пример 2
<BODY bgcolor=white text=black> <H1 align=center>Тире и кавычки</H1> <HR> <P> Кнопочка сказала: <P> — А ты, Незнайка, лучше не ешь мороженого. Это тебя отвлекает, и мы можем попасть в аварию. <P> — А ты тоже не ешь, — ответил Незнайка, — потому что меня это тоже отвлекает. <P align=right> <CITE>“Незнайка в Солнечном городе”</CITE><BR> Николай Носов </BODY> |
К содержанию
Учебная задача 3. Изучить понятие неразрывного пробела в тексте
Пробел предотвращает разрыв строки при автоматическом форматировании текста. Примеры:
вид | код |
И. Сидоров | И. Сидоров |
№ 13 | № 13 |
и т. д. | и т. д. |
Пример 3 оформления текста:
Посмотрим, какие теги использованы для вывода этого текста на экран:
<BODY bgcolor=silver text=black> <H1 align=center> Пример оформления текста </H1> <HR> <H2>Сборник газетных вырезок</H2> <P> Коллекцию открывает заметка из газеты <CITE>“Станок”</CITE>. <BLOCKQUOTE> <P> Действительно, в отделе <CITE>“Что случилось за день”</CITE> нонпарелью было напечатано: <FONT color=maroon> <BLOCKQUOTE> <H3 align=center>Попал под лошадь</H3> <SMALL> <P> Вчера на площади Свердлова попал под лошадь извозчика № 8974 гр. О. Бендер. Пострадавший отделался легким испугом. </SMALL> </BLOCKQUOTE> </FONT> <P> — Это извозчик отделался легким испугом, а не я, — ворчливо заметил О. Бендер. <P align=right> <CITE>“Двенадцать стульев”</CITE><BR> Илья Ильф, Евгений Петров </BLOCKQUOTE> </BODY> | Выделено название Начало большой цитаты Выделено название отдела, изменен цвет шрифта Начало подцитаты Уменьшен размер шрифта Восстановлен размер шрифта Конец подцитаты Восстановлен цвет шрифта Конец цитаты |
К содержанию
Учебная задача 4 Изучить цветовое оформление документа.
Язык HTML позволяет устанавливать цвет в тегах <BODY>, <FONT>, <HR>, <MARQUEE> и <TABLE>. Цвета для фона и текста для всей страницы можно задать при помощи атрибутов bgcolor и text тега <BODY>. Цвет шрифта можно менять многократно при помощи атрибута color тега <FONT>.
Цветовые значения можно указать английским названием или шестнадцатеричным кодом в цветовой модели RGB (Red, Green, Blue). Например, <BODY bgcolor=white> задает белый фон для документа в целом, а <FONT color=#808080> определяет серый цвет выделенной части текста.
Пример 4: Оттенки красного цвета
Следующую HTML-программу можно использовать для подбора оттенков цвета.
<HTML> <HEAD><TITLE>Оттенки красного цвета</TITLE></HEAD> <BODY bgcolor=”white”> <CENTER> <FONT size=6 color=”red”> Оттенки красного цвета </FONT> </CENTER> <HR color=”blue”> <TABLE border=3 > <TR> <TD align=”center” bgcolor=”yellow”> <B>Код</B> <TD align=”center” bgcolor=”yellow” width=150> <B>Цвет</B> <TD align=”center” bgcolor=”yellow”> <B>Код</B> <TD align=”center” bgcolor=”yellow” width=150> <B>Цвет</B> <TR> <TD>#010000 <TD bgcolor=#010000 width=150> <TD>#800000 <TD bgcolor=#800000 width=150> <TR> <TD>#100000 <TD bgcolor=#100000 width=150> <TD>#900000 <TD bgcolor=#900000 width=150> <TR> <TD>#200000 <TD bgcolor=#200000 width=150> <TD>#A00000 <TD bgcolor=#A00000 width=150> <TR> <TD>#300000 <TD bgcolor=#300000 width=150> <TD>#B00000 <TD bgcolor=#B00000 width=150> <TR> <TD>#400000 <TD bgcolor=#400000 width=150> <TD>#C00000 <TD bgcolor=#C00000 width=150> <TR> <TD>#500000 <TD bgcolor=#500000 width=150> <TD>#D00000 <TD bgcolor=#D00000 width=150> <TR> <TD>#600000 <TD bgcolor=#600000 width=150> <TD>#E00000 <TD bgcolor=#E00000 width=150> <TR> <TD>#700000 <TD bgcolor=#700000 width=150> <TD>#FF0000 <TD bgcolor=#FF0000 width=150> </TABLE> </BODY> </HTML> |
К содержанию
Практика
1. Выполни пример 1.
2. Выполни пример 2
3. Выполни пример 3
4. Выполни пример 4
