HTML5, CSS3 и JavaScript. Исчерпывающее руководство, 4-е издание

HTML5, CSS3 и JavaScript. Исчерпывающее руководство, 4-е издание
Автор: Дженнифер Нидерст Роббинс
Год: 2014
ISBN: 978-5-699-67603-3
Страниц: 516
Язык: Русский
Формат: PDF +CD
Размер: 53 Мб

Download

В этой книге вы найдете все, что необходимо знать для создания отличных веб-сайтов. Начав с изучения принципов функционирования Интернета и веб-страниц, к концу книги вы освоите приемы создания сложных сайтов, включая таблицы стилей CSS и графические файлы, и научитесь размещать страницы во Всемирной паутине. Книга включает упражнения, с помощью которых вы освоите разнообразные техники работы с современными веб-стандартами (включая HTML5 и CSS3).

+

Быстрое знакомство с HTML-разметкой

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

Просмотрите HTML-код на рис. 2.3 и сравните его с результатом в браузере. Легко заметить, как элементы, помеченные HTML-тегами в исходном коде, соответствуют тому, что отображается в окне брау­зера.

Во-первых, вы заметите, что текст внутри скобок (например, <body>) не отображается на странице в браузере. Показано только содер­жимое элемента, а разметка скрыта. Теги указывают на имя HTML- элемента — обычно сокращенное, такое как h 1 для heading level 1 (заголовок 1 уровня) или em для emphasized text (акцентированный текст).

Во-вторых, вы увидите, что большинство HTML-тегов идут парами, окружая содержимое элемента. В нашем HTML-документе <h1> гово­рит о том, что следующий текст должен быть отформатирован как за­головок уровня 1; </h1> обозначает на конец заголовка. У некоторых элементов, именуемых пустыми, нет содержимого. В нашем примере тег <hr> указывает на пустой элемент, который предписывает браузеру «создать в этой позиции горизонтальную линию».

Поскольку я не была знакома с программированием, когда впервые на­чала писать HTML-код, мне помогала мысль о тегах и тексте, как об «узелках на веревочке», которые браузер обрабатывает последователь­но, один за другим.

Например, когда браузер сталкивается с открытой скобкой (<), он счи­тает все следующие символы частью разметки, пока не находит закры­вающую скобку (>). Точно так же он считает весь контент после откры­тия тега <h1> заголовком, пока не сталкивается с закрывающим тегом </h1>. Это способ, которым браузер анализирует HTML-документ. Понимание принципов работы браузера с HTML-кодом может быть полезно при анализе неправильного HTML-доку мента.

Но где изображения?

Как вы уже поняли, изображения не встраиваются в HTML-файл, но как они там оказываются, когда вы просматриваете веб-страницу?

На рис. 2.3 продемонстрировано, что каждое изображение — это от­дельный графический файл.

Графика помещается в текст с помощью HTML-элемента изображения (img), который сообщает браузеру, где искать графический файл (со­гласно URL-адресу). Когда браузер находит элемент img, он запрашивает у сервера файл изображения и затем помещает его в поток контен­та. Программное обеспечение браузера собирает отдельные фрагменты в финальную страницу. Видеоконтент и прочие вложенные файлы до­бавляются тем же способом.

Сборка страницы происходит мгновенно, поэтому она появляется так, как будто вся страница загружается сразу. При медленных соединени­ях, или на более медленных компьютерах, или если страница содержит большое количество графики, процесс сборки более заметен, посколь­ку изображения появляются позже текста. Иногда странице даже тре­буется перезагрузка по мере появления новых изображений (хотя вы можете сконструировать свои страницы так, чтобы этому воспрепят­ствовать).

Добавление стилей

Я хочу обратить ваше внимание на последний ключевой компонент на­шей простой страницы. В верхней части HTML-документа есть элемент link, который указывает на файл таблицы стилей kitchen.css, которая содержит информацию о том, как должна выглядеть страница в брау­зере. Это инструкции стилей, написанные в соответствии с правилами каскадных таблиц стилей ( CSS ). CSS позволяет дизайнерам добавлять визуальные инструкции стилей (известные как представления доку­мента) к размеченному тексту ( структура документа в терминологии веб-дизайнеров). В третьей части книги вы по-настоящему почувствуе­те мощь каскадных таблиц стилей.

На рис. 2.4 показана веб-страница сайта «Кухня Кристины» с применен­ными стилями и без них. Браузеры оснащены стилями, используемыми по умолчанию для каждого поддерживаемого ими HTML-элемента, так что если для HTML-документа нет собственных инструкций стилей, браузер применит свои (то, что вы видите на скриншоте слева). Всего несколько правил стилей способны значительно улучшить внешний вид страницы.