Logo GenDocs.ru

Поиск по сайту:  

Загрузка...

Конспект лекций - файл 1.doc


Конспект лекций
скачать (70 kb.)

Доступные файлы (1):

1.doc70kb.17.11.2011 07:18скачать

содержание
Загрузка...

1.doc

Реклама MarketGid:
Загрузка...

НОУ ВПО




Институт управления и бизнеса


Конспект лекций


Программные средства разработки Web-страниц и презентаций.


Тула, 2010 г.

I. Основы разработки WEB-документов средствами языка разметки гипертекста HTML

В настоящем пособии темы пособия изучаются приемы создания простейших WEB-документов ( прайс-листов, витрин WEB-магазинов и др. ) средствами языка HTML, при помощи редактора FrontPage 2003, или используя табличный процессор EXCEL 2003.



World Wide Web (сокращенно WWW) представляет собой глобальную гипертекстовую структуру. Эта технология реализует идею глобальной информационной базы данных. Работа в WWW требует наличия доступа в интернет. При этом пользователь пользуется модемными входами (пулами) провайдера (поставщика интернет - услуг) для связи с всемирной сетью.

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

Размещение собственных материалов в интернете включает два этапа: подготовку материалов и их публикацию.

Подготовка материалов состоит в создании документов, имеющих формат, принятый в интернете, т.е. Web-страниц. Они пишутся на языке HTML (Hyper Text Markup Language – язык разметки гипертекста). HTML предоставляет возможность использования рисунков, таблиц, различных шрифтов в гипертекстовом документе, а также так называемых скриптов (своеобразных программ просмотра HTML документов).

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

В WWW по ключевым словам можно попасть в совершенно другой документ, войти в программу, произвести какое-либо действие. Можно получить доступ к любым ресурсам: к Тelnet, e-mail, FTP, Usenet news и др.

Для передачи HTML-документов используется НTТР – протокол передачи текста (Hyper Text Transfer Protocol).

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


Для просмотра HTML-страниц в WWW используются специальные программы, называемые браузерами (броузерами). Наиболее распространенными браузерами являются Internet Explorer фирмы Microsoft Corporation, а также Netscape Navigator и Netscape Communicator. Программа Internet Explorer поставляется вместе с операционной системой Windows и поэтому нет необходимости дополнительно устанавливать браузер. Для чтения электронной почты и новостей используется приложение Microsoft Outlook. Для создания и редактирования HTML-документов можно также использовать поставляемый вместе с Windows HTML-редактор Front Page Express, либо использовать возможности программ Word, Excel, Access, PowerPoint.


^ 1.1 Создание Web-документов на языке HTML


Документ на языке HTML представляет собой обычный текстовый файл, содержащий как сам текст, так и специальные флаги форматирования документа и ссылки на файлы, содержащие графическую и звуковую информацию. Флаги форматирования предназначены для программ просмотра. Эквивалентным названием флага является тег. В соответствии с ними программа просмотра формирует содержимое документа для вывода его на экран.

Для HTML-документов приняты следующие расширения файлов:

.htm – для операционных систем, поддерживающих не более трех символов для расширения файлов (MS DOS, Windows 3.X)

.html – для операционных систем, поддерживающих более трех символов для расширения файлов (UNIX, Windows 95 и выше).

В текст документа не могут включаться символы <,>,&,”.

Флаги языка HTML предназначены для форматирования и разметки документа. Флаг начинается с символа < и заканчивается символом >. Практически все флаги языка HTML являются парными, за редким исключением. Все флаги, атрибуты и буквенные параметры используют латинские символы, которые могут быть как строчными, так и прописными. В случае парных флагов, закрывающий флаг отличается от открывающего наличием символа / после открывающей угловой скобки.

Например: <p>…</p> - парный флаг описания параграфов. Действие парного флага распространяется на весь текст, расположенный между флагами. Язык HTML предусматривает использование вложенных флагов. Ситуация, когда открывающий флаг находится между одними парными флагами, а закрывающий флаг находится вне этих парных флагов , является недопустимой. Пример вложенных флагов <B><I>…</I></B>.

В некоторых случаях к флагам добавляются атрибуты. Атрибуты – это ключевые слова .Они отделяются от флага и других атрибутов пробелами. Значение атрибута следует за символом = и помещается в кавычки. Например: <HI ALIGN=”LEFT”>. В парных флагах атрибуты добавляются только к открывающему флагу.

Создание HTML-документа может выполняться вручную, либо при помощи Front Page Express. Первый способ позволяет создавать более качественные и универсальные документы.

Значения параметров, как правило, помещаются в кавычки, но могут быть и без кавычек. Например, size=”10” . Здесь атрибут size имеет значение 10.
^

1.1.1 Структура HTML-документа



HTML-документ начинается в флага <HTML> и заканчивается флагом </HTML>. Между флагами располагается текст документа. Например:

<HTML>

Текст документа

</HTML>

Остальные элементы документа разбиваются на два раздела: раздел головной части документа и раздел самого тела документа.

На экране флаги не отображаются, как не отображаются элементы головной части. Отображается только текст.

Раздел головной части документа начинается и заканчивается флагами <HEAD> и </HEAD>. В головной части всегда встречающимся элементом является название документа, помещенное между флагами <TITLE> и </TITLE>.Основное содержание документа располагается между парными флагами < BODY>.

Например:

<HTML>

<HEAD>

<TITLE> название документа </TITLE>

</HEAD>

<BODY>


Текст документа

</BODY>

</HTML>


1.1.2 Функциональные блочные элементы. Флаги
^

форматирования текста (теги)



В большинстве WEB-документах основными функциональными

элементами являются заголовки и абзацы.

Заголовки.

Язык HTML поддерживает 6 уровней заголовков. Они
отображаются при помощи парных флагов от <H1>…</H1> до
<H6>…</H6>. При отображении документов текст разных уровней

отображается шрифтами разных размеров. Уровни должны быть
вложенными.

Абзацы.

Для создания параграфа или абзаца текста используются
парные флаги <P> и </P>. Например:

<P> текст первого абзаца </P>

<P> текст второго абзаца </P>. Флаг <P> может быть не парным, т.е.

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

используется непарный флаг <BR>. Пустая строка при этом не вставляется.
^
В качестве ограничителя абзаца может использоваться горизонтальная ли-
нейка. Этот элемент задается непарным флагом <HR> .

Горизонтальная линия используется для разделения текста на логические части. Для задания дополнительных параметров горизонтальной линейки используются следующие атрибуты. < HR SIZE = число > – задает толщину линии в пикселях. < HR WIDTH = число | проценты > - задает длину линии по горизонтали в пикселях или процентах от ширины экрана. < HR ALIGN = left | center | right > - задает выравнивание линии по левому краю, по центру или по правому краю. < HR NOSHADE > - по умолчанию линия выводится с использованием трехмерного эффекта. При использовании данного атрибута линия выводится одним цветом.
^
Например, если создается горизонтальная линейка шириной в 10 пикселей, занимающих половину ширины окна, и расположенную справа, следует

записать <HR ALIGN=RIGT SIZE=”10” WIDTH=”50%”>

Для создания горизонтальной линейки зеленого цвета шириной в 8

пикселей, занимающей 80 % ширины окна при выравнивании по центру,

следует записать

<HR ALIGN=CENTER SIZE=”8” WIDTH=”80 %” COLOR=”GREEN”>

Соответственно, для задания полосы красного цвета следует записать COLOR= ”RED”, для задания голубого цвета линии следует записать COLOR= ”BLUE” и т.д.

1.1.3 Списки



^ Ненумерованный список. Для вывода информации в виде ненумерованного списка используются флаги < UL > и < / UL >. Каждый элемент списка задается при помощи непарного флага < LI >.

В отображаемом тексте ему предшествует символ ·.


Пример:

<UL>

< LI > Пример 1

< LI > Пример 2

< LI > Пример 3

< / UL >


На экране это отобразится так:

Пример 1

Пример 2

Пример 3

^ Нумерованный список. Для вывода информации в виде нумерованного списка используются флаги < OL > и < / OL >. Каждый элемент списка задается при помощи непарного флага < LI >.



Пример:

< OL >

< LI > Пример 1

< LI > Пример 2

< LI > Пример 3

< / OL >


На экране это отобразится так:

1.Пример 1

2.Пример 2

3.Пример 3


1.1.4 Таблицы


Таблицы удобны для представления больших объемов данных. Та-

блица в языке HTML задается при помощи парного флага <TABLE> . Она

может содержать заголовок, определяемый парным флагом <CAPTION> и строки таблица, которые задаются при помощи парных флагов <TR>. За-

крывающий флаг </TR> можно опустить. Каждая строка таблицы содержит

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

в заголовках столбцов строк задают парным флагом <TH>, обычные ячей-

ки парным флагом <TD>. Закрывающие флаги </TH> и </TD> можно опустить. Атрибуты элементов, используемых при создании таблиц:

a) ALIGN. Элемент – таблица, заголовок, строка, ячейка.

Используются для выравнивания таблицы по горизонтали,

размещения заголовка над или под Таблицей.

b) WIDTH. Элемент – строка, ячейка. Задается ширина.

c) HIGHT. Элемент – ячейка. Задается высота.

d) BGCOLOR. Элементы – таблица, ячейка. Задает цвет фона

e) BORDER. Элемент – таблица. Отображение границ ячеек и внешней рам-

ки таблицы.

1.1.5 Комментарии


Комментарии помещаются между флагами <DL> и </DL>. Термины

внутри комментария начинаются флагом <DT>, определения начинаются с

флага <DD>.

Синтаксис.

<DL>

<DT>…<DD>…

</DL>

Пример:

<DL>

<DT> Байт <DD> Содержит8 битов.

<DT>Килобайт <DD> Содержит 1024 байтов.

</DL>

Этот текст будет отображен так.

Байт


Содержит 8 битов

Килобайт

Содержит 1024 байтов.
^

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



Управление форматированием текста не является основной задачей

языка HTML.Поэтому текстовые элементы, выполняющие задачи формати-рования рассматриваются как устаревшие. К ним относятся версии, начи-

ная с HTML 4.0. Их использование не рекомендуется.

Парный флаг <Front> управляет параметрами шрифта. Он должен

содержать хотя бы один из трех атрибутов: Color=, Face=, Size = . Атрибут Color= задает цвет текста. Например, Color= “Red”. Атрибут Size=

определяет размер шрифта в относительных единицах от 1 до 7. Например, Size=4 . Этот атрибут можно задавать со знаком + или – относительно теку-щего размера. Например, <Front Size=+2> . Атрибут Face= задает гарнитуру шрифта.

Пример:

<FRONT SIZE=4> Шрифт 4-го размера </FRONT>

<FRONT COLOR = “GREEN”> Этот текст зеленый </FRONT>

Начертание символов задается при помощи парных флагов: <B> (полужир-

ный шрифт), <I> (курсив), <U> (подчеркнутый текст), <S> (вычеркнутый текст). Их использование не рекомендуется. Вместо них следует использо-

вать парные флаги <EM> (выделение), <STRONG> (сильное выделение).

Для описания компьютерных программ используют парные флаги <CODE> (исходный текст программы), <KBD> (текст, вводимый с клавиатуры, <SAMP> (пример ввода программы), <VAR> (программные переменные).

1.2.1 Гиперссылки



HTML- документ является гипертекстовым. Флаг гиперссылки явля-

ется одним из наиболее важных флагов языка HTML. Этот флаг помечает текст или графическое изображение, как цель перемещения в Интернете.

Гиперссылка определяется парным флагом <А> и </А>. Флаг <А> включа-

ет в себя насколько атрибутов. Обязательным является наличие одного из

следующих атрибутов – Name или HREF.В качестве значения атрибута используется URL адрес документа, на который указывается ссылка. Им мо-

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

ле сети (Web-узел, архив FTP и пр.). Например, чтобы попасть на сайт фай-ловых архивов следует записать гиперссылку <A HREF= ftp.caroms.com>.

При указании директории /Pub/Gutenberg попадаем в каталог хранения

книг в электронном виде. Для попадания на Web-сайт, например сайт про-вайдера Cityline, следует указать гиперссылку.

<A HREF= http://www.cityline.ru>.

Для создания гиперссылки, например, во втором задании на первое Zadanie с именем Zadanie1 в текст второго задания следует вставить строку

<A HREF=”Zadanie1.htm”> Zadanie1</A>
^

1.2.2 Подготовка и использование графических файлов



Графические иллюстрации являются в большинстве случаев, неотъемлемой частью Web-документа. Для использования графических файлов используются два формата GIF и JPEG. Формат GIF ориентирован на медлен-ные сети передачи. Он обеспечивает поддержку изображений, использую-

щих до 256 цветов. В настоящее время известны две версии GIF87 и GIF89а.

Версия GIF89 обеспечивает хранение анимационных файлов. Файл упако-

ван и может занимать значительно меньше места, чем неупакованный рисунок, например, в формате .bmp. Формат JPEG является общедоступным и

свободно распространяемым форматом. Он лучше подходит для хранения

фотографической информации, репродукций картин и т.п.

Формат JPEG абсолютно не подходит для хранения черно-белой информа-

ции и информации, состоящей только их правильных геометрических фи-

гур. Для заполнения Web-документов можно выделить следующие типы

графической информации:

-картинки для обоев документов,

-кнопки и заголовки,

-картинки или непосредственно графические материалы.

Рисунки хранятся на Web-узлах в отдельных файлах, но отображают-

ся как элементы Web-страниц. Для вставки рисунка используется тексто-

вой элемент, задаваемый непарным флагом <IMG>. Он должен содержать

обязательный атрибут, задающий адрес файла с изображением в относите-льной или абсолютной форме.

Например: <IMG SRC= “Ris1.gif”>

При отображении рисунка браузер по умолчанию использует его реа-льные размеры. Атрибуты WIDTH= и HIGHT= задают ширину и высоту

рисунка в пикселях.

Например:

<IMG SRC= “Ris2.jpg” WIDTH=”50” HEIGHT=”40”>

Для указания способа взаимодействия рисунка с текстом используется

атрибут ALIGN=, который может принимать значения:

BOTTOM-нижняя граница изображения совмещается с основанием

текстовой строки;

MIDDLE- середина изображения совмещается с серединой текстовой

строки;

TOP-верхняя граница изображения выравнивается по верхнему краю

текстовой строки;

LEFT-изображение размещается у левого края страницы;

RIGHT – изображение размещается у правого края страницы, а текст размещается слева от него.


Например:

<IMG SRC = “ris3.gif” ALIGN = BOTTOM>


Фоновый рисунок (обои) задается при помощи атрибута BACKGROUND =, флага < BODY >. Значением этого атрибута должен быть абсолютный или относительный адрес URL для файла с изображением. Например:

< BODY BACKGROUND = “ waves.gif” TEXT = “YELLOW”>

Картинки, которые можно использовать в качестве фона, размещены на WEB – сервере http://www.design.ru/free/backgrounds/ .

Рассмотрим использование рисунков из картинной галереи ClipArt. Для создания файла с рисунком из этой коллекции вызывается программа WORD 2000 или WORD 20002 и после ее открытия выполняются команды Вставка ►Рисунок ►Картинки. Рассмотрим более подробно вставку картинки из коллекции ClipArt при использовании программы WORD 20002. В появившейся диалоговой панели Вставка картинки в разделе Поиск клипа в окно Искать текст вводится тема картинки, например, Люди. Нажимается кнопка Найти. Вид диалоговой панели изменяется. На ней появляются образцы картинок на указанную тему. После щелчка левой клавиши мыши по одной из картинок она вставляется в документ Word. Нажатие правой клавиши мыши при наведении курсора на рисунок вызывает появление контекстного меню. Пункт меню Границы и заливка позволяют создать рамку вокруг рисунка, выбрать тип рамки, ее цвет и ширину. Можно также вставить горизонтальную линию выбранного типа. Закрывается диалоговая панель Вставка картинки. Для этого следует щелкнуть по крестику в правом верхнем углу панели. Картинка сохраняется после выполнения команд Файл ► Сохранить как веб-страницу. В появившейся диалоговой панели Сохранение документа указывается путь к файлу с картинкой. Файл следует сохранить в личной папке студента. Указывается имя файла, например, Ris1. Тип файла устанавливается Веб-страница. После нажатия на клавишу Сохранить в личной папке студента появляется папка с именем Ris1.files. Эта папка содержит файл с именем image002.gif, в котором сохранен рисунок. На этот рисунок следует ссылаться при вставке рисунка в Веб-страницу. Для этого следует вставить строку

< IMG SCR=”RIS1.files/image002.gif” ALIGN=”Middle”>

Расположение рисунка принято посредине страницы.


Скачать файл (70 kb.)

Поиск по сайту:  

© gendocs.ru
При копировании укажите ссылку.
обратиться к администрации