- •Основы html
- •Введение
- •Основные понятия
- •Лабораторная работа №1
- •Форматирование текста
- •Задание к лабораторной работе №1
- •1. Создание html- документа.
- •2.Просмотр html-документа.
- •3.Редактирование html-документа.
- •Лабораторная работа №2
- •Заголовок таблицы
- •Лабораторная работа №3
- •Задание к лабораторной работе №3
- •Лабораторная работа №4 Тема: использование фреймов
- •Задание к лабораторной работе № 4
- •Лабораторная работа №5 Тема: карты изображений
- •Лабораторная работа №6 Тема: использование элементов форм при создании Web-страницы
- •Общие атрибуты форм
- •Элементы форм
- •Атрибуты, определяющие свойства элемента input
- •Пример формы (форма4)
- •Дополнительная литература
Задание к лабораторной работе №1
1. Создание html- документа.
1.1.Откройте текстовый редактор Блокнот. В открывшемся окне наберите следующий текст:
<HTML>
<HEAD>
<TITLE> Лабораторная работа №1 </TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER > Добро пожаловать на сайт Уральского Государственного лесотехнического университета </H1>
</BODY>
</HTML>
1.2.Сохранить документ под именем Лабораторная_1.htm на диске А.
2.Просмотр html-документа.
Открыть созданный документ, используя программу Проводник или окно Мой Компьютер, просмотреть результат.
3.Редактирование html-документа.
Редактирование документа может производиться в окне программы Блокнот или непосредственно в окне Web- броузера. Во втором случае необходимо, используя контекстное меню (правая клавиша мыши) выполнить команду (просмотр в виде HTML), затем внести необходимые изменения в документ, сохранить документ и в окне Web- броузера щелкнуть по кнопке Обновить на панели инструментов.
3.1.Используя элементы форматирования текста, внести в документ Лабораторная_1.htm следующие изменения:
3.1.1.В элемент <BODY> добавить атрибуты:
BGCOLOR- определяющий цвет фона документа;
TEXT - определяющий цвет текста;
TOPMARGIN - определяющий ширину верхнего поля документа.
3.1.2.Текст "Сайт Уральского государственного лесотехнического университета" подчеркнуть горизонтальной линией.
3.1.3.Используя различные размеры и виды шрифта, набрать следующий текст:
В октябре 1920 г. декретом Совнаркома в Екатеринбурге учреждается Уральский государственный университет, в состав которого входил инженерно-лесной факультет. В 1922г. факультет был свернут до лесной специальности химико-металлургического факультета. В 1925 году факультет был снова открыт в составе Уральского политехнического института под названием лесопромышленный. Первым деканом факультета был профессор-зоолог А.В.Шестаков. В соответствии с приказом ВСНХ СССР 5 мая 1930 г. Уральский политехнический институт был реорганизован, и на его базе были организованы семь отраслевых вузов:
Химический;
Геологоразведочный;
Черной металлургии;
Цветной металлургии;
Строительный;
Лесотехнический;
Машиностроительный.
Эта дата считается днем рождения нашего вуза. Первым директором Уральского лесотехнического института был Валентин Владимирович Марцинкевич.
3.2.Выделить даты и имена собственные курсивом, подчеркиванием или цветом.
3.3.Сохранить документ, просмотреть результат.
Лабораторная работа №2
Тема: использование списков, таблиц и графических изображений в HTML- документе.
Списки.
В HTML-документах используется три типа списков:
Ненумерованный или неупорядоченный список (unordered list) с маркерами возле каждого элемента.
Нумерованный или упорядоченный список (order list), в котором каждый элемент снабжается цифровой или символьной нумерацией.
Список с определениями (definition list).
Шаблоны для создания списков:
Ненумерованный список:
<UL>
<LI> Пункт 1 списка
<LI> Пункт 2 списка
<LI> Пункт 3 списка
</UL>
Используемые атрибуты:
type - определяет тип маркера.
Значения атрибута type:
type = " circle " - вид маркера - окружность.
type = " disc " - вид маркера - круг.
type = " square " - вид маркера - квадрат
Нумерованный список:
<OL type =" ">
<LI> Пункт 1
<LI> Пункт 2
<LI> Пункт 3
</OL>
Используемые атрибуты:
type - определяет тип нумерации.
Значения атрибута type:
type = " 1 " - вид нумерации - 1,2,3….
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 = номер - определяет начальное значение для нумерации списка. Например, Start = 4 при буквенной нумерации означает, что нумерация списка начинается с литеры D.
Value = номер - определяет номер для текущего пункта списка.
Список с определениями:
<DL> <DT> Пункт 1 <DD> Определение пункта 1 <DD> Другое определение пункта 1
<DT> Пункт 2 <DD> Определение пункта 2 <DT> Пункт 3 <DD> Определение пункта 3 </DL>
Таблицы.
Таблицы являются удобным средством форматирования данных на Web- странице. Рамка таблицы прорисовывается броузером автоматически. При создании таблиц используется принцип вложения: внутри элементов таблицы (table) создается ряд элементов, определяющих строки (tr), а внутри элемента строки размещаются элементы для описания каждой ячейки в строке (td,th).
Элементы для создания таблиц:
<TABLE> </TABLE> - внешний элемент таблицы, позволяющий задавать общие свойства таблицы и отделяет структуру таблицы от остальной части Web-страницы.
Используемые атрибуты:
align - выравниване таблицы по горизонтали (left, right,center);
width - ширина таблицы в пикселях или процентах;
border - ширина боковой грани таблицы (border=0 - рамка отсутствует);
cellspacing - ширина фронтальной грани таблицы;
cellpadding - размер пустого пространства, окружающего данные в ячейках;
bgcolor - цвет фона для всей таблицы;
background - использование в качестве фона таблицы файла изображения;
frame - задает вид рамки таблицы :
void - рамка отсутствует;
above - верхняя сторона рамки;
below- нижняя сторона таблицы;
hsides- части рамки сверху и снизу;
vsides- части рамки слева и справа;
lhs - левая часть рамки;
rhs - правая часть рамки;
border или box - рамка показана полностью;
rules - определяет вид сетки внутри таблицы:
none - сетка отсутствует;
groups - сетка вокруг групп ячеек;
rows - горизонтальные линии между строками;
cols - вертикальные линии между колонками;
all - обычная сетка.
Стандартные атрибуты: id, class, lang, dir, title, style.
<CAPTION> </CAPTION> - задание заголовка таблицы.
Используемые атрибуты:
align - расположение заголовка относительно таблицы:
top - заголовок над таблицей;
bottom - заголовок под таблицей;
left - заголовок над таблицей и выровнен влево;
right - заголовок над таблицей и выровнен вправо.
Стандартные атрибуты: id, class, lang, dir, title, style.
<TR> - создает строку таблицы. Элемент не имеет конечного тега, заканчивается там, где начинается следующая строка, т.е. следующий элемент <TR>.
Используемые атрибуты:
align - выравнивание всех элементов в строке:
center - по центру;
left - по левому краю;
right - по правому краю.
valign - выравнивание содержимого ячеек по вертикали:
center - по центру;
top - по верхнему краю;
bottom – по нижнему краю.
Стандартные атрибуты: id, class, lang, dir, title, style.
<TH> - задает заголовок столбца или строки таблицы. Элемент должен располагаться внутри элемента <TR>.
Используемые атрибуты:
rowspan = n - объединение по строкам n ячеек в одну ячейку;
colspan = n - объединение по столбцам n ячеек в одну ячейку;
width = ширина;
height = высота.
<TD> - определяет содержимое обычной ячейки. Элемент может не иметь конечного тега, допустимы атрибуты, что и для <TН>.
Элементы, используемые для группировки строк:
<THEAD> - элемент блока заголовка;
<TFOOT> - элемент нижнего блока строк;
<TBODY> - элемент обычного блока строк.
Каждый элемент может не содержать конечный тег и содержать любое количество строк (элементов TR). При использовании этих элементов
необходимо придерживаться следующих правил:
В таблице можно указывать по одному элементу THEAD и TFOOT, но несколько элементов TBODY.
Последовательность элементов следующая: <THEAD>, <TFOOT>, <TBODY>. Но в таблице на экране блок <TBODY> окажется последним.
Все блоки должны содержать одинаковое количество колонок.
Элементы, используемые для группировки колонок:
<COLGROUP> - создает группы колонок с одинаковыми свойствами. Атрибут span = n определяет число колонок в группе.
<COL> - определяет свойства одной колонки.
Пример создания таблицы.