Изображения в HTML-документе

ИНСТРУМЕНТАЛЬНЫЕ СРЕДСТВА

РАЗРАБОТКИ

HTML-ДОКУМЕНТОВ

Методические указания к лабораторной работе

Изображения в HTML-документе - student2.ru

Волгоград

УДК 681.3.016

Рецензент

ВПИ(филиал) ВолгГТУ, канд. техн. наук доцент Д. Н. Лясин

Издается по решению редакционно-издательского совета

Волгоградского государственного технического университета

Инструментальные средства разработки HTML-документов: метод. указания/ сост. С.В. Белова; ВПИ (филиал) ВолгГТУ. – Волгоград, 2010. - 32 c.

Методические указания содержат теотетический материал по языку HTML и задания для лабораторной работы по курсу «Информатика».

Предназначены для студентов бакалавриата, обучающихся по направлению 190500.62 «Эксплуатация транспортных средств».

©	Волгоградский государственный технический университет, 2010
©	Волжский политехнический институт, 2010

ЦЕЛЬ РАБОТЫ

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

СОЗДАНИЕ WEB-ДОКУМЕНТОВ

World Wide Web – глобальная компьютерная сеть, содержащая миллионы сайтов, на которых размещена всевозможная информация. Информация в WWW представляется в виде документов, которые хранятся на постоянно подключённых к Интернету компьютерах – Web-серверах.

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

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

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

Для создания Web-страниц используется специальный язык разметки документов HTML (HyperText Markup Language). Язык разметки гипертекста HTML состоит из набора элементов, которые описывают структуру документа и управляют его отображением. Документы HTML хранятся в виде файлов с расширением .htm или .html. Управляющие конструкции языка HTML называются тегами и вставляются непосредственно в текст документа.

Теги представляют собой определенную последовательность символов, заключенную между символами "<" и ">". Теги HTML бывают парными и непарными. Непарные теги <tag> оказывают воздействие на весь документ или определяют разовый эффект в месте своего появления. При использовании парных тегов в документ добавляется открывающий <tag> и закрывающий тег </tag>, которые воздействуют на часть документа, заключённую между ними. Открывающие теги могут содержать атрибуты.

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

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

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

ПРИМЕНЕНИЕ ЯЗЫКА HTML

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

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

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

Задание №1

1. Запустите текстовый редактор Блокнот.

2. Введите текст документа:

<HTML>

<HEAD>

<TITLE>Лабораторная работа «Создание Web-страницы»</TITLE>

</HEAD>

<BODY>

Это моя первая страница!

</BODY>

</HTML>

3. Сохраните этот документ с именем first.html.

4. Запустите программу Internet Explorer.

5. Выполните команду меню Файл¦Открыть. Щелкните на кнопке

Обзор и откройте файл first.html.

6. Получите изображение файла как на рисунке 3.1.

Изображения в HTML-документе - student2.ru

Рис. 3.1. Пример простейшей Web-страницы

Название страницы, заключенное в теги <TITLE>…</TITLE>, отобразилось в заголовке окна браузера, имя файла страницы – в строке адреса, а содержание страницы, ограниченное тегами <BODY>…</BODY> – в окне просмотра.

Заголовки и абзацы

Язык HTML поддерживает 6 уровней заголовков, отличающихся размерами текста. Они задаются парными тэгами от <H1>…</H1> до <H6>…</H6>. Заголовки 1 уровня обозначаются тэгом <Н1> и отображаются самым крупным шрифтом, а 6 уровня <Н6> самым мелким. Грамотное использование заголовков значительно улучшает читабельность страницы, но не следует использовать на одной странице заголовки более трех различных уровней вложенности.

При создании абзацев в HTML-документах необходимо учитывать, что нажатие клавиши Enter не создает новый абзац. Текст, который надо представить на странице в виде отдельного абзаца, заключается в теги <P>…</P>. Закрывающий тег </P> необязателен. После открытия страницы в окне Web-браузера все абзацы ее текста, помеченные тэгом <P>, разделяются пустыми строками, что улучшает ее компоновку и внешний вид.

Для заголовков и абзацев можно использовать атрибут ALIGN, задающий выравнивание текста по левому краю, по центру или по правому краю. По умолчанию браузер выравнивает заголовки и абзацы по левому полю.

<H1 ALIGN="CENTER">заголовок выровнен по центру</H1>

<P ALIGN="RIGHT">абзац выровнен по правому краю</P>

В качестве ограничителя абзацев можно использовать горизонтальную линию. Для этого используется непарный тег горизонтальной линейки <HR>.

Этот тег задаёт горизонтальную линию шириной в 10 пикселов, расположенную слева и занимающую половину ширины окна. Атрибут NOSHADE указывает, что при отображении линии объемное затенение отсутствует.

Для перехода к новой строке используется непарный тег <BR>. В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки. Основное использование этого тэга - для принудительного размещения встроенных элементов в определенном месте страницы. Он удобен в тех случаях, когда необходимо увеличить пустые области между отдельными элементами страницы.

Задание №2

1. В редакторе Блокнот введите текст второго документа:

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1 ALIGN="CENTER">Волжский политехнический институт</H1>

<H2 ALIGN="CENTER">(филиал) ВолгГТУ</H2>

<H3 ALIGN="CENTER">www.volpi.ru</H3>

<P>Направление 230100 – «Информатика и вычислительная

техника»</P>

<P> Кафедра «Информатика и технология программирования»</P>

<H3 ALIGN="RIGHT">Контактная информация</H3>

<P ALIGN="RIGHT">Телефон: (8443) 41-22-62</P>

<P ALIGN="RIGHT">e-mail: [email protected]</P>

</BODY>

</HTML>

2. Сохраните документ в файле с именем format.html.

3. Вернитесь в программу Internet Explorer, откройте документ format.html и получите изображение файла как на рисунке 3.2.

Изображения в HTML-документе - student2.ru

Рис. 3.2. Страница "ВПИ"

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

Для установки размера, цвета и гарнитуры фрагмента текста используется парный тег <FONT> с атрибутами SIZE, COLOR и FACE. Атрибут SIZE определяет размер шрифта в относительных единицах от 1 до 7. Атрибут FACE задаёт гарнитуру шрифта.

Атрибут цвета текста COLOR задаётся шестнадцатеричным кодом или текстовым значением (COLOR="#FF0000" даёт тот же результат, что и СOLOR="RED"). Цвет задаётся в виде RGB-модели, то есть в виде соотношения красной (Red), зеленой (Green) и синей (Blue) составляющих цвета. Каждая составляющая описывается двузначным шестнадцатеричным числом. Значение 00 означает, что данная компонента отсутствует, а FF (255) – что присутствует с максимальной интенсивностью. Перед кодом цвета ставится символ #. Коды цветов представлены в таблице 3.1.

Таблица 3.1. Коды цветов

FFFFCC	FFFF99	FFFF66	FFFF33	FFFF00	CCCC00

FFCC66	FFCC00	FFCC33	CC9900	CC9933

FFCCCC	FF9999	FF6666	FF3333	FF0033	CC0033

FF99CC	FF3399	FF0099	CC0066

9966CC	9966FF	6600CC	6633CC

CCCCFF	9999FF	6633FF	6600FF

0066FF	0066CC	3366CC	0033FF

99CCFF	3399FF	0099FF	6699CC

99CCCC	66CCCC

CCFFFF	99FFFF	66FFFF	33FFFF	00FFFF	00CCCC

CCFFCC	99CC99	66CC66

66FF00	66FF33	33FF00	33CC00

<P><FONT SIZE=2 FACE="Arial" COLOR="#FF0000">текст</FONT></P>

Эта запись означает, что текст, заключенный между тегами <FONT> имеет размер 2, цвет текста красный и шрифт Arial.

Параметры шрифта для всего документа задаются непарным тегом <BASEFONT>, который помещают один раз внутри элемента BODY.

Символы табуляции, множественные пробелы, переводы строк игнорируются браузерами при выводе документа. Единственный способ отобразить текст в таком виде, как он был предварительно отформатирован, – это использование тега ручного форматирования <PRE>. Заключенный в теги <PRE>…</PRE> текст будет отображаться в окне браузера без обработки, с точным соблюдением переносов строк и интервалов. Однако в текст, отформатированный тегом <PRE>, нельзя вводить другие теги оформления.

Установка цвета фона и текста для всего документа производится с помощью атрибутов тега <BODY>. Атрибут BGCOLOR задает цвет фона документа, атрибут TEXT – цвет основного текста документа, LINK - цвет ссылки, ALINK - цвет активной ссылки, VLINK - цвет просмотренной ссылки.

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

Форматирование текста задаётся с помощью парных тегов, представленных в таблице 3.2.

Таблица 3.2. Теги форматирования текста

Тег	Тип шрифта
<B>…</B>	полужирный
<I>…</I>	курсив
<TT>…</TT>	машинный
<BIG>…</BIG>	увеличенный размер
<SMALL>…</SMALL>	уменьшенный размер
<EM>…</EM>	выделение
<STRONG>…</STRONG>	сильное выделение
<S>…</S>	перечеркнутый текст
<SUB>…</SUB>	подстрочный текст
<SUP>…</SUP>	надстрочный текст

Примеры использования тегов форматирования:

<P><B>Полужирный текст</B></P>

<P>Верхний<SUP>^индекс</SUP></P>

Задание №3

1. Внесите изменения в файл format.html:

...

<H1 ALIGN="CENTER">Волжский политехнический институт</H1>

<H2 ALIGN="CENTER">(филиал) ВолгГТУ</H2>

<H3 ALIGN="CENTER">www.volpi.ru</H3></FONT>

<HR>

<P>Направление 230100–«Информатика и вычислительная техника» <BR>Кафедра «Информатика и технология программирования»</P>

<P><FONT COLOR="#009900">Возможные области работы

выпускников:</FONT></P>

<PRE>

- разработка ПО для деловых применений

- разработка ПО для Internet

- информационная и компьютерная поддержка научных исследований

</PRE>

<P ALIGN="RIGHT"><B>Контактная информация</B></P>

<P ALIGN="RIGHT">Телефон:(8443) 41-22-62</P>

<P ALIGN="RIGHT"><I>e-mail:[email protected]</I></P>

</BODY>

</HTML>

2. Сохраните внесенные в файле изменения. Вернитесь в программу Internet Explorer и щёлкните на кнопке Обновить на панели инструментов.

3. Получите изображение файла как на рисунке 3.3.

Изображения в HTML-документе - student2.ru

Рис. 3.3. Новый вид страницы "ВПИ"

Списки

Информацию на HTML-странице можно представлять в виде маркированных, нумерованных списков и списков определений.

Маркированные и нумерованные списки оформляются одинаково, они создаются с помощью парных тегов <OL>…</OL> для нумерованного списка и <UL>…</UL> для маркированного списка. Элементы списка начинаются с тега <LI>.

Шаблон маркированного списка:

<UL>

<LI>Пункт1

<LI>Пункт2

<LI>Пункт3

</UL>

Тег <UL> может иметь атрибут TYPE, определяющий вид маркера. Его значениями могут быть: CIRCLE (кружок), DISC (диск, используется по умолчанию) или SQUARE (квадрат). Например, тег <UL type="SQUARE"> задает маркер списка – квадрат.

Шаблон нумерованного списка:

<OL>

<LI>Пункт1

<LI>Пункт2

<LI>Пункт3

</OL>

Тэг нумерованного списка <OL> может иметь атрибуты TYPE и START. Атрибут TYPE задает способ нумерации, значения атрибута TYPE представлены в таблице 3.3. По умолчанию атрибут TYPE=1.

Таблица 3.3. Атрибуты тегов нумерованного списка

Type	Способ нумерации
TYPE=1	1,2,3,4,...
TYPE=i	i,ii,iii,iv,...
TYPE=I	I,II,III,IV,...
TYPE=a	a,b,c,d,...
TYPE=A	A,B,C,D,...

Атрибут START задает начало отсчета нумерации. Например, тег <OL TYPE=А START=3> задает нумерацию списка в виде прописных латинских букв, первый элемент списка будет иметь номер С.

Для создания сложных списков используется принцип вложения. Каждый элемент, определяющий пункт списка, может содержать еще один список.

<OL>
<LI>Пункт1

<UL>

<LI>Пункт1.1

<LI>Пункт1.2

</UL>
<LI>Пункт2

<LI>Пункт2.1

</UL>

<LI>Пункт3

<LI>Пункт3.1

<LI>Пункт3.2

</UL>
</OL>

Списки определений применяются для создания словарей или глоссариев, в которых после каждого элемента термина следует описательный абзац. Список определений задаётся парным тегом <DL>. Каждый термин спис-ка начинается тегом <DT>, а определение термина тегом <DD>. Каждый абзац текста, указанный при помощи тега <DD> автоматически размещается с новой строки.

<DL>

<DT>Пункт1

<DD>Определение пункта1

<DT>Пункт2

<DD>Определение пункта2

<DT>Пункт3

<DD>Определение пункта3

</DL>

Пример создания списков на Web-странице:

<HTML>

<HEAD>

<TITLE>Кафедра ВИТ</TITLE>

</HEAD>

<H2><FONT COLOR="#330099">Преподаватели кафедры ВИТ</FONT> </H2>

<OL>

<LI>доцент Рыбанов А.А.

<LI>доцент Лясин Д.Н.

<LI>доцент Свиридова О.В.

<LI>ст.преп. Савченко В.Ф.

<LI>ст.преп. Александрова В.О.

<LI>ст.преп. Макушкин И.А.

</OL>

<H2><FONT COLOR="#330099">Дисциплины, преподаваемые на

кафедре ВИТ</FONT></H2>

<OL>

<LI>Рыбанов А.А.

<LI>Основы трансляции

<LI>Базы данных

</UL>

<LI>Лясин Д.Н.

<LI>Программирование на ЯВУ

<LI>Методы и средства защиты компьютерной информации

</UL>

<LI>Свиридова О.В.

<LI>Методы оптимизации

<LI>Основы теории управления

<LI>Теория принятия решений

</UL>

</OL>

<H2><FONT COLOR="#330099">Лаборатории кафедры ВИТ</FONT> </H2>

<DL>

<DD>Компьютерный класс, корпус "В", ул. Камская д.6

<DD>Компьютерный класс, корпус "В", ул. Камская д. 6

<DD>Компьютерный класс, корпус "Б", Химкомплекс

</DL>

</BODY>

</HTML>

В результате просмотра этого файла в браузере получится изображение, представленное на рисунке 3.4.

Изображения в HTML-документе - student2.ru

Рис. 3.4. Списки на странице Кафедра ВИТ

Задание №4

1. В новом документе введите один из списков, предложенных в примере.

Название страницы должно быть как в примере – "Кафедра ВИТ".

2. Сохраните файл с именем spisok.html и просмотрите его в браузере.

Гипертекстовые ссылки

Гипертекстовая ссылка является фрагментом текста документа и за-даётся текстовым элементом, определяемым при помощи парного тега

<A HREF=…>…</A>, атрибут HREF является обязательным элементом.

Атрибут HREF="URL" задает URL-адрес объекта гиперссылки. URL (Uniform Resource Locator) - это уникальный адрес, которым обладает каждая Web-страница в сети. В общем случае URL состоит из наименования используемого протокола, названия сервера и обозначения пути доступа к странице. Протокол определяет правила обращения к Web-странице. Название сервера (доменное имя)- обозначает компьютер, содержащий данную Web-страницу. Путь доступа - указывает местоположение страницы на диске сервера. Пример указания адреса Web-страницы: http://learn.com/html/index.html.

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

При просмотре документа в браузере текст, заключенный между тегами <A HREF="URL">текст</A> , изображается с подчеркиванием и выделяется цветом в соответствии с настройками браузера. Щелкнув мышью по тексту, выделенному как гиперссылка, загружается документ с указанным в ссылке адресом.

Например, открывающий тег ссылки может иметь вид:

В этой ссылке задается URL-адрес в абсолютной форме, в нём указан протокол и адрес Web-узла. Такая запись адреса используется для указания ссылки на другой Wеb-сайт и рассматривается как внешняя ссылка.

При создании ссылки, указывающей на Web-страницу, расположенную на том же сервере, что и первоначальный HTML-документ, можно использовать относительный URL-адрес, в котором не указывается протокол и адрес Web-узла. Такая ссылка рассматривается как внутренняя ссылка. Например, тег <A HREF="index.html">текст</A> описывает ссылку на Web-страницу, находящуюся на том же сайте, что и исходный HTML-документ.

Задание №5

1. Откройте файл format.html и внесите в него изменения:

<P>Направление 230100 – «Информатика и вычислительная техника»<BR>

<A HREF="spisok.html">Кафедра «Информатика и технология

программирования»</A>

<P> <FONT COLOR="#009900">Возможные области работы выпускников:</FONT></P>

2. Сохраните файл и откройте его в Internet Explorer. На Web-странице "ВИТ" текст Кафедра «Информатика и технология программирования» будет выделен как ссылка, при нажатии на которую в текущее окно браузера будет загружен документ spisok.html.

HTML-документ может быть очень большим, и в этом случае пользователю должна быть предоставлена возможность быстро перемещаться к нужному разделу документа. В этом случае для перехода внутри документа можно организовать ссылку на помеченный фрагмент. Для этого в адресе используется имя метки со знаком #. Так, тег <A HREF="#метка"> Переход к … </A> описывает переход к фрагменту, находящемуся на той же странице, и помеченному меткой "метка".

В нужных местах текста необходимо расставить соответствующие метки. Для размещения меток в документе используется второй тип тега гиперссылки <A NAME=”метка”>. Атрибут NAME="метка" задает имя метки в некоторой точке документа.

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

<A HREF="#Начало страницы">Наверх страницы</A>

Место, куда следует выполнить переход, необходимо пометить следующим образом: <A NAME="Начало страницы"></A>

Задание №6

Разместим на странице "ВПИ" рядом с названием института логотип ВПИ (графический файл с именем logo_vpi.gif). Сначала просто вставим логотип в документ с помощью тега <IMG>.

1. Внесите изменения в файл format.html:

<H1 ALIGN=CENTER>Волжский политехнический институт</H1>

2. Просмотрите в браузера обновленную страницу.

3. Измените файл format.html, задав дополнительные атрибуты для тега <IMG>:

4. В результате просмотра этого файла в браузере получится изображение, представленное на рисунке 3.5.

Изображения в HTML-документе - student2.ru

Рис. 3.5. Новый вид страницы "ВПИ"

Пользователей, не имеющих средства просмотра изображений на страницах, можно ознакомить с содержанием рисунка при помощи альтернативного текста. Альтернативный текст задаётся как значение атрибута ALT= и отображается вместо рисунка, если он по каким-то причинам не может быть выведен.

Задание №7

Зададим альтернативный текст для файла logo_vpi.gif, включенного на странице "ВПИ":

1. Измените файл format.html:

2. Отключите вывод графических объектов в настройках Internet Explorer (меню Сервис¦Свойства обозревателя¦вкладка Дополнительно, снимите флажок Отображать рисунки). Проверьте присутствие альтернативного текста на странице "ВПИ".

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

Изображения на Web-страницах можно использовать в качестве фонового рисунка. Для этого в теге <BODY> вместо задания цветового фона атрибутом BGCOLOR следует использовать атрибут BACKGROUND, задающий URL-адрес фонового изображения, например:

Мастер цветов

Мастер цветов позволяет вставить код цвета для использования в атрибутах COLOR, BGCOLOR и им подобных. Для этого выберите команду меню Формат¦Мастер цветов или щёлкните на кнопке Мастер цветов на панели инструментов Редактор. В открывшемся окне Мастер цветов щелчком мыши выберите в палитре нужный цвет или задайте числа в пределах от 0 до 255 в полях Красный, Зелёный и Синий и нажмите кнопку Вставить HEX-код в редактор.

Мастер линий

С помощью мастера линий можно создавать специальные разделители, позволяющие разделить Web-страницу на несколько частей. Для этого выберите команду меню Формат¦Мастер линий или щёлкните на кнопке Мастер линий на панели инструментов Редактор. В открывшемся окне Мастер линий задайте следующие параметры линии: ширину, выравнивание, высоту, единицы измерения ширины (%), наличие тени, цвет линии и щёлкните на кнопке ОК.

Мастер списков

Для создания списка выберите команду меню Формат¦Мастер списков или щёлкните на кнопке Мастер списков на панели Редактор. В открывшемся окне Мастер списков установите переключатель в положение Маркированный список или Нумерованный список. Для маркированного списка на вкладке Маркеры выберите вид маркера. Для нумерованного списка на вкладке Цифры в раскрывающемся списке Цифры укажите способ нумерации и задайте начальный пункт списка. В поле Пункты списка введите список, разделяя клавишей ENTER отдельные пункты списка. Закончите создание списка нажатием кнопки OK.

Мастер гиперссылок

Для создания гиперссылки выделите фрагмент текста, который будет использоваться как ссылка, и выберите команду меню Вставка¦Мастер гиперссылок. В открывшемся окне Мастер гиперссылок для создания ссылки введите следующие параметры: Вид гиперссылки и Адрес гиперссылки. Поле Текст автоматическизаполняется выделенным фрагментом текста, который используется как ссылка. Если фрагмент текста не был предварительно выделен, то поле Текст заполняется вручную.

Можно также использовать следующие атрибуты для ссылки: Имя - метка гиперссылки, Всплывающая подсказка, Текст в строке состояния браузера.

Мастер изображений

Мастер изображений предназначен для добавления различных рисунков и фотографий на Web-страницу.

Для вставки изображения на Web-страницу выберите команду меню Формат¦Мастер изображений или щёлкните на кнопке Мастер изображений на панели инструментов Редактор.

В открывшемся окне Мастер изображений щёлкните на кнопке Обзор и в окне диалога Открыть выберите нужное изображение. Задайте следующие параметры изображения: Альтернативный текст; Ссылку, если графическое изображение будет использовано в качестве гиперссылки; Размеры изображения; Позицию изображения на Web-странице; Рамку для изображения. Если нужно изображение пропорционально уменьшить, в поле Проценты реального размера введите, сколько процентов должно составлять будущее изображение от исходного и нажмите кнопку Применить.

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

Мастер таблиц

Мастер таблиц предназначен для создания разнообразных таблиц с различным оформлением. Для этого выберите команду меню Формат¦Мастер таблиц или щёлкните на кнопке Мастер таблиц на панели инструментов Редактор.

Создание таблицы выполняется за 4 шага:

1. Введите основные параметры таблицы: количество столбцов и строк, ширину и высоту таблицы, выравнивание таблицы.

2. Введите данные в ячейки таблицы.

3. Введите параметры оформления таблицы: цвет рамки и фона таблицы, толщину рамки, расстояние между рамками, расстояние между рамкой и текстом.

4. Введите название таблицы. Щёлкните на кнопке Готово.

ЛИТЕРАТУРА

1. Симонович С. В. Информатика базовый курс 2-е издание. Учебник для вузов. – СПб.: Питер, 2005, 639 с.

2. Завьялова Н. Б. Дьяконова Л. П. Технология создания Web-сайтов. Учебно-методическое пособие. - Российская экономическая академия имени Г.В.Плеханова: Москва, 2003, 57 с.

3. Учебник HTML. http//on – line – teaching.com

4. Томас А. Пауэлл Web-дизайн 2-е издание. – СПб.: БХВ - Петербург, 2005, 1072 с.

СОДЕРЖАНИЕ

1. ЦЕЛЬ РАБОТЫ... 3

2. СОЗДАНИЕ WEB-ДОКУМЕНТОВ.. 4

3. ПРИМЕНЕНИЕ ЯЗЫКА HTML.. 5

3.1. Структура документа HTML.. 5

3.2. Заголовки и абзацы.. 6

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

3.4. Списки. 12

3.5. Гипертекстовые ссылки. 16

3.6. Изображения в HTML-документе. 17

3.7. Создание таблиц в HTML-документе. 20

4. СОЗДАНИЕ WEB-СТРАНИЦ В РЕДАКТОРЕ WEBEDITOR.. 24

4.1. Создание и редактирование документа. 24

4.2. Вставка элементов в Web-страницу. 26

4.3. Применение мастеров и шаблонов. 28

5. Самостоятельные задания. 29

6. Контрольные вопросы.. 29

ЛИТЕРАТУРА.. 30

СОДЕРЖАНИЕ.. 31

Учебное издание

Светлана Владимировна Белова

Лабораторная работа по информатике

Методические указания для студентов очной формы обучения

План электронных изданий 2010 г. Поз. № 4 В

Подписано на «Выпуск в свет» 25.09.2010 г.

Уч-изд. л. 1,92.

На магнитоносителе.

Волгоградский государственный технический университет.

400131, г. Волгоград, пр. Ленина, 28, корп. 1.

ИНСТРУМЕНТАЛЬНЫЕ СРЕДСТВА

РАЗРАБОТКИ

HTML-ДОКУМЕНТОВ

Методические указания к лабораторной работе

Изображения в HTML-документе - student2.ru

Волгоград

УДК 681.3.016

Рецензент

ВПИ(филиал) ВолгГТУ, канд. техн. наук доцент Д. Н. Лясин

Издается по решению редакционно-издательского совета

Волгоградского государственного технического университета

©	Волгоградский государственный технический университет, 2010
©	Волжский политехнический институт, 2010

ЦЕЛЬ РАБОТЫ

СОЗДАНИЕ WEB-ДОКУМЕНТОВ

ПРИМЕНЕНИЕ ЯЗЫКА HTML

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

Задание №1

1. Запустите текстовый редактор Блокнот.

2. Введите текст документа:

<HTML>

<HEAD>

<TITLE>Лабораторная работа «Создание Web-страницы»</TITLE>

</HEAD>

<BODY>