Инструментальные средства Internet-технологий. Лабораторный практикум

•Web-документом;

•Web-страницей.

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

структуру, которая называется Web-узлом, или Web-сайтом.

Каждая HTML-страница имеет свой уникальный URL-адрес в Интернете.

Фрейм (Frame) – этот термин имеет два значения. Первое – область документа­ со своими полосами прокрутки. Второе значение – одиночное изображение­ в анимационном графическом файле (кадр).

Апплет (Applet) – программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотреWeb-страницы.

Скрипт, или сценарий (Script), – программа, включенная в состав Webстраницы для расширения ее возможностей. Браузер Internet Explorer в определенных­ ситуациях выводит сообщение: «Разрешить выполнение сценариев­ на странице?» В этом случае имеются в виду скрипты.

CGI (Common Gateway Interface) – общее название программ, ко-

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

Браузер (Browser) – программа для просмотра Web-страниц. Элемент – конструкция языка HTML. Можно представить его себе

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

Дескрипторы – это управляющие символы, с помощью которых можно добавлять и форматировать элементы документа.

Пример

<Начало элемента> Содержание элемента, данные, которые форматирует элемент­ </Конец элемента>

Тэг – начальный или конечный маркеры элемента. Тэги определяют границы­ действия элементов и отделяют элементы друг от друга.

11

В тексте Web-страницы тэги заключаются в угловые скобки, а конечный тэг всегда снабжается косой чертой.

<Начальный тэг> Содержание элемента, данные, которые форматирует элемент </Конечный тэг>

Пример

<Р>Этот текст будет расположен в отдельном абзаце </P>

Элемент, содержащий некоторый текст, ограничен начальным тэгом (маркером­ ) <P> и конечным тэгом (маркером) </P>, т. е. текст помешен между тэгами, как в контейнер, а тэги < P> и </ P> размечают начало и конец абзаца­ соответственно.

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

Пример

<Р> <I> Этот текст будет расположен в отдельном абзаце и выделен курсивом </i> </р>

В этом примере элемент <I>...</i> вложен внутрь элемента

<Р>…</р>.

Атрибут – параметр или свойство элемента. Атрибуты располагаются внутри начального тэга и отделяются друг от друга пробелами. Если элемент содержит текст, то атрибуты могут задавать цвет и размер шрифта, выравнивание текстового абзаца и т. п. Если элемент содержит рисунок, то атрибуты могут задавать размер рисунка, наличие и размер рамки вокруг рисунка и пр.

Пример

<Р align = “center”> Этот текст будет выровнен по центру экрана </p>

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

Будьте внимательны

•любая полезная информация должна находиться между начальным и конечным­ тэгами, указывающими ее формат;

•все атрибуты располагаются в начальном тэге;

•для удобства работы начальный тэг вы можете писать с прописной (заглавной­ ) буквы (р), а конечный – со строчной (маленькой) буквы (/р), хотя это и не обязательно;

•не для всех элементов требуется ставить конечный (закрывающий) тэг. Однако на первых порах, пока вы еще не очень хорошо

12

освоили HTML, ставьте закрывающие тэги абсолютно для всех элементов, это никак не повлияет на работу Web-страницы, а только облегчит вам жизнь (не забывать </р>, </li>, </table> и др.);

• не путайте очередность написания тэгов при вложении одного элемента внутрь другого.

Верно:

<Р> <I>Этот текст будет расположен в отдельном абзаце и выделен курсивом </i> </р>

Не верно:

<Р> <I>Этот текст будет расположен в отдельном абзаце и выделен курсивом </р> </i>

• Написание каждого нового элемента начинайте с новой строки. Вложенные­ элементы выделяйте отступом (табуляцией). Это опятьтаки не обязательно, но значительно облегчит вашу работу.

Обзор дескрипторов HTML

Документы HTML состоят из двух разделов – заголовка, содержа­ щего установки параметров Web-страницы, и основного раздела, содержащего­ текст и элементы страницы, отображаемые в окне обозревателя. Данные разделы задаются с помощью пары специальных открывающих и закрывающих дескрипторов, определяющих начало и конец раздела, как показано в листинге 1.

Листинг 1. Основные разделы HTML

<HTML>

<HEAD>

параметры страницы...

</HEAD>

<BODY>

текст страницы..

</BODY>

</HTML>

Дескрипторы <HTML>....</HTML> устанавливаются в начале и в конце документа HTML. Заголовок Web-страницы задается дескрип-

торами <HEAD>...</ HEAD >, а основной раздел соответственно – дескрипторами < BODY>...</ BODY>. Эти дескрипторы назы-

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

13

установки параметров страницы, форматирования­ текста или добавления прочих элементов.

Дескрипторы HTML бывают парными и непарными. Парные де­ скрипторы подразделяются на открывающие и закрывающие, например: <HTML>…</HTML>. Парные дескрипторы определяют формат или свойства текста, заключенного между ними. Отсутствие закрывающего дескрип­тора вызовет ошибку при просмотре документа в обо-

зревателе. Парные дескрипторы могут быть вложенными, например: <Р><I> текст </I></Р>. Обратите внимание, что закрываю-

щие дескрипторы идут в обрат­ной последовательности. Непарные, например дескриптор разрыва строки­ <BR>, используются независимо от других дескрипторов.

Дескрипторы раздела заголовка

Ниже представлены некоторые дескрипторы, наиболее часто используемые­ в заголовке Web-страницы.

<TITLE>...< /TITLE> – заголовок страницы, отображаемый в строке заголовка обозревателя, например: <TITLE>Курсовой проект

</ТIТLЕ>.

<МЕТА name=’параметр’contents=’значение’> – непарный де-

скриптор, используемый для установки следующих метапараметров­ , заданных атрибутом name:

•author – имя автора;

•description – описание Web-страницы (обычно один абзац­ ), ото-

бражаемое на странице результатов поиска;

• keywords – ключевые слова Web-страницы. <SCRIPT>...</SCRIPT> – код сценария, выполняемого

обозревателем­ автоматически во время загрузки Web-страницы.

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

<МЕТА http-equiv=”Content-Type” content=”text/html; charset=windows1251”>

Этот тэг несет служебную информацию и не отображается в экране браузера. В данном случае речь идет о кодировке Web-странички. Вам достаточно лишь каждый раз вставлять этот тэг в таком виде на свою страничку. Тогда ваша страничка будет использовать кодировку Windows-1251, наиболее распространенную на сегодняшний день.

14

<МЕТА name=”Author” content=”Ivanov Ivan”>

Имя автора Web-страницы.

<МЕТА name=”Keywords” content=”Автоматизация и управление”>

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

Ниже приведен пример кода Web-страницы с заполненным разделом <HEAD>...</head>. Автор страницы Иванов Иван, страница посвящена Автоматизации.

В листинге 2 показан пример заголовка Web-страницы.

Листинг 2. Заголовок документа HTML

<HTML> <HEAD>

<TITLE> Инструментальные средства интернет технологий </title>

<МЕТА http-equiv = “ContentType” content=’’text/html; charset=windows-1251”>

<МЕТА name=”Author” content=”Ivanov Ivan”> <META name=”Keywords”

content=”Автоматизация и управление”> </head> <BODY>

Здесь будет размещено содержание Web-страницы

</body> </html>

Значения атрибутов задаются в виде текстовых строк, взятых в кавычки. Можно использовать как двойные прямые (″), так и одинарные прямые (′) кавычки. Важно

только, чтобы в начале и в конце строки кавычки были одного типа. Если вы вводите код HTML в приложении­ Блокнот, с кавычками не возникнет никаких проблем­ . Но текстовые редакторы более высокого уровня, такие как Word, часто автоматически заменяют прямые кавычки на специальные символы: (« ») или (“ “). Обозреватели не распознают специальные символы кавычек в кодах HTML (а также в кодах сценариев), что вызывает ошибки при отображении страницы.

15

Дескрипторы основного раздела Web-страницы

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

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

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

Теперь рассмотрим, что может находиться между элементами

<body> и </body>.

Этот элемент заключает в себе гипертекст, который определяет собственно Web-страницу. Это та произвольная часть документа, которую разрабатывает­ автор и которая отображается браузером. Внутри элемента <body> можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального элемента <body> могут располагаться атрибуты, обеспе­ чивающие установки для всей страницы в целом. Это могут быть атрибуты, задающие:

□цвет фона Web-страницы;

□“обои” или рисунок фона страницы;

□цвет текста на всей странице;

□цвет гиперссылок (активных, выбранных, посещенных).

16

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

Вид^Обновить.

Ввод нового абзаца

Обозреватель игнорирует все пробелы в тексте, в том числе символы­ конца абзаца, вводимые нажатием клавиши <Enter>. Чтобы добавить абзац, нужно заключить текст абзаца между дескрипторами <Р>...</Р>. Обозреватель автоматически добавит пустую строку между блоками текста­ , относящимися к разным абзацам.

По умолчанию обозреватель выравнивает текст абзаца влево и автоматически­ переносит слова в новую строку, когда текст достигает края окна обозревателя. Дескриптор <nobr>...</nobr> блокирует автоматический­ перенос слов, а стиль выравнивания можно изменить, установив соответствующую опцию атрибута align в открывающем дескрипторе абзаца, как показано в листинге 3.

Листинг 3. Выравнивание абзацев

<BODY>

<Р align=”left” >Абзац выровнен влево</Р>

<Р align=”center” >Абзац выровнен по центру</Р> <Р align=”right” >Абзац выровнен вправо</Р>

<Р align=”justify” >Абзац выровнен по ширине</Р> <P><NOBR>Этот текст всегда должен оставаться в одной строке</NOBR></P>

</BODY>

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

новой строки, но не будет добавлять пустую строку, как в случае с дескрипторами <Р>...</Р>.

Заголовки

Заголовки определяются с помощью тегов от <h1> до <h6>. <h1> определяет заголовок самого большого размера, а <h6> определяет заголовок самого маленького размера.

17

<h1>Это заголовок первого уровня</h1> <h2>Это заголовок второго уровня</h2> <h3>Это заголовок третьего уровня</h3> <h4>Это заголовок четвертого уровня</h4> <h5>Это заголовок пятого уровня</h5> <h6>Это заголовок шестого уровня</h6>

Заголовки автоматически отделяются дополнительными промежутками от остальных элементов документа.

Горизонтальная линейка

Разделять различные элементы можно с помощью горизонтальной линейки, для этого используйте тег <hr>:

Листинг 4.

<html>

<body>

<p>Этот параграф отобразится сверху горизонтальной полосы.</p>

<hr>

<p>Этот параграф отобразится снизу горизонтальной полосы.</p>

</body>

</html>

Тег <hr> не имеет закрывающего тега. Поэтому для совместимости с будущими версиями стандарта рекомендуется следующее написание тега <hr/>. Для этого тега определен ряд атрибутов, но они являются устаревшими. И хотя их применение возможно, но консорциум W3C их использовать не рекомендует. Вместо них следует использовать таблицы стилей.

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

18

Форматирование текста

<html>

<body>

<p>

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

тегами.

</p>

</body>

</html>

Также для выделения текста используются теги <strong> и <em>, данные теги являются контейнерами и требуют закрывающегося тега. Тег <strong> сообщает браузеру, что на заключенном в нем тексте необходимо сделать сильное ударение. Обычно визуальные браузеры отображают содержимое данного тега полужирным шрифтом, но это может быть легко изменено с помощью таблицы стилей. Так как данный тег является структурным, он несет смысловую нагрузку, в отличие от тега <b>, который лишь форматирует текст полужирным, то его использование предпочтительней. Тег <em> тоже акцентирует внимание на заключенном внутри тексте, но он считается менее сильным ударением. Отображается он, как правило, курсивом. По тем же причинам использование <em> предпочтительней, чем применение <i>. Сравните, как будет отформатирован следующий текст.

Листинг 5.

<html>

<body>

<p><strong>Данный параграф отформатирован тегом strong</strong></p>

19

<p><b>А этот тегом b, внешне они не отличаются. </b></p>

<p><em>Данный параграф отформатирован тегом em </em></p>

<p><i>А этот тегом i, внешне они не отличаются. </i></p>

</body>

</html>

Еще одной парой тегов форматирования являются теги <big> и <small>. Первый выводит текст увеличенным по сравнению со стандартным, а второй уменьшенным. Вместо тега <big> рекомендуется использовать теги <strong> или теги заголовков, так как они несут и структурную нагрузку. Тег <small> является тегом, по смыслу противоположным <strong> и <em>, он деакцентирует внимание на тексте. По поводу применения этого тега следует сделать одно замечание: на разных компьютерах установлено различное разрешение экрана и в браузере может быть установлен различный размер основного шрифта и сильное уменьшение текста может сделать текст нечитаемым. Следующий пример демонстрирует вид текста, отформатированного с помощью этих тегов.

Листинг 6.

<html>

<body>

<p><big>Данный параграф отформатирован тегом big </big></p>

<p><small>Данный параграф отформатирован тегом small </small></p>

<p>А в данном параграфе теги не применяются</p> </body>

</html>

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

Сравните формулы, набранные различным способом: Листинг 7.

<html>

<body>

<p>Формула воды H2O. В данном параграфе формула набрана

20