HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - [7]

Шрифт
Интервал

Рассмотренные нами теги

и

в HTML фактически считаются одним тегом

. Такой тег называется парным.

Поехали дальше. Парный тег

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

Парный тег выводит свое содержимое полужирным шрифтом. Как мы видим, тег вложен внутрь содержимого тега

. Это значит, что содержимое тега будет отображаться как часть абзаца (тега

).

Давайте ради интереса выделим слова "Web-дизайном" курсивом. Для этого поместим соответствующий фрагмент текста абзаца в парный тег :

Приветствуем на нашем Web-сайте всех, кто занимается

Web-дизайном! Здесь вы сможете найти информацию обо всех

.

Сохраним исправленную Web-страницу и обновим содержимое окна Web-обозревателя, нажав клавишу . Получилось! Да мы уже стали Web-дизайнерами!

Осталось рассмотреть важнейшие правила, согласно которым пишется HTML-код.

— Имена тегов можно писать как прописными (большими), так и строчными (малыми) буквами. Традиционно в языке HTML имена тегов пишут прописными буквами.

— Между символами <, >, / и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк.

— В обычном тексте, не являющемся тегом, не должны присутствовать символы < и >. (Эти символы называют недопустимыми.) В противном случае Web- обозреватель сочтет фрагмент текста, где встречается один из этих символов, тегом и отобразит Web-страницу некорректно.

На этом пока закончим. Впоследствии, изучив другие языковые элементы HTML, мы пополним список этих правил.

Вложенность тегов

Если мы снова посмотрим на приведенный в листинге 1.2 фрагмент HTML-кода, то заметим, что одни теги вложены в другие. Так, тег вложен в тег

, являясь частью его содержимого. Тег

, в свою очередь, вложен в тег , а тот — в "глобальный" тег . (Теги и мы рассмотрим чуть позже.) Такая вложенность тегов в HTML — обычное явление.

Когда Web-обозреватель встречает тег, вложенный в другой тег, он как бы накладывает действие "внутреннего" тега на эффект "внешнего". Так, действие тега будет наложено на действие тега

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

Давайте для примера текст "Web-дизайн", который мы недавно поместили в тег , заключим еще и в тег . Вот так:

Приветствуем на нашем Web-сайте всех, кто занимается

Web-дизайном! Здесь вы сможете найти

.

В этом случае данный текст будет выделен полужирным курсивом. Иными словами, действие тега будет наложено на действие тега .

Теперь — внимание! Порядок следования закрывающих тегов должен быть обратным тому, в котором следуют теги открывающие. Говоря иначе, теги со всем их содержимым должны полностью вкладываться в другие теги, не оставляя "хвостов" снаружи.

Если же мы нарушим это правило и напишем такой HTML-код (обратите внимание на специально перепутанный порядок следования открывающих тегов):

Приветствуем на нашем Web-сайте всех, кто занимается

Web-дизайном! Здесь вы сможете найти

.

Web-обозреватель может отобразить нашу Web-страницу неправильно.

НА ЗАМЕТКУ

Нужно сказать, что современные Web-обозреватели "умеют" исправлять мелкие ошибки Web-дизайнера. Но именно мелкие!

Осталось выучить несколько новых терминов. Тег, в который непосредственно вложен данный тег, называется родительским, или родителем. В свою очередь, тег, вложенный в данный тег, называется дочерним, или потомком. Так, для тега в приведенном далее примере тег

— родительский, а тег — дочерний. Любой тег может иметь сколько угодно дочерних тегов, но только один родительский (что, впрочем, понятно — не может же он быть непосредственно вложен одновременно в два тега).

Элемент Web-страницы, в который вложен элемент, создаваемый данным тегом, называется родительским, или родителем. А элемент Web-страницы, который вложен в данный элемент, — дочерним, или потомком. То же самое, что и в случае тегов.

Уровень вложенности того или иного тега показывает количество тегов, в которые он последовательно вложен. Если принять за точку отсчета тег

, то тег будет иметь первый уровень вложенности, т. к. он вложен непосредственно в тег

. Тег же будет иметь второй уровень вложенности, поскольку он вложен в тег , а тот, в свою очередь, — в тег

. В сложных же Web-страницах уровень вложенности иных тегов может составлять несколько десятков.

Уровень вложенности тегов в HTML-коде обозначают с помощью отступов, которые ставят слева от соответствующего тега и создают с помощью пробелов (листинг 1.3). На отображение Web-страницы они никак не влияют.

Листинг 1.3

Справочник по HTML

Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке HTML.


Еще от автора Владимир Александрович Дронов
Macromedia Flash Professional 8. Графика и анимация

Подробно, доступно и с юмором рассматривается создание современной интернет-графики и анимации с помощью пакета Macromedia Flash Professional 8. Описываются основные инструменты рисования и правки графики, использование слоев, образцов и библиотек, работа с текстом, импорт графики, видео и звука. Рассмотрен процесс производства фильмов стандартными, и весьма богатыми, средствами Flash. Также приводятся краткое описание встроенного языка программирования Flash — Action Script — и методика его применения для разработки интерактивных элементов.


Рекомендуем почитать
Нормы русского литературного языка

Настоящее пособие помогает формированию и совершенствованию у студентов умений и навыков произношения, словоупотребления, использования грамматических форм, правописания и постановки знаков препинания. Предназначено как для практических аудиторных занятий, так и для самостоятельной работы.Для студентов, изучающих курсы «Русский язык и культура речи», «Культура речи», «Стилистика русского языка и культура речи», «Стилистика и литературное редактирование» и др. Данное пособие может быть использовано также выпускниками средних школ и абитуриентами при подготовке к Единому государственному экзамену по русскому языку.


Сочинения гр. А. К. Толстого как педагогический материал. Часть 2. Эпические мотивы

«Лирика обладает одним несомненным преимуществом перед другими родами поэзии: она лучше всего освещает нам личный мир поэта, ту сферу, которую выделяет для него в широком Божьем мире его темперамент, обстановка, симпатии, верования; она показывает степень отзывчивости поэта; т.е. его способности переживать разнородные душевные состояния: она часто открывает нам уголки поэтической деятельности, где живут не оформившиеся еще образы, задатки для определенных фигур эпоса и драмы. В эпосе и драме образы становятся разнообразнее и пестрее, но вместе с тем славятся объективнее, особенно в драме…».


Уголовное право. Особенная часть

В книге кратко изложены ответы на основные вопросы темы «Уголовное право. Особенная часть». Издание поможет систематизировать знания, полученные на лекциях и семинарах, подготовиться к сдаче экзамена или зачета.Пособие адресовано студентам высших и средних образовательных учреждений, а также всем интересующимся данной тематикой.


Самоучитель Adobe After Effects 6.0

Обучение созданию профессиональных видеофильмов и обработки их на компьютере представлено в виде 12 уроков. Рассматривается, как с помощью программы Adobe After Effects можно редактировать и рисовать последовательность кадров, добавлять титры и заголовки, применять различные видеоэффекты, редактировать звуковое сопровождение фильма. Описывается процесс настройки прозрачности и наложения слоев видео для последующего экспорта фильма в различных форматах. Показываются способы создания анимации при масштабировании, поворотах и в движении с наложением титров и спецэффектов.


Финансовое право

В учебном пособии в краткой и доступной форме рассмотрены все основные вопросы, предусмотренные государственным образовательным стандартом и учебной программой по дисциплине «Финансовое право».Книга позволит быстро получить основные знания по предмету, а также качественно подготовиться к зачету и экзамену.Рекомендуется студентам, аспирантам и преподавателям по юридическим, экономическим и управленческим специальностям, а также сотрудникам банков.Автор книги, Шевчук Денис Александрович, имеет опыт преподавания различных дисциплин в ведущих ВУЗах Москвы (экономические, юридические, технические, гуманитарные), два высших образования (экономическое и юридическое), более 30 публикаций (статьи и книги), Член Союза Юристов Москвы, Член Союза Журналистов России, Член Союза Журналистов Москвы, Стипендиат Правительства РФ, опыт работы в банках, коммерческих и государственных структурах (в т.ч.


Следственные действия: психология, тактика, технология

Книга посвящена правовым, психологическим и криминалистическим основам следственных действий как процессуальных способов доказывания по уголовным делам. Рассмотрены общая характеристика следственного действия, психологические условия и приёмы повышения их эффективности, даны рекомендации по подготовке и проведению отдельных видов основных следственных действий, регламентируемых ныне действующим УПК РФ.Для работников правоохранительных органов, студентов, аспирантов, докторантов, профессорско-преподавательского состава юридических учебных заведений.