Рассылка закрыта
При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Самоучитель по HTML и CSS - 5
Самоучитель по HTML и CSS
Добрый день. Как обычно, начнем с ответов на вопросы предыдущего выпуска. 1.Это комментарий к коду, поэтому он не выводится. 2. <TITLE> 3. Код HTML не пройдет валидацию. 4. Содержат служебные параметры веб-страницы. Если вам не понятно, о чем идет речь, посмотрите предыдущий выпуск рассылки, в конце даются вопросы для проверки. А сегодня поговорим о типах тегов, более подробное описание которых вы можете найти по адресу htmlbook.ru/html/ 5. Типы теговКаждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей. Условно теги делятся на следующие типы:
Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги <OL> и <UL> относятся к категории списков, но также являются и блочными элементами. Далее рассмотрим только те теги, которые потребуются нам в дальнейшей работе. Теги верхнего уровняЭти теги предназначены для формирования структуры веб-страницы и определяют раздел заголовка и тела документа. <HTML>Тег <HTML> является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги <HEAD> и <BODY>. Открывающий и закрывающий теги <HTML> в документе необязательны, но хороший стиль диктует непременное их использование. <HEAD>Тег <HEAD> предназначен для хранения других элементов, цель которых - помочь браузеру в работе с данными. Также внутри контейнера <HEAD> находятся метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. <BODY>Элемент <BODY> предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <BODY>. К такой информации относится текст, изображения, таблицы, списки и др. Набор тегов верхнего уровня и порядок их вложения показан в листинге 5.1. Листинг 5.1. Теги верхнего уровня <html> В данном примере показано, что контейнер <HTML> определяет "каркас" всей веб-страницы, внутри него вначале задается тег <HEAD>, затем идет контейнер <BODY>, в нем хранится содержательная часть документа, которая и отображается в браузере. Теги <HTML> и <BODY> хотя и не относятся к обязательным тегам (т. е. их можно не размещать в коде), все же стоит добавлять всегда. Это позволяет получить четкую и понятную структуру документа. Заметьте, что в листинге не упоминается <!DOCTYPE>, поскольку этот обязательный элемент кода веб-страницы не является тегом, а предназначен для браузеров, чтобы сообщить им, как интерпретировать текущий документ. Теги заголовка документаК этим тегам относятся элементы, которые располагаются в контейнере <HEAD>. Все эти теги напрямую не отображаются в окне браузера, за исключением тега <TITLE>, который определяет название веб-страницы. <TITLE>Используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик. <META>Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег <META> всего один, он имеет массу параметров, поэтому к нему и применяется множественное число. Так, для краткого описания содержимого веб-страницы используется значение description параметра name, как показано в листинге 5.2. Листинг 5.2. Использование description <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Описание сайта, заданное с помощью тега <META> и параметра description, обычно отображается в поисковых системах или каталогах при выводе результатов поиска. Значение keywords также предназначено в первую очередь для повышения рейтинга сайта в поисковых системах. В качестве аргумента перечисляются ключевые слова, встречаемые на веб-странице (листинг 5.3). Листинг 5.3. Использование keywords <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют. Блочные элементыБлочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. <BLOCKQUOTE>Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу. <DIV>Тег <DIV> относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств. Также с помощью тега <DIV> можно выравнивать текст внутри этого контейнера с помощью параметра align. <H1>...<H6>Эта группа тегов определяет текстовые заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка. <HR>Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. <P>Определяет параграф (абзац) текста. <PRE>Задает блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. В HTML любое количество пробелов идущих в коде подряд на веб-странице показывается как один. Тег <PRE> позволяет обойти эту особенность и отображать текст как требуется разработчику. Следующие теги не должны размещаться внутри контейнера <PRE>: <BIG>, <IMG>, <SMALL>, <SUB> и <SUP>. Встроенные элементыВстроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения. <A>Тег <A> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег <A> устанавливает ссылку или якорь. <B>Определяет жирное начертание шрифта. <BIG>Тег <BIG> увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <BIG> увеличивает текст на одну условную единицу. <BR>Тег <BR> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <P>, использование тега <BR> не добавляет пустой отступ перед строкой. <EM>Тег <EM> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием. <I>Устанавливает курсивное начертание шрифта. <IMG>Тег <IMG> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <IMG> в контейнер <A>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border="0" в тег <IMG>. <SMALL>Тег <SMALL> уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег <BIG>, но действует с точностью до наоборот. <SPAN>Универсальный тег, предназначенный для определения встроенного элемента внутри документа. <STRONG>Тег <STRONG> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием. <SUB>Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера - H2O. <SUP>Отображает шрифт в виде верхнего индекса. По своему действию похож на <SUB>, но текст отображается выше базовой линии текста - м2. Разница между блочными и встроенными элементами следующая.
Универсальные элементыОсобенность этих тегов состоит в том, что они в зависимости от контекста могут использоваться как блочные или встроенные элементы. <DEL>Тег <DEL> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <DEL> как перечеркнутый. <INS>Тег <INS> предназначен для акцентирования вновь добавленного текста и обычно применяется наряду с тегом <DEL>. Браузеры помечают содержимое контейнера <INS> подчеркиванием текста. СпискиСписком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде. <OL>Тег <OL> устанавливает нумерованный список, т.е. каждый элемент списка начинается с числа или буквы и увеличивается по нарастающей. <UL>Устанавливает маркированный список, каждый элемент которого начинается с небольшого символа - маркера. <LI>Тег <LI> определяет отдельный элемент списка. Внешний тег <UL> или <OL> устанавливает тип списка - маркированный или нумерованный. <DD>, <DT>, <DL>Тройка элементов предназначена для создания списка определений. Каждый такой список начинается с контейнера <DL>, куда входит тег <DT> создающий термин и тег <DD> задающий определение этого термина. Закрывающий тег </DD> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги. ТаблицыТаблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления табличных данных. <TABLE>Служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <TR> и <TD>. <TD>Предназначен для создания одной ячейки таблицы. Тег <TD> должен размещаться внутри контейнера <TR>, который в свою очередь располагается внутри тега <TABLE>. <TH>Тег <TH> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. <TR>Тег <TR> служит контейнером для создания строки таблицы. ФреймыФреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега <FRAME>. С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Допустимо также использовать вложенную структуру элементов, это позволяет дробить фреймы на более мелки области. <FRAME>Тег <FRAME> определяет свойства отдельного фрейма, на которые делится окно браузера. <FRAMESET>Тег <FRAMESET> заменяет собой элемент <BODY> на веб-странице и формирует структуру фреймов. <IFRAME>Тег <IFRAME> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы. Вопросы для проверки1. К какому типу относится тег <P>?
2. Для чего нужны ключевые слова, задаваемые через тег <META>?
3. Какой из приведенных тегов запрещено размещать внутри контейнера <PRE>?
4. Какая ошибка содержится в следующей строке?
5. Кате надо на веб-странице отобразить текст со всеми пробелами. Какой тег для этой цели она должна использовать?
Задания1. Оформите в виде веб-страницы следующий текст. Юность, верность, красота, Феникс умер, и она Не бесплоден был, о нет, Если верность иль - увы! - Уильям Шекспир, пер. В. Левика 2. Исправьте ошибки в приведенном коде <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3. Создайте веб-страницу, представленную на рис. 5.1, используя теги <DEL> и <INS>.
Рис. 5.1 Рецепты CSSОтветы на типовые вопросы по CSS можно прочитать по адресу htmlbook.ru/faq/ Хочу изменить цвет первой буквы в каждом абзаце. Что мне для этого надо сделать?Удобнее всего воспользоваться стилевым псевдоэлементом first-letter, добавляя его к селектору P. В стилях вначале указывается селектор, затем через двоеточие first-letter, после чего в фигурных скобках пишется желаемый параметр color и его значение. Пример 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> В данном примере псевдоэлемент first-letter применяется для изменения цвета первой буквы. Аналогично можно изменить размер символа и шрифт и получить таким образом выступающий инициал. Пример 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
|
| В избранное | ||
