«Единственный способ творить великие дела – это любить то, что ты делаешь»
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>
Результат

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

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

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

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

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

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

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

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

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

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

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

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

Фрагмент кода
<marquee width="650" height="20" bgcolor="#33FF99" scrollamount="8"> Бегущая строка............... </marquee>
Результат

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фрагмент кода
<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">
Результат

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


HTML по шагам

Все теги HTML