Категории
Меню
Лучшие книги » Справочная литература » Прочая справочная литература » HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов

HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов

Читать онлайн HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 ... 3 4 5 6 7 8 9 10 11 ... 86
Перейти на страницу:

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

Правила отображения текста абзаца Web-обозревателем:

— два и более следующих друг за другом пробела считаются за один пробел;

— перевод строки считается за пробел;

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

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

Настало время попрактиковаться. Давайте создадим главную Web-страницу нашего первого Web-сайта — справочника по HTML и CSS. Откроем Блокнот и наберем в нем HTML-код, приведенный в листинге 2.1.

Листинг 2.1

<!DOCTYPE html>

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

<TITLE>Справочник по HTML и CSS</TITLE>

</HEAD>

<BODY>

<P>Справочник по HTML и CSS</P>

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

<P>Русская Википедия определяет термин HTML так:</P>

<P>HTML (от англ. HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине.</P>

<P>Пожалуй, ни убавить ни прибавить…</P>

<P>HTML позволяет формировать на Web-страницах следующие элементы:</P>

<P>абзацы;</P>

<P>заголовки;</P>

<P>цитаты;</P>

<P>списки;</P>

<P>таблицы;</P>

<P>графические изображения;</P>

<P>аудио- и видеоролики.</P>

<P>Основные принципы HTML</P>

<P>. </P>

<P>Теги HTML</P>

<P>!DOCTYPE, BODY, EM, HEAD, HTML, META, P, STRONG, TITLE</P>

</BODY>

</HTML>

Пока это только заготовка для главной Web-страницы. Позднее мы будем дополнять и править ее.

Создадим папку, куда будем "складывать" файлы, составляющие наш Web-сайт. И сохраним в этой папке набранный HTML-код, дав файлу имя index.htm. Как мы помним из главы 1, файл главной Web-страницы Web-сайта должен иметь имя index.htm[l] (или default.htm[l], но это встречается реже).

ВНИМАНИЕ!

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

Сразу же откроем созданную Web-страницу в Web-обозревателе — так мы сразу сможем определить, нет ли ошибок. Если ошибки все-таки есть, исправим их.

Пока что наша Web-страничка содержит одни абзацы. Первое, что мы должны в нее добавить, — это…

Заголовки

Помимо абзацев, большой текст для удобства чтения и поиска в нем нужного фрагмента обычно делят на более крупные части: параграфы, главы, разделы. HTML не предоставляет средств для такого структурирования текста. Но он позволяет создать заголовки, которые делят текст на части, по крайней мере, визуально. Как в обычной "бумажной" книге.

Прежде всего, уясним, что в HTML есть понятие уровня заголовка, указывающее, насколько крупную часть текста открывает данный заголовок. Всего таких уровней шесть, и обозначаются они числами от 1 до 6.

— Заголовок первого уровня (1) открывает самую крупную часть текста. Как правило, это заголовок всей Web-страницы. Web-обозреватель выводит заголовок первого уровня самым большим шрифтом.

— Заголовок второго уровня (2) открывает более мелкую часть текста. Обычно это большой раздел. Web-обозреватель выводит заголовок второго уровня меньшим шрифтом, чем заголовок первого уровня.

— Заголовок третьего уровня (3) открывает еще более мелкую часть текста; обычно главу в разделе. Web-обозреватель выводит такой заголовок еще меньшим шрифтом.

— Заголовки четвертого, пятого и шестого уровней (4–6) открывают отдельные параграфы, крупные, более мелкие и самые мелкие соответственно. Web- обозреватель выводит заголовки четвертого и пятого уровня еще меньшим шрифтом, а заголовок шестого уровня — тем же шрифтом, что и обычные абзацы, только полужирным.

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

Для создания заголовка HTML предоставляет парный тег <Hn>, где n — уровень заголовка. Содержимое этого тега станет текстом заголовка (листинг 2.2).

Листинг 2.2

<H1>Я — заголовок Web-страницы, самый главный</H1>

<H2>Я — заголовок раздела</H2>

<H3>Я — заголовок главы</H3>

<H4>Я — заголовок крупного параграфа</H4>

<H5>Я — заголовок параграфа поменьше</H5>

<H6>А я — заголовок маленького параграфа. Ой, какие все вокруг большие!..</H6>

Заголовок также относится к блочным элементам Web-страницы. При его выводе на экран Web-обозреватель следует тем же правилам, что и для абзаца.

Заголовки — это то, чего не хватает нашей Web-страничке index.htm. Давайте их добавим (листинг 2.3).

Листинг 2.3

<H1>Справочник по HTML и CSS</H1>

.

<H2>Основные принципы HTML</H2>

.

<H2>Теги HTML</H2>

Мы просто заменили теги <P> в соответствующих фрагментах HTML-кода на теги

<H1> и <H2>. Теперь можем открыть Web-страницу в Web-обозревателе и посмотреть на результат.

Списки

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

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

Web-обозреватель выводит список с отступом слева. Расстояние между пунктами списка он делает меньшими чем в случае абзацев или заголовков. Также он сам расставляет необходимые маркеры или нумерацию.

Любой список в HTML создается в два этапа. Сначала пишут строки, которые станут пунктами списка, и каждую из этих строк помещают внутрь парного тега <LI>. Затем все эти пункты помещают внутрь парного тега <UL> (если создается маркированный список) или <OL> (при создании нумерованного списка) — эти теги определяют сам список (листинг 2.4).

Листинг 2.4

<UL>

<LI>Я — первый пункт маркированного списка.</LI>

<LI>Я — второй пункт маркированного списка.</LI>

<LI>Я — третий пункт маркированного списка.</LI>

</UL>

.

<OL>

<LI>Я — первый пункт нумерованного списка.</LI>

<LI>Я — второй пункт нумерованного списка.</LI>

<LI>Я — третий пункт нумерованного списка.</LI>

</OL>

Списки можно помещать друг в друга, создавая вложенные списки. Делается это

следующим образом. Сначала во "внешнем" списке (в который должен быть помещен вложенный) отыскивают пункт, после которого должен находиться вложенный список. Затем HTML-код, создающий вложенный список, помещают в разрыв между текстом этого пункта и его закрывающим тегом </LI>. Если же вложенный список должен помещаться в начале "внешнего" списка, его следует вставить между открывающим тегом <LI> первого пункта "внешнего" списка и его текстом. Что, впрочем, логично.

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

Листинг 2.5

<UL>

<LI>Я — первый пункт внешнего списка.</LI>

<LI>Я — второй пункт внешнего списка.

<UL>

<LI>Я— первый пункт вложенного списка.</LI>

<LI>Я— второй пункт вложенного списка.</LI>

<LI>Я— третий пункт вложенного списка.</LI>

</UL>

</LI>

<LI>Я — третий пункт внешнего списка.</LI>

</UL>

HTML позволяет вкладывать нумерованный список внутрь маркированного и наоборот. Глубина вложения списков не ограничена.

1 ... 3 4 5 6 7 8 9 10 11 ... 86
Перейти на страницу:
Пожаловаться на ошибку
Похожие материалы
Международные стандарты аудита: Шпаргалка - Коллектив авторов Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Международные стандарты аудита: Шпаргалка - Коллектив авторов
27.12.2023 - 17:46
О чем расскажет ЭКГ - Антон Родионов Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
О чем расскажет ЭКГ - Антон Родионов
20.05.2024 - 02:00
Комментарии

Copyright @ bibliotekaonline.com 2024 - 2026. Все права защищены.


Почта для связи: [email protected]