Общие сведения о языке HTML. Для подготовки информации и сохранения ее в виде WWW-документов (страниц, сайтов) был разработан специальный язык разметки гипертекста - HTML (Hypertext Markup Language). Основное назначение языка состоит в представлении текстовой, графической, видео- и аудиоинформации в виде, обеспечивающем минимальный объем передаваемой в сеть информации.
Как любой язык программирования, HTML имеет свою грамматику и правила записи. Формируемый код программы представляет собой текст в формате ASCII (поэтому для создания текста HTML-программы и применяют текстовые редакторы). После составления текста программы в текстовом редакторе его необходимо сохранить в формате HTML.
В отличие от текстового редактора, отображение документа производится не при его создании, а лишь после того как он будет загружен в WWW-броузер.
Структура HTML-документа. Язык HTML существует в нескольких вариантах, или спецификациях. Как и версии любых программных продуктов, варианты языка HTML пронумерованы: 2.0, 3.0, 3.2, 4.0. Каждая последующая версия представляет собой расширение и дополнение предыдущей. Здесь мы будем рассматривать конструкции HTML версии 4.0, которые поддерживаются последними версиями большинства распространенных броузеров. Все версии создают файлы, сохраняемые с расширениями.html или.htm.документ - это текстовый документ специального формата, в котором обычный текст сочетается с элементами разметки, заключенными в угловые скобки < >, например <html>, </html>, <head>, </body>. Такие элементы разметки называются тегами.
Тэги бывают одиночными, открывающими и закрывающими и состоят из следующих друг за другом в определенном порядке элементов:
1) левой угловой скобки <;
2) необязательного символа слэш /, который означает, что тэг является конечным, т.е. закрывающим некоторую структуру, например </html> (символ / можно читать как конец некоторого элемента разметки, например строки или абзаца);
3) имени тэга, например html;
4) необязательных атрибутов (тэг может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например align = «center»);
5) правой угловой скобки >.
Таким образом, открывающий тэг <html>, стоящий в документе HTML и означающий его начало, состоит из html и двух угловых скобок < >, а тэг </html>, указанный в конце Web-документа, содержит еще и символ слэш /, означающий, что этот тэг закрывающий, т. е. указывающий на конец документа.
Атрибут align со значением «center», означает, что текст будет выровнен по центру. Например:
<html>
<head>
<title> титульный лист </title>
<style type="text/css">{font-family:"Arial";
font-size:"14pt";
color:blue;
background-image:URL(C:\Windows\Рабочий стол\ Учебник \рисунки 100.gif);
text-align: "center"}
</style>
</head>
<body>
……….
</body>
</html>.
При написании кода программы на языке HTML не играет роли формат шрифта - прописной он или строчный или нижний регистр, т.е. тэги <head>, <head> и <Head>: являются эквивалентными.
Большинство тэгов могут иметь один или несколько атрибутов - параметров, дающих дополнительную информацию о том, как броузер должен обрабатывать текущий тэг. Но атрибут не является обязательной характеристикой тэга.
Атрибут тэга состоит из имени (например, align), знака равенства (=) и значения, которое задается строкой символов (например, «center»), т.е. имеет вид align=«center». Значения атрибутов обычно заключаются в кавычки. Однако, если в этих значениях используются только символы латинского алфавита, цифры и дефисы, кавычки можно опустить и записать align = center.
Структура HTML-документа содержит следующие обязательные элементы:
тэги <html> и </html> - отмечают начало и конец документа;
тэги <head> и </head> - ограничивают заголовок;
тэги <body>... </body> - ограничивают текст программы.
В заголовке, ограниченном тэгами <head> и </head>, с помощью тэгов <title>...</title> определяется название документа, которое должно отражать его содержание и включать в себя не более шести слов. Это название отображается броузерами в строке заголовка рабочего окна программы, и поисковые системы броузеров идентифицируют документ, используя его название. Например в работе автора:
<html>
<head>
<title> титульный лист </title>
<style type="text/css">{font-family:"Arial";
font-size:"14pt";
color:blue;
background-image: URL(C:\Windows\Рабочий стол\Учебник \рисунки
\100.gif);
text-align: "center"}
</style>
</head>
<body>
…………
</body>
</html>.
Обзор команд языка HTML. Технология создания Web-документов сводится практически к аналогичным действиям по созданию документа в редакторе Word:
1) создание и форматирование страницы текста;
2) вставка рисунков;
3) вставка гиперссылок;
4) создание списков;
5) создание форм;
6) создание таблиц;
7) создание многооконной страницы (страницы с фреймами).
Приступая к разработке Web-страницы, необходимо сформировать на жестком диске папку для хранения страниц, например с именем Web.
Создание Web-страниц в некоторой степени аналогично созданию слайдов презентаций, т. е. сначала проводится дизайнерская работа с карандашом в руках по разработке сценария страницы.
Когда сценарий страницы продуман, можно приступить к ее созданию, для чего необходимо выполнить следующие действия:
1) создать папку с именем Главы на любом жестком диске компьютера;
2) запустить программу Блокнот (Notepad). При этом для создания HTML-кода можно использовать любой текстовый редактор, однако в этом случае следует сохранять файл в виде простого текста, чтобы избежать включения в Web-документ посторонних символов форматирования;
3) ввести в окно программы Блокнот (Notepad) тэги, определяющие структуру любого HTML-документа;
4) составить (отформатировать) документ средствами языка HTML.
Создание и форматирование страницы текста.
Правила и приемы составления кода HTML:
1) при создании HTML-кода допускается использовать любой регистр символов (и верхний, и нижний);
2) каждый тэг следует вводить с новой строки (кроме закрывающего тэга </title>);
3) для ввода парных тэгов можно использовать операции копирования и вставки через буфер обмена MS Windows с последующим добавлением символа слэш /.
Рассмотрим правила написания тэгов и их назначение на примере следующей структуры HTML-документа:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>.
Первый <html> и последний </html> тэги означают соответственно начало и конец документа.
Тэги <head>... </head> определяют заголовок Web-страницы.
Теги <body>...</body> устанавливают начало и конец текстовой информации документа.
Между тегами <title> и </title> вносится название Web-страницы, которое должно быть коротким и максимально отражать ее содержание.
Так как между тэгами <body>... </body> вставляется основной текст страницы, то при составлении исходной структуры HTML-Кода между ними следует вставить пустую строку.
Для каждой Web-страницы можно задать цвет фона и цвет Текста с помощью атрибутов bgcolor и text открывающего тэга <body>.
Задать цвет как значения атрибутов можно, указав имя цвета например white - белый (в языке HTML предусмотрено шестнадцать таких имен), или с помощью цифрового обозначения, выполненного в шестнадцатеричной системе (например, «#ffffff белый), которое указывает, каким образом данный цвет формируется из основных цветов - красного, зеленого, синего. Например в практической части дипломной работы название учебника написано синим цветом.
<html>
<head>
<title> титульный лист </title>{color:blue}
</style>
</head>
<body>
<p><h1><i><big>ЧИСЛЕННЫЕ МЕТОДЫ</big></i></h1></p>
</body>
</html>.
После оформления страницу надо сохранить, для чего необходимо:
в окне программы Блокнот (Notepad) выбрать из меню Файл * Сохранить (File * Save) команду Сохранение (Save As);
1) открыть созданную ранее папку Главы, в которой должны сохраниться Web-файлы;
2) в поле ввода имени файла File name ввести имя страницы с расширением.html.
При сохранении файла необходимо указать расширение имени.html или.htm, чтобы броузер смог открыть файл для просмотра. Тогда файл будет сохранен в указанной папке и его имя появится в заголовке окна программы Блокнот (Notepad).
Для просмотра страницы в броузере необходимо открыть папку Главы, в которой был сохранен HTML-файл, и щелкнуть мышью по его значку. После чего будет запущен броузер, установленный по умолчанию, и в его окне откроется созданный документ.
Если при вводе текста между тэгaми <body>...</body> не введено никаких указаний по его форматированию, т.е. разделению на абзацы, то этот текст при просмотре страницы в браузере будет отформатирован в виде одного абзаца и выровнен по левому краю страницы. Чтобы Web-страница выглядела более привлекательно, текст следует разделять на абзацы с выделением заголовков.позволяет задавать шесть уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заголовки объявляются парой тэгов с номерами, соответствующими требуемым уровням, например: <h1> (Текст заголовка) </h1> - заголовок раздела первого уровня, <h6> (Текст заголовка) </h6> - заголовок раздела шестого уровня. Например, название раздела в созданном автором электронном учебнике написано <h2>…</h2> шрифтом.
<html>
…………………
<body>
<p><h2> 2.1.Определители </h2></p>
………………………………
</body>
</html>.
От простого текста заголовки отличаются размером и толщиной букв. Заголовок первого уровня h1 выполняется обычно очень крупным шрифтом, а заголовок шестого уровня h6 - очень мелким.
Надо обратить внимание, что не следует путать заголовки разделов документа с заголовком страницы, определяемым директивой <head> (Заголовок страницы) </head>.
По умолчанию заголовок выравнивается по левому краю страницы, но его можно также выровнять по правому краю или центрировать. Для правостороннего выравнивания в тэге <h1> используется атрибут align = right, а для центрирования - align = center. Допускается также явное указание левостороннего выравнивания - align = left. Например, директива <hl align = center> (Текст заголовка) </hl> указывает, что текст заголовка должен быть выровнен по центру, а размер шрифта должен быть наибольшим.
Вставка рисунков. На каждую Web-страницу можно поместить любое число рисунков, используя готовые графические изображения или создавая их.
Изображения, которые необходимо разместить на Web-страницах, должны быть в таком графическом формате, который поддерживается броузером. Стандартные форматы Web-графики - GIF, JPG и PNG. Размеры их файлов минимальны по сравнению с файлами других форматов.
Для вставки графического файла применяется одиночный тэг <img> с атрибутом src. Значение атрибута указывает полное имя файла или его адрес в Интернете.
В отличие от простого текста, который, как правило, мы читаем только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Справочные системы многих программных продуктов построены именно по принципу гипертекста. При щелчке левой кнопкой мыши на некотором выделенном цветом и подчеркнутом фрагменте текущего документа - гипертекстовой ссылке -происходит переход к заранее определенному документу или фрагменту документа. На Web-страницах гипертекстовые ссылки широко используются для перехода к определенному фрагменту текущей страницы, следующей или любой странице сайта или документу другого сайта.
Для задания перехода по гиперссылке в языке HTML используются тэги <а>...</а> с атрибутом href, значением которого является адрес перехода. В качестве адреса может использоваться имя файла другого документа или URL-адрес.
Для осуществления перехода на отдельные страницы сайта необходимо в директиве указать только имя этой страницы, причем адрес файла следует заключать в кавычки, так как не все браузеры могут отличить адрес без кавычек.
На примере нашего электронного учебника посмотрим как создать гиперссылку перехода с титульного листа (1 стр.) на содержание.
<html>
<body>
………….
<a href="C:\Windows\Рабочий стол\Учебник\1стр.htm"><img src=
"C:\Windows\Рабочий стол\Учебник\рисунки\187.gif" align="right" alt="Содержание" />
</body>
</html>.
Создание таблиц. До сих пор мы создавали документы, в которых текст располагался в одной колонке. На практике иногда бывает необходимо внести текст в несколько колонок. Сделать это можно, создавая таблицы, аналогичные таблицам Word. Кроме того, таблица, состоящая из одной ячейки, помогает эффективно выделить фрагмент текста, на который следует обратить внимание читателя. В ячейках таблицы удобно размещать рисунки и текст. Часто таблицу применяют для создания пользовательского меню. Конечно же, таблица нужна для отображения информации непосредственно в табличном виде.
Технологию создания рассмотрим на примере таблицы из одной колонки и двух строк которая создана в электронном учебнике по дисциплине «Компьютерные сети и телекоммуникации» (рисунок 2.1).
Для создания таблицы необходимо выполнить следующие действия:
1) открыть текстовый или создать новый документ, уже в открытом редакторе;
2) ввести основные тэги, ее создающие структуру документа.
Рисунок 2.1. Пример таблицы
Каждая таблица начинается тэгом <table> и заканчивав тэгом </table>. Строки таблицы образуются парой тэгов <tr>...</ tr> между которыми располагаются тэги <td>(Строка текста)</td>. Каждая пара этих тэгов образует строку столбца. Таким образом код HTML, описывающий таблицу, показанную на рис. 1, будет иметь следующий вид:
<table widht="50%" border="1" rules="all"><br \>
<tr><td align="center"colspan="50"><img src="C:\Windows\Рабочий стол\Учебник\рисунки\ф43.gif" /></td</tr>
<tr><td align="center"colspan="50"><img src="C:\Windows\Рабочий стол\Учебник\рисунки\ф46.gif" /></td></tr>
</table>.
Данный код необходимо ввести между открывающим <body> и закрывающим тэгом </body>.
Итак, таблица разработана, осталось создать ссылки на соответствующие страницы сайта.
Для задания перехода по гиперссылке используем тэги <а>...</а> с атрибутом href, указывающим имя страницы.
Создание многооконной страницы (страницы с фреймами). Значительно улучшить внешний вид и функциональность сайта можно, используя фреймы - элементы, разделяющие экран на несколько окон, в каждом из которых отображается содержимое отдельной страницы. Используя технологию фреймов, можно одновременно загрузить в одно окно браузера несколько Web-страниц.
Каждый фрейм имеет собственный адрес, позволяющий отображать его независимо от других фреймов, и собственное имя позволяющее переходить к нему из других фреймов. Эти свойства позволяют размещать в одном фрейме информацию, которую автор считает необходимым постоянно показывать пользователю (например, содержание как в нашем электронном учебнике).
Для описания фреймов используется специальный HTML-файл, в структуре которого вместо тэгов <body>...</body> используется пара тэгов <frameset>...</frameset>.
Структура файла с фреймами выглядит следующим образом:
<html>
<head>
<title>(Teкст заголовка)</ title>
<frameset>
(Описание фреймов)
</frameset>
</head>
</html>.
Открывающий фрейм <frameset> должен иметь атрибуты rows или cols, которые определяют способ разделения экрана - по горизонтали или вертикали. В качестве значений этих атрибутов используют числовое значение высоты или ширины фрейма в пикселях или процентах (от 1 до 100%). Например, если требуется разделить окно браузера по горизонтали на два равных по размеру фрейма, код должен иметь вид: <frameset rows = «50%, 50%»>, в котором значения атрибутов отделяются один от другого запятой.
Для описания каждого фрейма в отдельности используются одиночные тэги <frame>, которые должны находиться внутри тэгов <frameset>...</frameset>.
<html>
<head>
<title>фреймы </title>
</head>
<frameset framespacing="0" border="0" cols="200,*" frameborder>
<frame name="contents" target="прав" scrolling="auto" src="C:\Windows\Рабочий стол\Учебник\главы\лев.htm" noresize marginwidth="8" marginheight="8">
<frame name="прав" scrolling="auto" src="C:\Windows\Рабочий стол\Учебник\главы\прав.htm" target="_self" marginwidth="8" marginheight="8" noresize>
<noframes>
</frameset>
</html>.
Мы рассмотрели в общих чертах язык разметки гипертекста HTML и технологию создания Web-страниц для размещения в сети Internet деловой информации, способствующей эффективному функционированию предприятия, фирмы или учебного заведения.
Однако создание Web-страниц средствами языка HTML требует хорошего знания всех тэгов и директив этого языка, поэтому различные фирмы разрабатывают прикладные программные системы, т. е. редакторы для создания Web-сайтов.
Кроме языка HTML в электронном учебнике также использовали Microsoft Word при создании титульного листа. Текстовый процессор Microsoft Word - это приложение Windows, предназначенное для создания, просмотра, модификации и печати текстовых документов.MS Word является одним из основных элементов интегрированного пакета программ офисной технологии Microsoft - Microsoft Office.получил в нашей стране широкое распространение и является своеобразным стандартом, используемым при подготовке документов, тезисов докладов, отчетов и других публикаций.
В настоящее время используются следующие версии текстового процессора Word:
1) Версия Word 6.0 ориентирована на графическую операционную оболочку Windows 3.11,хотя может использоваться и при работе с более поздними версиями Windows.
2) Версия Word 7.0 (Microsoft Word 95) разработана для операционной системы Windows 95.Она входит в состав пакета программ Microsoft Office 95,позволяет организовать эффективный обмен данными между различными программами этого пакета и создавать документы разной сложности. В этой версии появились встроенные средства проверки орфографии и грамматики и новые возможности автоматизации и управления взаимодействием текста со встроенными объектами.
3) Версия Word 97 (Word 8.0) является составной частью интегрированного пакета программ Microsoft Office 97 (98). В этой версии имеются дополнительные возможности автоматизации и оформления документов, а также впервые появилась возможность разработки электронных документов в форматах HTML и PDF, рассчитанных на их публикацию в сети Интернет.
4) Версия Word 2000 (Word 9.0) входит в состав интегрированного пакета программ Microsoft Office 2000. В этой версии устранены некоторые недостатки предыдущих версий, заметно улучшен интерфейс, усовершенствованы системы установки и управления программами, а также введены дополнительные средства поддержки сетевых режимов работы.
Все перечисленные версии Word поддерживаются операционными системами Windows 95, Windows 98, Windows NT, Windows 2000 и Windows XP.
Современные текстовые процессоры (Word 97 и Word 2000) позволяют составлять документы трех типов:
1) документы для распечатки на бумаге (печатные документы);
2) электронные документы;документы для использования в сети Интернет;
3) назначение и функциональные особенности текстового процессора MS Word 2000.
Программа MS Word 2000 - это мощный текстовый процессор, который располагает широкими возможностями по обработке и форматированию текстовых документов. В нем реализованы следующие возможности и технологии:
1) графическая технология и шрифты, которые позволяют использовать для оформления абзацев, таблиц и рисунков линии, цвет, рамки, тени, узоры, заполнение;
2) уникальная коллекция оригинальных технологических решений, таких, как:
3) система готовых шаблонов и стилей оформления;
4) использование мастеров;
широкий набор разнообразных панелей инструментов и возможность их модификации по усмотрению пользователя, наличие форматной кисти;
5) открытие и сохранение документов в множестве различных форматов;
6) оригинальные приемы создания и модификации таблиц;
7) проверка правописания и многоязыковая поддержка;
8) мощная справочная система, обеспечение помощи по ходу работы, возможность получения справочных сведений из сети Интернет;
9) установление связи с другими документами с помощью гиперссылок и перекрестных ссылок;
10) создание почтовых рассылок и слияние документов.
Наличие встроенного графического редактора векторного типа и коллекции готовых рисунков и клипов, возможность размещения рисунков в любом месте документа и обтекания текстом объектов любой формы и размера, выполнение многих операций верстки, свойственных профессиональным издательским системам;
Поддержка сетевых режимов работы и работы в Интернете: возможность составления и отправки сообщений электронной почты, легкость создания HTML-документов, содержащих богатые элементы форматирования, характерные для документов Word, свободный просмотр документов на любой программно-аппаратной платформе Web-обозревателя, возможность размещения созданных Web-документов в сети Интернет;
Технология связывания и внедрения объектов (технология OLE), позволяющая включать в документ текстовые фрагменты, таблицы, иллюстрации, подготовленные в других приложениях, и редактировать встроенные объекты средствами этих приложений.