Управление и оптимизация / Osnovi informatsionnikh i komputernikh tekhnologiy 2011
.pdfНаиболее часто используемые escape – последовательности:
Символ |
Escape последовательность |
< |
< |
> |
> |
& |
& |
Неразрывный пробел |
|
“ |
" |
H1, H2, H3, H4, H5, H6 - заголовки. Теги определяют заголовок. Существует шесть уровней от H1 (заголовок верхнего уровня) до H6 (заголовок нижнего уровня). Заголовок более высокого уровня при форматировании отображается более большим шрифтом, чем заголовок меньшего уровня. Требует закрывающего тега.
FONT - размер и цвет шрифта. Тег позволяет специфицировать размеры шрифта (относительно к другим размерам), его цвет и начертание. Возможные параметры приведены в таблице.
Параметры тега <FONT>
Имя |
Возможные |
Назначение |
Примечания |
|
параметра |
значения |
|
|
|
|
|
Размер шрифта; цифра в |
Число со знаком |
|
SIZE |
Строка |
диапазоне 1 - 7 либо целое со |
добавляется к |
|
знаком, например, "+1" или "-2" |
текущему базовому |
|||
|
|
|||
|
|
|
размеру шрифта |
|
COLOR |
Цветовая |
Цвет содержимого тега FONT |
|
|
спецификация |
|
|
||
ARIAL |
Строка |
Наименование шрифта |
|
В настоящее время практически не используется.
HR - горизонтальная линия. Тег задает горизонтальную линию. Возможные параметры указаны в таблице.
Параметры тега <HR>
Имя |
Возможные значения |
Действие |
|
параметра |
|
|
|
ALIGN |
LEFT, RIGHT, |
Горизонтальное выравнивание черты |
|
CENTER |
|||
|
|
||
NOSHADE |
NOSHADE |
Задает отображение черты в одном цвете (без |
|
оттенков) |
|||
|
|
||
SIZE |
Целое число |
Высота черты в пикселях |
|
WIDTH |
Спецификация |
Ширина черты |
|
ширины |
|||
|
|
71
<DIV></DIV>
Элемент <DIV> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Задать оформление можно либо с помощью атрибутов тега, либо можно выделить стиль во внешнюю таблицу стилей (каскадные таблицы стилей CSS), а для тега добавить параметр class или id с именем селектора.
Атрибуты тега «перекрывают» значения этих же атрибутов, вынесенные во внешнюю таблицу стилей.
Как и при использовании других блочных элементов, содержимое тега <DIV> всегда начинается с новой строки. После него также добавляется перенос строки.
Шаблон для использования элемента DIV: <HEAD>
<STYLE type="text/css">
DIV Имя {Свойство: значение', . . . } </STYLE >
</HEAD > <BODY>
<DIV с1аss="Имя">
Тело документа
</DIV> </ BODY >
Тегом, аналогичным DIV по назначению, является <SPAN></SPAN> Главным отличием является то, что элемент DIV применим к любым элементам, элемент SPAN исключительно к тексту.
Элемент SPAN, наоборот, предназначен для включения в состав других элементов:
<HEAD>
<STYLE type="text/css">
SPAN Имя { Свойство: значение; . . . } </ STYLE >
</ HEAD > <BODY>
Тело документа
<P> <SPAN сlаss="Имя">Текст 1</SPAN > Текст 2 </P> </ BODY >
Рассмотрим некоторые значения тега DIV, которые используются для его форматирования. Для данного элемента можно задавать размеры и его положение на экране. При этом эти элементы могут «наслаиваться» друг на друга.
Position - определяет позицию элемента при выводе его на экран монитора.
72
Значения:
−static – положение определяется текущей разметкой HTML и является значением по умолчанию.
−absolute - положение объекта определяется относительно позиции родительского объекта или относительно объекта body.
−relative - позиция объекта определяется смещением от позиции, в которой он расположен по умолчанию.
Left/top - устанавливает величину отступа элемента относительно левого/верхнего края.
Значения:
−x – число в процентах или пикселях,
−auto - значение по умолчанию.
Величина отступа может быть отрицательной, в этом случае элемент будет выходить за пределы видимой области.
Width/ hidth – ширина и высота блока. Значения задаются либо в пикселях, либо в процентном отношении относительно размеров экрана.
<div style="position: relative; top:350px; left:200px; width:300px;">Любое содержимое блока!!!</div>
margin – величина отступа от данного блока до соседних объектов с четырех сторон.
Значения:
−margin-top - задает величину верхнего отступа объекта,
−margin-left - задает величину левого отступа объекта,
−margin-right - задает величину правого отступа объекта,
−margin-bottom - задает величину нижнего отступа объекта.
<div style="margin-top:30px; margin-left:30px; margin-bottom:30px; margin-right:30px;"> Любое содержимое блока!!!</div>
padding – свойство задает величину пространства, вставляемого между объектом и его границами.
Значения:
−padding-bottom - задает величину пространства, вставляемого между объектом его нижней границей,
−padding-left - задает величину пространства, вставляемого между объектом его левой границей,
−padding-right - задает величину пространства, вставляемого между объектом его правой границей,
−padding-top - задает величину пространства, вставляемого между объектом его верхней границей.
73
<div style="padding-bottom:30px; padding-left:30px; padding-right:30px; padding-top:30px;"> Любое содержимое блока!!!</div>
Пример использования тегов DIV и STYLE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">
<!—Определение типа документа--> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows1251">
<!--Определение типа используемой кодировки --> <title>Тег DIV</title>
<!—Определение стилей для двух блоков (данный раздел можно вынести в отдельный файл с расширением css, что во многом облегчит структуру документа)-->
<style type="text/css">
.block1 { width: 200px;
background: #ccc; padding: 5px; padding-right: 20px; border: solid 1px black; float: left;
}
.block2 { width: 200px;
background: #fc0; padding: 5px;
border: solid 1px black; float: left;
position: relative; top: 40px;
left: -70px;
}
</style>
</head>
<body>
<div class="block1">Текст 1.</div> <div class="block2">Текст 2.</div>
<!—Форматирование двух блоков теста по указанным параметрам-->
</body>
</html>
74
Списки
Информация может быть оформлена в виде списков, которые могут
быть:
−маркированные списки,
−нумерованные списки,
−определения.
Генерируются списки одинаково, только различные браузеры поразному определяют нумерацию элементов.
Структура списка:
<UL> – неупорядоченный список, его элементы не нумеруются <LI> элемент списка
<LI>
</UL>
<OL> – элементы такого списка нумеруются <LI> элемент списка
<LI>
</OL>
<DL> – списки определений <DT> термин
<DD>определение
</DL>
Допускаются вложенные списки.
Параметры тега <UL>
Имя |
Возможные |
Назначение |
|
параметра |
значения |
|
|
TYPE |
DISC, |
Стиль маркера: диск, квадрат |
|
SQUARE, |
|||
|
или окружность соответственно |
||
|
CIRCLE |
||
|
|
||
|
|
|
|
|
|
Сокращенное расстояние между |
|
COMPACT |
COMPACT |
тегами |
|
|
|
|
Работа с изображением
Самыми распространенными графическими форматами в Web являются GIF и JPEG. GIF — наиболее подходящий формат для обмена изображениями между системами, который поддерживается многими графическими приложениями, в том числе все программами просмотра графики World Wide Web. Разрешение, достаточное для его отображения на экране монитора – 72 dpi.
Для кодирования цветов на экране использует цветовую модель RGB (Red, Green, Blue, Красный, зеленый, синий). Цвет любого объекта в HTML кодируется набором из трех пар двузначных шестнадцатеричных чисел,
75
соответствующих этим цветам. Для указания цвета объекта в языке HTML предназначен атрибут color.
IMG – вставка изображения. Тег используется для включения изображения в документ.
Атрибуты тега <IMG>
параметр |
значение |
назначение |
|
||
SRC |
URL |
Адрес изображения |
|
|
|
ALT |
строка |
Текстовое |
|
описание |
|
|
|
изображения |
|
или |
|
|
|
всплывающая подсказка |
|
||
ALIGN |
TOP, BOTTOM,MIDDLE, |
Позиционирование |
|
|
|
|
LEFT, RIGHT |
изображения |
относительно |
||
|
|
текущей текстовой строки |
|||
|
|
соответственно по |
верхней, |
||
|
|
нижней части, центру, |
|||
|
|
левому, правому краю |
|
||
HEIGHT |
целое |
Высота изображения |
|
||
WIDTH |
целое |
Ширина изображения |
|
||
BORDER |
целое |
Ширина бордюра (рамки) в |
|||
пикселях |
|
|
|
||
|
|
|
|
|
|
|
|
Ширина |
незаполненного |
||
|
|
пространства |
|
|
|
HSPACE |
целое |
непосредственно |
слева |
и |
|
|
|
справа от изображения |
в |
||
|
|
пикселях |
|
|
|
|
|
Высота |
незаполненного |
||
VSPACE |
целое |
пространства выше и ниже |
|||
|
|
изображения в пикселях |
|
||
Работа с таблицами
TABLE – тег, который используется для представления табличной информации.
Таблицы являются очень удобным средством форматирования данных на Web-странице. Основное удобство заключается в том, что браузер берет на себя заботу о прорисовке рамки таблицы. Размер рамки может быть автоматически согласован с размером окна просмотра в браузере и, с размером находящихся в ячейках таблицы строк текста и рисунков.
Довольно долго таблицы с невидимой границей использовались для разметки web-страниц – табличная верстка. Однако в настоящее время данный способ верстки уступил место более удобному и динамичному способу верстки с использованием элемента DIV.
При создании таблиц используется принцип вложения: внутри основного элемента таблицы (TABLE) создаются строки (TR). Внутри этих элементов размещаются элементы для описания каждой ячейки в строке (ТD,ТН). Последовательность элементов описывает таблицу сверху вниз и справа налево.
76
Атрибуты тега <TABLE>
Большинство атрибутов могут использоваться и в других элементах таблицы.
Имя |
Значения |
Назначение |
Примечания |
|
параметра |
||||
|
|
|
||
|
LEFT, CENTER, |
Горизонтальное |
|
|
ALIGN |
выравнивание всей |
По умолчанию - LEFT |
||
|
RIGHT |
таблицы |
|
|
|
|
|
||
WIDTH |
спецификация |
Ширина всей таблицы |
|
|
|
ширины |
|
|
|
|
|
Ширина рамки в |
Значение 0 (по |
|
BORDER |
целое |
умолчанию) означает - |
||
пикселях |
||||
|
|
без рамки |
||
|
|
|
||
CELLSPACING |
целое |
Промежуток между |
|
|
ячейками в пикселях |
|
|||
|
|
|
||
|
|
Промежуток между |
|
|
CELLPADDING |
целое |
содержимым ячейки и |
|
|
рамкой вокруг ячейки в |
|
|||
|
|
|
||
|
|
пикселях ("набивка") |
|
Для каждой таблицы может быть определен ее заголовок. <CAPTION> </ CAPTION >
Данный элемент располагается внутри элемента TABLE, однако заголовок выводится на экране вне рамки таблицы. Положением заголовка можно управлять:
−align="top" — заголовок над таблицей;
−align="bottom" — заголовок под таблицей;
−align="left" — заголовок вверху и выровнен влево;
−align=" right " — заголовок вверху и выровнен вправо.
Атрибут align позволяет выравнивать данные в ячейках по горизонтали. Он принимает следующие значения:
−left — выравнивание влево;
−right — выравнивание вправо;
−center — центрирование.
Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть такие:
−top — выравнивание по верхнему краю ячейки;
−bottom — выравнивание по нижнему краю ячейки (не всегда работает);
−center — выравнивание по центру;
−baseline — выравнивание по первой строке.
TR - табличная строка. Тег используется для представления строки таблицы. Элемент, создающий строку таблицы. Он не имеет конечного тега. Строка заканчивается там, где начинается следующая, то есть следующий
77
элемент TR. Внутри элемента располагаются элементы ТН и TD, определяющие одиночные ячейки.
Этот тег имеет следующие атрибуты.
align – определяет горизонтальное выравнивание в таблице, возможные значения:
−LEFT (по левому краю),
−CENTER (по центру),
−RIGHT (по правому краю).
VALIGN – определяет вертикальное выравнивание в таблице, возможные значения:
−TOP (по верхнему краю),
−MIDDLE (по середине),
−BOTTOM (по нижнему краю),
−BASELINE (по нижнему краю текста).
TD - ячейка таблицы. Тег используется для представления ячейки в таблице.
Параметры тега ячейки таблицы <TD>
Имя |
Возможные |
Назначение |
Примечания |
|
параметра |
значения |
|||
|
Эквивалентно использованию |
|||
|
|
|
||
NOWRAP |
NOWRAP |
Подавляет перенос |
непрерывных пробелов ( ) |
|
слов |
вместо обычных пробелов в пределах |
|||
|
|
|||
|
|
|
содержимого ячейки |
|
|
|
Число строк, |
|
|
ROWSPAN |
целое |
перекрываемых |
По умолчанию 1 |
|
|
|
ячейкой |
|
|
|
|
Число столбцов, |
|
|
COLSPAN |
целое |
перекрываемых |
По умолчанию 1 |
|
|
|
ячейкой |
|
|
|
LEFT, CENTER, |
Горизонтальное |
По умолчанию LEFT или параметр |
|
ALIGN |
RIGHT |
выравнивание данных |
ALIGN во включающем теге TR |
|
|
|
в ячейке |
|
|
|
TOP, MIDDLE, |
Вертикальное |
Перекрывается параметром VALIGN |
|
VALIGN |
BOTTOM, |
выравнивание данных |
||
во включающем теге TR |
||||
|
BASELINE |
в ячейке |
браузер использует это значение, если |
|
|
|
|
||
WIDTH |
целое |
ширина ячейки в |
оно не конфликтует с требованиями |
|
пикселях |
ширины в соседних ячейках в том же |
|||
|
|
|||
|
|
|
самом столбце |
|
|
|
|
браузер использует это значение, если |
|
HEIGHT |
целое |
высота ячейки в |
оно не конфликтует с требованиями |
|
пикселях |
высоты для других ячеек в той же |
|||
|
|
|||
|
|
|
самой строке |
<TH> Элемент ячейки, которая является заголовком столбца или строки таблицы. Этот элемент должен располагаться внутри элемента TR. Ячейка заголовок отличается от обычной тем, что браузер выводит текст внутри нее выделенным (как правило, полужирным) шрифтом.
78
Гиперссылки
A - закладки, гиперссылки. Тег используется для того, чтобы установить гиперссылки и "закладки" для них. При этом определяется, какое слово (или другая конструкция в документе) обеспечивает связь с ресурсом, или указывается, что текущее место документа может использоваться с данным именем в качестве ссылки - закладка.
Общий вид записи этого тега: <A HREF="цель">текст ссылки</A>. При отображении объект, являющиеся гиперссылками выделяются цветом, подчеркиванием, подсветкой или еще каким-либо способом.
Параметры тега <A>
Имя |
Возможные |
Назначение |
|
параметра |
значения |
||
|
|||
NAME |
строка |
имя закладки |
|
символов |
|||
|
URL |
сетевой адрес для |
|
HREF |
(универсальный |
||
|
адрес ресурса) |
связанного ресурса |
|
TITLE |
строка |
заголовок для |
|
связанного ресурса |
|||
|
|
Примечания
должно быть уникальным в пределах документа
должен соответствовать другому HTML документу, PDF файлу, изображению и т.д.
необязательно
Лабораторная работа «Создание Web сайта»
Цели работы:
1.познакомиться с основными принципами создания сайта и основными тегами,
2.научиться создавать web-страницы, содержащие различные типы
данных,
3.создать простой сайт,
4.развитие профессиональной компетенции на основе синтеза полученных знаний, умения реализовать их на практике с применением соответствующих информационных технологий,
5.формирование информационной компетенции путем реализации современных информационных сетевых технологий и среды, позволяющих создавать порталы соответствующие стандартам нового поколения сайтов
Web 2.0.
Технические средства: ПЭВМ с установленной операционной системой
Windows.
Программные средства: браузер, текстовый редактор.
Теоретические сведения.
При создании сайта необходимо продумать его концепцию и стилевое оформление. Кроме этого необходимо помнить, что важна еще и информационная составляющая. Создание сайта следует начать с построения
79
основной идеи, которую необходимо разбить на несколько тематических разделов, под каждый из которых будет отведен свой раздел (своя страница). Благодаря такому оформлению информация становится структурированной и более конкретизированной, а значит ею проще пользоваться, и она больше востребована.
При создании можно воспользоваться каким–либо уже готовым дизайнерским шаблоном, которых имеется достаточно большое количество.
Приступая к разработке необходимо придерживаться нескольких правил.
−Сайт должен быть информативным.
−Контент сайта - это информационное содержание на страницах сайта. Все материалы сайта - статьи (текст), ответы на вопросы, документация, изображения, данные и т.п.
−Дизайн сайта. Это первое с чего начинают оценку сайта, а уже потом приступают к изучению содержимого. Здесь необходимо учитывать эстетическую ценность, креатив, правильность и совместимость цветового баланса, правильное ассоциативное восприятие графического наполнения.
−Структура и удобство навигации. Посетители сайта не должны испытывать трудности с поиском необходимой им информации.
−Грамматика и стиль в тексте.
−Авторские права. Необходимо помнить, что необходимо согласовывать с авторами своё желание разместить у себя на
сайте понравившийся материал.
Рассмотрим этапы планирования web-сайта. Данному вопросу посвящена отдельная дисциплина Информационная архитектура, которая рассматривает целевую аудиторию, определяет какая информация и услуги им требуются, как необходимо структурировать сайт. Необходимо рассмотреть всю информацию, которая будет находится на сайте и разбить ее на отдельные части, а так же продумать как эти части будут связаны друг с другом. Можно выделить следующие шаги планирование сайта:
−знакомство с изучаемым материалом,
−создание схемы,
−именование страниц,
−добавление деталей.
Практическая часть.
Создадим сайт, содержащий информацию о нагрудных знаках, эмблемах и переходящих вымпелах МЧС России.
Создаваемый сайт будет оформлен в соответствующей цветовой гамме и будет содержать 4 страницы: главную, содержащую оглавление и три и информацией. Для верстки будем использовать блочную верстку.
80