Logo GenDocs.ru

Поиск по сайту:  

Загрузка...

Лабораторные работы - файл Задание №1.doc


Лабораторные работы
скачать (2633 kb.)

Доступные файлы (43):

Документ Microsoft Word.doc30kb.30.10.2008 00:43скачать
Задание №1.doc28kb.30.10.2008 00:20скачать
Задание №2.doc32kb.30.10.2008 00:29скачать
Задание №3.doc27kb.30.10.2008 00:34скачать
Указания к выполнению.doc21kb.30.10.2008 00:38скачать
Задание №1.doc117kb.16.12.2007 10:19скачать
Задание №2.doc25kb.30.09.2008 23:30скачать
Задание №3.doc165kb.30.09.2008 23:22скачать
Указания к выполнению.doc20kb.30.09.2008 23:38скачать
CINEAPK.AVIскачать
my-my.wav
search.aviскачать
Задание №1.doc24kb.07.10.2008 22:49скачать
Задание №2.doc24kb.07.10.2008 23:18скачать
Задание №3.doc22kb.07.10.2008 23:53скачать
20061027-1.jpg125kb.21.10.2008 23:31скачать
26.jpg578kb.21.10.2008 23:46скачать
33905.jpg9kb.21.10.2008 23:34скачать
3594.jpg38kb.21.10.2008 23:26скачать
656573.jpg73kb.21.10.2008 23:28скачать
8337.jpg16kb.21.10.2008 23:18скачать
8ca4034e5501b32b485291fcfc249771.jpg39kb.21.10.2008 23:26скачать
auto2.jpg6kb.21.10.2008 23:40скачать
avto%20copy.jpg108kb.21.10.2008 23:41скачать
default.jpg53kb.21.10.2008 23:36скачать
ecd91b02e944.jpg42kb.21.10.2008 23:37скачать
lancerevo.jpg11kb.21.10.2008 23:40скачать
mid_image1.jpg9kb.21.10.2008 23:44скачать
p1010024resizepi8.jpg102kb.21.10.2008 23:43скачать
Thumbs.db
tn_gallery_2_199_4121.gif11kb.21.10.2008 23:38скачать
VW-Chevrolet01_7.jpg13kb.21.10.2008 23:32скачать
история.doc30kb.21.10.2008 22:56скачать
поздравления.doc36kb.21.10.2008 23:14скачать
Задание 2.doc422kb.21.10.2008 22:03скачать
Задания 1.doc349kb.21.10.2008 22:11скачать
Указания к выполнению.doc20kb.21.10.2008 22:13скачать
diablo_gamer2.gif6kb.22.09.2008 00:25скачать
diablo_gamer2_z.gif6kb.22.09.2008 00:25скачать
Задание №1.doc117kb.16.12.2007 10:19скачать
Задание №2 - Примеры создания таблиц.doc507kb.22.09.2008 00:06скачать
Задание №3 - Примеры добавления иллюстраций.doc42kb.22.09.2008 00:27скачать
Указания к выполнению.doc20kb.22.09.2008 00:31скачать

Задание №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> - разделяет фрагменты текста вертикальным отступом; создаёт принудительный перенос строки после своего закрывающего тега на две позиции.
^ Тег <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> – линия, проводимая между различными текстовыми фрагментами.
^ Параметры тега <HR>
WIDTH – указание длины линии (в процентах от ширины окна браузера или в пикселях);

SIZE – Указание толщины линии в пикселях;

ALIGN – обозначение типа выравнивания линии (значения: LEFT, CENTER, RIGHT);

^ COLOR – выбор цвета линии;

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-документа.
Значения см. выше.
Параметры ^ WIDTH и HEIGHT отвечают соответственно за ширину и высоту таблицы. Значения этих параметров могут указываться либо в пикселях, либо в процентах.
Параметры тегов <TR> и <TD>
Параметр ALIGN предназначен для указания типа выравнивания содержимого ячеек.
Параметр ^ VALIGN предназначен для указания типа выравнивания содержимого ячеек по вертикали.
Значения:

VALIGN =”middle” – выравнивание по середине ячейки (по умолчанию);

VALIGN =”top” – выравнивание по верхнему краю ячейки;

^ VALIGN =”bottom” – выравнивание по нижнему краю ячейки;


Пример:
<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.

^ COLSPAN показывает на сколько ячеек по горизонтали следует расширить ячейку, в теге <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

^ Занятие 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” – выравнивание нижнего края рисунка по нижнему краю строки.


Параметры ^ HSPACE и 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” – открывает страницу в новом окне)

^ NAME – именной идентификатор внутренней гиперссылки.
Параметры тега BODY:
BGCOLOR – определение цвета фона документа.

BACKGROUND – указание фонового рисунка
Определение размеров отступов:

^ TOPMARGIN, BOTTOMMARGIN,

LEFTMARGIN, RIGHTMARGIN,

MARGINWIDTH, MARGINHEIGHT
LINK, ALINK, VLINK – определение цвета гиперссылок.
Параметр BACKGROUND также применяется в теге-ячейке таблицы <TD>.
^ Занятие 7: Введение в CSS.

Свойства форматирования текста в 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, а его атрибуты указываются с помощью языка таблицы стилей.
^ Свойства форматирования текста в CSS.
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 устанавливает фоновый цвет элемента.

^ Занятие 8: Структурное форматирование.
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.)

Поиск по сайту:  

© gendocs.ru
При копировании укажите ссылку.
обратиться к администрации