Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Интернет-магазин под ключ

Статьи для сайтов!!!
Главная Теги HTML HTML по шагам Еще несколько тегов... Немного о языке HTML


Еще несколько тегов HTML

Div Span Marquee <!-- --> Hr

Теги div и span
Бегущая строка в HTML
Комментарий в HTML
Горизонтальная линия
Специальные символы в HTML


Рассмотрим еще несколько тегов, которые я не отнес ни к одной из пройденных тем. Некоторые из них очень часто используются, и без них вряд ли кто-то обходится, другие не так востребованы и поэтому применяются и встречаются реже.

Теги div и span

Теги <div> и <span> в чем-то схожи друг с другом, но на самом деле разница между ними достаточно велика.

Оба тега используются для выделения фрагмента страницы, вид содержимого которого задается и изменяется при помощи стилей.

Разница же между ними в том, что тег <div> - это блочный элемент, а тег <span> - строчный. О блочных и строчных элементах (подробнее здесь...).

Тег <div> - это блок, контейнер. Можно не только менять вид содержимого этого контейнера, но и перемещать его вместе с содержимым в пределах документа. Он может заключать в себе несколько абзацев, оформленных определенным образом и размещенных в определенном месте страницы.

Тег <span> в основном используется для выделения и изменения фрагмента текста, например, внутри абзаца (тег <p>) или внутри тега <div>.

Сами по себе (без применения стилей) теги <span> и <div> не имеют никакого смысла, кроме того что последний образует самостоятельный абзац.

<p> Выделим два фрагмента текста внутри текущего абзаца. Один из них
<span style="color:#FF0000; border:#66CCFF solid 1px; padding:10px;"> строчный </span> элемент, а другой - <div style="color:#FF0000; border:#66CCFF solid 1px; padding:10px;"> блочный! </div> </p>

<div style="width
:300px; height:80px; border:#00CC00 dotted 3px; margin:10px; color:#9933CC;">
<p>
Заключим в контейнер 2 абзаца. </p>
<p>
И зададим для всего блока оформление! </p>
</div>

Выделим два фрагмента текста внутри текущего абзаца. Один из них строчный элемент, а другой -

блочный!

Заключим в контейнер 2 абзаца.

И зададим для всего блока оформление!

Бегущая строка

Многие из Вас наверняка на страницах различных сайтов видели проплывающий по горизонтали/вертикали текст или изображение. И, возможно, у некоторых из Вас возникал вопрос: как это работает?

Ответ на этот вопрос прост, и состоит он в том, что все это делает один тег - тег <marquee> - он создает бегущую строку.

У тега <marquee> немало атрибутов, позволяющих задать строке и ее содержимому различные свойства:

- атрибуты height и width позволяют задать высоту и ширину строки в пикселях или в процентах;

- атрибуты hspace и vspace устанавливают отступы по горизонтали и вертикали от бегущей строки до других элементов страницы в пикселях;

- фоновый цвет строки задает атрибут bgcolor;

- характер перемещения содержимого бегущей строки зависит от значения атрибута behavior;

- направление движения содержимого бегущей строки определяет атрибут direction;

- атрибут loop устанавливает количество прокруток содержимого бегущей строки;

- атрибут scrollamount задает скорость перемещения содержимого бегущей строки;

- время задержки между движениями содержимого бегущей строки в миллисекундах определяется атрибутом scrolldelay.

<p>
<marquee width=
"650" height="20" bgcolor="#33FF99" scrollamount="8"> Бегущая строка............... </marquee>
</p>

Бегущая строка...............

Комментарий в HTML

Комментарий - это текст, который не отображается на странице при ее просмотре в браузере, но виден в исходном коде.

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

Комментарий в HTML заключен между символами <!-- и -->. Как уже было сказано - комментарий в браузере не отображается, поэтому им пользоваться очень удобно!

<p>
Пример комментария: <!-- Здесь место для рекламы -->
</p>

Пример комментария:

В примере Фрагмент кода: проиллюстрирован фрагмент html-кода в том стиле, какого я придерживаюсь во всех примерах на этой и других страницах. А на самом деле комментарий в коде выглядит вот так: <!-- Комментарий --> - он светло-серого цвета. Ну а в браузере Вы ничего не увидите!

Горизонтальная линия

Горизонтальная линия вставляется на страницу при помощи тега <hr>.

В основном горизонтальная линия играет роль некоего декоративного элемента. В каком месте страницы вставить линию и использовать ли ее вообще - решать Вам.

По умолчанию горизонтальная линия занимает ширину всего свободного пространства, имеет толщину 2 пикселя и отображается объемной. Эти параметры можно менять при помощи следующих атрибутов тега <hr>:

- width - задает ширину линии в пикселях или процентах;

- size - задает толщину линии в пикселях;

- noshade - отменяет эффект трехмерности линии;

Атрибут color, задающий цвет горизонтальной линии, также отменяет эффект трехмерности. Цвет можно задать двумя способами (подробнее здесь...).

И последний атрибут тега <hr> - align используется для выравнивания линии по горизонтали. Он имеет смысл, если ширина линии меньше ширины окна браузера или ширины родительского элемента. В этом случае линию можно расположить слева, справа или по центру.

<p>
<hr color=
"#CC0000">
<hr size=
"10" width="300" align="right">
<hr size=
"10" width="300" noshade>
<hr size=
"10" width="300" color="#009900" align="left">
</p>





Специальные символы в HTML

Как-то, когда я еще сам изучал HTML, у меня возник вопрос: Как написать в тексте какой-либо тег, например, <p> - тег обозначающий абзац, но чтобы браузер не воспринимал его как начало нового абзаца, а ради того, чтобы привести пример написания данного тега?

То есть необходимо было в исходном коде заменить знаки «меньше чем» - < и «больше чем» - > чем-то другим. Чем?

Для этого в HTML существуют специальные символы:

- символ &lt; написанный в исходном коде, в браузере выдаст знак «меньше чем» - <;

- символ &gt; - при просмотре в браузере выдает знак «больше чем» - >.

Еще один вопрос, который часто встает перед начинающими разработчиками - как поставить несколько пробелов между словами?

Все дело в том, что при написании текста в исходном коде, между словами можно устанавливать любое количество пробелов. Но при просмотре в браузере все эти пробелы будут представлены одним.

Для того, чтобы в браузере отобразить несколько пробелов между словами или, например, установить красную строку, придуман специальный символ &nbsp; - неразрывный пробел. Этот символ воспринимается браузером как знак, но он не виден пользователю.

Несколько символов &nbsp;, неразрывно следующих друг за другом, будут отображены в браузере как соответствующее число пробелов.

Рассмотрим еще один специальный символ &quot; - это кавычки. Где-то я слышал или читал (уже не помню), что для обозначения кавычек в исходном коде лучше использовать данный символ, так как кавычки в коде служат для другой цели, например, для заключения в них атрибутов тегов.

Но я думаю, что для спецификации HTML 4.01 не критично, заключите ли Вы какое-либо слово в исходном коде между символами &quot; или установите обыкновенные кавычки,- результат в браузере будет одинаков. А пользоваться в коде обыкновенными кавычками "куда удобнее".

Как Вы наверное заметили все специальные символы в HTML начинаются с амперсанда - знака &. Для этого знака в HTML также существует свой спецсимвол - &amp;.

Тег &lt;br&gt; - служит для переноса строки.
Пример использования&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;неразрывного пробела.
&quot;
Кавычки в HTML&quot;
И амперсанд &amp;.

Тег <br> - служит для переноса строки.
Пример использования     неразрывного пробела.
"Кавычки в HTML"
И амперсанд &.

Пожалуй, это все специальные символы, которые Я рассмотрю в рамках этой статьи. На самом деле спецсимволов в HTML множество, и если эта тема Вам интересна, то Вы без труда найдете на нее более подробную информацию в сети Интернет.

И на этом закончим знакомство с языком разметки гипертекста HTML!
Спасибо за внимание. Я рад, если в чем-то Вам помог!

Голова документа Еще несколько тегов... Немного о языке HTML
HTML по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru