Стили табулирования текста

1) letter–spacing (интервал между буквами)

- normal (по умолчанию) (обычно 0)

- число в единицах измерения (см, мм, in, px и т.д.) указанное значение прибавляется к установленному по умолчанию, соответственно увеличивается интервал между словами

2) line-height – высота текущей строки

- normal

- число в единицах измерения

- число рассматриваемое как коэффициент на который следует умножить размер шрифта соответствующего элемента ( 1 )

- число в процентах от текущего (100 )

3) text-align – выравнивание текста, относительно содержащего элемента (контейнера)

- left – по левому краю

- right – по правому краю

- center – по центру

- justify – по ширине

4) text-decoration – сочетание текста с горизонтальной линией

- none – нет

- overline – над текстом

- underline – подчеркивание

- line-through – зачеркивание

5) text-indent – отступ задается в единицах измерения (по умолчанию 0)

6) text-transform – преобразование текста

- capitalize – делает заглавной первую букву каждого слова

- uppercase – делает все буквы прописными (заглавными)

- lowercase – строчные

- none – снимает все унаследованные установки (по умолчанию)

7) vertical-align – выравнивание по вертикали

- baseline – устанавливает выравнивание по базовой линии родительского элемента

- middle – устанавливает вертикальную среднюю линию на уровне базовой линии родительского элемента + середина ширины последнего (по середине родительского элемента) (по умолчанию)

- super – элемент отображается в виде верхнего индекса

- sub – элемент отображается в виде нижнего индекса

- text-top – выравнивает элемент по верху текста из родительского элемента

- text-bottom –выравнивает элемент по низу текста из родительского элемента

- top – выравнивание элемента по верху самого высокого элемента текущей строки

- bottom – по низу самого низкого элемента

Расположение элемента

Каждый видимый элемент HTML занимает прямоугольную область. Содержание окружено рамкой (границей), между рамкой и содержанием пространство называется отступом. Граница окружена областью называемой поле. Так получаем четыре вложенных прямоугольника, по умолчанию отступы, границы, поля равны 0. С их помощью регулируется расстояние, отделяющее элементы друг от друга.

Размер элемента определяется параметрами высоты и ширины:

1. weight – ширина

- число в единицах измерения % по отношению к ширине или высоте страницы; полезно, т.к. при изменении размеров страницы изменяется элемент

- auto – выбирается автоматически (по умолчанию)

2. height – высота

- число в единицах измерения % по отношению к ширине или высоте: полезно, т.к. при изменении размеров страницы изменяется элемент

- auto – выбирается автоматически (по умолчанию)

Размер поля определяется четырьмя параметрами:

1. margin-top – верхнее поле

- число в единицах

- auto

2. margin-bottom

3. margin-left

4. margin-right

5. margin – все поля сразу; значения перечисляются через пробел (порядок: верхнее, правое, левое, нижнее). Если указано одно число – все поля устанавливаются равными этому числу. Два числа – первое это верх и низ, второе – левое и правое; три числа – первое верх и низ, второе – правое, третье – левое.

Размеры отступа задают аналогичные параметры:

1. padding-top

2. padding-bottom

3. padding-left

4. padding-right

5. padding

Параметрами границы являются ее толщина, стиль линии и цвет.

Толщина:

1. border-top- width

2. border-right-width

3. border-left-width

4. border-bottom-width

5. border-width (аналогично полю перечисляются все 4 параметра). Значение – число в единицах (кроме процентов) или ключевые слова:

-thin-тонкий

-medium (по умолчанию)

-thick-толстый.

Стиль (вид) линии границы:

1. border-top-style

2. border-right-style

3. border-left-style

4. border-bottom-style

5. border-style

- none (нет) по умолчанию, даже если указана толщина

- solid – сплошная линия

- double – двойная линия

- grove – желобок

- ridge – выпуклый валик

- inset – весь элемент выглядит вдавленным

- outset – весь элемент выглядит выпуклым

- dashed – пунктирная линия квадратами

- dotted – пунктирная линия точками

Цвет границы задается параметрами:

1. border-top-color

2. border-right-color

3. border-left-color

4. border-bottom-color

5. border-color

Значения могут быть заданы любым способом задания цвета. Так же можно указать url–адрес изображения (будет повторяться)

Ссылки

HTML дает возможность связывать один Web-ресурс с другим, легко переходить с одного документа к другому. Эта возможность реализована через ссылки.

Ссылка(гиперссылка) – связь между элементом Web-страницы (текстом, рисунком и др.) и другим Web-ресурсом.

Ссылка имеет 2 конца, называемых источниками (anchois), и направление, т.е. в ссылке указывается какой источник является исходным (начало), а какой целевым (конец). Ссылка может быть внешней (если целевой источник – внешний файл) или внутренней (если целевой источник внутри документа, тогда концы ссылки называют якорями).

Элемент а (<a> , конечный тег </a> обязателен). Содержимое элемента А называется указателем ссылки, это может быть текст или рисунок.

URL (uniform resource locator) – универсальный указатель информационного ресурса, входит в термин более высокого уровня абстракции URI (uniform resource identifier) – универсальный идентификатор ресурса. Указатель ресурса может быть абсолютным или относительным. Абсолютный указатель содержит схему механизма доступа к ресурсу (протокол), имя машины на который расположен ресурс (в сети WWW), имя ресурса в виде пути(перечисляются папки в которые вложен файл). Если целевой файл-источник находится в той же папке, что и исходный документ-источник, то в качестве url-адреса достаточно указать имя файла. Если целевой файл-источник находится в предыдущей папке, то перед именем файла указывается комбинация символов ‘../’. Эти символы можно использовать несколько раз, чтобы подняться на соответствующий уровень вложенности. Такие указатели называются относительными.

Если в документе есть ссылка на другую веб-страничку, то по умолчанию загружается файл с именем index.html.

Целевой файл-источник открывается браузером, если поддерживается формат этого файла. Возможные действия браузера при нажатии на ссылку:

• браузер открывает файл сам;

• вызывает программу открывающую файл;

• предлагает выбрать действия с файлом (стандартное окно).

Атрибуты элемента <а>:

href – основной атрибут. href =”адрес ссылки”, адрес целевого источника может быть:

- веб-ресурс: href=”http://www.abc.ru”

<a href=”http://www.adobe.com/”> графический редактор </a> adobe Photoshop

- файл (относительный или абсолютный адрес): href=”chapter.html”, href=”pic.jpg”

- адрес эл.почты (браузер запускает программу электронной почты для создания нового письма по указанному адресу) href=”mailto: myadress@mail.ru”

- закладка (ссылка на элемент документа), целевой источник может быть задан с помощью элемента А и его атрибута name или любого другого элемента и его атрибута id: href=”#abc”

Пример:

<a href=”#chapter1> Глава 1 </a>

<h1><a name=”#chapter1> Глава 1 </a></h1>

или

<h1 id=”#chapter1> Глава 1 </h1>

- одновременно ресурс и закладка: href =”http://abc.com/animals.html# bbear”

Атрибут name – имя

Атрибут hreflang – язык целевого источника (только если указан href)

Атрибут rel – отношение текущего документа к целевому

- alternate – альтернативная версия документа (на другом языке)

- start –первый документ

- next – следующий

- prev – предыдущий

- contents – документ служит содержанием

- index – указатели

- glossary – список терминов

- chapter – документ является главой

- section – раздел

- appendix – приложение

- help – справка

Атрибут rev – отношение исходного ресурса к текущему

Атрибут title – текстовая строка всплывающей подсказки, появляется при наведении курсора на указатель ссылки

Атрибут target – задает окно, в котором должен открываться документ

- blank – новое окно

- self – текущее окно

- parent – родительский фрейм

- top – полное окно, перекрывает остальные

Значения parent и top эквивалентны self если нет родительского фрейма или фреймы не используются.

По умолчанию элемент «а» имеет следующие свойства: текст ссылки подчеркивается и выделяется голубым цветом, при наведении внешний вид курсора меняется. Если ссылку использовали, то ее цвет меняется на малиновый. CSS позволяет меня свойства элемента «а»: цвет, фон, отступы, шрифт и т.д.

Пример:

а: link{color: blue; background:url(p1.gif) no-repeat center center} – неиспользованная ссылка

a: visited {color: green} – использованная ссылка

а: active {color: red} – активная ссылка (при нажатии)

a: hover {color: yellow} – ссылка на которой находиться указатель мыши

Чтобы ссылка не подчеркивалась, следует указать свойство text-decoration: none

Указатели ссылки могут быть рисунками – графическая ссылка.

Пример:

<a href=”адрес ссылки”> <img src=”адрес графического изображения”> </a>

Для добавления рисунка в тест html-странички используют элемент <img> (конечный тег запрещен). Его атрибуты:

src – адрес файла с рисунком (абсолютный или относительный), должен присутствовать обязательно;

alt – альтернативный текст, выводимый, если нельзя вывести изображение;

width – ширина в рх или %;

height – длина, рекомендуется обязательно указывать ширину и длину рисунка, т.к. зная расположение и границы рисунка, браузер отобразит текст быстрее;

align – выравнивание, значения:

bottom – выравнивание нижней границы изображения по базовой линии текущей строки

middle – по центру объекта

top – выравнивание относительно верхней линии текстовой строки

left – рисунок располагается слева, текст обтекает его справа

right – рисунок справа

usemap – связывает рисунок с клиентской навигационной картой

ismap – связывает рисунок с серверной навигационной картой

Указатель ссылки может включать и рисунок, и текст. Вложенность ссылок не допустима. Ссылка может быть одновременно и исходным источником и целевым источником, для этого необходимо указать значения и для атрибута href, и для атрибута name. Вместо name в элементе «а» можно использовать атрибут id. Значения id и name не могут пересекаться так как они входят в одно и тоже пространство имен.

Таблицы

Таблица состоит из:

• Заголовок (вне и внутри)

• Ячейки, организованные в строки и столбцы, группы

• Заголовок столбца

• Нижняя часть таблицы включает подпись, различные примечания

Формирование и описание таблицы в HTML происходит по строкам сверху вниз, а в строке ячейки по порядку слева направо.

1	2	3
4		5
6	7

В приведенной таблице ячейки 2 и5 получены объединением нескольких.

Контейнерный элемент TABLE <table> </table> Элементы TABLE могут быть вложены. Используется для структурирования содержания страницы. Но следует помнить, что использование таблиц затрудняет отображение страницы для невизуальных агентов.

Атрибуты:

width – ширина (в единицах и в %) по умолчанию определенный браузер.

border – ширина в пикселях рамки вокруг таблицы (по умолчанию 0-нет) Если значение атрибута указано, то каждая ячейка будет иметь свою рамку, толщиной в 1px (не измен.).

frame – указывает какие стороны рамки видны, значения:

void - нет (по умолчанию)

above – верх

below - низ

hsides – верх и низ

vesicles – влево и право

lhs - левая

rhs - правая

box - все

border – все

rules – указывает какие линии отображены между ячейками

none - нет (по умолчанию)

all – все

rows – между строками

cols – между столбцами

groups – между группами, выделенными с помощью различных тегов THEAD, TFOOT, TBODY, COLAROUP, COL.

Cellspacing – определяет пространство между ячейками таблицы и краями таблиц и ячеек.

Cellpadding – определяет пространство между содержанием ячейки и ее границей.

summary – краткая информация о таблице (для невизуальных средств генерации таблиц)

Заголовок таблицы – элемент CAPTION (расположен сверху вне таблицы): <caption> </caption> обязателен закрывающий тег. Располагается только после начального тега <table>. Одна таблица может содержать только один элемент CAPTION.

Ячейка таблицы описывается тегом <td> </td> (закрывающий тег необязателен, если его нет, то с открытием новой ячейки считается предыдущая закрыта). Атрибуты элемента td:

align и valign – горизонтальное и вертикальное выравнивание текста в ячейке.

width и height – ширина и высота ячейки в пикселях

rowspan – объединение ячеек по вертикали, значение – число строк, охватываемых ячейкой (по умолчанию 1).Если указан 0, то объединяются все ячейки от текущей до конца табл.

colspan – объединение ячеек по горизонтали, значение – число столбцов охватываемых ячейкой.

nowrap – содержимое ячейки должно быть показано в одну строку.

Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если рамка нужна, в ячейку можно ввести символ неразрывного пробела –   (non-breaking space). Ячейка будет пустой, но с рамкой вокруг нее. Ячейка таблицы может содержать в себе другую таблицу.

Ячейка заголовка столбца таблицы помечается тегом <th> </th> (закрывающий тег необязателен). Содержание такой ячейки будет выровнено по центру и выделено полужирным шрифтом.

Таблица в html описывается построчно, ячейки объединяются в строки тегами <tr> </tr>(закрывающий тег необязателен)

В таблице можно использовать колонтитулы:

• верхний – элемент THEAD <thead> </thead>, в таблице помещается только один раз;

• нижний – элемент TFOOT <tfoot> </tfood>, в таблице помещается только один раз;

• основной – элемент TBODY <tbody> </tbody>, может встречаться в таблице несколько раз.

Наличие закрывающих тегов у элементов колонтитула обязательно. Верхний и нижний колонтитулы функционально очерчивают логические заголовки соответствующего уровня и используются в основном для больших таблиц, не помещающихся в пределах одной страница электронного документа. Каждый из элементов должен содержать группу строк заданную элементом TR.

Элементы COLGROUP и COL позволяют объединить в группу несколько ячеек расположенных в одном столбце для единообразного представления данных в объединенных ячейках. Таблица может содержать любое число явных групп столбцов. <colgroup> </colgroup> Атрибуты:

span – число столбцов в группе (по умолчанию один),

width – ширина каждого столбца в текущей группе.

<col> нет конечного тега, служит для создания группы ст

span – число столбцов в группе (по умолчанию один),

width – имеет приоритет над соответствующим атрибутом из элемента COLGROUP

COL может содержаться внутри COLGROUP. Внутри COL ничего не может быть (не содержит)

Пример: в таблице 40 столбцов

< COLGROUP width=”20 px”>

< COL span=”38”>

< COL class=”mycllus” span=”2” >

</ COLGROUP>

Списки

Еще одним способом структурирования текста являются списки. В каждом списке должен быть хотя бы один элемент. В HTML 4.0 предусматривается 3 основных типа списков:

- неупорядоченные (маркированные)

- упорядоченные (нумерованные)

- списки определений