2.1.3. Лабораторные задания

Задание 1. Создание простой Web – страницы.

Используя файл struct.htm как шаблон в Notepad отредактируйте его как файл work1.htm и просмотрите в браузере. В качестве текста задайте список (не форматированный) членов бригады и данные по автору (номер лабораторной работы, дата создания). В качестве заголовка – название (номер) бригады и ФИО.

Результат покажите преподавателю.

Задание 2. Использование списковых элементов.

Отредактируйте файл work1.htm в Notepad и сохраните его как файл work2.htm. В нумерованном списке членов бригады укажите полностью имя и отчество. Весь текст отцентрируйте на странице. Номера и фамилии выделите другим цветом. Фамилии подчеркните и выделите другим типом и номером шрифта.

Просмотрите файл в браузере. Результат покажите преподавателю.

Задание 3. Использование дополнительного форматирования.

Отредактируйте файл work2.htm в Notepad и сохраните его как файл work3.htm. Используйте ненумерованный (маркированный) список членов бригады и ниже то же самое с помощью списка определений (<DL> ... </DL>. Нечетных членов бригады отцентрируйте на странице влево, а четных – вправо.

Просмотрите файл в браузере. Результат покажите преподавателю.

Задание 4. Использование таблиц.

Отредактируйте файл work1.htm в Notepad и сохраните его как файл work4.htm. Создайте таблицу со списком членов бригады, укажите полностью фамилию, имя и отчество в отдельных колонках. Таблица должна содержать заголовки строк и столбцов, выделенных цветом фона. Текст колонок отцентрируйте на странице. Фамилии выделите другим цветом.

Просмотрите файл в браузере. Результат покажите преподавателю.

Задание 5. Использование гиперссылок.

Отредактируйте файл work4.htm в Notepad и сохраните его как файл work5.htm. Создайте для каждого члена бригады личную страницу с дополнительной информацией (например, датой рождения, адресом). В основной странице создайте гиперссылки на фамилию с переходом на эти дополнительные страницы.

Просмотрите файл в браузере. Результат покажите преподавателю.

Задание 6. Использование рисунков.

Создайте файл work6.htm с использованием элемента карта. Элемент должен содержать области разного цвета, которые должны использоваться как ссылки на страницы членов бригады.

Просмотрите файл в браузере. Результат покажите преподавателю.

Приложение 1. Дополнительные элементы HTML

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

• <P> </p> – элемент абзаца. Выделяет абзац текста с некоторыми общими свойствами. Может использовать атрибут выравнивания, например,

<P align=”center”> Текст абзаца

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

• <BR> – принудительный переход на новую строку.

• <NOBR> </nobr> – запрет перехода на новую строку. Если такая строка не поместится в окне, то для ее просмотра придется использовать полосу прокрутки.

• <DIV> </div> – элемент для выравнивания текста. Для этого стартовый тег должен содержать атрибут align.

• <B> </b> – выделение текста полужирным шрифтом.

• <I> </I> – выделение текста курсивом.

• <U> </u> – подчеркивание текста.

• <SUB> </sub> и <SUP> </sup> – элементы нижнего и верхнего индексов.

• <BIG> </big> и <SMALL> </small> -увеличенный и уменьшенный размер шрифта.

• <BASEFONT> – задание базового (основного) размера шрифта. Внктри элемента необходимо указать атрибут

• size=Базовый размер шрифта (от1 до 7).

• <FONT> – задает тип, размер и цвет шрифта. Для этого используются соответствующие атрибуты:

Размер шрифта

size=Абсолютный размер шрифта

size=+Число, size=-Число – размер шрифта относительно базового.

Цвет шрифта

color=”Цвет”

Тип шрифта

face=”Название шрифта”

П.1.2. Списки

В списках обеспечивается автоматическая нумерация строк. В случае ненумерованных списков перед каждым пунктом списка ставится маркер: кружок, прямоугольник и др.

Для создания списков используются две группы тегов: одни определяют общий вид списка (с помощью атрибутов), а другие задают его внутреннюю структуру. Существуют несколько разновидностей списков:

• <UL> <LI> </ul> – ненумерованный список (unordered list). Элемент LI выделяет отдельные строки. Список имеет шаблон:

<UL>

<LI> Пункт 1 списка

<LI> Пункт 2 списка

<LI> Пункт 3 списка

</ul>

• <OL> <LI> </ol> – нумерованный список (ordered list). Список имеет шаблон:

<ОL>

<LI> Пункт 1 списка

<LI> Пункт 2 списка

<LI> Пункт 3 списка

</оl>

Способ нумерации задается атрибутом 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 …

• <DL> <DI> <DD> </dl> – списки с определениями (definition list). Список имеет шаблон:

<DL>

<DT>Пункт 1

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

<DD>Другое определение пункта 1

<DT>Пункт 2

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

<DT>Пункт 3

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

</dl>

Для создания списков с подпунктами можно использовать принцип вложения списковых тегов.

П.1.3. Таблицы

В таблицах автоматически прорисовываются рамки. При создании таблицы используется принцип вложенности: внутри основного элемента таблицы (TABLE) создаются элементы определения строк (TR), а внутри этих элементов размещаются элементы описания каждой ячейки в строке.

<TABLE> </table> – внешний элемент таблицы. Он задает общие свойства таблицы. Внутри стартового тега можно использовать атрибуты align (выравнивание), width (ширина в пикселях или %), border (ширина боковой грани в пикселях), sellspacing (ширина фронтальной грани в пикселях), sellpadding (размер пустого пространства вокруг данных в пикселях).

<CAPTION> </caption> – элемент для задания заголовка таблицы. Можно использовать атрибуты align=”top” (заголовок над таблицей) и align=”bottom” (заголовок под таблицей).

<TR> – элемент задания строки таблицы. Для выравнивания содержимого всех ячеек в строке можно использовать атрибут align с присвоением ему значения left, center и right. Для выравнивания содержимого ячеек по вертикали используют атрибут align с присвоением ему значения “top” (по верхнему краю), “middle” (по центру) и “bottom”(по нижнему краю).

<TH> – элемент ячейки, задающей заголовок столбца или строки. Этот элемент должен располагаться внутри элемента <TR>. Текст внутри такой ячейки выделяется полужирным шрифтом. При большом количестве текста в ячейке браузер выводит текст в несколько строк. Атрибут nowrap запрещает форматирование, и таблица может уйти за край окна. Для объединения ячеек можно использовать атрибуты rowspan=n (n ячеек по горизонтали) и colspan=n (n ячеек по вертикали). Можно использовать атрибуты align и align.

<TD> – определение обычной ячейки таблицы. Можно использовать те же атрибуты, что и для ТН.

Пример таблицы с заголовками для столбцов и строк:

<TABLE border=4 cellspacing=3>

<CAPTION> Заголовок таблицы </caption>

<TR><TH bgcolor="yellow">

<TH bgcolor="yellow">Заголовок 1

<TH bgcolor="yellow">Заголовок 2

<TR><TH bgcolor="yellow">Заголовок 3

<TD>Ячейка 1

<TD>Ячейка 2

<TR><TH bgcolor="yellow">Заголовок 4

<TD>Ячейка 3

<TD>Ячейка 4

</table>

П.1.4. Гиперссылки

<A> </a> – элемент создания гиперссылки. Для указания адреса гиперссылки используется атрибут href=”URL”. Атрибут href может указывать на ресурс Internet, файл на локальном диске или метку внутри текущей страницы.

Чаще всего используется такой шаблон для текстовой гиперссылки:

Произвольный текст <A href=”Адрес ссылки”> текст для щелчка </a>

Для ссылки на рисунок на локальном диске адрес ссылки имеет вид

href="file:///Диск:/Путь к файлу"

или href="file://Диск:\Путь к файлу"

Например, гиперссылки с использованием файла с локального диска имеет вид <A href="file:///C:/1HTML/Samp1.htm">Пример гиперссылки</a>

Для гиперссылки на ресурс Internet атрибут ссылки имеет следующий вид

href=”http://www.netscape.com”

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

<A href=”Адрес ссылки”> <IMG src=”Ссылка на рисунок”> </a>

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

Текст подсказки <A href=”#Метка”> текст для щелчка </a>

Внутри текущей Web-страницы должны быть расставлены метки

<A name=”Метка”> </a>

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

П.1.5. Рисунки

<IMG> – элемент для создания ссылки на графический файл. Вся необходимая для отображения информация содержится в атрибутах. Ссылки на рисунки можно использовать для гиперссылок или вставлять рисунки в таблицы. Главным атрибутом элемента является указатель на файл графики:

src=”Ссылка на файл графики”

Эта ссылка представляет собой URL..

Для ссылки на рисунок на локальном диске шаблон ссылки имеет вид

<IMG SRC="file:///Диск:/Путь к файлу"

или <IMG SRC=”file://Диск:\Путь к файлу”

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

<IMG SRC="file:///C:/DOC/HTML_SAM/treug1.gif"

Другие атрибуты:

alt=”Текст поясняющий рисунок”. Позволяет выводить текст вместо рисунка. Это позволяет ускорить загрузку страницы.

Атрибуты выравнивания align (botton , left, middle, right, top).

Размер рисунка: height и width (высота и ширина в пикселях).

Толщина рамки border (в пикселя) и др.

<MAP> </map> – элемент «карта» для составного графического изображения. Его отдельные части могут быть использованы как гиперссылки для организации переходов. Элемент работает совместно с элементом IMG.

Если реакцию на щелчок отрабатывает сервер, то используют атрибут ismap=”ismap”, а если браузер, то usemap=”#Имя”. Это имя ставится в соответствие со значением соответствующих атрибутов AREA и MAP.

Имя карты задается внутри тега MAP атрибутом

name=”Имя”.

Для каждой области карты создается свой элемент <AREA>. Этот элемент включает атрибут адреса ссылки:

href="Протокол://Адрес ссылки">.

Можно также использовать атрибут alt=”Текст подсказки”.

Для областей карты обязательно должны быть определены атрибуты их формы. Существуют три стандартные формы областей: круг (circle), прямоугольник (rect) и многоугольник произвольной формы (polygon).

Для круга задают координаты центра и радиус. Его шаблон:

Shape=”circle” cords=X,Y,R

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

Shape=”rect” cords=X1,Y1, X2,Y2

Для многоугольника задают координаты каждой его точки

Shape=”poly” cords=X1,Y1, X2,Y2, X3,Y3

Пример элемента MAP:

<MAP name="karta1">

<AREA alt="Круг" shape="circle"

coords="119,114,83" href="http://www.ipcom.ru">

<AREA alt="Многоугольник" shape="poly"

coords="74,242,180,250,249,239,242,278,31,276"

href="file:///C:/DOC/HTML_SAM/Start.htm">

</map>

<IMG src="file:///C:/DOC/HTML_SAM/Map1.gif"

usemap="#karta1" alt="Карта 1">

Примечание.

Изображение карт можно выполнять в графическом редакторе Paint. С помощью средств редактора можно нарисовать области, задать цвета и надписи. С помощью инструмента Выделение можно точно расположить рисунок. В строке состояния редактора указываются координаты с точностью до пикселя. Эти координаты соответствуют значениям атрибута cords. Для преобразования можно использовать редакторы, поддерживающие формат gif, например MS Photo Editor, PaintShop Pro фирма JACK или Adobe Photoshop.