belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
HTML >>>

2.4. Элементы 'span', 'div'. Понятие блочной верстки

Данные элементы представляют собою обобщенные, универсальные контейнеры, первый из которых отображается браузером как строчный элемент, а второй – как блочный. Другого логического смысла они не имеют. Оба элемента формируются парными тегами, соответственно, <span> (от англ. span) и <div> (от англ. division).

Элемент 'span' в основном применяется для выделения небольших фрагментов текста, рисунков или даже отдельных символов и букв, для которых применение тегов с каким-то логическим смыслом нецелесообразно. Например, если нам нужно выделить слово зеленым цветом, но оно не имеет особой смысловой нагрузки и важности, то нецелесообразно применять для этого, скажем, элемент 'strong', который подразумевает важность своего содержимого и, кроме того, отображает свое содержимое полужирным шрифтом. А вот элемент 'span' сам по себе свое содержимое никак не изменяет, но зато легко объединяется со стилями CSS через атрибуты style, class или id, позволяя делать с ним практически все, что пожелает разработчик. Использование элемента 'span' показано в примере 2.5.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Элемент 'span'</title>
</head>
<body>
	<p title="Применение универсального элемента 'span'">
		<!-- Вспоминаем мнемоники. Здесь вставили среднее тире.-->
		Я &ndash; абзац. 
		<span style="color: blue">А я &ndash; синее предложение в нем.<span>
	</p>
</body>
</html>

Пример 2.5. Использование элемента 'span'

Элемент 'div' является универсальным блочным элементом. Поэтому он применяется для изменения внешнего вида целых блоков веб-документа, для которых применение тегов с каким-то логическим смыслом нецелесообразно. Также, как и элемент 'span', он свое содержимое никак не изменяет, но легко объединяется со стилями CSS через атрибуты style, class или id, являясь по сути аналогом элемента 'span', но только среди блочных элементов. Например, пусть у нас есть два абзаца: первый абзац написан текстом синего цвета, а второй – красного. Теперь мы захотели, чтобы текст обоих абзацев был размещен на желтом фоне. Для этого разместим их внутри элемента 'div', у которого фон имеет желтый цвет (см. пример 2.6).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Элемент 'div'</title>
</head>
<body>
	<div style="background-color: yellow">
		<p style="color: blue">
			Первый абзац с шрифтом синего цвета.
		</p>
						
		<p style="color: red">
			Второй абзац с шрифтом красного цвета. 
		</p>
	</div>
</body>
</html>

Пример 2.6. Использование элемента 'div'

Следует отметить, что использование элемента 'div' приобрело настолько широкое применение, что появилось даже понятие блочной верстки, которое как раз и подразумевает активное использование элемента 'div' в качестве универсального компонента. Ведь благодаря универсальности элемента и простоте управления им через стили CSS, появляется возможность разбивать верстку веб-страницы на ряд компактных и, соответственно, легче редактируемых блоков 'html'-кода, которые при отображении браузером собираются вместе в нужной последовательности и формируют окончательный внешний вид страницы. Таким образом, веб-документ представляется блоками 'div' в виде этаких "строительных кирпичиков", переставляя которые с места на место, можно легко изменять внешний вид страницы по своему усмотрению.

Злоупотреблять использованием элементов 'div' не стоит. Всему должна быть своя мера и свое место. Например, в случае, рассмотренном выше, было бы весьма нелогично применить элемент 'p' вместо элемента 'div', поскольку "абзац в абзаце" явно не укладывается в наши представления о форматировании текста. Однако и замена элементов 'Абзац' на элементы 'div', также не имеет логического смысла. Мы бы просто физически разделили текст на два блока. Но это еще ладно, а если бы мы заменили заголовки на элементы 'div'? Как бы поисковые машины определяли важность соответствующих блоков? Поэтому, повторимся, всему должна быть своя мера и свое место. Нужно учиться в разумных пропорциях сочитать логическую разметку и простое физическое деление 'html'-кода документа.

Контрольные вопросы и задания

  1. Для чего используется элемент 'span'?
  2. Для чего используется элемент 'div'? В чем заключается процесс блочной верстки?

Словарь новых английских слов

word [wə:d] – слово.
break [breɪk] – разрыв, прекратить.
opportunity [,ɔpə'tju:niti] – возможность,
удобный случай.
division [di'viʒən] – раздел, разделение.
bold [bəuld] – жирный.
italic [i'tælik] – курсив, наклонный.
underline [ˌʌndəˈlaɪn] – подчеркнуть.
strike out [strʌɪk ˈaut] – вычеркивать.
subscript [ˈsʌbskrɪpt] – нижний индекс.
superscript [ˈsuːpəskrɪpt] – верхний индекс.
emphasis [ˈɛmfəsɪs] – акцент, выделение.
strong [strɔɳ] – сильный, прочный.
variable ['vɛəriəbl] – переменная.
sample ['sa:mpl] – образец.
definition [defi'ni∫ən] – определение.
quote [kwəut] – цитата.
insert [ɪnˈsɜːt] – вставлять.
reversed [rɪˈvɜːst] – перевернутый, обратный.
ordered [ˈɔːdəd] – упорядоченный, нумерованный (список).
unordered [ʌnˈɔːdəd] – маркированный (список).
description [dis'krip∫ən] – описание.
row [rou] – строка, ряд.
column ['kɔləm] – столбец, колонка.
cell [cel] – ячейка, элемент, клетка.
table ['teibl] – таблица, стол.
row span – диапазон строк.
column span – диапазон столбцов.
self [self] – сам.
parent ['pɛərənt] – родитель.
blank [blæɳk] – чистый, пустой, бланк.
anchor ['æɳkə] – якорь, привязка.
link [link] – связь, ссылка.
foot [fut] – нижнее поле, ступня.
header ['hedə] – заголовок, верхний колонтитул.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх