Первая Web-страница

Задания № 1, 2

К наиболее интенсивно развивающимся и популярным средствам Интернета относится Всемирная паутина - World Wide Web (WWW - [Волд Вайд Веб]), в которой сосредото­чена основная часть информации Сети. Данные в паутине представлены в виде связан­ных между собой документов, которые называются Web-страницами. Каждая Web-страница может содержать текст, рисунки, видео, звукозаписи и прочее. Такие страницы могут размещаться на компьютерах в любой точке планеты. Компьютер, постоянно под­ключенный к Всемирной паутине и содержащий Web-страницы и другие файлы, дос­тупные пользователям Интернета, называется сайтом. Компьютер, который предостав­ляет в Интернете услуги WWW, называется Web-сервером. Web-сервер включает в себя аппаратное обеспечение, операционную систему, Web-страницы и обеспечивает под­держку протокола передачи данных в Интернете TCP/IP.

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

Просмотреть любую Web-страницу можно с помощью специальных программ - браузе­ров, наиболее популярные из которых - Microsoft Internet Explorer [Майкрософт Интернет Эксплорер] и Netscape Communicator [Нетскейп Коммюникэйтор]. Эти программы по­зволяют отображать необходимую страницу с помощью ссылки или адреса, возвращать­ся к уже посещенному документу, сохранять Web-страницу на диске.

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

Чтобы опубликовать в Интернете документ, содержащий некоторую информацию, дос­таточно поместить файл со страницей на сервер, который постоянно подключен к Ин­тернету. Сервер должен поддерживать протокол передачи гипертекста HTTP - Hyper-Text Transfer Protocol. Множество таких серверов формируют Всемирную паутину.

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

Другой способ подготовки Web-страниц заключается в «ручном» создании кода доку­ментов Всемирной паутины на языке HTML - HyperText Markup Language (Язык раз­метки гипертекста). Данный язык представляет собой довольно простой набор команд, описывающих структуру документа. Язык HTML позволяет выделить в документе отдельные элементы - заголовки, абзацы, таблицы и т.д. На первых занятиях мы рассмотрим, как создавать Web-страницы с помощью языка HTML 4.O.

Для просмотра Web-страниц мы будем использовать только браузер Microsoft Internet Explorer.

№1. Как устроены WEB-страницы

В этом знакомстве на примере главной страницы сайта издательства «Триумф» мы крат­ко расскажем, как устроены Web-документы.

Сначала загрузим страницу сайта издательства «Триумф». Здесь возможны 2 пути.

Первый путь: спросите у преподавателя – имеется ли на вашем компьютере данный сайт. Если имеется, то вам следует просто дважды щелкнуть по соответствующему файлу для запуска сайта. Если все в порядке, то перейдите к рисунку 1.1.

Второй путь: если первый путь невыполним и ваш компьютер имеет возможность связаться с Интернетом, то выполните следующие действия:

> Установите связь с Интернетом.

> Нажмите кнопку Пуск (Start) на Панели задач (Taskbar) операционной системы Windows. Откроется основное меню Windows.

>• Щелкните на Рабочем столе компьютера по значку Internet Explorer, чтобы запустить программу Microsoft Internet Explorer. Либо выберите команду Программы ♦ Internet Explorer (Programs ♦ Internet Explorer) из основного меню, чтобы запустить программу Microsoft Internet Explorer.

> В поле ввода Адрес (Address) рабочего окна программы введите электронный адрес сайта крупного российского издательства компьютерной литературы «Триумф»

http://www.triumph.ru и нажмите клавишу ENTER. После загрузки в окне программы появится главная страница сайта издательства (Рис. 1.1).

> Если вы соединились с Интернетом, то разорвите связь с Интернетом.

Теперь отобразим на экране исходный код загруженной Web-страницы.

> Выберите команду меню Вид ♦ Просмотр HTML-кода (View ♦ Source). Будет запущена программа Блокнот (Notepad), в окне которой появится исходный код главной страницы сайта издательства «Триумф» (Рис. 1.2).

Файлы с текстом кода на языке HTML имеют расширение .html или .htm. В документе HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например <html>, <head>, <title>. Такие элементы разметки называ­ются тегами. Теги управляют отображением информации и при этом сами не выводятся на экран. Теги бывают одиночными, открывающими и закрывающими. Кроме угловых скобок тег содержит свое имя и необязательные атрибуты, т.е. параметры тега, например language="JavaScript".

Если в тег включается символ слеш /, то тег является конечным тегом, закрываю­щим некоторую структуру, например </script>. Обратите внимание, что в начале документа расположен тег <html>. Данный тег означает начало документа. В свою очередь, тег </html> указывает на конец документа.

В тегах могут использоваться только символы латинского алфавита, а в значениях атри­бутов - любые символы. Если в качестве значений атрибута используются, например, русские символы, то они должны быть заключены в кавычки, например, name="Название". Язык HTML не различает большие и малые буквы, так что теги <TITLE>, <title> и <Title> эквивалентны.

Многие теги являются парными: за открывающим тегом следует закрывающий его, а между ними содержится текст или другие теги, например:

<TITLE> Издательство компьютерной литературы ТРИУМФ </TITLE>

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

Как уже упоминалось, теги могут иметь атрибуты - параметры с дополнительной инфор­мацией о том, как браузер должен обрабатывать текущий тег, например, можно указать цвет текста. Атрибут тега состоит из имени, например language, знака равенства = и значения, которое задается строкой символов, например language="JavaScript". Значение атрибута может записываться как в кавычках (как правило), так и без них. Если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки иногда опускают. Атрибуты в теге отделяются друг от друга пробелами, при этом их порядок сле­дования произволен.

Каждый HTML-документ имеет определенную структуру (запомните! Это важно!):

<html>

<head>

...………

</head>

<body>

• • •

</body>

</html>

HTML-документ содержит теги <html> и </html>, отмечающие начало и конец доку­мента, заголовок, ограниченный тегами <head> и </head>, а также тело или содержа­тельную часть документа, заключенную между тегами <body>... </body>.

В заголовке, ограниченном тегами <head> и </head>, теги <title>...</title> определяют название документа, которое должно описывать его содержимое. Название документа обычно содержит несколько слов. Это название отображается браузерами в строке заголовка рабочего окна программы. При создании названия документа следует помнить о том, что останется от имени после минимизации окна браузера. Тег < title> нельзя путать с названием файла документа. Важность названия документа заключается еще и в том, что имя страницы загружается из Интернета в первую очередь, а получение остальной части документа может занять продолжительное время.

Задачей заголовка документа является представление необходимой информации для браузеров. Заголовок может включать элементы <meta>...</meta>, чтобы ука­зать сведения о документе. Данная информация не имеет отношения к языку HTML, но может использоваться браузером. Открывающий тег <meta> включает пары имя=значение, описывающие свойства документа, например авторство, список ключевых слов и т.д. Например, данный тег может выглядеть так:

<МЕТА http-equiv=Content-Type content="text/html; charset=windows-1251">

Тег <script> позволяет включать в документ программу (скрипт), который будет за­пущен на вашем компьютере после загрузки Web-страницы. Скрипты можно использо­вать, например, для анимации изображения. Атрибут тега с именем language указыва­ет на используемый для скрипта язык, например, атрибут language="JavaScript" показывает браузеру, что программа написана на языке JavaScript.

Документ HTML может содержать комментарии для пояснения HTML-кода. Коммента­рии обычно используются авторами документа для заметок, предназначенных для собственного применения. Комментарии игнорируются браузером и не влияют на отобра­жение Web-страницы на экране. Следует помнить, что комментарии являются частью файла, передаются по сети вместе с документом и могут приводить к увеличению вре­мени загрузки. Комментарии могут состоять из произвольного числа строк, они начина­ются с последовательности <!-- и завершаются символами -->. Например, на сайте издательства «Триумф» используется следующий комментарий:

<!—Просмотреть таблицу -—>.

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

Другие теги языка HTML будут рассмотрены в следующих знакомствах.

№2.. Начинаем создавать Web-страницу

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

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

Создавать HTML-код лучше в простом текстовом редакторе, например, в программе Блокнот (Notepad). Введем код, который содержится практически в каждой Web-странице и определяет структуру HTML-документа.

. >■ Щелкните мышью на кнопке программы Блокнот (Notepad) на Панели задач (Taskbar) операционной системы Windows, чтобы перейти к окну данной программы.

>• Выберите команду меню Файл > Создать (File > New) для создания нового докумен­та в редакторе Блокнот (Notepad).

> В новый документ редактора введите код, содержащий основные теги для определе­ния структуры HTML-документа:

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

Этой структурой вам придется пользоваться многократно. Чтобы облегчить свою работу по набору этого текста рекомендуем вам записать эту структуру в отдельный файл, назвав его, например, Исходная структура.html, и сохранить его в своей папке. В дальнейшем копируйте (именно копируйте) и вставляйте содержание этого файла во вновь создаваемый файл. И тогда вам не надо будет каждый раз набирать эти теги и проверять правильность набора.

Теперь введем в HTML-документ название Web-страницы и краткую информацию о фирме АТЛАНТ.

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

Компания АТЛАНТ_Код 14. Кроме того, ваш личный код должен быть всюду вставлен в название фирмы, т.е. АТЛАНТ14. Это ОБЯЗАТЕЛЬНОЕ правило, которое должно выполняться для ВСЕХ создаваемых вами Web-страниц, несмотря на то, что в тексте методичек ваши личные коды отсутствуют и о них в дальнейшем может не быть упоминаний. Запомните это и строго выполняйте! Имейте ввиду, что при отсутствии кода вам придется переделывать ваш материал.

>- Между тегами <title> и </title> наберите на клавиатуре название Web-страницы Компания АТЛАНТ Код ваш

> Между тегами <body> и < /body> вставьте новую строку с информацией о компании:

Компания АТЛАНТ код! обеспечит вас компьютерами и программными продуктами на любой вкус.

Вы не забыли про ввод своего кода в название страницы и после слова АТЛАНТ???

Цвета фона и текста можно задавать в цифровом или символьном виде. Словесное указание цвета более удобно использовать, зато численное обозначение позволяет задавать любой оттенок. Атрибуты bgcolor и text обеспечивают установку цвета фона и текста Web-страницы. Давайте установим синий (blue) цвет для фона Web-страницы, и красный (red) цвет для текста.

Ø Вместо тега <body> введите фрагмент HTML-кода: <body bgcolor=blue text=red> (Рис. 1.3).

Чтобы сохранить документ на диске, выполните следующие шаги.

> Выберите команду меню Файл > Сохранить (File ♦ Save). На экране появится диалог Сохранить как (Save As) (Рис. 1.4).

> В открывающемся списке Папка (Save in) выберите диск для сохранения документа. Пусть это будет папка вашей группы, в которой вы должны создать свою папку, имя которой - это ваша фамилия. Итак, создайте свою папку.

> Перейдите в свою папку, т.е. в списке папок и файлов выберите свою папку, в которой будет храниться ваш HTML-документ. Запомните это!

Внимание! В дальнейшем, когда вы будете давать имена созданным файлам, то после имени каждого файла также вставляйте свой личный код (свой код узнайте у преподавателя). Например, если ваш код 14, то в следующем пункте название файла должно выглядеть атлант14.html. Это ОБЯЗАТЕЛЬНОЕ правило, которое должно выполняться для ВСЕХ создаваемых вами файлов, несмотря на то, что в тексте методичек ваши личные коды отсутствуют и о них в дальнейшем не будет упоминаний. Запомните это и строго выполняйте! При отсутствии кода вам придется переделывать ваш материал.

>• В поле ввода Имя файла (File name) введите имя файла атлант.html для хранения страницы. Не забудьте про ваш код!!!

> Нажмите кнопку Сохранить (Save), чтобы закрыть диалог Сохранить как (Save As). Документ будет сохранен на диске.

Осталось просмотреть созданную Web-страницу в браузере.

> Щелкните мышью на кнопке программы Microsoft Internet Explorer на рабочем столе или на Панели задач (Taskbar) операционной системы Windows, чтобы перейти к окну браузера.

> В поле ввода Адрес (Address) окна программы введите полный путь к созданному файлу с HTML-кодом атлант.html.

> Нажмите клавишу ENTER. В окне браузера появится созданная Web-страница (Рис. 1.5)

Обратите внимание, что текст на странице отображается красным цветом на синем фоне.