www.diferentZ.narod.ru_Создаем сайт1-Основы HTML

Создание собственной web-страницы в Internet Константин Иванченков

Первый шаг: СНАЧАЛА БЫЛ... ТЕКСТ

Это загадочное слово "WWW". Что такое HTML. Как обратиться к файлу в Internet. Понятие URL. Визуальные редакторы или Блокнот. Структура HTML-документа. Основные дескрипторы (теги). Использование команд форматирования текста. Создаем небольшую WEB-страничку без графики и публикуем ее в Internet.

С появлением Internet проблема межплатформной несовместимости файловых форматов стала ощущаться особенно остро: ведь тем, кто размещает информацию в Сети, хочется, чтобы она была доступна как можно более широкому кругу пользователей без особенных затрат. Очевидно, что самый простой путь решения - разработка общепринятого формата файлов, под который и будут <подстраиваться> вновь создаваемые приложения. В WWW таким стандартом стал HTML.

Это загадочное слово WWW

Слово (World Wide Web) относится к той немногочисленной категории понятий, название которых известно всем, однако далеко не всякий в состоянии правильно объяснить, что же это в сущности такое. Довольно часто приходится слышать, как WWW отождествляют с Internet, что, мягко говоря, не совсем верно. На самом деле Web - это одна из частей Internet, которая на протяжении последних 5-6 лет стала феноменально популярной и способствовала гигантскому скачку развития Сети в целом.

WWW можно назвать графическим интерфейсом для работы с Internet. Изобретение Web связано с именем Тима Бернерс-Ли (Tim Berners-Lee). Бернерс-Ли работал в швейцарской лаборатории физики частиц CERN и ему часто приходилось использовать Internet для общения с коллегами. В то время получение информации из Сети было нетривиальной задачей и требовало высокой квалификации и владения специальными навыками. Ученый облегчил себе работу, создав систему, упрощающую навигацию. В 1991 г. система получила признание и была названа WWW.

переводится как <всемирная паутина>, и название достаточно точно определяет суть явления. WWW - гигантская сеть страниц (документов), связанных между собой гиперссылками. Это действительно очень напоминает своими колоссальными размерами и структурой паутину, протянувшуюся по всему миру.

Наравне с WWW существуют и другие части Internet: e-mail, конференции, терминальный доступ, некоторые устаревшие службы, (например, Gopher), множество разнообразных коммуникационных программ, работающих через Сеть. Образно говоря, Internet - провода, позволяющие компьютерам разных типов обмениваться информацией. А вот WWW, электронная почта, Gopher и т. д.- это то, что наполняет эти провода содержанием.

Способ, позволяющий <общаться> компьютерам, называется протокол. Internet работает на основе двух протоколов: TCP (Transmission Control Protocol - протокол управления передачей) и IP (Internet Protocol - протокол Internet),- которые вместе стали известны как TCP/IP. Изобретение этих протоколов в начале 80-х годов позволило обмениваться данными и использовать их как компьютерам, так и компьютерным сетям разных типов.

Что такое HTML

Основа WWW - файлы в формате HTML (Hyper Text Markup Language - язык разметки гипертекста), или гипертекстовые страницы. Гипертекст - это легкая в использовании и чрезвычайно мощная система связанных слов и фраз, позволяющая легко перемещаться по особым образом организованным страницам. Она связывает фразу или слово одной страницы с любой другой страницей, абзацем, фразой или словом. Например, на Web-странице в предложении <Как ныне сбирается вещий Олег отмстить...> слово <Олег> выделено как гиперссылка. Щелкнув по ней, вы попадаете на страничку с историческим комментарием о роли князя Олега в истории Руси. Если развить идею гипертекста и включить в него графику, видео и звук, мы получим гипермедиа. Гипермедиа - среда, основанная, как и гипертекст, на взаимосвязях, в которой в качестве гиперссылок могут выступать визуальные и аудиокомпоненты. Гипертекст и гипермедиа являются фундаментальными для WWW технологиями, а HTML - средство для работы с этими технологиями.

HTML расширение языка SGML (Standart General Markup Language - стандартный язык разметки), глобального стандарта описания языков разметки гипертекста. SGML одобрен ISO (International Organization for Standartization - Международная организация по стандартизации) в 1986 г. и является стандартом для многих государственных и коммерческих систем создания документов. Документы SGML не <привязаны> к какой-нибудь программе, операционной системе и т. п. Таким образом, когда потребовалось выбрать стандарт для документов WWW, выбор естественно остановился на HTML.

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

Как обратиться к файлу в Internet

Документы, из которых состоит Web, находятся на Internet-серверах. Чтобы добраться до какого-либо WWW-документа, вы должны набрать в броузере, в строке <адрес>, путь к этому документу. Этот путь называется URL (Uniform Resourse Locator - унифицированный указатель ресурса). URL состоит из названия сервера и, если требуется, названия каталога, в котором находится документ, и названия самого документа (т. е. имени файла HTML), разделенных знаком обратной косой черты (обратным слэшем) .

Регистр символов, используемых в URL, не имеет никакого значения, т. е. www.submarine.ru/index.html указывает на абсолютно тот же сервер, что и Www.SubMarine.Ru/index.html. В то же время иногда регистр символов, используемых в названиях директорий и файлов на сервере, может иметь значение (это зависит от программного обеспечения, установленного на сервере).

Для передачи разных типов данных были созданы протоколы, базирующиеся на TCP/IP. При работе с гипертекстовыми файлами используется HTTP (Hypertext Transfer Protocol - протокол передачи гипертекста). Пересылка по сети файлов любых типов осуществляется с помощью протокола FTP (File Transfer Protocol - протокол передачи файлов). Используя этот протокол, мы будем загружать файлы нашей web-странички на сервер. Кроме того, существуют протоколы передачи файлов новостей (news), службы Gopher и т. д.

В принципе, перед адресом документа, который вы хотите загрузить из Сети, необходимо проставлять тип протокола, по которому этот документ будет передаваться на ваш компьютер, добавляя к нему двоеточие и два обратных слэша (http://, ftp:// и т. д.), но делать это на практике нет необходимости, так как современные броузеры делают это автоматически. Итак, после того, как вы набрали URL интересующего вас документа, ваша программа-броузер, используя соответствующий протокол, обращается к требуемому серверу и запрашивает у него указанный файл. Далее файл передается на ваш компьютер и броузер и, используя команды форматирования и ссылки на объекты, содержащиеся в тексте, генерирует готовый для просмотра документ.

Перейдем к делу...

Из чего, собственно, состоят файлы HTML? Из обычного текста: вы можете просмотреть исходный код файла в любом текстовом редакторе, включая Блокнот Windows (Notepad). Но в этом случае вы увидите не web-страничку, а лишь текст в сочетании с метками HTML, из которых программа-броузер ее генерирует. Редактировать web-документы вы также можете, используя самый обычный Блокнот. Именно так и поступают многие опытные web-дизайнеры, несмотря на то, что сейчас существует большое количество визуальных редакторов web-страниц. Эти редакторы зачастую обладают очень богатыми средствами и предоставляют пользователю возможность создавать великолепно выглядящие страницы, используя многочисленные шаблоны и библиотеки картинок, как правило, входящие в комплект поставки редактора. Единственное, чем не будут страдать web-страницы, подготовленные с помощью шаблонов,- это оригинальностью. Кроме того, HTML-код, который генерируют визуальные редакторы, зачастую оставляет желать лучшего: избыточность кода и ошибки в форматировании отнюдь не улучшают скорость загрузки и внешний вид документа.

Одним из самых популярных визуальных редакторов является Netscape Composer, входящий в состав пакетов Netscape Navigator Gold и Netscape Communicator (http://www.netscape.com/). Популярностью также пользуются пакеты Microsoft FrontPage (www.microsoft.com/frontpage/) и NetObjects Fusion (http://www.netobjects.com/).

Несомненно, визуальные редакторы позволяют значительно ускорить создание типовых страниц и программирование некоторых элементов, например сложных таблиц, на написание которых от руки уходит много времени. В дальнейшем мы с вами будем пользоваться одним из этих редакторов, но пока рекомендуем вам как следует разобраться со структурой HTML-документов и основными элементами HTML. Это позволит в будущем как следует приглядывать за работой визуальных редакторов и исправлять допускаемые ими ошибки. Хотя, кто знает, как правило, люди, знающие HTML <в лицо>, в дальнейшем практически не пользуются визуальными редакторами. Писать нашу первую страничку мы будем в Блокноте.

Кстати...

В WWW существует негласное правило, согласно которому первый файл, загружаемый броузером с какого-либо сервера по умолчанию, должен называться index.html. Таким образом, если вы явно не указываете имя документа, который вам требуется, а пишете только имя сервера, например www.yahoo.com, автоматически будет загружен файл index.html, находящийся на этом сервере, т. е. фактически будет выполнена команда http://www.yahoo.com/index.html. Итак, первый файл который мы с вами создадим, а потом разместим в Internet, будет называться index.html. Для этого вам придется освоить лишь несколько команд форматирования и оформления текста в формате HTML.

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

Метка языка HTML, или тег (англ. tag), или дескриптор, является основным средством разметки документа. При написании теги отделяются от остального текста угловыми скобками: <<> и <>>. Регистр символов при этом также не имеет никакого значения, но хорошим тоном считается набор тегов в верхнем регистре, т. е. заглавными буквами. Это помогает визуально отделить теги от основного текста при последующем редактировании.

Существует два вида тегов: требующие закрытия (т. е. ограничения действия) и не требующие закрытия. Например, дескриптор , изменяющий начертание шрифта на наклонное, является тегом, требующим закрытия, т. к. если он не будет закрыт, то весь текст, следующий после него, будет наклонным.

Закрывающим элементом всегда служит тот же самый тег, но со знаком после первой угловой скобки.

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

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

Теперь попробуем составить собственный шаблон WWW-странички. Запустим замечательный web-редактор - Блокнот, он же Notepad (правды здесь больше, чем иронии). В русской версии Windows 95 он должен располагаться в разделе Стандартные в меню Пуск. Впрочем, вы можете использовать абсолютно любой текстовый редактор, который вам нравится.

Первыми метками, которые мы разместим на будущей web-странице, будут <HTML> и </HTML>. Этот тег начинает и завершает любую страницу, указывая броузеру на то, что данная страница описана на HTML. На странице закрывающий тег будет стоять самым последним, в конце документа. Все, что мы будем набирать далее, должно быть расположено между этими метками.

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

Рассмотрим дескрипторы, служащие для описания документа и располагающиеся в его заголовке. Напомним, эти теги должны располагаться в заголовке между <HEAD> и </HEAD>.

<TITLE> Этим требующим закрытия дескриптором определяется название окна броузера, в котором будет просматриваться ваша страничка.

При просмотре этого документа в броузере в заголовке окна и на соответствующей этому окну кнопке на панели задач, будет текст <Моя первая web-страничка>.

<META> Этот тег используется для указания подробной информации о документе. Употребляется в сочетании с описаниями атрибутов документа и не требует закрытия.

Атрибутами дескриптора <META> может быть любая информация, которую вы хотите сообщить. Существует несколько стандартных атрибутов, необходимых для указания броузеру способа кодировки документа, имени создателя и информации для поисковых систем:

Атрибут CONTENT (содержание) указывает броузеру, что содержанием документа является HTML в кодировке (CHARSET) CP-1251(Windows). Информация о том, что документ размечен в формате HTML, фактически дублирует метку <HTML>, открывающую документ. А вот данные о кодировке документа нужны броузеру, чтобы сгенерировать конечный файл с тем набором символов, который принят в операционной системе пользователя. Если кодировка загружаемого документа отличается от системной, то броузер конвертирует текст документа, иначе - оставляет нетронутым.

Атрибут NAME содержит имя определяемого параметра, а CONTENT - значение параметра, определенного атрибутом NAME. Например, если вы хотите дать сведения об авторе документа, это можно сделать следующим образом:

Ключевые слова необходимы для индексации вашей странички в поисковых системах. Чем больше слов, соответствующих содержанию вашей страницы вы напишите в этой строке, тем больше вероятность того, что вашу страницу посетит кто-нибудь кроме вас.

Заголовок нашего WWW-шаблона будет содержать следующую информацию:

<HTML>
     <HEAD>
     <TITLE>Первая web-страничка</TITLE>
     <META HTTP-EQUIV="Content-Type"
     CONTENT="text/html; charset=windows-1251">
     <META NAME="Author"CONTENT="Ivanov,Petrov, Sidorov">
     <META NAME="Keywords"CONTENT="HTML, курс HTML,
 подводная лодка, курс, основы HTML, создание web-страниц">
     </HEAD>
</HTML>

Наберите это в текстовом редакторе, заменив имя автора, заголовок окна и ключевые слова в соответствии с вашим желанием. Сохраните как текстовый документ с именем index.txt, затем щелкните по имени сохраненного файла и измените его название на index.html. Теперь, если вы откроете этот файл в броузере, то увидите озаглавленную, но абсолютно чистую страницу.

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

<HTML>
      <HEAD>
      Информация о страничке
      </HEAD>

      <BODY>
      Информационное наполнение
      </BODY>
</HTML>

Сохраните файл со структурой страницы и используйте в дальнейшем как шаблон для ваших HTML-документов.

В открывающий тег <BODY> могут входить элементы, определяющие параметры страницы, такие, как используемый фоновый рисунок, цвет и размер основного шрифта и гиперссылок, цвет фона и т. п. Цвета этих элементов web-страницы указываются в шестнадцатеричном исчислении. Для облегчения нелепого труда по вычислению шестнадцатеричного кода вашего любимого цвета создано огромное количество небольших программ.

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

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

Для того чтобы оформить страничку фоновым рисунком (обоями), в теге <BODY> нужно указать параметр BACKGROUND="имя файла". Естественно, графический файл с фоновым рисунком также должен находиться на вашем Internet-сервере. В качестве фонового рисунка вы можете использовать только файлы формата GIF или JPEG. Фоновый рисунок на нашей тестовой страничке задается файлом back.jpg, а цвета текста и гиперссылок не определены, т. е. устанавливаются согласно настройкам броузера.

Таким образом, тег <BODY> на нашей страничке выглядит так:

Обратите внимание, что регистр символов в имени файла имеет значение. После создания тега <BODY> с указанием цветов мы можем приступить к наполнению странички информационным содержимым.

Для оформления и форматирования текста в HTML-документах применяется в общем-то небольшое количество тегов. Если текст не оформлен никакими дескрипторами, то отображаться он будет в соответствии с настройками броузера пользователя.

Например:

   <HTML>
   <HEAD>
   <TITLE>Первая web-страничка</TITLE>
   <META HTTP-EQUIV="Content-Type"
   CONTENT="text/html; CHARSET=windows-1251">
   </HEAD>
   <BODY>
 Этот текст не оформлен никакими дескрипторами, 
 поэтому на странице он будет отображаться в 
 соответствии с настройками броузера и свойствами,
 указанными в теге <BODY>. Броузер будет
 автоматически форматировать текст в зависимости
 от ширины окна и разрешения дисплея.
 </BODY>
 </HTML>

Для управления шрифтовым оформлением WEB-страниц предназначен дескриптор . Этим тегом указываются параметры шрифта, такие, как размер, цвет и название. Параметры шрифта в теге указываются в кавычках в любом порядке.

Определяя шрифт документа, помните, что при просмотре странички будут использоваться те шрифты, которые установлены на компьютере пользователя, а не на вашем компьютере. И если вы будете использовать на страничках необычные шрифты, никто кроме вас их не увидит.

В настоящее время стандартными шрифтами, использующимися в WWW, являются Times New Roman и Courier New. Также вы можете пользоваться и шрифтом Arial, так как он распространен не менее широко, чем указанные. Пользоваться другими шрифтами нет смысла, поскольку они недостаточно популярны.

Строка, указывающая, что данный фрагмент текста необходимо будет отображать с установленным по умолчанию шрифтом размером 6 единиц и буквами фиолетового цвета, будет выглядеть так:

Если вы желаете использовать для текста нестандартный шрифт, в теге необходимо будет указать параметр FACE, т. е. для отображения той же строки шрифтом Arial тег будет выглядеть так:

В параметре FACE можно указывать несколько шрифтов в порядке предпочтения. Текст будет отображаться тем шрифтом, который установлен на компьютере пользователя, в порядке предпочтения, указанном вами.

Если на компьютере пользователя, просматривающего вашу страничку, не найден ни один из указанных вами шрифтов, текст будет отображаться шрифтом, указанным в настройках броузера пользователя, и, скорее всего, им станет Times New Roman.

Для управления начертанием символов, т. е. для установки параметров Жирный (Bold), Курсив (Italic) и Подчеркнутый (Underlining), используются теги , , . Как вы можете догадаться, эти теги требуют закрытия и могут использоваться, перекрывая действие друг друга.

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

Команды форматирования абзацев

Как известно, на странице текст размещается в абзацах. Для определения абзаца в HTML используется тег . Он имеет параметр ALIGN, управляющий выравниванием текста параграфа с помощью четырех аргументов: LEFT, RIGHT, CENTER и JUSTIFY:

- выравнивание текста по левому краю экрана;

- выравнивание текста по правому краю экрана;

- выравнивание текста по центру экрана;

- полное выравнивание текста по обоим краям экрана.

Для размещения любого объекта по центру строки существует тег <CENTER>. Он вполне применим также и к тексту. Если вам необходимо расположить по центру строки лишь несколько слов или заголовок, тег <CENTER> будет являться более удобным вариантом, чем тег

и <CENTER> требуют закрывающего тега. В случае, если весь текст, находящийся на странице после открытия одного из этих тегов, должен быть размещен с тем же выравниванием, вы можете их не закрывать. Для удобства форматирования текста на странице существует также дескриптор , переносящий следующий за ним текст на следующую строку.

Последним дескриптором, о котором мы сегодня расскажем, будет тег <HR>. Это очень простой тег. В броузере он отображается как горизонтальная линия. Для управления внешним видом отображаемых линий у тега <HR> имеются четыре параметра: SIZE, WIDTH, ALIGN и NOSHADE:

SIZE=N(пикселов)	устанавливает толщину линии;
WIDTH=N(пикселов или процентов)	устанавливает ширину линии. Ширина линии может быть жестко указана в пикселах или в процентах относительно ширины окна броузера;
ALIGN=LEFT (RIGHT или CENTER)	устанавливает выравнивание отображаемой линии относительно окна броузера. При отсутствии параметра ALIGN линия всегда центруется относительно окна броузера;
NOSHADE	отключение трехмерного режима отображения линий. При указании этого параметра линия будет отображаться как простая черная полоса (см. рис. 4).

Теперь пора приступить к сооружению собственной WWW-странички.

Откройте созданный нами шаблон и внесите в заголовок информацию о кодировке, авторе, заголовок окна, ключевые слова. После этого можно перейти к наполнению <тела> документа содержанием. Не забывайте периодически сохранять вашу работу. Напомним: файл, в котором будет содержаться наша первая страничка, должен называться index.html.

Разместим страницу в Сети

Как вы уже знаете, web-странички располагаются на Internet-серверах, т. е. компьютерах, подключенных к Internet и выполняющих серверные приложения. Соответственно, чтобы созданную вами страницу могли увидеть другие люди, необходимо разместить ее на Internet-сервере. После этого она станет доступна любому пользователю Internet. Существует большое количество серверов, которые позволяют бесплатно разместить на них web-сайты. Как правило, провайдеры также предоставляют своим пользователям место под web-страницы. Список бесплатных WEB-серверов вы можете найти по адресу http://www.homepage.techno.ru/ilya/servers.htm.

При выборе сервера, на котором вы решите расположить вашу страницу, рекомендуем руководствоваться не только соображениями благозвучности и легкости запоминания названия сервера, но и скоростью доступа к нему. Если вы находитесь в России и вашу страничку будут просматривать люди, преимущественно живущие в той же части света, вряд ли имеет смысл располагать вашу страницу на сервере где-нибудь в Бразилии. Гораздо более удобным решением будет разместить вашу страничку на сервере вашего провайдера. Но если однажды вы решите его сменить, то придется переносить страницу на другой сервер, и соответственно адрес ее изменится. Это неудобно. Поэтому за неимением собственного сервера страницы лучше располагать на бесплатных серверах, таких как http://www.geocities.com/ или http://www.chat.ru/.

Для размещения нашей тестовой странички мы использовали общедоступный бесплатный сервер http://www.chat.ru/. Для того чтобы бесплатно получить место на сервере для размещения своих страничек, достаточно просто зарегистрироваться, т. е. заполнить небольшую анкету.

Зарегистрировавшись под именем podlodka, заполнив несложную анкету и указав пароль, мы получим e-mail-адрес podlodka@chat.ru и каталог с тремя мегабайтами дискового пространства. Таким образом, URL нашей странички будет www.chat.ru/~podlodka. Знак <~> (тильда) добавляется сервером автоматически.

Войдя на заглавной странице сервера www.chat.ru в меню <ДЛЯ ПОЛЬЗОВАТЕЛЯ>, а затем <ФАЙЛЫ ВАШЕЙ ДОМАШНЕЙ СТРАНИЧКИ>, введя имя пользователя и пароль, нажмите на следующей странице кнопку .

Впишите в верхнем окошке имя и путь к созданному файлу или выберите его, нажав на кнопку <ОБЗОР>. Во втором окошке должно быть указано имя index.html. В строке выберите и нажмите на кнопку <ЗАГРУЗИТЬ/UPLOAD>. После этого, если все пройдет удачно, вы получите сообщение .

В случае, если вы использовали на вашей страничке какой-либо фоновый рисунок, нужно загрузить его в ваш каталог на сервере. Для этого вернитесь в предыдущий экран, выберите имя файла, который нужно загрузить, и проделайте те же действия, но с единственным изменением: в выпадающем меню выберите .

Теперь, набрав в строке броузера URL вашей WEB-странички, вы попадете на нее. Возможно, она еще не слишком блистательна для того, чтобы вызвать интерес у видавших виды посетителей Сети... но, кто знает, во что она превратится, когда у вас появится побольше знаний и опыта? Главное - не останавливаться на достигнутом!

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