Содержание
-
Списки в HTML-документе
-
Списки в HTML-документе.
Маркированные -- обозначенные маркером Нумерованные -- обозначенные цифрами Словарного типа -- обозначенные буквами Немаркированные -- не обозначенные маркером,разделённые по определению.
-
Нумерованный список html страницы
Для создания нумерованных списков используются тэги
-
Тэгом
- отмечается начало/окончание всего списка.
Тэгом
- обозначают начало/конец отдельного элемента списка. По умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить стиль нумерации START - служит для задания начального номера списка, отличного от 1. VALUE - дает возможность назначить произвольный номер любому элементу списка.
-
Тэгом
-
-
Маркированный список html страницы
Для создания маркированных списков применяют тэги
-
Тэгом
- обозначают начало/конец отдельного элемента списка. По умолчанию элементы списка маркируются черным кружочком. При помощи атрибута TYPE можно изменить стиль маркирования. В пределах одного списка можно использовать различную маркировку элементов списка.
- отмечается начало/окончание всего списка.
Тэгом
-
-
Многоуровневый список html страницы
Для создания многоуровневых списков можно использовать как маркированные, так и нумерованные списки, а также их сочетание. Многоуровневый список получается путем вложения одного списка в тело другого. Главная задача при этом не запутаться. Для этого советую делать различные отступы для отдельных списков.
-
Код может выглядеть так:
- Первая страница
- Первый абзац первой страницы
- Второй абзац первой страницы
- Третий абзац первой страницы
- Вторая страница
- Первый абзац второй страницы
- Второй абзац второй страницы
- Третий абзац второй страницы
-
Результат:
Первая страница Первый абзац первой страницы Второй абзац первой страницы Третий абзац первой страницы Вторая страница Первый абзац второй страницы Второй абзац второй страницы Третий абзац второй страницы
-
Списки определений html страницы
Для создания списков определений используют три тэга:
- начало/конец списка. - начало/конец конкретного термина. - начало/конец поясняющей статьи термина. Тэги и не обязательно чередовать. Т.е. можно "привязать" к одному определению несколько терминов, и, наоборот. -
-
Таблицы HTML-документа
-
Теги Таблиц
Таблицы в документе определяются тегами:
- открывающим - закрывающим.Как известно, любая таблица состоит изстрок - ... - истолбцов - ... - Причём, сначала прописываются теги строк, а внутри них - теги столбцов! -
-
Размеры столбцов
Простые размеры ячеек можно задать обозначив ширину и высоту столбцов через атрибуты:
- ширина столбца - высота столбцаПричём, ширину можно задать для каждого столбца, но только верхней строки - нижние строки выровняются автоматически.Высоту можно задать для каждой строки, но только одного столбца - остальные выровняются автоматически. -
Обрамление таблицы документа html
Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга
. Например, BORDER=“1” Определяя рамку таблицы, надо указать толщину ее внешних линий в пикселях. Чтобы задать толщину разграничивающих линий внутри таблицы, необходимо воспользоваться атрибутом CELLSPACING. Например, CELLSPACING=“1” По умолчанию браузер отображает рамку таблицы темно-серым цветом. Чтобы изменить цвет рамки надо применить атрибут BORDERCOLOR. -
-
Заголовок таблицы документа html
Для создания заголовка таблицы служит тэг
. По умолчанию браузер располагает заголовок таблицы по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей. Следует сказать, что стандарт HTML не позволяет ставить одной таблице несколько заголовков. -
-
Группирование столбцов документа html
Для группирования столбцов таблицы служат тэги
и . Дескриптор создает структурную группу столбцов, которая выделяет множество логически однородных ячеек. Так одна структурная группа может охватывать ячейки заголовков столбцов, а другая - ячейки, содержащие данные. Дескриптор предназначен для формирования неструктурных групп столбцов, которые делят таблицу на разделы, не имеющих отношения к структуре. Это удобно в том случае, когда не все столбцы содержат информацию одного типа. -
-
Выравнивание данных в таблице html страницы
Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN. Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево. Атрибут VALIGN выравнивает данные по вертикали. По умолчанию информация выравнивается посередине. Средствами выравнивания можно пользоваться в отдельной ячейке, строке, группе столбцов, группе строк. Самым высоким приоритетом обладает атрибут выравнивания в ячейках таблицы. Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN="top", данные будут размещены на расстоянии трех пикселей от верхней границы ячейки.
-
-
Слияние ячеек таблицы html-страницы
При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку. Атрибут COLSPAN тэгов
, позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки. Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца. Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию. Т.к. при выполнении операций слияния очень легко запутаться, то настоятельно рекомендую сделать предварительный эскиз таблицы на бумаге. -
-
Отображение границ таблицы html-страницы
Если значение атрибута BORDER тэга
отлично от нуля, то браузер заключает таблицу в рамку и разграничивает соседние строки и столбцы таблицы. При помощи атрибутов FRAME, RULES можно указать какие именно части обрамлений таблицы следует показывать. Атрибут FRAME служит для определения фрагментов внешнего очертания таблицы. Атрибут RULES - указывает набор внутренних разделительных линий. Ниже приведены допустимые значения этих атрибутов. -
-
-
Вложенные таблицы html-страницы
Вложение таблиц одну в другую - очень распространенный прием оформления внешнего вида web-страницы. Прежде всего надо построить главную таблицу, а затем в ее ячейках разместить дочерние таблицы. Определяя таблицы, надо не забывать включать в их описание все закрывающие тэги, содержащие символ косой черты, т.к. пропуск всего одного такого дескриптора исказит таблицу кардинальным образом. Не следует, также, злоупотреблять вложением, т.к. в этом случае существенно замедляется загрузка страницы браузером. Форматирование вложенных таблиц осуществляется по общим правилам, что, собственно и делает страницу привлекательной.
-
-
Слои
-
Код слоя: содержимое слоя id- это индивидуальное имя слоя, совпадать и повторяться оно не должно! style - это вид слоя, то есть способ его отображения. Без этого параметра сам по себе тег div может служить лишь способом форматирования вложенного в него текста - без главных особенностей, присущих слоям - таких, как расположение поверх чего угодно. left- расстояние от левого края: может быть как в пихелях, так и в процентах от общей ширины экрана. top- расстояние от верха. ну, ширина и высота вам уже известны, их не упоминаю. z-index- значение может быть только цифрой. Причем, чем меньше эта цифра, тем выше находится слой по отношению к другим слоям.
-
Дополнительные возможные теги: background-color: цвет фона layer-background-color:цвет слоя border: 1px none- если убрать "ноне", то вокруг слоя появится бордюрчик 1 пихель толщиной.
-
Код HTML для примера показан ниже. Пример 1. Создание слоев
Слой 1 наверхуСлой 1Слой 2Слой 2 наверху Слой 1Слой 2 -
Карта ссылок документа html
Карта ссылок- это изображение, разбитое на определенные зоны, каждая из которых представляет собой гиперссылку. После щелчка кнопкой мыши в пределах зоны браузер открывает страницу, отвечающую этой зоне. Для удобства выбора зоны изображение должно состоять, по возможности, из четко разграниченных областей. Прежде чем создавать карту ссылок, надо в графическом редакторе определить координаты крайних точек зон. Зоны могут быть трех типов. Прямоугольная зона (rect). В этом случае задаются координаты двух точек - левого верхнего угла, правого нижнего угла. Многоугольник (poly). В этом случае задаются координаты каждой точки многоугольника. Круг (circle). В этом случае задается координата центра круга и его радиус.
-
Для создания карты ссылок необходимо вставить нужное изображение с помощью дескриптора , затем, при помощи атрибута USEMAP, присвоить ему имя. После этого можно приступить непосредственно к вводу данных при помощи тэга . Дескриптор определяет зоны изображения карты ссылок. Атрибут SHAPE описывает форму зоны карты ссылок. Атрибут COORDS назначает координаты конкретной зоны. Количество точек в этом атрибуте зависит от формы зон (прямоугольник, круг, многоугольник). Если при вводе координат произошла ошибка, то браузер воспринимает область пересечения как часть той зоны, которая описана первой. Если же введенные координаты выходят за границы изображения, то они игнорируются браузером. Атрибут HREF указывает страницу на которую ведет данная зона карты ссылок.
-
Ниже представлена простая карта ссылок (изображения-ссылки) с исходным кодом. Изображение условно разбито на четыре прямоугольных области.
-
Задания для самостоятельного выполнения:
Задание 1: Создать страницу «Виды информации», поместить на страницу Список 1 и оформить уровни списка. Список 1. 1. Рынок информационных услуг. 1.1. Деловая информация. 1.2. Биржевая информация. 1.3. Статистическая информация. 1.4. Коммерческая информация. 2. Информация для специалиста. 2.1: Профессиональная. 2.2. Научно-техническая. 2.3. Доступ к первоисточникам. 3. Потребительская информация. 3.1. Новости и литература. 3.2. Развлекательная. 3.3. Сервисная. • Расписание транспорта. • Заказ товаров и услуг.
-
-
-
Очень часто для решения необходимой задачи нужно использовать способ вложения таблиц одну в другую. Получается что-то похожее на русскую матрёшку:
-
Нет комментариев для данной презентации
Помогите другим пользователям — будьте первым, кто поделится своим мнением об этой презентации.