русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Неупорядоченные списки.


Дата добавления: 2013-12-23; просмотров: 759; Нарушение авторских прав


Списки

Таблицы

Ссылки

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 происходит по строкам сверху вниз, а в строке ячейки по порядку слева направо.

В приведенной таблице ячейки 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 – содержимое ячейки должно быть показано в одну строку.

Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если рамка нужна, в ячейку можно ввести символ неразрывного пробела – &nbsp; (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 основных типа списков:

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

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

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

Элемент UL <ul> </ul>- обязательные, внутри перечисленные элементы списка, каждый помечен<li> </li> (закрывающий необязателен). Браузер отображает элементы списка, каждый с новой строки с отступом и маркером. Атрибуты type и compact являются нежелательными. Вид маркера определяется в стиле с помощью свойства list- style- type:

- None

- Circle (окружность)

- Disk (черный круг) по умолчанию

- Square (квадрат) может быть закрыт

Другие параметры

list- style- position положение маркера элемента (внутри или вне элемента)

- outside (вне) по умолчанию

- inside (внутри)

- list- style- image определенный URL адрес графического маркера

- none по умолчанию

- URL адрес графического файла url (…)

Общий параметр list-style: вид_маркера положение адрес_графического_маркера



<== предыдущая лекция | следующая лекция ==>
Расположение элемента | Как устроена форма


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.009 сек.