Теперь попробуем составить собственный шаблон WWW

Федеральное агентство по образованию
Государственное образовательное учреждение
высшего профессионального образования
«Сибирский государственный индустриальный университет»
Кафедра электромеханики
ОСНОВЫ HTML
Методические указания
для выполнения лабораторно-практической работы по дисциплине
«Основы практического применения Интернет-технологий»
Специальность 140601«Электромеханика в горном производстве»
Новокузнецк
2008
УДК 004.94:517.9(07)
Р47
Рецензент
кандидат педагогических наук
доцент кафедры прикладной информатики СибГИУ
Л.В. Голунова
Р47 Основы HTML: метод. указ./Сост.: Ю.А. Храмова; СибГИУ.–
Новокузнецк, 2008.–38 с.
Изложены основные принципы работы с HTML. Текст
иллюстрирован примерами. Приведены задания для самостоятельной
работы.
Предназначены для студентов специальности
«Электромеханика», всех форм обучения.
140601–
Введение
Аббревиатура «WWW» (World Wide Web) относится к той
немногочисленной категории понятий, название которых известно
всем, однако далеко не всякий в состоянии правильно объяснить, что
же это в сущности такое. Довольно часто приходится слышать, как
WWW отождествляют с Internet, что, мягко говоря, не совсем верно.
На самом деле Web — это одна из частей Internet, которая на
протяжении последних лет стала феноменально популярной и
способствовала гигантскому скачку развития Сети в целом.
WWW можно назвать графическим интерфейсом для работы с
Internet.
«World Wide Web» переводится как «всемирная паутина», и
название достаточно точно определяет суть явления. WWW —
гигантская сеть страниц (документов), связанных между собой
гиперссылками. Это действительно очень напоминает своими
колоссальными размерами и структурой паутину, протянувшуюся по
всему миру.
С
появлением
проблема
Internet
межплатформной
несовместимости файловых форматов стала ощущаться особенно
остро: ведь тем, кто размещает информацию в Сети, хочется, чтобы
она была доступна как можно более широкому кругу пользователей
без особенных затрат. Очевидно, что самый простой путь решения —
разработка общепринятого формата файлов, под который и будут
«подстраиваться» вновь создаваемые приложения. В WWW таким
стандартом стал HTML.
3
Основа WWW — файлы в формате HTML (Hyper Text Markup
Language — язык разметки гипертекста), или гипертекстовые
страницы. Гипертекст — это легкая в использовании и чрезвычайно
мощная система связанных слов и фраз, позволяющая легко
перемещаться по особым образом организованным страницам. Если
развить идею гипертекста и включить в него графику, видео и звук,
мы получим гипермедиа. Гипермедиа — среда, основанная, как и
гипертекст, на взаимосвязях, в которой в качестве гиперссылок могут
выступать визуальные и аудиокомпоненты. Гипертекст и гипермедиа
являются фундаментальными для WWW технологиями, а HTML —
средство для работы с этими технологиями.
Основными достоинствами НТML -документов являются:
 малый информационный объем;
 возможность
просмотра
на
персональных
компьютерах,
оснащенных различными операционными системами;
 интерактивность.
Для создания Web-страниц используются простейшие текстовые
редакторы,
которые
не
включают
в
создаваемый
документ
управляющие символы форматирования текста. В качестве такого
редактора в Windows можно использовать стандартное приложение
Блокнот, а также специальные программы.
Отображаются Web-страницы в браузерах - специальных
программах. Стандартным браузером Windows является Internet
Explorer.
Основным средством разметки документа является метка языка
HTML, или тэг (англ. tag). Для оформления текста не имеет значения,
4
какое форматирование применяется в Блокноте (вид шрифта,
пробелы, переход на новую строку и т.д.), имеет значение то, какие
тэги используются. При написании тэги отделяются от остального
текста угловыми скобками: < и >. Регистр символов при этом также
не имеет никакого значения, но хорошим тоном считается набор
тэгов в верхнем регистре. Это помогает визуально отделить тэги от
основного текста при последующем редактировании.
Существует два вида тэгов: требующие закрытия (т. е.
ограничения действия) и не требующие закрытия. Например, тэг <I>,
изменяющий начертание шрифта на наклонное, является тэгом,
требующим закрытия, т. к. если он не будет закрыт, то весь текст,
следующий после него, будет наклонным.
Закрывающим элементом всегда служит тот же самый тэг, но со
знаком «/» после первой угловой скобки.
Элементы HTML делятся на
блочные и текстовые. Блочные
относятся к уровням абзаца. Текстовые описывают свойства
отдельных фраз и более мелких элементов.
Правила вложения элементов:
 элементы не должны пересекаться. Если открывающий тэг
располагается внутри элемента, то закрывающий также;
 блочные элементы могут содержать вложенные блочные и
текстовые элементы;
 текстовые элементы могут содержать вложенные текстовые
элементы, но не блочные.
5
Структурные тэги
Теперь попробуем составить собственный шаблон WWWстранички. Запустим Web-редактор — Блокнот. Первыми тэгами,
которые мы разместим на будущей web-странице, будут <HTML> и
</HTML>. Этот тэг начинает и завершает любую страницу, указывая
браузеру на то, что данная страница описана на HTML. На странице
закрывающий тэг будет стоять самым последним, в конце документа.
Все, что мы будем набирать далее, должно быть расположено между
этими метками.
Следующие метки необходимы для создания заголовка HTMLдокумента. Тэг <HEAD> </HEAD> служит для определения
заголовка документа, т. е. части файла, содержащей подробную
информацию о документе, как-то: заголовок окна документа, имя
создателя и т.п. Одним из основных тэгов, содержащихся в разделе
заголовков,
является
<TITLE>.
Этим,
требующим
закрытия
дескриптором, определяется название окна браузера, в котором будет
просматриваться ваша страничка.
Осталось
сделать
«тело»
нашей
страницы,
которое
ограничивается с двух сторон соответствующим тэгом — <BODY>
</BODY>. Таким образом, структура страницы выглядит следующим
образом:
<HTML>
<HEAD> <TITLE> Моя первая Web-страничка </TITLE> </HEAD>
<BODY>
Добро пожаловать на наш сайт!
6
</BODY>
</HTML>
Рисунок 1 – Вид Web-страницы в окне программы Internet
Explorer
Заголовки
С помощью HTML-тэгов можно задать различные параметры
форматирования
определяющие
текста.
Некоторые
свойства
тэга.
тэги
имеют
атрибуты,
Атрибут
может
принимать
определенные значения.
Заголовок текста страницы целесообразно выделить крупным
шрифтом. Размер шрифта заголовка задается тэгами заголовка от
<Н1> (самый крупный) до <Н6>.
По умолчанию текст всегда выравнивается по левому краю
страницы. Однако заголовок обычно принято размещать по центру
страницы (в данном случае - окна браузера). Сделать это позволяет
атрибут ALIGN (выравнивание) тэга заголовка:
<H1 ALIGN = "center">.
7
Выравнивание по правой границе окна реализуется с помощью
значения атрибута ALIGN = "right", по левой границе - ALIGN =
"left". Изменить цвет заголовка, например на синий, можно с
помощью определяющего цвет атрибута тэга: <FONT COLOR =
"blue">. Значение атрибута COLOR можно задать либо названием
цвета
(например,
«blue»,
шестнадцатеричным
«red»,
«yellow»
представлением
и
(например,
др.),
либо
его
«#FFOOOO»).
Заголовок, оформленный при помощи тэга Н1 с атрибутами будет
выглядеть следующим образом:
<H1 ALIGN="CENTER">
<FONT COLOR="RED">
Добро пожаловать на наш сайт!
</FONT>
</H1>
Рисунок 2 – Вид форматированного заголовка
Как известно, на странице текст размещается в абзацах. Для
определения абзаца в HTML используется тэг <P> </P>. Он может
использоваться с атрибутом ALIGN, управляющим выравниванием
текста параграфа с помощью четырех аргументов: LEFT, RIGHT,
CENTER и JUSTIFY:
<P ALIGN="LEFT"> — выравнивание текста по левому краю;
8
<P ALIGN="RIGHT"> — выравнивание текста по правому краю;
<P ALIGN="CENTER"> — выравнивание текста по центру;
<P ALIGN="JUSTIFY"> — полное выравнивание текста по ширине.
Для управления начертанием символов, т. е. для установки
параметров Жирный (Bold), Курсив (ItaLIc) и Подчеркнутый
(UnderLIning), используются тэги <B>, <I>, <U>. Эти тэги требуют
закрытия и могут использоваться, перекрывая действие друг друга:
<I> Курсив </I>;
<B>Полужирный</B>;
<U>Подчеркнутый</U>;
<I><B><U> Курсив Полужирный Подчеркнутый</U></B></I>.
Для удобства форматирования текста на странице существует
также тэг <BR>, переносящий следующий за ним текст на новую
строку.
Тэг <HR> в браузере отображается как горизонтальная линия.
Для управления внешним видом отображаемых линий у тэга <HR>
имеются четыре параметра: SIZE, WIDTH, ALIGN и NOSHADE:
SIZE=N(пикселей)
устанавливает толщину линии;
устанавливает ширину линии. Ширина
WIDTH=N(пикселей или линии может быть жестко указана в
процентов)
пикселях или в процентах относительно
ширины окна браузера;
ALIGN="LEFT" (RIGHT
или CENTER)
устанавливает
выравнивание
отображаемой линии относительно окна
браузера.
При
9
отсутствии
параметра
ALIGN
линия
всегда
центруется
относительно окна браузера;
отключение
трехмерного
режима
отображения линий. При указании этого
NOSHADE
параметра линия будет отображаться как
простая черная полоса.
Нарисуем линию шириной 10 пикселей и длиной 50:
<HR ALIGN="RIGHT" SIZE="10" WIDTH="50">
Вставка изображений
Для размещения картинок на Web-страницах существует
специальный
тэг
имеющий
<IMG>,
обязательный
параметр
SRC="URL" – путь к файлу изображения. Если файл находится на
сервере в том же каталоге, что и документ, из которого к нему
обращаются, то путь к нему указывать не нужно — требуется указать
только имя файла. Если файл изображения находится на том же
сервере, но в другом каталоге, требуется указать путь к файлу от
каталога, где находится документ, из которого к нему обращаются.
Так же, как и в заголовках, можно указывать размещение
картинки на страничке при помощи параметра ALIGN.
Параметры
VSPACE
и
HSPACE
указывают
количество
свободного пространства (в пикселях), которое будет оставлено
вокруг изображения при генерации страницы.
HSPACE — отступ слева и справа от картинки.
10
VSPACE — отступ сверху и снизу.
ALT — этот параметр позволяет указать текст, который будет
написан на месте картинки в случае, если в браузере, через который
просматривается страничка, отключена загрузка графики. Кроме
того, текст, указанный в параметре ALT, будет отображаться во
всплывающей подсказке, появляющейся при наведении указателя
мыши на изображение.
Чтобы поместить рисунок на Web-страницу в качестве фона,
нужно установить в тэге <BODY> атрибут BACKGROUND= со
значением, содержащим имя файла рисунка:
<BODY BACKGROUND=фон.gif>
Гиперссылки
Для того, чтобы объединить несколько страниц в один сайт,
необходимо связать их гиперссылками. Как вы знаете, это основной
принцип построения WWW. Гиперссылка может быть присвоена
любому элементу, расположенному на странице. Для организации
гиперссылки
существует
специальный
тэг
<A>.
Между
открывающим и закрывающим тэгами может находиться текст или
изображение — именно этот элемент и будет объектом, с которого
производится гиперссылка.
Обязательный
параметр
HREF="URL"
является
основной
частью тэга <А> и указывает, на какой документ ссылается данный
элемент страницы. Гиперссылка может
11
указывать
на любой
документ, который существует в виде файла,— на другую страничку,
изображение, файл программы, мультимедиа-объекты и т. д.
Правила указания URL для тэга <A> такие же, как и для
параметра SRC тэга <IMG>, т. е. если документ, на который
ссылается данный элемент страницы, находится в том же каталоге
сервера, то указывается только имя файла. Если же этот документ
находится на другом сервере, требуется указать полный URL.
Строка:
[<A HREF="anketa.htm">Анкета</A>]
указывает ссылку на файл «anketa», с подписью ссылки
«Анкета»:
[Анкета]
Основные принципы работы с таблицами
К сожалению, HTML — очень «негибкий» язык, и существует
множество вещей, сделать которые с помощью стандартных средств
этого языка казалось бы нельзя. Один из основных недостатков
классического HTML — отсутствие возможности абсолютного
позиционирования элементов Web-страницы, т. е. вы не можете
расположить что-либо в точно указанном вами месте страницы.
Вместо этого HTML предлагает относительное позиционирование,
при
котором
расположение
элемента
описывается
только
относительно другого элемента, предшествующего ему.
Классический вариант решения этой проблемы заключается в
применении таблиц для позиционирования элементов страницы.
12
Именно так в настоящее время и устроено большинство сложных
Web-страниц.
Суть метода заключается в следующем: на страничке создается
таблица с невидимыми границами ячеек, и элементы, требующие
точного позиционирования, располагаются в ячейках таблицы. Для
каждой из ячеек вы можете указать собственные параметры
форматирования,
соответственно
команды
форматирования
действуют только в пределах ячейки.
В HTML любая таблица состоит из строк, разделенных на
ячейки. Каждая строка и ячейка описываются отдельными тэгами.
Все тэги, применяющиеся для описания таблиц, требуют ограничения
действия, т. е. закрытия.
Рассмотрим синтаксис этих тэгов:
<TABLE> </TABLE> — главный тэг, применяющийся для
описания начала и конца таблицы, а также параметров отображения
таблицы, таких, как ее размеры, оформление границ ячеек и т. п.
<TR> </TR> - тэг, описывающий начало и конец строки таблицы.
<TD> </TD> - тэг, описывающий начало и конец ячейки.
Каждый из этих тэгов имеет набор параметров, служащих для
управления
отображением
таблицы,
установки
размеров,
выравнивания и т. д.
Каждая таблица и ячейки, составляющие ее, имеют такие
свойства, как ширина и высота, выравнивание по ширине и высоте,
толщина границы, цвет фона. Эти свойства присваиваются элементам
таблицы с помощью параметров WIDTH, HEIGHT, ALIGN, VALIGN,
BORDER, BGCOLOR.
13
Параметр BORDER служит для управления толщиной границ
таблицы.
Вот исходный код первой таблицы:
<TABLE BORDER >
<TR>
<TD>1 ячейка</TD>
<TD>2 ячейка</TD>
<TD>3 ячейка</TD>
</TR>
</TABLE>
1 ячейка 2 ячейка 3 ячейка
Добавим 2 строку между тэгами </TR>и </TABLE>:
<TR>
<TD>4 ячейка</TD>
<TD>5 ячейка</TD>
<TD>6 ячейка</TD>
</TR>
1 ячейка
2 ячейка
3 ячейка
4 ячейка
5 ячейка
6 ячейка
Параметр WIDTH управляет шириной таблицы и ячейки. В
случае, если этот параметр не указан, ширина таблицы/ячейки будет
зависеть от ширины ее содержимого. Ширина может указываться в
процентах относительно ширины окна (для ячейки – относительно
ширины таблицы) или в пикселях.
HEIGHT – то же самое, но для управления высотой таблицы.
14
Таблица с указанием ширины ячеек в пикселях (75, 100 и 150) и
толщиной границы (15):
<TABLE BORDER=5>
<TR>
<TD WIDTH=75>1 ячейка</TD>
<TD WIDTH=100>2 ячейка</TD>
<TD WIDTH=150>3 ячейка</TD>
</TR>
</TABLE>
1 ячейка
2 ячейка
3 ячейка
Для управления размещением таблицы на Web-странице и для
форматирования данных внутри таблицы служат параметры ALIGN
(горизонтальное
выравнивание)
и
VALIGN
(вертикальное
выравнивание).
Параметр ALIGN может иметь значения LEFT (слева), RIGHT
(справа) и CENTER (по центру).
VALIGN может принимать значения TOP (сверху), MIDDLE (по
центру) и BOTTOM (снизу).
При
отсутствии
этих
параметров
таблица
всегда
будет
выравниваться относительно левого края страницы, а содержимое
ячеек – по горизонтали относительно левого края ячейки и по
вертикали относительно ее центра. При употреблении в тэге
<TABLE> параметр ALIGN управляет выравниванием таблицы
относительно окна браузера, а при употреблении в тэгах <TD> и
<TR> — выравниванием содержимого относительно границ ячейки.
15
Пример таблицы с различными типами выравнивания текста в
ячейках:
<TABLE BORDER>
<TR>
<TD VALIGN=TOP>выравнивание сверху</TD>
<TD
VALIGN=MIDDLE
ALIGN=CENTER>выравнивание
по
ALIGN=RIGHT>выравнивание
по
центру </TD>
<TD
VALIGN=BOTTOM
нижнему правому краю </TD>
</TR>
</TABLE>
выравнивание
сверху
выравнивание
по центру
выравнивание
по нижнему
правому краю
Параметр BGCOLOR предназначен для окрашивания фона ячеек
таблицы. Применять эти параметры можно как для таблицы в целом,
так и для отдельных ячеек.
Отредактируем предыдущую таблицу, для заливки первой
ячейки выберем красный цвет, цвет текста во второй ячейке зеленый, а в третьей ячейке изменим оба параметра:
<TABLE BORDER>
<TR>
<TD VALIGN=TOP BGCOLOR=RED >выравнивание сверху</TD>
<TD VALIGN=MIDDLE ALIGN=CENTER>
<FONT COLOR=GREEN> выравнивание по центру </TD>
16
<TD VALIGN=BOTTOM ALIGN=RIGHT
BGCOLOR=BLUE><FONT COLOR=WHITE>выравнивание по
нижнему правому краю </TD>
</TR>
</TABLE>
выравнивание
выравнивание
сверху
по центру
выравнивание
по нижнему
правому краю
Структура таблицы может быть очень сложной, ячейки таблицы
могут содержать в себе вложенные таблицы и любые элементы,
использующиеся для построения Web-страниц.
Маркированные и нумерованные списки
Иногда при создании Web-страниц бывает полезно (а порой
даже необходимо) как-то упорядочить представленную на них
информацию. В традиционном языке HTML для этого применяют
списки.
Перечисление хорошо смотрится в виде маркированного списка.
Для его организации применяется тэг <UL>. Все, что находится
между
ним
и
его
закрывающим
тэгом
</UL>,
считается
маркированным списком. Каждый элемент списка должен быть при
этом обозначен тэгом <LI>.
Например, список:
<UL>
17
<LI>1 элемент списка </LI>
<LI>2 элемент списка </LI>
<LI>3 элемент списка </LI>
</UL>
отображается как:
 1 элемент списка
 2 элемент списка
 3 элемент списка
Также можно использовать нумерованные списки. Для этого
служит тэг <OL>, а элементы списка также обозначаются тэгом <LI>.
И нумерованные, и маркированные списки в большинстве браузеров
выделяются небольшим отступом.
Можно использовать вложенные списки в любых сочетаниях:
<ОL>
<LI>Первый элемент списка </LI>
<LI>Второй элемент списка </LI>
<UL>
<LI>1 описание элемента </LI>
<LI>2 описание элемента </LI>
</UL>
<LI>Третий элемент списка </LI>
</ОL>
Результат:
1. Первый элемент списка
2. Второй элемент списка
 1 описание элемента
18
 2 описание элемента
3. Третий элемент списка
Формы на Web–страницах
Для
того
просматривать
чтобы
посетители
информацию,
но
сайта
и
могли
не
отправлять
только
сведения
администраторам сайта, на его страницах размещают формы. Формы
представляют собой управляющие элементы различных типов:
текстовые поля, раскрывающиеся списки, флажки, переключатели и
др.
Вся форма заключается в контейнер <FORM></FORM>.
Текстовые
поля
создаются
помощью
тэга
<INPUT>
со
значением атрибута TYPE="text". Атрибут NAME является обязательным и служит для идентификации полученной информации.
Значением атрибута SIZE является число, задающее длину поля ввода
в символах.
Для того чтобы анкета «читалась», необходимо разделить
строки с помощью тэга перевода строки <BR> (рисунок 3).
Пример:
<FORM>
Пожалуйста, введите Ваше имя:<BR>
<INPUT TYPE="TEXT" NAME="name" SIZE=70> <BR>
E-mail: <BR>
<INPUT TYPE="TEXT" NAME="name"
SIZE=30>
19
</FORM>
Рисунок 3 – Текстовые поля на Web-страницах
Для выбора одного параметра из нескольких используются
переключатели (радиокнопки). Создается такая группа с помощью
тэга <INPUT> со значением атрибута TYPE ="radio". Все элементы в
группе должны иметь одинаковые значения атрибута NAME,
например: NAME="group". Еще одним обязательным атрибутом этого
тэга является VALUE, значения этого атрибута должны быть
уникальными для каждой радиокнопки, так как при ее выборе именно
они передаются серверу (рисунок 4).
Пример:
<FORM>
Какое время года Вам нравится больше всего: <BR> <BR>
<INPUT TYPE="radio" NAME="group"
VALUE="schoolboy">Лето <BR>
<INPUT TYPE="radio" NAME="group"
VALUE="student">Весна<BR>
<INPUT TYPE="radio" NAME="group"
20
VALUE="TEACHER">Зима<BR>
<INPUT TYPE="radio" NAME="group"
VALUE="TEACHER">Осень<BR>
</FORM>
Рисунок 4 – Пример использования радиокнопок
При помощи такого элемента, как флажки, из предложенного
перечня можно выбрать одновременно несколько вариантов. Флажки
создаются в тэге <INPUT> со значением атрибута TYPE="checkbox".
Флажки, объединенные в группу, могут иметь одинаковые значения
атрибута
NAME,
например:
NAME="group".
Еще
одним
обязательным атрибутом является VALUE, значения которого
должны быть уникальными для каждого флажка, так как при его
выборе именно они передаются серверу (рисунок 5).
21
Рисунок 5 – Пример использования флажков
Перечень
элементов
можно
представить
в
виде
раскрывающегося списка, из которого можно выбрать только один
вариант. Для реализации такого списка используется контейнер
<SELECT></SELECT>,
в
котором
каждый
элемент
списка
определяется тэгом <OPTION>. Выбираемый по умолчанию элемент
задается с помощью атрибута SELECTED.
Для создания большого текстового поля с линейкой прокрутки
можно
использовать
атрибутами:
NAME,
тэг
<TEXTAREA>
задающим
имя
с
обязательными
области, ROWS,
определяющим число строк, и COLS, указывающим число столбцов
области по умолчанию.
Отправка введенной в форму информации или очистка полей от
введенной информации осуществляется с помощью кнопок. Кнопки
создаются с помощью тэга <INPUT>. Для создания кнопки, которая
отправляет информацию, атрибуту TYPE необходимо присвоить
значение "submit", а атрибуту VALUE, который задает надпись на
кнопке, присвоить значение "Отправить".
22
Для создания кнопки, которая производит очистку формы,
атрибуту TYPE необходимо присвоить значение "reset", а атрибуту
VALUE - значение "Очистить".
Заполненная форма отправляется на сервер,
обрабатывается
специальной программой CGI-скриптом или по электронной почте
автору сайта, где он уже самостоятельно обрабатывает полученные
данные.
Создание Web-сайта
Создадим собственный сайт на тему «Наш университет». Сайт
будет состоять из 4 страничек:
 титульная страница, содержащая текст, графику и панель
навигации;
 станица «Специальности», содержащая список специальностей
университета;
 страница «Аудитории» с графическими изображениями;
 страница «Анкета» с вопросами для посетителей сайта.
Для размещения файлов сайта создайте собственную папку в
папке «Мои документы». В качестве имени папки используйте
название группы.
Порядок работы
1.
Запустите программу Блокнот (Пуск – Программы –
Стандартные – Блокнот). В окне приложения Блокнот введите начало
HTML-кода Web-страницы, содержащее заголовок страницы «ПФ
23
СибГИУ». Также наша страница будет содержать заголовок
«Сибирский
государственный
индустриальный
университет»
и
подзаголовок «Прокопьевский филиал».
<HTML>
<HEAD>
<TITLE>ПФ СибГИУ</TITLE>
</HEAD>
<BODY>
государственный
<H1>Сибирский
индустриальный
университет</H1>
<H2>Прокопьевский филиал</H2>
</BODY>
</HTML>
2.
Сохраните файл под именем index.htm
(рисунок 6).
Сверните программу Блокнот.
!!! При вводе имени файла не используйте пробелы.
Имя файла и расширение имени вводятся через точку!
Рисунок 6 – Сохранение документа
3.
Загрузите этот файл в окне браузера для просмотра. В
папке сайта найдите файл
, запустите его. Откроется
программа Internet Explorer с созданной Web-страницей (рисунок 7).
24
Рисунок 7 - Вид окна Internet Explorer с загруженной Web-страницей
4.
Для наглядного просмотра внесенных изменений можно
расположить окна Блокнота и Internet Explorer рядом. Необходимо
убедится, что открыты только программы Блокнот и Internet Explorer.
В Панели задач отображаются открытые программы, из которых одна
активна (рисунок 8).
Рисунок 8 – Вид Панели задач
5.
В контекстном меню Панели задач выберите команду
«Окна слева направо» (рисунок 9).
Рисунок 9 – Контекстное меню Панели задач
После выполнения данных действий окна двух программ будут
расположены рядом (рисунок 10).
25
Рисунок 10 –Расположение окон программ
6.
После заголовка наберите следующий текст:
Наш филиал является старейшим в городе. В 2010 году он будет
отмечать свой 50-летний юбилей. За 47 лет филиал подготовил около
трех тысяч специалистов, которые в настоящее время работают на
предприятиях города, области и других регионов России.
7. Для отображения изменений в окне программы Блокнот
необходимо сохранить изменения (Файл – Сохранить),
а
окно
Internet Explorer обновить при помощи кнопки «Обновить»
на
панели инструментов.
8.
Вставьте
Необходимые
графическое
графические
изображение
файлы
находятся
в
в
страничку.
папке
«Мои
документы». Для их использования скопируйте файлы в свою папку.
На страничке (после текста) наберите тэг вставки изображения с
атрибутами (подпись рисунка и выравнивание по правому краю).
<IMG SRC="Эмблема.gif" ALT="Эмблема" ALIGN="right">.
9.
Для создания следующей Web-страницы создайте в окне
программы Блокнот новый файл, сохраните его под именем
«special.htm» в своей папке. Оформите список специальностей,
используя комбинацию нумерованного и маркированного списка
26
(рисунок 11). Для изменения размера текста используйте атрибут
<FONT SIZE=5>:
<HTML>
<HEAD>
<TITLE>Специальности</TITLE>
</HEAD>
<BODY>
<H1>Специальности филиала</H1>
<FONT SIZE=5>
<OL>
<LI> Подземная разработка месторождений полезных ископаемых
<BR>
Специализация:
Подземная
разработка
пластовых
месторождений</LI>
<UL>
<LI>Вечерняя группа со сроком обучения 6 лет; </LI>
<LI>Очная сверхплановая группа со сроком обучения 5 лет.</LI>
</UL>
<LI>Электромеханика в горном производстве</LI>
<UL>
<LI>Вечерняя группа со сроком обучения 6 лет;</LI>
<LI>Очная сверхплановая группа со сроком обучения 5 лет.</LI>
</UL>
<LI>Организация перевозок и управление на транспорте</LI>
<UL>
27
<LI>Вечерняя группа со сроком обучения 2 года с последующим
переводом на заочное обучение;</LI>
<LI>Очная сверхплановая группа со сроком обучения 5 лет;</LI>
<LI>Очная сверхплановая группа со сроком обучения 2 года 10
месяцев
(ускоренная)
на
базе
среднего
технического
образования.</LI>
</UL>
<LI>Промышленное и гражданское строительство</LI>
<UL>
<LI>Вечерняя группа со сроком обучения 2 года с последующим
переводом на заочное обучение;</LI>
</UL>
</ОL>
</BODY>
</HTML>
10. Для создания следующей Web-страницы создайте в окне
программы Блокнот новый файл, сохраните его под именем
«Number.htm» в своей папке. Создайте структуру Web-странички с
заголовком «Контингент». Также наша страница будет содержать
заголовок «Количество выпускников за последние 3 года».
28
Рисунок 11 – Вид Web-страницы «Специальности»
11. Создайте и заполните таблицу, состоящую из 5 строк и 4
столбцов.
<TABLE BORDER >
<TR>
<TD>Наименование специальности</TD>
<TD>2006</TD>
<TD>2007</TD>
<TD>2008</TD>
29
</TR>
<TR>
<TD>Подземная разработка месторождений полезных ископаемых
</TD>
<TD>17</TD>
<TD>21</TD>
<TD>15</TD>
</TR>
<TR>
<TD>Электромеханика </TD>
<TD>22</TD>
<TD>18</TD>
<TD>24</TD>
</TR>
<TR>
<TD>Организация перевозок и управление на транспорте</TD>
<TD>25</TD>
<TD>24</TD>
<TD>26</TD>
</TR>
<TR>
<TD>Промышленное и гражданское строительство</TD>
<TD>18</TD>
<TD>21</TD>
<TD>25</TD>
</TR>
30
</TABLE>
12. Создадим
последнюю
Web-страничку.
Разместим
на
странице «Анкета» анкету для посетителей, чтобы выяснить, кто из
наших посетителей интересуется деятельностью нашего филиала, а
также какую информацию они хотели бы видеть на нашем сайте. Для
создания данной Web-страницы создайте в окне программы Блокнот
новый файл, сохраните его под именем «Anketa.htm» в своей папке.
13. Внесите в файл следующий текст:
<HTML>
<HEAD><TITLE> Анкета</TITLE></HEAD>
<BODY>
<FORM>
14. В первую очередь мы хотим выяснить имя нашего читателя
и его электронный адрес, чтобы иметь возможность ответить ему на
замечания и поблагодарить за посещение сайта. Для получения
данных разместим два однострочных текстовых поля для ввода
информации.
Пожалуйста, введите Ваше имя:<BR>
<INPUT TYPE="TEXT" NAME="name" SIZE=70> <BR>
E-mail: <BR>
<INPUT TYPE="TEXT" NAME="name"
SIZE=30> <BR> <BR>
15. Сохраните файл в Блокноте и просмотрите результат в
браузере.
31
16. Далее мы хотим выяснить, к какой группе относит себя
посетитель. Предложим выбрать ему один из нескольких вариантов:
учащийся средней школы, студент, преподаватель университета. Для
этого необходимо создать группу переключателей (радиокнопок).
Укажите, к какой группе пользователей Вы себя относите: <BR>
<INPUT TYPE="radio" NAME="group"
VALUE="schoolboy">Учащийся средней школы <BR>
<INPUT TYPE="radio" NAME="group"
VALUE="student">Студент <BR>
<INPUT TYPE="radio" NAME="group"
VALUE="TEACHER">Преподаватель университета <BR> <BR>
17. Сохраните файл и просмотрите результат в браузере.
18. Далее мы хотим узнать, какие специальности интересуют
посетителей нашего сайта. Здесь из предложенного перечня можно
выбрать одновременно несколько вариантов, пометив их флажками.
О какой специальности Вы хотели бы получить более подробную
информацию? <BR> <BR>
<INPUT TYPE="checkbox" NAME="group"
VALUE="WWW">Подземная разработка месторождений полезных
ископаемых <BR>
<INPUT TYPE="checkbox" NAME="group"
VALUE="E-mail">Электромеханика <BR>
<INPUT TYPE="checkbox" NAME="group"
VALUE="FTP">Организация перевозок и управление на транспорте
<BR>
<INPUT TYPE="checkbox" NAME="group"
32
VALUE="FTP">Промышленное
и
гражданское
строительство
<BR><BR>
19. Сохраните файл и просмотрите результат в браузере.
20. Теперь выясним, заинтересован ли посетитель в нашем
филиале. Перечень ответов представим в виде раскрывающегося
списка, из которого можно выбрать только один вариант.
Собираетесь ли Вы поступать в наш университет? <BR>
<SELECT NAME="browsers">
<OPTION SELECTED> Точно ДА </OPTION>
<OPTION> Точно НЕТ </OPTION>
<OPTION> Не могу определиться </OPTION>
<OPTION> У меня уже есть высшее образование </OPTION>
</SELECT> <BR> <BR>
21. Сохраните файл и просмотрите результат в браузере.
22. В заключение поинтересуемся, что хотел бы видеть
посетитель на наших страницах, какую информацию следовало бы в
них добавить. Так как мы не можем знать заранее, насколько
обширным будет ответ читателя, отведем для него текстовую область
с линейкой прокрутки. В такое поле можно ввести достаточно
подробный текст.
Какую еще информацию Вы хотели бы видеть на нашем сайте?
<BR>
<TEXTAREA NAME="resume"
ROWS=2 COLS=30>
</TEXTAREA> <BR>
23. Сохраните файл и просмотрите результат в браузере.
33
24. Отправка введенной в форму информации или очистка
полей от введенной информации осуществляется с помощью кнопок.
<INPUT TYPE="submit"
VALUE="Отправить">
<INPUT TYPE="reset"
VALUE="Очистить">
</FORM>
</BODY>
</HTML>
Вид страницы представлен на рисунке 12.
Все страницы сайта созданы, настало время соединить их
гиперссылками.
Принято размещать гиперссылки в нижней части страницы,
поэтому разместим их под введенным текстом, в новом абзаце,- в
одну строку, разделив несколькими пробелами. Такое размещение
гиперссылок часто называют панелью навигации.
Панель
навигации
будет
представлять
собой
абзац,
выровненный по центру. Абзацы помещаются в контейнер <Р></Р>, а
пробелы обозначаются специальными символами: &nbsp.
25. Откройте файл Index.htm.
34
Рисунок 12 - Вид страницы «Анкета»
26. После рисунка добавьте тэги, определяющие гиперссылки.
Все файлы сайта должны находиться в одной папке, в этом случае
используем в гиперссылках относительный адрес.
35
<P ALIGN="CENTER">
[<A HREF="special.htm">Специальности</A>] &nbsp&nbsp&nbsp
[<A HREF="number.htm">Контингент</A>] &nbsp&nbsp&nbsp
[<A HREF="anketa.htm">Анкета</A>] &nbsp&nbsp&nbsp
</P>
Панель навигации на титульной странице создана, теперь
активизация указателей гиперссылок будет приводить к переходу на
другие страницы сайта.
Самостоятельные задания
1.
Произвольно оформить текст и заголовки на страницах
«Главная», «Специальности», «Контингент» и «Анкета» (цвет,
размер, выравнивание и т.д.).
2.
На все странички сайта добавить фон. Подходящий
рисунок можно найти в папке «Мои документы» и скопировать в
папку своего сайта.
3.
На
странице
«Контингент»
оформить
произвольным
образом таблицу (цвет текста, цвет заливки, ширина столбцов,
выравнивание текста).
4.
Создать новую страницу, оформить ее при помощи
таблицы. Примерный вид страницы показан на рисунке 13. Добавить
на главную страницу соответствующую гиперссылку.
36
Рисунок 13 - Примерный вид Web-страницы
37
Учебное издание
Составитель
Храмова Юлия Анатольевна
ОСНОВЫ HTML
Методические указания
для выполнения лабораторно-практической работы по дисциплине
«Основы практического применения Интернет-технологий»
Специальность 140601«Электромеханика в горном производстве»
Подписано в печать
Формат бумаги 60x84 1/16. Бумага писчая. Печать офсетная.
Усл. печ. л.
. Уч. изд. л.
. Тираж
экз. Заказ
Сибирский государственный индустриальный университет
654007, г. Новокузнецк, ул. Кирова 42.
Типография СибГИУ
38
.