Web-дизайн: Тонкости, хитрости и секреты
© Copyright Борис Леонтьев
Web-дизайн Web-страницы можно создавать несколькими способами -- с нуля или наоснове существующего шаблона. В последнем случае, впрочем как и в первом, увас могут быть проблемы при тестировании созданного документа, так каксгенерированным ссылкам свойственно ошибаться. Решить эту проблему может ужене редактор, а обыкновенный обозреватель WWW. Eсли у вас имеется коллекция картинок, фонов, маркеров и разделителей,то создание Web-страниц -- весьма увлекательное занятие. Кроме всего этого,помните, что вам обязательно понадобится софт для преобразования обычныхтекстовых файлов в файлы формата HyperText Markup Language. Хороший редактор Web-страниц должен, с одной стороны, позволятьредактировать код HTML, а с другой -- просматривать произведенные такимобразом изменения в режиме непосредственного просмотра. Если вы начинаете с нуля, то вы должны ввести или импортировать текст вдокумент, отформатировать абзацы, разместить картинки. Все картинки итекстовые файлы сохраняются в одном каталоге. Затем все это хозяйствоотправляется к вашему поставщику Internet на его винчестер.
Гипертекстовый документ Под гипертекстовым документом понимают документ, содержащий такназываемые ссылки на другой документ. Реализовано все это через протоколпередачи гипертекста HTTP (HyperText Transfer Protocol). Информация в документах Web может быть найдена по ключевым словам. Этоозначает, что каждый обозреватель Web содержит определенные ссылки, черезкоторые образуются так называемые гиперсвязи, позволяющие миллионампользователей Internet вести поиск информации по всему миру. Гипертекстовые документы создаются на базе языка HTML (HyperText MarkupLanguage). Этот язык весьма прост, управляющие коды его, которые,собственно, и компилируются обозревателем для отображения на экране, состоятиз текста ASCII. Ссылки, списки, заголовки, картинки и формы называютсяэлементами языка HTML.
Универсальный локатор ресурса Web может открывать доступ к другим ресурсам Internet, например кэлектронной почте, FTP, Gopher, WAIS или конференциям Usenet. Одно из такихсредств серфинга по Web обеспечивает встроенный в Windows 98 обозревательMicrosoft Internet Explorer 4.0. Документ в Internet ищется по так называемому адресу URL (UniformResource Locator), синтаксис которого следующий:
protocol://hostport/path
hostport -- адрес сервера с соответствующим номером порта. Этотпараметр отображает так называемую машинную адресацию. Машинная адресацияможет быть числовой или буквенной.
path -- путь. Вместо аргумента
protocol может стоять: http -- любая гипертекстовая информация. ftp -- протокол передачи файлов. telnet -- терминальный доступ. gopher -- "предшественник" WWW. afs -- файловая система Internet. news -- конференции Usenet. wais -- система баз данных Internet.
Домены Internet Все узлы Web классифицированы Международным центром сетевой информации(NIC) на шесть доменов:
com -- коммерческие предприятия, например, провайдеры Internet
edu -- образовательные учреждения, колледжи и университеты
net -- действующие сети, например, Network Information Center
org -- непрофессиональные организации
mil -- военные сети
gov -- правительственные учреждения, например, whitehouse.gov Кроме этого, все доменные имена имеют указатели на страну, в которойрасположен данный узел. Например, доменные имена .uk, .jp и .us представляютсоответственно Великобританию, Японию и США.
HTML В настоящее время существует масса редакторов Web-страниц, которые нетребуют от вас знаний основ HTML. Но для того чтобы уметь профессиональноподготавливать гипертекстовые документы, вы должны знать их внутреннеестроение, то есть код документа HTML. HTML позволяет вам формировать различную гипертекстовую информацию наоснове структурированных документов. Обозреватель определяет сформированные ссылки и, через протоколпередачи гипертекста HTTP, открывает доступ к вашему документу другимпользователям Internet. Разумеется, для успешной реализации всего этогонеобходим софт, полностью совместимый с WWW и поддерживающий HTML.
Описание HTML HTML-документ -- это обычный текстовой файл. Используя, например,обозреватель Netscape Navigator вы можете просмотреть результат вашейработы, просто загрузив в него созданный на основе синтаксиса HTML текстовойфайл. Гипертекстовый язык предоставляет только информацию для чтения. Этоозначает, что редактировать Web-страницы может лишь тот, кто их создал, а непростой пользователь Сети сетей. Впрочем, если забежать немного вперед,можно сказать, что используя общий шлюзовой интерфейс (CGI) можно добавлятьнекоторые операторы HTML в сгенерированную страницу.
Тэги Самый смак гипертекстового языка -- это ссылки. В мировой паутине выпросто нажимаете на ссылку и мгновенно оказываетесь в другой точке земногошара на выбранной вами страничке. По традиции всех классических руководств по HTML мы приводим самыйпростой гипертекстовый документ.
Пример простого HTML документа Здесь размещен заголовок первого уровня
Добро пожаловать в Internet! Первый и последний параграф. В этом примере мы использовали следующие термины гипертекста (такназываемые тэги):
</b> -- тэг, использующийся для определения заголовка. <br><br><b><H1></b> -- тэг заголовка. <br><br><b></b> -- тэг метки параграфа. В языке описания гипертекстовых документов все тэги парные. В конечномтэге присутствует слэш, который сообщает обозревателю о завершении. Но!Существует одно исключение из этого правила пар: В природе не существует тэга <br><br><b><br></b>. Не все тэги совместимы с обозревателями. Если обозреватель не понимаеттэг, то он его просто пропускает. Итак, документ HTML это заголовок: <br><br><b><html></b><br><br><b> <head>
Заголовок </head></b><br><br><b> <body></b><br><br><b> ...</b> и текст <br><br><b>...</b><br><br><b> </body></b> с названием: <br><br><b><head>
</b><br><br><b> <title> Название
Название документа Это не правило, и даже не закон, это факт: Любой документ HTML имеет название. По названию вашего документа HTML другие обозреватели могут найтиинформацию. Место для названия всегда определено -- оно находится вверхуэкрана, и отдельно от содержимого документа. Максимальная длина названия --40 символов.
Форматирование Форматирование может быть непосредственным или авторским. Если выиспользуете тэг
, то форматирование считается авторским:
Следующие тэги присущи непосредственному форматированию:
-- параграф.
-- горизонтальная линия.
-- обрыв строки.
Заголовки и подзаголовки Язык HTML позволяет вам работать с шестью уровнями заголовков. Первыйзаголовок -- самый главный. На него обращается особое внимание. Остальныезаголовки могут быть оформлены, например, жирным шрифтом или прописнымибуквами. В HTML первый заголовок обозначается как
:
Текст Под
n понимается уровень заголовка, то есть числа 1, 2, 3, 4, 5 или 6. В HTML первый заголовок может совпадать с названием документа.
Списки Списки подразделяются на ненумерованные:
Элемент списка нумерованные:
Элемент списка c описаниями:
Собака (элемент) Друг человека (описание элемента) и вложенные: <
UL> Примус Другой примус ... ... Выделение текста Текст в документе HTML может быть выделен одним из следующих способов:
-- цитата
-- программный код
-- определение
-- логический акцент
-- ввод с клавиатуры
-- сообщения компьютера
-- сильный акцент
-- переменные
Один большой параграф В HTML разбиение на строки не принципиально. Это означает, что выможете разбить строки вашего документа в любом его месте. Связано это с тем,что в гипертекстовом документе идущие подряд отбивки превращаются в одну.Но! Если отбивка сделана после тэга
, то она учитывается. Есликакой-нибудь тэг
игнорируется, то отбивка также учитывается. В остальныхслучаях обозреватель будет пропускать отбивки.
Ссылки HTML позволяет вам связать текст или картинку с другими гипертекстовымидокументами. Текст, как правило, выделяется цветом или оформляетсяподчеркиванием. Для этого используется тэг
. Помните, что после буквы A долженстоять пробел. Чтобы сформировать ссылку: n наберите
n введите
HREF="filename"> n наберите после
> текст гипертекстовой ссылки n наберите тэг
Один из вариантов гипертекстовой ссылки может выглядеть так:
Bob Здесь слово
Bob ссылается на документ
BobAnapa.html, образуягипертекстовую ссылку. Если документ, формирующий ссылку, находится в другой директории, топодобная ссылка называется относительной:
Bob Если вы хотите указать полное имя файла, то вам необходимо использоватьсинтаксис UNIX. Ссылки можно формировать на основе так называемого универсальноголокатора ресурса, то есть используя следующий синтаксис:
protocol: //hostport/path
Предварительное форматирование текста Тэг
позволяет сформировать текст, оформленный моношириннымшрифтом. Используйте этот тэг для оформления листингов программ.
Расширенные цитаты Тэг
позволяет вам включить цитату в уединенный объект.
Адрес Тэг
позволяет сформировать информацию об авторе документаHTML.
Куча слов по поводу форматирования символов В HTML слова и строки кодируются логическими и физическими стилями. Физические стили форматируют текст. Логические стили форматируют через определение в гипертекстовомдокументе некоторого значения. Это в частности означает, что тэг заголовкапервого уровня не содержит информации о размере шрифта и гарнитуре. Поэтому,чтобы изменить символьное форматирование заголовка вы должны модифицироватьзаголовок первого уровня. Через логические (в том числе и символьные) тэгивы можете сформировать согласованный гипертекстовый документ, то естьопределить заголовок первого уровня в качестве только
(без информации огарнитуре шрифта и его кегле).
Логические стили Ниже мы представляем примеры логических стилей документа HTML.
Определить слово. Как правило, курсив.
Усилить акцент. Как правило, курсив.
Заголовок чего-то большого и хорошего. Курсив.
Текст, введенный с клавиатуры. Моноширинный жирный шрифт.
Сообщение программы. Моноширинный шрифт.
Ну очень важные участки. Жирный шрифт.
Замена переменной на число. Курсив.
Физические стили Гипертекстовый документ может быть оформлен с использованием следующихстилей: Полужирный Курсив Моноширинный
Специальные символы Символы, которые не могут быть введены в текст документанепосредственно через клавиатуру называются специальными символами. Длятаких символов существуют особые тэги. Четыре символа -- знак меньше
<, знак больше
>, амперсанд
& и двойныекавычки
" имеют специальное значение внутри HTML и следовательно не могутбыть использованы в тексте в своем обычном значении. Скобки используются для обозначения начала и конца HTML тэгов, аамперсанд используется для обозначения так называемойescape-последовательности. Для использования одного из этих символов введитеодну из следующих escape-последовательностей:
< Знак меньше.
> Знак больше.
& Амперсанд.
" Кавычки.
Принудительный перевод строки Тэг
переводит только одну строку, то есть без дополнительногопробела.
Горизонтальные разделители Тэг
формирует горизонтальную линию по всей ширине окна.
Встроенные изображения Вы можете встраивать в ваш документ картинки. Синтаксис встроеннойкартинки следующий:
Здесь
image_URL есть указатель на файл картинки, синтаксис которогосовпадает с синтаксисом ссылки HTML.
Звуковоспроизведение Для того, чтобы вставить в вашу страничку звуковой файл, например,midi-файл, используйте следующую конструкцию:
