Теги форматирования текста



Календарь



Чат с админом сайта



Нажмите Edit Nickname и впишите свое имя или Ник. Выше наберите свое сообщение. Enter - отправка. Админ получит послание и в OffLine.

free counters

Урок 3. Теги форматирования текста

lesson 3 Переходим к форматированию текста. В HTML для форматирования предназначено довольно много тегов. Рассмотрим наболее употребляемые из них.

<FONT></FONT> - предназначен для описания параметров шрифта. Имеет атрибуты:
face="..." - задает название шрифта (вы их знаете из Worda), рекомендуется указать несколько похожих по начертанию, т.к. необходимого может не оказаться на компе пользователя;
size="..." - размер шрифта, от 1 до 7. По умолчанию в HTML установлен 3-й.
color="..." - цвет шрифта. Можно задавать как green, blue и т.д. или из полной палитры в формате #RRGGBB,
где RR - красный, GG - зеленый, BB - синий в 16 разрядном коде, соответственно принимают значения от 00 до FF.

Обратите внимание - я поставил неразрывные пробелы (смотрите листинг), чтобы избежать разрыва выражения "от 00 до FF". Можно его набрать вручную. В HtmlPad это делается быстрее. На вкладке Html/Text есть значок - квадратная скобочка внутри квадрата. Клацните мышью и получите неразрывный пробел. Другой способ: жмите клавиши Контрол+пробел.

<i></i> и <em></em> - отображение текста курсивом;
<b></b> и <strong></strong> - выделение жирным;
Рекомендуется применять вторые из пары.
<u></u> - подчеркнутый текст;
<strike></strike> - перечеркнутый текст;

<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6> - заголовки, их следует применять только по назначению (если у вас есть подразделы, строго соблюдайте иерархию). Для выделения жирным см. теги выше. Если вы применили заголовок, текст будет жирным и отделен пустой строкой сверху и снизу. Н1 - самый большой по шрифту и по ранжиру. Поисковые машины любят первые три заголовка.

Попробуйте самостоятельно выровнять заголовок веб-страницы, которую мы сделали в предыдущих уроках, с помощью атрибута align="...".

Подстрочное и надстрочное написание - для индексов и математических формул.
<sub></sub> - подстрочное написание;
например: x<sub>3</sub>+x<sub>2</sub>+x - в броузере отобразится как: x3+x2+x;
<sup></sup> - надстрочное написание.
например: x<sup>3</sup>+x<sup>2</sup>+x - в броузере отобразится как: x3+x2+x;

<p></p> - абзац, может применяться с атрибутом align="..." выравнивание текста в строке: left - по левому краю, right - по правому краю, center - по середине, justify - по ширине. Абзацы разделятся пустой строкой.

Для загрузки картинки применяется непарный тег <img>.
<img src="lesson1.jpg" border="0" width="32" height="32" alt="значок 1-го урока">
где src="lesson1.jpg" - указывает адрес картинки;
alt="значок 1-го урока" - название картинки (коротко, 2-3 слова), если картинка не загрузилась, на месте картинки будет надпись "значок 1-го урока";
Атрибут border=0 указывает, что картинка будет отображаться без рамки. Если вам нужна рамка, поставьте значение 1.
width="32" и height="32" - ширина и высота картинки в пикселах.

Картинка может выступать в роли гиперссылки. Например:
<a href="lesson1tables.htm">
<img src="lesson1.jpg" border="0" width="32" height="32" alt="значок 1-го урока" title="Первый урок"></a>
Если навести курсор на картинку, увидите всплывающую надпись: Первый урок

К примеру можно оформить меню сайта в виде кнопок, а ссылку в меню на первый урок сделать таким образом:
<a href="lesson1tables.htm" title="Таблицы.Табличная структура веб-страницы" >
<img src="lesson1.jpg" border="0" width="250" height="20" alt="1-й урок Таблицы" >
</a>

Кнопки с надписями нужно сделать в Фотошопе или другом графическом редакторе. Благодаря атрибуту title тега <a> при наведении курсора на кнопку появится всплывающая надпись - "Таблицы.Табличная структура веб-страницы". В том случае, если картинки по какой-либо причине не загрузились, на месте кнопки пользователь увидит подпись: "1-й урок Таблицы". Курсор в виде руки покажет, что ссылка работает.

Можете поэкспериментировать самостоятельно.
Уроки фотошопа мы в этом курсе рассматривать не будем.

Для написания кода HTML я использую HtmlPad FisherMan редактор. Если вы планируете хоть как-то разбираться в коде HTML, я рекомендую вам воспользоваться этим редактором. Он помогает писать код и не нужно абсолютно все набирать вручную.

Кроме того вы можете использовать дополнительные функции редактора:

  • палитру цветов;
  • справочник HTML кода;
  • вставлять теги одним кликом мышки;
  • осуществлять поиск и замену по тексту;
  • просматривать страницу во внутреннем и внешнем броузере и т.д.

Вы можете сами оценить все достоинства редактора HtmlPad FisherMan кликнув на ссылку: СКАЧАТЬ бесплатно HtmlPad FisherMan.

Я написал текст страницы в текстовом редакторе. По ходу текста у нас содержатся теги HTML кода. Броузер работает так, что весь текст, который не находится внутри парных угловых скобок < и >, выводится на экран монитора. Встречая пару угловых скобок, броузер интерпретирует содержимое скобок как тег и приступит к его выполнению. Если содержимое внутри угловых скобок броузеру неизвестно, он просто игнорирует такую конструкцию и просто ее пропустит. В нашем конкретном примере я столкнулся с необходимостью вывода на экран тегов с угловыми скобками. Если броузер встречает пару угловых скобок, он интерпретирует содержимое скобок как тег. Чтобы этого избежать мы должны заменить скобки их эквивалентом - escape последовательностью.

Открываем HtmlPad FisherMan редактор. В HtmlPad редакторе выбираем опцию файл - открыть. Ищем нашу папку Делаем свой сайт, выбираем текстовый файл с текстом вводного урока - жмем открыть. Выбираем меню поиск - заменить. В поле найти вбиваем левую угловую скобку < , а в поле заменить ей соответствующую последовательность: & lt;(я вставил в эскейп последовательность пробел, иначе броузер преобразует ее в левую угловую скобку), и ставим переключатель искать везде. Затем в поле найти вбиваем правую угловую скобку > , а в поле заменить ей соответствующую последовательность: & gt;(и тут пробел, и обратите внимание точка с запятой обязательны). Заменяем и сохраняемся (Ctrl+s).

После этого выделяем весь текст (Ctrl+а), копируем в буфер (Ctrl+с) и вставляем в файл index.html в ячейку таблицы, где у нас должен находиться раздел Наша информация (Ctrl+v). Перед текстом впишем название урока: Вводный урок. С чего начинать создание веб-страницы? Включаем вкладку НТМЛ/Текст. Выделяем название курсором мыши и нажимаем на этой вкладке на букву Н. (с точкой). Вы видите, что название урока оказалось внутри контейнера тегов:
<h>Вводный урок. С чего начинать создание веб-страницы?</h>
Вам нужно поставить возле буквы Н цифру - размер заголовка. В данном случае поставим 3.

ВСТАВКА ОКНО РЕДАКТОРА окно редактора

Дальше выделяем мышью весь текст урока до конца и на той же вкладке выбираем выравнивание по ширине (правую из 4-х колонок в центре вкладки). Вы должны увидеть что весь текст заключен в контейнер
<div align="justify"></div>. Далее переходим к выделению абзацев. Сначала читаем текст, разделяем абзацы Ентером. Затем мышкой выделяем абзац (как мы делали выше с заголовком) и на вкладке щелкаем на значок маркера "конец строки". Постепенно переходим от первого абзаца к последнему. Посмотрите картинку:

ВСТАВКА ОКНО РЕДАКТОРА 1 окно редактора

Еще немного о шрифтах. По умолчанию в HTML устанавливается размер шрифта 3, цвет шрифта - черный, тип шрифта - с засечками, выравнивание по левому краю, фон страницы белый. Нет смысла забивать вам голову, так как в следующем разделе наших уроков - HTML+CSS вы узнаете насколько удобно управлять шрифтами с помощью каскадных таблиц стилей CSS. Но для разминки попробуйте все же поиграться с атрибутами в теге <font>. В нашей страничке он стоит после заголовка и тега <div align="justify">.

Вот что действительно важно:
- теги <font></font>, <div></div>, могут быть вложенными, но ни в коем случае не должны пересекаться;
    правильно:


		<font><font></font></font>;
		<div><div></div></div>; 
		<div><font></font></div>; 
		<font><div></div></font>;

    неправильно:

				
		<font><div></font></div>;
		<div><font></div></font>.

И еще - обязательно следите за закрытием этих тегов, особенно тега <div>. Это поможет избежать многих проблем. - теги <i></i>, <em></em>, <b></b>, <strong></strong>,<u></u>,<strike></strike> могут быть вложены один в другой, но не сам в себя. И необходимо соблюдать порядок: открылся первым - закрылся последним, пересекаться не могут.

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

Автор: Косов Сергей
04.01.2011


Все права защищены © 2010-2011   Сергей Косов     kosowlv@gmail.com    www.buckses.info