Методические указания1_2 (Методические указания)

54

Методические указания 1, 2

1. Вводная часть

1.1. Просмотр Web-страниц

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

1.2. Браузер Microsoft Internet Explorer

Этот браузер фирмы Microsoft удобен в первую очередь тем, что является полностью русифицированным. Вы можете использовать версию 4 или 5. Microsoft Internet Explorer (MSIE) настолько тесно интегрирован с Windows, что его трудно назвать автономной программой. Скорее, это один из компонентов операционной системы.

Работа с браузером может начинаться с подключения к Интернету или вестись автономно, если все необходимые файлы находятся на локальном жестком диске (то есть диске своего компьютера). В поле Адрес на панели инструментов указывается URL. Он может совпадать с IP-адресом, а может содержать и дополнительную информацию, необходимую для идентификации определенного документа. Адрес предваряется кодом, который определяет, с какой подсистемой Интернета мы хотим работать. Например, если мы ищем компанию Microsoft, то адрес должен быть таким: http://www.microsoft.com.

Код http указывает на то, что программа должна работать с системой гипертекстовых документов и использовать соответствующий протокол (Hyper Text Transfer Protocol). Но могут быть и другие варианты адреса. Например, адреса с кодом ftp указывают на архивы файлов, доступных по FTP, код mailto обозначает адреса' электронной почты, а код file — файлы на собственном компьютере. Для тренировки попробуйте, например, загрузить на свой компьютер какие-нибудь файлы с адреса ftp://ftp.microsoft.com.

После указания URL браузер загружает данные из Интернета и демонстрирует нам гипертекстовый документ, находящийся по заданному адресу.

Найдя какую-нибудь организацию, мы вначале увидим ее «домашнюю» страницу (home page). На ней легко обнаружить подчеркнутые надписи. Это ссылки на другие страницы. Весь комплекс страниц (сайт) очень велик, и его нельзя увидеть целиком. Гиперссылки позволяют передвигаться по страницам или частям одной большой страницы. Гиперссылкой может быть не только надпись, но и значок, рисунок или часть рисунка. О том, что это гиперссылка, можно догадаться по изменению внешнего вида указателя мыши. Передвижение по сайту можно уподобить хождению по лабиринту, поэтому браузер снабжен кнопками Вперед и Назад, которые позволяют вернуться к пройденным страницам. Каждой странице соответствует один или несколько файлов, которые браузер помещает в папку временного хранения (кэш). Поэтому, когда вы хотите вернуться к уже загруженной странице, программа считывает ее не из Интернета, а с жесткого диска. Время доступа к документу значительно сокращается.

Бывает и так, что с загрузкой страницы возникают проблемы. Тогда пользователь может прервать загрузку щелчком на кнопке Остановить.

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

И наоборот, загрузку текущей страницы можно повторить, щелкнув на кнопке Обновить. При работе с Интернетом она используется редко, а для разработчика гипертекстовых документов — это важный инструмент. Если вы что-то изменили в своем файле, то увидеть, как он теперь будет выглядеть, можно только перезагрузив документ.

Ниже представлены другие важные кнопки браузера.

 Переход на страницу, которая была открыта ранее. Это очень удобное средство передвижения по документам. Движение вперед обеспечивает гиперссылка, а возможность вернуться назад присутствует не во всяком документе.

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

«Домашняя страница » (home page) — понятие условное. Каждая фирма работающая в Сети, имеет свою собственную домашнюю страницу. Вы можете использовать в качестве таковой свою страницу, страницу своего провайдера, производителя программы или любую другую. Адрес домашней страницы указывается в качестве параметра программы и может быть изменен (команда Сервис > Свойства обозревателя).

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

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

Часто при просмотре страниц возникает проблема со шрифтами. Если шрифт на странице слишком мелкий или, наоборот, неоправданно крупный, вид документа легко исправить. Используйте команду Вид > Размер шрифта, чтобы изменить размер шрифта на время просмотра. Буквы можно как уменьшить, так и увеличить. При этом на странице сохраняются пропорции различных шрифтов и заголовков.

Основные инструменты для настройки браузера собраны в окне Свойства обозревателя, которое активизируется одноименной командой меню Сервис. На просмотр HTML-страниц влияют несколько параметров. На вкладке Общие имеются кнопки Цвета, Шрифты, Языки и Оформление, с помощью которых можно установить режимы воспроизведения страниц. В браузере назначаются для использования по умолчанию два шрифта: пропорциональный и моноширинный. Два разных типа шрифта необходимы для прорисовки данных из соответствующих элементов HTML. Какие именно шрифты надо применять, выбирает пользователь. Важен также и выбор кодировки: для русскоязычных документов применяют Windows-1251 или КОИ-8. Можно выбрать и цвета, которыми будут раскрашены текст, пройденные и неиспользованные гиперссылки.

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

На вкладке Дополнительно можно установить режим, при котором на странице не будут воспроизводиться рисунки или мультимедийные компоненты.

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

Для просмотра элементов HTML в MSIE служит команда Вид > В виде HTML. Редактирование страниц в режиме источника очень удобно, так как можно сразу увидеть результат внесенных изменений: после модификации страницы ее надо сохранить в текстовом редакторе, например, Блокноте, а затем в браузере щелкнуть на кнопке Обновить.

2. Синтаксис HTML 4

2.1. Структура Web-страницы

Ниже показана заготовка типичного Web-документа. На этом примере мы рассмотрим структуру HTML-страниц (Файл Strukt.htm).

Листинг 1.1. Пример (шаблон) Web-страницы

HTML>

<HEAD>

<TITLE>Структура Web-страницы</title>

<STYLE> H2 {font-family: verdana, sans-serif, arbat;}

CODE {font-family: Arial;} </style>

<META name="Author" content="Иванов И. И.">

<META name="Keywords" content="WWW, HTML, document, element">

<META http-equiv="Content-Type" content="text/html; charset=windows-1251">

</head>

<BODY bgcolor=#FFFFFF>

<!-- Комментарий к странице -->

<A href="start.htm"><IMG align="right" src="soder.jpg" alt="На титульную страницу"

border=0 width=150 height=24></a><BR clear="right">

<A name="top"></a>

Переход в <A href="#bottom">конец</a> документа<P>

Переход к <A href="#S001"><B>ссылке 1</b></a><P>

<P>

<HR>

<H1>Заголовок 1</h1>

<H2>Заголовок 2</h2>

<H3>Заголовок 3</h3>

<H4>Заголовок 4</h4>

<H5>Заголовок 5</h5>

<H6>Заголовок 6</h6>

<P>Существует шесть уровней заголовков, которые обозначаются H1...H6.

Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький

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

<HR>

Здесь расположена <B>ссылка 1</b><A name="S001"></a>

<HR>

<P>Здесь должен располагаться оригинальный текст Web-страницы

<HR>

<A name="bottom"></a><P>

Переход в <A href="#top">начало</a> документа.

</body>

</html>

Скопируйте, пожалуйста, этот Листинг 1.1. в Блокнот. Затем сохраните этот файл с расширением HTML (Strukt.html) и откройте браузером Microsoft Internet Explorer 5.

Если рассмотреть исходные тексты различных Web-страниц, то можно легко увидеть схожесть их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальным и стандартом фактическим. Язык HTML постоянно развивается, дополняется новыми элементами, и изучать его надо не по официальным первоисточникам, а на практике, обращаясь к последним разработкам ведущих фирм и специалистов.

Чтобы понять структуру Web-страницы, необходимо рассмотреть все элементы, входящие в приведенный выше листинг. При рассмотрении элементов языка будем приводить оба тега: начальный и конечный. Например: <I> </i>. Следует подчеркнуть, что в большинстве случаев разработчик должен использовать два тега для каждого элемента. Число случаев, когда допустим только начальный тег (часть элементов не имеют конечного вообще), невелико, и они специально оговариваются. Для имен тегов можно использовать как прописные, так и строчные буквы латинского алфавита. Некоторые пользователи записывают начальные теги прописными буквами, а конечные теги — строчными. Это помогает разобраться в исходном тексте Web-страницы.

<HTML> </html>

Обозначение документа на языке HTML. Заметим, что одним из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и конечным тегами должна находиться вся Web-страница. В принципе, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY, FRAMESET и других, определяющих общую структуру Web-страницы. Естественно, что конечным тегом </html> заканчиваются все подобные документы.'

<HEAD> </head>

Область заголовка Web-страницы. Иными словами, ее первая часть. Так же, как и предыдущий элемент, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir, должен включать элемент TITLE и допускает вложение элементов BASE, МЕТА, LINK, OBJECT, SCRIPT, STYLE.

<TITLE> </title>

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

<STYLE> </style>

Описание стиля некоторых элементов Web-страницы. В файле Strukt.htm назначены шрифты для элементов Н2 и CODE. При просмотре файла браузером (См. рис. 2.1) видно, как изменяется вид заголовка второго уровня после такого переопределения. Естественно, что для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление элемента STYLE не обязательно, но желательно.

Заголовок 1