Главная страница           Поиск по сайту
Файловый обменник       Онлайн игры
Интересное чтиво +        Музыка
IT-Новости                     Фото-свалка
Форум
Доска объявлений
Полезные сайты
Универсальный поиск

Гость

22:37:52

Мы рады вас видеть.
Пожалуйста
зарегистрируйтесь
или авторизуйтесь!

На сайте:
Пользователей: 9191
Коментариев: 216
Форум: 743/1989
Фото: 257
Файлов: 193
Статей: 187
Сайтов: 80











    Наш баннер:

    Друзья, поддержите
    наш проект!
    Разместите
    у себя кнопку ;)

    nnov.3dn.ru Интернет-свалка Н.Н.


      --------------

      Себестоимость сайта:
      $
      тИЦ:30 PR:3
      Обменяться баннером


      Нам важно ваше мнение
         
      Чем наполнять сайт?

          
       
      Всего ответов: 2394








    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0

Добавить свою рекламу на сайт



    Главная » Статьи » Программирование » HTML [ Добавить статью ]
HTML [16] C++ [1]


HTML для тех, кто в танке (Часть2) Шрифты.

  Шрифт - это таблицы замены кода видимым изображением.
  То есть, собсно шрифтом. Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix).
  Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка. Каждый шрифт - это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт - означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой - это:

Arial Ариал
Courier New Курьер Нью
Comic Sans Комик Санс
Times New Roman   Таймс Нью Роман
Verdana Вердана

  Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен - Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт - это самостоятельный файл в папке Windows/fonts/ *.ttf
   Поэтому, если вы имеете какой-либо нестандартный шрифт и хотите его использовать, вам придется: а) доставить этот файл пользователю, что, учитывая вес файла в 150-300 кб, не пятисекундная задача, либо б) ограничиться имеющимися, заменив остальное лишь графикой, то есть, картинками (советую соблюдать меру ;0)
   
  Как в HTML придать шрифту тот или иной вид?
  Тег, назначающий шрифт - <font>содержимое тега - то, на что повлияют параметры тега</font>
   В это самое <font> мы сейчас и будем вставлять параметры... Обращу ваше внимание на то, что вставляются все параметры именно в начало тега, а не в конец. В замыкающий тег вообще ничего никогда не вставляется.
  Итак:
  размер шрифта - <font size="число от 1 до 7">

текст размера 1
текст размера 2
текст размера 3
текст размера 4
текст размера 5
текст размера 6
текст размера 7

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

  Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.

Если правильно подобрать размеры, смотрится вполне приятно.

Кроме прочего, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это тегом face="название шрифта" (пример: face="Comic Sans MS")
Эти два тега - размер и вид шрифта, - можно расположить в любой последовательности в теге <font> - что

<font size="1" face="Comic Sans MS">текст</font>

что

<font face="Comic Sans MS" size="1">текст</font>

Главное тут следить, чтобы задаваемые параметры (в даном случае это имя шрифта и его размер) были выделены кавычками и находились внутри тега <font> межу font и >

Теперь, для лучшего понимания таких терминов, как "контейнер",, "вложеный тег" и "наследование", рассмотрим ниже следующий пример:





<font face="Название шрифта" size="1">
<i>
< font size="4">Заголовок </font>
   
   текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
</i>
< font size="4">Заголовок </font>


текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
</font>





Как видим из примера, вовсе необязательно каждый раз писать цвет, размер и имя шрифта. Все эти параметры "наследуются" младшими тегами, то есть теми, что вложены в другие. Разъясню. Пример выше словами: задали имя шрифта; оно сохранится во всем пространстве, ограниченном тегами с именем.
  Затем задана наклонность шрифта тегом <i></i> Контейнер этого тега включает в себя и заголовок (размер 4) и текст.

  Так же в работе с текстом помогает и тег, обозначающий абзацы - это <p></p> - все, помещенное в них, отделяется сверху и снизу пробелом и может иметь собственные параметры абзаца,, прописываемые прямо в теге - <p align="center">текст</p>.
   Пробелы между выделением абзаца, являющиеся скорее недостатком, чем полезностью, можно убрать при помощи CSS, о котором будет отдельная глава.

  Шрифт так же может быть наклонный, выделеннный, и жирный наклонный.
Достигается это тегами

<i>
текст</i>
<b>текст</b>

и их сочетанием - <b><i> текст </i></b>

Сочетание вида м - <b><i> текст</b></i> в большинстве броузеров вызовет ошибку, в результате которой ваша страничка может криво отобразиться или не отобразиться вообще: зависит от устойчивости броузера. Мозилла, например, проглотит и поймет это правильно, а вот большинство других - "заорут". Поэтому советую писать правильно.

Собственно, вот полный список таких тегов и, заодно, как это выглядит в броузере:
<b>жирный шрифт</b>
<strong>жирный шрифт</strong>
- (аналог <b></b>)
<i>
наклонный шрифт</i> - (курсив)
<em>
наклонный шрифт</em> - (аналог <i></i>)
<u>пАдчёркнутый шрифт</u>
<s>перечёркнутый шрифт</s>
<strike>перечёркнутый шрифт</strike> (аналог <s></s>)
<big>текст отображается больше, чем основной шрифт</big>
<small>текст отображается меньше, чем основной шрифт</small>
<sub>
нижний индекс</sub> и <sup>верхний индекс</sup>

<code>
текст отображается как код или формула (чаще всего как шрифт Courier)</code>
<tt>
текст отображается моноширинным шрифтом (чаще всего шрифт Courier)</tt>
<kbd>
текст отображается моноширинным жирным шрифтом</kbd>
<var>
отображение переменных (как правило - курсив)</var>
<cite>
отображение цитат (как правило - курсив)</cite>
<address>
так обозначается адрес (как правило, курсив) </address>
<blockquote>
Эта фича смещает весь абзац (заключенный в нее текст) на энный отступ слева - нужно для упрощения дизигна, чтоб не равнять таблицами или пробелами. Иногда очень облегчает жизнь :0)
</blockquote>

Попробуйте использовать и такое:

<blockquote>
<blockquote>
текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст..
</blockquote></blockquote>

И собственно, тег <br> - эта фича закрытия не требует.
Для тех, кто в танке: </br> не пишем!
Это просто переход к следующей строке, чтобы, например, писать стихи в столбик:
Тщетны надежды и усилья,
гранит науки покусать,
не те уж зубы, руки, крылья,
ну что ж... тогда хоть полизать... ;0)

    Кроме прочего, стоило бы упомянуть такие теги, как <H1></H>, но, будучи вставлены в текст, "по умолчанию" они непоправимо изуродуют дизайн. Посему про них я напишу после рассмотрения CSS, ибо без серьезной "доводки" при помощи стилей теги эти неудобоваримы и бесполезны.

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

как это выглядит: Код:
  •   строка 1
  •   строка 2
  •   строка 3
<ul>
  <LI>строка 1
  <LI>строка 2
  <LI>строка 3
</ul>

списки могут быть и вложенными:

как это выглядит: Код:
  •  тема 1
    1. подтема 1
    2. подтема 2
      1. подподтема
    3. подтема 3
  •  тема 2
<UL>
   <LI>тема 1
          <OL>
   <LI>подтема 1
   <LI> подтема 2
          <OL start="10">
   <LI> подподтема
          </OL>
   <LI> подтема 3
           </OL>
   <LI>тема 2
</UL>

Какой тег что означает?
UL - начало списка, /UL - закрытие списка
LI - тег, означающий строку списка. Если величина не задана (параметром value="число"), то по умолчанию имеет вид точки, если задано число - отсчитывает, прибавляя в начало каждой новой строчки, следующее число к заданному.
OL - тег начала нумерованного списка. Может принимать значение не с единицы, а с заданной величины: делается введением параметра start="число, с которого начать отсчет"

Декорировать списки можно разными значками. Делается это при помощи параметра type:

как это выглядит: Код:
  •  тема 1
<UL>
  •  тема 3
<UL type="circle">
  •  тема 4
<UL type="square">

квадратик
  •  тема 5
<UL type="disc">

(собственно, этот параметр ставится "по-умолчанию")
  1. тема 1
  2. тема 2
  3. тема 3
<OL type="i" >

римские малые
  1. тема 1
  2. тема 2
  3. тема 3
<OL type="I" >

римские заглавные
  1. тема 1
  2. тема 2
  3. тема 3
<OL type="a" >

английские малые
  1. тема 1
  2. тема 2
  3. тема 3
<OL type="A" >

английские заглавные
  1. тема 1
  2. тема 2
  3. тема 3
<OL type="1" >

арабские цифры
  Но вышеопиcанные премудрости с точками, кружочками и квадратиками сработают и если просто установить тег в двойном экземпяре - то есть <ul><ul><li> содержимое </ul></ul></li> тогда вместо точки отобразится кружок. А если <ul> написать три раза, то квадратик.
Категория: HTML | Добавил: liS (19.12.2008)
Просмотров: 1064 | Рейтинг: 0.0/0
Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]




Добавить свою рекламу на сайт
ххх
Рейтинг@Mail.ru Используются технологии uCoz