Основы HTML
 Структура документов
 Создание web-страницы
 Задаем стили текста
 Вставляем картинку
 Гиперссылки
 Таблицы
 Списки
 Теги HTML
 Специальные символы
Основы CSS
 Свойства CSS
Технология Ajax
 Основы AJAX
 Изучаем AJAX на примере
SEO
 SEO учебники
 ТИЦ и как его повысить
Заработок в интернете
 Заработок в интернете для новичков
 Заработок в соц. сетях с помощью Prospero
 GetGoodLinks – заработок на продаже ссылок.
Реклама

Задаем стили текста.

Для придания WEB-странице привлекательного вида HTML предоставляет практически неограниченные возможности по форматированию текста.

Чтобы разбить текст на абзацы, перед каждым абзацем необходимо поставить тег <p>. Этот тег можно не закрывать. Например <p>Первый абзац</p> и <p>Первый абзац будет одинаково верно.

Также в языке HTML есть специальные теги для заголовков. Всего есть шесть уровней заголовков пронумерованных цифрами от 1 до 6. Заголовок объявляется парой тегов с номерами от <H1> и </H1> - заголовок первого уровня, до <H6> и </H6> - заголовок шестого уровня. Заголовки отличаются от обычного текста размером и толщиной букв. Заголовок первого уровня <H1> отображается очень крупным шрифтом, а заголовок шестого уровня <H6> - очень мелким.

По умолчанию текст в заголовках и абзацах выравнивается по левому краю. Для того чтобы разместить заголовок или отдельный текст по центру необходимо в тег <H1> или <p> добавить атрибут align=center, для правостороннего выравнивания align=right. Для явного указания левостороннего выравнивания используется атрибут align=left.

Теперь откройте в блокноте созданный ранее файл first.html и внесите следующие изменения:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title> Михаил Лермонтов. Герой нашего времени </title>
  </head>
  <body>
    <H1 align=center>БЭЛА</H1>
    <p> Я ехал на перекладных из Тифлиса. Вся поклажа моей тележки состояла из одного небольшого чемодана, который до половины был набит путевыми записками о Грузии. Большая часть из них, к счастию для вас, потеряна, а чемодан с остальными вещами, к счастью для меня, остался цел.
    <p> Уж солнце начинало прятаться за снеговой хребет, когда я въехал в Койшаурскую долину. Осетин-извозчик неутомимо погонял лошадей, чтоб успеть до ночи взобраться на Койшаурскую гору, и во все горло распевал песни. Славное место эта долина! Со всех сторон горы неприступные, красноватые скалы, обвешанные зеленым плющом и увенчанные купами чинар, желтые обрывы, исчерченные промоинами, а там высоко-высоко золотая бахрома снегов, а внизу Арагва, обнявшись с другой безыменной речкой, шумно вырывающейся из черного, полного мглою ущелья, тянется серебряною нитью и сверкает, как змея своею чешуею...
  </body>
</html>

Сохраните документ под именем second.html, и посмотрим, что же у нас получилось:


Рассмотрим другие теги для оформления текста. Для установки полужирного начертания используются парные теги <b> </b>. Курсивный текст устанавливается с помощью тегов <i> </i>. Контейнеры можно вставлять один в другой, только вставлять нужно правильно. Например, такая запись будет правильной: <b><i>Правильно</i></b>, а такая не правильной: <b><i>Не правильно</b></i>.

С помощью тегов <u> </u> устанавливается подчеркнутое начертание текста, а теги <tt> </tt> - отобразят текст телетайпным шрифтом. Теги <big> </big> увеличивают размер шрифта текста, заключенного между ними. А с помощью тегов <small> </small> вы можете уменьшить размер шрифта текста по сравнению с исходным. Примеры использования этих тегов:

жирный текст - html код: <b>жирный текст</b>;
курсивный шрифт - <i>курсивный шрифт</i>;
вложение тегов - <b><i>вложение тегов</i></b>;
подчеркнутый текст - <u>подчеркнутый текст</u>;
телетайпный шрифт - <tt>телетайпный шрифт</tt>;
увеличиваем размер шрифта - <big>увеличиваем размер шрифта</big>;
уменьшаем размер шрифта - <small>уменьшаем размер шрифта</small>;

С помощью тегов <font> </font> можно определять все атрибуты шрифта. С его помощью мы можем указать тип, размер, цвет и некоторые другие свойства. Размер шрифта указывается с помощью атрибута size="число от 1 до 7". По умолчанию размер шрифта равняется 3 пунктам. В дизайне обычно используются первые четыре размера. Кроме размера, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это атрибутом face="название шрифта", например: face="Comic Sans MS". По умолчанию браузеры используют шрифт Times Roman. Для задания цвета шрифта существует атрибут color="цвет". Цвета можно задавать двумя разными способами. Можно использовать словесное обозначение цвета: black, white, red, blue и т.д. А можно - и их цифровое обозначение, только перед цифровым эквивалентом необходимо ставить #. Так, цвет "black" имеет числовое значение "#000000", цвет "red" - значение "#FF0000" и так далее. Примеры использования тегов <font> </font>.

Текст 1 - <font size="1" face="Comic Sans MS" color="red">Текст 1</font>;
Текст 2 - <font size="4" face="Arial" color="#FF0000">Текст 2</font>;
Текст 3 - <font size="5" face="Courier" color="#FFFFFF"">Текст 3</font>;

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

  • <dfn> </dfn> - применяется для выделения слова. Текст обычно выводится курсивом.
  • <em> </em> - для выделения слов и усиления. Выводится курсивом.
  • <cite> </cite> - для выделения названий. Отображается курсивом.
  • <code> </code> - для фрагментов кода программ. Отображается шрифтом фиксированной ширины.
  • <strong> </strong> - для особо важных фрагментов. Выделяется полужирным шрифтом.
  • <address> </address> - этот тег служит для сведения об авторе и/или авторских правах.

Подписка на новости
Теги HTML
 A
 ABBR
 ACRONYM
 ADDRESS
 B
 BIG
 BLOCKQUOTE
 BODY
 BR
 BUTTON
 CENTER
 CITE
 CODE
 DD
 DFN
 DL
 DT
 EM
 FONT
 H1-H6
 HEAD
 HR
 HTML
 I
 IMG
 KBD
 LI
 LINK
 MARQUEE
 META
 NOBR
 OL
 OPTION