English version | Другие серверы Moneky

Создание web-страницы

Основы языка HTML

Как можно форматировать текст на языке HTML?
Создатели языка HTML придумали его, как правило, для Web-страниц, но он используется не только броузерами. Например, современные текстовые редакторы или почтовые клиенты - большинство из них распознаёт и использует язык HTML. И не удивительно, что основная задача, которая стоит перед этим ним - это всевозможное форматирование текста. Вот почему большинство тегов используется именно для этой цели.

Использование цветового оформления и регулировка размера шрифта.
Наверняка Вы захотите, чтобы определённый текст или цытата отличались от другим размером, шрифтом или цветом. Для организации всех этих функций служит один тег <FONT>, но с разными атрибутами. Можно использовать эти атрибуты все сразу, например, для выделения определённого цвета другим цветом, размером и другим шрифтом.

<P><FONT COLOR= "#0000FF">Этот текст будет синего цвета</FONT>
<BR><FONT SIZE="2">Этот текст будет меньше по размеру на один пункт</FONT>
<BR><FONT FACE="Times" >Здесь будет другой шрифт</FONT>

Возможно Вас заинтересуют цыфры после атрибута COLOR. Это и есть само значение цвета, то есть "#0000ff" это ни что иное, как синий цвет, а о том, как он образуется Вы узнаете чуть ниже.

Абсолютно все цвета можно записать с использованием модели RGB - red-красный, green-зелёный, blue-синий. Каждое из этих чисел обозначает процентное содержание соответствующего цвета, а цифры это ни что иное, как числа, только в шестнадцатеричной. (перевести числа из двоичной в шестнадцатеричную систему исчисления можно используя обычный калькулятор Windows, преобразовав его в инженерный стиль.) Показатель цвета состоит из трёх частей, обычно они отделяются "запятой"(это не обязательно), и максимальное значение каждого из этих чисел - 255. Например 0,0,0, это чёрный цвет, а 65,105,225 это ярко синий. Как Вы знаете, белый цвет образуется при полном насыщении трёх цветов, а значит 255,255,255 - это белый цвет и.т.д.

Отоброжение форматированного текста в броузере

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

<BR><B>Этот текст будет жирным</B>
<BR><I>Это курcивный шрифт</I>
<BR><U>Это подчёркнутый текст</U>
<BR><DEL>А это зачёркнутый шрифт</DEL>
<BR><SUB>Эта подпись будет ниже на пол строки</SUB>
<BR><SUP>А эта подпись будет на пол строки выше</SUP>
<BR><CODE>Это машинный шрифт</CODE>
<BR><KBD>Это тоже машинный шрифт</KBD>
<BR><SAMP>Один из видов машинного шрифта</SAMP>

Какой тег выбрать?
Существует два типа тегов: логический и физический. Преимущества есть и у первого и у второго. Поскольку Вы не можете предсказать возможности web-броузеров, используемых посетителями Вашей страницы, тогда лучше использовать логические теги- они распознаются всеми броузерами. Хотя логические теги узнают не все броузеры, у них всёже есть одно преимущество. Для их написания требуется меньше символов, следственно и размер страницы будет меньше. Для страниц небольшого размера это почти не имеет значения, а там, где использование логических тегов перевалило за пятьдесят, физические теги сыграют незаменимую роль.

Значение тега	Физический тег	Логический тег
Полужирный шрифт	<B>	<STRONG>
Курсив	<I>	<EM>
Моноширинный шрифт	<TT>	<CODE>
Подчёркнутый шрифт	<U>	<UNDERLINE>

Создание заголовков
Чуть выше мы уже говорили, что даже уменьшение символов в тегах на больших страницах существенно меняют её размер. С заголовками почти такая же ситуация, но в отличии от физических тегов, теги заголовков это общепринятый стандарт HTML и распознаются всеми броузерами. Например, чтобы сделать большой заголовок можно либо вписать тег <FONT> с атрибутом SIZE или просто использовать предназначенный для этог тег <H> с номером размера заголовка, который может изменятся от одного до шести, то есть самый большой заголовок это заголовок первого уровня - <H1>, а самый маленький - <H6>.

<CENTER><H1>Заголовок первого уровня</H1><CENTER>
Вписав этот HTML-код в свой документ Вы увидете, что получится заголовок эквивалентный шестому размеру шрифта, выделенного жирным. Но следует заметить, что если создать такой же заголовок, с использованием тега <FONT>, HTML-код получится почти в два раза длиннее. Обратите внимание, что без тега <CENTER>, заголовок будет выравниваться по левому краю, так как тег <CENTER> центрирует как текст, так и заголовки.

Ручное форматирование. Для чего это нужно?
Если Вы создали таблицу, и она выглядит на странице очень красиво, это вовсе не значит то, что она также будет выглядеть в броузере пользователя. Разные броузеры могут по-разному отображать разные эдементы документа, то есть пользователь сам может настраивать отображение того или иного тега. Но уверенность в том, что таблица отобразится именно так, как Вам хотелось даёт только тег ручного форматирования <PRE>. Ещё одно преимущество этого тега звключается в том, что его использование требует гораздо меньший символов, нежели таблицы, и размер таблицы уменьшается всреднем на 30%

<table border="1" cellpadding="0" cellspacing="0" >
<tr><td valign="top" bgcolor="#E3E4EE" height="1"><div align="left">
<pre>Этот текст создан с помошью тега PRE.
Текст будет выглядеть в окне броузера
так же, как и в окне написания кода.
</pre></div></td></tr></table></center></div>

В данном примере мозут возникнуть проблемы из-за того, что кнопка ведёт внекуда. Дело в том, что программа на которую указывает код не существует. На рисунке показано, как будет выглядеть Ваша ссылка в окне броузера. Она может немного отличатся в зависимости от того какой у Вас броузер. В данном случае использовался один из самых известных в мире броузеров - Netscape 6.

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

Этот тег, как и большинство используется парно и что немаловажно, если использовать этот тег с другими, то порядок тегов строгий. Другие теги должны находится между открывающим и закрывающим тегом. Сначала идёт тег <BLOCKQUOTE>, а после другие теги, как, например, <P>, затем идёт нужный текст, закрывающий тег </P> и закрывающий тег </BLOCKQUOTE>. А для большего отступа можно использовать два тега одновременно и боьше.

<BLOCKQUOTE><P>Этот текст создан с помощью тега BLOCKQUOTE. Обратите внимание, что расстояние лоступа такое же как и при одиночном нажатии конпки TAB. </P> </BLOCKQUOTE>