- •Лабораторная работа №4 Создание сайта с помощью языка html
- •1 Общие положения
- •1.1 Основные понятия языка html
- •1.2 Структура документов html
- •1.3 Создание html-документов
- •1.3.1 Основные приемы работы
- •1.3.2 Теги разбивки текста
- •1.3.3 Создание гиперссылок
- •1.3.4 Создание фреймов
- •1.3.5 Создание таблиц
- •2 Порядок выполнения работы
- •3 Вопросы для самоконтроля знаний
- •Оформление документов html
- •1 Общие сведения
- •1.1 Цветовое оформление
- •1.2 Параметры шрифтов
- •1.3 Вставка графических изображений
- •2 Порядок выполнения работы
- •3 Вопросы для самоконтроля знаний
- •Приложение а Образец текста по теме «Документальные и фактографические информационные системы» Введение
- •Раздел 1 Документальные системы
- •Раздел 2 Фактографические системы
- •Приложение б Варианты заданий для самостоятельного выполнения по теме «Проектирование документов html»
- •Приложение в Основные теги языка html
Приложение в Основные теги языка html
Структура HTML-документов
<html> </html>
задает границы HTML - программы.
<head> </head>
задает заголовок HTML - программы. Необязательный элемент программы.
Теги заголовка HTML - программы:
<title> </title> название WEB - страницы (не более 64 символов). Обязательный элемент заголовка. Обычно показывается в заголовке окна броузера.
<script> </script> описание скрипта в заголовке. Атрибут:
language="" - определяет тип скрипта. Значения: JavaScript - Ява-скрипт.
<meta>
информация для броузера, отображающего WEB - страницу. Атрибуты:
name="Keywords" content="список ключевых слов" - список для поиска по ключу данного документа поисковыми системами.
name="Description" content="краткое описание" - аннотация - список для индексации документа поисковыми системами, примерно, 200 - 300 символов.
<body> </body>
определяет текст (тело) WEB - документа. Атрибуты:
bgcolor="" - цвет фона документа,
background="" - URL - адрес файла фонового рисунка. Окно полностью заполняется изображением, начиная с верхнего левого угла;
text="" - цвет текста,
alink="" - цвет активной ссылки,
link="" - цвет не просмотренной ссылки,
vlink="" - цвет просмотренной ссылки,
topmargin="" - граница верхнего поля,
leftmargin="" - граница левого поля,
bgproperties=fixed - фоновое изображение не прокручивается вместе с текстом
<!>
комментарий, используемый при отладке программы и не отображаемый на экране, например <! Далее выбор фонового рисунка>.
Фреймы
<frameset> </frameset>
используется для создания кадров (фреймов). HTML - программа, имеющая структуру кадров, не должна содержать контейнеры <body> и наоборот. Если в программе есть контейнеры обоих видов, то броузер будет отображать только контейнеры <body>. Атрибуты описывают сетку кадров:
rows="," - список значений высоты строк сверху вниз,
cols="," - список значений ширины столбцов слева направо.
Значения могут быть выражены и в пикселях, и в % от размера окна, а также делить пространство в ( * ) долях между собой. Например:
cols="100 , 25% , * , 3* , 2* ". Здесь 1-ый кадр будет шириной в 100 пикселов, 2-ой - шириной в 25% от ширины окна. Оставшееся пространство делится между 3-я кадрами в пропорциях 1/6, 3/6, 2/6. Число заданных кадров равно произведению строк и столбцов. В данном примере - 5 кадров;
frameborder=""
задает тип рамок между кадрами контейнера. Значения:
no - рамки не видимы - имеют цвет фона окна броузера,
yes - рамки имеют цвет;
bordercolor=""
задает цвет рамок между кадрами. По умолчанию - совпадает с цветом рамки окна;
border=""
устанавливает ширину рамок между кадрами контейнера. Если значение отсутствует, то кадры отделяются друг от друга тонкими линиями заданного цвета;
framespacing=""
расстояние между кадрами. Этот атрибут реализован только в броузере Internet Explorer 4.
Теги контейнера фрейма
<frame >
описывает отдельный фрейм (кадр). Число таких тегов должно быть равно числу зарезервированных кадров в контейнере (за минусом вложенных контейнеров). Располагаются кадры последовательно слева направо и сверху вниз. Атрибуты:
src=""
URL - адрес содержимого кадра. Обычно это файл HTML - программы из того же каталога (папки), что и сам контейнер. Если этот атрибут не задан, кадр будет пустым;
marginwidth=""
marginheight=""
ширина от границы кадра до рамки по вертикали и горизонтали, соответственно;
scrolling=""
определяет полосы прокрутки. По умолчанию полосы прокрутки добавляются в кадр, если содержимое кадра больше его размеров. Значения:
yes - полосы прокрутки будут обязательно,
no - полосы прокрутки запрещены,
auto - полосы прокрутки добавляются по умолчанию;
noresize
запрещает пользователям менять размеры кадра. По умолчанию, если захватить рамку кадра мышью, появляется двунаправленная стрелка, которой можно переместить рамку;
frameborder=""
задает тип рамки кадра. Значения:
yes - рамка имеет 3-х мерную форму,
no - рамка плоская;
bordercolor=""
задает цвет рамки кадра;
name=""
имя кадра, которым метят кадр. Имя показывает, в какой кадр делать загрузку при ссылке.
<noframes> </noframes>
контейнер HTML - текста для броузеров, которые не поддерживают аппарат кадров. Броузеры, поддерживающие кадры, игнорируют этот контейнер.
Теги разбивки текста
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
задают заголовки стилей 1, 2, 3, 4, 5, 6. В стиле 1 - самый крупный шрифт броузера, а в стиле 6 - самый мелкий шрифт. Атрибуты:
align="" - задает положение заголовка на строке. Значения:
left - выровнять заголовок по левому краю,
center - выровнять заголовок по центру,
right - выровнять заголовок по правому краю.
<p> </p>
выделение абзаца. Между абзацами броузер даст пустую строку. Атрибут:
align="" - задает положение текста абзаца на строке. Значения:
left - выровнять текст по левому краю,
center - выровнять текст по центру,
right - выровнять текст по правому краю.
Тега контейнера абзаца:
<br>
продолжение текста в контейнере с новой строки без пропуска строки. Два оператора подряд дают пропуск строки.
<nobr> </nobr>
текст в контейнере не разбивать на строки.
<hr>
задает горизонтальную линию. Атрибуты:
width="" - длина линии или в пикселах, или в % от ширины окна,
size="" - ширина линии,
color="" - цвет линии,
noshade - отменяет рельефность линии,
align="" - положение линии на строке экрана. Значения:
left - прижать линию к левому краю,
center - расположить линию по центру,
right - прижать линию к правому краю.
Теги логического форматирования текста
<strong> </strong>
выделяет «важный» фрагмент. Обычно броузер выделяет его полужирным шрифтом.
<em> </em>
выделить текст. Обычно выделяется шрифтом со сдвигом или курсивом.
<dfn> </dfn>
выделить определение. Обычно выделяется курсивом.
<var> </var>
выделить переменные. Обычно отображается шрифтом фиксированной ширины.
<cite> </cite>
выделить цитату. Обычно выделяется курсивом.
Теги физического форматирования текста
<b> </b>
выделить текст полужирным шрифтом.
<i> </i>
выделить текст курсивом.
<u> </u>
текст подчеркнуть.
<big> </big>
вывести текст шрифтом большего размера.
<small> </small>
вывести текст шрифтом меньшего размера.
<sub> </sub>
вывести текст, если возможно, шрифтом меньшего размера и сдвинуть ниже уровня строки.
<sup> </sup>
вывести текст, если возможно, шрифтом меньшего размера и сдвинуть выше уровня строки.
<center> </center>
вывести текст по центру
Описание шрифтов
<font> </font>
описывает шрифт текста, помещенного в контейнер. Контейнер описания шрифта может быть помещен в любой другой контейнер. Атрибуты:
face="","" ...
задает имя шрифта или несколько возможных шрифтов. Броузер берет последующий шрифт, если у него нет предыдущего;
size=""
задает размер шрифта: 1, 2, 3, 4, 5, 6, 7. Базовый размер шрифта - 3. Шрифты могут быть заданы относительно базового +1, -1, +2, -2, и т.д.;
color="" - задает цвет шрифта;
style="" - описание стиля.
Вставка изображения в документ
<img>
вставляет изображение на WEB-страницу. Атрибуты:
src=""
URL-адрес файла-изображения с расширением .gif, .jpeg (.jpg), .bmp, .xbm, или .png (два последних формата использовать не желательно);
alt=""
текст. Описание изображения выводится на место изображения до ввода изображения, а также появляется, как всплывающая подсказка, если задержать курсор мыши на изображении. Наличие этого атрибута помогает броузеру быстрее загружать страницу;
height=""
width=""
задают высоту и ширину изображения, соответственно
Если загружаемое изображение больше указанных размеров, то оно уменьшается "втискиванием", а если меньше - растягивается. Можно не задавать размеры изображения, но наличие этого атрибута помогает броузеру быстрее загружать страницу;
border=""
задает ширину рамки вокруг изображения;
vspace=""
hspace=""
задают расстояние по вертикали и по горизонтали от изображения до кромки текста, соответственно;
align=""
задает положение текста относительно изображения. Значения:
top - выровнять по верху строку, следующую за изображением,
middle - выровнять по середине строку, следующую за изображением,
bottom - выровнять по низу строку, следующую за изображением,
left - текст должен обтекать изображение, прижатое к левой стороне окна,
right - текст должен обтекать изображение, прижатое к правой стороне окна.
Гиперссылки
<a> </a>
задает контейнер для описания указателя ссылки. На указателе нужно щелкнуть мышью, чтобы сделать переход по ссылке. Атрибуты:
title=""
задает текст, всплывающий, если задержать курсор мыши на указателе,
style="" - описание стиля.
<a name="" > </a>
метка (закладка) внутри текущей HTML - программы. Этим оператором метят место, куда предполагается делать переходы. Текст контейнера в этом случае выводится на WEB - странице в место закладки. Обязательный атрибут:
name="" - задает имя метки из символов латинского алфавита.
<a href="" > </a>
ссылка. Атрибуты:
href=""
задает URL - адрес. Адрес может быть относительный:
. . . # . . . - имя файла в пределах данного компьютера плюс имя метки в пределах данного файла;
или абсолютный адрес, задающий компьютер, каталог, файл. Абсолютный адрес может давать переход на любой компьютер сети Интернет:
target=""
задает имя кадра (фрейма), в который делается загрузка по ссылке - заменяется содержимое кадра. Можно указывать имя целого экрана. Если этого атрибута нет, то файл будет выведен в том же окне, где указана ссылка. Зарезервированные (служебные) имена кадров:
_blank - загрузить файл в новое окно без названия;
_self - загрузить файл в кадр, откуда делается вызов. Перед новой загрузкой выполняется очистка;
_parent - загрузить файл в старший (родительский) кадр. Заменяет всю сетку кадра. Если старшего кадра нет, то в кадр вызова;
_top - загрузить файл в полное окно. Разрушает всю структуру кадров.
HTML-таблицы
<table> </table>
создает контейнер таблицы. Атрибуты контейнера "Таблица":
width=""
height=""
ширина и высота таблицы в пикселах или в % от ширины и высоты окна, соответственно;
border=""
ширина рамки. Если значение - ноль, то рамка не требуется;
cellpadding=""
cellspacing=""
добавляют свободное пространство между данными ячейки и ее границами, и между ячейками таблицы, соответственно. Если рамка отсутствует, то отступ от границы будет равен сумме этих значений;
align=""
задает положение данных в ячейках таблицы по горизонтали. Значения:
left - данные прижать к левому краю ячеек,
center - данные расположить по центру ячеек,
right - данные прижать к правому краю ячеек.
Теги контейнера "Таблица":
<caption>
заголовок таблицы. Атрибут:
align=""
задает место заголовка. Значения:
top - заголовок над таблицей,
bottom - заголовок под таблицей.
<tr> </tr>
контейнер строки таблицы. Если контейнер пуст - строка пустая. Заданные атрибуты строки подавляют атрибуты таблицы. Атрибуты строки:
bgcolor=""
задает цвет фона ячеек строки;
bordercolor=""
задает цвет рамки к ячейкам строки;
valign=""
задает положение данных в ячейке по вертикали. Значения:
baseline - данные располагать в ячейках по базовой линии строки,
bottom - данные прижимать к нижнему краю ячеек строки,
middle - данные располагать по центру ячеек в строке,
top - данные прижимать к верхнему краю ячеек строки.
<th> </th>
контейнер ячейки "Заголовок": заголовок столбца или строки. По умолчанию текст в этой ячейке показывается жирным шрифтом по центру. Атрибуты:
align=""
задает положение данных в ячейке "Заголовок" по горизонтали. Значения:
left - заголовок прижать к левому краю ячейки,
center - заголовок расположить по центру ячейки,
right - заголовок прижать к правому краю ячейки;
valign=""
задает положение данных в ячейке "Заголовок" по вертикали. Значения:
bottom - заголовок прижать к нижнему краю ячейки,
middle - заголовок расположить по центру ячейки,
top - заголовок прижать к верхнему краю ячейки;
colspan=""
задает число ячеек, объединяемых в одну на строке;
rowspan=""
задает число ячеек, объединяемых в одну в столбце.
<td> </td>
контейнер ячейки таблицы. Если контейнер пуст или содержит значение - ячейка пустая. Заданные атрибуты ячейки подавляют атрибуты строки и таблицы. Атрибуты ячейки:
width=""
height=""
ширина и высота ячейки в пикселах или в % от ширины и высоты окна, соответственно;
align=""
задает положение данных в ячейке по горизонтали. Значения:
left - данные прижать к левому краю ячейки,
center - данные располагать по центру ячейки,
right- данные прижать к правому краю ячейки;
valign=""
задает положение данных в ячейке по вертикали. Значения:
baseline - данные расположить в ячейке по базовой линии,
bottom - данные прижать к нижнему краю ячейки,
middle - данные расположить по центру ячейки,
top - данные прижать к верхнему краю ячейки;
bgcolor=""
задает цвет фона ячейки;
bordercolor=""
задает цвет рамки к ячейке;
colspan=""
задает число ячеек, объединяемых в одну на строке;
rowspan=""
задает число ячеек, объединяемых в одну в столбце;
nowrap
отмена переноса слов на другую строку внутри ячейки.
Задание бегущей строки
<marquee> </marquee>
задает контейнер изображения для анимации. Атрибуты:
width=""
height=""
ширина и высота бегущей строки в пикселах или в % от ширины и высоты окна, соответственно;
align=""
задает положение изображения относительно бегущей строки по вертикали. Значения:
top - изображение выровнять по верхнему краю строки,
middle - изображение расположить по середине строки,
bottom - изображение выровнять по нижнему краю строки;
bgcolor="" - цвет бегущей строки;
behavior="" - задает тип движения. Значения:
scroll - прокрутить,
slide - слайды,
alternate - поочередно менять направление (качание);
direction=""
задает направление движения. Значения:
left - изображение движется влево по строке,
right - изображение движется вправо по строке;
scrollamount=""
scrolldelay=""
задают скорость перемещения: число пикселов, на которое должно переместиться изображение за заданное число миллисекунд;
loop=""
задает число повторов анимации. По умолчанию повторять непрерывно.
HTML-списки
Теги, общие для нумерованных и маркированных списков:
<lh> - заголовок списка,
<li> - начало пункта списка.
<ol> </ol>
нумерованный список. Атрибуты:
start=""
устанавливает начальный номер в текущем списке,
type=""
устанавливает тип номера. Значения:
A - в виде прописных букв,
a - в виде строчных букв,
I - в виде больших римских цифр,
i - в виде маленьких римских цифр,
1 - в виде арабских цифр.
<ul> </ul>
маркированный список. Атрибут:
type=""
устанавливает тип маркера disc, square, circle. Вид маркеров зависит от конкретного броузера.
Формы
<form> </form>
создает элемент формы. Внутри элемента формы располагаются поля формы, создаваемые тегами:
<select> </select>
создает обычные и раскрывающиеся списки. Для обработки отдельных элементов списка используется тег <option>;
<textarea> </textarea>
определяет текстовые области;
<input>
создает различные элементы управления, в том числе текстовые поля и командные кнопки.
Примеры создания полей формы:
<select name="NAME"></select> Создает раскрывающийся список, например:
<select name=”list”> <option> Первый <option> Второй </select>
<select multiple name="NAME" size="?"></select> Создает раскрывающийся список, содержащий полосу прокрутки. Size устанавливает количество пунктов списка, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
<textarea name="NAME" cols=” ” rows=” ”></textarea> Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
<input type="checkbox" name="NAME"> Создает checkbox - флажок.
<input type="radio" name="NAME" value="x"> Создает radio-кнопку переключатель.
<input type=text name=" " size=” ”> Создает строку для ввода текста. Параметром Size указывается длина строки в символах.
<input type="submit" value="NAME"> Создает кнопку "Отправить"
<input type="image" border="0" name="NAME" src="name.gif"> Создает кнопку "Отправить" с добавлением изображения name.gif на кнопку.
<input type="reset"> Создает кнопку "Очистить".