Еще несколько тегов HTML - Горизонтальная линия и Специальные символы

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



Теги div и span

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На этом заканчивается знакомство с языком разметки гипертекста HTML.
Спасибо за внимание.