Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Здесь можно купить и скачать "Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов" в формате fb2, epub, txt, doc, pdf. Жанр: Прочая справочная литература, издательство БХВ-Петербург, год 2011. Так же Вы можете читать ознакомительный отрывок из книги на сайте LibFox.Ru (ЛибФокс) или прочесть описание и ознакомиться с отзывами.
Название:
HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Автор:
Издательство:
неизвестно
Год:
2011
ISBN:
978-5-9775-0596-3
Скачать:
Вы автор?
Книга распространяется на условиях партнёрской программы.
Все авторские права соблюдены. Напишите нам, если Вы не согласны.
Все авторские права соблюдены. Напишите нам, если Вы не согласны.
Как получить книгу?
Оплатили, но не знаете что делать дальше? Инструкция.
Описание книги "HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов"
Описание и краткое содержание "HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов" читать бесплатно онлайн.
Практическое руководство по созданию современных Web-сайтов, соответствующих концепции Web 2.0. Описаны языки HTML 5 и CSS 3, применяемые, соответственно, для создания содержимого и представления Web-страниц. Даны принципы Web-программирования на языке JavaScript с использованием библиотеки Ext Core. Рассказано о создании интерактивных Web-страниц, приведены примеры интерактивных элементов, позволяющие сделать Web-страницы удобнее для посетителя. Раскрыты вопросы реализации подгружаемого и генерируемого содержимого, семантической разметки, применения баз данных для формирования Web-страниц. Показаны способы расширения функциональности Web-сайтов с использованием Web-форм, элементов управления, свободно позиционируемых элементов и программного рисования средствами HTML 5.
<LI>Я— второй пункт вложенного списка.</LI>
<LI>Я— третий пункт вложенного списка.</LI>
</UL>
</LI>
<LI>Я — третий пункт внешнего списка.</LI>
</UL>
HTML позволяет вкладывать нумерованный список внутрь маркированного и наоборот. Глубина вложения списков не ограничена.
Еще HTML позволяет создать так называемый список определений, представляющий собой перечень терминов и их разъяснений. Такой список создают с помощью парного тега <DL>. Внутри него помещают пары "термин — разъяснение", причем термины заключают в парный тег <DT>, а разъяснения — в парный тег <DD> (листинг 2.6).
Листинг 2.6
<DL>
<DT>Содержимое</DT>
<DD>Информация, отображаемая на Web-странице</DD>
<DT>Представление</DT>
<DD>Набор правил, определяющих формат отображения содержимого</DD>
<DT>Поведение</DT>
<DD>Набор правил, определяющих реакцию Web-страницы или ее элементов на действия посетителя</DD>
</DL>
Осталось сказать, что списки и их пункты относятся к блочным элементам Web-страницы, и при их выводе на экран Web-обозреватель руководствуется теми же правилами, что и при выводе абзацев и заголовков.
На нашей Web-странице есть несколько абзацев, перечисляющих основные возможности HTML. Превратим их в маркированный список (листинг 2.7).
Листинг 2.7
<UL>
<LI>абзацы;</LI>
<LI>заголовки;</LI>
<LI>цитаты;</LI>
<LI>списки;</LI>
<LI>таблицы;</LI>
<LI>графические изображения;</LI>
<LI>аудио- и видеоролики.</LI>
</UL>
Теперь наша Web-страничка стала выглядеть симпатичнее.
Цитаты
В тексте Web-страницы, которую мы создаем, присутствует большая цитата из Русской Википедии. Давайте ее как-то выделим.
HTML уже приготовил для нас выход из положения — парный тег <BLOCKQUOTE>, внутри которого размещается HTML-код, создающий цитату (листинг 2.8). Web- обозреватель выводит цитату с отступом слева.
Листинг 2.8
<BLOCKQUOTE>
<P>Я — начало большой цитаты.</P>
<P>Я — продолжение большой цитаты.</P>
</BLOCKQUOTE>
Как видим, в тег <BLOCKQUOTE> можно поместить несколько абзацев. Там также могут быть заголовки и списки (если уж возникнет такая потребность). Большая цитата HTML также относится к блочным элементам.
Осталось только сделать то, что было задумано, — оформить цитату (листинг 2.9).
Листинг 2.9
<BLOCKQUOTE>
<P>HTML (от англ. HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине.</P>
</BLOCKQUOTE>
Текст фиксированного формата
Аппетит приходит во время еды. Мы еще не успели доделать свою первую Web- страницу, а уже хотим сделать еще одну. Давайте же ее сделаем. Дадим аппетиту разгуляться!
Новая Web-страница (листинг 2.10) будет посвящена тегу <TITLE>.
Листинг 2.10
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Тег TITLE</TITLE>
</HEAD>
<BODY>
<H1>Тег TITLE</H1>
<P>Тег TITLE служит для указания названия Web-страницы. Он ставится в ее секции заголовка.</P>
<H6>Пример:</H6>
<P>!HEAD!!TITLE!Я — заголовок Web-страницы!/TITLE!
!HEAD!</P>
</BODY>
</HTML>
Здесь мы поместили краткое описание тега <TITLE> и код примера, имеющий такой вид:
!HEAD!
!TITLE!Я — заголовок Web-страницы!/TITLE!
!/HEAD!
Вместо символов < и >, которые, как мы помним из главы 1, недопустимы в обычном тексте, мы поставили восклицательные знаки. В главе 3 мы узнаем, как все- таки вставить в текст недопустимые символы, и заменим их.
Сохраним набранный код в файле с именем t_title.htm и откроем его в Web-обозревателе. И что мы там увидим?
Рис. 2.1. Web-страница t_title.htm в Web-обозревателе. Обратим внимание на код примера
Как видно на рис. 2.1, Web-обозреватель вывел код примера в одну строку и без всяких отступов. Но ведь мы разбили его на три строки и создали отступы с помощью пробелов, чтобы HTML-код лучше читался и сразу была видна вложенность тегов! Что случилось?
Вспомним два правила, которыми руководствуется Web-обозреватель при выводе текста блочного элемента и которые были перечислены в разделе, посвященном абзацам. Эти правила гласят, что два или более следующих друг за другом пробела или переноса строки преобразуются в один пробел и перенос строки считается за пробел. Так Web-обозреватель и поступил: преобразовал переносы строки в пробелы, а последовательные пробелы — в один пробел. И вывел код примера в виде обычного абзаца, который у него поместился в одну строку.
Web-обозреватель все сделал правильно! Просто мы не указали ему, как следует выводить данный текст.
Специально для случаев, когда текст должен быть выведен именно так, как набран, с сохранением всех пробелов и переносов строк, язык HTML предусматривает парный тег <PRE>. Выводимый текст помещают внутри этого тега (листинг 2.11).
Листинг 2.11
<PRE>Я — текст, который будет выведен на Web-страницу
со всеми
отступами и
переносами строк.</PRE>
Такой текст называется текстом фиксированного формата.
Правила отображения текста фиксированного формата:
— для вывода используется моноширинный шрифт (у моноширинного шрифта все символы имеют одинаковую ширину, в отличие от пропорциональных, у которых ширина символов различна);
— все пробелы и переносы строк сохраняются при выводе (это мы уже знаем);
— если строка текста фиксированного формата не помещается в окне Web- обозревателя по ширине, она ни в коем случае не будет переноситься. Из-за этого может возникнуть потребность в горизонтальной прокрутке Web-страницы. (что, вообще-то, плохой стиль Web-дизайна…);
— возможно наличие HTML-тегов для выделения текста и гиперссылок (подробнее о них будет рассказано в главах 3 и 5).
Текст фиксированного формата также является блочным элементом.
Исправим HTML-код Web-страницы t_title.htm так, чтобы пример выводился в виде текста фиксированного формата (листинг 2.12).
Листинг 2.12
<!DOCTYPE html>
<HTML>
.
<H6>Пример:</H6>
<PRE>!HEAD!
!TITLE!Я — заголовок Web-страницы!/TITLE!
!HEAD!</PRE>
</BODY>
</HTML>
Откроем исправленную Web-страницу в Web-обозревателе и убедимся, что он выводится правильно (рис. 2.2).
Как правило, текст фиксированного формата используется для вывода исходных текстов программ и быстрой публикации в Сети документов, набранных обычным текстом. В качестве примера можно вспомнить библиотеку Мошкова (http://www.lib.ru), в которой все книги опубликованы как раз в виде текста фиксированного формата.
Горизонтальные линии
Что бы нам еще такое сделать с Web-страницами… Давайте дополнительно выделим на главной Web-странице index.htm цитату из Википедии, описывающую HTML. Только как?
Для любителей все выделять HTML припас подарок — горизонтальную линию, создаваемую с помощью одинарного тега <HR>:
<P>Я буду отделен от следующего абзаца горизонтальной линией.</P>
<HR>
<P>Я отделен от предыдущего абзаца горизонтальной линией.</P>
Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web- страницы, имеет один-два пиксела в толщину и выпуклый или вдавленный вид (конкретные параметры зависят от Web-обозревателя). Она применяется для отделения одной части содержимого Web-страницы от другой и просто "для красоты". Однако нужно помнить, что слишком большое число горизонтальных линий — дурной тон Web-дизайна.
Больше о горизонтальных линиях рассказывать нечего. Так что внесем в HTML-код страницы index.htm необходимые исправления (листинг 2.13).
Листинг 2.13
<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!
Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. А именно, о языках HTML и CSS.</P>
<HR>
<P>Русская Википедия определяет термин HTML так:</P>
.
<P>Пожалуй, ни убавить ни прибавить…</P>
<HR>
<P>HTML позволяет формировать на Web-страницах следующие элементы:</P>
Результат показан на рис. 2.3. Симпатично вышло, не так ли?
Рис. 2.3. Web-страница index.htm с горизонтальными линиями
На Facebook
В Твиттере
В Instagram
В Одноклассниках
Мы Вконтакте
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Похожие книги на "HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов"
Книги похожие на "HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов" читать онлайн или скачать бесплатно полные версии.
Понравилась книга? Оставьте Ваш комментарий, поделитесь впечатлениями или расскажите друзьям
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Отзывы о "Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов"
Отзывы читателей о книге "HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов", комментарии и мнения людей о произведении.