Открыть Электронные книги
Категории
Открыть Аудиокниги
Категории
Открыть Журналы
Категории
Открыть Документы
Категории
02-018
УДК 004.738.5
Л67
Ллойд Йен
Л67 Создай свой веб-сайт с помощью HTML и CSS. — СПб.: Питер, 2013. — 416 с.: ил.
ISBN 978-5-496-00510-4
Благодаря этой книге вы научитесь создавать профессиональные сайты, которые будут легко обнов-
ляться и функционировать в любых браузерах. В этом вам помогут практические авторские примеры
использования популярных инструментов веб-разработки HTML и CSS.
Из книги вы узнаете:
— как профессионально разрабатывать сайты;
— как оформлять текст и управлять макетом страницы с помощью CSS;
— как создавать и оптимизировать графику для работы в Сети;
— как делать сайты интерактивными, добавляя на них формы;
— как внедрять поиск по сайту и страницы для обратной связи с пользователем;
— как отслеживать посетителей с помощью сайта Google Analytics;
— как добавлять на сайт потрясающие возможности благодаря HTML5 и CSS3;
— как применять диагностические и отладочные инструменты для поиска возможных проблем.
ББК 32.988.02-018
УДК 004.738.5
Права на издание получены по соглашению с Sitepoint. Все права защищены. Никакая часть данной книги не
может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских
прав.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как на-
дежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может
гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные
ошибки, связанные с использованием книги.
Предисловие . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
От издательства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Глава 1. Приготовьте инструменты!. . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Глава 2. Ваши первые веб-страницы . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Глава 3. Добавляем стили . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Предисловие . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Что такое браузер?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Для кого эта книга. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Чему вас научит книга. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Как вы будете учиться создавать собственный сайт . . . . . . . . . . . . 25
HTML, CSS, разметка… Азы терминологии! . . . . . . . . . . . . . . 26
Создание учебного сайта. . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Чего нет в этой книге. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Содержание книги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Где получить помощь. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Форумы SitePoint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Сайт книги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Рассылка издательства SitePoint. . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Подкаст SitePoint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Обратная связь . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Благодарности. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Оглавление 7
От издательства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Элемент html. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Элемент head. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Элемент title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Элемент meta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Другие элементы, входящие в head . . . . . . . . . . . . . . . . . . . 60
Элемент body. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Самая простая в мире веб-страница. . . . . . . . . . . . . . . . . . . 61
Заголовки и структура документа. . . . . . . . . . . . . . . . . . . . . 63
Абзацы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Для тех, кто любит списки. . . . . . . . . . . . . . . . . . . . . . . . . . 64
Комментарии в HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Символы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
2.2. Погружение в сайт . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Главная страница: начальная точка всех сайтов . . . . . . . . . 70
Разбивка страниц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Связь между новыми страницами. . . . . . . . . . . . . . . . . . . . . 86
Цитата (А кто это сказал?). . . . . . . . . . . . . . . . . . . . . . . . . . 89
Элемент сite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Элементы strong и em . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Небольшой перерыв . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
2.3. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Веб-доступность . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Форматирование рисунков
с использованием CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 184
идеи с других сайтов. Но затем я обнаружил, что все это было неправильно. Книги
давали мне советы, которые позже оказывались плохими, сайты создавались людь-
ми, изучающими те же книги и, следовательно, использующими подобные плохие
методы. Что же было не так?
В первые годы распространения Интернета, когда люди только начинали осваи-
вать технологии, публикуя свои домашние страницы или создавая сайты-визитки
для своих компаний, все разработчики быстро поняли, что возможности среды
ограничены. Потребность — мать изобретения, поэтому веб-разработчики начали
выдумывать разные трюки и выводить на веб-страницы технологии, совершенно
не предназначенные для этого. Развитие браузеров способствовало этому, добавляя
новые возможности для такой работы.
В то время было написано огромное количество книг на тему веб-дизайна и веб-
программирования. Кроме того, в Интернете предлагалось множество бесплатных
уроков. Многие из них основывались на том, что тогда казалось передовым опытом,
однако авторы были ограничены возможностями браузеров, которые по-разному
отображали одинаково написанные хорошие веб-страницы. Это вынуждало авторов
книг и уроков прибегать к злоупотреблению особенностями браузеров: например,
для верстки страниц использовались таблицы. Конечно, все это помогло многим
разработчикам создать их первую страницу в Интернете, но подобная неправильная
практика, применяемая на ранней стадии изучения, прочно укоренилась, и немало
людей по сей день использует эти неэффективные приемы.
Веб-разработчики во всем мире (включая меня) приобрели эти вредные при-
вычки и сейчас вынуждены отучаться от них. Несмотря на то что уже давно по
явились возможности избежать применения устоявшихся неправильных приемов,
многие люди создают некрасивые, медленно загружающиеся и неудобные в исполь-
зовании страницы, но не хотят менять свои привычки, полагая это слишком труд-
ным. Совсем как ученик плохого инструктора по вождению, который ездит с нару-
шением правил, потому что это долгое время сходило ему с рук.
С тех пор как несколько лет назад у меня на все это открылись глаза, я пытаюсь
переучить столько людей, сколько могу. Но новички по-прежнему учатся по старым
книгам, продвигающим все те же старые и неправильные идеи. Это просто должно
прекратиться, причем здесь и сейчас.
С этой книгой вы не приобретете ни одной плохой привычки.
Моя книга научит вас правильным способам разработки сайтов. Если есть пло-
хой метод решения какой-то задачи — «срезающий углы», чтобы сэкономить время,
но предлагающий неэффективные технологии, — я даже не буду вам о нем расска-
зывать. Даже в виде «впрочем, вы можете попробовать и вот так…». Нет необходи-
мости занимать этим вашу голову — таким образом я забочусь о вас!
Internet Explorer (или IE, как мы будем его сокращать отныне) — наиболее
распространенный браузер, в основном по той причине, что компания Microsoft
включает его в комплект операционной системы, начиная с Windows 95. Именно
через него огромное количество людей стало пользоваться Интернетом, и многие
до сих предпочитают Internet Explorer.
Однако есть и другие браузеры, которые вы можете использовать вместо Inter- ������
net Explorer. В последнее время набирает популярность Firefox1 — альтернативный
браузер c множеством интересных возможностей, отсутствующих в IE (на время
написания книги). Кроме того, он куда лучше Internet��������������������������
����������������������������������
Explorer�����������������
�������������������������
отображает неко-
торые веб-страницы. На момент выхода книги появился и за короткое время стал
очень популярным браузер Chrome компании Google (о которой вы наверняка
слышали). И �����������������������������������������������������������������
Firefox����������������������������������������������������������
, и Google������������������������������������������������
������������������������������������������������������
могут использоваться под операционными система-
ми Windows, Mac OS X и Linux, в отличие от Internet Explorer, который работает
только под Windows.
Скриншоты, которые вы увидите в этой книге, были сделаны из Firefox под
Windows 7, если не указано иное. Я очень рекомендую вам скачать и установить
Firefox���������������������������������������������������������������������
по двум причинам: он является кросс-платформенным и идеально поддер-
живает стандарты. Кроме того, советую вам выполнять в этом браузере упражнения
из книги.
Кроме Firefox или Chrome, можете попробовать и другие браузеры, которые
поддерживают веб-стандарты (о них мы очень скоро поговорим). Для пользовате-
лей Windows браузер Opera2 предлагает идеальную поддержку стандартов и уни-
кальный набор возможностей. Как и Firefox�����������������������������������
������������������������������������������
, Opera����������������������������
���������������������������������
— бесплатный браузер. Люби-
тели Mac также могут установить Opera или просто пользоваться браузером Apple,
установленным по умолчанию, либо Safari, который тоже отлично поддерживает
веб-стандарты. Набор ярлыков браузеров под Mac показан на рис. 0.2.
Возможно, вы полностью довольны своим нынешним браузером. Если вы поль-
зователь Windows и предпочли бы иметь дело с тем, что вам знакомо, то можете
продолжать работать в �������������������������������������������������������
Internet�����������������������������������������������
����������������������������������������������
Explorer��������������������������������������
. Так поступает множество людей, поль-
зующихся Интернетом.
1
http://www.mozilla.com/en-US/firefox/new/.
2
http://www.opera.com/download/.
24 Предисловие
Будьте уверены, что почти все описанное в этой книге будет работать в любых
известных браузерах, по вашему желанию и без каких-либо серьезных проблем.
Я сказал «почти»? Это потому, что до сих пор есть некоторые различия в том,
как в браузерах организована обработка новейших технологий, например CSS3.
Но и это нормально, если вы заранее знаете, где ждать различий. Я расскажу о них
в следующих главах — там не будет неприятных сюрпризов, гарантирую!
1
На момент перевода последняя версия — Firefox 12.0. http://www.mozilla.org/en-US/
firefox/all.html. — Примеч. пер.
Как вы будете учиться создавать собственный сайт 25
РАЗМЕТКА — НЕ КОД!
Разметка — не то же самое, что программный код. Часто люди ошибочно считают разметку
обычным кодом, но понятие кода куда более широкое. Используя программный код, вы мо-
жете создавать программы и делать веб-страницу более динамичной, в то время как размет-
ка просто определяет структуру страницы. Так что, если вы хотите удивить своих друзей и род-
ственников, различайте понятия кода и разметки. Видите, я же говорил, что буду учить вас
хорошим привычкам!
CSS — каскадные таблицы стилей (Cascading Style Sheets). При создании сайтов
мы будем использовать CSS и HTML вместе. CSS — язык, который позволяет
контролировать отображение страницы. Чуть позже мы поговорим о нем подробнее.
Пока достаточно, чтобы вы запомнили расшифровку аббревиатуры. Вы также
узнаете, что CSS, как и HTML, эволюционирует со временем. В этой книге мы
1
На русском языке здесь: http://ru.wikipedia.org/wiki/XHTML. Вообще, HTML и XHTML
основаны на языке XML, но XHTML ближе к нему, он более строгий, в нем не «проща-
ются» некоторые неточности, как в HTML. Например, в XHTML недопустимы незакры-
тые теги, что практически решает проблему кросс-браузерности и кросс-платформенно-
сти. — Примеч. пер.
Чего нет в этой книге 27
Содержание книги
Глава 1. Приготовьте инструменты! В этой главе вы убедитесь, что у вас есть
все инструменты, которые могут понадобиться для создания сайта. Я расскажу,
где вы можете найти нужные средства — совершенно бесплатные! К концу гла-
вы вы будете готовы приступить к работе над своим первым сайтом.
Глава 2. Ваши первые веб-страницы. Здесь вы узнаете, как создаются веб-
страницы. Вы исследуете HTML-код, усвоите базовые требования к каждой
веб-странице и изучите основные элементы, которые можно встретить на боль-
шинстве страниц. Затем вы попробуете создать веб-страницу самостоятельно.
Фактически к концу этой главы у вас будет готова основа вашего первого
сайта.
Глава 3. Добавляем стили. Здесь вы начнете наводить красоту на страницах,
которые создадите в главе 2. Вы узнаете, что такое CSS и чем хороша эта техно-
логия, а затем попробуете ее применить. По мере изучения главы вы увидите,
как преображается учебный сайт благодаря применению фонов и заливок, из-
менению цветов и шрифтов, созданию ссылок, изменяющих свой вид в зависи-
мости от того, открывал ли уже пользователь эти страницы.
Глава 4. Преображение с CSS. В этой главе продолжается изучение возмож-
ностей CSS по изменению цветов и стилей текста. Вы также узнаете, как менять
стили границ и компоновать страницу в целом. Мы рассмотрим все возможные
рамки, которые можно применить к таким элементам, как заголовки и абзацы.
Мы будем экспериментировать с пунктирными и сплошными границами, а так-
же с другими эффектами. Во второй половине главы вы узнаете, как использо-
вать CSS для размещения элементов на веб-странице — включая блоки навига-
ции — в любом месте экрана.
Глава 5. Начинаем рисовать! Используем на сайте изображения. Как понятно
из названия главы, она посвящена рисункам. Мы рассмотрим различия между
Содержание книги 29
Форумы SitePoint
Форумы SitePoint1 — это онлайн-дискуссии, где можно задать вопросы обо всем
связанном с веб-разработкой. Вы можете, конечно, и сами отвечать на вопросы
других. Так и работают форумы — одни люди спрашивают, другие отвечают, боль-
шинство делают и то и другое. Желание людей делиться знаниями делает сообще-
ство более сплоченным. Многие опытные веб-дизайнеры «зависают» здесь. Это
хороший способ изучить новую функцию, быстро найти ответы на вопросы да
и в общем получить удовольствие.
Сайт книги
Сайт размещается по адресу http://www.sitepoint.com/books/html3. Там доступно сле-
дующее.
Архив кода. В процессе обучения по книге вы постоянно будете встречать
ссылки на архив кода. Это простой ZIP-архив, который можно скачать. Там есть
каждая строка кода, приведенного в книге. Если вы хотите смошенничать (или
уберечься от лучезапястного синдрома), то идите по ссылкам и скачивайте ар-
хив2. Он также включает копию сайта Bubble Under, который мы будем исполь-
зовать в качестве примера на протяжении всей книги.
1
http://www.sitepoint.com/forums/.
2
http://www.sitepoint.com/books/html3/code.php.
Благодарности 31
Подкаст SitePoint
Приглашаю вас присоединиться к команде SitePoint ���������������������������
Podcast��������������������
для получения ново-
стей, интервью, мнений и свежих мыслей для веб-разработчиков и дизайнеров.
Мы обсуждаем самые последние новости веб-индустрии, представляем гостей, бе-
рем интервью у лучших специалистов в нашей области. Вы можете найти все под-
касты на сайте или подписаться через iTunes.
Обратная связь
Если не получилось найти ответ на форумах или вы просто хотите связаться с SitePoint
по какой-то другой причине, лучше всего написать по адресу books@sitepoint.com.
Наша система поддержки по электронной почте ответит на ваш вопрос или перешлет
его прямо нам. Предложения по улучшению и указания на любые ошибки, которые
вы найдете, особенно приветствуются. Кроме того, вы можете связаться со мной через
Facebook (но предупреждаю: я бываю там не слишком часто).
Благодарности
Несмотря на то что написание книги кажется сольным проектом, ее выход из печа-
ти стал возможен благодаря большому количеству людей. Ничего этого не было
бы, если бы однажды я не обнаружил сайт http://webmonkey.com — представленные
1
http://www.sitepoint.com/books/html3/errata.php.
2
http://www.sitepoint.com/newsletter/.
32 Предисловие
там обучающие материалы по CSS помогли мне прозреть, а также если бы не Джеф-
фри Зельдман (Jeffrey Zeldman), Молли Хольцшлаг (Molly Holzschlag) и Эрик
Мейер (Eric Meyer), чья новаторская работа очень помогла мне и многим другим.
Однако, если бы я взялся перечислять всех, кто вдохновлял меня последние не-
сколько лет, этот раздел был бы напечатан очень-очень мелким шрифтом. Ребята,
вы знаете, кто вы, продолжайте свое классное дело!
Я хотел бы отметить работу, проделанную Web Standarts Project1 (в которой
я тоже принимал участие), особенно команды InterAct на Web Standarts Curriculum.
Я хочу также передать привет моим коллегам из Britpackers — носите те штаны
Union Jack с гордостью, ребята!
Спасибо всем участникам SitePoint, которые помогали мне с выпусками каж-
дого из изданий этой книги все эти годы: это Саймон Мэки (Simon Mackie), Марк
Гарретт (Marc Garrett), Мэтью Мэгейн (Matthew Magain), Эндрю Тетлоу (Andrew
Tetlaw), Джорджина Лэдлоу (Georgina Laidlaw), Джулиан Кэрролл (Julian Carroll),
Келли Стил (Kelly Steele), Алекс Уокер (Alex Walker), Лиза Лэнг (Lisa Lang) и Том
Мьюсез (Tom Museth).
Наконец, спасибо Манде за понимание во время дедлайнов, когда я практически
выпадал из цивилизации, чтобы сдать главы вовремя. Социальное общение? Ах да,
кажется, припоминаю… В то время казалось, что это никогда не закончится, но в фи-
нале мы оба увидели плоды моего труда.
Обозначения разметки
Любая разметка — ��������������������������������������������������������
HTML����������������������������������������������������
или �����������������������������������������������
CSS��������������������������������������������
— будет показываться с использованием моно-
ширинного шрифта, как здесь:
webpage.html (фрагмент)
<h1>Прекрасный летний день</h1>
<p>Это был прекрасный день для прогулки в парке. Пели птицы,
а все дети еще были в школе.</p>
Если код может быть найден в архиве кода для книги, то название файла будет
отображаться вверху листинга, как здесь:
example.css
.footer {
background-color: #CCC;
border-top: 1px solid #333;
}
1
http://interact.webstandards.org/.
Обозначения, использованные в книге 33
Если показана только часть файла, это будет помечено словом «фрагмент»:
example.css (фрагмент)
border-top: 1px solid #333;
Если в показанный ранее пример нужно внести какие-то дополнения, то новый
код будет выделен полужирным шрифтом:
.footer {
background-color: #CCC;
border-top: 1px solid #333;
padding: 5px;
}
Если приведенный ранее код необходим по контексту, то вместо повторения
всего примера мы заменим второстепенную часть вертикальным многоточием:
.footer {
margin: 5px;
}
Иногда нам нужно будет разделить код, который должен записываться в одну
строку, на несколько из-за ограничения размера страницы книги. Знак будет
означать разрыв строки, который необходим лишь из-за форматирования и должен
быть проигнорирован:
URL.open("http://www.sitepoint.com/blogs/2007/05/28/user-style-she
ets-come-of-age/");
ЭЙ, ВЫ!
Советы, приведенные в таких врезках, послужат для вас полезными ориентирами в опреде-
ленных ситуациях.
ХМ, ПРОСТИТЕ…
Эти примечания приводятся отдельно и не имеют критического значения для рассматрива
емого материала. Их можно считать дополнительной информацией.
БЕРЕГИТЕСЬ!
Такими предупреждениями будут выделяться любые критически важные моменты, с которы-
ми вы можете столкнуться в работе.
От издательства
Ваши замечания, предложения и вопросы отправляйте по адресу электронной поч-
ты vinitski@minsk.piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На сайте издательства http://www.piter.com вы найдете подробную информацию
о наших книгах.
1 Приготовьте
инструменты!
Перед тем как создавать свой первый сайт, вы должны настроить компьютер, под-
готовить для работы, которую предстоит выполнить. Нужно убедиться, что у вас
установлены все инструменты и вы готовы приступать.
Если вы пролистаете несколько компьютерных книг в ближайшем книжном
магазине, то наверняка решите, что программы, нужные для создания сайта, слиш-
ком дороги. На самом деле большинство необходимых инструментов уже установ-
лено на ваш компьютер. Вы не замечали их, потому что не пытались искать. Одна-
ко, если даже их у вас нет, найдется по меньшей мере одна бесплатная программа,
которая поможет решить каждую конкретную задачу.
Я полагаю, что на вашем компьютере настроено подключение к Интернету.
Ничего страшного, если у вас медленное соединение: это не повлияет ни на какие
задания, которые мы будем выполнять по ходу чтения книги. Это всего лишь будет
значить, что некоторые из предлагаемых загрузок в Интернет или из Интернета
займут больше времени.
ПЛАННИНГ, ШМАННИНГ…
В этом месте было бы интересно подумать о ваших мотивах к созданию сайта. У вас есть план
проекта? Каких целей вы хотите достигнуть с помощью сайта?
Вы наверняка уже прикинули, сколько времени понадобится для создания сайта, но пока
отложим основы планирования проектов. Это очень важная тема, но, вероятно, если вы
взяли в руки книгу под названием «Создай свой веб-сайт с помощью HTML и CSS», то снача-
ла хотите как следует разобраться с технической частью.
Поскольку это ваш первый сайт, пусть он будет совсем простым, чтобы не пришлось ломать
голову над некоторыми особенностями планирования. Позже, когда вы усвоите все основы
создания сайтов, вы будете готовы распланировать большой, технически продвинутый сайт.
Когда придет время, правильное планирование станет важнейшей частью работы. Но сейчас
просто приготовимся к созданию первого простого сайта.
1
На жаргоне айтишников (а по-английски — bells and whistles) так называются разные наво-
роты в программах, носящие декоративно-развлекательный характер. — Примеч. пер.
1.1. Основные инструменты, которые вам нужны 37
программы, около логотипа Windows). Скорее всего, ярлык для него на Рабочем
столе уже есть.
Инструменты Windows
NoteTab
Окно этой программы содержит множество вкладок, что позволяет работать с боль-
шим количеством разных файлов одновременно, не открывая несколько окон
(рис. 1.6). Файлы, которые вы открыли, сохраняются, даже если вы закрыли про-
грамму и открыли ее снова позднее. Это очень удобно, если вы работаете с набором
файлов в течение многих дней.
Программу NoteTab (в том числе ее версию Light) можно скачать на сайте
http://www.notetab.com.
Firefox
Firefox — популярная альтернатива браузеру Internet Explorer, и, как вы убеди-
тесь по ходу чтения книги, по многим причинам лучше пользоваться именно им.
1.2. Дополнительные инструменты 41
Инструменты Mac OS
Действительно, бесплатных программ для операционных систем Mac меньше, чем
для Windows. Однако, кроме базовых, есть несколько программ, которые вы може-
те рассмотреть.
TextWrangler
TextWrangler — это бесплатный и простой текстовый редактор, разработанный
BareBones Software. Как и NoteTab для Windows, TextWrangler помогает оптими-
зировать рабочее пространство, позволяя открывать несколько текстовых фай-
лов одновременно (документы отображаются списком справа от окна программы
(рис. 1.8), реже на вкладках). Вы можете загрузить TextWrangler с сайта BareBones
Software1 или из магазина Mac App Store.
1
http://www.barebones.com/products/textwrangler/.
42 Глава 1. Приготовьте инструменты!
Firefox
Firefox популярен и среди пользователей Mac, многие из которых предпочитают
его браузеру Safari (чаще всего благодаря возможности установки дополнительных
функций, называемых расширениями — add-on, которые могут быть загружены
в браузер). Веб-страница, отображаемая в Firefox, должна выглядеть одинаково
в любой операционной системе: Windows, Mac���������������������������������
������������������������������������
или Linux�����������������������
����������������������������
(это бесплатная опера-
ционная система с открытым кодом, чаще всего предпочитаемая людьми с техни-
ческим складом ума, которые любят повозиться со своими компьютерами). Самое
главное достоинство Firefox — предсказуемость. Это еще одна очень важная при-
чина, по которой мы будем использовать в основном Firefox в примерах книги.
ках книги мы рассмотрим только бесплатные программы, которые могут дать вам
представление о возможностях обработки изображений.
Отслеживайте, какие бесплатные редакторы обработки изображений предлага-
ются в Сети, в компьютерных или дизайнерских журналах. Владельцы компаний
обычно раздают таким образом старые версии своего ПО в надежде, что пользова-
тели в дальнейшем захотят обновить версию. Поищите PaintShop Photo Pro X3
(с таким громким именем потеряться нелегко!) или другие редакторы изображений,
которые поддерживают слои (������������������������������������������������
layers������������������������������������������
) — технологию создания картинки путем на-
кладывания нескольких изображений одно на другое. На протяжении книги мы
будем выполнять простую обработку изображений, но на самом деле очень важно
все время отслеживать бесплатные (и полнофункциональные!) программы для
работы с иллюстрациями, так как подобные предложения обычно существуют
недолго.
Инструменты Windows
Стандартный пакет установки �����������������������������������������������
Windows����������������������������������������
не всегда содержал программы для редак-
тирования изображений. Так продолжалось до выхода Windows XP, хотя если вы
покупали компьютер вместе со сканером и цифровой камерой, то у вас могла заод-
но появиться и программа для обработки получившихся изображений (зайдите
в меню ПускВсе программы, чтобы узнать, какие приложения есть у вас).
Приложение Фотогалерея в Windows ��������������������������������������
Vista���������������������������������
значительно расширило свой функ-
ционал по сравнению с предшественником в XP: были добавлены несколько
простых, но полезных инструментов обработки изображений, включая обрезку,
1
http://www.adobe.com/products/photoshop/.
2
http://www.adobe.com/products/photoshopelwin/.
3
http://www.adobe.com/products/photoshopelmac/.
4
http://www.adobe.com/products/fireworks/.
5
http://www.corel.com/servlet/Satellite/au/en/Content/1150905725000.
44 Глава 1. Приготовьте инструменты!
1
http://explore.live.com/windows-live-photo-gallery?os=mac.
1.3. Не только текст 45
Инструменты Mac OS X
Считается, что Mac предпочитают творческие личности, например дизайнеры,
и эта платформа предлагает много инструментов для начинающего художника.
Однако их цена, как правило, превышает стоимость аналогичных средств Windows.
Впрочем, посмотрим, какие бесплатные средства мы можем использовать в Mac,
учитывая, что нам нужна более долговечная программа, чем 30-дневная лицензия
PhotoShop или Fireworks.
Preview
Preview — программа, установленная на любом современном компьютере Mac. Она
выполняет большинство простых задач обработки изображений, таких как обрезка
и повороты (рис. 1.11), хотя, скорее всего, вам она знакома как «приложение, ко-
торое открывает PDF». В главе 5 мы подробно рассмотрим, как с ней работать.
46 Глава 1. Приготовьте инструменты!
iPhoto
Эта прекрасная программа также включена в Mac OS X���������������������������
�����������������������������������
и не нуждается в представ-
лении для опытных пользователей Mac. Ее нельзя назвать полноценным редактором
обработки изображений — она создана для просмотра и сортировки большого коли-
чества изображений, находящихся на компьютере. С ее помощью очень удобно соз-
давать фотоальбомы, но, в принципе, iPhoto имеет и определенные возможности ре-
дактирования, что отличает ее от средств, обеспечивающих лишь каталогизацию.
Изображения можно поворачивать на произвольный угол (с помощью инстру-
мента Straighten в режиме редактирования), доступно несколько инструментов для
работы с цветом (рис. 1.12). iPhoto можно найти в папке Applications (Приложения)
или на панели приложений.
1.4. Online-редакторы
Я рассказал о программах для обработки изображений, которые вы можете скачать
и установить на свой компьютер, но есть и другой путь. Вы поразитесь, какой широ-
кий набор инструментов предоставляют средства редактирования в режиме онлайн1.
Редактор Adobe’s Photoshop Express доступен в навигационном меню в раскрыва
ющемся списке Online Tools (рис. 1.13). Как только вы загрузите изображение, которое
хотите редактировать, вы обнаружите большое разнообразие настроек. Можно
убрать красные глаза, сгладить дефекты, увеличить или уменьшить резкость частей
изображения — и все это доступно в режиме онлайн (рис. 1.14). Затем, если вы удов-
летворены результатом, можете снова сохранить файл на свой компьютер.
1
http://www.photoshop.com/tools?wf=editor.
48 Глава 1. Приготовьте инструменты!
Windows
Лучшее место для хранения файлов вашего сайта — выделенный каталог, кото-
рый можно найти в библиотеке Документы (или Мои документы). Ее легко обнару-
жить, щелкнув на ярлыке Проводника Windows на Панели задач (ярлык представ-
ляет собой желтую папку с вкладками). В Windows Vista папку Документы можно
найти по адресу C:\Users\имя_пользователя, а в XP — в C:\Documents and Settings\
имя_пользователя.
Сейчас создайте новую папку под названием Web, выбрав меню ФайлСоз-
датьПапку (рис. 1.15).
Mac OS X
В Mac OS X уже есть специальное место для хранения ваших файлов: папка Sites
(рис. 1.17). Откройте свой каталог Home (Личное) (из Finder выберите GoHome
(ПерейтиЛичное)).
Очень легко добавить папку Sites (Сайты) на боковую панель (рис. 1.18) для
быстрого доступа: просто перетащите туда папку, как вы добавляете элементы на
панель приложений.
50 Глава 1. Приготовьте инструменты!
1.6. Резюме
Хотите верьте, хотите нет, но теперь у вас есть все, что нужно для создания сай-
та, — и����������������������������������������������������������������������
���������������������������������������������������������������������
совершенно бесплатно! Так произошло не только потому, что вы восполь-
зовались самыми простыми инструментами — текстовым редактором (Блокнот или
TextEdit) и браузером (Internet Explorer либо Safari). Ведь вы уже знаете, где взять
более сложные программы.
Мы рассмотрели также несколько простых и бесплатных программ обработки
изображений, которые могут помочь украсить ваши сайты: Picasa для Windows,
а также Preview и iPhoto в Mac. Упомянули и некоторые более богатые возможно-
стями (и более дорогие) программы, такие как Photoshop или PaintShop Pro X3.
А сейчас, когда у вас есть инструменты, пора начать их использовать!
2 Ваши первые
веб-страницы
Мудрый Лао-Цзы когда-то сказал, что путь в тысячу миль начинается с одного
шага 1. В этой главе вы (метафорически) сделаете первый шаг на своем пути
к просвещению в области веб-разработки и создадите первую веб-страницу.
К концу главы вы сможете ее продублировать, начав создавать многостраничный
сайт.
Анатомия веб-страницы
В предисловии я рассказывал, что изучение HTML������������������������������
����������������������������������
похоже на урок вождения. Про-
должая аналогию, вообразите, что веб-страница — это машина, на которой вы бу-
дете учиться ездить. Некоторые функции очень важны для вождения, в отличие от
других, более декоративных дополнений.
Чтобы ехать на машине, нужны колеса (включая рулевое колесо) и кресло во-
дителя. Для движения автомобиля необходим двигатель, а также кузов (элегантный,
хоть это и несущественно), в котором все это находится. Кроме того, нужна под-
веска, которая крепится к кузову. Удалите что-то одно — и у вас останется лишь
набор красивых, но бесполезных запасных частей.
Как и машина, ваша веб-страница тоже нуждается в чем-то вроде подвески:
нужна базовая структура, к ней будет достраиваться все остальное. Но что может
быть этой гипотетической подвеской? Лучший способ узнать это — засучить рука-
ва и посмотреть, что происходит за кулисами.
1
http://www.quotationspage.com/quote/24004.html.
2.1. Приятно познакомиться, HTML! 53
Рис. 2.1. Выбор команды для просмотра исходного кода в Internet Explorer и Firefox
1
http://webstandards.org/.
2
Позволю себе рекомендовать проделать подобную операцию в Google Chrome, который
успел набрать популярность ко времени перевода книги на русский язык: код отобра-
зится структурированным в виде списка, раскрывающегося на каждом уровне. Кроме
того, щелкнув правой кнопкой мыши на отдельном элементе, можно выбрать команду
Просмотр кода элемента и сразу увидеть строку, относящуюся к нему, а не искать ее по
всему коду. — Примеч. пер.
54 Глава 2. Ваши первые веб-страницы
Doctype
<!DOCTYPE html>
Элемент html
Итак, тип документа сообщил браузеру, какую версию HTML ему ожидать. Что
идет дальше? Сам HTML!
HTML���������������������������������������������������������������
-документ строится с использованием элементов. Помните, элемен-
ты — это кирпичики, которые создают структуру, а она, в свою очередь, обеспечи-
вает целостность веб-страницы. Но что такое элемент? Как элемент выглядит
и какова его цель?
HTML-элемент начинается и заканчивается открывающим и закрывающим
тегами.
Тег состоит из открывающей угловой скобки (<), какого-то текста и закрыва
ющей скобки (>).
Внутри тега находится имя тега. Там также может быть один или несколько
атрибутов.
Посмотрим на первый элемент веб-страницы: элемент html (рис. 2.2).
Одни атрибуты опциональны, а другие обязательны, но все они дают браузеру важную ин-
формацию — куда шире, чем предлагает сам элемент. Например, элемент изображения (о нем
мы еще поговорим) имеет обязательный атрибут "�����������������������������������������
image������������������������������������
source�����������������������������
�����������������������������������
", значением которого являет-
ся путь к файлу изображения. Атрибуты указываются только в открывающих тегах любых
элементов. В дальнейшем, во время разработки проекта, вы увидите много атрибутов, и, по
крайней мере на начальном этапе, я буду обязательно их объяснять, чтобы вы постепенно
с ними знакомились.
Элемент head
Элемент head1 содержит сведения о странице, но ничего из этой информации не бу-
дет показано на самой странице. Например, он включает в себя элемент title
(название), который сообщает браузеру, что нужно отобразить в заголовке веб-
страницы (выводится в строке заголовка — самой верхней части окна браузера, на
которой еще содержатся кнопки Свернуть, Развернуть и Закрыть):
<head>
<title>Untitled document</title>
<meta charset="windows-1251"/>
</head>
Элемент title2
Открывающий <title> и закрывающий </title> охватывают слова Untitled document
в разметке, показанной выше. Обратите внимание: тег <title> означает начало,
а </title> — конец заголовка. Вот так работают закрывающие теги: у них есть слеш
(/) после первой скобки (<).
Заголовок Untitled document (Документ без названия) — просто отправная точка,
с которой вы начинаете творить свою первую веб-страницу; можно изменить эти
слова. Как показано на рис. 2.3, действительно очень важно снабжать веб-страницу
осмысленным заголовком — и не только ради посетителей вашего сайта.
Содержимое элемента title используется и для других целей.
Это название, появляющееся на Панели задач Windows — полоске внизу Рабо-
чего стола, которая отображает открытые в настоящее время окна (рис. 2.4).
То же самое происходит и на панели приложений в Mac (рис. 2.5). Когда у вас
открыто несколько окон, вам очень пригодятся информативные названия!
1
http://reference.sitepoint.com/html/head/.
2
http://reference.sitepoint.com/html/title/.
58 Глава 2. Ваши первые веб-страницы
Элемент meta
Внутри элемента head в нашем простом примере можно увидеть элемент meta, вы-
деленный ниже полужирным шрифтом:
<head>
<title>Untitled document</title>
<meta charset="windows-1251"/>
</head>
ВАЖНОСТЬ КОДИРОВКИ
Если, сохраняя свои файлы, вы не уделяете должного внимания выбору кодировки, то навер-
няка просто не представляете его важности. Но, когда другой пользователь, говорящий на
другом языке, попробует открыть ваш сайт, он, скорее всего, увидит страницу с абракадаброй.
Почему? Потому что его компьютер настроен для отображения текста из символов, свойствен-
ных его языку, в то время как ваш — для отображения текста на английском языке. Кодировка
UTF�������������������������������������������������������������������������������������
-8 справляется с символами практически любого языка (включая специальные), и большин-
ство компьютеров смогут прочитать его. Но для русскоязычных сайтов подходящей будет ко-
дировка windows-1251, которая и будет указываться далее в примерах этой книги.
60 Глава 2. Ваши первые веб-страницы
САМОЗАКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫ
Элемент ���������������������������������������������������������������������������
meta�����������������������������������������������������������������������
— пример самозакрывающегося элемента (также называемого пустым). В от-
личие от title, между закрывающим и открывающим тегами элемент meta может не содержать
вообще ничего, поэтому нужно было бы писать вот так:
<meta charset="windows-1251"></meta>
Язык HTML содержит значительное количество пустых элементов. Разработчики, создававшие
HTML, решили, что все время ставить ненужные закрывающие теги довольно утомительно,
поэтому придумали самозакрывающиеся элементы, которые заканчиваются вот так: />. Наш
пример будет выглядеть таким образом:
<meta charset="windows-1251"/>
Другие элементы,
входящие в head
В head могут присутствовать и другие элементы, например таблицы стилей CSS
или код на языке JavaScript. Мы поговорим о них, когда придет время.
Элемент body
Ура, мы добрались до места! Элемент body содержит почти все, что вы видите, от-
крывая сайт: заголовки, абзацы, изображения, необходимые элементы навигации
и нижние колонтитулы.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled Document</title>
<meta charset="windows-1251"/>
</head>
<body>
</body>
</html>
2.1. Приятно познакомиться, HTML! 61
1
http://reference.sitepoint.com/html/h1/.
2
http://reference.sitepoint.com/html/p/.
2.1. Приятно познакомиться, HTML! 63
РЕГИСТРЫ И РАЗМЕТКА
Теги написаны в нижнем регистре, и имена атрибутов будут писаться так же. Работая с типом
документа HTML5, вы можете вольно обращаться со стилем разметки (например, смешивать
верхний и нижний регистры, не ставить кавычки в атрибутах и многое другое). Ключевое
слово — «можете». Вообще-то, хорошим тоном считается следование строгим правилам раз-
метки XHTML��������������������������������������������������������������������������
�������������������������������������������������������������������������������
, даже если вы не используете тип документа ������������������������������
XHTML�������������������������
, потому что это упорядо-
ченный, логический стиль разметки. Так что в книге, используя тип документа HTML5, мы
будем следовать правилам более скрупулезного XHTML. Подробнее о различиях синтаксиса
HTML и XHTML вы можете почитать на сайте SitePoint1.
1
http://reference.sitepoint.com/html/html-xhtml-syntax.
64 Глава 2. Ваши первые веб-страницы
Абзацы
Конечно, никто не хочет читать документ, который содержит только заголовки,
поэтому нужно вложить в него и какой-то текст. Элемент, который применяется
для выделения текстовых блоков, — p. Просто запомните: р значит абзац (�����
para-
graph). Это важно, потому что вы будете использовать этот элемент куда чаще, чем
остальные. В этом вся прелесть HTML����������������������������������������
��������������������������������������������
: часто используемые элементы очень про-
сты и их легко запомнить.
Что вы об этом думаете? Вы напечатали весь код? Не забывайте, что все при-
меры можно найти в архиве кода. Учтите, однако, что копирование и вставка раз-
метки, а затем сохранение и запуск файла не дадут вам настоящего ощущения, что
вы сами делаете свой сайт; учиться следует на практике. Даже если вы сделали
ошибку — прекрасно, это лучший способ запомнить, как должно быть правильно
(к тому же вы будете довольны собой, найдя и исправив ее самостоятельно).
Посмотрите, как эта разметка должна отобразиться в браузере (рис. 2.9).
Комментарии в HTML
Вернемся к автомобильной аналогии. Вы выполнили для своей «машины» небольшую
работу, и если вы собираетесь прикрутить новые детали к старому каркасу, то за-
метите, что детали не скреплены болтами, а приклеены к автомобилю суперклеем.
66 Глава 2. Ваши первые веб-страницы
1
http://reference.sitepoint.com/html/html-xhtml-syntax#html-xhtml-syntax__sect-comments.
2.1. Приятно познакомиться, HTML! 67
Символы
Порой вам может понадобиться включить в текст веб-страницы символы «боль-
ше» (>) или «меньше» (<). Это проблема, так как эти символы уже применяются
для обозначения тегов в HTML. Что же делать? К счастью, вместо них в тексте
можно использовать специальные кодирующие последовательности. Например,
символ > может быть представлен в виде последовательности &qt;, которую мы
вставляем в текст, как показано в примере ниже. Результат разметки можно уви-
деть на рис. 2.12.
chapter2\examples\05_symbols\entity.html
<!DOCTYPE html>
<html lang="en">
<head>
2.2. Погружение в сайт 69
<title>Магазин: заметка</title>
<meta charset="windows-1251"/>
</head>
<body>
<p>Сейчас в магазине ножей >
НЕТ (могут поступить через 3 дня)</p>
</body>
</html>
Сделаем заголовок
Припомнив изученное ранее, внесите небольшие изменения в этот документ.
1. Поменяйте заголовок веб-страницы на «Bubble Under — дайвинг-клуб на
юго-западе Великобритании».
2. Добавьте заголовок первого уровня «BubbleUnder.com».
3. Сразу после заголовка добавьте абзац: «Дайвинг-клуб на юго-западе Велико-
британии — сделай плюх с нами!» Внимание: это как бы ваш маркетинговый
слоган — теглайн (tagline).
2.2. Погружение в сайт 71
Как только вы внесете эти изменения, ваша разметка должна выглядеть вот так
(новый код выделен полужирным шрифтом):
chapter2\website_files\02_setting_a_title\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bubble Under — дайвинг-клуб на юго-западе
Великобритании</title>
<meta charset="windows-1251"/>
</head>
<body>
<h1>BubbleUnder.com</h1>
<p>Дайвинг-клуб на юго-западе Великобритании — сделай плюх с нами!</p>
</body>
</html>
Сохраните страницу и затем откройте ее в браузере. На рис. 2.13 показан ре-
зультат, который вы должны увидеть.
Ну вот, ваша страница уже почти похожа на множество главных страниц других
сайтов: на ней есть простой текст, приветствующий новых посетителей, но, правда,
больше ничего нет. О чем конкретно этот сайт или, если быть более точным, для
чего именно он создавался?
1
От англ. content — «содержание», в данном случае — наполнение, смысловая часть веб-
страницы. В сфере IT укоренилась практика употребления английских терминов в рус-
ской речи для точности и мгновенного отличия от множества русских синонимов. —
Примеч. пер.
2.2. Погружение в сайт 73
Ничего сверхъестественного, да? Поверьте мне, это еще не все. Сейчас следует
сконцентрироваться на контенте сайта и на том, как он должен быть структуриро-
ван. Мы только подбираемся к обширным вопросам структуры документа, обсудив
лишь использование уровней заголовков. В главе 3 вы увидите, как можно офор-
мить документ, то есть изменить шрифт, цвет, отступы и т. д., но сейчас сосредото-
чимся на содержании и структуре.
2.2. Погружение в сайт 75
Структурирование
Абзацы? Нет проблем. Заголовки? Запросто! Фактически вы уже сейчас можете
создать веб-страницу с простейшей структурой. Небольшой набор элементов, ко-
торые мы сейчас обсуждали, легко запомнить: их наименования очевидны (пом-
ните: p — paragraph?). Но что за зверь — div?
2.2. Погружение в сайт 77
НИКАКИХ ОБЩИХ ID
Атрибут ������������������������������������������������������������������������������
id����������������������������������������������������������������������������
используется в HTML��������������������������������������������������������
������������������������������������������������������������
для уникального обозначения элементов, поэтому два эле-
мента не могут иметь одинаковый id. Когда вы будете работать с CSS и JavaScript, атрибуты
id вам пригодятся.
Чтобы вам проще было начать, я поработал над первой частью страницы. В приме-
ре ниже показан измененный раздел с введенным id-атрибутом для элемента div:
chapter2\website_files\06_adding_structure_with_divs\index.html (фрагмент)
<div id="header">
<h1>BubbleUnder.com</h1>
<p> Дайвинг-клуб на юго-западе Великобритании — сделай плюх с нами!</p>
</div> <!-- Окончание раздела header -->
Сейчас попробуйте сделать то же самое: добавьте элементы div для выделенных
частей контента и идентифицируйте их как site branding или tagline.
Поговорим о вложениях
Вы уже знаете, что элементы div могут содержать абзацы, но, кроме этого, они
могут включать в себя и какое-то количество других элементов div. Тогда они на-
зываются вложенными (nested) div-элементами. Один div просто вкладывается
1
В отличие от текста контента, элементы самой разметки, в том числе атрибуты id, name
и др., следует писать только на английском языке. Исключение можно сделать для ком-
ментариев, да и то это считается дурным тоном, как и запись русских слов латиницей. —
Примеч. пер.
80 Глава 2. Ваши первые веб-страницы
<h3>О нас</h3>
<p>Bubble Under — группа энтузиастов дайвинга, основанная
на юго-востоке Великобритании, которая регулярно встречается
для дайвинг-вылазок в летние месяцы, когда погода хорошая
и по воде плывут барашки. Мы проводим уик-энд, собираясь
небольшими группами, чтобы сократить расходы на проживание
и проезд, а также быть уверенными, что каждый получает
надежного напарника.</p>
<p>Хотя мы располагаемся на юго-западе, мы не ограничиваемся только
нашей территорией: в последних поездках мы посетили реку Скапа
в Шотландии и Мальту.</p>
<p>Когда мы не занимаемся дайвингом, мы часто встречаемся в местных
пабах, чтобы поболтать о грядущих приключениях (на самом деле это
только повод, да?).</p>
<h3>Наши контакты</h3>
<p>Чтобы узнать больше, свяжитесь с секретарем клуба Бобом Добалина
по телефону 01793 641207 или по электронной почте
bob@bubbleunder.com.</p>
</div> <!-- Окончание раздела bodycontent -->
</body>
</html>
В таких случаях будет трудно понять, какой закрывающий тег что закрывает.
Пока вам может быть не совсем понятно, почему это так важно, но когда мы начнем
изучать �������������������������������������������������������������������
CSS����������������������������������������������������������������
, ошибки в �����������������������������������������������������
HTML�������������������������������������������������
-коде будут очень сильно портить вам жизнь. Доба-
вив несколько комментариев, можно значительно упростить себе работу по отлад-
ке в дальнейшем.
</div> <!-- Окончание внутреннего элемента div -->
</div> <!-- Окончание вложенного элемента div -->
</div> <!-- Окончание внешнего элемента div -->
82 Глава 2. Ваши первые веб-страницы
НЕ СТОИТ ПЕРЕБАРЩИВАТЬ
Избегайте излишнего употребления элементов div. Некоторые разработчики увлекаются
секционированием страниц с использованием div, расставляя их и тут и там. Излишний
энтузиазм в использовании этого элемента приведет лишь к тому, что страница будет усея-
на элементами div, как пенек опятами, без всякого практического смысла. Так что будьте
осторожны, не стоит без нужды вводить этот элемент только потому, что теперь вы это
умеете.
Разбивка страниц
На текущий момент вы добились значительного прогресса в создании сайта.
Но что это за сайт, у которого только одна страница? Честно говоря, сайт может
состоять из одной страницы, как и предложение из одного слова. Но вы, навер-
ное, не купили бы эту книгу, чтобы узнать, как создать всего одну страницу сайта,
не правда ли?
2.2. Погружение в сайт 83
ГДЕ ЖЕ РАСШИРЕНИЕ?
Если имя вашего файла отображается в Проводнике просто как �����������������������������
index������������������������
, это значит, что систе-
ма не показывает расширения файлов (с помощью которых Windows определяет их тип).
Чтобы отобразить расширение, сделайте следующее.
1. Откройте Проводник Windows.
2. Если вы пользователь Windows 7 и Vista, выберите СервисКаталоги и поиск. Пользова-
тели XP должны выбрать СервисСвойства папки.
3. Перейдите на вкладку Вид.
4. В области Дополнительные параметры в группе Файлы и папки снимите флажок Скрывать
расширения для зарегистрированных типов файлов.