Модуль 7. Подготовка HTML - страниц: первые шаги
Предисловие
Для описания документов, передаваемых по паутине www сети Интернет и содержащих тексты, рисунки, анимацию и другие мультимедиа-объекты, создан специальный язык. Он получил название языка разметки гипертекста HTML (Hyper Text Markup).
Возможны два подхода к подготовке web-страниц: программирование на HTML "вручную" и использование различных средств автоматизации для создания HTML-документов. Наиболее эффективным является компромиссный подход - основа документа готовится с использованием средств автоматизации, а окончательная "шлифовка" и доработка каких-либо деталей осуществляется путем "ручной" корректировки кода HTML-программы. Знать основы языка HTML полезно еще и потому, что некоторые элементы страниц, понравившиеся вам в Интернет, вы можете применить и в своих документах, благо исходная HTML-программа легко доступна. Но чтобы использовать чужой опыт, надо хотя бы уметь понимать коды реализующей его программы.
Даже если Вы сотрудничаете с профессионалом-программистом (web-мастером в терминологии Интернет), знакомство с основами HTML полезно хотя бы для того, чтобы говорить с ним на одном языке и понимать, что не так уж все это сложно или наоборот, что не так уж все это просто.
В данном модуле курса рассматривается пример создания личной странички с помощью специального редактора СuteHTML компании GlobalSCAPE. Он позволяет видеть текст HTML-программы и, при необходимости, легко вносить в него изменения. В рассматриваемом примере фрагменты кода создаваемой СuteHTML HTML-программы снабжены комментариями, которые позволят начинающему пользователю не только создать свою страницу, но и познакомиться с основными элементами языка
Авторы не ставили целью создать руководство по подготовке web-страниц. Цель данного модуля - помочь начинающим авторам HTML-продуктов сделать первые практические шаги. А далее, если необходимо, можно использовать многочисленную литературу, см., например, список в конце модуля. Получить демонстрационные и shareware-версии редактора CuteHTML можно в Интернет по адресу http://www. . ( http://www. ).
1. Немного о языке HTML
Программа на языке HTML, как и на многих других языках программирования, представляет собой файл текстового формата. Поэтому она может редактироваться и создаваться не только в специализированных HTML-редакторах (например: Site-Aid, СuteHTML, Maсromedia Dreamweaver, Home-Site, FrontPage и др.), но с помощью обычных текстовых процессоров в MS DOS или WINDOWS. Надо лишь следить за тем, чтобы программа была записана на диск в виде текстового файла, а не в особом формате, присущем большинству современных текстовых редакторов.
Можно, например, создать такую программу в текстовом редакторе MS Word и записать ее с расширением. txt, затем переименовать файл, сделав его расширение .htm (или. html), и этот файл будет восприниматься броузерами.
Документ, подготовленный на HTML, содержит элементы форматирования - дескрипторы (от англ. Description - описание) и собственно тексты. Дескрипторы обычно называют либо флагами (markup tags - флаги разметки), либо непосредственно тегами (tags).
Теги представляют собой определенные стандартом HTML последовательности символов, заключенных внутри знаков < >. Любая программа на HTML начинается с тэга < HTML>, а заканчивается тэгом < /HTML>, который отличается от начинающего тэга наличием косой черты /. Такое правило действует в отношении блоков программы - например, блок задания заголовка начинается флагом < HEAD>, а заканчивается флагом < /HEAD>.
Теги могут быть и непарными. Например, тег < BR > служит для перехода на новую строку при выводе текста.
Броузеры не реагируют на регистр символов, описывающих теги, и их можно набирать строчными или прописными буквами.
Вот собственно и все, чтобы начать практическую работу. Поэтому перейдем к примеру.
2. Начало практической работы
Прежде чем бросаться к компьютеру, поработайте сначала с карандашом и бумагой - "нарисуйте" макет вашей страницы.
Подготовьте директорию на жестком диске, в которой вы будете формировать HTML-документ. В эту директорию запишите подготовленные ранее иллюстрации, которые вы планируете разместить на своей странице.
Загрузите редактор CuteHTML. На рабочем поле редактора появляется заготовка программы стандартного начала любого HTML-документа (рис. 1). Синим цветом показаны теги, черным - комментарии. Уберем "лишние" строки: 4-6 строки используются для информации, передаваемой в поисковые системы Интернет. Пока уберем их. Строки 9-11 со служебной информацией пока тоже уберем.
Рис. 1. Поле редактора CuteHTML после его загрузки
Введем заголовок документа между тегами < ТITLE> и < /ТITLE>.
Например, < ТITLE>Личная страница < /ТITLE>.
Сохраним документ, щелкнув по кнопке FILE, а затем Save as.
Посмотрим, что получилось, щелкнув по кнопке с земным шаром и
лупой (рис. 2).
Заголовок, ограниченный тегами < ТITLE> и < /ТITLЕ>, размещается
внутри < НEAD> - тегов. Он не появляется внутри самой страницы, а отображается как имя документа на верхней панели броузера (см. рис. 2).
Рис. 2. Заголовок страницы на верхней панели поля броузера
3. Первая надпись на странице
В соответствие с макетом начинаем заполнять страницу. Внутри парных тегов BODY находится несколько типовых атрибутов этого ключевого слова HTML. Каждый атрибут содержит свое имя, знак равенства и значение атрибута, заключенное в кавычки.
Атрибуты отделяются друг от друга пробелами. В заготовке нашего примера значения ключевых слов даны в шестнадцатеричной форме. Это универсальная, но необязательная форма представления значений атрибутов.
Первый атрибут BGCOLOR позволяет выбрать цвет фона страниц документацветов в шестнадцатеричном коде. Гораздо быстрее можно задать один из 16 "именных" цветов с помощью их названий:
Черный - black;
Темно-синий - navy;
Светло-серый - silver;
Синий - blue;
Малиновый - maroon;
Сиреневый - purple;
Красный - red;
Розовый - fuchsia;
Темно-зеленый - green;
Голубой - teal;
Зеленый - lime;
Бирюзовый - aqua;
Оливковый - olive;
Темно-серый - gray;
Желтый - yellow;
Белый - white.
Ключевое слово TEXT задает цвет текста во всем документе. Здесь также можно использовать приведенные выше "именные" цвета.
Следующий атрибут LINK задает цвета гиперсылок. Атрибут VLINK определяет цвет, который будет назначен гиперссылке после ее просмотра. Двум первым атрибутам дадим новые значения, оставшиеся два не будем менять. Тогда соответствующая строка нашей программы будет иметь следующий вид:
< BODY BGCOLOR=SILVER TEXT=BLACK LINK="#0000FF" VLINK="800080">.
Для вывода первой надписи текста воспользуемся тегом FONT. Первым атрибутом этого тега является SIZE, который задает размер шрифта числами от 1 до 7. Атрибут FACE указывает тип шрифта, например ARIAL. Определим эти параметры строкой < FONT SIZE=4 FACE="TIMES NEW ROMAN">.
Заметим, что эту строку можно не только набрать с клавиатуры, но и получить с помощью кнопки редактора А (Font). Вводить ключевые слова, атрибуты и их значения тоже не требуется - редактор позволяет выбрать их из меню. Например, набрав < , получим меню тегов, из которых можно выбрать нужный тег и, щелкнув по нему дважды мышью, поместить в строку программы.
Поскольку первой надписью у нас будет заглавие страницы, расположим его в центре строки с помощью тега < CENTER> и сделаем полужирным тегом < B>.
В итоге получаем фрагмент программы и соответствующий ей результат (рис. 3).
< HTML>
< HEAD>
< TITLE>Личная страница
< /HEAD>
< BODY BGCOLOR=SILVER TEXT=BLACK LINK="#0000FF" VLINK="#800080">
< font face="Times New Roman" size="4">
< center>< b>СОЛОВОВ АЛЕКСАНДР ВАСИЛЬЕВИЧ< /b>< /center>
< /font>
< /BODY>
< /HTML>
Рис. 3. Фрагмент HTML-программы и страница с надписью
4. Размещение биографического текста и фотографии
Поместим фотографию ниже заглавия страницы с левой стороны. А краткий биографический текст расположим справа от фотографии (рис. 4). Такое размещение реализуется следующей программой.
< HTML>
< HEAD>
< TITLE>Личная страница < /TITLE>
< /HEAD>
< BODY BGCOLOR=SILVER TEXT=BLACK LINK="#0000FF" VLINK="#800080">
< font face="Times New Roman" size="4">
< center>< b>СОЛОВОВ АЛЕКСАНДР ВАСИЛЬЕВИЧ< /b>< /center>< /font>
< font face="Times New Roman" size="3">
< table align="center">
< tr >
< td height="102" width="130">
< P>< img src="./foto. gif" width="97" height="101" hspace="30" vspace="10"
border="0" align="left" alt=" (6220 байт)">< /P>< /td>
< td>
< P>Научный руководитель центра новых информационных технологий Самарского государственного аэрокосмического университета (ЦНИТ СГАУ), доцент, кандидат технических наук.< /P>
< P>Длительное время (со второй половины 70-х годов) специализируется в сфере компьютерной поддержки обучения. Руководил разработкой учебной САПР ПРОСК (ПРограммы Обучения Силовому Конструированиюе годы, системы КАДИС (системы Комплексов Автоматизированных ДИдактических Средстве годы. Опубликовал 170 научных, научно-методических и учебно-методических работ, из них более 80% по информационным технологиям в образовании.< /P>
< /td>< /tr>< /table>
< /font>
< /BODY>
< /HTML>
Рис. 4. Размещение биографического текста и фотографии
Такое размещение реализовано в программе в виде таблицы.
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, графику и др.
Таблица: < TABLE атрибуты>...< /TABLE>
Это теги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тегов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER, может принимать числовое значение, определяющее толщину граничной линии таблицы, например BORDER=3.
Строка таблицы: < TR>...< /TR>
Количество строк таблицы определяется количеством встречающихся пар тегов < TR>..< /TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.
Ячейка таблицы: < TD>...< /TD>
Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то броузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.
Тег нового абзаца < P> предписывает броузеру разделить два фрагмента текста пустой строкой.
ALIGN
Атрибут ALIGN встречается внутри или, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру). VALIGN Данный атрибут встречается внутри тегов < TR>, < TD> и определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху). В HTML-документ можно включать изображения из графических файлов в форматах GIF, JPEG с помощью тега < IMG>. Синтаксис < IMG> < IMG SRC="имя файла" ALIGN= left | right | top | texttop | middle | absmiddle | bottom | absbottom WIDTH=nnn HEIGHT=nnn HSPACE=nnn VSPACE=nnn ALT="альтернативный текст"> Атрибуты ALIGN, WIDTH, HEIGHT, HSPACE и VSPACE задают расположение рисунка на странице; ALT, задает альтернативный текст, атрибут SRC служит для указания программе просмотра имени и местоположения графического файла.
При помощи необязательного атрибута ALIGN можно управлять расположением изображения на странице относительно текста и других изображений.
ALIGN=bottom - нижняя сторона изображения выравнивается по базовой линии следующего за ним текста.
ALlGN=absbottom - нижняя сторона изображения выравнивается по низу строки следующего за ним текста.
ALlGN=absmiddle - горизонтальная линия, проходящая через центр строки следующего за рисунком текста выравнивается по центру изображения.
ALIGN=middle - базовая линия следующего за рисунком текста выравнивается по центру изображения.
ALIGN=top - изображение располагается на одной линии с самым высоким объектом (текстом или рисунком) в строке.
ALIGN=texttop - изображение располагается на одной линии с самым высоким символом текста в строке.
ALIGN=left - изображение выравнивается по левому краю окна, а следующий за ним текст обтекает его справа.
ALIGN=right - изображение выравнивается по правому краю окна, а следующий за ним текст обтекает его слева.
При помощи атрибутов WIDTH и HEIGHT задают размеры изображения в пикселах, чтобы при загрузке HTML-документа программа просмотра сразу отвела под это изображение необходимое ему пространство на странице и загрузила основной текст, который можно читать, пока программа просмотра получает содержимое графического файла. Следует иметь в виду, что если размеры изображения не заданы, то программа просмотра вынуждена вначале загрузить весь графический файл (что иногда занимает до нескольких минут), и только после этого - следующий за изображением текст. Долгое ожидание раздражает читателя, и он может просто прервать загрузку вашего HTML-Документа и никогда больше к нему не возвращаться.
Текст, вплотную прилегающий к изображению, выглядит некрасиво. Гораздо лучше, если между изображением и окружающим его текстом имеется некоторый "зазор".
Атрибуты HSPACE=nn, VSPACE=nn задают величину зазора, выраженную в пикселях по горизонтали и вертикали.
Тег < IMG> и его атрибуты редактор выделяет красным цветом, при этом можно не набирать соответствующий текст фрагмента программы. Редактор сам его сформирует с вашей помощью, если выбрать в опциях инструментов кнопку IMAGE.
Вывод анимации непосредственно на страницу производится аналогично графической иллюстрации: < IMG SRC="имя файла с анимацией и путь до него" ALT="альтернативная надпись" WIDTH="размер" HEIGHT="размер" BORDER="размер">.
5. Текст с гиперссылками
Добавим в страничку некоторый текст, содержащий ссылки на другую страницу данного документа, на другой сайт в Интернете, на графическую иллюстрацию и анимацию, на адрес электронной почты (рис.5-8).
Рис. 5. Просмотр по гиперссылке другой страницы документа, 40.7Кбайт.
Рис. 6. Просмотр по гиперссылке другого сайта в Интернет, 35.6Кбайт.
Рис. 7. Просмотр по гиперссылке графической иллюстрации, отображаемой в отдельном окне, 30.1Кбайт.
Рис. 8. Гиперссылка на адрес электронной почты, 29.9Кбайт.
Эти ссылки можно реализовать с помощью следующего фрагмента HTML-программы. < P>Некоторые характерные публикации в этой сфере можно посмотреть
< a href="sol_lit. htm">здесь< /a>.< /P>
< P>Под его руководством созданы несколько десятков учебных комплексов по различным учебным дисциплинам. Среди них есть и сетевой учебник по
< A HREF="http://cnit. *****/organics/index. htm">химии< /A>. В этом учебнике очень много
< A HREF="./ch3nh2.gif" target="new">графических иллюстраций< /A> и
< A HREF="./lessons. gif" target="new">анимаций< /A>.< /P>
< /font>
< /BODY>
< /HTML>
Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя ссылки, вы делаете набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.
Синтаксис гипертекстовых ссылок:
< A HREF="URL">содержимое< /A>,
где индентификатор URL задает абсолютный или относительный адрес другого документа или точку привязки в текущем документе, а содержимое определяет текст, который будет выступать в окне броузера в качестве ссылки. Обычно этот текст подчеркивается и выделяется синим цветом. Текст, обозначающий URL, не отображается броузером, а используется только для выполнения предписанных им действий при активизации ссылки.
Для вывода ссылки в дополнительном окне используется атрибут target
< A HREF="URL" target=''название кадра''>текст_ссылки< /A>,
где название кадра - имя кадра, в который следует загрузить целевой документ. Если пользователь щелкнет на ссылке, текущий кадр будет оставаться без изменения до тех пор, пока в выбранный кадр не загрузится извлекаемый документ. Если присвоить target значение new, то извлекаемый документ будет загружаться в новое окно (см. рис. 7).
6. Подготовка текста в виде списка
Нередко текстовую информацию необходимо представить в виде списка. Для этой цели HTML имеет специальные средства.
Ниже представлен текст программы, интерпретация которой броузером показана на рис. 5 в разделе 5.
< HTML>
< HEAD>
< TITLE>Некоторые публикации < /TITLE>
< /HEAD>
< BODY BGCOLOR=SILVER TEXT=BLACK LINK="#0000FF" VLINK="#800080">
< font face="Times New Roman" size="4">
< center>< b>НЕКОТОРЫЕ ПУБЛИКАЦИИ А. В. СОЛОВОВА< /b>< /center>< /font>
< font face="Times New Roman" size="2">
< ul>
< li>Тренажер для конструктора // Депонированная рукопись. М.: НИИ ВШ, № 000-83 деп.,1983.-39с. < /li>
< li>Руководящие методические материалы по внедрению ЭВМ в учебный процесс // Методические рекомендации для преподавателей. - Куйбышев: КуАИ, 19с. < /li>
< li>АОС и инженерная интуиция // Вестник высшей школы, № 2, с. 30-33. < /li>
< li>Некоторые методологические особенности построения и применения учебных САПР // Межвуз. сб. научных трудов. - Иваново: ИЭИ, 1987. - с. 9-15.< /li>
< li>Социальные аспекты компьютеризации инженерного труда // Сб. трудов, - Волгоград: Волгогр. ДПП, 1987. - с. 10-18.< /li>
< li>Технические средства САПР//Учебное пособие. Куйбышев: КуАИ, 19с. < /li>
< li>Учебная САПР силовых конструкций ПРОСК // Цикл методических пособий. - Куйбышев: КуАИ, 1984-19с.< /li>
< li>Обратные связи в учебных пакетах прикладных программ // Межвуз. сб. научн. трудов. - Новосибирск: НГУ, 1988. - с. 12-28.< /li>
< li>База знаний учебного назначения/ Новые инф. техн. в образовании / Труды НИИ ВО. - М: НИИ ВО, 19с.< /li>
< li>Проектирование компьютерных систем учебного назначения / Учебное пособие. Самара: СГАУ, 19с. (см. также http://www. *****/text/inftech/edu/design/ или http://cnit. *****/kadis/posob/).< /li>
< li>Проект создания единого информационного пространства Самарской области в сфере науки, образования, культуры, здравоохранения и социального обеспечения//Сб. докладов конференции RELARN. - М.: РосНИИРОС, 1995. - с. 7-15. < /li>
< li>Информационные технологии в профессиональном образовании // Информатика и образование, 1996, № 1. - с. 13-19. < /li>
< li>Об эффективности информационных технологий обучения // Высшее образование в России, 1997, № 4 - с. 100-107.
< li>Когнитивная компьютерная графика в инженерной подготовке // Высшее образование в России. 1998, № 2. - с. 90-96. < /li>
< li>Теория и методика проектирования комплексов автоматизированных дидактических средств для поддержки дистанционного обучения // Материалы Шестой межд. конф. по ДО. - М.: МЭСИ, 1998. - с. 441-445. < /li>
< li>К вопросам организации и методики информационного наполнения WWW-серверов Интернет и Интранет // Тез. докл. межд. конф. "Интернет. Общество. Личность (ИОЛ-99)" - С. Петербург: ИОО, 1999. - с. < /li>< /ul>
< /font>< /BODY>< /HTML>
В приведенной программе применен тег списков.
В пронумерованном списке броузер автоматически вставляет номера элементов по порядку. Это означает, что если вы удалите один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны.
Пронумерованный список начинается стартовым тегом < OL> и завершается тегом < /OL>. Каждый элемент списка начинается с тега < LI>. < OL TYPE=A|a|I|i|1 START=n>
где TYPE - вид нумерации:
- A - прописные латинские буквы (A, B,C...); a - строчные латинские буквы (a, b,c...); I - прописные римские цифры (I, II, III...); i - строчные римские цифры (i, ii, iii...); 1 - стандартная цифровая нумерация (1,2,3...).
START=n - число, с которого начинается отсчет
Непронумерованные списки.
Используются для представления информации в виде простого списка.
Непронумерованный список начинается стартовым тегом < UL> и завершается тегом < /UL>. Каждый элемент списка начинается с тега < LI>.
Тег < UL> может иметь параметр:
< UL TYPE=disc|circle|square>
Тип тега < UL> определяет внешний вид маркера (disc - по умолчанию), круглый (circle) или квадратный (square). /
7. Общие рекомендации
Рассмотренные выше приемы подготовки web-документов не исчерпывают всего многообразия возможностей HTML. Важно начать, дальнейшее продвижение на пути освоения www-технологии можно осуществлять самостоятельно, используя многочисленные руководства и справочники, например, [1-5].
Хотелось бы отметить, что научиться писать программы на HTML не так уж и сложно. Гораздо сложнее научиться так готовить HTML-документы, чтобы они были полезны и понятны пользователям, хорошо структурированы и информативны. Качество web-ресурсов напрямую связано с вопросами проектирования и структурирования информации, чем нередко пренебрегают начинающие разработчики информационного наполнения Интернет. Хотя эта тема требует отдельного обсуждения, см., например, [6], пользуясь, случаем, дадим некоторые общие рекомендации.
8. Задание на подготовку HTML-страниц
Подготовить личную HTML-страницу, пользуясь указаниями и примерами в разделах 2-7. Если Вы решите пользоваться редактором CuteHTML, то получить его можно в Интернет по адресу http://www. .
6. Список дополнительной литературы
, World Wide Web - всемирная информационная паутина в сети Internet/ М.: Химический факультет МГУ. 199с. и др. HTML4. Энциклопедия пользователя. Пер. с англ./ К.: Изд. "ДиаСофт", 199с.. Создание web-страниц: самоучитель/ СПб: Изд. "Питер", 199с.. , Грошев самоучитель работы в сети Интернет. Быстрый старт.: Практ. пособ. - М.: Издательство ТРИУМФ, 199с.. Internet. Настольная книга пользователя. - М.: Издательство "Солон-Р", 19с.. Соловов компьютерных систем учебного назначения. Учебное пособие. - Самара: СГАУ, 199с.