ПОЗНАВАТЕЛЬНОЕ

Оси и плоскости тела человека - Тело человека состоит из определенных топографических частей и участков, в которых расположены органы, мышцы, сосуды, нервы и т.д.

Отёска стен и прирубка косяков - Когда на доме не достаёт окон и дверей, красивое высокое крыльцо ещё только в воображении, приходится подниматься с улицы в дом по трапу.

Дифференциальные уравнения второго порядка (модель рынка с прогнозируемыми ценами) - В простых моделях рынка спрос и предложение обычно полагают зависящими только от текущей цены на товар.

Escape последовательности (символьные объекты)

Методические указания

Форматирование текста.

Текст – единственный объект Web-страницы, который не требует специального определения. Иными словами, произвольные символы интерпретируются по умолчанию как текстовые данные.

Для форматирования текста существует большое количество элементов. Форматировать текст можно с помощью традиционных элементов: выделять фрагменты курсивом, полужирным шрифтом, выбирать шрифт, размер и цвет шрифта, выравнивать текстовые фрагменты. Если автору не хватает простых вариантов форматирования текста, он может прибегнуть к таблицам стилей, которые существенно расширят возможности языка HTML по форматированию.

Рассмотрим стандартные элементы языка HTML, позволяющие форматировать текст.

Форматирование абзаца

 … 

Элемент абзаца разделяет фрагменты текста вертикальным отступом. Он позволяет использовать только начальный тэг, так как следующий элемент </р> обозначает не только начало следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца, можно использовать и конечный тэг.

Вместе с элементом абзаца можно использовать и атрибут выравнивания align!

· aligns ="left" – выравнивание по левому краю;

· align="right" – выравнивание по правому краю;

· align="center" – выравнивание по центру;

· align="justify" – выравнивание по ширине.

Выравнивание по ширине – опасный параграф. Он не работает в старых версиях браузеров (т.е. текст выровняется в таком случае по левому краю документа).

Пример

<HTML>

<HEAD>

<TITLE> Использование различных типов выравнивания </title>

</head>

<BODY>

Элемент абзаца разделяет фрагменты текста вертикальным отступом. Вместе с элементом абзаца можно использовать и атрибут выравнивания align:

aligns ="left"–выравнивание по левому краю;</р>

align="center" – выравнивание по центру;</р>

align="right"–выравнивание по правому краю;</р>

align="justify" – выравнивание по ширине.</р>

</body>

</html>

 

Элемент, обеспечивающий принудительный переход на новую строку. Он имеет только начальный тэг. В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки.

Пример

<HTML>

<HEAD>

<TITLE> Принудительный перенос строки </title>

</head>

<BODY>

Уронили мишку на пол,

Оторвали мишке лапу,

Все равно его не брошу

Потому, что он хороший.

</body>

</html>

Если таким образом расставить элемент в этом стихотворении, то в экране браузера мы увидим стандартным образом написанное четверостишие на четырех строках.

 

Этот элемент по своему действию является прямой противоположностью предыдущему. Текст, заключенный между его тегами, будет выведен в одну строку. Длинная строка не уместится на экране, и для ее просмотра придется использовать горизонтальную полосу прокрутки.

<PRE> </pre>

Элемент для обозначения текста, отформатированного заранее (preformatted). Подразумевается, что текст будет выведен в том виде, в каком он был подготовлен пользователем. Текст, заключенный между метками <PRE> и </pre> (от английского preformatted — предварительно форматированный), выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Во всех других случаях браузер игнорирует эти символы. Возможен и обратный эффект: если пользователь введет текст как одну длинную строку, то она не будет разорвана браузером, а уйдет за границы окна программы. В этом смысле элемент PRE работает так же, как элемент NOBR. По умолчанию для отформатированного заранее текста выбирается моноширинный шрифт. Этот элемент удобно использовать для демонстрации листингов программ или для вывода текстовых документов, переформатирование которых может привести к искажению их смысла.

<BLOCKQUOTE> ... </blockquote>

Текст, заключенный между метками <BLOCKQUOTE> и </blockquote>, выводится браузером на экран с увеличенным левым полем (с отступом).

<CENTER> </center>

Элемент для центрирования текста, а точнее, любого содержимого. Не является общеупотребительным. В тех случаях, когда это возможно, вместо него используют атрибут align =" center".

<DIV> </div>

Элемент, похожий на предыдущий. Он позволяет выравнивать содержимое по левому краю, по центру или по правому краю. Для этого стартовый тег должен содержать соответствующий атрибут:

align ="left"

align ="center"

align ="right"

Форматирование шрифта

HTML допускает два подхода к шрифтовому выделению фрагментов текста – логическое и физическое форматирование.

В группу тегов логического форматирования входят теги, отображающие на экране монитора элементы документа, таким образом, как установлено по умолчанию в спецификации языка разметки HTML. Переопределить их параметры или свойства нельзя, за исключением ситуаций использования стилевых шаблонов CSS и обособления тегами физического форматирования. Результат действия разных тегов логического форматирования визуально может совпадать, ибо основное их предназначение заключается в логическом выделении отдельных элементов HTML.

Теги физического форматирования позволяют разработчику визуально изменять вид текста, делая его жирным или наклонным, варьируя его параметры и значения.

Физические стили

Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта.

 

Выделение текста полужирным шрифтом(от слова Bold),. Очень популярный элемент. Использование полужирного шрифта – прием, позаимствованный из текстовых редакторов.

Пример

Этот текст имеет обычное начертание – <В>, а этот будет выделен полужирным шрифтом .

 

Выделение текста курсивом (от слова Italic).

Пример

Этот текст имеет обычное начертание , а этот выделен курсивом .

<ТТ> </tt>

Элемент, обозначающий текст телетайпа (teletype). Его особенность заключается в использовании моноширинного шрифта, имитирующего пишущую машинку, то есть имеющего фиксированную ширину символа.

<STRIKE> </strike>

Элемент, создающий перечеркнутое начертание текста. В настоящее время его заменяют тегом: <DEL > </del>.

 

Подчеркнутое начертание текста.

 

Элемент, создающий эффект нижнего индекса (subscript).

 

Элемент, создающий эффект верхнего индекса (superscript).

Пример.

<HTML>

<HEAD>

<TITLE> Верхний и нижний индексы </title>

</head>

<BODY>

Н2О

(a + b)2 = a2 + 2ab + b2

</body>

</html>

Размер шрифта

<BASEFONT>

Элемент, определяющий базовый (основной) размер шрифта. Внутри элемента необходимо указать атрибут:

size = Базовый размер шрифта

Величина атрибута может лежать в пределах от 1 до 7. По умолчанию используется величина 3. Установка, выполняемая этим элементом, имеет значение для элемента FONT (см. ниже), который позволяет задавать относительный размер шрифта.

 

Определение типа, размера и цвета шрифта. Все эти характеристики определяются при помощи соответствующих атрибутов.

Абсолютный размер шрифта задается при помощи атрибута size (размер):

size=Абсолютный размер шрифта

Этот атрибут может принимать значения от 1 до 7. В таблице показано несколько образцов надписей, выполненных шрифтами разного размера.

Пример.

<HTML>

<HEAD>

<TITLE> Образцы надписей, выполненных шрифтами разного размера </title>

</head>

<BODY>

SIZE=1 Образец написания

SIZE=2 Образец написания

SIZE=3 Образец написания

SIZE=4 Образец написания

SIZE=5 Образец написания

SIZE=6 Образец написания

SIZE=7 Образец написания

</body>

</html>

Пример

Тише едешь – дальше будешь

Размер шрифта может задаваться относительного базового:

size=+Число

size=-Чucлo

При назначении величины для size необходимо учитывать величину базового размера. Обе они в сумме должны соответствовать одному из абсолютных размеров. Так, для базового размера, равного 3, относительный размер может находиться в пределах от – 2 до + 4. Если величина выходит за допустимый предел, то используется или шрифт размера 7, или шрифт размера 1. На рис. 2. показаны надписи, выполненные шрифтами с заданным относительным размером.

Шрифт +4 Шрифт +3

Шрифт+2Шрифт+1Шрифт 0Шрифт –1 Шрифт-2

При помощи относительных величин тоже можно получить семь градаций размера шрифта

Для элемента FONT можно использовать атрибут цвета:

со1ог="Цвет"

Название цвета задается либо числом, написанным в шестнадцатеричной системе, например, color="#ffoooo", либо просто его названием, написанным на английском языке, например, color="red".

Пример

Это шрифт синего цвета

Атрибут face (вид) позволяет задавать тип шрифта:

face="Название шрифта"

Пример

<HTML>

<HEAD>

<TITLE> Изменение свойств шрифтов </title>

</head>

<BODY>

Шрифт arial

Шрифт Arial Black

Шрифт Courier New

Шрифт Times New Roman

Шрифт Tahoma

Шрифт Fixedsys

</body>

</html>

Правда, есть одна проблема. Web-страницы просматривает множество людей, и нет гарантии, что у каждого из них окажется нужный шрифт. Если в системе не установлен шрифт точно с таким же названием, то браузер использует свой стандартный. Он имеет два назначенных по умолчанию шрифта: один пропорциональный, другой моноширинный.

Все эти атрибуты могут быть использованы совместно внутри тэга .

Пример

Это шрифт arial размером 3, цвет синий

Элемент FONT может с успехом заменять элементы заголовка Н1...Н6. Для последних, например, не предусмотрена возможность указания цвета букв.

Чтобы заголовок, созданный на основе элемента FONT, хорошо смотрелся, этот элемент необходимо комбинировать с другими: CENTER, В, I, Р и т. д.

<BIG> </big>

Этот тег используется, если необходимо выделить часть текста небольшим увеличением размера шрифта относительно остальных слов.

 

Этот тег используется, если необходимо выделить часть текста небольшим уменьшением размера шрифта относительно остальных слов.

Логические стили

При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузера толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.

<Н1> </hl>

Элемент заголовка. Существует шесть уровней заголовков, которые обозначаются H1. . .Н6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Представление об относительных размерах букв в них дает рис.1. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:

align = "left"

align = "center"

align = "right"

Пример

<HTML>

<HEAD>

<TITLE>Использование заголовков</title>

</head>

<BODY>

<H1>Заголовок 1</H1>

<H2>Заголовок 2</H2>

<H3>Заголовок 3</H3>

<H4>Заголовок 4</H4>

<H5>Заголовок 5</H5>

<H6>Заголовок 6</H6>

</body>

</html>

<Acronym> </acronym >

Данный элемент реализуется через параметр TITLE и отображается в браузере при наведении курсора на слово-аббревиатуру

Пример.

<HTML>

<HEAD>

<TITLE> Расшифровка аббревиатур </title>

</head>

<BODY>

Термин

<ACRONYM TITLE="HyperText Markup Language"> HTML </acronym > - означает "язык маркировки гипертекстов" и включает в себя различные способы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и многое другое.

</body>

</html>

<ЕМ> </еm> и <DFN> </dfn>

Элементы, означающие выразительность (от английского emphasis – акцент) фрагмента текста и определение чего-либо (definition). Оба элемента аналогичны по своему действию элементу , то есть, в большинстве случаев, позволяют выделить текст курсивом.

Казалось бы, два последних элемента — лишние. С точки зрения дизайна документа это так. Они могут пригодиться только для того, чтобы единообразно выделить одинаковые по назначению (или смыслу) фрагменты текста, находящиеся в разных частях документа или даже на разных страницах. Разработчик в этом случае не может точно знать, какой именно шрифт будет использован: это определяется каждым браузером по-своему. Но он может быть уверен, что все фрагменты текста будут отформатированы одинаково. В языке можно найти еще несколько элементов, которым можно дать такую же характеристику.

<CITE> </cite>

Предполагается, что этот элемент может быть использован для форматирования цитат, высказываний и ссылок в обычном понимании этого слова. Текст, расположенный внутри него, выводится по умолчанию курсивом. Визуально аналогичен тегам и

<ADDRESS> </address>

Подобно элементу CITE, данный элемент отличается только предусмотренным содержанием. Он также обеспечивает форматирование курсивом.

 ... – от английского strong emphasis — сильный акцент.

Элемент, отвечающий за выделение текста. Обычно его применение равносильно использованию элемента для выделения полужирным:<В>.

<KBD> ... </kbd> – от английского keyboard — клавиатура.

Этот элемент предназначен для указания текста, который пользователь должен ввести с клавиатуры (keyboard). Можно рассчитывать, что текст, выделенный с помощью этого элемента, будет выведен моноширинным шрифтом в полужирном начертании.

<CODE> </code>, <SAMP> </samp> и <VAR> </var>

Элементы, предназначенные для вывода фрагментов программ.

<CODE> ... </code>

Этот элемент предназначен для визуального выделения небольших фрагментов программного кода. Код отображается моноширным шрифтом.

<SAMP> ... </samp> – от английского sample — образец.

Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами. SAMP предполагается задействовать при иллюстрации примеров (sample) вывода данных на экран.

<VAR> ... </var> – от английского variable — переменная.

Этот элемент был создан для выделения переменных (variables). Как правило, все эти элементы обеспечивают вывод информации с использованием моноширинного шрифта.

<PLAINTEXT> </plaintext>

Этот элемент предназначен для создания текста с конструкциями HTML, которые должны восприниматься именно как текст. Все теги, заключенные в PLAINTEXT, воспринимаются браузером только как произвольные символы. Элемент удобно использовать для обсуждения вопросов, связанных с использованием HTML.

Горизонтальные линии

Горизонтальная линия (horizontal rule) или, на типографский манер, горизонтальные линейки – очень часто используемый элемент. Во-первых, потому, что с его помощью очень удобно делить страницу на части, использовать для отделения одного блока текста от другого. Небольшой по размеру текст, сверху и снизу которого располагаются горизонтальные линии, привлекает больше, чем обычно, внимание читателя. Во-вторых, выбор таких элементов оформления у автора страницы очень небольшой. Действительно, в HTML практически отсутствуют подобные конструкции, а вот для горизонтальной линии почему-то было сделано исключение. Правда, несмотря на некоторую скупость языка в этой области, можно придумать немало стандартных графических образов, которые разнообразили бы вид страниц.

Если нужна простая, без затей линия, можно воспользоваться тегом <HR>.

Пример.

<hr>
Пример создания горизонтальных линий с помощью тега HR

<hr>

Пример создания горизонтальных линий с помощью тега HR

1.	<Hr align="right">	выравнивание влево, по центру, вправо, по ширине: align = "left" align = "center" align = "right" align = "justify"
2.	<Hr width="30%">	длина линии в процентах и пикселях width = Длина в пикселях width = Длина в процентах % от ширины экрана
3.	<Hr size="6">	Толщина линии
4.	<Hr NoShade>	Отмена объемности
5.	<Hr color="red">	цвет линии, только в IE

Элемент не имеет конечного тега, но допускает ряд атрибутов:

Пример.

<HTML>

<HEAD>

<TITLE> Горизонтальные линии </title>

</head>

<BODY>

Длина линии – 30% от ширины экрана. Использование выравнивания линии по правому краю, по центру и по левому краю

толщина линии – 2, длина -100% <HR SIZE=2 WIDTH=100%>

толщина линии – 4, длина -50% <HR SIZE=4 WIDTH=50%>

толщина линии – 8, длина -25% <HR SIZE=8 WIDTH=25%>

толщина линии – 16, длина -12% <HR SIZE=16 WIDTH=12%>

Линия, несодержащая объема <HR NoShade>

</body>

</html>

Escape последовательности (символьные объекты)

Некоторые символы, такие как "<" и ">" воспринимаются браузерами как начало и конец HTML-меток, поэтому должен существовать способ их выражения, как символьных данных внутри самого документа или в URL. В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или escape (эскейп) – последовательностями). Браузер показывает на экране символ "<", когда встречает в тексте последовательность < (по первым буквам английских слов less than — меньше, чем). Знак ">" кодируется последовательностью > (по первым буквам английских слов greater than — больше, чем).

Принято использовать следующие нотации (соответствия):

символ	обычное имя символа	HTML запись символа (escape последовательность)
<	символ "меньше чем", левая угловая скобка	<
>	символ "больше чем", правая угловая скобка	>
&	амперсанд	&
"	двойные кавычки	"
©	знак копирайт	&copy
®	знак зарегистрированной торговой марки	&reg
	непрерывный пробел	&nbsp

Точка с запятой – обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Использование меток типа &QUOT; или &AMP не допускается. Более полный набор специальных символов представлен в приложении 1.

Пример.

<HTML>

<HEAD>

<TITLE> Специальные символы </title>

</head>

<BODY>

&amp – амперсанд

&quot __ &quot – двойные кавычки

&copy – знак копирайт

β – греческая строчная буква бета

± – знак плюс-минус

</body>

</html>

Вообще говоря, &-последовательности определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в виде &-последовательностей.

Лабораторная работа.