Отправляет email-рассылки с помощью сервиса Sendsay

Свой сайт - это очень просто!

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2001   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

1.344 подписчиков
-1 за неделю
←   Все выпуски   →

Свой сайт - это очень просто!


Служба Рассылок Subscribe.Ru
Свой сайт - это очень просто. нр7
06.12.2001Свой сайт - это очень просто! нр 7.

Доброго Вам здоровья, уважаемые читатели!
Наши сегодняшние темы:

  • ТЕГИ, ПРИМЕНЯЕМЫЕ ДЛЯ ФОРМАТИРОВАНИЯ ШРИФТА
  • ТАБЛИЦЫ. Создание простейших HTML таблиц
   Полные версии статей, как всегда, уже лежат на сайте.

ТЕГИ, ПРИМЕНЯЕМЫЕ ДЛЯ ФОРМАТИРОВАНИЯ ШРИФТА.

   Для правильного и симпатичного отображения информации на Вашей страничке Вам потребуется не только правильно расставить абзацы, в нужном месте перевести строку, и пр., но и расставить акценты внутри текста, т.е., что-то выделить жирным шрифтом, что-то написать другим цветом, что-то подчеркнуть и т.д. На все эти случаи в языке HTML существуют соответствующие теги. Рассмотрим некоторые из них, наиболее часто употребляемые. Нет необходимости описывать здесь все теги подряд, т.к. освоив употребление нескольких, Вы без труда сможете пользоваться остальными.
  • <B>...</B> - выделяет текст, помещенный внутрь, жирным шрифтом.
  • <I>...</I> - выделяет текст, помещенный внутрь, наклонным шрифтом.
  • <U>...</U> - выделяет текст, помещенный внутрь, подчеркиванием.
  • <BIG>...</BIG> - более крупный шрифт.
  • <SMALL>...</SMALL> - более мелкий шрифт.
    Небольшой комментарий - Для форматирования шрифтов можно применять теги физического форматирования и теги логического форматирования. Их отличие в том, что теги физического форматирования дают браузеру конкретное указание, каким шрифтом печатать текст, а теги логического форматирования указывают ему лишь на то, что текст должен отличаться от обычного в ту или иную сторону. Например, вместо тегов <BIG>...</BIG> и <SMALL>...</SMALL> можно употребить тег
  • <FONT></FONT>, который имеет параметры
    FACE - задает тип шрифта,
    SIZE - задает размер шрифта,
    COLOR - задает цвет шрифта.
    Например, эта фраза написана внутри тега: <FONT FACE="Comic Sans MS " SIZE=6 COLOR=red></FONT>.
    Спецификация HTML-4.0 рекомендует употреблять теги логического форматирования, как более лояльные к пользователю. В некоторых случаях употребление тегов физического форматирования может не привести к желаемому результату. Например, в случае с вышеприведенной фразой, браузер покажет ее шрифтом, установленным по умолчанию, если на машине пользователя нет шрифта Comic Sans MS. В редакторе SNK Visual HTML Workshop теги логического форматирования Вы найдете нажав кнопку "Стили", а теги физического форматирования - нажав кнопку "Шрифт".
  • <STRONG>...</STRONG> - сильно выделенный текст. 
  • <РRE>...</PRE> - уже знакомый нам тег.
 Все, помещенное в него, сохраняет  форматирование на уровне
 текста, но выводится моноширинным текстом (Что это такое,
 Вы видите на этом примере).
   Этого, наверно, достаточно. Как видите, особого разнообразия не наблюдается (мой браузер, например, показывает текст, помещенный в теги <SMALL>...</SMALL>, <РRE>...</PRE>, <TT>...</TT> совершенно одинаково), но вполне достаточно, чтобы выполнить страничку в соответствии с Вашим вкусом.

ТАБЛИЦЫ

Часть 1

Создание простейших HTML таблиц.

   В настоящее время таблицы в HTML используются, в основном, для форматирования и оформления страниц, хотя и первоначальное их назначение как метода представления информации не утратило своего значения. Действительно, таблицы дают широчайшие возможности для оформления интернет-страниц. Рассмотрим подробнее их использование.
   Для построения простейшей таблицы необходимы три тега-контейнера, можно сказать - три кита, на которых строятся все таблицы: <TABLE><TR><TD>пример простейшей таблицы</TD></TR></TABLE>, причем, обратите внимание, что они должны быть вложены друг в друга именно в таком порядке. На странице это будет выглядеть так:
пример простейшей таблицы

Да, совершенно верно, глядя на этот "пример", никак нельзя предположить, что это таблица. Для того, чтобы это стало видно, необходимо ввести в тег <TABLE> параметр BORDER. Тогда HTML-код нашей таблицы будет выглядеть так: <TABLE BORDER><TR><TD>пример простейшей таблицы</TD></TR></TABLE>, а сама таблица так:
пример простейшей таблицы

Параметру BORDER может присваиваться числовое значение, которое определяет толщину рамки в пикселях.
   Но, все по порядку. С тегом <TABLE> пока все ясно. Он говорит браузеру, что необходимо строить таблицу и имеет кучу параметров, о которых - попозже.
   Тег-контейнер <TR>...</TR> определяет построение строк и употребляется только внутри тега <TABLE></TABLE>. В любом другом месте браузеры будут в лучшем случае игнорировать этот тег, а в худшем - интерпретировать его неправильно, что может испортить вид Вашей прекрасной, с таким трудом построенной страницы. Внутри тега <TABLE> может быть сколько угодно тегов-строк. Сколько вставите тегов, столько строк в таблице сделает браузер. Внутри тега <TR>...</TR> обязательно должен быть хотя бы один тег <TD>...</TD>, который определяет построение столбцов. Тег <TD> также не распознается браузерами, если он стоит вне тега <TR>.
   Зная все вышеизложенное, мы уже можем строить довольно приличные таблицы. Для примера построим таблицу с двумя строками по два столбца в каждой строке. Вот ее код:
<TABLE>
<TR><TD>ячейка 1.1</TD><TD>ячейка 1.2</TD></TR>
<TR><TD>ячейка 2.1</TD><TD>ячейка 2.2</TD></TR>
</TABLE>,
а вот так она будет выглядеть на странице без рамки:
ячейка 1.1ячейка 1.2
ячейка 2.1ячейка 2.2

и с рамкой:
ячейка 1.1ячейка 1.2
ячейка 2.1ячейка 2.2

   По умолчанию таблица выравнивается по левому краю страницы. Для изменения ее положения существует параметр ALIGN=, который может принимать значения LEFT, CENTER, RIGHT. Примеры:
ячейка 1.1ячейка 1.2
ячейка 2.1ячейка 2.2
- таблица, выровненная по центру,
ячейка 1.1ячейка 1.2
ячейка 2.1ячейка 2.2
и таблица, выровненная по правому краю:
   Рассмотрим еще несколько самых употребляемых параметров тега <TABLE>.
   Параметр BGCOLOR="" задает цвет ячеек таблицы. Наша таблица с этим параметром, имеющим значение #C0C0C0, будет иметь вид:
ячейка 1.1ячейка 1.2
ячейка 2.1ячейка 2.2

Кстати, внутри таблиц действуют все теги форматирования текста и шрифтов, так что мы можем представить свою таблицу в таком виде:
ячейка
1.1		ячейка 1.2

ячейка 2.1

ячейка 2.2
   Как правило, браузер сам определяет как размеры таблицы в целом, так и размеры отдельных ячеек, учитывая множество фактов: размер окна браузера, количество и качество материала в каждой отдельной ячейке и т.д. Но, при необходимости мы можем принудительно задать размеры таблицы в процентах от размера окна или пикселях. Для этого существуют параметры WIDTH=" " - задает ширину таблицы и HEIGHT=" " - задает высоту таблицы. При употреблении этих параметров Вы должны сами следить за соответствием размеров таблицы и ее содержания. Например, всем, кто решится поместить свои странички на серверы народ.ру или боом.ру, придется, для того, чтобы оставить место под баннеры серверов, включить в тело своих страниц сразу за тегом BODY таблицу с таким, приблизительно, кодом:
<TABLE ALIGN=LEFT WIDTH="80%" HEIGHT="150">
<TR><TD></TD></TR>
</TABLE>
Тогда у Вас в правом верхнем углу будет всегда оставаться свободное место шириной 20% от окна и высотой 150 пикселей, где как раз очень удобно будет помещаться этот баннер за бесплатность хостинга. Причем эту таблицу не обязательно оставлять пустой - в нее можно поместить кучу всякой, полезной и не очень, информации, например вступительное слово, меню или те же счетчики всевозможных рейтингов, если Вы захотите в них участвовать.
   Параметр CELLSPACING= - определяет расстояние между смежными ячейками таблицы. Значение параметра задается в пикселях.
   Параметр CELLPADDING= - определяет расстояние между рамкой ячейки и данными внутри ячейки. Значение параметра задается в пикселях. Не подумайте, что этот параметр работает только в таблицах с рамками. Если не задан параметр BORDER, отступ делается от воображаемой рамки.
   Впрочем, воздействие всех этих параметров на вид таблицы лучше всего изучать на практике. Потренируйтесь в создании таблиц, порисуйте их много, разных, употребляя разные параметры и их значения, и Вы наглядно увидите, что на что влияет. Для тех, кто работает с редактором SNK Visual HTML Workshop, напомню, что доступ к "Мастеру построения таблиц" и панели автоматической вставки тегов таблиц Вы получите, нажав на кнопку "Таблицы".
   Таблицы - очень мощный и довольно сложный инструмент построения страниц и в одной статье не удастся рассмотреть всех хитростей его применения, поэтому мы еще вернемся к этой теме, и, может быть, не один раз. А пока, в заключение, еще два тега, относящиеся к таблицам:
  • Тег <CAPTION>...</CAPTION> - тег заголовка таблицы. Все помещенное внутрь этого тега выводится как заголовок таблицы. Имеет параметр ALIGN=, который может принимать значения TOP - заголовок располагается над таблицей и BOTTOM - заголовок располагается под таблицей.
  • Тег <TH>...</TH> - аналогичен тегу <TD>...</TD> (создает ячейку), но данные, помещенные в него, выводятся полужирным шрифтом.
   Остается только добавить, что количество столбцов не может быть разным в разных строчках одной таблицы, а если Вы все же в одной или нескольких строках вставите меньше тегов <TD>, чем в других, браузер сам дорисует недостающие ячейки (оставив их пустыми).
   Теперь нам осталось рассмотреть вставку на страницы рисунков и ссылок на другие ресурсы и документы - и, можно считать, что первый этап построения собственной интернет-страницы закончен. Конечно, останется еще много чего: скрипты, сценарии, карты, фреймы, звук и пр., и пр. - но это все вещи желательные, но не обязательные.
   Вы всегда можете обратиться с интересующим Вас вопросом к автору, т.е. ко мне, а может быть ответ уже есть на сайте.
    Всего Вам доброго.
   Сергей Червонящий.
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное