Создание собственной web-страницы в Internet
| Вид материала | Документы |
- План занятий Web взгляд изнутри. Вводная часть в курс. Web-страницы, web-сайты, web, 11.42kb.
- Моу сош №18 г. Новотроицк, моу сош, 95.86kb.
- Программа для просмотра web-страниц, которая преобразует тэги html-документа в соответствующее, 47.68kb.
- Сценарий занятия «html-проектирование: Достопримечательности Мурманской области», 72.96kb.
- Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура, 214.3kb.
- Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура, 213.14kb.
- Пояснительная записка Курс предназначен для учащихся 9-х классов общеобразовательных, 47.51kb.
- Концепция www 5 Создание Web-страницы с помощью языка html 7 1 Язык html 7 Структура, 217.81kb.
- «Создание и использование таблиц на Web-страницах», 223.42kb.
- План урока: «Internet Explorer web страницы» (фронтальная лабораторная работа) Цель:, 35.19kb.
Создание собственной web-страницы в Internet
Константин Иванченков
Первый шаг: СНАЧАЛА БЫЛ... ТЕКСТ
Это загадочное слово "WWW". Что такое HTML. Как обратиться к файлу в Internet. Понятие URL. Визуальные редакторы или Блокнот. Структура HTML-документа. Основные дескрипторы (теги). Использование команд форматирования текста. Создаём небольшую WEB-страничку без графики и публикуем её в Internet.
С появлением Internet проблема межплатформной несовместимости файловых форматов стала ощущаться особенно остро: ведь тем, кто размещает информацию в Сети, хочется, чтобы она была доступна как можно более широкому кругу пользователей без особенных затрат. Очевидно, что самый простой путь решения — разработка общепринятого формата файлов, под который и будут «подстраиваться» вновь создаваемые приложения. В WWW таким стандартом стал HTML.
Это загадочное слово «WWW»
Слово «WWW» (World Wide Web) относится к той немногочисленной категории понятий, название которых известно всем, однако далеко не всякий в состоянии правильно объяснить, что же это в сущности такое. Довольно часто приходится слышать, как WWW отождествляют с Internet, что, мягко говоря, не совсем верно. На самом деле Web — это одна из частей Internet, которая на протяжении последних 5–6 лет стала феноменально популярной и способствовала гигантскому скачку развития Сети в целом.
WWW можно назвать графическим интерфейсом для работы с Internet. Изобретение Web связано с именем Тима Бернерс-Ли (Tim Berners-Lee). Бернерс-Ли работал в швейцарской лаборатории физики частиц CERN и ему часто приходилось использовать Internet для общения с коллегами. В то время получение информации из Сети было нетривиальной задачей и требовало высокой квалификации и владения специальными навыками. Ученый облегчил себе работу, создав систему, упрощающую навигацию. В 1991 г. система получила признание и была названа WWW.
«World Wide Web» переводится как «всемирная паутина», и название достаточно точно определяет суть явления. 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, не имеет никакого значения, т. е. ссылка скрыта указывает на абсолютно тот же сервер, что и ссылка скрыта. В то же время иногда регистр символов, используемых в названиях директорий и файлов на сервере, может иметь значение (это зависит от программного обеспечения, установленного на сервере).
Для передачи разных типов данных были созданы протоколы, базирующиеся на TCP/IP. При работе с гипертекстовыми файлами используется HTTP (Hypertext Transfer Protocol — протокол передачи гипертекста). Пересылка по сети файлов любых типов осуществляется с помощью протокола FTP (File Transfer Protocol — протокол передачи файлов). Используя этот протокол, мы будем загружать файлы нашей web-странички на сервер. Кроме того, существуют протоколы передачи файлов новостей (news), службы Gopher и т. д.
В принципе, перед адресом документа, который вы хотите загрузить из Сети, необходимо проставлять тип протокола, по которому этот документ будет передаваться на ваш компьютер, добавляя к нему двоеточие и два обратных слэша (и т. д.), но делать это на практике нет необходимости, так как современные броузеры делают это автоматически. Итак, после того, как вы набрали URL интересующего вас документа, ваша программа-броузер, используя соответствующий протокол, обращается к требуемому серверу и запрашивает у него указанный файл. Далее файл передается на ваш компьютер и броузер и, используя команды форматирования и ссылки на объекты, содержащиеся в тексте, генерирует готовый для просмотра документ.
Перейдем к делу...
Из чего, собственно, состоят файлы HTML? Из обычного текста: вы можете просмотреть исходный код файла в любом текстовом редакторе, включая Блокнот Windows (Notepad). Но в этом случае вы увидите не web-страничку, а лишь текст в сочетании с метками HTML, из которых программа-броузер ее генерирует. Редактировать web-документы вы также можете, используя самый обычный Блокнот. Именно так и поступают многие опытные web-дизайнеры, несмотря на то, что сейчас существует большое количество визуальных редакторов web-страниц. Эти редакторы зачастую обладают очень богатыми средствами и предоставляют пользователю возможность создавать великолепно выглядящие страницы, используя многочисленные шаблоны и библиотеки картинок, как правило, входящие в комплект поставки редактора. Единственное, чем не будут страдать web-страницы, подготовленные с помощью шаблонов,— это оригинальностью. Кроме того, HTML-код, который генерируют визуальные редакторы, зачастую оставляет желать лучшего: избыточность кода и ошибки в форматировании отнюдь не улучшают скорость загрузки и внешний вид документа.
Одним из самых популярных визуальных редакторов является Netscape Composer, входящий в состав пакетов Netscape Navigator Gold и Netscape Communicator (ссылка скрыта). Популярностью также пользуются пакеты Microsoft FrontPage (ссылка скрыта) и NetObjects Fusion (ссылка скрыта).
Несомненно, визуальные редакторы позволяют значительно ускорить создание типовых страниц и программирование некоторых элементов, например сложных таблиц, на написание которых от руки уходит много времени. В дальнейшем мы с вами будем пользоваться одним из этих редакторов, но пока рекомендуем вам как следует разобраться со структурой HTML-документов и основными элементами HTML. Это позволит в будущем как следует приглядывать за работой визуальных редакторов и исправлять допускаемые ими ошибки. Хотя, кто знает, как правило, люди, знающие HTML «в лицо», в дальнейшем практически не пользуются визуальными редакторами. Писать нашу первую страничку мы будем в Блокноте.
Кстати...
В WWW существует негласное правило, согласно которому первый файл, загружаемый броузером с какого-либо сервера по умолчанию, должен называться index.php. Таким образом, если вы явно не указываете имя документа, который вам требуется, а пишете только имя сервера, например www.yahoo.com, автоматически будет загружен файл index.php, находящийся на этом сервере, т. е. фактически будет выполнена команда ссылка скрыта. Итак, первый файл который мы с вами создадим, а потом разместим в Internet, будет называться index.php. Для этого вам придется освоить лишь несколько команд форматирования и оформления текста в формате HTML.
HTML-файл состоит из двух основных частей: «головы» (заголовка) и «тела». «Тело» HTML-документа заключает в себе все информативное содержание, тогда как в заголовке указывается тип документа, его кодировка, язык, имя автора и прочая дополнительная информация. Тело документа отделяется от заголовка с помощью меток (дескрипторов, тегов) HTML.
Метка языка HTML, или тег (англ. tag), или дескриптор, является основным средством разметки документа. При написании теги отделяются от остального текста угловыми скобками: «<» и «>». Регистр символов при этом также не имеет никакого значения, но хорошим тоном считается набор тегов в верхнем регистре, т. е. заглавными буквами. Это помогает визуально отделить теги от основного текста при последующем редактировании.
Существует два вида тегов: требующие закрытия (т. е. ограничения действия) и не требующие закрытия. Например, дескриптор , изменяющий начертание шрифта на наклонное, является тегом, требующим закрытия, т. к. если он не будет закрыт, то весь текст, следующий после него, будет наклонным.
Закрывающим элементом всегда служит тот же самый тег, но со знаком «/» после первой угловой скобки.
| Пример: Этот текст будет отображаться как наклонный. |
При закрытии тегов необходимо руководствоваться следующим правилом — если один закрывающий тег вложен внутрь второго, первым необходимо закрывать вложенный тег. Запомните, что закрывающие теги должны идти в порядке, обратном открывающим.
| Пример: Этот текст будет отображаться как наклонный. А этот, как наклонный и подчеркнутый. |
Теги, не требующие закрытия, всегда легко определить по смыслу их действия: обычно они выполняют какое-либо действие не над другим объектом, а сами по себе. Примером может послужить тег
, вызывающий разрыв и переход на следующую строку.
| Пример: На странице этот текст будет располагаться в две строки. |
Теперь попробуем составить собственный шаблон WWW-странички. Запустим замечательный web-редактор — Блокнот, он же Notepad (правды здесь больше, чем иронии). В русской версии Windows 95 он должен располагаться в разделе Стандартные в меню Пуск. Впрочем, вы можете использовать абсолютно любой текстовый редактор, который вам нравится.
Первыми метками, которые мы разместим на будущей web-странице, будут