<< Пред. стр.

стр. 47
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

текущей странице. */
Строим Web-сайты
440

if (confirm("Сейчас вы покинете текущий сайт. Для
продолжения нажмите кнопку ОК.")) {
• location.href ˜ url;




</script>
Чтобы заставить функцию работать, необходимо отформатиро-
вать внешние ссылки так, чтобы они отличались от внутренних
ссылок. Внешние ссылки должны выглядеть подобно следующе-
му примеру:
<а href="javascript:doYouAreNowLeaving(scr);"
>3десь располагается текст внешней ссылки</а>
Замените переменную s r c на полный интернет-адрес (включая
префикс http://www) внешней ссылки и, конечно же, добавьте
собственный текст ссылки.
Если вам не нравится использовать ссылки JavaScript из-за проблем
совместимости с браузерами старых версий, воспользуйтесь следу-
ющим форматом ссылки, который также нормально работает:
<а href="#" onClick="doYouAreNowLeaving(scr);"
>3десь располагается текст внешней ссылки</а>
И опять, замените s r c на полный интернет-адрес внешней
ссылки.


Совещ
Чтобы внешняя ссылка открывалась в новом ок-
не браузера, не добавляйте target = "_blank"
в тег-анкер ссылки. Этот прием не действует в
данном конкретном скрипте, т.к. ссылка фор-
мально переходит в JavaScript, а не на Web-
сайт. Вместо этого, измените в функции
doYouAreNowLeaving (url) следующую
строку кода:

location.href = url;
на:
open (url);
ЧАСТЬ 8.
Базовое обучение

Создание HTML-документов
Добавление ключевых слов и описаний страниц
Блокирование частей сайта для поисковых систем
Тестирование сайта
Выбор Web-хоста
Загрузка сайта на сервер
Проверка правильности исходного кода
ГЛАВА 8 0 .
Создание HTML-документов
Разработка Web-сайта означает создание HTML-документов. HTML расшифровывает-
ся как Hypertext Markup Language (Язык гипертекстовой разметки). Это компьютер-
ный язык, описывающий содержимое Web-страницы.



Определение
HTML расшифровывается как Hypertext Markup Language (Язык ги-
пертекстовой разметки). Это компьютерный язык, описывающий со-
держимое Web-страницы.


HTML-документы являются на самом деле простыми текстовыми файлами. Для их
создания не требуется изощренное программное обеспечение, достаточно обычного
текстового редактора. Где взять текстовый редактор? Он у вас уже есть, даже если вы
этого не осознаете. Операционные системы Microsoft поставляются с программой
Notepad (Блокнот), которая запускается следующей командой с рабочего стола
Windows: Start • All Programs • Accessories • Notepad (Пуск • Все программы • Станда-
ртные • Notepad). Операционные системы Mac OS старых версий поставлялись
с текстовым редактором SimpleText, тогда как более новые операционные системы
Mac OS поставляются с текстовым редактором TextEdit. Все три эти программы выпол-
няют более или менее одинаковые функции, предоставляя возможности записи и сох-
ранения текстовых файлов.


Определение
Teru(tags) — ключевые слова HTML, которые идентифицируют струк-
туру текста внутри HTML-файла. Структура текста — это попросту
описание того, к какому типу элемента принадлежит текст: абзац, за -
головок, название изображения и так далее.


Что отличает HTML-документы от других видов текстовых файлов, так это включе-
ние тегов или ключевых слов HTML, которые определяют структуру текста внутри
файла. Структура на техническом жаргоне означает попросту, какой вид элемента
представляет собой текст, например, абзац, заголовок или название файла изображе-
ния. Можно сказать, что HTML-тег идентифицирует фрагмент текста как специаль-
ный элемент на Web-странице.
Допустим, HTML-файл содержит следующую строку текста:
Take my w i f e . Please.
HTML-теги сообщают браузеру, к какому типу элементов относится текст. Чтобы сде-
лать текст абзацем, добавьте тег абзаца, как в следующем примере:
<p>Take my w i f e . Please.</p>
ГЛАВА 80. Создание HTML-документов 443


Часто задаваемые вопросы
ВОЗМОЖНОСТИ моего текстового редактора ограничены. Следует
ли пользоваться им?
Нет. Возможно, у вас на компьютере есть также программа подготов-
ки текстов, такая как Microsoft Word. Текстовые процессоры — это те
же текстовые редакторы, хотя они обладают многими расширенными
функциями, которые не нужны для создания HTML-файлов. Если же
вы предпочитаете работать в текстовом процессоре, используйте его
для создания HTML-страниц. Не стремитесь приобрести и не поку-
пайте приложение, специально предназначенное для редактирова-
ния HTML-кода.


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



Take my wife Please.




Puc. 80.1. Разметьте фрагмент текста как абзац,
и браузер отобразит текст со стилем абзаца

Следует отметить, что при изменении тега изменяется структура текста. А если изме-
няется структура текста, браузер, возможно, будет по-другому отображать текст. Заме-
ните тег абзаца тегом заголовка первого уровня:
<hl>Take my wife. Please.</hl>
и как видно на рисунке 80.2, браузер отображает текст в виде заголовка первого уров-
ня, а не как абзац.



Совет
При сохранении HTML-файла не используйте стандартное расшире-
ние . txt для текстовых файлов. Вместо него устанавливайте расши-
рение HTML-документов: .htm.
Строим Web-сайты
444




Take my wife. Please




Рис. 80.2. Измените тег абзаца па тег заголовка,
и браузер изменит внешний вид текста

Не имеет значения насколько передовым, сложным или изощренным будет HTML д >
кумент, во всех случаях теги работают одинаково. Они идентифицируют структуру
текста, которую браузеры интерпретируют в соответствии со своими встроенными
стилями.
В HTML-документах существует два явных раздела:
1. Раздел заголовка (head section), который содержит специальную информацию
о HTML-файле, например, заглавие страницы. Скрипты и таблицы стилей так-
же находятся в этом разделе. Раздел заголовка не отображается браузером в ок-
не документа.
2. Основной раздел (body section), в котором размещается содержимое Web-стра-
ницы. Основной раздел отображается браузером в окне документа.


Часто задаваемые вопросы
Мне не нравится, как браузер отображает название элемента
здесь. Кому мне жаловаться?
Разработчику браузера. Однако почему бы не заняться этим самому?
Если вам не нравится, как браузер отображает некоторые элементы,
можно переопределить их внешний вид с помощью каскадных таблиц
стилей (CSS — Cascading Style Sheets). Подробности см. в части IV.


Указанные выше разделы размечаются с помощью тегов <head> и <body>, подобно
следующему примеру:
<head>
<!— Здесь размещается раздел заголовка. —>
</head>
<body>
<!— Здесь размещается основной раздел. —>
</body>
ГЛАВА 80. Создание HTML-документов 445

Вернитесь к прежнему примеру с юмористической строкой текста. Поскольку вы хо-
тите, чтобы браузер отображал этот текст внутри окна документа, она помещается в
основной раздел страницы:
<head>
<!— Здесь размещается раздел заголовка. —>
</head>
<body>
<p>Take my wife. Please.</p>
</body>
Чтобы включить дополнительный текст на страницу, добавьте дополнительный текст
в основной раздел:
<head>
<!— Здесь размещается раздел заголовка. —>
</head>
<body>
M F a v o r i t e Jokes
y
We could t a l k about women.
<p>Take my wife. Please.</p>
</body> '•
He забудьте разметить новое содержимое с помощью надлежащих тегов:
<head>
<!— Здесь размещается' раздел заголовка. —>
</head>
<body>
<hl>My Favorite Jokes</hl>
<p>We could t a l k about women.</p>
<p>Take my wife. Please.</p>
</body>
Сейчас вы занимаетесь созданием Web-страницы «My Favorite Jokes» (мои любимые
шутки). Обратите внимание, что заголовок страницы — My Favorite Jokes — находит-
ся внутри основного раздела страницы, это означает, что браузер отображает этот
текст в окне документа. Если строку My Favorite Jokes требуется сделать также офици-
альным названием страницы, необходимо добавить этот текст в раздел заголовка
страницы между тегами < t i t l e > :
<head>
<title>My Favorite Jokes</title>
446 Строим Web-сайты

</head>
<body>
<hl>My Favorite Jokes</hl>
<p>We could talk about women.</p>
<p>Take my wife. Please.</p>
</body>
Название страницы не обязательно должно совпадать с заголовком. Назвать страницу
можно как угодно:
<head>
<title>My Humor S i t e : The Jokes P a g e < / t i t l e >
,</head>
<body>
• <hl>My F a v o r i t e Jokes</hl>
<p>We could t a l k about women.</p>
<p>Take my wife. Please.</p>
</body>
В качестве заключительного шага поместите всю страницу между открывающим и зак-
рывающим тегами <html>. Эти теги всего лишь сообщают браузеру, что данная стра-
ница является HTML-документом:
<html>
<head>
<title>My Humor S i t e : The Jokes Page</title>
</head> •
<body>
<hl>My F a v o r i t e Jokes</hl>
<p>We could t a l k about women.</p>
<p>Take my wife. Please.</p>
</body>
<html>
Весь документ, сверху донизу выглядит в браузере так, как показано на рисунке 80.3.
Итак, здесь не на что особо смотреть. А кого это волнует? Главное, что вы научились
писать HTML-код. Многие Web-дизайнеры начинали с написания именно таких
страничек.
447
ГЛАВА 80. Создание HTML-документов


File ?* View Favorites Toot* tjeip



My Favorite Jokes
We could talk about women.

Take my wife Please.




Рис. 80.3. Завершенная страница «My Favorite Jokes»
(Мои любимые шутки) выглядит так, как показано на рисунке




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


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




Определение
Локальная папка (local folder), ИЛИ локальная корневая папка (local
root folder), — это папка на персональном компьютере, в которой со-
держатся все файлы Web-сайта.


Большинство Web-дизайнеров начинают новый проект с создания папки, в которой
будут храниться все файлы сайта. Такое место называется локальной папкой или ло-
кальной корневой папкой. Рассматривайте наличие этой папки как достоинство:
удобно хранить все файлы сайта в одном месте. Вряд ли кому-нибудь хочется, чтобы
файлы были разбросаны по всему жесткому диску. Но наличие локальной корневой
папки важно также по техническим причинам. При загрузке сайта в Интернет вы хо-
тите, чтобы местоположения файлов на вашем персональном компьютере как можно
448 Строим Web-сайты

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



Определение
Структура (structure) Web-сайта — это способ организации файлов в
категории и подкатегории.



Внутри локальной корневой папки выполняется дополнительное упорядочивание,
которое создает структуру сайта. Будьте аккуратны здесь — в этом смысле структура
несколько отличается от структуры HTML-документа. Структура Web-сайта — это
способ организации файлов в категории и подкатегории. Она не имеет ничего обще-
го с HTML-тегами или разметкой текстовых файлов.
Для создания структуры сайта используются папки и подпапки. Чтобы правильно
справиться с работой, необходимо вначале все хорошенько обдумать. Напрягите все
свое воображение и постарайтесь представить категории информации, которые бу-
дут присутствовать на вашем сайте. Если вы создаете личный сайт, категории могли
бы быть похожи на следующий пример:
• My Hobbies (Мои увлечения)
• My Favorite Books (Мои любимые книги)
• My Favorite Jokes (Мои любимые шутки)
• About Me (Обо мне)
Согласно существующему эмпирическому правилу следует создавать внутри Лекаль-
ной корневой папки вложенную папку для каждой основной категории вашего сайга.
В предыдущем примере потребуется четыре папки внутри локальной корневой папки:
по одной папке на каждую из четырех категорий. Не вкладывайте папки одна в дру-
гую. Вместо этого задайте свою структуру так, чтобы при входе в локальную корневую
папку были видны все четыре папки — на одном уровне иерархии, если пользоваться
техническим жаргоном.


Определение
Уровень (level) папки — это ее положение в иерархии структуры сай-
та. Папки основных категорий принадлежат верхнему уровню — те ,
находятся непосредственно внутри локальной корневой папки.


Как следует называть папки? Подойдут любые имена, но назначайте короткие име-
на (по возможности восемь знаков или меньше). Используйте вместо пробела знак
подчеркивания (_) и придерживайтесь обычных буквенно-числовых знаков. Это оз-
начает исключение из употребления специальных типографских символов или
ГЛАВА 80. Создание HTML-документов 449

пунктуационных знаков. Для структуры своего домашнего сайта вы бы могли прис-
воить папкам следующие имена:
• hobbies (Увлечения)
• books (Книги)
• jokes (Шутки)
• about_me (Обо мне). Можно также назвать aboutme, или просто about
Теперь посмотрим, что происходит. Начав создавать страницы для своего сайта, вы
можете достаточно легко догадаться, чему они соответствуют. Вы помещаете страни-
цы о своих увлечениях в папку hobbies (увлечения). Страницы о своих любимых шут-
ках помещаются в папку jokes (шутки). Как видим, все достаточно просто.
Если требуется разбить основную категорию на подкатегории, нет проблем. Создайте
подпапки:
• hobbies (Увлечения)
• sports (Спорт)
• films (Фильмы)
• computers (Компьютеры)
• games (Игры)
• books (Книги)
• jokes (Шутки)
• about_me (Обо мне)
Расширенная структура предоставляет более точную файловую систему. Теперь вы
точно знаете где, например, должны находиться все страницы о фильмах.
Для сайта необходима еще одна папка — папка изображений.
• hobbies (Увлечения)
• sports (Спорт)
• films (Фильмы)
• computers (Компьютеры)
• games (Игры)
• books (Книги)
• jokes (Шутки)
• about_me (Обо мне) '.
• images (Изображения)
Как видите, эта папка находится на верхнем уровне структуры, непосредственно внут-
ри локальной корневой папки. Используйте папку images (Изображения) для хране-
ния всей графической информации, присутствующей на страницах вашего сайта.
Строим Web-сайты
450


Часто задаваемые вопросы
Итак, папка изображений предназначена для хранения только
изображений?
Многие дизайнеры хранят в папке изображений помимо изображе-
ний другие файлы. Это нормально. Безусловно, папка изображений
является отличным местом для хранения клипов, звуковых эффек-
тов и подобных файлов. Просто не помещайте в нее HTML-страни-
цы. Проверяйте, чтобы они размещались в папках соответствующих

<< Пред. стр.

стр. 47
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>