Май 2010

Самоучитель по креативному веб-дизайну. Книга 1, стр.31

http://www. MyWebserver. com/TestPage. htm

http://www. MyWebserver. com/HTDocs/TestPage2.htm



Если вы подключаетесь к Internet по коммутируемой линии или не хотите платить за статический IP-адрес и использовать один из своих компьютеров в качестве Web-сервера, ваш Internet-провайдер может разместить разработанный Web-сайт на собственном сервере. Многие провайдеры предлагают 5—10 Мб (или больше) Web-пространства, предоставление которых входит в плату за подключе —

ние к Internet. Свяжитесь со своим провайдером или регистратором доменных имен (например, VeriSign), чтобы узнать о предоставляемых ими услугах хостинга Web-сайтов. Если ваш сайт будет размещен на сервере Internet-провайдера или другой компании, вы просто скопируете Web-страницы, которые хотите опубли — ковать, в иерархию папок Web-сайта на жестком диске компании, предоставив — шей хостинг, вместо корневого каталога PWS (и подкаталогов корневого каталога)

на локальном жестком диске.

4 2 Глава 1. Основы языка HTML





Обратите внимание, что после установки PWS Windows автоматически запус —

кает Web-сервер всякий раз, когда вы перезапускаете компьютер. Чтобы остано — вить Web-сервер, щелкните на кнопке Stop под именем Web-сервера в верхней части главного окна диспетчера PWS. (После остановки PWS будет находиться в

Самоучитель по креативному веб-дизайну. Книга 1, стр.32

состоянии ожидания до тех пор, пока вы не перезапустите Web-сервер вруч- ную — даже если вы будете перезапускать компьютер в течение этого промежутка времени.) Чтобы перезапустить Web-сервер, щелкните на кпопке Start, которая появляется вместо кнопки Stop, щелчком на которой был остановлен Web-сервер.

(Остановить или приостановить Web-сервер можно также, выбрав в меню Properties пункт Stop Service (Остановить) или Pause Service (Приостановить); чтобы вновь запустить Web-сервер, выберите в меню Properties пункт Start Service (На — чать) или Continue Service (Продолжить)).



Описание содержимого Web-страницы при помощи заголовка

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.33

ние Web-страницы сообщает «имя» страницы и в нескольких словах описывает ее

предназначение, как показано на рис. 1.11.





Глава 1. Основы языка HTML 43





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

ным и конечным дескрипторами заголовка ( ) в заголовочной ча — сти HTML-кода Web-страницы:





Название каждой Web-страницы должно предоставлять описание содержимого

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

Однако названия не только напоминают посетителям, где именно на вашем

Web-сайте они находятся. Названия используются также в следующих целях:

• Web-браузеры используют текст названия, когда посетитель делает закладку

на странице, то есть когда посетитель добавляет Web-страницу в список

Избранное в Internet Explorer или в список Закладки в Netscape Navigator.

Название вроде «Главная страница» не облегчает идентификацию вашей

Web-страницы среди других закладок на компьютере посетителя.

• Программы-спайдеры (программы автоматизированного поиска в Internet)

используют текст названия при добавлении вашей страницы в базы дан — ных поисковых систем. Опять-таки, название «Главная страница» не предо — ставляет никакой полезной информации. Используйте в своих названиях описательные формулировки — слова, которые посетители могут ввести в поле поиска поисковой системы, пытаясь найти ваш Web-сайт.

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.34

Например, на сайте агентства по недвижимости названия могут использо — ваться для обозначения страниц «Продам дом» или «Сдам в аренду».

Кроме этих функций, консорциум W3C считает Web-страницу, не имеющую названия, недействительной или нелегальной. Термин «нелегальная» («illegal») не

означает, что кто-то арестует вас за создание страниц без названий. Однако ис —

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

44 Глава 1. Основы языка HTML



Идентификация Web-документов с помощью

определения типа документа

Один из самых лучших способов научиться тонкостям HTM L — это просмат — ривать HTML-операторы, используемые в коде Web-страниц, которые встречают —

ся вам в ваших путешествиях по Web. Чтобы просмотреть исходный HTML-код

Web-страницы, выберите пункт Source (В виде HTML) в меню View (Вид) вашего

браузера. (Если вы пользуетесь Netscape Navigator, выберите View | Page Source (ВИД | Источник страницы)). Анализируя Web-страницы, вы обнаружите, что во многих HTML-документах в начале Web-страницы присутствует дескриптор типа

документа ().





Определение типа документа (Document lype Definition — DID ) идентифицирует версию языка HTML, использованную при создании Web-страницы. Эта информа — ция важна для Web-браузеров, программ проверки HTML-кода и другого про — граммного обеспечения, применяемого для дизайна и компоновки Web-страниц. Чтобы проверить существующий HTML-документ, зайдите на сайт http:/ /

vaiidator. w3c. org. Программа проверки HTML-кода проверяет организацию и

синтаксис Web-документа на основании информации, предоставленной в DTD. Когда в объявлении указано, что документ соответствует строгой версии HTML

4.01, программа проверки оценивает Web-страницу исходя из стандарта HTML

4.01 и генерирует отчет о результатах анализа.

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.35

страницу, созданную с применением версии HTML 4 недействительной, если

HTML-документ не начинается с DTD. DTD находится в начале документа, до

дескриптора. Ниже показан корректный формат типового DTD:







html. Идентифицирует код как версию языка HTML.





public. Идентифицирует язык как общедоступный.





название версии. Идентифицирует полное название конкретной

версии

языка HTML. Например, полное название HTML 4.0 — это -//W3C//DTD

HTML 4.0 1 Transitional//EN.

• икь-адрес. Указывает, где в Internet находится общедоступное определение

HTML-КОДа, например, www. w3.org/TR/html4/loose. dtd.



Действительным DTD для Web-страницы, описанной с помощью HTML 4.01, будет следующее:





Глава 1. Основы языка HTML 45

^



Опция loose. dtd в вышеприведенном коде объявляет, что документ может

включать все элементы, разрешенные «строгим» стандартом HTML 4, дополни —

тельные атрибуты описания представления, а также может включать нерекомен —

дованные элементы. Напротив, использование в DTD strict. dtd объявило бы, что документ строго соответствует стандарту HTML 4. Строгая версия HTML

4.01 придает большее значение структуре HTML-документа, нежели представле- нию страницы в Web-браузере. Это не значит, что строгая версия HTML 4.01 преуменьшает значение представления Web-страницы; она просто концентриру —

ется на структуре кода разметки HTML. Нерекомендованные дескрипторы и эле — менты, такие как фреймы и цели ссылок, в строгом HTML не допускаются. Тре —

тье определение типа документа, frameset. dtd, используется при проверке

HTML-документов, содержащих фреймы.

В настоящее время ни Netscape Navigator, ни Internet Explorer не требуют включения DTD до начала HTML-кода вашей Web-страницы, то есть перед на —

чальным дескриптором HTML () в верхней части вашего Web-документа. Однако в начало всех страниц, написанных с использованием версии HTML 4.0

и 1зыше, следует помещать DTD. Таков совет консорциума W3C: то, что сегодня является необязательным, в недалеком будущем может стать требованием. По — этому будьте во всеоружии и используйте DTD во всех своих Web-страницах уже сейчас. (В целях экономии пространства и упрощения кода в примерах, приве — денных в этой книге, определения типа документов опущены.)

Самоучитель по креативному веб-дизайну. Книга 1, стр.36



Вставка комментариев в Web-документы

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

суется в ваших услугах как Web-дизайнера, будет знать, как с вами связаться.

Помимо этого, с помощью комментариев можно временно скрыть некоторые

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

хотите, чтобы браузер отображал новое содержимое до тех пор, пока руководство

не даст соответствующего разрешения. Поставив HTML-дескрипторы коммента —

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



Чтобы создать комментарий, заключите информативный текст (или HTML-опера — торы, которые вы хотите закомментировать) между начальным и конечным деск —

рипторами Комментария, таКИМИ как.

Ставить начальный дескриптор комментария перед каждой строкой текста или HTML-утверждением необязательно; Web-браузер будет игнорировать все,

46 Глава 1. Основы языка HTML





что он обнаружит после начального дескриптора комментария и — до следующего

конечного дескриптора комментария. Например, в следующем фрагменте кода показаны три строки комментариев, вставленные в заголовочный раздел Web- страницы:



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

(включая комментарии) HTML-документа в отдельном* окне документа.

Помимо использования комментариев для предоставления личных данных,

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.37



Без дескрипторов комментариев, обрамляющих описание JavaScript-функции

в этом примере, Web-браузеры, не поддерживающие дескриптор сценария, могут проигнорировать этот дескриптор и вывести на экран JavaScript-код в виде тек — ста. И, наоборот, браузеры, которые поддерживают сценарии, будут игнорировать HTML-дескрипторы комментария, поскольку в сценариях для обозначения ком — ментариев используются /* и */.

Глава 1. Основы языка HTML. 47



Определение гарнитуры шрифта текста Web-страницы При отображении текста Web-страницы Web-браузер будет использовать гар — нитуру и размер шрифта, установленные в браузере по умолчанию, если вы не

определите размер и гарнитуру шрифта в HTML-коде Web-страницы. Управлять

размером и внешним видом шрифта нужно ввиду того, что то, как выглядит

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

текста: вот почему заголовки крупнее и зачастую выделены другой гарнитурой шрифта, отличной от текста основной части документа.

Выбранная вами гарнитура шрифта передает настрой и создает атмосферу, в которой посетитель читает ваше сообщение. Использование неправильной гар — нитуры сбивает посетителя с толку, поскольку содержимое кажется неуместным. Например, в ряде исследований (одно из которых проводилось Йельским уни — верситетом) было установлено, что шрифты с засечками (serif) передают более серьезный тон, чем шрифты без засечек.(sans serif). Следовательно, шрифт вроде Helvetica или Times New Roman будет использоваться для официального доку —

Самоучитель по креативному веб-дизайну. Книга 1, стр.38

мента, a Comic Sans или Arial подойдет для менее серьезного или неформально —

го сообщения, как показано в примерах ниже:

Шрифты с засечками, например, Times New Roman,

придают тексту официальный вид. Шрифты с за — сечками следует использовать для передачи серь- езного тона документа.

С другой стороны, использование шрифтов

без засечек, например/ Comic Sans, при — даст документу менее формальный вид.







Чтобы изменить гарнитуру шрифта, заключите текст между начальным и конеч — ным дескрипторами в виде:



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

текст шрифтом Helvetica до тех пор, пока браузер не обнаружит дескриптор

:



Прочитав дескриптор в HTML-коде Web-страницы, браузер вернется

к отображению текста страницы своим шрифтом по умолчанию.

48 Глава 1. Основы языка HTML





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

дет использовать вместо него свой шрифт по умолчанию.

Посетитель сайта может установить шрифт по умолчанию браузера, изменив настройки Web-браузера. Например, чтобы изменить шрифт по умолчанию в Internet Explorer 5, в меню Tools (Сервис) выберите Internet Options (Свойства обо — зревателя). Затем щелкните на кнопке Fonts (Шрифты). Internet Explorer, в свою очередь, выведет на экран диалоговое окно Fonts (Шрифты), в котором можно выб —

Самоучитель по креативному веб-дизайну. Книга 1, стр.39

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

менте не указан шрифт или указанного шрифта нет на компьютере посетителя.

Кроме указания основного шрифта, атрибут face позволяет выбрать второй, третий и даже четвертый шрифт. Например, вы хотите, чтобы текст вашего доку — мента отображался с использованием шрифта Helvetica. Однако если на компью — тере посетителя нет шрифта Helvetica, вместо него можно использовать шрифт Georgia. В приведенном ниже фрагменте кода показано, как можно указать аль — тернативный шрифт, который будет использован в случае отсутствия основного шрифта на компьютере посетителя:





Атрибут face дает Web-браузеру указание отображать текст между начальным

и конечным дескрипторами шрифта () шрифтом Helvetica, а если шрифта Helvetica на компьютере нет, использовать вместо него шрифт Georgia.

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

При указании шрифтов записывайте названия шрифтов строчными буквами, поскольку в этом случае система будет искать название шрифта, записанное как

строчными, так и заглавными буквами. И наоборот, если вы запишете название шрифта заглавными буквами, а на компьютере посетителя шрифт будет установ — лен строчными буквами, Web-браузер не найдет нужного шрифта.

Управление структурой текста с помощью

дескрипторов абзаца и перевода строки

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

Глава 1. Основы языка HTML 49





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





Web-браузеры игнорируют символы возврата каретки и перевода строки, кото —

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.40







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

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

В отличие от дескриптора, дескриптор

не имеет конечного дескрип- тора. Обнаружив дескриптор

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

, либо дескриптора . Если вы хотите просто перейти на следую —

5 0 Глава 1. Основы языка HTML





щую строку, используйте дескриптор

; если же вы хотите перейти на следу — ющую строку и вставить пустую строку между текущей и следующей строками, вам нужно воспользоваться дескриптором.

Текст в приведенном ниже HTML-коде описывает, как работают дескрипторы

и

, а также как будет выглядеть этот текст в окне Web-браузера (см.

рис. 1.13):



Дескрипторы форматирования (такие как и

) определяют, где закан — чивается строка текста в окне браузера. Говоря языком редактирования текста,

дескриптор вставляет жесткий возврат каретки, а дескриптор — два же —

стких возврата каретки. I • Web-браузер (как и текстовый процессор) выполняет мягкий возврат каретки для

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

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



Полезные ссылки
Случайные записи
  • 10.03.2011">Руководство по actionscript. часть 4, стр. 038
  • 10.03.2011">Руководство по actionscript. часть 4, стр. 019
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 062
  • 10.06.2011">Дом с пещерой для Брэда Питта
  • 24.02.2011">Руководство по actionscript. часть 7, стр. 005
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 108
  • 06.03.2011">Руководство по actionscript. часть 4, стр. 151
  • 17.03.2011">Руководство по actionscript. часть 2, стр. 145
  • 19.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.2
  • 17.03.2011">Руководство по actionscript. часть 2, стр. 147
  • 15.03.2011">Руководство по actionscript. часть 3, стр. 061
  • 09.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.139
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 143
  • 01.02.2010">Модульная сетка. Генераторы и сервисы
  • 17.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.12
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...