Без названия - 4.11.2. Основы ИНТЕРНЕТ

4.11.2. Основы ИНТЕРНЕТ - программирования

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

Что такое HTML? При работе в Интернете на экране отображается некоторая информация (текст, картинки, анимация). При этом отдельные места экрана могут быть выделены голубым цветом и подчеркиванием. Если на такие выделенные места {гиперссылки) навести курсор, то он при этом меняет форму, превращаясь в указательный палец. При щелчке мышью на гиперссылке на экран выводится новая информация. Она обычно также содержит гиперссылки. В результате при использовании таких гипертекстовых документов в Интернете простым нажатием кнопки мыши можно путешествовать по всему миру.

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

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

Термин HTML (Hypertext Markup Language) переводится на русский как «Язык разметки гипертекста». Ключевым здесь является слово «гипертекст». Под ним подразумевается возможность создания документов посредством включения в текст специальных указаний (тегов). Структура тегов четко оговорена в описании языка.

Структура HTML-страницы. Большинство элементов языка HTML сопровождаются специальными скобками. Открывающая скобка отмечает начало части страницы, а закрывающая отмечает конец этой части страницы. Форма скобок и конструкция таких страниц имеют следующий вид:

<НТМL>

Сам документ

</НТМL>

Документ состоит из двух частей — заголовка и тела.

Заголовок задает оформление электронного документа в целом и может вообще отсутствовать. Начало заголовка обозначается тегом <HEAD>, а конец </HEAD>.

Тело документа начинается тегом <BODY>, а заканчивается тегом </BODY>. Теперь мы можем записать общую структуру страницы электронного документа для сети Интернет:

<HTML>

<HEAD>

заголовок документа

</HEAD>

<BOOY>

тело документа

</BOOY>

</НТМL>

Этих сведений достаточно для того, чтобы уже сейчас создать простейшую текстовую HTML-страницу. Для этого необходимо в любом текстовом редакторе, например, программе Notepad (Блокнот), создать текстовый файл с любым именем и расширением .htm. При этом придерживайтесь приведенной выше структуры HTML-страницы, но вместо слов «тело документа» напечатайте любой текст — и ваша первая HTML-страница будет готова. Посмотреть ее можно в любом браузере (Internet Explorer, Opera и т.д.).

Пример простейшего HTML-документа:

<HTML>

<HEAD>

</НЕАD>

<BODY> TEKCT ДОКУМЕНТА </BODY>

</HTML>

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

Простейшие элементы форматирования текста. Рассмотрим элементы тела HTML-страницы.

Абзацы (BR,P). Все браузеры воспринимают текст файла как непрерывный поток слов, полностью игнорируя границы строк, величину интервала между словами, отступы для абзацев и заголовков и т.д. Все это задается специальными элементами языка. В частности, абзац задается включением в текст явного указания на него.

Для разбивки текста на параграфы используется тег <Р>. Точнее, параграф помещается внутрь тега <Р>.. .</P>, но так как вложенных параграфов не бывает, закрывающий тег можно пропускать.

Запись <BR> задает переход на новую строку. При этом задавать закрывающие скобки </BR> также нет необходимости. Но, если закрывающий тег все же задан, это не считается ошибкой.

Горизонтальная черта (HR). Еще одним способом разделения текста на части можно назвать горизонтальную линию. Она задается тегом <НR>. Закрывающий тег не требуется. При этом тег <НR> добавляет в HTML-документ горизонтальную линию. Перед и после линии помещается пустая строка. Атрибуты:

■ size – устанавливает высоту (толщину) линии;

■ width – устанавливает ширину (длину) линии в пикселях или процентах;

■ noshade – создает линию без тени;

■ color – задает цвет линии.

Пример: <HR> — обычная линия, a <HR size=3 color=red> — потолще, красного цвета.

Заголовки различных уровней (Н1-Н6). В языке HTML определены 6 уровней заголовка, нумеруемых по убыванию важности от 1 до 6 и обозначаемых скобками:

<Н2></Н2>, <НЗ> </НЗ>, <Н4></Н4>, <Н5> </Н5>, <Нб></Н6> .

Весь текст внутри таких скобок считается заголовком и выдается соответственно настройке вашего браузера. Размер HI соответствует самому крупному шрифту, а размер Н6 – самому мелкому. Вот пример документа с использованием заголовков первого и второго уровней:

<HTML>

<HEAD>

</HEAD>

<BODY>

<Н1>ЗАГ0Л0В0К</Н1>

<Н2>ПОДЗАГОЛ0ВОК</Н2>

</BODY>

</HTML>

Центрирование (CENTER). Если заголовок или изображение надо расположить посередине строки, то используются теги вида <CENTER> </CENTER>, а то, что заключено между ними, будет центрировано. Например, конструкция:

<H3><CENTER> ЗАГОЛОВОК УРОВНЯ 3 </CENTER></Н3>

расположит по центру экрана текст ЗАГОЛОВОК УРОВНЯ 3.

Вставка изображений (IMG SRC). В HTML-страницу можно вставить графический файл. Допустимые форматы файлов определяются браузером. Уже говорилось о том, что для Интернета наиболее приемлемыми являются форматы JPG и GIF, поддерживаемые всеми браузерами.

С изображением можно сделать такие операции: вставить его в HTML-документ, нарисовать рамку, присвоить изображению текст или превратить его в ссылку, задать размеры изображения, сделать отступы от рисунка и многое другое.

Для размещения на веб-страницах изображений служит тег <IMG> с атрибутом SRC-, указывающим адрес файла изображения.

Рамки к рисункам (BORDER). Рамки для изображения задаются конструкцией: <IMG SRC="picture.gif" B0RDER="4">, где значением атрибута BORDER является толщина рамки. Рамки при этом приобретают основной цвет текста, а если рисунок заключен в тег гиперссылок, он приобретает цвет гиперссылок.

Создание сайтов в программе Microsoft FrontPage. За короткое время разработчики веб-страниц прошли путь от простого перевода текстовых документов на язык HTML до создания красочных, искусно оформленных интерактивных страниц с умело используемой графикой и различными стилями размещения текста на странице. Появилась профессия под названием «веб-дизайнер», то есть человек, специализирующийся на создании веб-страниц высшего качества. Некоторые современные веб-страницы можно назвать произведениями искусства.

Но, поскольку публикацией документов в WWW занимаются не только профессиональные программисты, были созданы специальные средства, упрощающие подготовку веб-страниц и позволяющие подготавливать публикации, даже не зная HTML. Одним из таких средств является редактор FrontPage, разработанный компанией Microsoft.

Редактор FrontPage позволяет создавать страницы профессионального уровня, не требуя при этом знания тонкостей HTML. Работа в редакторе FrontPage похожа на работу с текстовым процессором Microsoft Word. В интерфейсе те же стандартные кнопки, такие, как полужирный шрифт, курсив и подчеркивание, маркированные и нумерованные списки, повтор и отмена операции и т. п. Если, например, редактируя страницу, вы захотите написать слово курсивом или изменить цвет заголовка — пожалуйста, выделите нужный фрагмент текста и щелкните на нужной кнопке, так, как вы это привыкли делать в MS Word, a FrontPage сам сгенерирует соответствующий код HTML. Если же вы знакомы с языком HTML, то сможете прямо в редакторе FrontPage писать код HTML и тут же, не запуская браузер, контролировать результаты своей деятельности.

В редакторе FrontPage в вашем распоряжении имеются обычные элементы страниц, такие как тексты, гиперссылки, заголовки и ряд менее ординарных: таблицы (tables), рамки (frames), бегущие строки (marquees), фоновые звуки (background sounds) и видео (video). Еще один важный элемент веб-страниц — изображения. Редактор также позволяет вставлять в страницы формы (forms) и компоненты (components). Самые передовые веб-технологии, такие, как компоненты ActiveX и сценарии Java, тоже легко встраиваются в HTML-страницы с помощью редактора FrontPage.