Лабораторные работы
скачать (2633 kb.)
Доступные файлы (43):
скачатьЗадание №1.doc
Занятие 1: Структура HTML-документа.Структура HTML документа:
<HTML>
<HEAD>
<TITLE>Заголовок страницы</TITLE>
…
</HEAD>
<BODY>
…
</BODY>
</HTML>
Элемент TITLE
Элемент TITLE предназначен для задание заголовка документа. Указанный заголовок будет отображаться в строке заголовка браузера. Элемент является обязательным.
Пример:
<TITLE>Моя страница</TITLE>
Элемент META
Элемент META используется для указания ключевых слов и описаний, кодировки символов и автора документа.
^
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=Windows-1251”>
<META NAME=”keywords” CONTENT=”Ключевые слова через запятую”>
<META NAME=”Author” CONTENT=”Автор сайта”>
<META NAME=”Description” CONTENT=”Описание сайта”>
Занятие 2: Форматирование текста.
Тег <H> с указанием одной из цифр (от 1 до 6) задаёт определённый размер заголовка всего текста целиком или его конкретного фрагмента.
^
<H1>Заголовок 1</H1>
Тег <B> - выделяет фрагмент текста жирным шрифтом.
Пример:
<B>Жирный текст</B>
Тег <I> - выделяет фрагмент текста курсивом.
Пример:
<I>Курсив</I>
Тег <U> - выделяет фрагмент текста подчёркиванием.
Пример:
<U>Подчёркнутый текст</U>
Тег <FONT> - один из основных тегов форматирования текста, отобржающий свойства шрифтов. Используется только с параметрами:
FACE – параметр, посредством которого браузер отображает текст указанным в значении параметра шрифтом.
Пример:
<FONT FACE=”Verdana”>Текст, отображённый шрифтом Verdana</FONT>
COLOR – параметр, предназначенный для выбора цвета, которым будет написан текст.
^
<FONT COLOR=”red”>Текст, написанный красным цветом</FONT>
SIZE – определяет размер шрифта.
Пример:
<FONT SIZE=”4”>Текст, написанный 4 размером</FONT>
Тег <FONT> позволяет использовать как любой из выше перечисленных параметров в отдельности, так и различные комбинации этих параметров.
Примеры:
<FONT SIZE=”2” COLOR=”yellow”>Жёлтый текст, написанный 2 размером</FONT>
<FONT FACE=”Verdana” SIZE=”6” COLOR=”green”>Зелёный текст, отображённый шрифтом Verdana, 6 размера</FONT>
Структурное форматирование:
Тег <P> - разделяет фрагменты текста вертикальным отступом; создаёт принудительный перенос строки после своего закрывающего тега на две позиции.
^ может содержать параметр ALIGN, отвечающий за тип горизонтального выравнивания текста:
ALIGN=”left” – текст выровнен по левому краю.
ALIGN=”right” – текст выровнен по правому краю.
ALIGN=”center” – текст выровнен по центру.
ALIGN=”justify” – текст выровнен по ширине окна браузера.
Пример:
<P ALIGN=”right”>Абзац, выровненный по правому краю.</P>
Тег <DIV> – выделяет фрагмент текста, для задания ему определённых свойств. Схож с тегом <P>, но создаёт принудительный перенос строки после своего закрывающего тега на одну позицию. Так же может содержать параметр ALIGN.
Пример:
<DIV ALIGN=”right”>Абзац, выровненный по правому краю.</DIV>
Тег <BR> – задаёт принудительный перенос строки на одну позицию.
Пример:
Белеет парус одинокий<BR>
В тумане моря голубом.<BR>
Что ищет он в стране далёкой?<BR>
Что кинул он в краю родном?
Горизонтальный разделитель – тег <HR> – линия, проводимая между различными текстовыми фрагментами.
^
WIDTH – указание длины линии (в процентах от ширины окна браузера или в пикселях);
SIZE – Указание толщины линии в пикселях;
ALIGN – обозначение типа выравнивания линии (значения: LEFT, CENTER, RIGHT);
^ – выбор цвета линии;
NOSHADE – отмена рельефности линии.
Пример:
<HR WIDTH=”90%” SIZE=”1” ALIGN=”CENTER” COLOR=”black” NOSHADE>
Занятие 3: HTML-списки.
Нумерованные списки
Для создания нумерованного списка используется тег <OL>, внутри которого располагаются пункты перечня информационных данных, за указание которых отвечает тег <LI>.
Пример:
<OL>
<LI>Первый элемент списка
<LI>Второй элемент списка
<LI>Третий элемент списка
<LI>Четвёртый элемент списка
</OL>
Если необходимо добавить разрыв в последовательности представления пунктов, используется параметр тега <LI> - VALUE, с указанием необходимого значения.
Пример:
<OL>
<LI>Первый элемент списка
<LI>Второй элемент списка
<BR>…
<LI VALUE=”5”>Пятый элемент списка
</OL>
Параметры тега <OL>
Параметр TYPE – используется для указания типа нумерованного списка.
Значения:
TYPE=”1” – нумерация арабскими цифрами (по умолчанию);
TYPE=”I” – нумерация большими римскими цифрами;
TYPE=”i” – нумерация маленькими римскими цифрами;
TYPE=”A” – нумерация прописными латинскими буквами;
TYPE=”a” – нумерация строчными латинскими буквами.
Пример:
<OL TYPE=”A”>
<LI>Первый элемент списка
<LI>Второй элемент списка
</OL>
Параметр START позволяет начинать список не с первой позиции. Значением параметра может являтся только цифра.
^
Для создания маркированного списка используется тег <UL>, внутри которого располагаются пункты перечня информационных данных, за указание которых отвечает тег <LI>.
Пример:
<UL>
<LI>Элемент списка
<LI> Элемент списка
<LI> Элемент списка
<LI>Элемент списка
</UL>
Параметры тега <UL>
Параметр TYPE отвечает за форму отображаемого браузером маркера.
Значения:
TYPE=”disc” – маркер, в виде закрашенного кружка (по умолчанию);
TYPE=”circle” – маркер, в виде незакрашенного кружка;
TYPE=”square” – маркер, в виде закрашенного квадрата;
Пример:
<UL TYPE=”circle”>
<LI>Первый элемент списка
<LI>Второй элемент списка
</UL>
Занятие 4: Таблицы.
Основным тегом, задающим таблицу, является тег <TABLE>. Любая таблица состоит из рядов, которые задаются тегом <TR>. Ряды, в свою очередь, состоят из столбцов или ячеек, которые задаются тегом <TD>.
Пример:
<TABLE>
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
<TD>Ячейка 3</TD>
</TR>
</TABLE>
Параметры тега <TABLE>
Параметр BORDER задаёт рамку, показывающую внутреннюю структуру таблицы. Значением этого параметра может быть любое целое число, указывающее толщину рамки в пикселях.
Пример:
<TABLE BORDER=”2”>
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
<TD>Ячейка 3</TD>
</TR>
</TABLE>
Параметр BORDERCOLOR задаёт цвет рамки вокруг таблицы.
Пример:
<TABLE BORDERCOLOR =”green”>
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
<TD>Ячейка 3</TD>
</TR>
</TABLE>
Параметр CELLSPACING задаёт расстояние между соседними ячейками таблицы по вертикали и горизонтали. Значение параметра указывается в пикселях.
Пример:
<TABLE BORDER=”2” CELLSPACING=”2”>
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
<TD>Ячейка 3</TD>
</TR>
</TABLE>
Параметр CELLPADDING используется для создания и регулирования отступа между рамкой ячейки и её содержимым.
Пример:
<TABLE BORDER=”2” CELLPADDING=”2” CELLSPACING=”2”>
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
<TD>Ячейка 3</TD>
</TR>
</TABLE>
Параметр ALIGN устанавливает тип выравнивания всей таблицы относительно ширины HTML-документа.
Значения см. выше.
Параметры ^ и HEIGHT отвечают соответственно за ширину и высоту таблицы. Значения этих параметров могут указываться либо в пикселях, либо в процентах.
Параметры тегов <TR> и <TD>
Параметр ALIGN предназначен для указания типа выравнивания содержимого ячеек.
Параметр ^ предназначен для указания типа выравнивания содержимого ячеек по вертикали.
Значения:
VALIGN =”middle” – выравнивание по середине ячейки (по умолчанию);
VALIGN =”top” – выравнивание по верхнему краю ячейки;
^ – выравнивание по нижнему краю ячейки;
Пример:
<TABLE BORDER=”2”>
<TR ALIGN=”center”>
<TD VALIGN=”top”>Ячейка 1</TD>
<TD VALIGN=”middle”>Ячейка 2</TD>
<TD VALIGN=”bottom”>Ячейка 3</TD>
</TR>
</TABLE>
Параметр BGCOLOR используется для задания определенного цвета ячеек.
Параметры WIDTH и HEIGHT – это параметры ширины и высоты либо отдельных ячеек, либо целых рядов таблицы. Правила указания аналогичны этим же параметрам тега <TABLE>
Параметр NOWRAP запрещает принудительный перенос строки в ячейке.
Иногда при построении таблиц возникает необходимость в объединении нескольких соседних ячеек в одну. Для это используются параметры COLSPAN и ROWSPAN.
^ показывает на сколько ячеек по горизонтали следует расширить ячейку, в теге <TD> которой указан данный параметр.
ROWSPAN делает тоже самое, но увеличивает ячейку по вертикали.
Пример:
<TABLE BORDER=”2”>
<TR>
<TD COLSPAN=”2”>Ячейка 1</TD>
</TR>
<TR>
<TD ROWSPAN=”3”>Ячейка 2</TD>
<TD>Ячейка 3</TD>
</TR>
<TR>
<TD>Ячейка 4</TD>
</TR>
<TR>
<TD>Ячейка 5</TD>
</TR>
</TABLE>
Результат:
| Ячейка 1 | |
| Ячейка 2 | Ячейка 3 |
| Ячейка 4 | |
| Ячейка 5 | |
^
Для вставки графических изображений в HTML-документы используется специальный тег <IMG>, который не требует наличия закрывающего тега.
Параметры тега IMG:
Параметр SRC – параметр, обязательный для указания – задаёт путь (относительный или абсолютный) к рисунку.
Пример:
<IMG SRC=”picture.gif”>
Параметр BORDER предназначен для отображения вокруг рисунка рамки определённой толщины.
Пример:
<IMG SRC=”picture.gif” BORDER=”5”>
Параметры WIDTH и HEIGHT используют для определения размеров графического изображения.
Пример:
<IMG SRC=”picture.gif” BORDER=”1” WIDTH=”200” HEIGHT=”50”>
Параметр ALIGN предназначен для определения типа выравнивания рисунка относительно текста и прочих элементов страницы.
Значения параметра ALIGN:
ALIGN=”LEFT” – текст обтекает рисунок по правому краю.
ALIGN=”RIGHT” – текст обтекает рисунок по левому краю.
ALIGN=”TOP” – верхний край рисунка выравнивается по самому высокому элементу строки.
ALIGN=”TEXTTOP” – верхний край рисунка выравнивается по самому высокому текстовому элементу строки.
ALIGN=”MIDDLE” – выравнивание середины рисунка по базовой линии строки.
ALIGN=”ABSMIDDLE” – выравнивание середины рисунка по середине строки.
ALIGN=”BOTTOM” – выравнивание нижнего края рисунка по базовой линии строки.
ALIGN=”ABSBOTTOM” – выравнивание нижнего края рисунка по нижнему краю строки.
Параметры ^ и VSPACE определяют размер вертикального и горизонтального отступов от встраиваемого изображения до текста.
Пример:
<IMG SRC=”picture.gif” BORDER=”1” ALIGN=”LEFT” HSPACE=”10” VSPACE=”20”>
Параметры ALT и TITLE используют для вывода смысловых подсказок для значимых графических элементов.
Пример:
<IMG SRC=”picture.gif” ALT=”Изображение”>
Занятие 6: Гиперссылки.
Для создания гиперссылки в языке HTML используется тег <A>, обязательным параметром которого является параметр HREF, содержащий адрес ресурса, на который необходимо осуществить переход.
^
<A HREF=”page2.html”>Ссылка на страницу 2</a>
Параметры тега A:
TARGET – определение места назначения перехода:
(TARGET = “_blank” – открывает страницу в новом окне)
^ – именной идентификатор внутренней гиперссылки.
Параметры тега BODY:
BGCOLOR – определение цвета фона документа.
BACKGROUND – указание фонового рисунка
Определение размеров отступов:
^
LEFTMARGIN, RIGHTMARGIN,
MARGINWIDTH, MARGINHEIGHT
LINK, ALINK, VLINK – определение цвета гиперссылок.
Параметр BACKGROUND также применяется в теге-ячейке таблицы <TD>.
^
Свойства форматирования текста в CSS.
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением.
^
При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK>. Данный тег помещается в контейнер <HEAD>:
<link rel="stylesheet" type="text/css" href="mysite.css">
Значения параметров тега <LINK> — rel и type остаются неизменными, как приведено в данном примере. Аргумент href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно.
^
При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте.
<style type="text/css">
<!--
H1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336
}
-->
</style>
Внутренние стили
Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей.
^
font-family устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.
font-size определяет размер шрифта элемента.
font-style определяет начертание шрифта - обычное, курсивное или наклонное.
Аргументы font-style
normal – обычное начертание текста.
italic – курсивное начертание.
oblique – наклонный шрифт.
font-variant определяет, как нужно представлять строчные буквы — делать их все прописными уменьшенного размера или оставить без изменений. Такой способ изменения символов называется капителью.
Аргументы font-variant
Значение normal не изменяет регистр символов, оставляя его по умолчанию. Аргумент small-caps модифицирует все строчные символы как заглавные уменьшенного размера.
font-weight устанавливает насыщенность шрифта.
Аргументы font-weight
Насыщенность шрифта задается с помощью ключевых слов: bold — полужирное, bolder — жирное; lighter — светлое, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900.
text-align определяет горизонтальное выравнивание текста в пределах элемента.
text-decoration добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Аргументы text-decoration
blink – устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте.
line-through – создает перечеркнутый текст.
overline – линия проходит над текстом.
underline – устанавливает подчеркнутый текст.
none – отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
text-transform управляет преобразованием текста элемента в заглавные или прописные символы.
Аргументы text-transform
capitalize – каждое слово в предложении будет начинаться с заглавного символа.
lowercase – все символы текста становятся строчными (нижний регистр).
uppercase – все символы текста становятся прописными (верхний регистр).
letter-spacing определяет интервал между символами в пределах элемента.
line-height устанавливает межстрочный интервал текста
color определяет цвет текста элемента.
background-color устанавливает фоновый цвет элемента.
^
border параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту. Для установки рамки только на определенных сторонах элемента, воспользуйтесь параметрами border-top, border-bottom, border-left, border-right.
Аргументы text-transform
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style:
solid
dashed
dotted
double
groove
ridge
inset
outset
Аргумент color устанавливает цвет рамки.
margin устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.
padding устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
width, height устанавливают ширину и высоту блочных элементов.
float oпределяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение параметра float равно none, элемент выводится на странице как обычно, самое большое — одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Аргументы float
left выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.
right выравнивает элемент по правому краю, а все остальные элементы огибают его по левой стороне.
none – обтекание элемента не задается.
scrollbar-3dlight-color задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок.
scrollbar-arrow-color задает цвет стрелок на кнопках полосы прокрутки.
scrollbar-darkshadow-color задает цвет "тени", отбрасываемой бегунком и кнопками полосы прокрутки (цвет правых и нижних гранией).
scrollbar-face-color задает основной цвет бегунка и кнопок прокрутки полосы прокрутки.
scrollbar-highlight-color задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней).
scrollbar-shadow-color задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней).
scrollbar-track-color задает цвет фона полосы прокрутки, той ее части, по которой перемещается бегунок.
Скачать файл (2633 kb.)